Hur man optimerar CSS-leverans i WordPress med lite krångel

CSS kan förbättra det övergripande utseendet på din webbplats och den är enkel att använda, redigera och underhålla. Den enda nackdelen är möjligheten att sakta ner hastigheten för att ladda din sida. Därför kommer denna artikel skapad av vårt team på WpDataTables att visa dig hur du optimerar CSS-leverans i WordPress.

Om CSS inte levereras bra måste webbläsaren bearbeta och ladda ner data innan den är klar med att rendera din sida. Detta innebär att besökare kommer att uppleva en fördröjning när de ser din sida och kan klicka bort den, eftersom den inte verkar laddas. Därav vikten av att optimera CSS-leverans, så läs vidare för att lära dig hur du undviker de fallgropar som kan sakta ner din webbsida.

Allt om CSS-leverans

I grund och botten får CSS, ett Cascading Style Sheet, webbplatser att se attraktiva ut, och utan dem skulle webbplatser fortfarande ha fastnat på 90-talet.

Webbsidor, inklusive WordPress-webbsidor, är utformade av CSS. Varje WordPress-tema använder en style.cc-fil för att skapa ett elegant utseende. Om du lägger till plugins kommer fler stilmallar att läggas till, om till exempel laddar ner ett widgetplugin kommer det att lägga till en extra CSS-fil (stilmall) för att skapa det önskade utseendet.

CSS-skript laddas innan din webbplats är synlig, vilket innebär att din webbläsare inte visar något innehåll förrän den givna CSS-informationen har bearbetats. .Detta resulterar i renderingsblockering som uppstår när en webbläsare laddar alla CSS-skript innan en webbplats visas.

CSS kan användas på flera sätt för leverans i WordPress, med många olika inställningar.

Oavsett hur du har konfigurerat din webbsida kan CSS faktiskt hjälpa till att göra din webbplats snabbare.

Renderblockerande JavaScript och CSS – vad är det?

Snabbladdade sajter förväntas i vårt högteknologiska samhälle och det är avgörande för högt rankad SEO. Googles PageSpeed ​​Insights kan hjälpa dig att förstå laddningshastigheten på din webbplats. Ibland dyker en varning upp när du använder verktyget – "Eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten", men här är en lösning på detta problem.

Det är nödvändigt att rendera HTML-koden innan en webbläsare kan visa någon webbsida. Medan den gör detta kommer den att stöta på skript och stilmallar och måste sluta för att begära och ladda ner den filen. Sedan kör den det och fortsätter att gå igenom HTML. De flesta teman och plugins för WordPress använder många JavaScript- och/eller CSS-filer, vilket kan göra att det tar lång tid att rendera ens en sida på din webbplats.

Detta hindrar dina webbplatsbesökare från att snabbt se webbsidornas information och för att göra saken värre behöver dessa skript inte laddas omedelbart.

Dessa onödiga filer är kända som render-blockerande CSS och JavaScript. Fortsätt läsa för att ta reda på vad de är och hur du tar bort dem från din WordPress-webbplats.

Använd Google Pagespeed Insights för att upptäcka renderingsblockerande CSS och JavaScript

Långsamt laddade webbläsare försöker vanligtvis att bearbeta en betydande mängd CSS-kod och kan därför inte rendera sidan, men inte varje CSS-resurs är renderingsblockerande.

Webbplatser visas som tomma eller endast delvis synliga om CSS har laddats felaktigt eller om inte CSS är optimerad, vilket kan resultera i fel typsnitt eller layouter.

Det är viktigt att förstå vilka element som är nödvändiga och vilka som inte är det för att optimera leveransen av CSS.

För att starta renderingsblockeringsprocessen testar du först hastigheten på din webbplats med Google PageSpeed ​​Insights.

Här är hur:

• Gå till sidan Google PageSpeed ​​Insights
• Kopiera och klistra in webbadressen till vår webbplats i det relevanta fältet
• Tryck på "Analysera"
• Detta kommer att resultera i en rapport. Notera skripten som kommer upp som "Eliminera renderingsblockerande JavaScript och CSS"

Vanligtvis är dessa CSS avgörande för din webbplats:

• Sidstilar ovanför mitten
• teman
• Färg på bakgrunden
• Andra, beroende på typ av webbplats

Dessa CSS är vanligtvis mindre viktiga:

• CSS nedanför mitten
• CSS riktad mot andra enheter

Minska skript som blockerar rendering

Det är möjligt att minimera hur många renderingsblockerande skript du har på din webbplats genom att:

• Minska mängden CSS och JavaScript. Du kan ta bort alla onödiga blanksteg och kommentarer
• Kombinera din CSS och JavaScript. Ta olika .css- och .js-filer och lägg till dem tillsammans, vilket kommer att resultera i färre filer.
• Uppskjuter JavaScript-laddning. Du kan få dem att laddas sist efter att allt annat har laddats, genom att använda asynkron laddning.

WordPress använder ett kombinerat filter för att registrera front-end-skript, så att du kan se de inkommande CSS- eller JavaScript-filerna. Du kanske inte vet vad du ska leta efter, så det är användbart att använda ett plugin.

l CSS behövs inte på alla sidor hela tiden. Men det finns där av en anledning och du kommer att använda allt i något skede, vilket är där en kritisk renderingsväg krävs.

Olika delar av CSS kan krävas från sidan Kontakta oss och sidan Tjänster vi erbjuder. När någon läser in Tjänster som vi erbjuder-sidan krävs inte de CSS-delarna som endast är till för sidan Kontakta oss vid den tidpunkten, men den CSS är fortfarande laddad, eftersom webbmastern behöver alla CSS-filer laddade för att rendera webbsidan.

Därför behöver webbplatsen all CSS, men inte all CSS för varje enskild sida. Därför är kritisk CSS olika på varje sida och för varje användare av din webbplats.

CSS och JavaScript som blockerar renderingen ovanför mitten är ett allvarligt problem och måste åtgärdas så snart som möjligt.

Det är orealistiskt att förvänta sig att din webbplats ska få 100/100, så sikta på ett bra resultat som ger dina besökare en sida som laddas snabbt.

Ta inte bort de skript som behövs för bra UX; dessa är viktigare än att försöka uppnå en högre poäng.

Optimering av den kritiska renderingsvägen i WordPress

Den kritiska renderingsvägen anger i vilken ordning webbläsaren utför uppgifter för att rendera din sida, dvs. den sekvens i vilken den laddar ner och bearbetar CSS, HTML och JavaScript och visar dem i webbläsaren.

Innehållet ovanför mitten är viktigt eftersom detta är den första delen som användaren kommer att se. Det finns mer tid att ladda innehållet nedanför mitten, eftersom användaren måste rulla för att se det.

För att ladda ovan viksektionen så snabbt som möjligt måste du:

• Skapa HTML så att den prioriterar inläsning av delar ovanför mitten
• Minimera data som används av CSS, JS och HTML

Fler förklaringar finns i Googles PageSpeed-guide. Ibland är informationen du behöver för att ladda ATF:n mer än överbelastningsfönstret (uppgår till 14,6 kb). I det här fallet behöver fler nätverksresor ske från servern till webbläsaren och tillbaka igen. Mobilnätverk som har hög latens kommer att upptäcka att detta hindrar sidan från att laddas.

DOM byggs en del i taget av webbläsaren, vilket kan minska den tid som behövs för att rendera ATF. Strukturera HTML så att innehållet ovanför mitten laddas först och resten av sidan efteråt.

Optimeringsprocessen kräver kontinuerlig förbättring, övervakning och mätning.

Även om CSS kan användas på flera sätt för att skapa snygga webbsidor, är det viktigaste att det laddas snabbt. Rengör koden och följ stegen ovan för att få dina sidor att laddas snabbare.

Om du tyckte om att läsa den här artikeln om hur du optimerar CSS-leverans i WordPress, bör du kolla in den här om hur du lägger till metataggar i WordPress utan ett plugin.

Vi skrev också om några relaterade ämnen som hur man bäddar in en pdf i WordPress, hur man bäddar in excel i html, hur man döljer en utvald bild i ett WordPress-inlägg, hur man vet om en webbplats är WordPress, hur man avinstallerar WordPress från cPanel och hur man skapar en webbplats som Amazon.