Εφαρμόστε αυτές τις 6 τεχνικές για να βελτιώσετε την ταχύτητα φόρτωσης του κινητού σας ιστότοπου

Πίνακας περιεχομένων:

Anonim

Ενώ υπάρχουν αναμφισβήτητα διάφοροι παράγοντες που επηρεάζουν τα έσοδα, οι περισσότεροι ειδικοί λένε ότι οι επιχειρηματικοί χώροι φόρτωσης μέσα σε 5 δευτερόλεπτα κερδίζουν σχεδόν διπλάσιοι από αυτούς που το κάνουν σε 19, ο μέσος χρόνος φόρτωσης του ιστότοπου.

Η μελέτη έχει επίσης διαπιστώσει ότι οι τοποθεσίες φόρτωσης μέσα σε 5 δευτερόλεπτα έχουν:

  • 25% υψηλότερη προβολή διαφημίσεων,
  • 35% χαμηλότερο ποσοστό εγκατάλειψης, και
  • 70% μεγαλύτερες συνεδρίες χρηστών.

Αυτός είναι ακριβώς ο λόγος για τον οποίο πρέπει να επικεντρωθούμε σε λύσεις για κινητές συσκευές που θα βοηθήσουν τις επιχειρήσεις μας να πετύχουν. Σε τελευταία ανάλυση, η ταχύτητα του κινητού δεν ήταν ποτέ πιο σημαντική.

$config[code] not found

Η αργή ταχύτητα φόρτωσης μπορεί να είναι πραγματικά πρόβλημα

Σύμφωνα με την Google,
  • 1 στα 2 άτομα αναμένουν να φορτωθεί μια σελίδα μέσα σε λιγότερο από 2 δευτερόλεπτα.
  • Το 53% των επισκέψεων είναι πιο πιθανό να εγκαταλειφθεί εάν η σελίδα διαρκεί περισσότερο από 3 δευτερόλεπτα για φόρτωση σε μια κινητή συσκευή.
  • Το 46% των ανθρώπων έχει δείξει δυσαρέσκεια αναμένοντας την φόρτωση σελίδων κατά την περιήγηση στον ιστό σε μια κινητή συσκευή.

Οι 3 κύριοι παράγοντες που επιβραδύνουν τις τοποθεσίες στο κινητό διαδίκτυο είναι ο αριθμός των αιτημάτων διακομιστή, το μέγεθος του αρχείου και η διαδοχική σειρά των στοιχείων φόρτωσης σελίδας. Τώρα λοιπόν έχουμε επισημάνει τα αίτια. ας φτάσουμε στη λύση.

Πώς να αυξήσετε την ταχύτητα του Mobile Site

Μετρήστε και ελαχιστοποιήστε το χρόνο απόκρισης του διακομιστή σας

Η ταχύτητα της σελίδας σας για κινητά δεν εξαρτάται μόνο από τον κωδικό σας, αλλά βασίζεται επίσης σε ένα σημαντικό εργαλείο τεχνολογίας που ονομάζεται διακομιστής.

Όσο περισσότερο το διακομιστή σας αναμένει να ανταποκριθεί σε ένα αίτημα του προγράμματος περιήγησης, τόσο αργότερα η σελίδα σας φορτώνεται στη συσκευή. Οι περισσότεροι ειδικοί της Google συστήνουν ότι ο διακομιστής σας ξεκινά τη μετάδοση του 1st byte των πόρων μέσα σε διακόσια χιλιοστά του δευτερολέπτου από ένα αίτημα για ένα βέλτιστο αποτέλεσμα.

Συνήθως, υπάρχουν 3 κύριες μέθοδοι που εμπλέκονται στην ανύψωση του χρόνου απόκρισης του διακομιστή σας:

  • Βελτίωση της διαμόρφωσης ή του λογισμικού του διακομιστή ιστού.
  • Βελτίωση του εύρους και της ποιότητας της υπηρεσίας φιλοξενίας σας, εξασφαλίζοντας ιδιαίτερα την επαρκή μνήμη και τους πόρους της CPU.
  • Μείωση του αριθμού των πόρων που απαιτούνται από τις ιστοσελίδες σας.

Χρησιμοποιήστε το CSS για να φορτώσετε εικόνες

Αν θέλετε να αποκρύψετε τις εικόνες περιεχομένου σας για χρήστες κινητών, φορτώστε τις ως εικόνες φόντου μέσω του CSS και χρησιμοποιήστε ερωτήματα μέσων για να τα αποκρύψετε με όρους.

Μια παραλλαγή αυτής της τεχνικής χρησιμοποιείται από την Amazon για να φορτώσει υπό όρους εικόνες συγκεκριμένης συσκευής.

Ελαχιστοποιήστε τον αριθμό των ανακατευθύνσεων για να αυξήσετε την ταχύτητα του κινητού σας σελίδας

Οι ανακατευθύνσεις δεν είναι τίποτα άλλο παρά οδηγίες που μπορούν να λαμβάνουν αυτόματα επισκέπτες ιστοτόπου από τη μια σελίδα στην άλλη.

Κάθε ανακατεύθυνση μπορεί να φτάσει πολύτιμα χιλιοστά του δευτερολέπτου, με αποτέλεσμα να επιβραδύνεται η φόρτωση σελίδας. Αυτό είναι ιδιαίτερα προβληματικό για τις κινητές συσκευές, επειδή εξαρτώνται συχνά από αναξιόπιστα δίκτυα σε σχέση με τους χρήστες υπολογιστών γραφείου.

Το πρώτο βήμα για την επίλυση αυτού του ζητήματος είναι να ερευνήσετε τον αριθμό των ανακατευθύνσεων στον ιστότοπό σας, χρησιμοποιώντας εργαλεία όπως ο ανασχεδιασμός του χαρτογράφου. Εάν ο αριθμός είναι υπερβολικά μεγάλος, ελαχιστοποιήστε τον ή, ιδανικά, μειώστε το στο μηδέν για τα καλύτερα αποτελέσματα.

Μείωση των αρχείων JS και CSS

Περισσότερο δεδομένα σημαίνει υπερβολικό βάρος σελίδας. Αυτό θα κάνει τις σελίδες σας να φορτιστούν περισσότερο σε μια κινητή συσκευή.

Αυτός είναι ο λόγος για τον οποίο οι περισσότεροι προγραμματιστές ιστού που αξίζουν τη διάθεσή τους γνωρίζουν την ανάγκη βελτιστοποίησης και ελαχιστοποίησης περιουσιακών στοιχείων για την αύξηση της ταχύτητας φόρτωσης σελίδας.

Το "Minification" εξαλείφει την πλεοναστικότητα χωρίς να επηρεάζει την εμφάνιση μιας σελίδας. Μια ευρεία γκάμα εργαλείων Google μπορεί να σας βοηθήσει να εξαλείψετε αυτές τις απολύσεις, συμπεριλαμβανομένων των likes:

  • CSSNano (για το CSS)
  • UglifyJS (για JS)

Αντί των εικόνων, χρησιμοποιήστε το CSS3

Οι σκιάσεις, οι στρογγυλεμένες γωνίες και οι κλίσεις γεμίζουν - όλα αυτά τα χαρακτηριστικά μπορούν να γίνουν μέσω του CSS αντί των εικόνων.

Αυτό μπορεί να βοηθήσει σημαντικά στη μείωση του αριθμού των αιτήσεων HTTP, επιταχύνοντας έτσι τον χρόνο φόρτωσης ταυτόχρονα.

Χρησιμοποιήστε Inline SVGs αντί για JPEGs

Όπως και οι URI δεδομένων, τα SVG (κλιμακωτά διανυσματικά γραφικά) μπορούν να ενσωματωθούν σε μια σελίδα για να μειωθεί ο αριθμός των αιτήσεων

Αυτά τα αρχεία μπορούν να δημιουργηθούν σε έναν επεξεργαστή διανυσματικών γραφικών όπως το Inkscape, το Adobe Illustrator κ.λπ. Μόλις δημιουργηθεί, μπορείτε να το ανοίξετε σε ένα πρόγραμμα επεξεργασίας κειμένου και να το αφήσετε στον κώδικα.

Σημείωση: Για να ενσωματώσετε ένα SVG στο φύλλο στυλ σας, πρέπει πρώτα να το μετατρέψετε σε URI δεδομένων και στη συνέχεια να προχωρήσετε στο επόμενο βήμα.

Έτσι, περισσότερο ή λιγότερο αθροίζει τα πράγματα. Ελπίζω να είχατε μια καλή και διαφωτιστική ανάγνωση.

Φωτογραφία μέσω Shutterstock

1