Google Page Speed Optimization – Επιτύχετε βαθμολογία 100/100

google page speed optimization

Πώς να επιτύχετε βαθμολογία 100/100 με το εργαλείο Ελέγχου Ταχύτητας Φόρτωσης Σελίδας της Google

Η ταχύτητα φόρτωσης μίας ιστοσελίδας αποτελεί προτεραιότητα όσον αφορά τη συνολική εμπειρία χρήστη, καθώς είναι επίσης ένας από τους εκατοντάδες παράγοντες Βελτιστοποίησης Μηχανών Αναζήτησης (SEO) που καθορίζουν την κατάταξη των ιστοσελίδων. Είναι αλήθεια ότι, σήμερα, οι άνθρωποι δεν έχουν υπομονή να περιμένουν πάνω από πέντε δευτερόλεπτα για να φορτώσει μία σελίδα. Αν η ιστοσελίδα δεν φορτώνει με ικανοποιητική ταχύτητα, θα χάσετε υποψήφιους πελάτες.
Καθώς πάνω από το 50% της διαδικτυακής επισκεψιμότητας προέρχεται από κινητές συσκευές, όλοι περιμένουν μία σελίδα να φορτώνει σχεδόν αμέσως. Έχοντας αυτό υπόψη, σε αυτό το άρθρο, θα σας δείξω πώς καταφέραμε να επιτύχουμε βαθμολογία 100/100 με το Εργαλείο PageSpeed Insights της Google για το Monitor Backlinks, τόσο σε επιτραπέζιες, όσο και σε φορητές συσκευές.

Πώς να κάνετε τις σελίδες να φορτώνουν ταχύτερα

Πριν αρχίσουμε να σας δείχνουμε τα βήματα ακριβώς που ακολουθήσαμε, επιτρέψτε μου να σας πω ότι το εργαλείο PageSpeed είναι απλά ένας οδηγός για βέλτιστες πρακτικές επιδόσεων ιστού. Παρέχει προτάσεις βελτιστοποίησης του ιστότοπού σας που σχετίζονται με την ταχύτητα φόρτωσης σελίδας, καθώς η επίτευξη θετικών αποτελεσμάτων εξαρτάται από τον τρόπο στησίματος του περιβάλλοντος εξυπηρετητή σας.
Παρότι για κάποια από αυτά τα βήματα απαιτείται εξειδικευμένη τεχνική γνώση, για κάποια άλλα δεν ισχύει αυτό. Σημειώστε ότι μπορεί να συνοδεύεται από τη χρήση σχεδόν οποιουδήποτε Συστήματος Διαχείρισης Περιεχομένου (Content Management System-CMS).

Βήμα #1: Βελτιστοποίηση εικόνων

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

  • Συμπιέσαμε όλες τις εικόνες χρησιμοποιώντας εργαλεία όπως το Compressor.io και το TinyPNG. Τα εργαλεία αυτά είναι δωρεάν και έχουν τη δυνατότητα να μειώσουν το μέγεθος των αρχείων εικόνας πάνω από 80% σε ορισμένες περιπτώσεις, χωρίς να υποβαθμίζουν την ποιότητα της εικόνας.
  • Μειώσαμε το μέγεθος των εικόνων στις ελάχιστες διαστάσεις, χωρίς να υποβαθμίσουμε την ποιότητα των εικόνων. Για παράδειγμα, αν θέλουμε να βάλουμε μία εικόνα διαστάσεων 150x150px στην ιστοσελίδα μας, αυτό ακριβώς είναι το μέγεθος που θα πρέπει να έχει η εικόνα στον εξυπηρετητή μας. Δεν θα πρέπει ποτέ να βάζετε μεγαλύτερες εικόνες από ό, τι θέλετε να εμφανίζονται ή να μειώνετε το μέγεθός τους, χρησιμοποιώντας ετικέτες CSS ή HTML.

Κατεβάσαμε κάθε μία από τις εικόνες μας, στη συνέχεια τις συμπιέσαμε, και αναπροσαρμόσαμε το μέγεθός τους χειροκίνητα. Μετά τη βελτιστοποίηση αυτών των εικόνων, είναι καλό να αποκτήσετε τη συνήθεια να βελτιστοποιείτε όλες τις νέες εικόνες που ανεβάζετε στον εξυπηρετητή σας. Κάθε νέα εικόνα θα πρέπει να συμπιέζεται και το μέγεθός της να αναπροσαρμόζεται.
Η Google παρέχει επίσης την επιλογή κατεβάσματος των ήδη βελτιστοποιημένων εικόνων σας, και μετά μπορείτε απλά να τις ανεβάσετε στον εξυπηρετητή σας. Μπορείτε να κάνετε το ίδιο με το JavaScript και το CSS.

Βήμα #2: Ελαχιστοποίηση του CSS & του JavaScript

Η Google μας λέει τώρα ότι θα πρέπει να ελαχιστοποιήσουμε τα αρχεία μας JavaScript και CSS.
Η διαδικασία ελαχιστοποίησης μειώνει το μέγεθος των αρχείων σας μέσω της διαγραφής των κενών, χαρακτήρων και σχολίων που δεν χρειάζονται από τα αρχεία σας CSS και JavaScript. Οι προγραμματιστές συχνά αφήνουν πολλά κενά και σχόλια κατά την κωδικοποίηση, τα οποία μπορεί ακόμη και να διπλασιάσουν το μέγεθος των αρχείων σας CSS και JavaScript.
Για να διορθώσουμε αυτό το πρόβλημα, εγκαταστήσαμε το Gulpjs στον εξυπηρετητή μας. Το εργαλείο αυτό δημιουργεί αυτόματα ένα νέο αρχείο CSS και αφαιρεί όλα τα κενά. Δημιουργεί επίσης ένα νέο αρχείο CSS αυτόματα για όλες τις νέες αλλαγές που κάνετε. Στη δική μας περίπτωσή, μας βοήθησε να μειώσουμε το μέγεθος του βασικού αρχείου μας CSS από περίπου 300kb, στα 150kb. Όλη η διαφορά ήταν χαρακτήρες που δεν χρειάζονταν. Για περισσότερες οδηγίες σχετικά με το πώς να αφαιρέσετε τα κενά, ρίξτε μια ματιά στον οδηγό της Google.
Αν χρησιμοποιείτε το WordPress, θα σας συνιστούσα να εγκαταστήσετε το πρόσθετο Autoptimize.
Μπορείτε επίσης να κατεβάσετε τα βελτιστοποιημένα αρχεία από το εργαλείο PageSpeed.

Βήμα #3: Μόχλευση της κρυφής μνήμης του περιηγητή

Για πολλούς διαχειριστές ιστοσελίδας, η μόχλευση της κρυφής μνήμης του περιηγητή είναι το δυσκολότερο κομμάτι.
Για να διορθώσουμε αυτό το πρόβλημα, μεταφέραμε κάθε στατικό αρχείο, από την ιστοσελίδα μας, σε ένα Δίκτυο Διανομής Περιεχομένου (Content Delivery Network-CDN).
To CDN είναι ένα δίκτυο πολλών εξυπηρετητών που βρίσκονται σε διάφορες τοποθεσίες ανά τον κόσμο. Έχει τη δυνατότητα αποθήκευσης της στατικής έκδοσης της ιστοσελίδας, όπως εικόνες, αρχεία CSS και JavaScript σε κρυφή μνήμη. Το CDN αποθηκεύει αντίγραφα του περιεχομένου της ιστοσελίδας σας στους εξυπηρετητές του, ώστε όταν κάποιος επισκέπτεται την ιστοσελίδα σας, το στατικό περιεχόμενο να φορτώνεται από τον εξυπηρετητή που βρίσκεται πιο κοντά στο χρήστη.
Για παράδειγμα, αν ο κύριος εξυπηρετητής της ιστοσελίδας είναι από το Τέξας, χωρίς το CDN, ένας επισκέπτης από το Άμστερνταμ θα πρέπει να περιμένει να φορτώσει ο εξυπηρετητής την ιστοσελίδα, διανύοντας όλη την απόσταση από τις ΗΠΑ. Με το CDN, η ιστοσελίδα σας φορτώνεται από μία τοποθεσία που βρίσκεται πιο κοντά στον χρήστη. Στην περίπτωση αυτή, από μία τοποθεσία που βρίσκεται πιο κοντά στο Άμστερνταμ. Επομένως, η ιστοσελίδα θα φορτώσει ταχύτερα.
Μεταφέραμε όλες τις εικόνες, τα αρχεία JavaScript και CSS στο CDN κρατώντας μόνο το αρχείο HTML στο κύριο εξυπηρετητή μας. Η φιλοξενία των εικόνων μας σε CDN θα κάνει τη διαφορά σχετικά με το πόσο γρήγορα φορτώνουν οι σελίδες μας για τους διαδικτυακούς επισκέπτες.
Αφού το κάναμε αυτό, το εργαλείο PageSpeed συνέχισε να μας «ενοχλεί», προτείνοντας να μοχλεύσουμε την αποθήκευση κρυφής μνήμης του περιηγητή μας για κάποιους πόρους τρίτων.
Διορθώσαμε το πρόβλημα των σεναρίων ενεργειών των μέσων κοινωνικής δικτύωσης αντικαθιστώντας τους μετρητές που μας παρείχαν αυτά, με κάποιες στατικές εικόνες που φιλοξενούνταν στο CDN. Αντί να έχουμε σενάρια ενεργειών τρίτων, τα οποία προσπαθούσαν να αποκτήσουν πρόσβαση στα δεδομένα από το Twitter, το Facebook ή το Google Plus για να υπολογίσουν τον αριθμό των ακόλουθων, παρείχαμε φιλοξενία σε αυτά εμείς οι ίδιοι και λύσαμε το πρόβλημα.
Ένα ακόμη πιο εκνευριστικό πρόβλημα από αυτό των σεναρίων ενεργειών των μέσων κοινωνικής δικτύωσης, ήταν ότι ο κώδικας του Google Analytics καθυστερούσε την ιστοσελίδα μας.
Για να λύσουμε το πρόβλημα του σεναρίου ενεργειών του Google Analytics, κάναμε κάτι που είναι μάλλον δύσκολο. Καθώς θέλαμε να αφαιρέσουμε το Analytics από την ιστοσελίδα μας, έπρεπε να βρούμε μία διαφορετική λύση.
Ο κώδικας του Analytics σπάνια τροποποιείται από τη Google πάνω από μία ή δύο φορές τον χρόνο. Έτσι, ο Razvan δημιούργησε ένα σενάριο ενεργειών που έτρεχε κάθε οκτώ ώρες, για να επαληθεύσει πότε ήταν η τελευταία φορά που τροποποιήθηκε ο κώδικας του Analytics. Το σενάριο ενεργειών κατεβάζει πάλι τον κώδικα του Analytics, μόνο αν εντοπιστούν νέες αλλαγές. Με αυτόν τον τρόπο, μπορούμε να φιλοξενήσουμε τον κώδικα JavaScript του Analytics στον εξυπηρετητή μας, χωρίς να πρέπει να τον φορτώνουμε από τους εξυπηρετητές της Google σε κάθε επίσκεψη.
Αν δεν έχει συμβεί καμία αλλαγή, τότε ο κώδικας του Analytics θα φορτώνει στο CDN μας από την έκδοση που έχει αποθηκευτεί στην κρυφή μνήμη.
Όταν η Google τροποποιήσει ξανά τον κώδικα JavaScript, ο εξυπηρετητής μας θα κατεβάσει αυτόματα τη νέα έκδοση, και θα την ανεβάσει στο CDN. Χρησιμοποιήσαμε αυτό το σενάριο ενεργειών για όλα τα εξωτερικά σενάρια ενεργειών τρίτων.

Βήμα #4: Διαγραφή πόρων που εμποδίζουν την απόδοση στο επάνω μέρος της σελίδας

Η διαγραφή των φραγμών απόδοσης είναι ένα από τα πιο πολύπλοκα σημεία όσον αφορά τη βελτίωση της ταχύτητας φόρτωσης μίας σελίδας, γιατί απαιτεί περισσότερες τεχνικές γνώσεις. Το κύριο πρόβλημα που έπρεπε να αντιμετωπίσουμε ήταν η μεταφορά όλου του κώδικα JavaScript, από την επικεφαλίδα και το κυρίως σώμα, στην περιοχή στο κάτω μέρος όλων των σελίδων του ιστότοπου.
Αν χρησιμοποιείτε το WordPress, το πρόσθετο Autoptimize που πρότεινα παραπάνω, θα μπορούσε να σας βοηθήσει σε αυτό το έργο. Ελέγξτε τις ρυθμίσεις του, στη συνέχεια απενεργοποιήστε την εντολή «Force JavaScript» στο <head> και επιλέξτε «Inline all CSS».

Βήμα #5: Παροχή δυνατότητας συμπίεσης

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

Βήμα #6: Βελτιστοποίηση της εμπειρίας σε κινητή συσκευή

Η εμπειρία σε κινητή συσκευή, σημαίνει πάνω απ’ όλα την εμφάνιση μίας αντίστοιχης έκδοσης, η οποία ανταποκρίνεται σε κάθε διαφορετικό τύπο ανάλυσης οθόνης χρησιμοποιώντας κατάλληλες γραμματοσειρές και διαθέτοντας ένα αποτελεσματικό σύστημα πλοήγησης.
Μπορείτε να ελέγξετε την εμφάνιση της ιστοσελίδας σας σε διαφορετικές εκδόσεις για κινητές συσκευές, χρησιμοποιώντας το Google Chrome. Πιέστε το πλήκτρο του καταλόγου επιλογών στην πάνω δεξιά γωνία και στη συνέχεια το πλήκτρο «Περισσότερο Εργαλεία – Εργαλεία Προγραμματιστή». Στην αριστερή πλευρά, μπορείτε να επιλέξετε να δείτε την εμφάνιση της ιστοσελίδας σας σε διαφορετικές αναλύσεις για κινητή συσκευή.

Συμπέρασμα

Αυτά είναι τα πιο σημαντικά βήματα που ακολουθήσαμε για να κάνουμε το Monitor Backlinks να επιτύχει βαθμολογία 100/100 με το εργαλείο ελέγχου ταχύτητας της Google. Δεν βελτιστοποιήσαμε μόνο την αρχική σελίδα, αλλά και μία εσωτερική, αυτήν του ελέγχου συνδέσμων επιστροφής.

Οι τρεις σημαντικότερες ενέργειες, στις οποίες μπορείτε να προχωρήσετε για να βελτιώσετε την ιστοσελίδα σας, είναι:

  • Χρησιμοποιήστε ένα CDN (Δίκτυο Διανομής Περιεχομένου).
  • Διορθώστε τα ζητήματα φραγμού απόδοσης. (Αποφύγετε να συμπεριλάβετε το JavaScript στο κυρίως σώμα της κωδικοποίησής σας. Ο κώδικάς σας για το JavaScript θα πρέπει να τοποθετηθεί στο κάτω μέρος των αρχείων.)
  • Βελτιστοποιήστε το μέγεθος των εικόνων και συμπιέστε τις.

Έχει αναλάβει η ομάδα σας ένα παρόμοιο έργο για την ιστοσελίδα σας; Αν ναι, ποια ήταν τα αποτελέσματα;

2 Σχόλια

Αφήστε μια απάντηση