Πώς να ρυθμίσετε το Critical CSS για να εξαφανίσετε την καθυστέρηση εμφάνισης

Έχετε παρατηρήσει ποτέ ένα site που, ενώ φορτώνει, για μερικά δευτερόλεπτα δείχνει μόνο κείμενο χωρίς design και μετά «πετάγεται» η μορφοποίηση; Ή ακόμα χειρότερα, ένα site που μένει λευκό μέχρι να φορτώσει τα πάντα; Αυτό συμβαίνει λόγω των Render-Blocking Resources. Ο browser σταματά να «σχεδιάζει» τη σελίδα μέχρι να κατεβάσει όλα τα αρχεία CSS. Το Critical CSS είναι η τεχνική που λύνει αυτό το πρόβλημα, απομονώνοντας μόνο τον κώδικα που χρειάζεται για να εμφανιστεί το πρώτο μέρος της σελίδας (Above the Fold).

Τι είναι το Critical CSS;

Το Critical CSS είναι ένα μικρό κομμάτι κώδικα που τοποθετείται απευθείας στο "Head" της ιστοσελίδας σας (inline). Περιέχει τις οδηγίες μορφοποίησης μόνο για ό,τι βλέπει ο χρήστης πριν ξεκινήσει να σκρολάρει. Το υπόλοιπο, «βαρύ» CSS φορτώνεται στο παρασκήνιο (asynchronously), επιτρέποντας στον browser να δείξει το site ακαριαία.

Πώς να το εφαρμόσετε στο WordPress

1. Αυτόματη Παραγωγή: Η πιο εύκολη λύση είναι το WP Rocket. Διαθέτει μια επιλογή που ονομάζεται "Optimize CSS Delivery" η οποία δημιουργεί αυτόματα το Critical CSS για κάθε σελίδα του site σας.
2. Χρήση του Jetpack Boost: Μια δωρεάν και πολύ δυνατή εναλλακτική είναι το plugin Jetpack Boost. Με ένα κλικ, αναλύει το site και δημιουργεί το απαραίτητο inline CSS, βελτιώνοντας άμεσα το σκορ στο Google PageSpeed Insights.
3. Χειροκίνητα Εργαλεία: Αν είστε πιο προχωρημένος, υπάρχουν online γεννήτριες (όπως το https://www.google.com/search?q=CriticalPathCSS.com). Βάζετε το URL σας, σας δίνουν τον κώδικα και εσείς τον επικολλάτε στο Divi > Theme Options > Integration > Head.
4. Προσοχή στο Divi: Το Divi έχει μια ενσωματωμένη λειτουργία που ονομάζεται "Critical CSS" (Theme Options > Performance). Βεβαιωθείτε ότι είναι ενεργοποιημένη, καθώς κάνει εξαιρετική δουλειά στον διαχωρισμό του κώδικα των modules.

Εφαρμόζοντας το Critical CSS, εξαλείφετε την αίσθηση ότι το site «κολλάει» κατά την εκκίνηση. Είναι η διαφορά ανάμεσα σε έναν επισκέπτη που περιμένει και σε έναν επισκέπτη που αρχίζει να διαβάζει το περιεχόμενό σας σε λιγότερο από ένα δευτερόλεπτο.