Πέμπτη, 28 Μαρτίου, 2024

Google PageSpeed Insights – Κάνε το blog σου πιο γρήγορο από ποτέ!

Share

Το να τρέχεις διάφορα τεστ με εργαλεία όπως το Google PageSpeed Insights, το Pingdom ή ακόμα και το GTMetrix, είναι ένας από τους καλύτερους τρόπους για να καταλάβεις πως να κάνεις το blog σου πιο γρήγορο. Η ταχύτητα παίζει μεγάλο ρόλο στο SEO αλλά και στην εμπειρία που θα έχει ένας χρήστης όσο θα βρίσκεται μέσα στο blog σου.

Στον σημερινό οδηγό θα σε βοηθήσω να διορθώσεις τα βασικότερα προβλήματα που αφορούν το χαμηλό σκορ του blog σου στο Google PageSpeed Insights. Πράμα που σημαίνει πως μόλις τα διορθώσεις όλα, το SEO του blog σου θα αυξηθεί και μέσα στις επόμενες μέρες θα δεις ένα καλύτερο και πιο “απολαυστικό” search ranking.

Σημαντικές σημειώσεις:

  • Το άρθρο είναι λίγο μεγάλο. Λίγο όμως.
  • Θα σπάσεις το κεφάλι σου. Εγγύηση όχι αστεία.
  • Κάποια πράγματα μπορεί να τα κάνει μόνο ένας developer, θα καταλάβεις ποια.
  • Αν τα κάνεις όλα και αυξήσεις την ταχύτητα, θα ευχαριστήσεις την Google. Και όποιος ευχαριστεί την Google περνάει καλά. Α ναι, και τους αναγνώστες σου, γιατί θα έχεις γρήγορο blog.
  • Οι σημειώσεις δεν ήταν σημαντικές. Βασικά, οι δύο τελευταίες ήταν.

Τι είναι το Google PageSpeed Insights και πως επηρεάζει το SEO του blog μου;

Το Google PageSpeed Insights είναι ένα online εργαλείο καταμέτρησης της ταχύτητας των ιστοσελίδων, το οποίο δημιουργήθηκε από την Google για να σε βοηθήσει να κάνεις την ιστοσελίδα σου γρηγορότερη και πιο mobile-friendly, ακολουθώντας τις συμβουλές που σου παρέχονται.

Διάβασε επίσης: Τα δημοφιλέστερα blogging εργαλεία για το 2018

Ένα πολύ σημαντικό πράγμα που πρέπει να θυμάσαι είναι πως θα δυσκολευτείς αρκετά να κάνεις το blog σου να χτυπήσει ένα σκορ το οποίο φτάνει τα 100/100 στο Google PageSpeed Insights. Αυτό συμβαίνει καθώς υπάρχουν τόσα εκατοντάδες χιλιάδες themes και plugins εκεί έξω, με τόσα πολλά εξωτερικά scripts, που είναι σχεδόν αδύνατο να πετύχεις το τέλειο σκορ – αλλά όχι ακατόρθωτο.

Το πιο σημαντικό πράγμα που πρέπει να θυμάσαι είναι πως το blog σου θα πρέπει να έχει τουλάχιστον 90/100 σκορ για τις mobile συσκευές και τουλάχιστον 80/100 για τους υπολογιστές.

Ποιες blogging παλτφόρμες επηρεάζονται από το Google PageSpeed Insights;

Όλες! Ακόμα και το Blogger (ή Blogspot, αποκάλεσε το όπως επιθυμείς) επηρεάζεται σημαντικά από το σκορ που παίρνει μέσω του Google PageSpeed Insights. Η Google δεν χαρίζει ούτε στα blogs που βρίσκονται στην δική της πλατφόρμα και με μια γρήγορη δοκιμή θα το καταλάβεις κατευθείαν.

Με όλα αυτά κατά νου, είτε βρίσκεται στο Blogger, είτε στο WordPress, είτε στο Joomla ή Drupal, είτε σε οποιαδήποτε άλλη πλατφόρμα, άσχετα αν έχεις blog, e-commerce, forum κ.α., το Google PageSpeed Insights εργαλείο της Google επηρεάζει το SEO σου.

Σε αυτό το σημείο αξίζει να σημειώσω πως η Google κοιτάει αποκλειστικά και μόνο το δικό της εργαλείο για να αυξήσει το search ranking ενός blog. Που σημαίνει πως, για τους αγαπητούς developers εκεί έξω, αν κοιτάς το Pingdom ή το GTMetrix και παρόμοια εργαλεία, άστα στην άκρη γιατί δεν παίζουν ιδιαίτερα σημαντικό ρόλο – όχι τουλάχιστον σε αυτή την περίπτωση. Το GTMetrix είναι αρκετά καλό για να αυξήσεις την ταχύτητα ακόμη περισσότερο, αλλά εφόσον έχεις διορθώσει τα πάντα στο PageSpeed Insights.

Τι λέει η Google και για το page speed ranking;

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

Σε μια ιδιαίτερα ενδιαφέρον συζήτηση που έγινε από έναν SEO ειδικό του FDP Group Leeds στο Search Engine Roundtable, ο Gary Illyes, ο Webmaster Trend Analyst της Google, απάντησε στο Twitter:

Με την παραπάνω απάντηση μπορούμε γρήγορα να καταλάβουμε πως η Google μετράει τo ranking των σελίδων (συμπεριλαμβανομένων δηλαδή και των άρθρων) βάση τόσο της ταχύτητας ενός blog, όσο και του σκορ του στο PageSpeed Insights. Ως εκ τούτου, δεν φτάνει απλά να έχεις ένα γρήγορο blog, αλλά και ένα καλό σκορ (και το αντίθετο).

Αυτό όμως ήταν ένα απλό παράδειγμα, καθώς στις 9 Απριλίου του 2010, η Google ανέβασε ένα άρθρο στο επίσημο blog της, κάνοντας επίσημη την αναφορά πως η ταχύτητα παίζει σημαντικό ρόλο για το page ranking. Το άρθρο μπορείς να το διαβάσεις στο Webmaster Central Blog της Google.

Πως να κάνεις το blog σου πιο γρήγορο και να αποκτήσεις ένα μεγάλο σκορ

Εφόσον λοιπόν γνωρίζεις πλέον τι είναι το PageSpeed Insights της Google και πόσο σημαντικό ρόλο παίζει το σκορ και η ταχύτητα του blog σου για το page ranking, πάμε να δούμε πως μπορείς να αυξήσεις και τα δύο.

Διάβασε επίσης: Πως να βρεις χρόνο για το blog σου

Σε αυτό το σημείο θα ήθελα να ενημερώσω πως όλος ο οδηγός βασίζεται πάνω στο WordPress και σε καμιά άλλη πλατφόρμα. Τα προβλήματα, ωστόσο, που εμφανίζονται στο PageSpeed Insights εργαλείο είναι τα ίδια για κάθε πλατφόρμα και διορθώνονται με παρόμοιους τρόπους.

Πρώτο βήμα: Έλεγχος ταχύτητας του blog

Το πρώτο πράγμα που πρέπει να κάνεις είναι να ελέγξεις την ταχύτητα του blog σου. Για να το κάνεις αυτό, επισκέψου το εργαλείο της Google, βάλε το σύνδεσμο (URL) του blog σου και κάνε κλικ στο κουμπί “ΑΝΑΛΥΣΗ“.

Google PageSpeed Insights

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

Google PageSpeed Insights

Απ’ όσο μπορείς να δεις από τη παραπάνω φωτογραφία, το Inkstory έχει 94/100 σκορ για τις mobile συσκευές, και 82/100 για τα desktop. Το εργαλείο εμφανίζει το σκορ με πράσινο χρώμα και ακριβώς πάνω από το σκορ γράφει “Good“, που σημαίνει πως το blog βρίσκεται σε μια εξαιρετική κατάσταση από θέματα ταχύτητας και προβλημάτων.

Η αλήθεια είναι πως θα μπορούσα πολύ εύκολα να πάω το σκορ στα 100/100, λύνοντας εύκολα και γρήγορα τα υπόλοιπα προβλήματα που μου εμφανίζει, αλλά είναι τόσο ασήμαντα για εμένα, που δεν έκατσα ποτέ να τα λύσω. Όπως και να ‘χει, το σκορ που θέλω το έχω, και το ίδιο πρέπει να γίνει και με το δικό σου blog.

Δεύτερο βήμα: Πως να λύσεις κάθε πρόβλημα

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

  • Βελτιστοποίηση εικόνων
  • Ελαχιστοποίηση JavaScript και CSS
  • Περιορισμός JavaScript και CSS αποκλεισμού απόδοσης στο περιεχόμενο στο επάνω μέρος
  • Αξιοποίηση της λειτουργίας προσωρινής αποθήκευσης του προγράμματος περιήγησης
  • Ενεργοποίηση συμπίεσης
  • Μείωση χρόνου απόκρισης διακομιστή

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

Βελτιστοποίηση εικόνων

Optimize Images

Όταν βλέπουμε αυτή την ειδοποίηση, σημαίνει πως το Google PageSpeed Insights μας λέει ότι πρέπει να βελτιστοποιήσουμε τις εικόνες μας επειδή είναι πολύ βαριές. Αυτό το πρόβλημα μπορεί να λυθεί πολύ εύκολα με δύο διαφορετικούς τρόπους.

Πρώτος τρόπος: Optimus Image Optimizer

Μπορείς να εγκαταστήσεις το Optimus Image Optimizer plugin στο WordPress blog σου, το οποίο κάνει έξυπνη συμπίεση των φωτογραφιών με έναν συνδυασμό από lossless και lossy τεχνικές συμπίεσης. Παρέχει επίσης το χαρακτηριστικό ‘bulk-optimization’ το οποίο σου επιτρέπει να συμπιέσεις όλες τις φωτογραφίες του blog σου με το πάτημα ενός κουμπιού. Υπάρχει επίσης και η επιλογή ‘auto-compress’ η οποία συμπιέζει αυτόματα κάθε φωτογραφία που ανεβάζεις στο blog σου, χωρίς εσύ να χρειάζεται να κάνεις το οτιδήποτε.

Τέλος, το plugin σου επιτρέπει να μετατρέπεις τις φωτογραφίες σου από JPEG/JPG/PNG σε .webp μορφή. Η .webp μορφή είναι ότι πιο γρήγορο υπάρχει αυτή την στιγμή για ιστοσελίδες και στα σκορ που λαμβάνουν από online εργαλεία παίρνουν πάντα 100/100.

Τα θετικά του plugin: Μετατρέπει όλες τις φωτογραφίες σε .webp μορφή ώστε να είναι με μεγάλη διαφορά πιο γρήγορες και να ζυγίζουν λιγότερα MB/KB.

Τα αρνητικά του plugin: Δυστυχώς, όσο καλό κι αν είναι το συγκεκριμένο plugin, η δοκιμαστική του έκδοση σου επιτρέπει να συμπιέζεις μέχρι 100KB φωτογραφιών, που σημαίνει ότι αν μια φωτογραφία είναι πάνω από 100KB (που συνήθως είναι), δεν στην συμπιέζει. Δεν σου επιτρέπει επίσης να μετατρέπεις φωτογραφίες σε .webp μορφή. Παρέχει δύο επί πληρωμής εκδόσεις ωστόσο, οι οποίες, αυτή την στιγμή που γράφεται το άρθρο, στοιχίζουν 29 δολάρια το χρόνο για 10 MB φωτογραφιών και μετατροπή σε .webp μορφή, αλλά με άδεια προσωπικής χρήσης, και 149 δολάρια το χρόνο για 10MB μέγεθος φωτογραφιών, μετατροπή σε .webp μορφή και με άδεια για να το χρησιμοποιείς και σε ιστοσελίδες πελατών.

Optimus Image Optimizer

Κατά τη γνώμη μου, το plugin αξίζει τα 29 δολάρια γιατί κάνει εξαιρετική δουλειά.

Δεύτερος τρόπος: EWWW Image Optimizer

Το EWWW Image Optimizer είναι ένα από τα δημοφιλέστερα plugins στο WordPress για τη συμπίεση φωτογραφιών. Παρόλα αυτά, αν δεν αγοράσεις την επίσημη έκδοση του, δεν θα δεις διαφορά στο σκορ. Θα σου γλυτώσει, ωστόσο, αρκετό χώρο από το web hosting πακέτο σου και πιθανώς να συμπιέσει κάποιες εικόνες σε σημείο που να φτάσουν τα 100KB ώστε να τις συμπιέσεις στη συνέχεια με το Optimus Image Optimizer που ανέφερα παραπάνω. Ούτε η επί πληρωμής έκδοση του μου κίνησε ιδιαίτερα το ενδιαφέρον, καθώς οι ποιότητα των φωτογραφιών έπεσε τόσο πολύ, που φαινόντουσαν απαράδεκτες. Παρόλα αυτά, είναι ο καλύτερος τρόπος για να γλυτώσεις χώρο και να συμπιέσεις τις φωτογραφίες σου μέχρι ένα επίπεδο.

Αξίζει να σημειώσω σε αυτό το σημείο πως το PageSpeed Insights μπορεί να εμφανίσει δύο διαφορετικά προβλήματα για τις φωτογραφίες, τα οποία είναι τα παρακάτω:

  1. Optimize Images: “Compressing … could save 4.7 KiB (30% reduction).”
  2. Optimize Images: “Compressing and resizing … could save 5.8 KiB (51% reduction).”

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

Για να λύσεις λοιπόν όλα τα προβλήματα που αφορούν τη συμπίεση των φωτογραφιών, σου προτείνω να αγοράσεις και να εγκαταστήσεις το Optimus Image Optimizer και να συμπιέσεις όλες τις φωτογραφίες του blog σου, καθώς επίσης και να τις μετατρέψεις σε .webp μορφή.

Optimize Images

Ελαχιστοποίηση JavaScript και CSS

Minify Javascript and CSS

Το Google PageSpeed Insights μας λέει τώρα πως πρέπει να κάνουμε minify τα JavaScript, CSS και HTML αρχεία μας. Για να διορθώσεις αυτό το πρόβλημα εύκολα και γρήγορα, απλά εγκατέστησε το δωρεάν Autoptimize plugin στο WordPress. Στις ρυθμίσεις του plugin θα έχεις τη δυνατότητα να επιλέξεις τις παρακάτω επιλογές:

  • Βελτιστοποίηση του HTML κώδικα
  • Βελτιστοποίηση του JavaScript κώδικα
  • Βελτιστοποίηση του CSS κώδικα

Μπορείς επίσης να χρησιμοποιήσεις το δωρεάν plugin WordPress Cache Enabler του KeyCDN για να κάνεις γρηγορότερη μεταμόρφωση των .webp εικόνων (που μετατρέψαμε πριν) ώστε να ανοίγουν ακόμα πιο γρήγορα. Στις ρυθμίσεις του plugin απλά επέλεξε την επιλογή “Create an additional cached version for WebP image support.

Minify Javascript and CSS

Περιορισμός JavaScript και CSS αποκλεισμού απόδοσης στο περιεχόμενο στο επάνω μέρος

Render-Blocking Resources Above the Fold

Το Google PageSpeed Insights μας λέει τώρα πως έχουμε JavaScript και CSS πάνω από το  fold (το πρότυπο μας). Υπάρχουν τρία διαφορετικά σενάρια που μπορεί να προκαλούν αυτό το πρόβλημα στους περισσότερους ανθρώπους, είτε είναι τα JavaScript/CSS αρχεία τους, είτε το Font Awesome, είτε τα Google Fonts, είτε όλα μαζί.

JavaScript και CSS αρχεία

Το πρώτο πρόβλημα βρίσκεται με τα JavaScript και CSS αρχεία τα οποία βρίσκονται στο πάνω μέρος του προτύπου μας, και ως εκ τούτου το Google PageSpeed Insights μας τα αναφέρει ως “render-blocking”. Για να το διορθώσουμε αυτό, πάμε πάλι πίσω στις ρυθμίσεις του Autoptimize που εγκαταστήσαμε προηγουμένως και αποθηκεύουμε τις παρακάτω ρυθμίσεις:

  • Κάτω από τις ρυθμίσεις “JavaScript” φρόντισε πως δεν έχεις επιλεγμένη την επιλογή  “Force JavaScript in <head>?”
  • Κάτω από τις ρυθμίσεις “CSS” τσέκαρε την επιλογή “Inline all CSS?”
Font Awesome

Το Font Awesome είναι ο καλύτερος τρόπος για να βάλεις διάφορα εικονίδια σε shortcodes και στο μενού του blog σου. Παρόλα αυτά, όταν παίρνεις τον κώδικα του συγκεκριμένου “project” (έτσι θα το πω) και το περνάς στο header του blog σου, κατευθείαν το Google PageSpeed Insights σου εμφανίζει render-blocking πρόβλημα στην CSS. Για να το διορθώσεις αυτό, απλά πάρε τον κώδικα και πρόσθεσε τον στο footer ακριβώς πριν το </body> tag. Αυτό θα διορθώσει το πρόβλημα.

<link href="https://yourwebsite.com/fontawesome/4.5.0/font-awesome.min.css" rel="stylesheet">

Σημείωση: Κάνοντας το αυτό θα φέρει αποτελέσματα FOUT, που σημαίνει ότι είναι ένα flash του unstyled κειμένου.

Google Fonts
Google Fonts

Το τρίτο πρόβλημα είναι ίσως και το πιο ειρωνικό, καθώς έχει να κάνει με τα Google Fonts. Για να σου δώσω ένα γρήγορο και εύκολο παράδειγμα, στο Twenty Fifteen theme του WordPress, περιλαμβάνεται η Noto Serif γραμματοσειρά. Από προεπιλογή, το WordPress χρησιμοποιεί ένα hook που ονομάζεται wp_enqueue_scripts για να φορτώσει τη γραμματοσειρά στο header. Αυτό αυτόματα φέρνει το αποτέλεσμα του render-blocking. Για να το διορθώσεις αυτό, μπορείς να εγκαταστήσεις το δωρεάν plugin Disable Google Fonts. Αν δεν χρησιμοποιείς ένα custom theme, τότε θα χρειαστεί να ρωτήσεις τον προγραμματιστή που το έφτιαξε πως μπορείς να απενεργοποιήσεις τα Google Fonts, καθώς το παραπάνω plugin δεν θα λειτουργήσει.

Μόλις βρεις τον τρόπο και απενεργοποιήσεις τα Google Fonts, βάλε τον παρακάτω κώδικα στο footer σου, λίγο πριν το </body>, ώστε να ξανά φορτώσεις τα Google Fonts αλλά χωρίς να υπάρχει πρόβλημα με το Google PageSpeed Insights:

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Μπορείς επίσης να φορτώσεις τα Google Fonts ασύγχρονα χρησιμοποιώντας το Web Font Loader της Google. Απλά πρόσθεσε τον παρακάτω κώδικα στο footer του blog σου:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
Render-Blocking Resources Above the Fold

Αξιοποίηση της λειτουργίας προσωρινής αποθήκευσης του προγράμματος περιήγησης

Leverage Browser Caching

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

Ο πιο κοινός λόγος για τον οποίο σου εμφανίζει αυτό το πρόβλημα είναι επειδή ο web server ο οποίος φιλοξενεί το blog σου δεν έχει βάλει τα κατάλληλα headers σε ένα μέρος. Ως εκ τούτου, θα πρέπει να προσθέσεις τα σωστά Cache-Control headers και τα Expire Headers.

Το Cache-Control Header ενεργοποιεί ένα client-side caching και βάζει ένα χρονικό διάστημα ζωής σε ένα πόρο. Τα Expire Headers χρησιμοποιούνται για να ορίσουν πότε ένας πόρος δεν χρειάζεται ποια.

Φυσικά δεν χρειάζεται να βάλεις και τα δύο headers, καθώς δεν είναι απαραίτητο. Το Cache-Control είναι η πιο καινούργια και προτεινόμενη μέθοδος. Παρόλα αυτά, κάποια online εργαλεία συνεχίζουν να εμφανίζουν και να ελέγχουν για Expires Headers, οπότε θα δούμε πως να τα διορθώσουμε και τα δύο.

Προσθήκη Cache-Control Header στο NGINX

Μπορείς να προσθέσεις τα Cache-Control Headers στο NGINX προσθέτοντας τους παρακάτω κώδικες στο config αρχείο του server:

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}
Προσθήκη Expires Headers στο NGINX

Μπορείς να βάλεις τον παρακάτω κώδικα στο server block για τα Expires Headers στο NGINX.

location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Προσθήκη Cache-Control Headers στον Apache

Μπορείς να προσθέσεις τα Cache-Control headers στον Apache βάζοντας τον παρακάτω κώδικα στο .htaccess αρχείο.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</filesMatch>
Προσθήκη Expires Headers στον Apache

Μπορείς να προσθέσεις τα Expires headers στον Apache βάζοντας τον παρακάτω κώδικα στο .htaccess αρχείο.

EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
Google Analytics
Google Analytics

Άλλο ένα πρόβλημα και ακόμα πιο ειρωνικό από τα Google Fonts είναι το Google Analytics. Το αστείο εδώ είναι πως, το ίδιο τους το script [http://www.google-analytics.com/analytics.js] είναι το πρόβλημα καθώς η εταιρεία έχει διορίσει γι ‘αυτό μόλις 2 ώρες ζωής της cache. Η Google έχει ήδη αναφέρει πως δεν πρόκειται να διορθώσουν αυτό το πρόβλημα, κάτι το οποίο αφήνει τους πάντες να έχουν ένα πρόβλημα το οποίο δεν μπορούν να διορθώσουν. Ίσως το πιο ενοχλητικό πράγμα με αυτό το πρόβλημα είναι όταν είσαι developer και προσπαθείς να εξηγήσεις στους πελάτες σου πως η Google εμφανίζει ένα πρόβλημα, με μια δική της υπηρεσία, στο δικό της εργαλείο, το οποίο δεν σου επιτρέπει να φτιάξεις. Βλέπεις την ειρωνεία τώρα;

Ευτυχώς, υπάρχει λύση για όλα.

Η λύση λοιπόν για το συγκεκριμένο πρόβλημα είναι να φιλοξενείς μια local έκδοση του analytics.js. Η Google δεν προτείνει την συγκεκριμένη μέθοδο, αλλά αν βάλεις σωστά το script για να παίρνει την τελευταία έκδοση, τότε δεν θα υπάρξει πρόβλημα (λογικά). Υπάρχει ένα διαθέσιμο δωρεάν WordPress plugin το οποίο ονομάζεται Host Analytics.js Locally το οποίο ουσιαστικά δημιουργεί ένα cron job για να συγχρονίζει περιστασιακά την τελευταία έκδοση του analytics.js. Με αυτό τον τρόπο μπορείς επίσης να κάνεις το ίδιο και με ένα CDN που μπορεί να έχεις.

Τέλος πάντων, με τα πολλά και με τα λίγα, με αυτό τον τρόπο μπορείς να διορθώσεις το ειρωνικό πρόβλημα της Google με τα Analytics στο PageSpeed Insights.

Leverage Browser Caching

Ενεργοποίηση συμπίεσης

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

Για όσους γνωρίζουν, παρόλα αυτά, παρακάτω είναι έτοιμος ο κώδικας ο οποίος θα ενεργοποιήσει τη συμπίεση τόσο στον Apache, όσο και στο NGINX, ανάλογα.

Apache

Πρόσθεσε τον παρακάτω κώδικα στο .htaccess αρχείο.

<IfModule mod_deflate.c>
 # Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 Header append Vary User-Agent
</IfModule>
NGINX

Πρόσθεσε τον παρακάτω κώδικα στο nginx.conf αρχείο.

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
Enable Compression

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

Reduce server response time

Και τέλος (σκουπίζει τον ιδρώτα), για να μειώσεις τον χρόνο απόκρισης του διακομιστή, που είναι ένα και από τα πιο βασικά βήματα, θα χρειαστεί είτε να πας σε ένα μεγαλύτερο web hosting πακέτο (ή server τέλος πάντων) ή να ενεργοποιήσεις μια CDN υπηρεσία.

Μερικές CDN υπηρεσίες είναι οι παρακάτω:

Αν όλα πάνε καλά και έχεις ακολουθήσει τα παραπάνω βήματα, πάνε ξανά στο Google PageSpeed Insights και έλεγξε την ταχύτητα και τα προβλήματα του blog σου. Είμαι σίγουρος πως αν δεν φτάσουν τα 100/100, σίγουρα θα χτυπήσεις πράσινα και σίγουρα θα φτάσεις τα 80-90/100.

Google PageSpeed Insights - Κάνε το blog σου πιο γρήγορο από ποτέ

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

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

Παναγιώτης Σακαλάκης
Παναγιώτης Σακαλάκηςhttps://inkstory.gr
Ο Παναγιώτης Σακαλάκης, με βάση το Κιλκίς, είναι Web Designer & Blogger, ιδρυτής της Inkstory Ο.Ε., του TechGuides και του TechWise Insider, καθώς επίσης & Host στα «The Blogging Dispatch» & «TechGuides» Podcasts. Όποτε δεν γράφει, βρίσκεται σε κάποιο βουνό με το Hard-Trail ποδήλατο του.

2 ΣΧΟΛΙΑ

0 0 ψήφοι
Article Rating
Εγγραφή
Ειδοποίηση για
guest
2 Comments
Παλαιότερα
Νεότερα Top Σε Ψήφους
Ενσωματωμένα σχόλια
Δείτε όλα τα σχόλια

Διαβάστε Επίσης

Αναζητάς περισσότερα;