Vill du eliminera blockering av JavaScript och CSS-rendering i WordPress?
Om du testar din webbplats med insikter från Google PageSpeed ser du antagligen ett förslag att eliminera skript- och CSS-återgivningsblock. Det ger emellertid inte information om hur du gör detta på din WordPress-webbplats.
I den här artikeln ska vi visa dig hur du enkelt fixar blockering av JavaScript och CSS i WordPress för att förbättra din Google PageSpeed-poäng.
Men innan, låt oss upptäcka tillsammans Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg.
Vad är JavaScript och CSS återgivande-blockering?
Blockering av JavaScript- och CSS-renderingar är filer som hindrar en webbplats från att visa en webbsida innan du laddar dem.
Varje WordPress-webbplats har ett tema och plugins som lägger till JavaScript- och CSS-filer på din webbplats. Dessa skript kan öka sidans belastningstid på din webbplats, och de kan också blockera sidåtergivningen.
En användares webbläsare måste ladda dessa skript och CSS innan du laddar resten av HTML-koden på sidan. Detta innebär att användare på en långsammare anslutning måste vänta några millisekunder till för att se sidan.
Dessa skript och stilark kallas JavaScript- och CSS-renderingsblockerare.
Webbplatsägare som försöker uppnå en Google PageSpeed-poäng på 100 kommer att behöva fixa detta för att uppnå den perfekta poängen.
Vad är Google PageSpeed Score?
Google PageSpeed Insights är ett hastighetstestverktyg skapat av Google för att hjälpa webbplatsägare att optimera och testa sina webbplatser. Det här verktyget testar din webbplats mot Googles hastighetsriktlinjer och erbjuder förslag för att förbättra belastningstiderna på din webbplats.
Det visar dig en poäng baserat på antalet regler som din webbplats passar. De flesta webbplatser är mellan 50 och 70. Vissa webbplatsägare känner sig dock pressade att nå 100.
Behöver du verkligen poängen "100" på Google PageSpeed?
Syftet med Google PageSpeed-insikter är att ge dig riktlinjer för att förbättra hastigheten och prestandan på din webbplats. Du är inte skyldig att strikt följa dessa regler.
Kom ihåg att hastighet bara är en av de många SEO-mätvärden som hjälper Google att avgöra hur du rankar din webbplats. Anledningen till att hastigheten är så viktig är att den förbättras användarupplevelsen på din webbplats.
En bättre användarupplevelse kräver mycket mer än snabbhet. Du bör också erbjuda användbar information, bättre användargränssnitt och engagera innehåll med text, bilder och videor.
Ditt mål bör vara att skapa en snabb webbplats som erbjuder en stor användarupplevelse.
Under den senaste omarbetningen av BlogPasCher höll vi fokus på hastighet och förbättrade användarupplevelsen.
Vi rekommenderar att du använder Google Pagespeed-regler som ett förslag, och om du enkelt kan implementera dem utan att förstöra användarupplevelsen, är det bra. Om inte, bör du sträva efter att göra så mycket du kan och sedan inte oroa dig för resten.
Med det sagt, låt oss ta en titt på vad du kan göra för att fixa JavaScript och CSS-rendering blockering i WordPress.
Vi kommer att täcka två metoder som löser problemet. Du kan välja den som fungerar bäst på din webbplats.
1. Fixa renderingsblockerande skript och CSS med WP Rocket
För den här metoden kommer vi att använda WP Rocket-plugin. Detta är det bästa WordPress-cache-plugin på marknaden och låter dig snabbt förbättra prestandan på din webbplats utan tekniska eller komplexa färdigheter.
Först måste du installera och aktivera WP Rocket-plugin. För mer information, se vår steg för steg-guide för hur du installerar ett WordPress-plugin..
WP Rocket aktiverar sin cache med optimala inställningar. Som standard aktiveras inte JavaScript- och CSS-optimeringsalternativ. Dessa optimeringar kan potentiellt påverkautseendet på din webbplats eller vissa funktioner, det är därför plugin-programmet låter dig aktivera dessa inställningar som ett alternativ.
För att göra detta måste du fortsätta Inställningar »WP Rocket, byt sedan till 'Filoptimering '. Därifrån bläddrar du ner till avsnittet CSS-filer och kryssa i rutorna Minifiera CSS, Kombinera CSS-filer et Optimera CSS-leverans.
Remarque : WP Rocket kommer att försöka minifiera alla dina CSS-filer, kombinera dem och ladda endast nödvändig CSS för den synliga delen av din webbplats. Detta kan påverkautseendet på din webbplats, så du bör testa din webbplats noggrant på flera enheter och skärmstorlekar.
Sedan måste du bläddra till avsnittet JavaScript-filer. Härifrån kan du kryssa för alla alternativ för maximal prestandaförbättring.
Du kan minifiera och kombinera JavaScript-filer precis som du gjorde CSS-filer.
Du kan också förhindra att WordPress laddar upp filen. jQuery Migrera. Detta är ett skript som WordPress laddar för att ge kompatibilitet för plugins och teman med äldre versioner av jQuery.
De flesta webbplatser behöver inte den här filen, men det är en bra idé att kolla din webbplats för att se till att dess borttagning inte påverkar ditt tema eller plugins.
Rulla sedan ner lite längre och kontrollera alternativen 'Ladda JavaScript uppskjuten'och'Säkert läge för jQuery".
Dessa alternativ försenar inläsningen av JavaScript som inte är nödvändigt, och jQuery Safe Mode låter dig ladda jQuery för teman som kan använda det inline.
Kom ihåg att klicka på knappen Spara ändringar för att lagra dina inställningar.
Efter det kan du också rensa cachen i WP Rocket innan du testar din webbplats igen med Google Page Speed Insights.
På vår testwebbplats kunde vi uppnå 100% poäng på stationära datorer och problem med renderad fastning löstes i både mobila och stationära poäng.
2. Fixa blockering av JavaScript och CSS med autoptimering
För den här metoden kommer vi att använda ett annat plugin som är speciellt gjord för att förbättra leveransen av din webbplats CSS- och JS-filer. Medan detta plugin får jobbet gjort, saknar det andra kraftfulla funktioner som WP Rocket erbjuder.
Det första du behöver göra är att installera och aktivera plugin Autoptimize. Mer information finns i vår steg-för-steg-guide för hur du installerar ett WordPress-plugin.
När du aktiverar måste du besöka sidan Inställning »Autoptimera för att konfigurera insticksinställningarna.
Först och främst måste du markera alternativet 'Optimera JavaScript-kodenunder blocket JavaScript Tillbehör. Se till att alternativet 'Aggregera alla länkade JS-filer' inte är markerat.
Bläddra sedan ner till området CSS-alternativ och kontrollera alternativet ' Optimera CSS-koden?'. Se till att alternativet 'Samla alla länkade CSS-filerär inte markerat.
Du kan nu klicka på knappen "Spara ändringar och rensa cache" för att lagra dina inställningar.
Gå igång och testa din webbplats med Insnitt om hastighet på sidan. På vår demonstrationswebbplats lyckades vi lösa problemet med fastnat med dessa grundinställningar.
Om det fortfarande finns renderingsblockerande skript måste du gå tillbaka till inställningssidan för insticksprogrammet och titta på alternativen JavaScript och CSS.
Till exempel kan du tillåta plugin att inkludera JS Inline och ta bort skript som är uteslutna som standard som seal.js eller jquery.js.
Klicka på knappen "Spara ändringar och rensa cache" för att spara dina ändringar och rensa plugin-cachen.
När du är klar kan du gå igenom din webbplats igen med verktyget Page Speed Insights.
Hur fungerar det?
Optimera buntar alla JavaScript- och CSS-filer. Efter det skapar han minifierade CSS- och JavaScripts-filer och serverar cachade kopior av din webbplats på synkroniserad eller uppskjuten basis.
Detta låter dig lösa blockeringsproblemet renderingar skript och blockeringsstilar. Kom dock ihåg att detta också kan påverka prestanda ellerutseendet på din webbplats.
hjälpa
Beroende på hur plugins och ditt WordPress-tema använder JavaScript och CSS kan det vara ganska svårt att lösa alla problem med blockering av JavaScript- och CSS-renderingar.
Även om verktygen ovan kan hjälpa kan dina plugins behöva vissa skript på en annan prioritetsnivå för att fungera korrekt. I det här fallet kan ovanstående lösningar bryta funktionaliteten hos dessa plugins, eller de kan uppträda oväntat.
Google kan fortfarande visa dig några problem som CSS-leveransoptimering. WP Rocket låter dig fixa detta genom att manuellt lägga till den kritiska CSS som behövs för att perfekt visa ditt WordPress-tema.
Det kan dock vara ganska svårt att veta vilken CSS-kod du behöver visa.
Upptäck också några teman och premium WordPress-plugins
Du kan använda andra WordPress-plugins för att ge ett modernt utseende och optimera greppet på din blogg eller webbplats.
Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.
1. WordPress Speed Optimization Plugin
Kämpar du för att hantera flera plugin-program för hastighetsoptimering? Är du orolig för att de hindrar körningshastigheten på din webbplats? då kommer detta WordPress-plugin att vara den ultimata lösningen för alla dina bekymmer.
Detta plugin är utformat för att ge dig funktionaliteten hos nästan 6-8 olika WordPress-plugins. Du måste bara installera och konfigurera den för att se en markant förbättring av laddningen av dina sidor.
Vi vill påpeka att detta inte är ett cache-plugin eller CDN, men resultatet det är ändå imponerande. Tveka inte att prova detta WordPress-plugin för att se vad det kan.
Ladda ner | demo | webbhotell
2. Social Share & Locker Pro
Pluggen Social Share & Locker Pro har utformats för att hjälpa din webbplats att bli mer synlig på sociala nätverk. Med bara några få klick kan du antingen ställa in positionen för dina sociala ikoner eller låsa ditt innehåll genom att kräva delning på ett av de sociala nätverk som erbjuds av dig.
Du har 10 fördefinierade teman och detta bör täcka de vanligaste önskemålen. Alla hennes teman är näthinnan och underverk.
Med Social Share & Locker Pro kommer du också att kunna visa hela namnet på sociala nätverk eller bara ikonen. Det beror på din design, tillgängligt utrymme eller dina önskemål.
Ladda ner | demo | webbhotell
3. WordPress PDF Bilder Lightbox
WordPress PDF Lightbox är en WordPress plugin som låter dig skapa tittare av PDF-filer. En PDF-visare är en samling foton som kan sparas som PDF-filer.
Med den här tillägget kan du skapa så många PDF-tittare som du vill. För varje tittare kan administratören ställa in några alternativ som:
- Omslagsbilden: som läggs till som första sidan i den användarskapade PDF-filen
- Maximalt antal bilder per tittare
- En vattenstämpelbild: appliceras på PDF-sidor
- Skicka via e-post: om den här funktionen är aktiverad, a kontakt~~POS=TRUNC formulär~~POS=HEADCOMP kommer att erbjudas strax efter bildgalleriet. Genom detta formulär kommer användare att kunna skicka den skapade PDF-filen till vem som helst.
Ladda ner | demo | webbhotell
Rekommenderade resurser
Ta reda på om andra rekommenderade resurser som hjälper dig att bygga och hantera din webbplats.
- 10 WordPress-plugins för att förbättra SEO på din webbplats
- 5 premium WordPress plugins för att optimera dina kategorier
- 10 WordPress-plugins för att konvertera valuta
- 10 Wordpress plugins för att integrera en ljudspelare på en webbplats
Slutsats
Här! Det är det för denna handledning. Vi hoppas att den här artikeln hjälpte dig att lära dig att fixa JavaScript och CSS-rendering blockering i WordPress. Du kan också se vår ultimata guide för hur du påskyndar WordPress-prestanda för nybörjare.
Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.
Tveka inte att dela med dina vänner på dina favorit sociala nätverk. Och om du har några förslag eller kommentarer, lämna dem i vårt avsnitt commentaires.
.
