TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur genererar man kritisk CSS på WordPress -webbplats?

1

Det finns många dra och släpp webbplatsbyggare tillgängliga på internet för att skapa webbplats utan tekniska färdigheter. Du måste dock lära dig en teknisk aspekt av SEO för att hålla din webbplats högst upp på sökmotors resultatsidor. Kritisk CSS är ett sådant tekniskt ämne för att optimera din innehållsleverans i tur och ordning som direkt påverkar hastigheten. WordPress -ekosystem gör detta mer komplicerat för vanliga användare som använder flera plugins på sin webbplats. I den här artikeln, låt oss utforska hur du skapar kritisk CSS för WordPress -webbplats för att förbättra Googles PageSpeed ​​-poäng.

Förstå grunderna

Innan vi diskuterar om kritisk CSS är det nödvändigt att förstå vissa terminologier som optimering ovanför mitten och innehållsleverans. Dessutom måste du också förstå den grundläggande metoden för att använda externa formatmallar på WordPress.

Ovanför vikningsinnehållet

När du öppnar en webbplats på skrivbordet eller mobilen är den synliga delen du ser på skärmen ovanför innehållet. Detta är en traditionell tidningsterminologi där du kan se innehåll ovanför mitten högst upp på första sidan. Generellt brukade folk vika tidningen och ovanför vikområdet erbjuder det viktigt innehåll. På samma sätt borde den översta synliga delen av webbsidan som laddas först erbjuda användaren mest värdefulla innehåll. Därför bör du fokusera på att optimera den synliga övre delen för att ladda med brinnande hastighet.

Optimering av innehållsleverans

Många hastighetsverktyg som Google PageSpeed ​​Insights mäter hur webbplatsen levererar innehåll ovanför mitten. Du kan se detta som en mätning av First Contentful Paint (FCP). Om de upptäcker en blockering ser du en varning för att ta bort blockeringselementet. Ett av de populära förslagen som du kommer att se i Google PageSpeed ​​Insights-verktyget är att eliminera renderingsblockerande resurser. Om du klickar på det förslaget visar Google dig att optimera leveransen av kritisk CSS/JS och skjuta upp alla icke-kritiska CSS/JS.

Hur genererar man kritisk CSS på WordPress -webbplats?

Kritiskt CSS- och JS -förslag

Att fixa renderingsblockerande JavaScript (jQuery) är ganska enkelt eftersom teman/plugins som standard läser in skripten i sidfoten. jQuery är det enda problemet som kan krävas för att många webbplatser ska kunna ladda innehåll ovanför mitten. Eftersom WordPress också använder jQuery kan du ignorera detta fel om det bara beror på jQuery. Annars kan du använda plugins som WP Rocket för att kombinera och leverera alla skript om det inte bryter webbplatsens layout.

Problemet är dock att generera kritisk CSS och ladda den först. I den här artikeln kommer vi att förklara hur man hanterar CSS -optimering för att förbättra sidhastighetspoängen.

Relaterat: Korrekta WP Rocket -plugin -inställningar för att påskynda din webbplats.

Läser in CSS på webbplatser

Det finns flera sätt att infoga CSS på din webbsida. Du kan göra detta som inline, interna eller externa sätt. Det mest populära och rekommenderade sättet är att länka externa formatmallar i rubriken på en webbsida. Eftersom innehållet i rubriksektionen laddas först med webbsidan, påverkar det drastiskt innehållet ovanför vikningen och därmed sidhastigheten.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Läser in CSS i WordPress

WordPress använder style.css som en extern fil för att leverera temastilar. Detta är en obligatorisk fil (förutom functions.php) för att köra en WordPress -webbplats. Dessutom kan varje plugin på din webbplats lägga till ytterligare CSS -filer. Öppna din webbplats i Chrome -webbläsaren och visa källkoden (se till att du inte har några cacheminne -plugins installerade eller inaktiverade cachning för sidan).

Hur genererar man kritisk CSS på WordPress -webbplats?

Stilark i sidhuvud

Du kan se WordPress länkar alla externa formatmallar under sidhuvudet på sidan. Detta kan orsaka flera problem ur optimeringsperspektivet:

  • Vissa teman använder tunga CSS -stilar med få MB -storlek. Du behöver inte ladda alla dessa stilar när en användare öppnar en webbsida på skrivbordet eller mobilen.
  • Det finns olika inläggstyper som produkter som kan använda helt olika stilar. I det här fallet behöver du inte den andra CSS för inledande (ovanför vikningen) laddning.

Varje sida på din webbplats behöver ett minimum CSS för att ladda innehåll ovanför mängden. Denna lägsta CSS som behövs för sidladdning kallas kritisk CSS på teknisk sikt. I alla ovanstående fall visar Google PageSpeed ​​Insights och andra verktyg dig en varning för att optimera CSS -leverans.

Kom ihåg att borttagning av oanvända CSS och skript också är relaterat till att använda för mycket CSS / skript på sidan. Detta är dock ganska annorlunda än kritisk CSS -optimering. Du kanske inte ens använder några plugins på en specifik sida. Till exempel behöver du inte CSS för kontaktformuläret på alla sidor på webbplatsen. I det här fallet är CSS/JS -filer från kontaktformulärsfiler onödiga i ett vanligt blogginlägg och du kommer att se borttagning av oanvänd CSS/JS -varning. Kolla in vår artikel om hur du inaktiverar oanvänd CSS/JS i WordPress och optimerar WooCommerce -sidor för admin -AJAX -samtal.

Hur genererar man kritisk CSS i WordPress?

Nu när du vet hur viktigt den kritiska CSS för att förbättra sidhastigheten. Det finns två sätt att skapa kritisk CSS för din webbplats.

  • Skapa kritisk CSS manuellt och infoga på din webbplats
  • Använd WP Rocket -plugin för att optimera innehållsleverans

Vi kommer att förklara både processen i detaljer och du kan välja den bästa som fungerar för din webbplats.

Relaterat: Kommer WP Rocket att fungera med SiteGround -värd?

Manuell kritisk CSS -generation

Det finns många verktyg från tredje part tillgängliga på internet för att generera kritisk CSS manuellt. Detta är dock meningsfullt när alla sidor på dina webbplatser är likartade och inte har anpassat innehåll i området ovanför mitten. Du kan prova andra gratis kritiska CSS -genereringstjänster som Sitelocity.

  • Gå till Sitelocity -webbplatsen och ange sidans URL.
  • Klicka på knappen "Generera Critical Path CSS".
  • Du kan få minifierad kritisk CSS för din sida.

Hur genererar man kritisk CSS på WordPress -webbplats?

Skapa kritisk CSS

Nu när du har genererat kritisk CSS och nästa uppgift är att infoga den i sidhuvudet på din webbplats. I teorin kan du infoga stilarna i din header.php -fil mellan och taggar. Det finns plugins som hjälper till att infoga stilar i rubriksektionen utan att ändra mallfiler. Autoptimize är en av de plugins vi kan rekommendera för detta ändamål. Om du redan använder Autoptimize för cachelagring kan du också använda samma plugin för att infoga kritisk CSS.

Du kan infoga kritisk CSS under "CSS -alternativ" i Autoptimize -tillägget. Aktivera först kryssrutan "Inline and Defer CSS” och klistra in den kritiska CSS i textrutan som visas.

Hur genererar man kritisk CSS på WordPress -webbplats?

CSS -alternativ

Som du kan se kan Autoptimize-plugin automatiskt också infogas över CSS samtidigt som du skjuter upp andra stilar. Detta kommer dock snabbt att öka cachestorleken till 100% och du har inget alternativ i pluginet för att automatiskt rensa cachen. Dessutom kommer det att bryta webbplatsen i de flesta fall. Du kan välja Autoptimize CriticalCSS Power-Up-tillägg som hjälper dig på ett bättre sätt. För att kunna använda detta tillägg måste du få API: et från Criticalcss.com för $ 10 per månad.

Varför fungerar inte manuell kritisk CSS -generation?

Även om ovanstående manuella införingsprocess ser lätt ut, är det inte en lätt uppgift. Nedan följer några av anledningarna till att din kritiska CSS inte fungerar.

  • Du kan ha olika innehåll som sidor, blogginlägg, produkter etc. Varje innehållstyp på din webbplats behöver olika kritisk CSS för att ladda ovanför innehållet. Genom att använda plugin eller manuell infogning laddas den kritiska CSS på alla sidor och bryter lite innehåll.
  • Du måste generera kritisk CSS varje gång du uppdaterar tema, plugin och WordPress -kärna. Annars bryter din webbplats layout genom att använda gammal kritisk CSS. Detta är en omöjlig uppgift för vanliga användare att kontinuerligt uppdatera kritisk CSS för varje uppdatering på webbplatsen. Med alternativ för automatisk uppdatering måste du vara mycket försiktig innan du uppdaterar plugin/tema/kärna på din installation.
  • Du kan behöva separata kritiska CSS för mobila och stationära enheter.

Med alla dessa problem är det enda alternativet kvar att använda någon plugin som tar hand om dessa och genererar kritisk CSS dynamiskt och automatiskt.

Skapa kritisk CSS för WordPress med WP Rocket

Lyckligtvis har du ett caching -plugin som exakt gör denna kritiska CSS -generation i WordPress. WP Rocket är en av de mest populära caching -pluginsna för WordPress på grund av dess förenklade inställningar. Återigen, kritisk CSS -generation är en av de fina plugin -programmen som alla vanliga användare kan dra nytta av utan att bryta webbplatsen.

  • Först måste du köpa WP Rocket premium plugin.
  • Efter att du har installerat och aktiverat WP Rocket, gå till "Inställningar> WP Rocket" och navigera till avsnittet "Filoptimering".
  • Rulla ner och aktivera kryssrutan "Optimera CSS -leverans".

Hur genererar man kritisk CSS på WordPress -webbplats?

Aktivera kritisk CSS i WP Rocket

Detta gör att tillägget automatiskt kan generera kritisk CSS för varje inläggstyp på din WordPress -webbplats. Den innehåller förstasidan. Hemsida, sida, inlägg och annan anpassad inläggstyp som du använder på din webbplats. Om det behövs kan du lägga till kritisk CSS som du skapar manuellt med hjälp av tredjepartsverktyg. I allmänhet kan du lämna den här kritiska CSS -rutan som tom. Du kan också aktivera separat mobilcachning under avsnittet "Cache".

Observera att WP Rocket är ett premiumplugin med en enda webbplatslicens tillgänglig för $ 49. Enligt vår uppfattning är det värt att köpa detta plugin eftersom det erbjuder end-to-end caching-lösning för hastighetsoptimering. Plugin kommer med ett års support och uppdateringar. Efter det kommer det att fortsätta att fungera och du kan använda den kritiska CSS och andra funktioner utan förnyelse. Du kan förnya med 30% rabatt för att få support och få ytterligare funktioner. Detta är mycket bättre alternativ jämfört med $ 10 per månad för criticalcss API att använda med Autoptimize.

Återskapa kritisk CSS

När du uppdaterar tema/plugin/WordPress -kärna eller lägger till anpassade inläggstyper på din webbplats är det nödvändigt att återskapa kritisk CSS. Annars kommer WP Rocket att använda gammal kritisk CSS och bryta webbplatsens layout. Se därför till att återskapa kritisk CSS utan att glömma.

  • Klicka på "WP Rocket" -menyn i det övre fältet och välj alternativet "Regenerate Critical CSS".
  • Alternativt kan du gå till pluginens instrumentpanel och klicka på knappen "Regenerate Critical CSS".

Hur genererar man kritisk CSS på WordPress -webbplats?

Återskapa kritisk CSS

Anpassad kritisk CSS för specifik sida

Som nämnts kan du ha en hemsida eller en annan sida skapad med ett plugin för sidbyggare. Denna sida kommer att ha en helt annan kritisk CSS jämfört med alla andra blogginlägg på din webbplats. I det här fallet måste du skapa separat kritisk CSS och bara ladda villkorligt på den sidan. WP Rocket kan hjälpa dig att uppnå detta med några få klick.

  • Gå till sidan / postredigeraren för sidan du vill skapa separata kritiska CSS.
  • Leta reda på panelen "WP Rocket Options" på sidofältets dokumentpanel. Om du inte hittar det klickar du på knappen med tre punkter i det övre högra hörnet och väljer "Inställningar". På popup-fönstret kan du aktivera nödvändiga dokumentpaneler som är tillgängliga på din webbplats.
  • Markera kryssrutan "Optimera CSS -leverans" och klicka på knappen "Generera specifik CPCSS".
  • Detta kommer att generera specifik kritisk CSS för den sidan och plugin kommer att ladda denna kritiska CSS när användare besöker sidan.

Hur genererar man kritisk CSS på WordPress -webbplats?

Skapa kritisk CSS för specifik sida

Relaterat: Granskning av WP Rocket caching plugin.

Testar kritisk CSS

Efter att ha implementerat den manuella metoden eller använt WP Rocket -plugin kan du testa sidan genom att titta på sidkällan. Se till att logga ut från din administratörspanel eller aktivera cachning för inloggade användare i tillägget. Som du kan se på skärmdumpen nedan lägger WP Rocket till kritisk CSS i rubriken.

Hur genererar man kritisk CSS på WordPress -webbplats?

WP Rocket Critical CSS

Du kan också kontrollera sidorna i Google PageSpeed ​​Insights -verktyget. Om allt går bra ser du eliminera renderingsblockerande resurser och andra CSS-fel under godkända resultat. Detta indikerar att du har implementerat kritisk CSS korrekt på webbplatsen.

Slutliga ord

Vi hoppas att den här artikeln skulle ha belyst vikten av kritisk CSS på WordPress -webbplats. Du kan använda det manuella alternativet när du har en mindre webbplats som innehåller få sidor. För en igångblogg som har ett stort antal inlägg och olika inläggstyper kan du dock prova WP Rocket -plugin. Även om det kostar dig lite pengar kan du få en komplett cachningslösning för din webbplats.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer