Κατανόηση του WordPress CSS
Πριν βουτήξουμε, ας καταλάβουμε πώς λειτουργεί το κανονικό CSS στο WordPress.
Κάθε θέμα WordPress αποτελείται από style.css που περιέχει όλο τον κώδικα που απαιτείται για το στυλ του ιστότοπού σας. Οι προγραμματιστές θεμάτων θα πρέπει να υποστηρίζουν όλες τις δυνατότητες του WordPress που περιλαμβάνουν αναρτήσεις ιστολογίου, σχόλια, σελίδα προϊόντων, σελίδα μελών, φόρμες κ.λπ. Άλλα πρόσθετα που εγκαθιστάτε μπορούν επίσης να προσθέσουν παρόμοια φύλλα στυλ css.
Αυτό μπορεί να κάνει τα αρχεία css διογκωμένα και μεγάλα σε μέγεθος 200 kb ή ακόμα περισσότερο.
Τι είναι το CSS Critical Path;
Καθώς τα αρχεία CSS μεγαλώνουν, το πρόγραμμα περιήγησής σας πρέπει να κατεβάσει αυτά τα μεγάλα αρχεία, να τα αναλύσει και να τα αποδώσει. Γνωστό και ως αποκλεισμός απόδοσης. Θα αυξήσει επίσης την πρώτη απόδοση με νόημα και την πρώτη απόδοση με νόημα.
Το CSS Critical Path είναι το CSS που απαιτείται για την απόδοση του παραπάνω περιεχομένου σε κάθε ιστοσελίδα. Όπως υποδηλώνει το όνομα, "κρίσιμο" CSS, το οποίο βοηθά το πρόγραμμα περιήγησης να το σχεδιάζει και να το αποδίδει γρήγορα πριν φορτώσει πλήρη αρχεία CSS.
Συνήθως το css της κρίσιμης διαδρομής είναι ενσωματωμένο στην κεφαλίδα και το αρχείο css προέλευσης φορτώνεται ασύγχρονα ή στο υποσέλιδο για ευκολία στη χρήση.
Γιατί το CSS Critical Path είναι τόσο σημαντικό;
Πρέπει να έχετε ήδη δει μια προειδοποίηση από εργαλεία όπως το Google PageSpeed Insights ή το GTmetrix που λέει "βελτιστοποίηση παράδοσης css" ή "αναβολή αχρησιμοποίητου css".
Το κρίσιμο CSS δεν έχει καμία σχέση με το χρόνο φόρτωσης της σελίδας. Δεν αυξάνει/μειώνει τον χρόνο φόρτωσης. Παρέχει όμως πολύ καλύτερη εμπειρία χρήστη. Βοηθά στη γρήγορη "απόδοση" ή "χρωματισμό" μιας ιστοσελίδας.
- Βελτιώνει την πρώτη κλήρωση περιεχομένου (FCP)
- Βελτιώνει την πρώτη σημαντική πληρωμή (FMP)
- Αφαιρέστε το αχρησιμοποίητο CSS (τεχνικά μην το αφαιρέσετε, αλλά δώστε προτεραιότητα στο "χρήσιμο" CSS)
Ακολουθούν δύο στιγμιότυπα οθόνης του ιστολογίου μου με και χωρίς κρίσιμο CSS.
Όπως μπορείτε να δείτε στην ενότητα "χωρίς κρίσιμη διαδρομή css", χρειάστηκαν σχεδόν 5 δευτερόλεπτα για να δείξει στον χρήστη κάτι χρήσιμο σε μια φορητή συσκευή. Το πρόγραμμα περιήγησης πρέπει να κάνει ένα επιπλέον αίτημα HTTP στο αρχείο css, να το κατεβάσει, να το αναλύσει για να ξεκινήσει η απόδοση. Αλλά όταν χρησιμοποιείτε κρίσιμο css, όλα τα απαραίτητα css πρέπει να είναι ενσωματωμένα και το πρόγραμμα περιήγησης μπορεί να ξεκινήσει την απόδοση αμέσως μετά τη φόρτωση του αρχείου HTML σε ένα δευτερόλεπτο ή λιγότερο.
Πώς να δημιουργήσετε κρίσιμο CSS στο WordPress;
Υπάρχουν διάφοροι τρόποι για να δημιουργήσετε κρίσιμο CSS στο WordPress.
Χρήση προσθηκών προσωρινής αποθήκευσης
Το WP Rocket είναι ένα premium πρόσθετο προσωρινής αποθήκευσης που λειτουργεί πολύ καλά.
Ένας από τους λόγους που χρησιμοποιώ το WP Rocket σε κάθε ιστότοπο είναι η ίδια η κρίσιμη γενιά CSS. Δημιουργούν κρίσιμο CSS ξεχωριστά για την αρχική σελίδα, τη σελίδα αναρτήσεων, τη σελίδα κατηγορίας, τη σελίδα προϊόντος κ.λπ. και την ενσωματώνουν. Θα επαναφέρουν το κρίσιμο CSS εάν υπάρξουν αλλαγές στο θέμα ή τη ρύθμιση.
Όλα μπορούν να γίνουν με το πάτημα ενός κουμπιού.
Άλλες προσθήκες προσωρινής αποθήκευσης που μπορούν να δημιουργήσουν κρίσιμο CSS
Το Swift Performance και το LiteSpeed (απαιτείται διακομιστής LiteSpeed/OpenLiteSpeed) είναι παρόμοιες προσθήκες που μπορούν να δημιουργήσουν Critical CSS. Και οι δύο αυτές προσθήκες έχουν ενσωματωμένο cloud και πλήρη προσωρινή μνήμη στους διακομιστές τους.
Χρήση Autoptimize + Δωρεάν Critical CSS Generator
Υπάρχουν διαδικτυακά εργαλεία τρίτων που παρέχουν σημαντικά css εισάγοντας τη διεύθυνση URL του ιστότοπού σας. Το pegasaas είναι ένα εξαιρετικό δωρεάν εργαλείο.
Δείτε πώς να το κάνετε:
Βήμα 1. Μεταβείτε στη διεύθυνση https://pegasaas.com/critical-path-css-generator/ και εισαγάγετε τη διεύθυνση URL σας. Αντιγράψτε το δημιουργημένο "Critical Path CSS".
Βήμα 2 Στις ρυθμίσεις αυτόματης βελτιστοποίησης (ενεργοποίηση σύνθετων ρυθμίσεων), στην περιοχή "Επιλογές CSS", επιλέξτε "Ενσωμάτωση και αναβολή CSS" και επικολλήστε το αντιγραμμένο CSS.
Πλεονεκτήματα:
- Ειναι δωρεάν
Μειονεκτήματα:
- Δεν υπάρχει ξεχωριστό κρίσιμο CSS για διαφορετικούς τύπους σελίδων (π.χ.: αρχική σελίδα, σελίδα αναρτήσεων, σελίδα κατηγορίας, σελίδα προϊόντος κ.λπ.)
- Μην αναδημιουργείτε αυτόματα την αλλαγή θέματος/ρύθμισης
Γιατί το ίδιο το WordPress δεν μπορεί να δημιουργήσει κρίσιμο CSS;
Όπως ίσως έχετε παρατηρήσει, η δημιουργία μιας κρίσιμης διαδρομής css επιτρέπει τις εξωτερικές υπηρεσίες. Γιατί λοιπόν δεν μπορεί να το δημιουργήσει το ίδιο το WordPress;
Η δημιουργία Critical CSS καθίσταται δυνατή από έργα ανοιχτού κώδικα όπως το Critical (από την Google), το CriticalCSS ή το ρετιρέ. Όλα αυτά τα έργα βασίζονται στο NodeJS και όχι στην PHP. Επομένως, πρέπει να εγκαταστήσετε το NodeJS στον διακομιστή σας. Οι περισσότεροι κοινόχρηστοι/διαχειριζόμενοι πάροχοι φιλοξενίας δεν το επιτρέπουν για διάφορους λόγους.
