Caching

Ενότητα 6: Ταχύτητα · Χρόνος ανάγνωσης: 9 λεπτά

Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να εξηγήσετε ποια είδη cache υπάρχουν και να ρυθμίζετε και να ελέγχετε σωστά μια προσωρινή μνήμη σελίδας.

Βασικές έννοιες: προσωρινή μνήμη σελίδας, cache browser, Cache-Control, object cache, Redis, OPcache, CDN, πρόσθετο cache, LiteSpeed Cache, εξαιρέσεις (συνδεδεμένοι χρήστες, καλάθι αγορών, ολοκλήρωση παραγγελίας), εκκαθάριση cache, διπλά πρόσθετα cache

Cache: μην κάνετε τη δουλειά δύο φορές

Μια cache αποθηκεύει το αποτέλεσμα μιας εργασίας, ώστε την επόμενη φορά να μη χρειάζεται να γίνει ξανά. Σε έναν ιστότοπο WordPress υπάρχουν τέσσερα σημεία όπου αυτό συμβαίνει, από το μεγαλύτερο προς το μικρότερο:

Η προσωρινή μνήμη σελίδας

Το μάθημα 1.2 το έδειξε: χωρίς cache, το WordPress δημιουργεί εξαρχής ολόκληρη τη σελίδα σε κάθε επίσκεψη. Με μια προσωρινή μνήμη σελίδας, ο πρώτος επισκέπτης τη δημιουργεί και οι επόμενοι λαμβάνουν το αποθηκευμένο HTML. Ένας χρόνος TTFB ενός δευτερολέπτου μπορεί έτσι να γίνει μερικά εκατοστά του δευτερολέπτου, και το πακέτο σας μπορεί να εξυπηρετήσει πολύ περισσότερους επισκέπτες ταυτόχρονα.

Ο τρόπος που αποκτάτε μια προσωρινή μνήμη σελίδας εξαρτάται από τον web server σας:

• LiteSpeed (πολλά πακέτα κοινόχρηστης φιλοξενίας, μεταξύ αυτών και το WebOké): ο ίδιος ο web server διαθέτει cache. Το δωρεάν πρόσθετο LiteSpeed Cache το κατευθύνει από το WordPress: ποιες σελίδες επιτρέπεται να μπαίνουν στην cache, πότε γίνεται εκκαθάριση. Επειδή η cache βρίσκεται στον ίδιο τον web server, η PHP δεν εκκινείται καθόλου για μια αποθηκευμένη σελίδα.
• Apache ή nginx: ένα πρόσθετο cache που αποθηκεύει το HTML ως αρχεία, όπως το WP Super Cache, το W3 Total Cache ή ένα επί πληρωμή πρόσθετο όπως το WP Rocket. Ή μια cache που διαχειρίζεται ο πάροχος φιλοξενίας σε επίπεδο server.
• Η διαχειριζόμενη φιλοξενία WordPress διαθέτει συχνά δική της cache· εκεί συνήθως δεν εγκαθιστάτε πρόσθετο cache.

Επιλέξτε ένα. Δύο πρόσθετα cache ταυτόχρονα (για παράδειγμα LiteSpeed Cache και WP Rocket) εμποδίζουν το ένα το άλλο: διπλή εργασία, σελίδες που δεν εκκαθαρίζονται, παράξενα σφάλματα. Σε έναν server LiteSpeed, το LiteSpeed Cache συνεργάζεται με την cache του web server· ένα άλλο πρόσθετο cache δεν μπορεί να το κάνει αυτό.

Τι δεν επιτρέπεται στην cache

Μια προσωρινή μνήμη σελίδας δίνει σε όλους το ίδιο HTML. Αυτό πάει στραβά με σελίδες που διαφέρουν ανά επισκέπτη:

• συνδεδεμένους χρήστες (η μπάρα διαχείρισης, «Καλώς ήρθατε, Λίζα»)·
• το καλάθι αγορών, την ολοκλήρωση παραγγελίας και το Ο λογαριασμός μου σε ένα ηλεκτρονικό κατάστημα·
• σελίδες με φόρμα που περιέχει εφάπαξ κωδικό (nonce), ο οποίος λήγει μετά από κάποιο χρονικό διάστημα·
• σελίδες που εμφανίζουν κάτι διαφορετικό ανάλογα με την τοποθεσία, τη γλώσσα ή ένα cookie.

Τα καλά πρόσθετα cache παραλείπουν αυτόματα τους συνδεδεμένους χρήστες και τις γνωστές σελίδες του WooCommerce. Σε άλλα πρόσθετα (μια ενότητα μελών, ένα σύστημα κρατήσεων) πρέπει να ρυθμίσετε εσείς οι ίδιοι εξαιρέσεις. Το σημάδι ότι κάτι πάει στραβά: ένας επισκέπτης βλέπει το καλάθι αγορών κάποιου άλλου, ή μια φόρμα εμφανίζει «έληξε» ή «μη έγκυρο αίτημα».

Εκκαθάριση: πότε είναι παλιά η cache;

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

Η cache browser

Ο server ενημερώνει τον browser μέσω κεφαλίδων για πόσο καιρό επιτρέπεται να διατηρεί ένα αρχείο:

cache-control: public, max-age=31536000

Αυτό σημαίνει: διατηρήστε το για έναν χρόνο. Για stylesheets, scripts, γραμματοσειρές και εικόνες, ένας μεγάλος χρόνος είναι εντάξει, επειδή το WordPress τοποθετεί διαφορετικό ?ver= στο τέλος της διεύθυνσης όταν υπάρχει νέα έκδοση, και ο browser το αντιμετωπίζει τότε ως νέο αρχείο. Για το ίδιο το HTML, συνηθίζεται ένας μικρός χρόνος (ή κανένας), ώστε οι επισκέπτες να βλέπουν γρήγορα τις αλλαγές.

Πολλοί πάροχοι φιλοξενίας και πρόσθετα cache το ρυθμίζουν αυτό. Στην άσκηση αυτού του μαθήματος θα το ελέγξετε.

Object cache και Redis

Μια προσωρινή μνήμη σελίδας δεν βοηθά σε συνδεδεμένους χρήστες ούτε στο καλάθι αγορών. Εκεί βοηθά μια object cache: το WordPress αποθηκεύει το αποτέλεσμα ερωτημάτων βάσης δεδομένων στη μνήμη, σε ένα πρόγραμμα όπως το Redis ή το Memcached. Την επόμενη φορά που εμφανίζεται το ίδιο ερώτημα, το WordPress παίρνει την απάντηση από τη μνήμη αντί από τη βάση δεδομένων.

Αυτό είναι ιδιαίτερα χρήσιμο για ηλεκτρονικά καταστήματα, ιστότοπους μελών και ιστότοπους με πολλούς συνδεδεμένους συντάκτες. Για έναν συνηθισμένο ενημερωτικό ιστότοπο με προσωρινή μνήμη σελίδας, η διαφορά είναι μικρή. Μια object cache απαιτεί ο πάροχος φιλοξενίας σας να προσφέρει Redis ή Memcached· στη συνέχεια την ενεργοποιείτε με ένα πρόσθετο (το LiteSpeed Cache το υποστηρίζει, υπάρχουν επίσης ξεχωριστά πρόσθετα).

Ένα CDN

Ένα CDN (content delivery network) είναι ένα δίκτυο servers σε πολλά σημεία του κόσμου που διατηρούν αντίγραφα των αρχείων σας (και μερικές φορές ολόκληρες τις σελίδες σας). Ένας επισκέπτης τα λαμβάνει από τον πλησιέστερο server. Αυτό βοηθά κυρίως σε επισκέπτες που βρίσκονται μακριά και σε μεγάλη κίνηση. Για έναν ολλανδικό ιστότοπο με ολλανδούς επισκέπτες σε έναν ολλανδικό server, το κέρδος είναι μικρό. Ένα CDN με proxy (όπως το Cloudflare) αλλάζει επίσης το DNS και το πιστοποιητικό σας (μάθημα 7.5 του μαθήματος DNS)· μην το κάνετε αυτό χωρίς να καταλαβαίνετε τι κάνει.

Στην πράξη: έτσι μοιάζει σε έναν πίνακα ελέγχου

Ως παράδειγμα χρησιμοποιούμε το LiteSpeed Cache σε έναν server LiteSpeed. Άλλα πρόσθετα cache έχουν παρόμοιες ρυθμίσεις με διαφορετικά ονόματα.

1. Εγκαταστήστε και ενεργοποιήστε το LiteSpeed Cache στο Πρόσθετα > Νέο πρόσθετο.
2. Ανοίξτε LiteSpeed Cache > Cache: η «Ενεργοποίηση cache» είναι ενεργή, η «Cache για συνδεδεμένους χρήστες» ανενεργή (εκτός αν γνωρίζετε τι κάνετε).
3. Σε ένα ηλεκτρονικό κατάστημα: ελέγξτε στις Εξαιρέσεις ότι το καλάθι αγορών, η ολοκλήρωση παραγγελίας και το Ο λογαριασμός μου περιλαμβάνονται (στο WooCommerce αυτό γίνεται αυτόματα).
4. Αφήστε αρχικά ανενεργά τα υπόλοιπα στοιχεία (βελτιστοποίηση CSS και JavaScript, εικόνες). Ενεργοποιήστε τα ένα ένα και δοκιμάστε μετά από κάθε βήμα: ακριβώς αυτά τα στοιχεία σπάνε μερικές φορές ένα θέμα εμφάνισης.
5. Ελέγξτε σε ένα ιδιωτικό παράθυρο με τα εργαλεία προγραμματιστή (F12, Δίκτυο, πρώτο αίτημα): στη δεύτερη φόρτωση θα πρέπει να εμφανίζεται x-litespeed-cache: hit.

Σύνοψη

• Υπάρχουν τέσσερα είδη cache: σελίδας (το μεγαλύτερο κέρδος), browser, object και OPcache.
• Σε έναν server LiteSpeed, το LiteSpeed Cache κατευθύνει την cache του web server· σε Apache ή nginx χρησιμοποιείτε άλλο πρόσθετο cache. Επιλέξτε ένα.
• Συνδεδεμένοι χρήστες, καλάθι αγορών, ολοκλήρωση παραγγελίας και προσωπικές σελίδες δεν ανήκουν στην προσωρινή μνήμη σελίδας.
• Καθαρίστε την cache μετά από αλλαγές στο μενού ή στο θέμα εμφάνισης και ελέγξτε σε ιδιωτικό παράθυρο.
• Μια object cache (Redis) βοηθά σε ηλεκτρονικά καταστήματα και συνδεδεμένους χρήστες· ένα CDN κυρίως σε μεγάλες αποστάσεις και μεγάλη κίνηση.

Κουίζ

Άσκηση

Άσκηση A6.2: Λειτουργεί η cache σελίδας σας; Συμπληρώστε τη διεύθυνση του ιστότοπού σας. Το πρόγραμμα ζητά την αρχική σελίδα δύο φορές σε σύντομο χρονικό διάστημα, χωρίς cookies, και ελέγχει τη δεύτερη φορά για κεφαλίδες που υποδεικνύουν επιτυχή εύρεση στην cache (x-litespeed-cache: hit, x-cache: HIT, cf-cache-status: HIT, μια τιμή age μεγαλύτερη από 0, ή την κεφαλίδα κάποιας άλλης γνωστής cache). Στη συνέχεια ζητά ένα stylesheet από την αρχική σελίδα και ελέγχει αν ο browser επιτρέπεται να το διατηρεί τουλάχιστον επτά ημέρες (cache-control: max-age ή expires). Σημειώστε ποια cache χρησιμοποιείτε.

Περαιτέρω ανάγνωση

Αυτά τα άρθρα περιγράφουν τα βήματα στους πίνακες ελέγχου του WebOké· σε άλλους πίνακες ελέγχου λειτουργούν με παρόμοιο τρόπο.

• Εγχειρίδιο DirectAdmin 18.3: Η ιστοσελίδα μου είναι αργή
• Εγχειρίδιο DirectAdmin 15.7: Redis
• Ο ιστότοπός σας είναι αργός ή χρησιμοποιεί υπερβολική CPU: πώς να τον κάνετε πιο γρήγορο
• OPcache: καθυστέρηση 30 δευτερολέπτων κατά την αλλαγή αρχείου PHP
• Είναι ενεργοποιημένο το gzip στο DirectAdmin και στο LiteSpeed ή στον Apache;
• Cache στο WordPress (developer.wordpress.org, Αγγλικά): https://developer.wordpress.org/advanced-administration/performance/cache/