Hvis du nogensinde har kørt dit WordPress-sted gennem Google PageSpeed ​​Insights, har Google sandsynligvis fortalt dig, at du er nødt til at eliminere render-blokerende ressourcer på dit WordPress-sted. Faktisk kan det være, hvorfor du læser dette indlæg lige nu.

Dette efterlader dig sikkert med to spørgsmål:

I dette indlæg besvarer vi begge spørgsmål til dig. Her er alt, hvad vi vil dække i dette indlæg:

Hvad betyder ”At eliminere render-blokerende ressourcer”?

For at forstå, hvad render-blokerende ressourcer er, og hvorfor de skader dit websteds belastningstider, er vi nødt til at starte med et grundlæggende kig på, hvordan en webbrowser gengiver en webside.

Når en besøgende lander på dit websted, starter deres webbrowser dybest set øverst på dit websteds kode og læses ned af. Fra top til bund, fik du fat i det?

Hvis den i denne proces møder en CSS- eller JavaScript-fil, skal den stoppe “læsning”, mens den venter på at downloade og behandle denne fil. Den tid, det bruger “pause” til at downloade og analysere disse ressourcer, kunne bruges på noget meget mere produktivt, f.eks. indlæsning af den del af dit websteds indhold, der er umiddelbart synligt, når nogen lander på siden.

Lad os se på et ekstremt eksempel for at vise, hvorfor dette kan være et problem.

Lad os sige, at du har denne seje JavaScript-effekt i sidens sidefod. Det drives af “coolfooter.js”, som er et script, der er henvist til øverst på dit websteds kode (selvom effekten er i footeren, så besøgende ikke kan se det, før de ruller til sidefoden).

Så et meget groft layout til dit websteds kode kan være noget i retning af:

Og her er grunden til, at dette er et problem:

Når en besøgende lander på dit websted, begynder deres browser at læse fra top til bund. Så før det kan analysere og gengive HTML-koden til indholdet over skillelinjen på dit websted, skal det vente på at downloade og analysere filen coolfooter.js.

Slutresultat? Det tager længere tid at få vist HTML for indholdet over skillelinjen, hvilket betyder, at dine besøgende opfatter dit websted som langsommere.

Når Google fortæller dig at fjerne render-blokerende ressourcer, siger det i bund og grund: ”hej, efterlad ikke unødvendige ressourcer øverst på dit websteds kode, fordi det vil tage det længere tid for besøgende ‘browsere at hente den synlige del af din indhold”.

Med tipsene i dette indlæg kan du vente med at indlæse visse CSS- og JavaScript-ressourcer, indtil den synlige del af din side allerede er indlæst.

Hvad er render-blokerende ressourcer?

Når vi refererer til render-blokerende ressourcer, taler vi normalt om:

Det er vigtigt at forstå, at ikke alle CSS- og JavaScript-filer er render-blokerende.

For eksempel er det vigtigt at indlæse din kritiske CSS nær toppen, ellers kan dine besøgende muligvis opleve det, der er kendt som en flash af unstyled indhold (FOUC).

Bliver billeder render-blokerende ressourcer?

Nej, billeder blokeres ikke for gengivelse. Det er stadig vigtigt at optimere dine billeder for at reducere deres filstørrelser, men du behøver ikke at bekymre dig om at optimere leveringsstien til dine billeder.

Sådan testes, hvis dit websted har render-blokerende ressourcer

For at vurdere, om dit WordPress-websted i øjeblikket har render-blokerende ressourcer, kan du bruge Google PageSpeed ​​Insights.

Alt hvad du gør er at indtaste den URL, du vil teste. Så hvis du har et problem med render-blokerende ressourcer, viser PageSpeed ​​Insights hver enkelt ressource i afsnittet Eliminere render-blokerende ressourcer under Muligheder:

Meddelelsen eliminer render-blokerende resourcer i PageSpeed Insights

Meddelelsen eliminer render-blokerende resourcer i PageSpeed Insights

Hvordan fjerner du render-blokerende rescourcer?

Bare rolig, du behøver ikke gøre dette manuelt. Vi vil tale om WordPress-plugins, der kan hjælpe dig med at eliminere render-blokerende ressourcer i det næste afsnit.

Det er dog nyttigt at forstå, hvad disse plugins laver bag kulisserne for at eliminere render-blokerende ressourcer.

Sådan fjernes render-blokerende JavaScript

Der er et par forskellige strategier for at eliminere render-blokerende JavaScript. Vi dækker disse detaljeret i vores artikel om, hvordan man udsætter parsing af JavaScript, men her er de vigtigste metoder:

Denne illustration fra Growing With the Web gør et godt stykke arbejde med at vise forskellen:

JavaScript async vs udsættelse

JavaScript async vs udsættelse

Fordelen ved at bruge Udsættelse er, at dine scripts garanteres en udførelse i den rækkefølge, de vises i koden.

Async bruger ikke denne tilgang, som undertiden kan forårsage problemer, hvis du anvender async til alle JavaScript-ressourcer, fordi det ofte kan ødelægge ressourcer, der er afhængige af ressourcer, der vises tidligere i dokumentet. Det mest almindelige problem, som async producerer, er ødelagte jQuery-ressourcer, der prøver at indlæse, før jquery.js er føjet til dokumentet.

Sådan fjernes render-blokerende CSS

Fjernelse af render-blokerende CSS kan være lidt vanskeligere, fordi du skal være forsigtig med ikke at udsætte CSS, der er nødvendigt for at gengive indholdet over skillelinjen. Det ideelle arrangement er at:

Sådan fjernes render-blokerende CSS og JavaScript-ressourcer med WordPress Plugins

For at demonstrere, hvordan man fjerner render-blokerende ressourcer på WordPress, har vi oprettet et simpelt testsite, der indeholder render-blokerende CSS og JavaScript, og så tager vi dig igennem, hvordan du bruger to forskellige plugin-løsninger til at eliminere render-blokerende CSS og JavaScript:

Som reference ser det her ud som vores testwebsted, før vi optimerer levering af CSS og JavaScript:

Meddelelsen eliminer render-nlokerende resources i PageSpeed Insights

Meddelelsen eliminer render-nlokerende resources i PageSpeed Insights

Hvis du tester effektiviteten af ​​dine ændringer med Google PageSpeed ​​Insights, skal du være opmærksom på, at Google cache sine resultater i flere minutter. Væsentligt betyder det, at hvis du hurtigt …

  1. Test dit ikke-optimerede websted
  2. Aktivér et af plugins i dette afsnit
  3. Test dit websted igen

… så vil du stadig se resultaterne for dit uoptimerede websted, indtil Google nulstiller sin cache. Så sørg for at vente et par minutter på, at Google rydder dens cache, før du tror, ​​at plugin ikke fungerer.

Sådan fjernes render-blokerende ressourcer, ved hjælp af automatisk optimering + Async JavaScript-plugin

Autoptimize og Async JavaScript er to separate gratis plugins fra den samme udvikler. Sammen hjælper de dig med at optimere leveringen af ​​både din CSS og JavaScript.

Når du har installeret begge plugins, skal du gå til Indstillinger → Async JavaScript og:

Sådan konfigureres Async JavaScript-plugin

Sådan konfigureres Async JavaScript-plugin

Hvis Async-indstillingen skaber problemer på dit websted, vil vi anbefale at prøve Udsæt eller ekskludere jQuery, som plugin giver dig en mulighed for.

Når du har konfigureret Async JavaScript-pluginnet, skal du gå til Indstillinger → Autoptimize og:

Sådan konfigureres plugin Autoptimize

Sådan konfigureres plugin Autoptimize

Hvis du er en avanceret bruger, kan du lege med de ekstra JavaScript- og CSS-optimeringsindstillinger, men de fleste websteder har det godt med standardindstillingerne.

Efter at have konfigureret Autoptimize og Async JavaScript, passerede vores testsite PageSpeed Insights ‘”Fjern render-blokerende ressourcer” -revision:

PageSpeed Insights-resultater med Autoptimize og Async JavaScript

PageSpeed Insights-resultater med Autoptimize og Async JavaScript

Hvis du ønskede at fjerne endnu flere af disse filer, kan du yderligere bruge Autoptimize til manuelt at indføre din kritiske CSS. Dette kræver dog noget kendskab til udvikling, så det er ikke noget, ikke-udviklere skal prøve.

Du kan også bruge plugins separat, hvis det foretrækkes. Men i betragtning af at begge plugins kommer fra den samme udvikler og er bygget til at spille pænt med hinanden, er den bedste fremgangsmåde for de fleste steder at kombinere dem.

Sådan fjernes render-blokerende ressourcer med WP Rocket

WP Rocket er en populær premium WordPress-ydeevne og cache-plugin.

Normalt tillader vi ikke cache-plugins på WordPress-websteder, der er hosted hos Kinsta, fordi vi allerede håndterer cache til dig på et serverniveau via den hurtige Nginx FastCGI-cache.

WP Rocket har dog en speciel integration med Kinsta, der lader WP Rocket spille godt sammen med din Kinsta-cache. Det er fantastisk, fordi WP Rocket gør meget mere for WordPress-ydeevne end blot cache, herunder hjælpe dig med at eliminere render-blokerende CSS- og JavaScript-ressourcer på dit WordPress-sted.

Bruger du WP Rocket? Brug det til at arbejde videre med at optimere dit websted med vores problemfri integration. Prøv Kinsta gratis.

Når du installerer og aktiverer WP Rocket, skal du gå til fanen Filoptimering. Aktivér derefter disse to indstillinger:

Sådan konfigureres WP Rocket

Sådan konfigureres WP Rocket

Efter aktivering af disse to funktioner passerede vores testsite også “eliminer render-blokerende ressourcer” -revisionen i PageSpeed Insights. WP Rocket formåede også at eliminere flere render-blokerende ressourcer end JavaScript opsætningen Autoptimize / Async:

PageSpeed Insights-resultater med WP-Rocket

PageSpeed Insights-resultater med WP-Rocket

Og sådan fjerner du render-blokerende ressourcer på dit WordPress-websted!

Vil du slippe af med render-blokerende ressourcer i #WordPress? Det er super let med de rigtige plugins ... Tjek hvordan du justerer deres indstillinger og gør dit websted hurtigere! ⚙️🏃‍♀️Click to Tweet

Resumé

Render-blokerende ressourcer bremser den oplevede sideindlæsningstid på dit WordPress-sted ved at tvinge den besøgendes browsere til at forsinke gengivelse over indholdet over folden, mens browseren downloader filer, der ikke er nødvendige med det samme.

For at hjælpe besøgende med at indlæse den synlige del af din side hurtigere, skal du forsinke indlæsning af ressourcer, der ikke umiddelbart er påkrævet.

For at fjerne render-blokerende ressourcer på WordPress kan du bruge off-the-rack-plugins.

For en gratis løsning kan du bruge kombinationen af ​​Autoptimize og Async JavaScript, to plugins fra den samme udvikler.

Hvis du er villig til at betale, kan du bruge WP Rocket, der tilbyder en speciel integration med Kinsta og kan hjælpe med mange andre WordPress-performance tweeks.

Har du yderligere spørgsmål om, hvordan du fjerner render-blokerende ressourcer i WordPress? Fortæl os det i kommentarerne!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer