Hoe laad ik CSS bestanden vooraf op mijn WordPress site met LWS Optimize?

Procédure

Wat is CSS preloading?

Wanneer je een webpagina laadt, worden de CSS-bestanden die aan die pagina zijn gekoppeld tijdens het laden geladen, in de volgorde waarin ze in de code worden aangeroepen. Een bestand vooraf laden betekent dat het eerst wordt uitgevoerd, zodat het klaar is voor het eerste laden van de pagina, in plaats van dat er een korte tijd moet worden gewacht tot het bestand vanzelf wordt geladen.

Voorladen wordt het vaakst gebruikt voor tekstlettertypen, omdat deze vaak worden geladen nadat de pagina al is weergegeven, met als gevolg dat de tekst even niet verschijnt, of niet in het juiste lettertype, wanneer de pagina wordt geladen. Door deze lettertypes vooraf te laden, kunnen ze tegelijk met de pagina worden geladen: het lettertype wordt direct weergegeven, waardoor het laden sneller lijkt te gaan.

Om voorladen effectief te laten zijn, moeten niet alle CSS-bestanden voorgeladen worden, anders zullen de prestaties van je site er eerder onder lijden dan verbeteren.

Het kan moeilijk zijn om te weten welke elementen van uw site moeten worden voorgeladen om de beste prestaties te verkrijgen; dit zal grotendeels afhangen van uw site, de geïnstalleerde plugins en de structuur van de pagina, maar als algemene regel zullen het de bronnen zijn die essentieel zijn voor het aanvankelijk laden van de pagina, d.w.z. de bestanden die elementen laden die de gebruiker onmiddellijk ziet wanneer de pagina wordt geladen: lettertypen, belangrijke CSS-elementen (kleuren, achtergrond, enz.), afbeeldingen, enz.

Verbeter de eerste weergave van je pagina's met de CSS-voorlaadfunctie van LWS Optimize, die prioriteit geeft aan het laden van bestanden die essentieel zijn voor onmiddellijke weergave, zoals kritieke stijlen en lettertypen. Dankzij een intuïtieve interface kun je de optie "CSS-bestanden vooraf laden" activeren op het tabblad Front-End (geavanceerde modus), de exacte URL's toevoegen die vooraf geladen moeten worden en je instellingen opslaan met slechts een paar klikken. Voor volledige optimalisatie die gemakkelijk te installeren is, gebruik je de beste WordPress cache plugin. Deze zelfde plugin staat vermeld in de extensies als de beste gratis WordPress cache plugin.

Hoe laad ik de CSS bestanden van mijn site vooraf op?

Je kunt de tags vooraf laden, die voornamelijk worden gebruikt om lettertypen of stylesheets te laden, maar ook kunnen worden gebruikt om afbeeldingen te laden. Om dit te doen, moet u het "rel"-attribuut vervangen en het "as"-attribuut toevoegen aan de tag. Dit moet voor jou onbegrijpelijk lijken als je weinig of niets weet over ontwikkeling. Laten we het nader bekijken aan de hand van een voorbeeld:

Om dit stijlblad vooraf te laden, kun je de tag als volgt wijzigen:

Zoals je kunt zien, hoef je alleen maar 'stylesheet' te veranderen in 'preload', maar het is belangrijk om niet te vergeten het 'as'-attribuut toe te voegen, anders wordt je bestand twee keer geladen, wat een nadelig effect zou hebben op je prestaties, wat in strijd is met het doel van preloading.

In het geval van een afbeelding die is geladen van , is de behandeling hetzelfde, behalve dat de 'style' 'image' wordt:

Voor lettertypen ten slotte is de procedure vergelijkbaar, op één detail na: het "crossorigin"-attribuut moet worden toegevoegd aan de :

<link rel='preload' as='font' href='https://example.fr/mafont.woff2' corssorigin='anonymous' />

Het punt van "crossorigin" is om de browser te vertellen dat dit lettertype anoniem moet worden opgehaald. In feite moeten alle lettertypen op deze manier worden opgehaald; vergeet het attribuut en de browser zal dit lettertype niet verwerken of rekening houden met de voorbelasting.

Wat voor site je ook hebt, je hebt alles te winnen bij het voorladen van je CSS-bestanden. Het kan echter ingewikkeld zijn om in te stellen voor beginners, daarom raden we je aan om een extensie op WordPress te gebruiken die de bestanden voor je voorlaadt, zoals onze LWS Optimize extensie, ontwikkeld door LWS.

Vooraf laden van je CSS bestanden met LWS Optimize

Naast de meer standaard optimalisaties zoals minificatie en combinatie, kun je met LWS Optimize de CSS- en lettertypebestanden van je keuze minificeren in slechts een paar klikken. Ga hiervoor naar de extensie-instellingen, Geavanceerde modus en vervolgens naar het tabblad Front-End:

Activeer hier de optie "CSS-bestanden vooraf laden". Klik vervolgens op de knop "Bestanden toevoegen" tegenover de optie, die een modal zal openen:

Voer in het veld van het nieuw geopende modal de volledige URL in van het bestand dat je wilt toevoegen. Je kunt op de groene "+" knop klikken om meer URL's toe te voegen of op de rode "-" knop om ze te verwijderen. Je kunt zoveel URL's toevoegen als je wilt, maar je moet absoluut de exacte URL naar het bestand invoeren, anders zal het voorladen niet plaatsvinden. Als je klaar bent, klik je op de knop "Opslaan" om je wijzigingen op te slaan.

Herhaal de vorige acties met de optie 'Lettertypen vooraf laden' om de lettertypen op te nemen die je vooraf wilt laden. Zorg er ook hier weer voor dat je de juiste en volledige URL invoert, anders wordt het lettertype niet voorgeladen.

Vergeet niet te klikken op de groene knop rechtsonder "Nieuwe configuratie opslaan" om de wijzigingen te valideren.

Conclusie

Je weet nu hoe je :

• De essentiële bronnen kunt identificeren die vooraf geladen moeten worden om de weergave van uw pagina vanaf de eerste lading te optimaliseren 🌐.
• De tag kunt gebruiken om CSS-bestanden, afbeeldingen en lettertypen efficiënt voor te laden, waarbij u ervoor zorgt dat de browser 🖥️ niet overbelast raakt.
• Maak gebruik van de LWS Optimize extensie om het voorladen op WordPress sites te vergemakkelijken zonder dat je hiervoor geavanceerde technische vaardigheden nodig hebt 🔧.

We hopen dat dit artikel je heeft geïnformeerd over de voordelen en implementatie van resource preloading op je site. Hartelijk dank voor het aandachtig lezen! Als je vragen hebt of je ervaring met CSS preloading wilt delen, aarzel dan niet om een reactie achter te laten. Uw feedback wordt altijd gewaardeerd en stelt ons in staat om onze diensten voor u te blijven verbeteren 🌟.