Εικόνες, PHP και άλλα κέρδη ταχύτητας

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

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

Βασικές έννοιες: βελτιστοποίηση εικόνων, WebP και AVIF, lazy loading, η εικόνα LCP, fetchpriority, έκδοση PHP, εκκαθάριση βάσης δεδομένων (αναθεωρήσεις, transients, autoload), WP-Cron, πραγματικό cron, DISABLE_WP_CRON, εξωτερικές γραμματοσειρές, Heartbeat

Εργαστείτε με τη σωστή σειρά

Μετά από μια cache σελίδας (μάθημα 6.2), αυτά είναι τα κέρδη που αποδίδουν περισσότερο, περίπου με σειρά προσπάθειας σε σχέση με το αποτέλεσμα:

1. εικόνες σε τάξη·
2. μια ενημερωμένη έκδοση PHP·
3. λιγότερα εξωτερικά στοιχεία και βαριά πρόσθετα·
4. μια τακτοποιημένη βάση δεδομένων·
5. προγραμματισμένες εργασίες σε πραγματικό cron.

Μετρήστε πριν και μετά από κάθε βήμα (μάθημα 6.1), διαφορετικά δεν θα ξέρετε τι βοήθησε. Και κάντε ένα πράγμα τη φορά.

Εικόνες: το μεγαλύτερο κέρδος στον browser

Στις περισσότερες σελίδες, οι εικόνες αποτελούν το μεγαλύτερο μέρος αυτού που κατεβάζει ένας επισκέπτης. Όσα μάθατε στο μάθημα 4.4 αποδίδουν καρπούς εδώ:

• Σωστό μέγεθος: μην ανεβάζετε μεγαλύτερο από όσο χρειάζεται και αφήστε το WordPress να προσφέρει μικρότερα μεγέθη μέσω srcset.
• Συμπίεση και μορφή: το WebP είναι συνήθως αρκετά μικρότερο από το JPEG στην ίδια ποιότητα· το AVIF συχνά ακόμα μικρότερο. Ένα πρόσθετο μπορεί να μετατρέψει υπάρχουσες εικόνες και να δώσει τη μικρότερη έκδοση σε browsers που την υποστηρίζουν. Ελέγξτε αν η μετατροπή γίνεται στον δικό σας server ή σε εξωτερική υπηρεσία.
• Lazy loading, αλλά όχι για τα πάντα. Το WordPress δίνει αυτόματα στις εικόνες loading="lazy", εκτός από την πρώτη μεγάλη εικόνα στην κορυφή. Αυτή η εικόνα είναι συχνά το στοιχείο LCP (μάθημα 6.1): το μεγαλύτερο κομμάτι περιεχομένου που βλέπει πρώτο ο επισκέπτης. Αν αυτή φορτωθεί με lazy loading, ο browser περιμένει ακριβώς γι' αυτήν και το LCP σας χειροτερεύει. Γι' αυτό το WordPress δίνει συχνά στον υποψήφιο LCP fetchpriority="high", ώστε ο browser να τον ανακτήσει πρώτο.

<img src="hero-1536x864.webp" width="1536" height="864"
     fetchpriority="high" alt="Συνεργείο με ποδήλατα στη σειρά">
<img src="team-768x512.webp" width="768" height="512"
     loading="lazy" alt="Η ομάδα μπροστά από το κατάστημα">

Μια παγίδα: ορισμένα θέματα εμφάνισης, εργαλεία κατασκευής σελίδων και πρόσθετα βελτιστοποίησης βάζουν lazy loading και στην πρώτη εικόνα, ή φορτώνουν τη μεγάλη εικόνα ως φόντο μέσω CSS (που ανακαλύπτεται αργότερα). Στο PageSpeed Insights βλέπετε στο στοιχείο LCP ποιο είναι αυτό το στοιχείο και αν φορτώνεται με lazy loading.

PHP: δωρεάν ταχύτητα

Κάθε νέα μεγάλη έκδοση της PHP είναι πιο γρήγορη από την προηγούμενη, και οι ιστότοποι WordPress επωφελούνται αμέσως από αυτό, χωρίς να αλλάξετε τίποτα στον ιστότοπό σας. Επιπλέον, οι παλιές εκδόσεις δεν λαμβάνουν πια ενημερώσεις ασφαλείας (μάθημα 8.4). Αν αλλάξετε έκδοση, ελέγξτε αν τα πρόσθετα και το θέμα εμφάνισής σας υποστηρίζουν τη νέα έκδοση, και προτιμήστε να το κάνετε πρώτα σε περιβάλλον δοκιμών (staging).

Στις ρυθμίσεις PHP κοιτάξτε επίσης:

• OPcache: είναι ενεργοποιημένο εξ ορισμού στους περισσότερους παρόχους φιλοξενίας. Μια συνέπεια: ένα τροποποιημένο αρχείο PHP μπορεί να χρειαστεί λίγο χρόνο μέχρι η PHP να χρησιμοποιήσει τη νέα έκδοση.
• memory_limit: πολύ χαμηλό προκαλεί σφάλματα σε βαριές σελίδες· πολύ υψηλό δεν κάνει τον ιστότοπό σας πιο γρήγορο.

Εξωτερικά στοιχεία και βαριά πρόσθετα

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

• Είναι απαραίτητο; Ένα βίντεο που σχεδόν κανείς δεν αναπαράγει, μπορεί επίσης να είναι εικόνα με σύνδεσμο.
• Μπορεί να γίνει τοπικά; Τις γραμματοσειρές μπορείτε συνήθως να τις βάλετε στον δικό σας server (με ένα πρόσθετο ή μέσω του theme.json σε ένα θέμα εμφάνισης με μπλοκ). Αυτό εξοικονομεί μια σύνδεση και είναι καλύτερο για το απόρρητό σας (μάθημα 9.3).
• Μπορεί να γίνει αργότερα; Ένα widget συνομιλίας ή βίντεο μπορεί να φορτώσει μόνο μετά από ένα κλικ.

Για τα πρόσθετα, βοηθάει η μέτρηση με X-Ray (σε φιλοξενία με CloudLinux) ή με ένα πρόσθετο όπως το Query Monitor (ενεργοποιήστε το προσωρινά, ορατό μόνο σε διαχειριστές). Αυτά δείχνουν ποιο πρόσθετο κοστίζει τα περισσότερα ερωτήματα βάσης δεδομένων ή χρόνο.

Εκκαθάριση της βάσης δεδομένων

Μια βάση δεδομένων μεγαλώνει με πράγματα που δεν βλέπετε:

• Αναθεωρήσεις (μάθημα 4.1): κάθε αποθηκευμένη έκδοση κάθε σελίδας. Περιορίστε τες με WP_POST_REVISIONS και καθαρίστε τις παλιές.
• Σχόλια ανεπιθύμητης αλληλογραφίας και κάδου ανακύκλωσης, και άρθρα στον κάδο ανακύκλωσης.
• Transients: προσωρινά δεδομένα προσθέτων στο wp_options, που μερικές φορές δεν καθαρίζονται.
• Autoload: οι επιλογές στο wp_options με ενεργοποιημένο autoload φορτώνονται σε κάθε αίτημα με τη μία. Πρόσθετα που έχετε αφαιρέσει εδώ και καιρό, αφήνουν μερικές φορές εκεί μεγάλες ποσότητες δεδομένων. Η Υγεία ιστότοπου (μάθημα 5.4) προειδοποιεί αν τα δεδομένα autoload είναι πολύ μεγάλα.
• Πίνακες καταγραφής προσθέτων (στατιστικά, καταγραφές ασφαλείας, καταγραφές email) που δεν αδειάζουν ποτέ.

Η εκκαθάριση μπορεί να γίνει με ένα πρόσθετο εκκαθάρισης, με WP-CLI (wp transient delete --expired, wp post delete $(wp post list --post_type=revision --format=ids) --force), ή με τη λειτουργία βελτιστοποίησης του phpMyAdmin για τους ίδιους τους πίνακες. Πάντα πρώτα ένα αντίγραφο ασφαλείας. Μην αφαιρείτε τίποτα για το οποίο δεν ξέρετε τι είναι.

Προγραμματισμένες εργασίες: WP-Cron

Το WordPress έχει εργασίες που πρέπει να εκτελούνται σε συγκεκριμένη στιγμή: δημοσίευση ενός προγραμματισμένου άρθρου, έλεγχος για ενημερώσεις, λειτουργία ενός προσθέτου αντιγράφων ασφαλείας. Αυτό ονομάζεται WP-Cron. Εξ ορισμού, το WP-Cron δεν λειτουργεί με ρολόι, αλλά με επίσκεψη: σε κάθε αίτημα σελίδας, το WordPress ελέγχει αν υπάρχει εργασία έτοιμη. Δύο μειονεκτήματα:

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

Καλύτερα: απενεργοποιήστε το WP-Cron στις επισκέψεις και αφήστε ένα πραγματικό cronjob του server να το εκτελεί κάθε πέντε ή δέκα λεπτά. Στο wp-config.php (πάνω από το «σταματήστε την επεξεργασία»):

define( 'DISABLE_WP_CRON', true );

Και στην οθόνη cron του πίνακα φιλοξενίας σας, μια εργασία, κάθε 10 λεπτά:

*/10 * * * *  /usr/local/bin/php /home/gebruiker/domains/example.com/public_html/wp-cron.php >/dev/null 2>&1

Η διαδρομή προς την PHP και προς τον ιστότοπό σας διαφέρει ανά πάροχο φιλοξενίας· κοιτάξτε στο εγχειρίδιο του πίνακα σας. Ή χρησιμοποιήστε WP-CLI: wp cron event run --due-now. Ελέγξτε εκ των υστέρων στην Υγεία ιστότοπου ότι δεν υπάρχουν προγραμματισμένες εργασίες που καθυστερούν.

Heartbeat και η διαχείριση

Ο Πίνακας Ελέγχου του WordPress, όσο παραμένει ανοιχτός, επικοινωνεί με τον server κάθε 15 έως 60 δευτερόλεπτα (το Heartbeat): για αυτόματη αποθήκευση, για να ειδοποιεί ότι κάποιος άλλος επεξεργάζεται το ίδιο άρθρο, και για ειδοποιήσεις. Αν αφήνετε δέκα καρτέλες με τη διαχείριση ανοιχτές όλη μέρα, αυτό σημαίνει χιλιάδες αιτήματα. Κλείστε καρτέλες που δεν χρησιμοποιείτε. Ορισμένα πρόσθετα cache μπορούν να επιβραδύνουν το Heartbeat· η πλήρης απενεργοποίησή του δεν είναι απαραίτητη και χαλάει την αυτόματη αποθήκευση.

Σύνοψη

• Μετά την cache σελίδας: εικόνες, έκδοση PHP, εξωτερικά στοιχεία και πρόσθετα, βάση δεδομένων, cron. Μετρήστε πριν και μετά, ένα βήμα τη φορά.
• Lazy loading για όλα εκτός από τη μεγάλη εικόνα στην κορυφή· αυτή προτιμάται να έχει fetchpriority="high".
• Μια νεότερη έκδοση PHP είναι δωρεάν ταχύτητα, αρκεί τα πρόσθετά σας να την υποστηρίζουν.
• Καθαρίστε αναθεωρήσεις, transients, ανεπιθύμητη αλληλογραφία και μεγάλα δεδομένα autoload, πάντα με αντίγραφο ασφαλείας.
• Ρυθμίστε το WP-Cron σε πραγματικό cronjob με DISABLE_WP_CRON και μια εργασία στον πίνακά σας.

Κουίζ

Άσκηση

Άσκηση A6.3: Lazy loading και μεγέθη εικόνων στην αρχική σας σελίδα. Συμπληρώστε τη διεύθυνση του ιστότοπού σας. Το πρόγραμμα διαβάζει την αρχική σελίδα και εξετάζει τις εικόνες: δεν έχει η πρώτη μεγάλη εικόνα loading="lazy" (και κατά προτίμηση fetchpriority="high"), έχουν οι εικόνες πιο κάτω lazy loading, και ποιο ποσοστό των εικόνων είναι WebP ή AVIF;

Άσκηση D6.3: Πριν και μετά. Μετρήστε μια σελίδα του ιστότοπού σας τρεις φορές στο PageSpeed Insights (κινητό) και σημειώστε τη μεσαία τιμή LCP, INP (ή την εργαστηριακή τιμή Total Blocking Time αν δεν υπάρχουν δεδομένα πεδίου), CLS και το TTFB από την άσκηση A6.1. Στη συνέχεια εφαρμόστε μία βελτίωση από αυτό το μάθημα (εικόνες, έκδοση PHP, αφαίρεση εξωτερικού στοιχείου, εκκαθάριση βάσης δεδομένων ή πραγματικό cron). Μετρήστε ξανά τρεις φορές και σημειώστε τις νέες τιμές. Περιγράψτε τι κάνατε και αν η διαφορά είναι μεγαλύτερη από τη συνήθη διακύμανση μεταξύ μετρήσεων.

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

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

• Εγχειρίδιο DirectAdmin 14.1: Η επιλογή της έκδοσης PHP (Select PHP version)
• Εγχειρίδιο DirectAdmin 12.7: Έλεγχος, επιδιόρθωση και βελτιστοποίηση μιας βάσης δεδομένων
• Εγχειρίδιο DirectAdmin 15.1: Cron Jobs: εργασίες αυτόματα σε προκαθορισμένο χρόνο
• Δημιουργία cronjob ή εργασίας (και τι να κάνετε αν δεν εκτελείται)
• Εγχειρίδιο DirectAdmin 17.4: X-Ray: εντοπισμός αργών σελίδων
• Σύνδεση του WP-Cron με το cron συστήματος (developer.wordpress.org, Αγγλικά): https://developer.wordpress.org/plugins/cron/hooking-wp-cron-into-the-system-task-scheduler/
• Lazy loading και LCP (web.dev, Αγγλικά): https://web.dev/articles/lcp-lazy-loading