Løs Google PageSpeed ​​Eliminer render-blokering af JavaScript og CSS i det overordnede indhold

Google PageSpeed ​​[1] testen Eliminer render-blokering af JavaScript og CSS i det overordnede indhold foreslår dig at levere dit websteds JS- og CSS-filer, efter at HTML'en er fuldt indlæst - og derfor må du ikke sætte din HTML i pause at downloade dem.


Løs gengivelsesblokerende Javascript og CSS

Google PageSpeed ​​[1] testen Eliminer render-blokering af JavaScript og CSS i det overordnede indhold foreslår dig at levere dit websteds JS- og CSS-filer, efter at HTML'en er fuldt indlæst - og derfor må du ikke sætte din HTML i pause at downloade dem.

[1] - PageSpeed ​​Insights - developers.google.com
Definition af gengivelsesblokerende script: Scripts, der indlæses, før den fulde HTML DOM er blevet parset. For eksempel scripts inkluderet i header eller inden for indhold uden nogen specifik instruktion til browsere om at udskyde scriptindlæsning indtil efter HTML-maling.

Fjern gengivelsesblokerende JavaScript og CSS i indholdet over skillelinjen: vis, hvordan du løser det

  1. Få et eksternt system til at optimere dit websted for dig
  2. Brug et CDN, der udfører alle mulige optimeringer på dine vegne, herunder de tre følgende optimeringer, der er nødvendige for at rette, eliminere gengivelsesblokerende ressourcer:
  3. Udskydning af Javascript-filer indlæses
  4. Indlæs CSS efter HTML-indlæsning
  5. Brug et WordPress-plugin

Der er mange optimeringer, der er nødvendige for at løse eliminering af renderingsblokerende ressourcer, og det kan være kedeligt at implementere dem selv - plus du bliver konstant nødt til at holde øje med nye tests inkluderet i Chrome LightHouse og  Google PageSpeed   ​​blandt andre sidehastighedstest.

Der er ingen eksisterende løsning til at fjerne gengivelsesblokerende ressourcer i htaccess-kode, da problemet er relateret til DOM, hvilket betyder webstedsindholdet og den rækkefølge, som de inkluderede ressourcer indlæses i, såsom Javascript og CSS, men ikke kun. Disse kan ikke udløses i Htaccess, men kun i HTML DOM-indholdet.

Hvis du løser disse problemer på skrivebordet, fjerner du samtidig gengivelsesblokerende ressourcer til mobil, da begge er nøjagtigt de samme!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Speed ​​Accelerator   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Udskyd Javascript-filer indlæses

For at udsætte belastningen af ​​dine JS-filer [2] kan du enten tilføje async eller defer instruktionen til dine scripts links. Async garanterer ikke, at de er indlæst i samme rækkefølge. Derfor, hvis du har flere scripts, der skal køre efter hinanden, er udskydning at foretrække for at sikre sekvensen:

[2] - Fjern gengivelsesblokerende JavaScript | PageSpeed ​​Insights | Gode ​​udviklere - developers.google.com

Indlæs CSS efter HTML-indlæsning

For at CSS skal indlæses, efter at den fulde HTML er overført, foreslår Google [3] dette stykke kode, der skal tilføjes i slutningen af ​​din HTML, f.eks. Efter footer-lukkekoden og før kropslukningstags:

[3] - Optimer CSS-levering | PageSpeed ​​Insights | Gode ​​udviklere - developers.google.com

For at optimere dit websted er det også en god ide at fjerne ubrugt CSS-kode, en operation, der kan være kedelig, hvis du ikke har viden i webdesign. Hvis du ikke har oprettet dit webstedstema selv, kan det være klogere at bruge et eksternt system til at fjerne ubrugt CSS-kode på dine sider på dine vegne, f.eks. Ezoisk spring for eksempel, den nye (og helt gratis) version af deres fantastiske websted Hastighedsaccelerator.

Bestå Google-webstedets hastighedstest!

Dette tillod mig at passere  Google PageSpeed   ​​[1] testen Eliminer render-blokering af JavaScript og CSS i det overordnede indhold (sammen med Udnyttelse af browser caching [4]) på en hjemmeside, der går op fra en score på 51 på mobilen ( Fig. 1) til 72 (fig. 2) og op fra 59 (fig. 3) til 79 på skrivebordet (fig. 4).

[4] - Fix Google PageSpeed ​​gearing browser caching i htaccess - Yoann Bierling, International SAP / Web Consultant - www.ybierling.com

Sådan elimineres renderblokerende ressourcer i WordPress

For at fjerne renderblokerende ressourcer i WordPress er det nødvendigt at installere et plugin som f.eks. JetPack.

Gå derefter til mulighederne, som du skal være administrator for, og gå til JetPack-indstillinger> Skrivning> Ydeevne og hastighed> tjek Aktiver site accelerator, fremskynde billedbelastningstider, fremskynde statiske filbelastningstider og aktiver dovet indlæsning til billeder.

Masterwebsted Oprettelse: Tilmeld dig nu!

Transform din digitale tilstedeværelse med vores omfattende webstedsoprettelseskursus - start din rejse til at blive en webekspert i dag!

Tilmeld dig her

Transform din digitale tilstedeværelse med vores omfattende webstedsoprettelseskursus - start din rejse til at blive en webekspert i dag!

Dette vil eliminere renderblokerende ressourcer i WordPress og indlæse sider hurtigere ved at lade JetPack optimere dine billeder og servere dine billeder og statiske filer (som CSS og JavaScript) fra deres globale netværk af servere.

Sådan fjerner du blokering af JavaScript og CSS på WordPress

Glem heller ikke at udskyde indlæsning af billeder uden for at bruge en doven belastningsfunktion. Mens det plejede at være svært og nødvendiggøre et eksternt bibliotek til at udskyde indlæsning af billeder uden for skærmen, er det nu muligt indbygget i HTML5!

Lazy loading af billeder: Website billeder er kun anmodet til serveren, når brugeren ruller på websiden og kan vise dem

For at gennemføre doven indlæsning af billeder på dine hjemmesider, skal du blot tilføje de værdier, der er doven til attributterne på dine website billeder, og de seneste browsere vil forstå, at disse billeder kun skal anmodes om og indlæses, hvis de vises, hvilket betyder, om brugeren ruller ned til de billedholdsholds.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy loading - Web Performance - Mozilla Developer Network

På toppen af ​​det fungerer doven indlæsning også med iframes, og er en vigtig implementering for at eliminere gengivende ressourcer fra dine websider.

Når de gengivende blokeringsressourcer vil have instrukser til at indlæse efter hovedindholdet, hvilket betyder HTML DOM, vil du allerede tjene mange point på Google Lighthouse-testen, Side Speed ​​Insights-testen eller Google Core Web Vitals.

Få et eksternt system til at optimere dit websted til dig

Ved du, at du rent faktisk kunne få alle Google PageSpeed-problemer løst på dine vegne uden megen indsats fra dit websted - undtagen at du tilmelder dig en gratis prøveversion og ændrer din DNS?

Ved hjælp af Ezoic-platformen Site Speed ​​Accelerator-teknologi vil alle de sædvanlige Google PageSpeed-problemer blive løst af deres system, som vil være mellemmanden mellem dit websted og de besøgende. De optimerer websiden for dig, før de vises for din besøgende.

I april 2021 vil Ezoic Paid Site Speed ​​Accelerator blive gratis ezoisk spring, og hjælpe hjemmesider med at nå Core Web Vitals Green Scores uden beregning!

Bliv grøn ved blot at tilmelde dig en gratis prøveversion på Ezoic-platformen og prøv det selv - de får dit websted til at nå de højeste standarder for optimering af sidehastighed inden for et par dage: gengiv næste generations webp-billeder, optimer CSS og JavaScript ved at fjerne ubrugte CSS og JS, doven indlæse billeder, ændre størrelse på billeder, cache dine websides sider, optimere skrifttyper, forbinde til alle dine inkluderede websteder og meget mere.

Intet kreditkort kræves - alt hvad du skal gøre er at registrere dig gratis og prøve det. Plus, hvis dit websted tjener penge på displayannoncer på toppen af ​​at gøre dit websted meget hurtigere, kan de også få dig til at tjene flere gange mere penge end du gør med Google AdSense ved at optimere dine annoncer med maskinlæring og avanceret kunstig intellingence.

Ofte Stillede Spørgsmål

Hvordan eliminerer man render-blokerende JavaScript og CSS i indholdet over det fold?
For at eliminere gengivelsesblokerende JavaScript og CSS til over-foldet indhold skal du sikre dig, at dit websteds JS- og CSS-filer indlæses, efter at HTML er fuldt indlæst. Dette betyder ikke at sætte en pause på HTML -indlæsningsprocessen for at downloade disse filer. Du kan udsætte JavaScript -filer med attributten Async eller udsættelse, og til CSS kan du bruge specifik kode til at indlæse den efter HTML. Et eksternt optimeringssystem som Ezoic kan også håndtere dette automatisk.
Hvordan kan webudviklere adressere Google Pagespeeds anbefaling om at eliminere gengivelsesblokerende JavaScript og CSS?
Webudviklere kan optimere deres websted ved at minificere JavaScript- og CSS-filer ved hjælp af asynkron belastning til JavaScript, indbygge kritiske CSS direkte i HTML og udsætte belastningen af ​​ikke-kritiske CSS- og JavaScript-filer. Implementering af disse strategier kan forbedre indlæsningstider og sider med siderhastighed.

Perfekt Chrome Lighthouse score: Hvad sker der?


Yoann Bierling
Om forfatteren - Yoann Bierling
Yoann Bierling er en webudgivelse og digital konsulentprofessionel, der får en global indflydelse gennem ekspertise og innovation inden for teknologier. Lidenskabelig med at styrke enkeltpersoner og organisationer til at trives i den digitale tidsalder, er han drevet til at levere ekstraordinære resultater og drive vækst gennem oprettelse af uddannelsesmæssigt indhold.

Masterwebsted Oprettelse: Tilmeld dig nu!

Transform din digitale tilstedeværelse med vores omfattende webstedsoprettelseskursus - start din rejse til at blive en webekspert i dag!

Tilmeld dig her

Transform din digitale tilstedeværelse med vores omfattende webstedsoprettelseskursus - start din rejse til at blive en webekspert i dag!




Kommentarer (8)

 2018-08-19 -  quranapk
Elsker at læse dit indhold, fortsæt med at sende - det hjalp mig med at rette fix gengivelsesblokerende CSS
 2018-09-23 -  Monica
Så det er sådan, vi gør det, det er dejligt at vide, hvordan man løser eliminering af gengivelsesblokerende ressourcer
 2018-09-25 -  Van
Fantastisk, det var præcis det, jeg ledte efter, nu er jeg klar til at fjerne gengivelsesblokerende ressourcer på mobil
 2018-11-03 -  utumikaji0
Fantastisk, nu er det tid for mig at prøve det og rette med at fjerne gengivelsesblokerende ressourcer!
 2019-01-12 -  Leo
Ved ikke, hvordan jeg skal takke dig, men det er rent geni, tak - det fungerede på WordPress for at fjerne gengivelsesblokerende ressourcer
 2019-04-21 -  Ludanulema
Hej, jeg så din artikel, og det hjalp mig med at løse problemet med at fjerne gengivelsesblokerende ressourcer på PHP, tak
 2019-06-12 -  animeg2Q
Jeg prøver det nu, tak for at du deler denne eliminering af gengivelsesblokerende ressourcer
 2019-07-02 -  Gasfackele
Det fungerede godt for mig, ikke nødvendigt at kigge længere for at fjerne gengivelsesblokerende ressourcer på HTML-webstedet

Efterlad en kommentar