easy web maker

Seo Οδηγός για Προχωρημένους

Μέρος 1ο

Η Google λαμβάνει πολύ σοβαρά την ταχύτητα ενός website! Επιθυμεί να κάνει το Internet συμβατό με mobile συσκευές - για δικό μας καλό(!) και οι άνθρωποί της προσπαθούν για χρόνια να κάνουν τους ιστότοπούς μας να φορτώνονται γρηγορότερα. Τον Ιούλιο του 2018, η Google ξεκίνησε να αξιολογεί την ταχύτητα της σελίδας σε mobile συσκευές, όπως συνέβαινε και στο παρελθόν, για ιστότοπους σε Desktop. Αυτή η αλλαγή, μαζί με τη συνεχή ενημέρωση και την απελευθέρωση περισσότερων εργαλείων που βοηθούν τους webmasters να κάνουν τα sites τους ταχύτερα, είναι ένα πολύ ισχυρό μήνυμα προς όλους μας.

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

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

Εργαλεία βελτίωσης ταχύτητας σελίδας

Google Page Speed Insights

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

Αναφορά ταχύτητας

Τον Ιανουάριο του 2018 είναι η αναφορά ταχύτητας, η οποία είναι διαθέσιμη μόνο για ιστότοπους με υψηλή επισκεψιμότητα, εμφανίζει τη μέση εμπειρία στον Chrome με τη φόρτωση μιας δοκιμασμένης διεύθυνσης URL. Ένα συνολικό επίπεδο (γρήγορες, μεσαίες, αργές ιστοσελίδες), και επίσης δύο μεσαίες τιμές αναφέρονται τόσο για χρήστες κινητών όσο και για χρήστες επιφάνειας εργασίας.

FCP - "Πρώτη Βάση Περιεχομένου" αυτό είναι το σημείο που ο χρήστης βλέπει τα πρώτα στοιχεία που εμφανίζονται στη σελίδα. ‘Οσο γρηγορότερη είναι η εμφάνιση τόσο το καλύτερο.

DCL - "DOM φορτωμένο περιεχόμενο" Ο χρόνος που απαιτείται για να φορτωθεί πλήρως η ιστοσελίδα. Και εδώ μας ενδιαφέρει η φόρτωση να είναι πολλή γρήγορη. 

Τα δεδομένα διανομής αποτελούν βασικό μέρος αυτής της έκθεσης. Για παράδειγμα, ας πούμε ότι το 75% της φόρτωσης της σελίδας σας είναι 1,6 δευτερόλεπτα FCP ή ταχύτερα και ο ίδιος περίπου χρόνος σε επίπεδο DCL, τότε η Google θα ταξινομήσει το website ως «γρήγορο». Αυτό που δεν θέλουμε να δούμε εδώ είναι υψηλοί μέσοι όροι αργής φόρτωσης σελίδων. Αυτό ξεκινάει από την κατάταξη "Μεσαία" ή "Αργή". Η πλειοψηφία των χρηστών πρέπει να δει το website να φορτώνει γρήγορα για να φέρει την ένδειξη "Γρήγορο". 

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

Βαθμολογία Βελτιστοποίησης

Έργαλεία Μέτρησης

Η βαθμολογία βελτιστοποίησης PSI της Google βαθμολογεί τη διεύθυνση URL σε κλίμακα 0-100 τόσο για κινητές συσκευές όσο και για την επιφάνεια εργασίας. Αυτή η βαθμολογία υποδεικνύει πόσο μπορεί να βελτιωθεί η ταχύτητα στην τρέχουσα σελίδα. Ένα υψηλό σκορ δείχνει αν η Google έχει βρει λίγες ευκαιρίες για να βελτιώσει τους χρόνους φόρτωσης σελίδας, ενώ ένα χαμηλό αποτέλεσμα σημαίνει ότι το εργαλείο έχει βρει πολλές περιοχές που μπορεί να βελτιωθούν για να βελτιώσουν το χρόνο φόρτωσης.

Ωραία μέχρι εδώ; Η Google θα συμπιέσει τις εικόνες σας, θα μειώσει το CSS και το Javascript για εσάς! Φυσικά είναι μόνο για αυτήν τη διεύθυνση URL που δοκιμάσατε, αλλά αυτό είναι ένα χρήσιμο χαρακτηριστικό. Το WebPageTest.org είναι μια άλλη online υπηρεσία που πρέπει να χρησιμοποιήσει για να καθορίσει το χρόνο φόρτωσης και σε ποιο βαθμό κάθε πόρος επηρεάζει το χρόνο φόρτωσης της σελίδας. Ένα από τα εξαιρετικά χαρακτηριστικά του είναι η δυνατότητα προσομοίωσης της δοκιμής χρησιμοποιώντας διαφορετικές συσκευές και ταχύτητες σύνδεσης. Για παράδειγμα, θα δοκιμάζουμε τυπικά το Chrome Browser Option και το καλώδιο (5/1 Mbps 28ms RTT) για δοκιμές σε επιτραπέζιους υπολογιστές και θα δοκιμάσουμε επίσης τη ρύθμιση Mobile 3G - Fast (1,6Mbps / 768 Kbps 150 ms) δοκιμή κινητής τηλεφωνίας. Μεταξύ αυτών των δύο ρυθμίσεων μπορείτε να δοκιμάσετε επαρκώς την απόδοση των σελίδων σας σε επιτραπέζιους και κινητούς υπολογιστές.

Μπορείτε επίσης να επιλέξετε έως και 9 δοκιμές για να τρέξετε ταυτόχρονα για να πάρετε μια μέση ταχύτητα. Αυτό είναι πρακτικό, καθώς βρήκαμε Time To First Byte (TTFB) για να διαφέρει αρκετά ανάλογα με το φορτίο του διακομιστή. Για να κατανοήσουμε σωστά τι επηρεάζει την ταχύτητα της σελίδας, θέλουμε να μάθουμε τους πόρους που φορτώνει η σελίδα, πόσο χρονικό διάστημα διαρκεί κάθε πόρος και με ποια σειρά φορτώνεται.

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


Seo Webtest speed diagramm

Αυτό το διάγραμμα είναι σημαντικό, καθώς εμφανίζει τα βασικά σημεία αναφοράς τα οποία συνήθως μας ενδιαφέρουν.
Η επόμενη αναφορά είναι το waterfall, το οποίο δείχνει λεπτομερώς τους πόρους που φορτώνονται και με ποια σειρά. Υποδεικνύει επίσης από τη ροζ γραμμή όταν η σελίδα αρχίζει να εμφανίζεται για το χρήστη, ο οποίος είναι ένας "εμφανής" χρόνος φόρτωσης – πως όσο ταχύτερα είναι το Start Render, τόσο πιο γρήγορα γίνεται η φόρτωση της σελίδας. Παρόλο που μπορεί να χρειαστούν ακόμα δευτερόλεπτα για να ολοκληρωθεί πλήρως η φόρτωση.


Seo Waterfall View

Αυτή η δοκιμή Waterfall παραπάνω προβάλλει τον ιστότοπο www.prolineracing.net, ο οποίος αποτελεί ένα εξαιρετικό παράδειγμα ενός ιστότοπου που έχει περάσει πέρα από το επιτρεπτό μέγεθος των εικόνων σε μια σελίδα. Απαιτεί 262 πηγές για λήψη, πάνω από 21MB δεδομένων - φανταστείτε ότι προσπαθείτε να φορτώσετε αυτή τη σελίδα σε μια κακή σύνδεση! Αυτό είναι ένα από εκείνα τα sites όπου θα θέλατε να έχετε μια μεγάλη κουβέντα με τον σχεδιαστή του website και τον ιδιοκτήτη της επιχείρησης σχετικά με τα πολύ σοβαρά λάθη που γίνονται, όπως η υπερφόρτωση της αρχικής σελίδας. Αυτό είναι ένα παράδειγμα ενός αργού website το οποίο δεν πρόκειται να φέρει πωλήσεις στην εταιρεία.

Μερικές επιπλέον σημειώσεις σχετικά με το εργαλείο WebPageTest:
• Δημιουργήστε έναν λογαριασμό ώστε να μπορείτε να δείτε το ιστορικό δοκιμών.
• Μπορείτε να αντιγράψετε τη διεύθυνση URL της δοκιμής που έχετε εκτελέσει και να την μοιραστείτε με πελάτες ή συνεργάτες για μεταγενέστερη αναφορά.
• Εκτελέστε πολλαπλές δοκιμές, θα παρατηρήσετε γρήγορα ότι το TTFB διαφέρει αρκετά για πολλούς διακομιστές.

Περιττό να πούμε ότι πρέπει να προσθέσετε σελιδοδείκτη και για τα δύο αυτά εργαλεία αν εργάζεστε για τη βελτίωση του χρόνου φόρτωσης του ιστότοπού σας. Αυτά τα δύο είναι απαραίτητα για την βαθιά διάγνωση της κρίσιμης διαδρομής προς καθετί που μπορεί να επιβραδύνει τις σελίδες σας. Παρόλο που τα παραπάνω εργαλεία κάνουν τη δουλειά που θέλετε, υπάρχει ένα πλήθος πρόσθετων εργαλείων δοκιμών που ίσως θέλετε να προσθέσετε στους σελιδοδείκτες σας, καθώς και για να κατανοήσετε καλύτερα την ταχύτητα του ιστότοπου, όπως:
gtmetrix.com
DNS UltraTools
CSS Stats (δείχνει περίληψη του CSS - πιθανότατα θα διαπιστώσετε ότι χρησιμοποιείτε ελάχιστο CSS από αυτό που φορτώνετε!)
Unused CSS - Πρόκειται για μια πληρωμένη υπηρεσία όπου σας βοηθάει να αφαιρέσετε css που δεν χρειαζόσαστε.

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

Τι χρειάζεται για να λάβετε 100/100 στη Δοκιμή ταχύτητας σελίδας Google;

Seo google page speed score
Πώς έχουμε μια σελίδα που φορτώνει τόσο γρήγορα; Λίγο πολύ και με κάποια κόλπα. Δείτε τον παρακάτω κώδικα ιστοσελίδας HTML:
<!DOCTYPE HTML>
    <html>
       <head>
           <title<This is a test page</title>
       </head>
       <body>
              Not much to see here...
       </body>
    </html>
Αστείο ε; Κάπως έτσι το σκεφτήκαμε και εμείς. Παρόλα αυτά κάναμε το συγκεκριμένο τεστ για να διαπιστώσουμε τι θα χρειαζόταν για να πάρουμε 100/100.
Στο σημείο αυτό πρέπει να να επισημάνουμε το εξής :
Όλα όσα προσθέτετε στην ιστοσελίδα σας αυξάνουν το χρόνο φόρτωσης!
Κάθε εικόνα, κάθε byte του CSS, Javascript, κώδικας HTML, απλό κείμενο, σχόλια, κώδικας από πλευρά του διακομιστή - οτιδήποτε. Κάθε bit δεδομένων αυξάνει το χρόνο φόρτωσης. Επίσης κάθε ξεχωριστό αίτημα πίσω στον server για εικόνες, απομακρυσμένη Javascript, CSS, κλπ, προσθέτει επίσης χρόνο φόρτωσης. Αυτό ισχύει ιδιαίτερα σε κινητές συσκευές που απαιτούν πολύ περισσότερο χρόνο για να λάβουν μια αναζήτηση DNS και να κάνουν τις ανάλογες συνδέσεις.
Οι κατασκευαστές αγωνιστικών αυτοκινήτων κάνουν τα αυτοκίνητά τους ταχύτερα, αφαιρώντας κάθε μέρος που δεν είναι απολύτως απαραίτητο για να μειωθεί το βάρος του αυτοκινήτου. Τα εξαρτήματα που πρέπει να τοποθετηθούν στο αυτοκίνητο είναι κομμένα, τρυπημένα, κατεργασμένα, κατασκευασμένα από ειδικά υλικά όπως αλουμίνιο και τιτάνιο, όπου όλα γίνονται σε μια ατέρμονη προσπάθεια να μειωθεί το βάρος σε ελάχιστο επίπεδο.
Οι κατασκευαστές των αυτοκινήτων θα προσθέσουν όσο το δυνατόν περισσότερη ιπποδύναμη στο πλαίσιο των κανόνων και του προϋπολογισμού τους. Μπορείτε να κάνετε το ίδιο, Υποδύναμη = Γρήγορος Server. Είναι γεγονός ότι παίρνετε αυτό που πληρώνετε όταν πρόκειται για διακομιστές. Ένας κοινόχρηστος διακομιστής (Share Hosting Server) κόστους 5 ευρώ με 200 ιστότοπους σε αυτόν με CPU χαμηλής χωρητικότητας και μνήμης δεν πρόκειται να ανταποκριθεί (Time to First Byte) τόσο γρήγορα όσο ένας Dedicated Server με μεγαλύτερο κόστος ανά μήνα. Αυτό είναι σαν να συγκρίνετε ένα ibiza με ένα Mustang!

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

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

Πόσο όμως είναι το αρκετά γρήγορη ιστοσελίδα;

Δεν έχει νόημα να πηγαίνουμε στα άκρα που χρησιμοποιούνται στα προηγούμενα παραδείγματα κώδικα για να χτυπήσουμε τα 100/100 στα PageSpeed Insights της Google. Και για να είμαστε αρκετά σαφείς, μπορεί να υπάρξει σημαντικό κόστος τόσο στις εσωτερικές όσο και στις εξωτερικές υπηρεσίες, αν στοχεύετε σε ταχύτερους χρόνους φόρτωσης.

Η ταχύτερη ιστοσελίδα είναι πάντα καλύτερη όσο η ιστοσελίδα σας πληροί τον στόχο της. Ωστόσο, το κλειδί για την επιτυχία εδώ είναι ότι θα πρέπει να είστε ταχύτεροι από τον ανταγωνισμό σας. Βρείτε τις σελίδες των ανταγωνιστών σας που κατατάσσονται στην κορυφή των αποτελεσμάτων για τις λέξεις-κλειδιά σας και τις τοποθετήστε μέσω του εργαλείου WebpageTest.org. Ο χρόνος φόρτωσής τους είναι αυτός που θέλετε ώστε ανταγωνιστικοί.
Το σημαντικό για σας είναι ότι ένας γρήγορος ιστότοπος θα σας φέρει υψηλότερες μετατροπές και πιο ευτυχισμένους πελάτες άμεσα, και πολύ πιθανόν μεγαλύτερη επισκεψιμότητα λόγω υψηλότερων βαθμολογιών.

Μια καθυστέρηση 1 δευτερολέπτου στην απάντηση σελίδας μπορεί να έχει ως αποτέλεσμα μείωση έως και κατά 7% των μετατροπών.  Οι εκπρόσωποι της Google συχνά σχολιάζουν ότι μια σελίδα που φορτώνει πάνω από 10 δευτερόλεπτα χρειάζεται βελτιώσεις και ότι τους αρέσει να βλέπουν τις σελίδες να φορτώνονται σε 1-2 δευτερόλεπτα. Εντούτοις, ίσως να μην παρατηρήσετε ένα σημαντικό πρόβλημα κατάταξης μέχρι να βρεθείτε στην περιοχή χρόνου φόρτωσης 20-30 δευτερολέπτων. Μια σελίδα που φορτώνει σε 30 ή περισσότερα δευτερόλεπτα είναι σίγουρα ένα πρόβλημα στις περισσότερες περιπτώσεις. Είναι πιθανό ότι ένας πολύ αργός ιστότοπος μπορεί ακόμα να κατατάσσεται καλά, αλλά θα πρέπει να είναι ένας εξαιρετικός πόρος για τις αναζητήσεις προκειμένου να ξεπεραστεί η κακή ταχύτητα. 
Να θυμάστε! 
Από τον Ιούλιο του 2018, η Google θα ταξινομεί τους ιστότοπους για desktop βάσει του χρόνου φόρτωσης του υπολογιστή και των ιστότοπων για κινητά εκτός του χρόνου φόρτωσης του κινητού. Αυτό μπορεί να έχει μεγάλο αντίκτυπο σε αργούς ιστότοπους κινητής τηλεφωνίας.
Κάθε διεύθυνση URL στον ιστότοπο υπόκειται στα θέματα που αναφέραμε παραπάνω. Δεν μιλάμε μόνο για την αρχική σελίδα! Τεχνικά, θα πρέπει να δοκιμάζετε κάθε σελίδα στον ιστότοπό σας ή τουλάχιστον να δοκιμάζετε εκείνες που έχουν παραλλαγές στη δομή και τις λειτουργίες HTML. Θυμηθείτε ότι άλλοι πόροι, όπως τα αρχεία pdf, οι κατάλογοι προϊόντων κ.λπ., πρέπει να φορτωθούν γρήγορα και σίγουρα μπορούν να βελτιστοποιηθούν!
Εάν χρησιμοποιείτε το Google Analytics, μπορείτε εύκολα να εντοπίσετε ποιες σελίδες του ιστότοπού σας είναι αργές, εξετάζοντας την αναφορά ταχύτητας ιστότοπου. Μεταβείτε στην επιλογή Συμπεριφορά -> Ταχύτητα ιστότοπου -> Προτάσεις ταχύτητας. Μπορείτε να βρείτε την αναφορά Προτάσεων ταχύτητας όπου είναι εύκολο να ερμηνευτεί. Θα εμφανίσει τις σελίδες υψηλής επισκεψιμότητας καθώς και τις μεσαίας σελίδες. Ο χρόνος φόρτωσης σελίδας, ταξινομείται κατά αριθμό προβολών σελίδας.
Η απόλυτη βελτιστοποίηση ενός ιστότοπου μπορεί να είναι μια μεγάλη διαδικασία και αυτό είναι απόλυτα κατανοητό. Εάν σας φαίνεται πολύ όγκος για να τον αντιμετωπίσετε, ξεκινήστε πρώτα με τις σελίδες που έχουν υψηλότερη κίνηση. Εάν θέλετε συμβουλές ή υποστήριξη από ειδικούς - είμαστε εδώ για να σας βοηθήσουμε.
Τώρα που καλύψαμε το "Γιατί και πώς να μετρήσουμε" ας προχωρήσουμε σε αυτό που πρέπει να κάνουμε για να κάνουμε τις σελίδες σας γρηγορότερες.


4 Βήματα για τη Βελτίωση της Ταχύτητας της Σελίδας σας

1. Βελτιστοποίηση εικόνας
Οι εικόνες τείνουν να αποτελούν μεγάλο όγκο δεδομένων και μπορούν να επιβραδύνουν σημαντικά μια σελίδα. Εξετάστε τις παρακάτω επιλογές που παρατίθενται κατά σειρά προτεραιότητας για να επιταχύνετε τα πράγματα.
• Αφαίρεση - Εάν μπορείτε να αφαιρέσετε εντελώς μια εικόνα από τη σελίδα, κάντε το. Ρωτήστε τον εαυτό σας αν η εικόνα συμβάλλει πράγματι στη σελίδα ώστε να επιτύχει τους στόχους της;
Αλλαγή μεγέθους & περικοπή - Υπάρχουν συχνά περιθώρια για τη μείωση των συνολικών διαστάσεων μιας εικόνας. Στην πραγματικότητα οι σχεδιαστές συχνά "αλλάζουν" τις εικόνες χρησιμοποιώντας τις μεταβλητές ύψους και πλάτους στην ίδια τη σελίδα, επειδή είναι ευκολότερο από την χρήση ενός επεξεργαστή εικόνας και την επεξεργασία του πραγματικού αρχείου, επειδή… βαριούνται. Μικρότερες εικόνες απαιτούν λιγότερα byte και θα φορτώνονται ταχύτερα - Κάντε την επεξεργασία!
Βελτιστοποίηση - Υπάρχουν πολλές μέθοδοι βελτιστοποίησης εικόνας για συρρίκνωση του μεγέθους αρχείου μιας εικόνας μειώνοντας το βάθος των χρωμάτων τους (ή) και χρησιμοποιώντας συμπίεση χωρίς απώλειες για τις μορφές αρχείων .jpg και .png. Οι περισσότεροι επεξεργαστές εικόνων έχουν μια λειτουργία "αποθήκευσης για web" που θα κάνει κάποια συμπίεση, καθώς και πολλές άλλες επιλογές βελτιστοποίησης εικόνας λογισμικού εκεί έξω. Δοκιμάστε τα δωρεάν TinyJPG.com, TinyPNG.com και Compressor IO για αρχεία JPG, PNG, GIF και SVG. Υπάρχουν επίσης εργαλεία όπως το Kraken.io που προσφέρει πολλαπλές δυνατότητες και ακόμη και plugins του WordPress όπως TinyPNG, Imagify κλπ.
Συνδυασμός - Χρησιμοποιώντας την μέθοδο CSS Sprites, μπορείτε να χρησιμοποιήσετε μία εικόνα για όλα τα μικρά κουμπιά, εικονίδια, λογότυπα κ.λπ. που βρίσκονται στη σελίδα. Συνδυάζετε όλες τις εικόνες σε μια μεγάλη και χρησιμοποιήστε κώδικα CSS για να εμφανίσετε μόνο το τμήμα της εικόνας που απαιτείται. Αυτό μειώνει τον αριθμό των συνολικών ταξιδιών που πρέπει να κάνει ο περιηγητής στο διακομιστή. Επίσης μπορεί να μειώσει τον συνολικό αριθμό των λήψεων που γίνονται. Τα Sprites χρησιμοποιούνται συχνά για επανάληψη εικόνων σε έναν ιστότοπο και για εικόνες που δεν αλλάζουν συχνά.
Χρήση Ύψους & Πλάτους - Καθορίστε όλες τις εικόνες ύψους και πλάτους σε εικονοστοιχεία σε κάθε σελίδα. Εάν δεν το κάνετε, θα χρειαστεί να κάνετε λήψη των εικόνων πριν ολοκληρωθεί η απόδοση της σελίδας. Παράδειγμα:
<img src = "file.gif" height = "100" width = "100" alt = "περιγραφή" />
Βεβαιωθείτε ότι χρησιμοποιείτε το ύψος και το πλάτος σε εικόνες που δεν χρειάζεται να αλλάξουν δυναμικά.
Χρησιμοποιήστε τα νέα στοιχεία όπως το <picture> HTML tag. Πολλά μπορούν να γίνουν τώρα για να φορτώσετε εικόνες με βάση το παράθυρο προβολής και τους εναλλακτικούς τύπους αρχείων. Αυτό μπορεί να πάρει χρόνο για να βελτιστοποιηθεί, αλλά σίγουρα θα υπάρξουν κάποιες σημαντικές βελτιώσεις στο χρόνο φόρτωσης όταν χρησιμοποιείται.
• Χρησιμοποιήστε το Lazy Load - Χρησιμοποιήστε το Lazy Load με jQuery για να αναβάλλετε τη φόρτωση της εικόνας έως ότου ο χρήστης μετακινηθεί σε εκείνο το τμήμα της σελίδας. Αυτό θα βοηθήσει στη βελτίωση του χρόνου φόρτωσης και είναι έυκολο να γίνει.
2. Συνδυάστε, καθαρίστε και ελαχιστοποιήστε το CSS
Τα εξωτερικά αρχεία CSS είναι μια συχνή κόκκινη σημαία στην αναφορά ταχύτητας σελίδας της Google επειδή αποκλείουν την απόδοση μιας σελίδας μέχρι να φορτωθούν τα αρχεία. Αυτός είναι ο λόγος για τον οποίο η Google συνιστά ιδιαίτερα τη βαριά βελτιστοποίηση αυτών των αρχείων για σημαντικές βελτιώσεις στην κρίσιμη διαδρομή απόδοσης και για τη συνολική φόρτωση της ιστοσελίδας. Σχεδόν όλες οι ιστοσελίδες μπορούν να κάνουν κάποιο καθαρισμό σε σχέση με το CSS (ειδικά οι παλιότερες τοποθεσίες) καθώς το CSS συχνά προστίθεται, αλλά σπάνια καθαρίζεται.
Remove - Να θυμάστε ότι το μικρό widget που ενδεχομένως προσθέσατε πριν από 2 χρόνια απαιτεί ένα εξωτερικό αρχείο CSS. Οι πιθανότητες είναι μεγάλες όταν ξεφορτωθείτε το πρόσθετο στοιχείο, ίσως να ξεχάσετε να αφαιρέσετε το συνοδευτικό εξωτερικό style sheet(CSS). Εάν χρησιμοποιείτε το WordPress, ίσως να φορτώσετε αρκετές προσθήκες που απαιτούν επιπλέον style sheets, αλλά δεν χρησιμοποιούν πια το πρόσθετο. Πραγματοποιήστε έναν έλεγχο στη σελίδα σας και ξεφορτώστε ότι δεν χρειάζεστε.
Inline - Εάν έχετε ένα μικρό εξωτερικό αρχείο CSS, πχ 100 γραμμές ή λιγότερες, σκεφτείτε να το συμπεριλάβετε είτε μέσα στο εσωτερικό του κώδικα html του body είτε εσωτερικά μέσα στο <head>. Μπορεί να μειώσει τα πρόσθετα εξωτερικά αιτήματα αρχείου που απαιτούνται για την απόδοση της σελίδας.
Καθαρίστε - Πόσες κλάσεις CSS δεν χρησιμοποιείτε, αλλά έχετε στο φύλλο στυλ σας; Οι πιθανότητες είναι ότι υπάρχουν πολλές, αλλά πώς μπορείτε να βρείτε ποιες μπορούν να αφαιρεθούν; Εργαλεία όπως Chrome Developer θα σας βοηθήσουν. Στο πρόγραμμα περιήγησης Chrome, μεταβείτε στην επιλογή Εργαλεία -> Εργαλεία προγραμματιστών -> Έλεγχοι. Σάρωση της σελίδας και τα εργαλεία της Dev θα σας δείξουν ποιο ποσοστό των CSS και JS χρησιμοποιείται στην πραγματικότητα!


Seo chrome dev tools
Κάνοντας κλικ στους τύπους αρχείων CSS θα σας δοθεί περαιτέρω αναφορά σχετικά με τις γραμμές του αρχείου CSS για το ποιες χρησιμοποιείτε και ποιες όχι. Η πράσινη γραμμή στα αριστερά υποδεικνύει τη χρήση. κόκκινη ράβδος είναι γραμμές που δεν χρησιμοποιούνται.
Google more dev tools
Προσοχή: Η αναφορά του Dev Tools θα δείξει τι κανόνες CSS δεν χρησιμοποιούνται στη συγκεκριμένη διεύθυνση URL στην οποία εκτελέσατε την αναφορά, κάτι που δεν σημαίνει απαραίτητα ότι οι κανόνες CSS δεν χρησιμοποιούνται αλλού στον ιστότοπο! Βεβαιωθείτε ότι έχετε πλήρη έλεγχο όλων των σελίδων και κάνετε πολλά αντίγραφα ασφαλείας και δοκιμές κατά την πραγματοποίηση αλλαγών.

Συνδυασμός - Μπορείτε να εξετάσετε το ενδεχόμενο να συνδυάσετε όλα τα εξωτερικά αρχεία CSS που χρησιμοποιούνται σε όλες τις σελίδες σας σε ένα αρχείο και, στη συνέχεια, να καθαρίσετε αυτό το αρχείο περιττών κανόνων. Οι μορφές που χρησιμοποιούνται μόνο σε μία σελίδα για συγκεκριμένα πράγματα, θα μπορούσαν να συμπεριληφθούν καλύτερα στο head του αρχείου μόνο σε αυτή τη σελίδα, αντί να φορτώνονται αυτοί οι κανόνες σε κάθε σελίδα στον ιστότοπο.
Τοποθετήστε πρώτα το CSS! - Εξωτερικά αρχεία CSS θα πρέπει να φορτωθούν πριν από εξωτερικά αρχεία Javascript. Αυτό σημαίνει ότι στο <head>, οι εξωτερικοί σας σύνδεσμοι CSS πρέπει να αναφέρονται πριν από οποιαδήποτε εξωτερικά αρχεία Javascript.
Minify - Τέλος, μπορείτε να συμπιέσετε τα σχόλια και τα κενά στα αρχεία CSS με την ελάττωση του αρχείου(minification). Προτείνουμε να διατηρείτε ένα αντίγραφο των αρχείων CSS σας για επεξεργασία. Ένας γρήγορος τρόπος για να διαγράψετε το CSS σας είναι να χρησιμοποιήσετε το εργαλείο Insights Speed Online της Google.
3. Βελτιστοποίηση Javascript 
Τα ζητήματα Javascript είναι επίσης μια συχνή κόκκινη σημαία στα Google Page Speed Insights. Η σημερινή τυπική ιστοσελίδα WordPress θα έχει πιθανώς μια σειρά ξεχωριστών αρχείων Javascript που φορτώνονται, μερικά από τα οποία δεν χρειάζονται καν στην σελίδα! Ένα αρχείο Javascript μπορεί επίσης να εμποδίσει μια σελίδα από την απόδοση, γεγονός που το καθιστά εξαιρετικά κρίσιμο ως προς την αντιμετώπιση.
Αφαίρεση - Όπως και με το CSS, υπάρχουν πιθανότητες να έχετε κάποια εξωτερικά αρχεία Javascript που έχουν φορτωθεί στη σελίδα σας και δεν χρησιμοποιούνται. Κάνετε έναν έλεγχο και ελέγξτε ποια αρχεία χρειάζονται και τα οποία μπορείτε να απαλλαγείτε εντελώς. Ένα καλό παράδειγμα είναι ένα slider εικόνας που χρησιμοποιείται μόνο στην αρχική σελίδα. Δεν έχει νόημα η φόρτωση των αρχείων Javascript στις υπόλοιπες σελίδες που δεν χρησιμοποιούν το slider. Μπορείτε να χρησιμοποιήσετε την αναφορά του Chrome Dev Tools ακριβώς όπως κάναμε για το CSS παραπάνω, για να δείτε ποιο κώδικα Javascript δεν χρησιμοποιείτε.
Inline - Εάν έχετε ένα μικρό εξωτερικό αρχείο Javascript, πχ 100 γραμμές ή λιγότερες, σκεφτείτε να το συμπεριλάβετε είτε μέσα στο εσωτερικό του html κώδικα του body είτε εσωτερικά μέσα στο <head>. Μπορεί να μειώσει τα πρόσθετα εξωτερικά αιτήματα αρχείου που απαιτούνται για την απόδοση της σελίδας.
Συνδυασμός - Αφού καθαρίσετε τους κανόνες CSS, συνδυάστε τα όλα σε ένα εξωτερικό αρχείο για να ελαχιστοποιήσετε τις διαδρομές που πρέπει να κάνει ο περιηγητής στο διακομιστή. Η Javascript - ειδικά για μια μόνο σελίδα - μπορεί να προστεθεί σε μια μόνο γραμμή ή να φορτωθεί μόνο εξωτερικά σε εκείνη τη συγκεκριμένη σελίδα ώστε να μην επιβραδύνουν όλες σελίδες σας φορτώνοντας την σε κάθε μία. Για παράδειγμα, η Javascript επικύρωσης φόρμας θα πρέπει να περιλαμβάνεται μόνο στις σελίδες φόρμας - ΟΧΙ σε κάθε σελίδα του ιστότοπου.
Φόρτωση Javascript - Τελευταία! Τα αρχεία Javascript και η Javascript Inline που πρέπει να φορτωθούν στην κεφαλή του εγγράφου πρέπει να γίνουν μετά τη φόρτωση εξωτερικών CSS. Αυτό σημαίνει ότι στο <head> οι εξωτερικοί σας σύνδεσμοι CSS πρέπει να αναγράφονται πριν από οποιαδήποτε αναφορά Inline ή External Javascript. Οποιαδήποτε εξωτερική Javascript που δεν απαιτείται για την απόδοση της σελίδας θα πρέπει να τοποθετείται στο κάτω μέρος της σελίδας, κοντά στην ετικέτα </ body>. Μια λεπτομερέστερη αναφορά σε αυτό το ζήτημα θα την βείτε στο Google PageSpeed.
Minify - Τέλος, μπορείτε να συμπιέσετε όλους τους επιπλέον χώρους, τις επιστροφές των μεταφορών, τα σχόλια και τα διαστήματα στα αρχεία Javascript με την Επεξεργασία του αρχείου. Χρησιμοποιήστε την ίδια διαδικασία που χρησιμοποιήσαμε για το CSS. Μεταβείτε στο Google Page Speed Insights Tool, εκτελέστε το εργαλείο και λάβετε τους βελτιστοποιημένους πόρους.
 
Είναι σημαντικό να θυμάστε ότι οι βελτιστοποιημένοι πόροι είναι μόνο για τη σελίδα που δοκιμάσατε, το Page Speed Insights Tool δεν σαρώνει ολόκληρο τον ιστότοπο και δεν το βελτιστοποιεί καθολικά το site!
4. Περιορισμός εξωτερικών social widgets 
Εξωτερικά και άλλα inline Javascript widgets είναι συχνά μια αιτία αργής φόρτωσης μιας σελίδας. Αυτά τα γραφικά στοιχεία είναι χρήσιμα για το μάρκετινγκ, αλλά εξετάστε το κόστος που θα έχετε με τη μείωση της ταχύτητας για να αποκτήσετε αυτό το φανταχτερό μετρητή που εμφανίζει σε πόσα άτομα αρέσει η σελίδα σας στο Facebook. Συνειδητοποιήστε ότι ορισμένες σελίδες απλά δεν θα πάρουν τόσα πολλά like και μια περιοχή στην σελίδα που δείχνει μηδέν ή ελάχιστα likes δεν είναι και ότι καλύτερο. Σε αυτήν την περίπτωση, δημιουργήστε τις δικές σας εικόνες κοινωνικών δικτύων και απλώς συνδέστε τις σελίδες σας στο Facebook, LinkedIn Instagram της εταιρείας σας, για γρηγορότερη φόρτωση σελίδων.

Εν προκειμένω, διαπιστώθηκε ότι το τυπικό συμπλήρωμα κουμπιού Facebook Like Button Plugin διαρκεί περίπου 7,5 δευτερόλεπτα για να αποτυπωθεί όπως παρατηρείται στο webpagetest.org. Παρόλο που δεν φαίνεται αργό στους χρήστες, επειδή δεν κρατά τη σελίδα από τη φόρτωση, είναι πολύ αργό και πρέπει να φορτωθεί σε κάθε σελίδα που χρησιμοποιείται. Εξετάστε προσεκτικά κάθε widget και ψάξτε εάν υπάρχουν μερικές εναλλακτικές μέθοδοι που μπορείτε να χρησιμοποιήσετε.

Δοκιμή Ελέγχου Εργαλείων Προγραμματιστών Chrome

Ένα νέο στα εργαλεία για τους προγραμματιστές στο Chrome είναι ο έλεγχος μέσω lighthouse. Αυτό το εργαλείο που βασίζεται στον περιηγητή, εκτελεί μια σειρά από δοκιμές που καλύπτουν θέματα που σχετίζονται με την απόδοση. Στη συνέχεια, προσθέτει μια σειρά χρήσιμων βέλτιστων πρακτικών, όπως η χρήση του HTTPS, λάθος αναλογία εικόνων και πολλά άλλα. Η επέκταση του προγράμματος περιήγησης προσφέρει ακόμα πιο λεπτομερή αναφορά.
Seo lighthouse
Αυτό το άρθρο δεν είναι σε επίπεδο αρχαρίων γι αυτό και αναφέρουμε στον τίτλο πως είναι για προχωρημένους. Ωστόσο, εάν σας απασχολεί το θέμα ταχύτητας του ιστότοπού σας τότε τα παραπάνω 4 βήματα είναι σημαντικά για εσάς ώστε εσείς ή ο webmaster σας να ξεκινήσετε. Όταν έχετε ολοκληρώσει τα παραπάνω, τότε θα είστε έτοιμοι για το επόμενο βήμα στην εκπαίδευση σας :
Οδηγός SEO για προχωρημένους βελτιστοποίηση ταχύτητας του website σας. Μέρος δεύτερο

Επικοινήστε Μαζί μας

Συμπληρώστε την φόρμα και σύντομα θα επικοινωνήσουμε μαζί σας.

Mobirise
Διεύθυνση

Διονυσίου Φαραζούλη 2Α
25100
Αίγιο

Επικοινωνία

Email: hello@webgurus.gr             
Phone 1:+30 697 323 0403            
Phone 2: +30 699 7166 003