Sådan fjerner du gengivelsesblokerende ressourcer i WordPress [Plugins or Manually]

I dagens konkurrenceprægede digitale landskab betyder hjemmesidehastighed meget, når det kommer til succesen for en online-forretning. Søgemaskinegiganter som Google prioriterer websteder med hurtig indlæsning, idet de anerkender nødvendigheden af ​​at give en problemfri brugeroplevelse.

Ifølge undersøgelser øger hurtigere sideindlæsninger brugerengagement og konverteringsrater. Faktisk kan en forsinkelse på et sekund i den tid, det tager for en side at indlæse, forårsage et fald på 7 % i klientkonverteringer. I lyset af dette er det indlysende, at webstedsejere bør lægge et højt fokus på webstedets ydeevne.

Google tager hjemmesidens ydeevne seriøst og tager det i betragtning, når de bestemmer søgeresultater. Derfor er der større sandsynlighed for, at websteder, der indlæses hurtigt, vises først i søgeresultaterne, trækker flere besøgende og i sidste ende genererer mere omsætning. Men hvordan kan du opfylde Googles krav og indlæse din hjemmeside hurtigt?

Du slipper for ressourcer, der kan gengive-blokere et websteds indlæsningstid, såsom CSS- og JavaScript-filer.

Det kan dog være udfordrende og tidskrævende at fjerne disse ressourcer, især for personer, der mangler tekniske færdigheder.

I denne artikel vil vi forklare gengivelsesblokerende ressourcer, og hvordan de påvirker hjemmesidens ydeevne og give en trin-for-trin guide til at fjerne dem fra dit WordPress-websted. Så lad os begynde at optimere dit websted for hastighed og succes!

Gengiv blokerende ressourcer

Enhver ressource, der skal indlæses, før en webside kan vises, betragtes som en gengivelsesblokerende ressource. Disse ressourcer påvirker et websteds ydeevne og effektivitet og forlænger den tid, det tager at indlæse en side.

En CSS- eller JavaScript-fil kan betragtes som en gengivelsesblokerende ressource, hvis denne fil blokerer gengivelsen af ​​en webside. Men betydningen af ​​at indlæse siden kan variere baseret på deres umiddelbare nødvendighed.

Når en bruger går ind på en side, behandler browseren først HTML-koden for at vise dens indhold over skillelinjen. Når browseren støder på CSS- og JavaScript-filer, downloader og behandler den også dem. Hvis ressourcefilerne indeholder yderligere koder eller ubrugte dele, tager det længere tid at indlæse websiden.

Typer af gengivelsesblokerende ressourcer

Generelt betragtes ressourcefiler som CSS og JavaScript som gengivelsesblokerende ressourcer i WordPress. Browseren ser disse ressourcer som kritiske og kræver indlæsning, før siden kan vises. Men det er det ikke; der er flere ressourcefiler, der blokerer gengivelsen af ​​en webside.

Her er en liste over gengivelsesblokerende ressourcer:

CSS Stylesheets

En websides design og præsentation bestemmes af CSS-stylesheets. En CSS-fil vil blive betragtet som en gengivelsesblokerende ressource, hvis den placeres i -sektionen på en HTML-side.

JavaScript-filer i -sektionen

JavaScript er et scriptsprog, der kan bruges til at give en webside dynamisk adfærd og interaktion. En JavaScript-fil vil blive betragtet som en gengivelsesblokerende ressource, hvis den placeres i en HTML-sides -sektion.

Skrifttyper

Tekster på en webside vises med forskellige skrifttyper. Skrifttyper betragtes også som en gengivelsesblokerende ressource, hvis de er inkluderet i en HTML-sides -sektion og indlæses fra en lokal server eller et CDN.

HTML-import

Disse er den ældre HTML-funktion, der gør det muligt for websider at inkludere elementer fra andre HTML-dokumenter. Selvom HTML-importer ikke bruges så ofte længere, kan de stadig ses på visse ældre websteder. HMTL-import betragtes også som gengivelsesblokerende ressourcer.

Hvorfor er gengivelsesblokerende ressourcer forfærdelige for websider

Hvis dit WordPress-websted indeholder gengivelsesblokerende ressourcer, kommer du bagud i søgeresultaterne. Selvom du i øjeblikket er i frontlinjen, vil websteder med bedre resultater til sidst overmande dig.

Websteder med gengivelsesblokerende ressourcer vil indlæse ekstra filer, mens webstedet gengives. Før de kan se webstedet, skal brugerne vente, mens filerne behandles. Følgende præstationsindikatorer for websteder vil blive påvirket af disse ressourcer:

• Største indholdsfulde maling: Dette bestemmer, hvor lang tid det vil tage at indlæse sidens primære indhold.
• First Contentful Paint: Den tid det tager for en browser at producere det første dokument Object Model (DOM) indhold på dit websted.
• Samlet blokeringstid: Dette evaluerer, hvor meget tid det tager fra Frist Contentful Pianto til hvor lang tid det tager for en side at blive fuldstændig interaktiv.

Selvom gengivelsesblokerende ressourcer ikke er nødvendige for at indlæse, kan de hæmme gengivelsen af ​​et websted eller en webside. Derfor er det vigtigt at fjerne sådanne ressourcer for at forhindre, at det bliver svært for brugerne at navigere på dit websted.

Lad os se nærmere på, hvorfor gengivelsesblokering er et alvorligt problem for websiderne:

Langsom sideindlæsningstid

Gengivelsesblokerende ressourcer vil få webstedet til at indlæse langsommere, hvilket er en af ​​dets største ulemper. En webside indlæses langsomt, når den indeholder ressourcefiler med unødvendige elementer. Derfor vil det påvirke søgeresultaternes udseende, lavere brugerengagement og højere afvisningsprocenten.

Blokeret gengivelse

Ofte stopper en browser med at gengive en webside, når den støder på gengivelsesblokerende ressourcer, fordi den ønsker, at de gengivelsesblokerende ressourcer skal hentes og behandles.

I sidste ende vil brugere blive irriterede og forlade dit websted på grund af sidens manglende respons eller langsom gengivelse.

Desuden, hvis en ressource indlæses langsomt, kan browseren også give op og stoppe forsøget på at indlæse den. Dette kan føre til ødelagte sider eller manglende information.

Nedsat brugerengagement

Når der opstår forsinkelser i gengivelsen, går brugeroplevelsen ned med det. Brugere forventer altid hurtige indlæsningstider, og de forlader normalt et websted med langsom indlæsning. Så de ender på et websted, der indlæses hurtigere.

Langsomt indlæsningssider har en skadelig effekt på forbrugertilfredsheden og brandets omdømme. Dermed falder websitetrafikken og konverteringsraten også drastisk.

Der er forskellige tilgange til at fjerne gengivelsesblokerende ressourcer fra WordPress. Vi vil dog introducere dig til manuelle metoder til at eliminere gengivelsesblokerende ressourcer. Så viser vi, hvordan du kan gøre det ved hjælp af nogle af de kendte plugins i WordPress.

Fjern gengivelsesblokerende ressourcer manuelt

Du kan undgå at gøre det manuelt, så bliv ikke frustreret. Men at gå gennem dette afsnit vil helt sikkert hjælpe dig med at lære nogle WordPress-præstationsoptimeringsteknikker. Men først, se på denne video for at gøre dig bekendt med de diskuterede udtryk.

#1. Identificer gengivelsesblokerende ressourcer

Du skal først finde ud af de gengivelsesblokerende ressourcer, før du fjerner dem fra dit websted. Du skal blot følge disse trin for at finde ud af de gengivelsesblokerende ressourcer på dit WordPress-websted:

• Gå til Google PageSpeed ​​Insights.
• Indtast webadressen på dit websted i søgefeltet.
• Klik på knappen “Analyser” for at få indsigt i dit websted.

• Rul ned og tjek sektionen Muligheder.
• Hvis din side har nogen gengivelsesblokerende ressourcer, vil de blive vist.

#2. Brug af “Defer” & “Async”-attributter til JS

Efter at have identificeret de gengivelsesblokerende ressourcer, er det tid til at fjerne dem for at få en bedre webstedsydelse. Fra forskellige metoder er brugen af ​​”defer”- eller “async”-metoden til JavaScript-filer en fremgangsmåde til at gøre dette.

Når det kommer til “defer”-attributten, giver det browseren mulighed for at downloade JS-filen og derefter udføre den. Men det sker, når siden er færdig med at indlæse og er klar til at vise sit indhold.

Så resten af ​​elementerne på siden kan indlæses parallelt med JavaScript-filen. Som følge heraf reduceres den tid, det tager at indlæse siden.

En anden tilgang er “async”-attributten, som gør det muligt for browseren at downloade JS-filen, når den er tilgængelig. Dette sker uden at blokere andre elementer på siden. Som følge heraf kan JS-filen indlæses parallelt med andre elementer, hvilket fremskynder indlæsningsprocessen.

Du kan slippe af med gengivelsesblokerende ressourcer og øge dit websteds hastighed ved at bruge enten “defer” eller “async” attributten.

#3. Brug af “Media”-attribut for betinget CSS

Brug af “medie”-attributterne til betinget CSS er en anden tilgang til at eliminere gengivelsesblokerende ressourcer. Med denne attribut kan du definere unikke CSS-filer til desktop- og mobilbrowsere.

For eksempel kan du inkludere en CSS-fil, der er dedikeret til desktop-enheder, og en anden CSS-fil, der er skræddersyet til mobile enheder. Du kan indikere over for browseren, at desktop-CSS-filen indlæses, når den tilgås via en stationær enhed.

På samme måde bør den mobile CSS kun indlæses, når den tilgås via mobile enheder. Ved at indlæse enhedsspecifik CSS for udpegede enheder kan du reducere de gengivelsesblokerende ressourcer og øge indlæsningstiden på dit websted.

#4. Udskyder ikke-kritisk CSS

Ud over at bruge “medie”-attributten til betinget CSS, kan du prøve at udsætte den ikke-kritiske CSS. For denne tilgang skal du primært indlæse den væsentlige CSS. Dernæst indlæser du resten af ​​CSS’en, mens siden indlæses.

For eksempel kan du have en enorm CSS-fil, der indeholder alle stilene til din hjemmeside. Men kun en lille del af den CSS-fil er påkrævet for at vise indholdet på området over skillelinjen på dit websted. Indholdet over skillelinjen kan vises hurtigt ved at forsinke den ikke-kritiske CSS, og den resterende CSS kan indlæses, når siden indlæses.

#5. Fjerner ubrugte CSS & JS

Fjernelse af unødvendige CSS- og JavaScript-filer er en anden teknik til at fjerne gengivelsesblokerende ressourcer. Disse filer kan gøre din side tungere og øge indlæsningstiden.

Ved at fjerne ubrugte CSS- og JS-filer kan du reducere antallet af gengivelsesblokerende ressourcer. Du kan nemt bruge værktøjer som PurifyCSS eller UnusedCSS til at fjerne enhver ubrugt CSS-fil fra dit websted.

#6. Lokalt indlæsning af brugerdefinerede skrifttyper

Tilpassede skrifttyper kan også indeholde ressourcer, der begrænser gengivelsen. I stedet for at være afhængig af eksterne kilder som Google Fonts, bør du lokalt indlæse dine egne tilpassede skrifttyper for at undgå at have brug for disse ressourcer.

Du kan garantere, at dine brugerdefinerede skrifttyper indlæses hurtigt og effektivt uden at bremse ydeevnen på dit websted ved at indlæse dem lokalt. Dette kan føre til en hurtigere og mere responsiv hjemmeside og forbedre brugeroplevelsen.

#7. Formindskelse af JS og CSS

Endelig kan minificering af dine CSS- og JavaScript-filer hjælpe dit websted med at fungere bedre. Minifikation fjerner unødvendige tegn, såsom mellemrum og kommentarer, fra din kode. Dine filers størrelse er således reduceret, hvilket fremskynder indlæsningen.

For at formindske dine filer kan du bruge værktøjer som MinifyJS eller CSSNano. Behold en kopi af dine originale filer, hvis du nogensinde har brug for at foretage ændringer i dem.

Fjern gengivelsesblokerende ressourcer med plugin

I dette afsnit viser vi dig, hvordan du kan fjerne gengivelsesblokerende ressourcer ved hjælp af WordPress-plugins. Disse plugins er kendte i WordPress og kan hurtigt fjerne gengivelsesblokerende ressourcer. Det bedste er, at du endda kan forbedre dit websteds ydeevne uden nogen specialiseret ekspertise.

#1. W3 Total Cache

W3 Total Cache (W3TC) forbedrer hele brugeroplevelsen på et WordPress-websted. Det eliminerer gengivelsesblokerende ressourcer og forbedrer SEO, Vitale kernewebområder og mere. Pluginnet bruger funktioner som netværksintegration til indholdslevering til at implementere bedste praksis.

For at fjerne gengivelsesblokerende ressourcer skal du installere og aktivere W3 Total Cache plugin og følge disse trin:

• Gå til afsnittet Ydelse i WordPress-dashboardet, og klik på Generelle indstillinger.
• Under overskriften Minify skal du aktivere Minify og vælge Manuel som minify-tilstand.
• Klik nu på Gem alle indstillinger.

• Saml derefter alle de gengivelsesblokerende Javascript- og CSS-filer via Google PageSpeed ​​Insights.
• Efterfulgt af at gå tilbage til Ydeevne > Formindsk.
• Nu, i js-sektionen, skal du først klikke på Aktiver for JS Minify-indstillingerne. Derefter skal du under sektionen Operationer i områder vælge Ikke-blokerende ved at bruge typen “defer” for Før -tagget.
• Gå nu til JS-filhåndtering, vælg det tema, du har aktiveret, og klik på knappen Tilføj script. Indsaml nu de Javascript-URL’er, der har problemer scannet af Google PageSpeed ​​Insights. Indsæt URL’erne i det angivne felt som angivet på billedet.

• Rul nu lidt ned til CSS-sektionen. Vælg dit tema fra rullemenuen i afsnittet CSS-filhåndtering, og klik på Tilføj et typografiark. Nu skal du blot følge det forrige trin og kopiere og indsætte de URL’er, der er indsamlet fra PageSpeed ​​Insight, der har problemer.

• Da alle indstillingerne er konfigureret, skal du klikke på knappen Gem indstillinger og rensning for at udføre.

#2. JCH Optimize

JCH Optimize forbedrer WordPress-webstedets ydeevne målt ved Google PageSpeed-indsigt. Pluginnet forbedrer First contentful paint (FCP), Largest Contentful paint (LCP), Speed ​​Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) og mere.

Således bliver den overordnede brugeroplevelse og hjemmesidens ydeevne væsentligt forbedret.

Efter installation og aktivering af JCH Optimize skal du følge disse processer for at eliminere gengivelsesblokerende ressourcer:

• Gå til Indstillinger>JCH Optimize, rul lidt ned og gå til indstillingerne for grundlæggende funktioner.

• Aktiver Optimize CSS-leveringen for at eliminere CSS-gengivelsesblokering. Denne funktion bestemmer automatisk den nødvendige CSS, der kræves for at vise indholdet over skillelinjen på hver webside. Derudover indlejrer det det i -sektionen af ​​hver sides HTML-indhold.

• Preload-linket bruges derefter til at indlæse de sammenkædede CSS-filer asynkront.
• For at fjerne Javascript-gengivelsesblokerende ressourcer skal du inkludere async- eller defer-attributterne til