Πώς να μειώσεις τον χρόνο φόρτωσης της ιστοσελίδας σου

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

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

Ποιες είναι οι πιο συνηθισμένες αιτίες αργών χρόνων φόρτωσης ιστοσελίδας;

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

Αβελτιστοποίητες εικόνες

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

Δεν υπάρχει caching

• Χωρίς caching, κάθε επίσκεψη απαιτεί από τον διακομιστή να ξαναχτίσει τη σελίδα και από τον browser να κατεβάσει κάθε αρχείο από την αρχή
• Το caching επιτρέπει στους επισκέπτες που επιστρέφουν να φορτώνουν σελίδες από αποθηκευμένα αντίγραφα αντί να κατεβάζουν τα πάντα ξανά

Μη συμπιεσμένα αρχεία κώδικα

• Τα αρχεία CSS και JavaScript περιέχουν συχνά κενά, σχόλια και μορφοποίηση που τα κάνουν ευανάγνωστα για προγραμματιστές αλλά προσθέτουν περιττό βάρος για τους browser
• Η συμπίεση (minification) αφαιρεί αυτό το πλεόνασμα και μειώνει τα μεγέθη αρχείων, μερικές φορές κατά 30 έως 50 τοις εκατό

Αργή απόκριση διακομιστή

• Τα πάντα περιμένουν τον διακομιστή. Αν ο διακομιστής αργεί πάνω από 800 χιλιοστά του δευτερολέπτου να απαντήσει, κάθε άλλος δείκτης καθυστερεί από την αρχή
• Τα περιβάλλοντα κοινόχρηστης φιλοξενίας και οι αβελτιστοποίητες βάσεις δεδομένων είναι οι πιο συνηθισμένες αιτίες υψηλού Time to First Byte

Πόροι που μπλοκάρουν την απόδοση

• Τα scripts και τα stylesheets που φορτώνονται στην κεφαλίδα του εγγράφου σταματούν τον browser πριν προλάβει να αποδώσει οτιδήποτε
• Αν μετακινήσεις τα μη κρίσιμα scripts ώστε να φορτώνουν μετά το κύριο περιεχόμενο, αφαιρείς αυτό το σημείο συμφόρησης

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

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

Διάλεξε τη σωστή μορφή

• Το WebP παράγει μικρότερα αρχεία από το JPEG με την ίδια οπτική ποιότητα και υποστηρίζει διαφάνεια όπως το PNG
• Πέρασε σε WebP για όλες τις φωτογραφίες και τα γενικά γραφικά. Χρησιμοποίησε PNG μόνο όταν χρειάζεται διαφάνεια

Άλλαξε το μέγεθος πριν το ανέβασμα

• Αν ανεβάσεις εικόνα πλάτους 4.000 pixel για να εμφανίζεται σε πλάτος 800 pixel, αναγκάζεις κάθε επισκέπτη να κατεβάσει τέσσερις φορές περισσότερα δεδομένα από όσα χρειάζεται
• Άλλαξε το μέγεθος των εικόνων στο μέγιστο πλάτος εμφάνισής τους πριν τις ανεβάσεις

Συμπίεσε σε κατάλληλο επίπεδο ποιότητας

• Μια ρύθμιση ποιότητας 75 έως 85 σε μορφές με απώλειες παράγει αρχεία 60 έως 80 τοις εκατό μικρότερα από το πρωτότυπο, χωρίς ορατή διαφορά ποιότητας στις περισσότερες φωτογραφίες
• Ο συνδυασμός σωστής μορφής, σωστού μεγέθους και κατάλληλης συμπίεσης μπορεί να μειώσει το βάρος εικόνων μιας σελίδας κατά 80 έως 90 τοις εκατό

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

Πώς μειώνει το caching τον χρόνο φόρτωσης;

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

Caching του browser

• Ο browser του επισκέπτη αποθηκεύει CSS, JavaScript, εικόνες και γραμματοσειρές μετά την πρώτη επίσκεψη
• Οι επόμενες επισκέψεις φορτώνουν αυτά τα αρχεία από την τοπική συσκευή αντί να τα κατεβάζουν ξανά, μειώνοντας δραματικά τον χρόνο φόρτωσης για τους επισκέπτες που επιστρέφουν
• Το caching του browser ελέγχεται από κεφαλίδες cache που ορίζονται στον διακομιστή. Οι περισσότερες σύγχρονες πλατφόρμες φιλοξενίας τις ορίζουν αυτόματα

Caching του διακομιστή

• Ο διακομιστής αποθηκεύει προ-παραγμένες εκδόσεις σελίδων, ώστε να μην χρειάζεται να ξαναχτίζονται από την αρχή σε κάθε αίτημα
• Αυτό επιταχύνει το Time to First Byte για όλους τους επισκέπτες, και για όσους έρχονται πρώτη φορά
• Το caching του διακομιστή έχει τη μεγαλύτερη επίδραση σε δυναμικές ιστοσελίδες όπου οι σελίδες παράγονται από ερωτήματα βάσης δεδομένων

Για λεπτομερή εξήγηση του πώς λειτουργεί το caching του browser και πώς να το ρυθμίσεις, δες το άρθρο για το τι είναι το caching του browser και πώς λειτουργεί.

Τι κάνει η συμπίεση (minification) για την ταχύτητα φόρτωσης;

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

• Η συμπίεση CSS μειώνει συνήθως το μέγεθος του αρχείου κατά 20 έως 30 τοις εκατό
• Η συμπίεση JavaScript μπορεί να μειώσει το μέγεθος αρχείου κατά 30 έως 50 τοις εκατό, περισσότερο σε μεγάλα αρχεία με πολλά σχόλια και κενά
• Η συμπίεση είναι μία από τις πιο εύκολες νίκες, γιατί δεν απαιτεί αλλαγές στο πώς φαίνεται ή λειτουργεί η ιστοσελίδα και μπορεί συχνά να ενεργοποιηθεί μέσω πρόσθετου ή ρύθμισης της πλατφόρμας

Για πλήρη ανάλυση του πώς λειτουργεί η συμπίεση σε CSS, JavaScript και HTML, δες το άρθρο για το τι είναι η συμπίεση (minification) και πώς βοηθά την ιστοσελίδα σου.

Πώς μειώνει ένα CDN τον χρόνο φόρτωσης για τους επισκέπτες;

Ένα δίκτυο διανομής περιεχομένου μειώνει τη φυσική απόσταση ανάμεσα στον επισκέπτη και στον διακομιστή που παραδίδει τα αρχεία σου. Χωρίς CDN, όλοι οι επισκέπτες συνδέονται σε έναν διακομιστή σε μία τοποθεσία. Με CDN, κάθε επισκέπτης εξυπηρετείται από τον πιο κοντινό σε αυτόν διακομιστή.

• Για επισκέπτες κοντά στον διακομιστή προέλευσης, η βελτίωση ταχύτητας από ένα CDN είναι μέτρια
• Για επισκέπτες σε άλλες χώρες ή περιοχές, ένα CDN μπορεί να μειώσει το Time to First Byte κατά εκατοντάδες χιλιοστά του δευτερολέπτου
• Τα CDN έχουν τη μεγαλύτερη επίδραση σε ιστοσελίδες με διεθνές κοινό ή σημαντικό περιεχόμενο πολυμέσων
• Κάποιες πλατφόρμες φιλοξενίας περιλαμβάνουν αυτόματα παράδοση μέσω CDN. Όπου περιλαμβάνεται, δεν χρειάζεται επιπλέον ρύθμιση

Για πλήρη εξήγηση του πώς λειτουργούν τα CDN και ποιος τα χρειάζεται, δες το άρθρο για το τι είναι ένα CDN και πώς βοηθά την ιστοσελίδα σου.

Τι είναι το lazy loading και πώς μειώνει τον αρχικό χρόνο φόρτωσης;

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

• Σε μια σελίδα με είκοσι εικόνες, το lazy loading σημαίνει ότι ο browser κατεβάζει μόνο τις τρεις ή τέσσερις εικόνες που φαίνονται στην οθόνη όταν ανοίγει πρώτα η σελίδα
• Οι υπόλοιπες εικόνες φορτώνουν καθώς ο επισκέπτης κυλά, απλώνοντας τη λήψη στον χρόνο αντί να τη φορτώνει όλη στην αρχή
• Το lazy loading βελτιώνει άμεσα το Time to Interactive και μπορεί να έχει αισθητή επίδραση στο Largest Contentful Paint όταν το περιεχόμενο στο ορατό τμήμα δεν είναι βαρύ σε εικόνες
• Μην εφαρμόζεις lazy loading σε εικόνες στο ορατό τμήμα. Αυτές πρέπει να φορτώνουν αμέσως

Για πλήρη οδηγό για το πώς λειτουργεί το lazy loading και πώς να το εφαρμόσεις, δες το άρθρο για το τι είναι το lazy loading και πώς λειτουργεί.

Πώς επιβραδύνουν μια σελίδα οι πόροι που μπλοκάρουν την απόδοση;

Όταν ένας browser συναντά ένα script ή stylesheet στην κεφαλίδα του εγγράφου, σταματά την απόδοση μέχρι να ολοκληρωθεί η φόρτωση αυτού του αρχείου. Ο επισκέπτης δεν βλέπει τίποτα όσο συμβαίνει αυτό. Αυτό λέγεται πόρος που μπλοκάρει την απόδοση (_blocked_-blocking).

Πώς να μειώσεις το μπλοκάρισμα απόδοσης

• Μετακίνησε τη μη κρίσιμη JavaScript ώστε να φορτώνει στο τέλος του εγγράφου ή χρησιμοποίησε το χαρακτηριστικό defer ή async, ώστε τα scripts να μην σταματούν την απόδοση
• Βρες ποιο CSS χρειάζεται αμέσως (στυλ του ορατού τμήματος) και ποιο μπορεί να φορτώσει αργότερα
• Αφαίρεσε ή αντικατέστησε τα scripts τρίτων που δεν είναι απαραίτητα. Τα widget συνομιλίας, οι ενσωματώσεις social media και τα scripts παρακολούθησης προσθέτουν όλα χρόνο μπλοκαρίσματος

Τι γίνεται με τον χρόνο απόκρισης του διακομιστή;

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

Τι επηρεάζει τον χρόνο απόκρισης του διακομιστή

• Ποιότητα φιλοξενίας: τα περιβάλλοντα κοινόχρηστης φιλοξενίας μοιράζουν CPU και μνήμη σε πολλές ιστοσελίδες, προκαλώντας απρόβλεπτους χρόνους απόκρισης
• Απόδοση βάσης δεδομένων: τα αργά ή αβελτιστοποίητα ερωτήματα βάσης δεδομένων καθυστερούν τη δυνατότητα του διακομιστή να παράγει απάντηση
• Caching από την πλευρά του διακομιστή: χωρίς caching, κάθε αίτημα προκαλεί πλήρη ανακατασκευή της σελίδας από τη βάση δεδομένων
• Γεωγραφική απόσταση από τον διακομιστή: ακόμη και πριν εμπλακεί CDN, ένας διακομιστής μακριά από τον επισκέπτη προσθέτει καθυστέρηση

Ένα καλό Time to First Byte είναι κάτω από 800 χιλιοστά του δευτερολέπτου. Αν το TTFB σου είναι σταθερά πάνω από αυτό, η βελτίωση της φιλοξενίας ή η εφαρμογή caching στον διακομιστή θα δώσει κέρδη που καμία βελτιστοποίηση front-end δεν μπορεί να αναπαράγει.

Από πού ξεκινάς για να επιταχύνεις μια ιστοσελίδα;

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

Σειρά προτεραιότητας για τις περισσότερες ιστοσελίδες

• Πρώτο: βελτιστοποίησε τις εικόνες. Αυτό αντιμετωπίζει τη μεγαλύτερη πηγή βάρους σελίδας και ευθύνεται συχνά για το 60 έως 80 τοις εκατό του αποφεύξιμου χρόνου φόρτωσης
• Δεύτερο: ενεργοποίησε το caching. Το caching του browser και του διακομιστή μειώνει τη δουλειά που γίνεται σε κάθε επίσκεψη, ειδικά για τους επισκέπτες που επιστρέφουν
• Τρίτο: συμπίεσε το CSS και τη JavaScript. Μικρότερη προσπάθεια, αξιόπιστη βελτίωση στους χρόνους μεταφοράς αρχείων
• Τέταρτο: πρόσθεσε CDN αν το κοινό σου είναι γεωγραφικά διασκορπισμένο ή αν η παράδοση πολυμέσων είναι σημαντικό μέρος της ιστοσελίδας σου
• Πέμπτο: αντιμετώπισε τους πόρους που μπλοκάρουν την απόδοση και τον χρόνο απόκρισης του διακομιστή, αν τα παραπάνω βήματα έχουν εφαρμοστεί και οι βαθμολογίες εξακολουθούν να είναι κακές

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

Πώς το WEMASY μειώνει τον χρόνο φόρτωσης της ιστοσελίδας

Ο δημιουργός ιστοσελίδων του WEMASY χειρίζεται αυτόματα αρκετές από τις πιο συνηθισμένες βελτιώσεις ταχύτητας. Οι εικόνες συμπιέζονται και μετατρέπονται σε WebP κατά το ανέβασμα. Οι κεφαλίδες caching του browser ρυθμίζονται από προεπιλογή. Τα αρχεία CSS και JavaScript που σερβίρει η πλατφόρμα είναι συμπιεσμένα (minified). Η παράδοση μέσω CDN περιλαμβάνεται σε όλα τα πακέτα και σερβίρει τα στατικά αρχεία από την τοποθεσία που είναι πιο κοντά σε κάθε επισκέπτη.

Οι βαθμολογίες ταχύτητας σελίδας και τα δεδομένα Core Web Vitals φαίνονται στο ταμπλό analytics του WEMASY, με συστάσεις ανά σελίδα που επισημαίνουν τα προβλήματα που απομένουν. Έτσι μπορείς να παρακολουθείς τις βελτιώσεις μετά από κάθε αλλαγή περιεχομένου ή σχεδιασμού χωρίς να τρέχεις χειροκίνητα εξωτερικά τεστ.

Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τις επιλογές πακέτων στη σελίδα τιμών.

Συχνές ερωτήσεις