I dagens konkurranseutsatte digitale landskap, betyr nettstedhastighet mye når det kommer til suksessen til en nettbedrift. Søkemotorgiganter som Google prioriterer hurtiglastende nettsteder, og erkjenner nødvendigheten av å tilby en sømløs brukeropplevelse.
Ifølge studier øker raskere sideinnlastinger brukerengasjement og konverteringsfrekvens. Faktisk kan en forsinkelse på ett sekund i tiden det tar for en side å laste, føre til en nedgang på 7 % i klientkonverteringer. Gitt dette er det åpenbart at nettstedeiere bør legge et høyt fokus på nettstedets ytelse.
Google tar nettstedets ytelse på alvor og tar det i betraktning når de bestemmer søkeresultater. Følgelig er det mer sannsynlig at nettsteder som lastes raskt vises først i søkeresultatene, trekker flere besøkende og til slutt genererer mer inntekter. Men hvordan kan du oppfylle Googles krav og laste inn nettstedet ditt raskt?
Du kvitter deg med ressurser som kan gjengi-blokkere et nettsteds lastetid, for eksempel CSS- og JavaScript-filer.
Å fjerne disse ressursene kan imidlertid være utfordrende og tidkrevende, spesielt for personer som mangler tekniske ferdigheter.
I denne artikkelen vil vi forklare gjengivelsesblokkerende ressurser og hvordan de påvirker nettstedets ytelse og gi en trinn-for-trinn-guide for å eliminere dem fra WordPress-nettstedet ditt. Så la oss begynne å optimalisere nettstedet ditt for hastighet og suksess!
Innholdsfortegnelse
Gjengi blokkeringsressurser
Enhver ressurs som må lastes inn før en nettside kan vises, anses som en gjengivelsesblokkerende ressurs. Disse ressursene påvirker et nettsteds ytelse og effektivitet og forlenger tiden det tar å laste en side.
En CSS- eller JavaScript-fil kan betraktes som en gjengivelsesblokkerende ressurs hvis den filen blokkerer gjengivelsen av en nettside. Men betydningen av å laste inn siden kan variere basert på deres umiddelbare nødvendighet.
Når en bruker går inn på en side, behandler nettleseren først HTML-koden for å vise innholdet på den synlige delen av nettsiden. Når nettleseren møter CSS- og JavaScript-filer, laster den ned og behandler dem også. Hvis ressursfilene inneholder tilleggskoder eller ubrukte deler, tar det lengre tid å laste nettsiden.
Typer gjengivelsesblokkerende ressurser
Generelt anses ressursfiler som CSS og JavaScript som gjengivelsesblokkerende ressurser i WordPress. Nettleseren ser på disse ressursene som kritiske og krever lasting før siden kan vises. Men det er ikke det; det er flere ressursfiler som blokkerer gjengivelsen av en nettside.
Her er en liste over gjengivelsesblokkerende ressurser:
CSS-stilark
En nettsides design og presentasjon bestemmes av CSS-stilark. En CSS-fil vil bli sett på som en gjengivelsesblokkerende ressurs hvis den plasseres i
-delen av en HTML-side.JavaScript-filer i
-delenJavaScript er et skriptspråk som kan brukes til å gi en nettside med dynamisk oppførsel og interaksjon. En JavaScript-fil vil bli ansett som en gjengivelsesblokkerende ressurs hvis den plasseres i en HTML-sides
-seksjon.Skrifter
Tekster på en nettside vises med forskjellige fonter. Fonter betraktes også som en gjengivelsesblokkerende ressurs hvis de er inkludert i en HTML-sides
-seksjon og lastes inn fra en lokal server eller et CDN.HTML-import
Dette er den eldre HTML-funksjonen som gjør det mulig for nettsider å inkludere elementer fra andre HTML-dokumenter. Selv om HTML-importer ikke brukes så ofte lenger, kan de fortsatt ses på enkelte eldre nettsteder. HMTL-importer regnes også som gjengivelsesblokkerende ressurser.
Hvorfor er ressurser for gjengivelsesblokkering forferdelig for nettsider
Hvis WordPress-nettstedet ditt inkluderer gjengivelsesblokkerende ressurser, vil du falle bak i søkeresultatene. Selv om du for øyeblikket er i frontlinjen, vil nettsteder med bedre resultater til slutt overmanne deg.
Nettsteder med gjengivelsesblokkerende ressurser vil laste inn ekstra filer mens nettstedet gjengis. Før de ser nettstedet, må brukerne vente mens filene behandles. Følgende ytelsesindikatorer for nettsteder vil bli påvirket av disse ressursene:
- Største innholdsrike maling: Dette bestemmer hvor lang tid det vil ta å laste inn sidens primære innhold.
- First Contentful Paint: Tiden det tar for en nettleser å produsere det første dokumentet Object Model (DOM)-innholdet på nettstedet ditt.
- Total blokkeringstid: Dette evaluerer hvor mye tid det tar fra Frist Contentful Pianto til hvor lang tid det tar før en side blir helt interaktiv.
Selv om gjengivelsesblokkerende ressurser ikke er nødvendige for lasting, kan de hindre gjengivelsen av et nettsted eller en nettside. Derfor er det viktig å fjerne slike ressurser for å unngå å gjøre det vanskelig for brukere å navigere på nettstedet ditt.
La oss se nærmere på hvorfor gjengivelsesblokkering er et alvorlig problem for nettsidene:
Langsom sideinnlastingstid
Gjengivelsesblokkerende ressurser vil føre til at nettstedet lastes saktere, noe som er en av dens viktigste ulemper. En nettside lastes sakte når den inneholder ressursfiler med unødvendige elementer. Derfor vil det påvirke søkeresultatenes utseende, lavere brukerengasjement og høyere fluktfrekvens.
Blokkert gjengivelse
Ofte slutter en nettleser å gjengi en nettside når den kommer over gjengivelsesblokkerende ressurser fordi den vil at de gjengivelsesblokkerende ressursene skal hentes og behandles.
Til syvende og sist vil brukere bli irriterte og forlate nettstedet ditt på grunn av sidens manglende respons eller treg gjengivelse.
Videre, hvis en ressurs laster sakte, kan nettleseren også gi opp og slutte å forsøke å laste den. Dette kan føre til ødelagte sider eller manglende informasjon.
Redusert brukerengasjement
Når gjengivelsesforsinkelser oppstår, går brukeropplevelsen ned med det. Brukere forventer alltid raske lastetider, og de slutter vanligvis et nettsted som laster sakte. Så de ender opp på et nettsted som laster raskere.
Saktelastende nettsteder har en skadelig effekt på forbrukertilfredshet og merkevareomdømme. Med det reduseres også nettstedstrafikken og konverteringsfrekvensen drastisk.
Det er forskjellige tilnærminger for å fjerne gjengivelsesblokkerende ressurser fra WordPress. Vi vil imidlertid introdusere deg for manuelle metoder for å eliminere gjengivelsesblokkerende ressurser. Deretter viser vi hvordan du kan gjøre det ved å bruke noen av de anerkjente pluginene i WordPress.
Eliminer gjengivelsesblokkerende ressurser manuelt
Du kan unngå å gjøre det manuelt, så ikke bli frustrert. Men å gå gjennom denne delen vil helt sikkert hjelpe deg med å lære noen WordPress-ytelsesoptimaliseringsteknikker. Men først, se på denne videoen for å gjøre deg kjent med de diskuterte begrepene.
#1. Identifiser gjengivelsesblokkerende ressurser
Du må først finne ut de gjengivelsesblokkerende ressursene før du fjerner dem fra nettstedet ditt. Bare følg disse trinnene for å finne ut de gjengivelsesblokkerende ressursene på WordPress-nettstedet ditt:
- Gå til Google PageSpeed Insights.
- Skriv inn nettadressen til nettstedet ditt i søkefeltet.
- Klikk på «Analyser»-knappen for å få innsikt på nettstedet ditt.
- Rull ned og sjekk seksjonen for muligheter.
- Hvis siden din har noen gjengivelsesblokkerende ressurser, vil de bli oppført.
#2. Bruk av «Defer» og «Async»-attributter for JS
Etter å ha identifisert de gjengivelsesblokkerende ressursene, er det på tide å eliminere dem for bedre nettstedytelse. Fra forskjellige metoder, bruk av «utsette» eller «asynkronisering»-metoden for JavaScript-filer er en tilnærming for å gjøre dette.
Når det kommer til «defer»-attributtet, lar det nettleseren laste ned JS-filen og deretter kjøre den. Men det skjer når siden er ferdig lastet og er klar til å vise innholdet.
Så resten av elementene på siden kan lastes parallelt med JavaScript-filen. Som et resultat reduseres tiden det tar å laste inn siden.
En annen tilnærming er «async»-attributtet som lar nettleseren laste ned JS-filen når den er tilgjengelig. Dette skjer uten å blokkere noen andre elementer på siden. Følgelig kan JS-filen lastes parallelt med andre elementer, og påskynde lasteprosessen.
Du kan kvitte deg med gjengivelsesblokkerende ressurser og øke hastigheten til nettstedet ditt ved å bruke enten «defer»- eller «async»-attributtet.
#3. Bruk av «Media»-attributt for betinget CSS
Å bruke «media»-attributtene for betinget CSS er en annen tilnærming til å eliminere gjengivelsesblokkerende ressurser. Med dette attributtet kan du definere unike CSS-filer for stasjonære og mobile nettlesere.
Du kan for eksempel inkludere en CSS-fil som er dedikert til stasjonære enheter og en annen CSS-fil som er skreddersydd for mobile enheter. Du kan indikere til nettleseren at CSS-filen for skrivebordet vil lastes når den åpnes via en stasjonær enhet.
På samme måte bør den mobile CSS-en bare lastes når den er tilgjengelig via mobile enheter. Ved å laste inn enhetsspesifikk CSS for utpekte enheter, kan du redusere gjengivelsesblokkerende ressurser og øke innlastingstiden til nettstedet ditt.
#4. Utsettelse av ikke-kritisk CSS
I tillegg til å bruke «media»-attributtet for betinget CSS, prøv å utsette den ikke-kritiske CSS. For denne tilnærmingen må du først og fremst laste den essensielle CSS-en. Deretter laster du inn resten av CSS-en mens siden lastes.
For eksempel kan du ha en enorm CSS-fil som inneholder alle stilene for nettstedet ditt. Men bare en liten del av den CSS-filen kreves for å vise innholdet på den synlige delen av nettstedet ditt. Innholdet på den synlige delen av nettsiden kan vises raskt ved å forsinke den ikke-kritiske CSS-en, og den gjenværende CSS-en kan lastes inn når siden lastes.
#5. Fjerner ubrukt CSS og JS
Å fjerne unødvendige CSS- og JavaScript-filer er en annen teknikk for å fjerne gjengivelsesblokkerende ressurser. Disse filene kan gjøre siden din tyngre og øke innlastingstiden.
Ved å fjerne ubrukte CSS- og JS-filer kan du redusere antall gjengivelsesblokkerende ressurser. Du kan enkelt bruke verktøy som PurifyCSS eller UnusedCSS for å fjerne ubrukte CSS-filer fra nettstedet ditt.
#6. Lokalt laster egendefinerte skrifter
Egendefinerte skrifter kan også inkludere ressurser som begrenser gjengivelsen. I stedet for å være avhengig av eksterne kilder som Google Fonts, bør du lokalt laste inn dine egne tilpassede skrifter for å unngå å trenge disse ressursene.
Du kan garantere at de tilpassede skriftene dine lastes raskt og effektivt uten å redusere ytelsen til nettstedet ditt ved å laste dem lokalt. Dette kan føre til en raskere, mer responsiv nettside og forbedre brukeropplevelsen.
#7. Forminsker JS og CSS
Til slutt, minifisering av CSS- og JavaScript-filene kan hjelpe nettstedet ditt til å fungere bedre. Minifisering fjerner unødvendige tegn, som mellomrom og kommentarer, fra koden din. Dermed reduseres størrelsen på filene dine, noe som øker lastingen.
For å forminske filene dine kan du bruke verktøy som MinifyJS eller CSSNano. Ta vare på en kopi av de originale filene dine i tilfelle du trenger å gjøre endringer i dem.
Eliminer gjengivelsesblokkerende ressurser med plugin
I denne delen vil vi vise deg hvordan du kan eliminere gjengivelsesblokkerende ressurser ved å bruke WordPress-plugins. Disse pluginene er kjent i WordPress og kan raskt fjerne gjengivelsesblokkerende ressurser. Det beste er at du til og med kan forbedre nettstedets ytelse uten spesialkompetanse.
#1. W3 Total Cache
W3 Total Cache (W3TC) forbedrer hele brukeropplevelsen til et WordPress-nettsted. Det eliminerer gjengivelsesblokkerende ressurser og forbedrer SEO, kjernenettverk og mer. Programtillegget bruker funksjoner som nettverksintegrasjon for innholdslevering for å implementere beste praksis.
For å eliminere gjengivelsesblokkerende ressurser, installer og aktiver W3 Total Cache-plugin og følg disse trinnene:
- Gå til ytelsesdelen i WordPress-dashbordet og klikk på Generelle innstillinger.
- Under Minify-overskriften aktiverer du Minify og velger Manuell som minify-modus.
- Klikk nå Lagre alle innstillinger.
- Samle deretter alle gjengivelsesblokkerende Javascript- og CSS-filer via Google PageSpeed Insights.
- Etterfulgt av å gå tilbake til Ytelse > Forminsk.
- Nå, i js-delen, klikk først Aktiver for JS Minify-innstillingene. Deretter velger du Ikke-blokkerende under delen Operasjoner i områder ved å bruke «utsett»-typen for Før -taggen.
- Gå nå til JS-filbehandling, velg temaet du har aktivert, og klikk på Legg til skript-knappen. Saml nå Javascript-URLene som har problemer skannet av Google PageSpeed Insights. Lim inn URL-ene i det angitte feltet som angitt i bildet.
- Rull nå litt ned til CSS-delen. Velg temaet ditt fra rullegardinmenyen i CSS-filbehandlingsdelen og klikk på Legg til et stilark. Nå følger du ganske enkelt det forrige trinnet og kopierer og limer inn nettadressene som er samlet inn fra PageSpeed Insight som har problemer.
- Siden alle innstillingene er konfigurert, klikker du på Save Settings & Purge-knappen for å utføre.
#2. JCH Optimaliser
JCH Optimize forbedrer WordPress-nettstedets ytelse målt ved Google PageSpeed-innsikt. Programtillegget forbedrer First contentful paint (FCP), Largest Contentful maling (LCP), Speed Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) og mer.
Dermed blir den generelle brukeropplevelsen og nettstedets ytelse betydelig forbedret.
Etter å ha installert og aktivert JCH Optimize, følg disse prosessene for å eliminere gjengivelsesblokkerende ressurser:
- Gå til Innstillinger> JCH Optimaliser, rull ned litt og gå til innstillingene for grunnleggende funksjoner.
- Aktiver Optimaliser CSS-levering for å eliminere blokkering av CSS-gjengivelse. Denne funksjonen bestemmer automatisk den essensielle CSS-en som kreves for å vise innholdet over den synlige delen på hver nettside. I tillegg legger den den inn i -delen av hver sides HTML-innhold.
- Forhåndsinnlastingslenken brukes deretter til å laste de sammenkoblede CSS-filene asynkront.
- For å fjerne Javascript-gjengivelsesblokkerende ressurser, må du inkludere async- eller defer-attributtene til