WordPress CSS begrijpen
Laten we, voordat we erin duiken, begrijpen hoe reguliere CSS werkt in WordPress.
Elk WordPress-thema bestaat uit style.css die alle code bevat die nodig is om uw site te stylen. Thema-ontwikkelaars moeten alle WordPress-functies ondersteunen, waaronder blogposts, opmerkingen, productpagina's, lidmaatschapspagina's, formulieren, enz. Andere plug-ins die u installeert, kunnen ook vergelijkbare CSS-stylesheets toevoegen.
Hierdoor kunnen css-bestanden opgeblazen en groot worden van 200 kb of zelfs meer.
Wat is Critical Path CSS?
Naarmate uw CSS-bestanden groeien, moet uw browser die grote bestanden downloaden, parseren en renderen. Ook wel renderblokkering genoemd. Het verhoogt ook de eerste betekenisvolle weergave en de eerste betekenisvolle weergave.
Critical Path CSS is de CSS die nodig is om de bovenstaande inhoud op elke webpagina weer te geven. Zoals de naam al doet vermoeden, "kritieke" CSS, waarmee de browser het snel kan tekenen en weergeven voordat volledige CSS-bestanden worden geladen.
Gewoonlijk is de css van het kritieke pad ingebed in de koptekst en wordt het bron-css-bestand asynchroon of in de voettekst geladen voor gebruiksgemak.
Waarom is Critical Path CSS zo belangrijk?
Je hebt vast al een waarschuwing gezien van tools zoals Google PageSpeed Insights of GTmetrix met de tekst "css-bezorging optimaliseren" of "ongebruikte css uitstellen".
Kritische CSS heeft niets te maken met de laadtijd van de pagina. Het verhoogt/verlaagt de laadtijd niet. Maar geeft een veel betere gebruikerservaring. Het helpt om een webpagina snel te "weergave" of "in te kleuren".
- Verbetert First Content Draw (FCP)
- Verbetert de eerste significante betaling (FMP)
- Verwijder ongebruikte CSS (technisch gezien niet verwijderen, maar prioriteit geven aan "nuttige" CSS)
Hier zijn twee screenshots van mijn blog met en zonder kritische CSS.
Zoals je kunt zien in de sectie "geen kritisch css-pad", duurde het bijna 5 seconden om de gebruiker iets nuttigs te laten zien op een mobiel apparaat. De browser moet een extra HTTP-verzoek doen aan het css-bestand, het downloaden en parseren om het renderen te starten. Maar wanneer kritieke css wordt gebruikt, moet alle benodigde css inline zijn en kan de browser onmiddellijk beginnen met renderen na het laden van het HTML-bestand in een seconde of minder.
Hoe maak je kritische CSS in WordPress?
Er zijn verschillende manieren om kritische CSS te genereren in WordPress.
Caching-plug-ins gebruiken
WP Rocket is een premium caching-plug-in die heel goed werkt.
Een van de redenen waarom ik WP Rocket op elke site gebruik, is de kritische CSS-generatie zelf. Ze genereren afzonderlijk kritische CSS voor de startpagina, berichtenpagina, categoriepagina, productpagina, enz. en sluiten deze in. Ze zullen kritieke CSS herstellen als er wijzigingen zijn in het thema of de instelling.
Alles kan met een druk op de knop.
Andere caching-plug-ins die kritieke CSS kunnen genereren
Swift Performance en LiteSpeed (vereist LiteSpeed/OpenLiteSpeed-server) zijn vergelijkbare plug-ins die Critical CSS kunnen genereren. Beide plug-ins hebben cloud en volledige cache ingebouwd in hun servers.
Autoptimize + gratis kritische CSS-generator gebruiken
Er zijn online tools van derden die belangrijke CSS bieden door de URL van uw site in te voeren. pegasaas is zo'n geweldige gratis tool.
Hier is hoe het te doen:
Stap 1. Ga naar https://pegasaas.com/critical-path-css-generator/ en voer uw URL in. Kopieer de gegenereerde "Critical Path CSS".
Stap 2 In de instellingen voor automatisch optimaliseren (geavanceerde instellingen inschakelen), onder "CSS-opties", vink "Inline en CSS uitstellen" aan en plak de gekopieerde CSS.
Voordelen:
- Is gratis
minpuntjes:
- Geen aparte kritische CSS voor verschillende paginatypes (bijvoorbeeld: startpagina, berichtenpagina, categoriepagina, productpagina, etc.)
- Niet automatisch opnieuw opbouwen bij verandering van thema/instelling
Waarom kan WordPress zelf geen kritische CSS genereren?
Zoals je misschien hebt gemerkt, maakt het creëren van een css-kritiek pad externe services mogelijk. Dus waarom kan WordPress het niet zelf genereren?
Het maken van Critical CSS wordt mogelijk gemaakt door open source projecten zoals Critical (door Google), CriticalCSS of penthouse. Al deze projecten zijn gebaseerd op NodeJS, niet op PHP. U moet dus NodeJS op uw server installeren. De meeste shared/managed hostingproviders staan dit om verschillende redenen niet toe.
