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:
- Hvad er render-blokerende ressourcer i første omgang?
- Hvordan kan du fjerne render-blokerende ressourcer på WordPress?
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 render-blokerende ressourcer er, og hvorfor de er et problem
- Sådan rettes render-blokerende ressourcer generelt
- Sådan bruges gratis eller betalte plugins til at løse problemet på WordPress
Foretrækker du at se videoversionen?
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:
- Header meta
- Coolfooter.js
- HTML til dit indhold over skillelinjen. Dette er alt det indhold, som en besøgende ser med det samme (før de begynder at interagere med siden)
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:
- CSS
- JavaScript
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:
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:
- Async – lader HTML-parseren (f.eks. En besøgende browser) downloade JavaScript, mens den stadig analyserer resten af HTML-filen. Det vil sige, det stopper ikke helt med at analysere, mens filen downloades. Det sætter imidlertid HTML-parseren på pause for at udføre scriptet, når det downloades.
- Udskyd – lader HTML-parseren downloade JavaScript, mens den analyserer resten af HTML-filen, og venter på at udføre scriptet, indtil HTML-parsing er afsluttet.
Denne illustration fra Growing With the Web gør et godt stykke arbejde med at vise forskellen:
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:
- Identificer de stilarter, der kræves for at gengive indhold over skillelinjen, og lever disse styles på linje med HTML.
- Brug medieattributten på linkelementerne, der trækker CSS-filer ind for at identificere CSS-ressourcer, der er betingede, dvs. kun nødvendige til specifikke enheder eller situationer.
- Resterende CSS-ressourcer skal indlæses asynkron, et træk, der typisk gøres ved at tilføje dem med udskudt eller asynkron JavaScript. For at være ærlig, bliver det virkelig interessant her, ikke? Dette er bestemt frontend-ingeniørens område. Hvilket er godt, hvis du er frontend-ingeniør, men de fleste af os er det ikke. Den gode nyhed er, at dette er en artikel om WordPress, og du kan eliminere eller i det mindste markant reducere antallet af render-blokerende JS- og CSS-ressourcer, der påvirker dit websted med de rigtige plugin (er).
For en anden hurtig og nem måde at booste din overordnede optimering på, er det værd at overveje, at formindske din kode. Kinsta har indbygget en kode minifikationsfunktion lige ind i MyKinsta-dashboardet, så kunderne kan aktivere automatisk CSS- og JavaScript-minifikation med et enkelt klik.
Hvis du ikke er i stand til at finde funktionen i dit dashboard, skal du blot se vores video, Sådan aktiverer du minifikation i MyKinsta.
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:
- Autoptimize + Async JavaScript (gratis)
- WP Rocket (betalt)
Som reference ser det her ud som vores testwebsted, før vi optimerer levering af CSS og JavaScript:
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 …
- Test dit ikke-optimerede websted
- Aktivér et af plugins i dette afsnit
- 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:
- Marker afkrydsningsfeltet Aktiver Asynkron JavaScript øverst.
- Vælg mellem Anvend async og Anvend udskydning i boksen Hurtige indstillinger.
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:
- Marker afkrydsningsfeltet for at optimere JavaScript-kode
- Marker afkrydsningsfeltet for at optimere CSS-kode
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:
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.
Når du installerer og aktiverer WP Rocket, skal du gå til fanen Filoptimering. Aktivér derefter disse to indstillinger:
- Optimer CSS-levering under afsnittet CSS-filer
- Indlæs udsæt JavaScript under afsnittet JavaScript-filer. Du kan eksperimentere med at slå Safe Mode til jQuery Men hvis du bemærker problemer på frontend af dit websted, vil du genaktivere sikker tilstand for jQuery, da det er det højest sandsynligt er den skyldige.
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:
Og sådan fjerner du render-blokerende ressourcer på dit WordPress-websted!
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.
Du har også mulighed for at bruge Kinsta CDN, som introducerer edge caching, muligheden for at cache statiske sider, indbygget kode minificering og meget mere. Dette er indbygget direkte i MyKinsta-dashboardet og er let tilgængeligt.
Har du yderligere spørgsmål om, hvordan du fjerner render-blokerende ressourcer i WordPress? Fortæl os det i kommentarerne!
Jon er Chief Operating Officer hos Kinsta og er dagligt involveret i Kinstas salgs-, kundeservice- og tekniske supportteam. Jon er en familiefar. Så når han ikke febrilsk trykker på tasterne på sin bærbare computer, hjælper han normalt et af sine børn med at reparere en cykel eller konfigurere Netflix til utålmodige førskolebørn.
Skriv et svar