I det h\u00e4r inl\u00e4gget kommer vi att svara p\u00e5 b\u00e5da fr\u00e5gorna \u00e5t dig. H\u00e4r \u00e4r allt vi kommer t\u00e4cka i det h\u00e4r inl\u00e4gget:<\/p>\n
- \n
- Vad renderingsblockerande resurser \u00e4r och varf\u00f6r de \u00e4r ett problem<\/a><\/li>\n
- S\u00e5 fixar du renderingsblockerande resurser\u00a0generellt<\/em><\/a><\/li>\n
- S\u00e5 anv\u00e4nder du gratis eller betalda plugins f\u00f6r att \u00e5tg\u00e4rda problemet p\u00e5 WordPress<\/a><\/li>\n<\/ul>\n
F\u00f6redrar du att titta p\u00e5 videoversionen<\/a>?<\/h3>\n
<\/kinsta-video><\/p>\n Vad betyder ”eliminera renderingsblockerande resurser”?<\/h2>\n
F\u00f6r att f\u00f6rst\u00e5 vad renderingsblockerande resurser \u00e4r och varf\u00f6r de skadar webbplatsens laddningstider, m\u00e5ste vi b\u00f6rja med en grundl\u00e4ggande titt p\u00e5 hur en webbl\u00e4sare renderar en webbsida.<\/p>\n
N\u00e4r en bes\u00f6kare landar p\u00e5 din webbplats b\u00f6rjar deras webbl\u00e4sare i princip h\u00f6gst upp av\u00a0webbplatsens kod<\/a>\u00a0och l\u00e4ser ner\u00e5t. Fr\u00e5n topp till t\u00e5.<\/p>\n
Om webbl\u00e4sare i den processen st\u00f6ter p\u00e5 en\u00a0CSS-<\/a>\u00a0eller JavaScript-fil, m\u00e5ste\u00a0den stoppa<\/strong>\u00a0”l\u00e4sningen” medan den v\u00e4ntar p\u00e5 att ladda ner och bearbeta den filen. Den tid som den spenderar ”pausad” f\u00f6r att ladda ner och parsa dessa resurser kan spenderas p\u00e5 n\u00e5got mycket mer produktivt, som att ladda den del av webbplatsens inneh\u00e5ll som \u00e4r omedelbart synligt n\u00e4r n\u00e5gon landar p\u00e5 sidan.<\/p>\n
L\u00e5t oss titta p\u00e5 ett extremt exempel f\u00f6r att visa varf\u00f6r detta kan vara ett problem.<\/p>\n
L\u00e5t oss s\u00e4ga att du har en cool JavaScript-effekt i webbplatsens sidfot. Den drivs av ”coolfooter.js”, som \u00e4r ett skript som refereras \u00f6verst p\u00e5 webbplatsens kod (\u00e4ven om effekten ligger i sidfoten, s\u00e5 bes\u00f6karna kommer inte att se den f\u00f6rr\u00e4n de bl\u00e4ddrar ner till sidfoten<\/em>).<\/p>\n
S\u00e5 en\u00a0mycket<\/em>\u00a0grov layout f\u00f6r webbplatsens kod skulle kunna vara n\u00e5got i stil med detta:<\/p>\n
- \n
- Rubrikmeta<\/li>\n
- Coolfooter.js<\/li>\n
- HTML f\u00f6r ditt \u00f6versta inneh\u00e5ll. Detta \u00e4r allt inneh\u00e5ll som en bes\u00f6kare ser direkt (innan de b\u00f6rjar interagera med sidan<\/em>)<\/li>\n<\/ul>\n
Och h\u00e4r \u00e4r anledningen till att det h\u00e4r \u00e4r ett problem:<\/p>\n
N\u00e4r en bes\u00f6kare landar p\u00e5 din webbplats b\u00f6rjar webbl\u00e4saren l\u00e4sa med start h\u00f6gst upp. S\u00e5 innan den kan parsa och rendera HTML f\u00f6r ovanst\u00e5ende inneh\u00e5ll p\u00e5 din webbplats, m\u00e5ste den v\u00e4nta f\u00f6r att ladda ner och parsa coolfooter.js-filen.<\/p>\n
Slutresultatet?\u00a0Det tar l\u00e4ngre tid att visa HTML-koden f\u00f6r inneh\u00e5llet h\u00f6gst upp,\u00a0<\/strong>vilket inneb\u00e4r att dina bes\u00f6kare kommer att uppfatta din webbplats som l\u00e5ngsammare.<\/p>\n
N\u00e4r Google s\u00e4ger att du ska eliminera renderingsblockerande resurser betyder det i princip: ”ladda inte on\u00f6diga resurser h\u00f6gst upp p\u00e5 webbplatsens kod eftersom det kommer att ta l\u00e4ngre tid f\u00f6r bes\u00f6karnas webbl\u00e4sare att ladda ner den synliga delen av ditt inneh\u00e5ll”.<\/p>\n
Med tipsen i det h\u00e4r inl\u00e4gget kan du v\u00e4nta med att ladda vissa CSS- och JavaScript-resurser tills den synliga delen av din sida redan har laddats.<\/p>\n
Vad \u00e4r renderingsblockerande resurser?<\/h3>\n
N\u00e4r vi h\u00e4nvisar till renderingsblockerande resurser talar vi vanligtvis om:<\/p>\n
- \n
- CSS<\/li>\n
- JavaScript<\/li>\n<\/ul>\n
Det \u00e4r viktigt att f\u00f6rst\u00e5 att inte alla CSS-och JavaScript-filer \u00e4r renderingsblockerande<\/strong>.<\/p>\n
Det \u00e4r till exempel viktigt att ladda ditt viktiga CSS n\u00e4ra toppen, annars kan dina bes\u00f6kare uppleva vad som kallas en\u00a0blixt av ostylat inneh\u00e5ll<\/a>\u00a0(Flash of unstyled content, eller FOUC).<\/p>\n
\u00c4r bilder renderingsblockerande resurser?<\/h3>\n
Nej, bilder \u00e4r inte renderingsblockerande<\/strong>. Det \u00e4r fortfarande viktigt att\u00a0optimera dina bilder<\/a>\u00a0f\u00f6r att minska deras filstorlekar, men du beh\u00f6ver inte oroa dig f\u00f6r att optimera leveranss\u00f6kv\u00e4gen f\u00f6r dina bilder.<\/p>\n
S\u00e5 testar du om din webbplats har renderingsblockerande resurser<\/h2>\n
F\u00f6r att bed\u00f6ma om din WordPress-sajt f\u00f6r n\u00e4rvarande har renderingsblockerande resurser kan du anv\u00e4nda\u00a0Google PageSpeed Insights<\/a>.<\/p>\n
Allt du g\u00f6r \u00e4r att ange webbadressen du vill testa. Om du har problem med renderingsblockerande resurser kommer PageSpeed Insights sedan att lista varje enskild resurs i\u00a0avsnittet Eliminera renderingsblockerande resurser<\/strong>\u00a0under\u00a0M\u00f6jligheter<\/strong>:<\/p>\n
![\"Meddelandet](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/eliminate-render-blocking-resources-wordpress-1.jpg\")
Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights<\/figcaption><\/figure>\n Hur eliminerar du renderingsblockerande resurser?<\/h2>\n
Oroa dig inte, du beh\u00f6ver inte g\u00f6ra det manuellt. Vi pratar om WordPressplugins som kan hj\u00e4lpa dig att eliminera renderingsblockerande resurser i n\u00e4sta avsnitt.<\/p>\n
Det \u00e4r dock bra att f\u00f6rst\u00e5 vad dessa plugins g\u00f6r bakom kulisserna f\u00f6r att eliminera renderingsblockerande resurser.<\/p>\n
S\u00e5 eliminerar du renderingsblockerande JavaScript<\/h3>\n
Det finns n\u00e5gra olika strategier f\u00f6r att eliminera renderingsblockerande JavaScript. Vi t\u00e4cker dessa i detalj i\u00a0v\u00e5r artikel om hur man skjuter upp parsning av JavaScript<\/a>, men h\u00e4r \u00e4r de viktigaste metoderna:<\/p>\n
- \n
- Async<\/strong>\u00a0\u2013 l\u00e5ter HTML-tolken (exempelvis bes\u00f6karens webbl\u00e4sare<\/em>) ladda ner JavaScript medan den fortfarande parsar resten av HTML-koden. Det betyder att den inte helt slutar parsa medan filen h\u00e4mtas. Det kommer dock att pausa HTML-tolken f\u00f6r att exekvera skriptet n\u00e4r det h\u00e4mtas.<\/li>\n
- Defer<\/strong> \u2013 l\u00e5ter HTML-tolken ladda ner JavaScript medan den parsar resten av HTML-koden\u00a0och<\/strong>\u00a0v\u00e4ntar p\u00e5 att exekvera skriptet tills HTML-parsningen \u00e4r klar.<\/li>\n<\/ul>\n
Denna illustration fr\u00e5n Growing with the Web<\/a>\u00a0g\u00f6r ett bra jobb med att visa skillnaden:<\/p>\n
![\"JavaScript](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/08\/defer-parsing-of-javascript-3.png\")
JavaScript async vs defer<\/figcaption><\/figure>\n F\u00f6rdelen med att anv\u00e4nda\u00a0defer<\/strong>\u00a0\u00e4r att dina skript garanterat kommer exekveras i den ordning som de visas i koden.<\/p>\n
Async<\/strong>\u00a0anv\u00e4nder inte detta tillv\u00e4gag\u00e5ngss\u00e4tt, vilket ibland kan orsaka problem om du anv\u00e4nder async <\/strong>f\u00f6r alla JavaScript-resurser eftersom det ofta kan bryta resurser som \u00e4r beroende av resurser som visas tidigare i dokumentet. Det vanligaste problemet async producerar \u00e4r brutna jQuery<\/a>-resurser som f\u00f6rs\u00f6ker ladda innan jquery.js har lagts till i dokumentet.<\/p>\n
S\u00e5 eliminerar du renderingsblockerande CSS<\/h3>\n
Att eliminera renderingsblockerande CSS kan vara lite sv\u00e5rare eftersom du m\u00e5ste vara noga med att inte f\u00f6rdr\u00f6ja CSS som beh\u00f6vs f\u00f6r att rendera det \u00f6versta inneh\u00e5llet. Det ideala arrangemanget \u00e4r att:<\/p>\n
- \n
- Identifiera de stilar som kr\u00e4vs f\u00f6r att rendera det \u00f6versta inneh\u00e5llet och\u00a0leverera dessa stilar inline med HTML<\/a>.<\/li>\n
- Anv\u00e4nd medieattributet p\u00e5 l\u00e4nkelementen som drar in CSS-filer f\u00f6r att identifiera CSS-resurser som \u00e4r villkorliga, det vill s\u00e4ga endast n\u00f6dv\u00e4ndiga f\u00f6r specifika enheter eller situationer.<\/li>\n
- \u00c5terst\u00e5ende CSS-resurser b\u00f6r laddas asynkront, ett drag som vanligtvis g\u00f6rs genom att l\u00e4gga till dem med uppskjutet eller asynkront JavaScript. F\u00f6r att vara \u00e4rliga, det b\u00f6rjar bli lite komplicerat h\u00e4r, eller hur? Det h\u00e4r \u00e4r definitivt n\u00e5got som en frontendingenj\u00f6r borde sk\u00f6ta. Vilket \u00e4r bra om du \u00e4r en frontendingenj\u00f6r, men de flesta av oss \u00e4r inte det. Den goda nyheten \u00e4r att detta \u00e4r en artikel om WordPress, och du kan eliminera eller \u00e5tminstone avsev\u00e4rt minska antalet renderingsblockerande JS- och CSS-resurser som p\u00e5verkar din webbplats med r\u00e4tt plugin.<\/li>\n<\/ul>\n
F\u00f6r ytterligare ett snabbt och enkelt s\u00e4tt att \u00f6ka din \u00f6vergripande optimering, \u00f6verv\u00e4g att \u00e4ven minifiera din kod. Kinsta har byggt in en kodminifieringsfunktion<\/a> direkt i MyKinsta-instrumentpanelen<\/a>, s\u00e5 att v\u00e5ra kunder kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick.<\/p>\n
Om du inte kan hitta funktionen i din instrumentpanel, kolla bara in v\u00e5r video om Hur man aktiverar minifiering i MyKinsta<\/a>.<\/p>\n
How to Eliminate Render-Blocking CSS and JavaScript Resources with WordPress Plugins<\/span><\/h2>\n
F\u00f6r att visa hur man eliminerar renderingsblockerande resurser p\u00e5 WordPress har vi skapat en enkel testplats som inkluderar renderingsblockerande CSS och JavaScript och sedan tar vi dig igenom hur du anv\u00e4nder tv\u00e5 olika pluginl\u00f6sningar f\u00f6r att eliminera renderingsblockerande CSS och JavaScript:<\/p>\n
- \n
- Autoptimize + Async JavaScript (gratis)<\/li>\n
- WP Rocket (kostar)<\/li>\n<\/ul>\n
S\u00e5 h\u00e4r ser v\u00e5r testsida ut innan\u00a0vi optimerade CSS-<\/a>\u00a0och JavaScript-leveransen:<\/p>\n
Meddelandet Eliminera renderingsblockerande resurser i PageSpeed Insights<\/figcaption><\/figure>\n Om du testar hur effektiva \u00e4ndringarna \u00e4r med Google PageSpeed Insights b\u00f6r du vara medveten om att Google cachar resultaten i flera minuter. I huvudsak inneb\u00e4r detta att om du snabbt\u2026<\/p>\n
- \n
- Testar din optimerade webbplats<\/li>\n
- Aktiverar ett av pluginsen i det h\u00e4r avsnittet<\/li>\n
- Testar om din webbplats<\/li>\n<\/ol>\n
… ser du fortfarande resultaten f\u00f6r din optimerade webbplats tills Google \u00e5terst\u00e4ller cacheminnet. S\u00e5 se till att du v\u00e4ntar n\u00e5gra minuter f\u00f6r att Google ska rensa cacheminnet innan du t\u00e4nker att pluginet inte fungerar.<\/p>\n
S\u00e5 eliminerar du renderingsblockerande resurser med Autoptimize + Async JavaScript-pluginet<\/h3>\n
Autoptimize<\/a>\u00a0och\u00a0Async JavaScript<\/a>\u00a0\u00e4r tv\u00e5 separata gratisplugins fr\u00e5n samma utvecklare. Tillsammans hj\u00e4lper de dig att optimera leveransen av b\u00e5de CSS och JavaScript.<\/p>\n
N\u00e4r du har\u00a0installerat b\u00e5da plugins<\/a>, g\u00e5\u00a0till Inst\u00e4llningar \u2192 JavaScript Async\u00a0<\/strong>och:<\/p>\n
- \n
- Markera rutan f\u00f6r att\u00a0Aktivera Async JavaScript<\/strong>\u00a0\u00f6verst.<\/li>\n
- V\u00e4lj mellan\u00a0Till\u00e4mpa Async<\/strong>\u00a0och\u00a0Till\u00e4mpa Defer<\/strong> i Snabbinst\u00e4llningarna<\/strong>.<\/li>\n<\/ul>\n
![\"S\u00e5](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/eliminate-render-blocking-resources-wordpress-2.jpg\")
S\u00e5 h\u00e4r konfigurerar du Async JavaScript-pluginet<\/figcaption><\/figure>\n Om\u00a0Async<\/strong>-alternativet orsakar problem p\u00e5 din webbplats rekommenderar vi att du testar Defer<\/strong>\u00a0eller att exkludera jQuery<\/strong>, vilket pluginet ger dig ett alternativ f\u00f6r.<\/p>\n
N\u00e4r du har st\u00e4llt in Async JavaScript-pluginet, g\u00e5 till\u00a0Inst\u00e4llningar \u2192 Autoptimize<\/strong> och:<\/p>\n
- \n
- Markera rutan f\u00f6r att\u00a0Optimera JavaScript-kod<\/strong><\/li>\n
- Markera rutan f\u00f6r att\u00a0Optimera CSS-kod<\/strong><\/li>\n<\/ul>\n
![\"S\u00e5](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/eliminate-render-blocking-resources-wordpress-3.jpg\")
S\u00e5 h\u00e4r konfigurerar du pluginet Autoptimize<\/figcaption><\/figure>\n Om du \u00e4r en avancerad anv\u00e4ndare kan du leka med de extra JavaScript-och CSS-optimeringsinst\u00e4llningarna, men f\u00f6r de flesta webbplatser kommer det r\u00e4cka med standardinst\u00e4llningarna.<\/p>\n
Efter\u00a0att ha konfigurerat Autoptimize<\/a>\u00a0och Async JavaScript gick v\u00e5r testwebbplats PageSpeed Insights igenom ”Eliminera renderingsblockerande resurser”-granskning utan anm\u00e4rkning.<\/p>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/eliminate-render-blocking-resources-wordpress-4.jpg\")
PageSpeed Insights resultat med Autoptimize och Async JavaScript<\/figcaption><\/figure>\n Om du vill eliminera \u00e4nnu fler av dessa filer kan du ocks\u00e5\u00a0anv\u00e4nda Autoptimize f\u00f6r att manuellt anpassa de viktigaste CSS-elementen<\/a>. Detta kr\u00e4ver viss utvecklingskunskap, dock, s\u00e5 det \u00e4r inte n\u00e5got icke-utvecklare b\u00f6r testa.<\/p>\n
Du kan ocks\u00e5 anv\u00e4nda pluginsen separat om du f\u00f6redrar det. Men med tanke p\u00e5 att b\u00e5da pluginsen kommer fr\u00e5n samma utvecklare och \u00e4r byggda f\u00f6r att fungera v\u00e4l med varandra, \u00e4r det b\u00e4st att kombinera dem f\u00f6r de flesta webbplatser.<\/p>\n
S\u00e5 eliminerar du renderingsblockerande resurser med WP Rocket<\/h3>\n
WP Rocket<\/a>\u00a0\u00e4r ett popul\u00e4r premiumplugin f\u00f6r WordPress prestanda och cachning.<\/p>\n
Normalt till\u00e5ter vi inte\u00a0cachningsplugins<\/a>\u00a0p\u00e5 WordPress-sajter som hostas p\u00e5 Kinsta eftersom\u00a0vi redan hanterar cachning \u00e5t dig<\/a>\u00a0p\u00e5 serverniv\u00e5 via snabb Nginx FastCGI-cache.<\/p>\n
- Markera rutan f\u00f6r att\u00a0Optimera CSS-kod<\/strong><\/li>\n<\/ul>\n
- V\u00e4lj mellan\u00a0Till\u00e4mpa Async<\/strong>\u00a0och\u00a0Till\u00e4mpa Defer<\/strong> i Snabbinst\u00e4llningarna<\/strong>.<\/li>\n<\/ul>\n
- Markera rutan f\u00f6r att\u00a0Aktivera Async JavaScript<\/strong>\u00a0\u00f6verst.<\/li>\n
- Defer<\/strong> \u2013 l\u00e5ter HTML-tolken ladda ner JavaScript medan den parsar resten av HTML-koden\u00a0och<\/strong>\u00a0v\u00e4ntar p\u00e5 att exekvera skriptet tills HTML-parsningen \u00e4r klar.<\/li>\n<\/ul>\n
- Async<\/strong>\u00a0\u2013 l\u00e5ter HTML-tolken (exempelvis bes\u00f6karens webbl\u00e4sare<\/em>) ladda ner JavaScript medan den fortfarande parsar resten av HTML-koden. Det betyder att den inte helt slutar parsa medan filen h\u00e4mtas. Det kommer dock att pausa HTML-tolken f\u00f6r att exekvera skriptet n\u00e4r det h\u00e4mtas.<\/li>\n
- S\u00e5 fixar du renderingsblockerande resurser\u00a0generellt<\/em><\/a><\/li>\n
![\"S\u00e5](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/wp-rocket-backend.png\")
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/12\/eliminate-render-blocking-resources-wordpress-6.jpg\")