Hvordan fikse gjengivende blokkering av JavaScript og CSS i WordPress

Vil du eliminere gjengivelsesblokkerende JavaScript og CSS i WordPress? Hvis du tester nettstedet ditt med Google PageSpeed-innsikt, vil du sannsynligvis se et forslag om å eliminere gjengivelsesblokkerende skript og CSS. I denne artikkelen vil vi vise deg hvordan du enkelt fikser gjengivelsesblokkerende JavaScript og CSS i WordPress for å forbedre Google PageSpeed-poengsummen din.


Hvordan fikse gjengivelsesblokkerende JavaScript og CSS i WordPress

Hva er gjengivende blokkering av JavaScript og CSS?

Hver WordPress-side har et tema og plugins som legger til JavaScript- og CSS-filer i fronten av nettstedet ditt. Disse skriptene kan øke sidens lastetid, og de kan også blokkere gjengivelse av siden.

En brukers nettleser må laste inn disse skriptene og CSS før du laster inn resten av HTML-koden på siden. Dette betyr at brukere med en tregere forbindelse må vente noen få millisekunder mer for å se siden.

Disse skriptene og stilarkene blir referert til som gjengivelsesblokkerende JavaScript og CSS.

Nettstedseiere som prøver å oppnå Google PageSpeed-poengsum på 100, må løse dette problemet for å oppnå den perfekte poengsummen.

Hva er Google PageSpeed ​​Score?

Google PageSpeed ​​Insights er et online verktøy laget av Google for å hjelpe eiere av nettstedene med å optimalisere og teste nettstedene sine. Dette verktøyet tester nettstedet ditt mot Googles retningslinjer for hastighet og tilbyr forslag for å forbedre nettstedets side lastetid.

Den viser deg en poengsum basert på antall regler nettstedet ditt passerer. De fleste nettsteder kommer et sted mellom 50-70. Noen eiere av nettstedet føler seg imidlertid tvunget til å oppnå 100 (det høyeste en side kan score).

Trenger du virkelig det perfekte “100” Google PageSpeed-resultatet?

Formålet med Google PageSpeed-innsikt er å gi deg retningslinjer for å forbedre hastigheten og ytelsen til nettstedet ditt. Du er ikke pålagt å følge disse reglene strengt.

Husk at hastighet bare er en av de mange SEO-beregningene som hjelper Google med å bestemme hvordan du rangerer nettstedet ditt. Grunnen til at hastigheten er så viktig er fordi den forbedrer brukeropplevelsen på nettstedet ditt.

En bedre brukeropplevelse krever mye mer enn bare hastighet. Du må også tilby nyttig informasjon, bedre brukergrensesnitt og engasjerende innhold med tekst, bilder og videoer.

Målet ditt bør være å lage et raskt nettsted som tilbyr god brukeropplevelse.

Vi har nylig redesignet WPBeginner, og vi fokuserte på hastighet og forbedret brukeropplevelse.

Vi anbefaler at du bruker Google Pagespeed-regler som forslag, og hvis du enkelt kan implementere dem uten å ødelegge brukeropplevelsen, er det flott. Ellers bør du strebe etter å gjøre så mye du kan og ikke bekymre deg for resten.

Når det er sagt, la oss se på hva du kan gjøre for å fikse gjengivelsesblokkerende JavaScript og CSS i WordPress.

Vi vil dekke to metoder som vil fikse gjengivelsesblokkerende JavaScript og CSS i WordPress. Du kan velge den som fungerer best for nettstedet ditt.

1. Fix Render Blocking Scripts and CSS med Autoptimize

Denne metoden er enklere og anbefales for de fleste brukere.

Det første du trenger å gjøre er å installere og aktivere Autoptimize plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Ved aktivering må du besøke Innstillinger »Optimaliser side for å konfigurere plugin-innstillingene.

Optimaliser innstillingene

Du kan starte med å merke av i ruten ved siden av JavaScript-alternativer og CSS-alternativer og deretter klikke på lagre endringsknappen.

Du kan nå teste nettstedet ditt ved hjelp av PageSpeed-verktøyet. Hvis det fremdeles er gjengivende blokkerende skript, må du komme tilbake til innstillingssiden for plugin og klikke på “Vis avanserte innstillinger” -knappen øverst.

Avanserte JavaScript-alternativer

Her kan du la plugin inkludere inline JS og fjerne skript som er ekskludert som standard, som seal.js eller jquery.js.

Deretter blar du ned til CSS-alternativet og lar plugin samle inline CSS.

Klikk på knappen Lagre endringer og Tøm hurtigbuffer for å lagre endringene og tømme plugin-hurtigbufferen.

Når du er ferdig, kan du gå videre til å sjekke nettstedet ditt igjen med PageSpeed-verktøyet.

Forsikre deg om at du tester nettstedet ditt grundig for å se at ingenting er ødelagt ved å optimalisere JavaScripts eller CSS.

Hvordan virker det?

Optimaliser tilslagene alle innlagte JavaScript og CSS automatisk. Etter det oppretter den minifiserte CSS- og JavaScripts-filer og serverer hurtigbufrede kopier til nettstedet ditt som async eller utsatt.

Dette lar deg løse problemet med blokkering av skript og stiler for gjengivelse. Husk imidlertid at det også kan påvirke ytelsen eller utseendet til nettstedet ditt.

2. Løs Render Blocking JavaScript ved å bruke W3 Total Cache

Denne metoden krever litt mer arbeid og anbefales for brukere som allerede bruker W3 Total Cache-plugin på nettstedet deres.

Først må du installere og aktivere W3 Total Cache-plugin. Hvis du trenger hjelp, kan du se vår guide for hvordan du installerer og installerer W3 Total Cache for nybegynnere.

Deretter må du besøke Ytelse »Generelle innstillinger side og bla ned til Minimer-seksjonen.

W3 Total Cache enable minify

Først må du krysse av for “Aktiver” ved siden av Minify-alternativet, og deretter velge “Manuell” for alternativet Minify-modus.

Klikk på Lagre alle innstillinger-knappen for å lagre innstillingene.

Deretter må du legge til skriptene og CSS som du vil minimere.

Du kan få nettadressene til alle skriptene og stilarkene som blir blokkert fra Google PageSpeed ​​Insights-verktøyet..

Under forslagene der det står: ‘Eliminer gjengivelsesblokkerende JavaScript og CSS i innholdet over folden’, klikk på ‘Vis hvordan du fikser’. Den vil vise deg listen over skript og stilark.

Få JavaScript- og stilark-URL-er fra Google PageSpeed-verktøyet

Ta musen over til et skript, så viser den hele URLen. Du kan velge denne URL-en og deretter bruke tastaturets CTRL + C (Kommando + C på Mac) -tastene for å kopiere URL-en.

Gå nå over til ditt WordPress admin-område og gå til Ytelse »Minify side.

Først må du legge til JavaScript-filer som du vil bli minifisert. Bla ned til JS-delen, og sett deretter innleggstypen under ‘Operasjoner i områder’ til ‘Ikke-blokkerende async’ for delen.

Legg til skript for å minifisere

Deretter må du klikke på ‘Legg til skript’ -knappen og deretter begynne å legge til skriptadresser som du kopierte fra Google PageSpeed-verktøyet.

Når du er ferdig, blar du ned til CSS-delen og klikker deretter på knappen “Legg til et stilark”. Begynn nå å legge til stilark-URL-er du kopierte fra Google PageSpeed-verktøyet.

Legg til stilark for å minimere

Klikk nå på “Lagre innstillinger og rens hurtigbuffer” -knappen for å lagre innstillingene dine.

Besøk Google PageSpeed-verktøyet og test nettstedet ditt på nytt.

Forsikre deg om at du også tester nettstedet ditt grundig for å se at alt fungerer bra.

Feilsøking

Avhengig av hvordan plugins og WordPress-temaene dine bruker JavaScript og CSS, kan det være ganske utfordrende å løse alle gjengivelsesblokkerende JavaScript- og CSS-problemer..

Selv om verktøyene ovenfor kan hjelpe, kan programtilleggene dine trenge visse skript på et annet prioritert nivå for å fungere ordentlig. I så fall kan de ovennevnte løsningene ødelegge pluginsene dine, eller de kan oppføre seg uventet.

Google kan fremdeles vise deg visse problemer som å optimalisere CSS-levering for innholdet over brettet. Autoptimize lar deg fikse det ved å legge til inline CSS som kreves for å vise brettområdet over temaet ditt.

Det kan imidlertid være ganske vanskelig å finne ut hvilken CSS-kode du trenger for å vise over brettinnholdet.

Det er alt, vi håper denne artikkelen hjalp deg med å lære å fikse gjengivelsesblokkerende JavaScript og CSS i WordPress. Det kan også være lurt å se vår ultimate guide øke WordPress-hastigheten og ytelsen for nybegynnere.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map