Hur förladdar jag CSS-filer på min WordPress-sida med LWS Optimize?

Procédure

Vad är CSS-förladdning?

När du laddar en webbsida laddas CSS-filerna som är länkade till den sidan progressivt, i den ordning som de kallas upp i koden. Att förladda en fil innebär att köra den först, så att den är redo för den första laddningen av sidan, i stället för att behöva vänta en kort stund på att filen ska laddas naturligt.

Förinläsning används oftast för texttypsnitt, eftersom de ofta laddas efter att sidan redan har visats, vilket leder till att texten inte visas, eller inte visas i rätt typsnitt, under några ögonblick när sidan laddas. Genom att förladda dessa teckensnitt kan de laddas samtidigt som sidan: teckensnittet visas direkt, vilket gör att laddningen verkar snabbare.

För att förladdningen ska vara effektiv bör inte alla CSS-filer förladdas, annars kommer webbplatsens prestanda att försämras snarare än att förbättras.

Det kan vara svårt att veta vilka delar av din webbplats som bör förladdas för att få bästa prestanda; detta beror till stor del på din webbplats, de plugins som är installerade och sidans struktur, men som en allmän regel kommer det att vara de resurser som är väsentliga för den första laddningen av sidan, dvs. de filer som laddar element som användaren kommer att se omedelbart när sidan laddas: teckensnitt, större CSS-element (färger, bakgrund etc.), bilder etc.

Förbättra den första visningen av dina sidor med CSS-förladdningsfunktionen som erbjuds av LWS Optimize, som prioriterar laddningen av filer som är viktiga för omedelbar visning, till exempel kritiska stilar och teckensnitt. Tack vare ett intuitivt gränssnitt kan du aktivera alternativet "Förladda CSS-filer" på fliken Front-End (avancerat läge), lägga till de exakta webbadresserna som ska förladdas och spara dina inställningar med bara några klick. För fullständig optimering som är lätt att installera, använd den bästa WordPress cache plugin. Samma plugin listas i tillägget som det bästa gratis WordPress-cachepluginet.

Hur förladdar jag min webbplats CSS-filer?

Du kan förladda -taggarna, som främst används för att ladda teckensnitt eller stilmallar, men som också kan användas för att ladda bilder. För att göra detta måste du ersätta "rel"-attributet och lägga till "as"-attributet i taggen. Detta måste verka obegripligt för dig om du vet lite eller ingenting om utveckling. Låt oss titta på det mer detaljerat med ett exempel:

För att förladda denna stilmall kan du ändra taggen enligt följande:

Som du kan se är allt du behöver göra att ändra 'stylesheet' till 'preload', men det är viktigt att inte glömma att lägga till attributet 'as', annars kommer din fil att laddas två gånger, vilket skulle ha en skadlig effekt på din prestanda, vilket strider mot själva syftet med förladdning.

När det gäller en bild som laddats från är hanteringen densamma, förutom att "style" blir "image":

Slutligen, för teckensnitt, är proceduren likartad med undantag för en detalj: attributet "crossorigin" måste läggas till i :

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

Poängen med "crossorigin" är att berätta för webbläsaren att det här teckensnittet måste hämtas anonymt. Faktum är att alla teckensnitt måste hämtas på detta sätt; glöm attributet och webbläsaren kommer inte att bearbeta det här teckensnittet eller ta hänsyn till förladdningen.

Oavsett vilken webbplats du har, har du allt att vinna på att förladda dina CSS-filer. Det kan dock vara komplicerat att ställa in för nybörjare, och därför rekommenderar vi att du använder ett tillägg på WordPress som förladdar filerna åt dig, till exempel vårt LWS Optimize-tillägg, som utvecklats av LWS.

Förladdning av dina CSS-filer med LWS Optimize

Förutom standardoptimeringar som minifiering och kombination kan du med LWS Optimize minifiera de CSS- och fontfiler du vill ha med bara några klick. För att göra detta går du till tilläggsinställningarna, avancerat läge och sedan fliken Front-End:

Här aktiverar du alternativet "Preload CSS files". Klicka sedan på knappen "Lägg till filer" mittemot alternativet, vilket öppnar en modal:

I fältet i den nyöppnade modalen anger du den fullständiga webbadressen till den fil du vill inkludera. Du kan klicka på den gröna "+"-knappen för att lägga till fler webbadresser eller på den röda "-"-knappen för att ta bort dem. Du kan inkludera så många webbadresser du vill, men du måste absolut ange den exakta webbadressen till filen, annars kommer förladdning inte att ske. När du är klar klickar du på knappen "Save" för att spara dina ändringar.

Upprepa föregående åtgärder med alternativet "Preload Fonts" för att inkludera de teckensnitt som du vill ska förinstalleras. Kontrollera återigen att du anger rätt och fullständig URL, annars kommer teckensnittet inte att förinstalleras.

Glöm inte att klicka på den gröna knappen längst ner till höger, "Save new configuration" för att validera ändringarna.

Slutsats

Du vet nu hur du gör för att :

• Identifiera de viktigaste resurserna som ska förladdas för att optimera visningen av din sida från första laddningen 🌐.
• Använda taggen taggen för att effektivt förladda CSS-filer, bilder och teckensnitt, och se till att inte överbelasta webbläsaren 🖥️.
• Dra nytta av tillägget LWS Optimize för att underlätta förladdning på WordPress-webbplatser utan att kräva avancerade tekniska färdigheter 🔧.

Vi hoppas att den här artikeln har upplyst dig om fördelarna med och implementeringen av resursförladdning på din webbplats. Stort tack för din noggranna läsning! Om du har några frågor eller vill dela med dig av din erfarenhet av CSS-förladdning, tveka inte att lämna en kommentar. Din feedback är alltid uppskattad och gör att vi kan fortsätta förbättra våra tjänster för dig 🌟.