Optimaliseer de kritieke CSS van uw WordPress-website met LWSOptimize

Procédure

Critical CSS maakt het mogelijk om de zichtbare inhoud van uw pagina’s sneller weer te geven. Wanneer een bezoeker een pagina opent, moet zijn browser eerst verschillende bestanden downloaden (afbeeldingen, scripts, CSS-stylesheets, enz.). [PERSON_NAME] zijn [PERSON_NAME], kan de weergave worden vertraagd. Met Critical CSS worden de stijlen die onmisbaar zijn voor de onmiddellijke weergave van de pagina met prioriteit geladen. De rest van de stijlen wordt daarna op de achtergrond geladen.

Waarom gebruiken?

Het inschakelen van Critical CSS kan de weergavesnelheid van uw site verbeteren, vooral op mobiel of met een trage internetverbinding.

De meest voorkomende voordelen zijn:

• Snellere weergave van de hoofdinhoud van de pagina.

• Betere gebruikerservaring.

• Mogelijke verbetering van prestatie-indicatoren zoals LCP (Largest Contentful Paint).

Afhankelijk van de configuratie van de site kan de behaalde winst oplopen tot meerdere honderden milliseconden.

Critical CSS inschakelen

WordPress biedt vooralsnog geen optimalisatie van de CSS van pagina’s en artikelen. [PERSON_NAME], bestaan er tientallen verschillende WordPress-plugins om aan deze behoefte te voldoen, waaronder de LWS Optimize-plugin, gemaakt door LWS.

Standaard is deze optie uitgeschakeld, omdat dit de cachegeneratietijd verhoogt, [PERSON_NAME] nog meer als de pagina een groot aantal CSS-bestanden laadt, en in zeldzame gevallen weergaveproblemen kan veroorzaken.
Om dit in te schakelen, gaat u naar het dashboard van LWS Optimize en kiest u daar de instellingen Maximum en slaat u op; [PERSON_NAME] pluginacties, waaronder Critical CSS.

[PERSON_NAME] alleen Critical CSS wilt inschakelen, kunt u ook naar de geavanceerde instellingen gaan, in de sectie Front-End, waar u de regel Critical CSS vindt.

Door de optie aan te vinken, wordt u gevraagd te kiezen tussen 3 werkingsmodi: Auto - lokaal, Auto en Handmatig. Zodra de keuze is gemaakt, slaat u uw wijzigingen op, [PERSON_NAME] van Critical CSS en wist het de huidige cache.

Elke modus werkt anders:

• Auto — lokale generatie

Dit is de standaardmodus van de plugin; de CSS van de pagina’s wordt geanalyseerd en vervolgens verwerkt door de PHP van uw site, waardoor Critical CSS rechtstreeks wordt gegenereerd. Het voordeel is dat alles volledig lokaal werkt en redelijk snel is, maar in ruil daarvoor gebruikt het meer serverbronnen dan de andere modus. Het blijft echter aanbevolen voor de meeste sites.

Als de prestaties van uw hosting [PERSON_NAME], [PERSON_NAME] vertragingen veroorzaken voor uw bezoekers tijdens het genereren van de CSS. [PERSON_NAME], kunnen de prestaties verslechteren gedurende de generatietijd.

• Auto — LWS-service

Deze modus gebruikt de Critical CSS-generatieservice van LWS. Iets langzamer dan lokaal genereren, vooral als de generatie-API overbelast is, is het belangrijkste voordeel dat de volledige generatie buiten de server gebeurt, wat veel betere prestaties biedt dan lokale generatie. Bij sterke belasting kan de generatie echter tijdelijk niet beschikbaar zijn, en is dus niet even betrouwbaar als lokaal.

In geval van tijdelijke onbeschikbaarheid van de service schakelt de plugin automatisch over op lokale generatie. Ook kan de generatie, omdat deze anders verloopt dan in de lokale modus, afhankelijk van de site betere resultaten opleveren.

Handmatig

Deze modus is bedoeld voor gevorderde gebruikers.
Hiermee kunt u uw eigen critical CSS handmatig invoeren [ADDRESS] hiervoor voorzien. De toegevoegde CSS wordt op de hele site gebruikt.

Wanneer wordt Critical CSS actief?

In automatische modus wordt critical CSS gegenereerd tegelijk met de rest van de cache en opties ([PERSON_NAME]) ; [PERSON_NAME], de volgende bezoeken zullen de gegenereerde cache gebruiken.

Punten om te weten

Sommige elementen kunnen hun opmaak verliezen

Na activering kunnen bepaalde componenten die hun stijlen dynamisch laden (carrousels, modale vensters, pop-ups, enz.) mogelijk niet correct worden weergegeven.

[PERSON_NAME] het volgende op:

1. [PERSON_NAME] de modus Auto — LWS-service.

2. Als het probleem aanhoudt, gebruik dan de modus Handmatig om de ontbrekende stijlen toe te voegen.

Externe stijlen

De automatische generatie houdt alleen rekening met stylesheets die op uw domein worden gehost.

Stijlen die van externe diensten worden geladen (CDN, Google Fonts, enz.) zijn niet opgenomen in het automatisch gegenereerde critical CSS.

Conclusie

De Critical CSS is een uitstekende manier om de weergave van uw pagina’s te versnellen en de ervaring van uw bezoekers te verbeteren 🚀. Door de essentiële stijlen prioriteit te geven, verkort u de laadtijd van de zichtbare inhoud en optimaliseert u mogelijk uw prestatie-indicatoren, [PERSON_NAME] LCP 📈.

U weet nu hoe u: het nut van Critical CSS begrijpt, het inschakelt in WordPress met LWS Optimize, kiest tussen de modi Auto — lokale generatie, Auto — LWS-service en Handmatig, bepaalt wanneer het actief wordt en anticipeert op de waakzaamheidspunten die verband houden met dynamische componenten en externe stijlen 😉.

Door deze best practices toe te passen, kunt u profiteren van een site die sneller, vloeiender en aangenamer is om te gebruiken voor uw bezoekers ✨.

Bedankt voor het lezen 🙏 Aarzel niet om een reactie achter te laten over de service en uw ervaring te delen! 🙂