Tabla de contenidos
Αυτά τα τρία πράγματα ορίζονται στην αρχή για όσους δεν είναι αρκετά ξεκάθαρο τι είναι.
Τεμπέλικη φόρτωση
Το Lazy load, που επίσης ονομάστηκε λανθασμένα "τεμπέλικο" για μια κυριολεκτική μετάφραση, είναι ένα πρότυπο σχεδίασης που χρησιμοποιείται για να καθυστερεί τη φόρτωση ή την απόδοση ενός αντικειμένου μέχρι την κατάλληλη στιγμή χρήσης, ώστε να αποφεύγεται η περιττή προφόρτωση αντικειμένων που μπορεί να μην χρησιμοποιηθούν. Χρησιμοποιείται συνηθέστερα για εικόνες και συμβάλλει σε καλύτερους χρόνους φόρτωσης και εξοικονόμηση εύρους ζώνης.
Η απόδοση κάθε εικόνας καθυστερεί έως ότου χρειαστεί, φορτώνοντας την κατά την κύλιση στο παράθυρο προβολής.
Θέατρο προβολής
ΤοViewport, το οποίο δεν έχει ακριβή μετάφραση, αλλά συχνά αναφέρεται ως "viewport", δημιουργήθηκε από την Apple το 2007 για το iPhone και ήταν ένα εικονικό παράθυρο παρόμοιο με αυτό που είχε σχεδιάσει η Nokia για το Mini Map. Ήταν, και εξακολουθεί να είναι, μια meta tag που προοριζόταν να παρέχει έναν τρόπο στις ιστοσελίδες να επικοινωνούν στα προγράμματα περιήγησης κινητών τηλεφώνων τον τρόπο με τον οποίο ήθελαν το πρόγραμμα περιήγησης να αποδώσει τη σελίδα.
Χωρίς αυτή τη μετα-ετικέτα, τα iPhones παρουσίαζαν τις ιστοσελίδες ως ένα παράθυρο πλάτους 980 px στο οποίο ο χρήστης έπρεπε να κάνει ζουμ. Με αυτή τη μετα-ετικέτα, μπορείτε να αποδώσετε μια σελίδα στο πραγματικό της μέγεθος και στη συνέχεια να προσαρμόσετε τη διάταξη ώστε να παρέχει το είδος της σελίδας που όλοι περιμένουμε να δούμε όταν χρησιμοποιούμε ένα πρόγραμμα περιήγησης για κινητά. Τελικά έγινε μια τυπική meta tag που υποστηρίζεται από τις περισσότερες συσκευές και είναι αυτή που χρησιμοποιείται σήμερα για αυτό που είναι γνωστό ως responsive design.
Litespeed Cache
Ο LiteSpeed Web Server είναι ένα λογισμικό διακομιστή ιστού και το LiteSpeed Cache for WordPress (LSCWP) είναι το all-in-one plugin επιτάχυνσης του ιστότοπου του, το οποίο διαθέτει μια μοναδική κρυφή μνήμη σε επίπεδο διακομιστή και μια συλλογή χαρακτηριστικών βελτιστοποίησης για ιστότοπους WordPress που φιλοξενούνται σε διακομιστή που λειτουργεί υπό το LiteSpeed.
Ανέβασμα εικόνων
Ιδανικά, όλες οι εικόνες θα πρέπει να φορτώνονται καθυστερημένα, εκτός από εκείνες που βρίσκονται ήδη στο παράθυρο προβολής όταν φορτώνεται αρχικά η σελίδα, δηλαδή αυτές που εμφανίζονται με την πρώτη ματιά στην οθόνη πριν κάνετε κύλιση.
Αυτό έχει ένα πρόβλημα. Η σελίδα μπορεί να φαίνεται άσχημη κατά την πρώτη φόρτωση, καθώς οι εικόνες δεν εμφανίζονται μέχρι να μην υπάρχει κίνηση και πρέπει να αποκλείσετε τις δύο ή τρεις πρώτες που εμφανίζονται.
Παρόλο που το WordPress έχει ήδη εγγενή αναβαλλόμενη φόρτωση από την έκδοση 5.5 και μπορούμε να το κάνουμε με πολλά άλλα plugins όπως το Perfmatters, ο έλεγχος του Viewport για να περιορίσουμε ποιες εικόνες θέλουμε να εμφανίζονται και ποιες δεν είναι τόσο απλός, καθώς μπορούμε να του πούμε να μην αναβάλλει την φόρτωση για παράδειγμα των δύο, τριών ή τεσσάρων πρώτων, αλλά δεν μπορούμε να ορίσουμε ή να αποκλείσουμε συγκεκριμένες εικόνες για κάθε σελίδα με απλό τρόπο και μπορούμε να το κάνουμε μόνο μαζικά.
VPI
Στις 25 Ιουλίου, η LiteSpeed πρόσθεσε στην αναβάθμιση της έκδοσης 5.0 του plugin της μια ευέλικτη επιλογή για τη διόρθωση αυτού του προβλήματος, την οποία ονόμασε VPI (Viewport Images).
Η υπηρεσία VPI εξετάζει μια διεύθυνση URL και καθορίζει ποιες εικόνες είναι ορατές σε μια οθόνη 1300×900 pixel για προβολές desktop και ποιες εικόνες είναι ορατές σε μια οθόνη 480×800 για προβολές από κινητά. Επιστρέφει έναν κατάλογο αυτών των εικόνων στο πρόσθετο LiteSpeed και το πρόσθετο LiteSpeed τις αποκλείει από την αργή φόρτωση την επόμενη φορά που θα αποθηκεύσει την εν λόγω διεύθυνση URL.
Το αποτέλεσμα είναι μια σελίδα που αποδίδεται πλήρως πάνω από την πτυσσόμενη σελίδα, ενώ όλες οι εικόνες κάτω από την πτυσσόμενη σελίδα συνεχίζουν να συμπεριφέρονται όπως πριν. Η σελίδα διατηρεί το καλό σκορ ταχύτητας σελίδας, ενώ οι ανθρώπινοι επισκέπτες συναντούν μια πρώτη πλήρη οθόνη περιεχομένου.
Διαμόρφωση
Για να χρησιμοποιήσετε αυτή τη νέα υπηρεσία, πρέπει προφανώς να ενεργοποιήσετε το Lazy Load στο πρόσθετο.
Η διαμόρφωση του VPI είναι απλή, έχει μόνο δύο διακόπτες.
Όταν είναι ενεργοποιημένες οι εικόνες θύρας προβολής (εφεξής VPI) και το cron έχει οριστεί στο ON, οι εικόνες VPI θα δημιουργούνται στο παρασκήνιο μέσω μιας ουράς με βάση το cron.
Εάν δεν θέλετε να ενεργοποιήσετε το cron, θα πρέπει να επεξεργαστείτε την ουρά VPI χειροκίνητα. Μπορείτε να το κάνετε αυτό από το κουμπί"Χειροκίνητη εκτέλεση ουράς VPI" που θα εμφανίζεται όταν υπάρχουν URL στην ουρά ή από το κύριο ταμπλό από την επιλογή"Force cron".
Το ενδιαφέρον και πραγματικά χρήσιμο πράγμα σχετικά με αυτή τη νέα επιλογή είναι ότι τώρα, τόσο στον κλασικό επεξεργαστή όσο και στο Gutenberg, σε κάθε δημοσίευση και σελίδα θα βρείτε ένα νέο πλαίσιο στις επιλογές LiteSpeed όπου μπορείτε να απενεργοποιήσετε εντελώς αυτή την επιλογή και να αφαιρέσετε οποιεσδήποτε εικόνες από το Viewport για να το ρυθμίσετε λεπτομερώς σύμφωνα με τις προτιμήσεις σας.
Οποιεσδήποτε εικόνες εμφανίζονται σε αυτά τα πλαίσια δεν θα φορτώνονται με αναβολή.
Εάν η είσοδος δεν έχει ακόμη υποστεί επεξεργασία για το VPI, και τα δύο πλαίσια θα εμφανίζονται κενά, αν και μπορείτε να προσθέσετε χειροκίνητα εικόνες όπως επιθυμείτε ή να διαγράψετε εικόνες και από τα δύο πλαίσια και να αναγκάσετε έναν επανυπολογισμό του VPI.
Το καλό και το λιγότερο καλό
Αναμφίβολα, το μεγάλο πλεονέκτημα του VPI της LiteSpeed είναι ότι μπορούμε να αποφασίσουμε γρήγορα και εύκολα από καπρίτσιο ποιες συγκεκριμένες εικόνες δεν θέλουμε να εφαρμόζεται η αναβαλλόμενη φόρτωση και να το ορίσουμε χειροκίνητα για κάθε σελίδα.
Η παγίδα είναι ότι αυτή η επιλογή έρχεται να προστεθεί στις άλλες υπηρεσίες βελτιστοποίησης του WordPress της QUIC. cloud, όπως οι υπηρεσίες Critical CSS (CCSS), Unique CSS (UCSS), Low Quality Image Placeholders (LQIP) και Image Optimisation, για τις οποίες μας προσφέρεται ένα περιορισμένο δωρεάν τέλος, το οποίο μπορεί να μην είναι πάντα αρκετό, και στη συνέχεια πρέπει να αγοράσουμε μονάδες, αν και δεν είναι ακριβές.
Αποφάσισα να το δοκιμάσω για να συγκρίνω το αποτέλεσμα με αυτό που προσφέρει το εγγενές Lazy Load του WordPress Core και του Perfmatters (με σταθερές εξαιρέσεις ανά ποσότητα) και προς το παρόν βλέπω μια βελτίωση μέσα στο μικρό περιθώριο που είχε ήδη απομείνει.
Το τελικό οπτικό αποτέλεσμα είναι ακριβώς το ίδιο με το Perfmatters, καθώς μπορείτε απλά να αλλάξετε το χρώμα του placeholder από γκρι σε λευκό και να ρυθμίσετε τη διάρκεια του εφέ"fade in" ανάλογα με τις προτιμήσεις σας με αυτό το CSS.
/* Fade for Litespeed Lazy Load - ΜΕΡΟΣ 1 - Πριν από τη Lazy Load */
img[data-lazyloaded]{
opacity: 0,
}
/* ΜΕΡΟΣ 2 - Μετά την τεμπέλικη φόρτωση */
img.litespeed-loaded{
-webkit-transition: opacity .5s linear 0.2s,
-moz-transition: opacity .5s linear 0.2s,
transition: opacity .5s linear 0.2s,
opacity: 1,
}
