Όταν ένας επισκέπτης ανοίγει την ιστοσελίδα σου για πρώτη φορά, ο browser του κατεβάζει κάθε αρχείο που χρειάζεται για να εμφανιστεί η σελίδα: HTML, stylesheets, scripts, εικόνες και γραμματοσειρές. Σε επόμενη επίσκεψη, ο browser δεν χρειάζεται να κατεβάσει ξανά όλα αυτά τα αρχεία, αν είναι αποθηκευμένα τοπικά. Το caching του browser είναι ο μηχανισμός που το κάνει αυτό δυνατό και είναι ένας από τους πιο απλούς τρόπους να κάνεις μια ιστοσελίδα να φαίνεται πιο γρήγορη στους επισκέπτες που επιστρέφουν.
Το caching του browser αποθηκεύει αντίγραφα αρχείων της ιστοσελίδας στη συσκευή του επισκέπτη, ώστε οι επόμενες φορτώσεις σελίδων να παραλείπουν τη λήψη πόρων που δεν έχουν αλλάξει. Ο διακομιστής λέει στον browser για πόσο να κρατήσει κάθε αρχείο και πότε να ελέγξει για ενημερωμένες εκδόσεις. Αν καταλάβεις πώς δουλεύει το caching του browser, βλέπεις γιατί οι επαναλαμβανόμενες επισκέψεις φαίνονται συχνά αισθητά πιο γρήγορες από την πρώτη.
Πώς λειτουργεί το caching του browser;
Κάθε αρχείο που στέλνει ο διακομιστής σου περιλαμβάνει οδηγίες cache στις κεφαλίδες της απάντησης HTTP. Αυτές οι κεφαλίδες λένε στον browser αν θα αποθηκεύσει το αρχείο, για πόσο θα το κρατήσει και πότε θα ζητήσει νέο αντίγραφο.
Στην πρώτη επίσκεψη, ο browser κατεβάζει όλα τα απαραίτητα αρχεία από τον διακομιστή σου και αποθηκεύει τα αρχεία που επιτρέπεται να μπουν στην cache στην τοπική αποθήκευση. Στις επόμενες επισκέψεις, ο browser φορτώνει τα έγκυρα αρχεία από την τοπική αποθήκευση αντί να τα κατεβάζει ξανά.
Ποια αρχεία ωφελούνται περισσότερο από το caching του browser;
Δεν πρέπει να μπαίνουν όλα τα αρχεία στην cache με τον ίδιο τρόπο. Οι στατικοί πόροι που σπάνια αλλάζουν είναι ιδανικοί υποψήφιοι. Το δυναμικό περιεχόμενο που ενημερώνεται συχνά χρειάζεται μικρότερες διάρκειες cache ή καθόλου caching.
Μεγάλη διάρκεια cache
- Stylesheets και αρχεία JavaScript που αλλάζουν μόνο όταν ενημερώνεις τον σχεδιασμό της ιστοσελίδας
- Εικόνες λογοτύπου, εικονίδια και favicons
- Αρχεία γραμματοσειρών
- Εικόνες φόντου και διακοσμητικά γραφικά
Μικρή διάρκεια cache ή καθόλου cache
- Σελίδες HTML με περιεχόμενο που ενημερώνεται συχνά
- Σελίδες με εξατομικευμένο ή δυναμικό περιεχόμενο
- Απαντήσεις API και σημεία επεξεργασίας φορμών
Η γενική αρχή είναι απλή: βάλε επιθετικά στην cache ό,τι σπάνια αλλάζει και με προσοχή ό,τι αλλάζει συχνά. Το άρθρο για το τι είναι το caching και γιατί είναι σημαντικό καλύπτει το ευρύτερο τοπίο του caching, μαζί με το caching από την πλευρά του διακομιστή και του CDN.
Γιατί έχει σημασία το caching του browser για την ταχύτητα;
Το caching του browser μειώνει άμεσα τον όγκο δεδομένων που πρέπει να κατεβάσει ο επισκέπτης και τον αριθμό των αιτημάτων προς τον διακομιστή στις επαναλαμβανόμενες επισκέψεις. Και οι δύο βελτιώσεις μεταφράζονται σε πιο γρήγορες φορτώσεις σελίδων.
Πιο γρήγορος αντιληπτός χρόνος φόρτωσης
Η φόρτωση ενός stylesheet από την τοπική αποθήκευση παίρνει χιλιοστά του δευτερολέπτου. Η λήψη του ίδιου αρχείου μέσω σύνδεσης δικτύου παίρνει εκατοντάδες χιλιοστά του δευτερολέπτου ή περισσότερο, ανάλογα με την ταχύτητα της σύνδεσης. Στις επαναλαμβανόμενες επισκέψεις, οι πόροι από την cache εμφανίζονται σχεδόν αμέσως και η σελίδα φαίνεται σημαντικά πιο γρήγορη ακόμη και πριν φορτώσει το νέο περιεχόμενο.
Μειωμένο φορτίο διακομιστή
Κάθε αρχείο που σερβίρεται από την cache του browser είναι ένα αίτημα λιγότερο που πρέπει να χειριστεί ο διακομιστής σου. Για ιστοσελίδες με επισκέπτες που επιστρέφουν, αυτό βελτιώνει τους χρόνους απόκρισης για όλους τους επισκέπτες.
Κέρδη απόδοσης στο κινητό
Οι κινητές συνδέσεις είναι συνήθως πιο αργές από τις συνδέσεις υπολογιστή. Το caching του browser προσφέρει ακόμη μεγαλύτερο όφελος ταχύτητας στο κινητό, γιατί εξαλείφει αιτήματα δικτύου που θα ήταν αργά σε πιο αδύναμες συνδέσεις. Το άρθρο για το γιατί έχει σημασία η ταχύτητα σελίδας στο κινητό εξηγεί γιατί αυτό το επίπεδο είναι ιδιαίτερα κρίσιμο για τους επισκέπτες από κινητό.
Πώς το WEMASY χειρίζεται το caching του browser
Το WEMASY ορίζει αυτόματα κατάλληλες κεφαλίδες cache για όλους τους τύπους αρχείων. Οι στατικοί πόροι, όπως stylesheets, scripts και εικόνες, παίρνουν μεγάλες διάρκειες cache. Οι σελίδες HTML παίρνουν μικρότερες διάρκειες, ώστε οι ενημερώσεις περιεχομένου να εμφανίζονται άμεσα μετά τη δημοσίευση. Όταν κάνεις αλλαγές μέσω του επεξεργαστή, το σύστημα του WEMASY ενημερώνει τις εκδόσεις cache, ώστε οι επισκέπτες που επιστρέφουν να λαμβάνουν φρέσκο περιεχόμενο χωρίς χειροκίνητο καθαρισμό της cache.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Τι είναι το caching του browser;
Το caching του browser αποθηκεύει αντίγραφα αρχείων της ιστοσελίδας στη συσκευή του επισκέπτη, ώστε οι επαναλαμβανόμενες επισκέψεις να φορτώνουν πιο γρήγορα. Ο διακομιστής στέλνει οδηγίες cache με κάθε αρχείο και λέει στον browser για πόσο να το κρατήσει πριν ελέγξει για ενημερώσεις. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Σε τι διαφέρει το caching του browser από το caching του διακομιστή;
Το caching του browser αποθηκεύει αρχεία στη συσκευή του επισκέπτη για πιο γρήγορη φόρτωση στις επαναλαμβανόμενες επισκέψεις του. Το caching του διακομιστή αποθηκεύει προ-χτισμένες σελίδες στον διακομιστή φιλοξενίας, ώστε η διαδικασία δημιουργίας της σελίδας να μην τρέχει σε κάθε αίτημα. Και τα δύο μειώνουν τον χρόνο φόρτωσης, αλλά λειτουργούν σε διαφορετικά σημεία της αλυσίδας παράδοσης.
Γιατί η ιστοσελίδα μου είναι γρήγορη στη δεύτερη επίσκεψη αλλά αργή στην πρώτη;
Η πρώτη επίσκεψη απαιτεί τη λήψη όλων των πόρων της σελίδας από τον διακομιστή. Η δεύτερη επίσκεψη φορτώνει πολλούς από αυτούς τους πόρους από την cache του browser, που είναι πολύ πιο γρήγορη. Είναι φυσιολογική συμπεριφορά και δείχνει ότι το caching του browser δουλεύει. Η βελτιστοποίηση της πρώτης επίσκεψης εστιάζει στη συμπίεση εικόνων, στον χρόνο απόκρισης του διακομιστή και στη μείωση των πόρων που μπλοκάρουν την απόδοση.
Μπορούν οι επισκέπτες να βλέπουν παλιό περιεχόμενο λόγω του caching του browser;
Ναι, αν οι διάρκειες cache είναι πολύ μεγάλες και ο διακομιστής δεν ενημερώνει τις εκδόσεις cache μετά από αλλαγές περιεχομένου. Οι πλατφόρμες που διαχειρίζονται σωστά το θέμα το χειρίζονται αυτόματα, ενημερώνοντας τα αναγνωριστικά cache όταν δημοσιεύεις αλλαγές. Οι επισκέπτες λαμβάνουν τότε φρέσκα αρχεία στην επόμενη επίσκεψή τους, χωρίς να χρειάζεται να καθαρίσουν χειροκίνητα την cache του browser.
Πρέπει να καθαρίσω την cache του browser μου για να δοκιμάσω την ιστοσελίδα μου;
Ο καθαρισμός της cache του browser είναι χρήσιμος όταν δοκιμάζεις αν οι πρόσφατες αλλαγές εμφανίζονται σωστά. Προσομοιώνει την εμπειρία ενός επισκέπτη που έρχεται πρώτη φορά. Για την καθημερινή περιήγηση στη δική σου ιστοσελίδα, δεν χρειάζεται να καθαρίζεις την cache. Χρησιμοποίησε ιδιωτικό παράθυρο ή παράθυρο ανώνυμης περιήγησης για να δοκιμάσεις χωρίς να επηρεάσεις τα συνηθισμένα αποθηκευμένα αρχεία σου.
Χρειάζεται να ρυθμίσω μόνος μου το caching του browser;
Σε διαχειριζόμενη πλατφόρμα ιστοσελίδων, οι κεφαλίδες cache ρυθμίζονται αυτόματα με βάση τον τύπο αρχείου. Σε φιλοξενία που διαχειρίζεσαι μόνος σου, η ρύθμιση της cache απαιτεί ρυθμίσεις διακομιστή ή επεκτάσεις caching. Το WEMASY χειρίζεται όλη τη ρύθμιση του caching του browser χωρίς καμία τεχνική εγκατάσταση από τη μεριά σου.