Fiks Google PageSpeed ​​Eliminér gjengjeldende blokkering av JavaScript og CSS i det overordnede innholdet

Løs gjengivelsesblokkerende Javascript og CSS

Google PageSpeed ​​[1] -testen Eliminér gjengivelse av blokkering av JavaScript og CSS i det overordnede innholdet foreslår at du leverer webområdets JS- og CSS-filer etter at HTML-filen er fulladet - og derfor må du ikke sette HTML-koden på pause å laste dem ned.

Render-blokkerende skriptdefinisjon: Skript som lastes inn før hele HTML DOM har blitt analysert. For eksempel skript som er inkludert i topptekst eller i innhold, uten noen spesiell instruksjon for nettlesere om å utsette skriptinnlasting til etter HTML-maling.

Fjern gjengivelsesblokkerende JavaScript og CSS i innholdet over skillelinjen: vis hvordan du løser det

1. Få et eksternt system til å optimalisere nettstedet ditt for deg
   
2. Bruk et CDN som vil utføre alle mulige optimaliseringer på dine vegne, inkludert de tre følgende optimaliseringene som er nødvendige for å fikse eliminere gjengivelsesblokkerende ressurser:
   
3. Utsett Javascript-filer lastes inn
   
4. Last inn CSS etter HTML-innlasting
   
5. Bruk et WordPress-plugin
   

Det er mange optimaliseringer som er nødvendige for å fikse eliminering av renderingsblokkerende ressurser, og det kan være kjedelig å implementere dem selv - pluss at du hele tiden må se opp for nye tester som er inkludert i Chrome LightHouse og Google PageSpeed, blant andre sidehastighetstester.

Det er ingen eksisterende løsning for å eliminere ressurser som blokkerer gjengivelse i htaccess-kode, ettersom problemet er relatert til DOM, noe som betyr nettstedsinnholdet og rekkefølgen de inkluderte ressursene lastes på, for eksempel Javascript og CSS, men ikke bare. Disse kan ikke utløses i Htaccess, men bare i HTML DOM-innholdet.

Hvis du løser disse problemene på skrivebordet, vil du samtidig eliminere gjengivelsesblokkerende ressurser for mobil da begge er nøyaktig like!

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!

Utsett Javascript-filer lastes

For å utsette belastningen på JS-filene dine [2], kan du enten legge til async eller defer-instruksjonen til skriptkoblingene dine. Async garanterer ikke at de lastes i samme rekkefølge. Derfor, hvis du har flere skript som skal kjøre etter hverandre, er defer foretrukket å garantere sekvensen:

Last inn CSS etter HTML-lasting

For at CSS skal lastes etter at full HTML er overført, foreslår Google [3] dette koden som skal legges til i slutten av HTML-en din, for eksempel etter firkantens lukkerkode og før koden for avsluttende kode:

For å optimalisere nettstedet ditt, er det også en god ide å fjerne ubrukt CSS-kode, en operasjon som kan være kjedelig hvis du ikke har kunnskap i webdesign. Hvis du ikke har opprettet nettstedet ditt tema selv, kan det være klokere å bruke et eksternt system for å fjerne ubrukt CSS-kode på sidene dine på dine vegne, for eksempel Ezoic Leap for eksempel, den nye (og helt gratis) versjonen av deres fantastiske nettsted Speed ​​Accelerator.

Bestå Googles hastighetstest!

Dette tillot meg å passere  Google PageSpeed   ​​[1] -prøven Eliminér gjengivelse av blokkering av JavaScript og CSS i det overordnede innholdet (sammen med Utnyttelse av nettleservisning [4]) på et nettsted, går opp fra en score på 51 på mobilen ( Fig. 1) til 72 (fig. 2) og opp fra 59 (fig. 3) til 79 på skrivebordet (fig. 4).

Slik eliminerer du gjengeblokkerende ressurser i WordPress

For å eliminere gjengeblokkerende ressurser i WordPress, er det nødvendig å installere et plugin som JetPack.

Gå til alternativene, som du må være administrator for, og gå til JetPack-valg> Skrive> Ytelse og hastighet> sjekk Aktiver nettstedets akselerator, øk hastigheten på bildebelastningstiden, øk hastigheten på statiske filbelastningstider, og aktiver lazy loading for Bilder.

Lær SEO Basics: Registrer deg i dag!

Øk nettstedets synlighet og trafikk ved å mestre det grunnleggende i SEO med vårt grunnleggende grunnleggende kurs.

Begynn å lære SEO

Dette vil eliminere gjenoppretting av ressurser i WordPress og laste inn sider raskere ved å tillate JetPack å optimalisere bildene dine og servere bildene og statiske filer (som CSS og JavaScript) fra deres globale nettverk av servere.

Ikke glem å utsette lastebilder av bilder ved å bruke en lat belastningsfunksjon. Mens det pleide å være vanskelig og nødvendiggjøre et eksternt bibliotek for å utsette lastebilder på skjermen, er det nå mulig naturlig i HTML5!

For å implementere lat lasting av bilder på nettstedene dine, legg bare til verdiene lat til attributter lasting av nettstedbildene dine, og nylige nettlesere vil forstå at disse bildene bare skal forespøres og lastes hvis de blir vist, noe som betyr at brukeren ruller ned til bildeplassholderne.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

På toppen av det virker lat lasting også med IFrames, og er en viktig implementering for å eliminere gjenvunnet ressurser fra websidene dine.

Når de gjengitte blokkeringsressursene vil ha instruksjoner om å laste etter hovedinnholdet, som betyr HTML DOM, vil du allerede tjene mange poeng på Google Lighthouse-testen, siden Speed ​​Speed ​​Insights Test, eller Google Core Web Vitals.

Få et eksternt system til å optimalisere nettstedet ditt for deg

Vet du at du faktisk kan få alle Google PageSpeed-problemene løst på dine vegne, uten mye krefter fra nettstedet ditt - bortsett fra å registrere deg for en gratis prøveperiode og endre DNS-en?

Ved hjelp av Ezoic-plattformen Site Speed ​​Accelerator-teknologi vil alle de vanlige Google PageSpeed-problemene bli løst av systemet deres, som vil være mellommann mellom nettstedet ditt og de besøkende. De vil optimalisere websiden for deg før de vises for besøkende.

Bli grønn ved å registrere deg for en gratis prøveperiode på Ezoic-plattformen og prøv den selv - de vil gjøre at nettstedet ditt når de høyeste standardene for optimalisering av sidehastighet i løpet av noen dager: gjengi neste generasjons webp-bilder, optimaliser CSS og JavaScript ved å fjerne ubrukte CSS og JS, late bilder, endre størrelse på bilder, buffer nettstedets sider, optimalisere skrifter, forhåndsforbinde til alle inkluderte nettsteder og mye mer.

Ingen kredittkort kreves - alt du trenger å gjøre er å registrere deg gratis og prøve. I tillegg, hvis nettstedet ditt tjener penger på visningsannonser, på toppen av å gjøre nettstedet ditt mye raskere, kan de også gjøre at du tjener flere ganger mer penger enn du gjør med Google AdSense ved å optimalisere annonsene dine med maskinlæring og avansert kunstig intellingence.

Ofte Stilte Spørsmål

Hvordan eliminere gjengivende blokkerende JavaScript og CSS i innholdet over ganger?

For å eliminere gjengivende blokkerende JavaScript og CSS for innhold over folden, bør du sikre at nettstedets JS- og CSS-filer er lastet etter at HTML er fullastet. Dette betyr ikke å pause HTML -lastingsprosessen for å laste ned disse filene. Du kan utsette JavaScript -filer med ASYNC- eller DEFER -attributtet, og for CSS kan du bruke spesifikk kode for å laste den etter HTML. Et eksternt optimaliseringssystem som Ezoic kan også håndtere dette automatisk.

Hvordan kan nettutviklere adressere Google Pagespeeds anbefaling for å eliminere gjengivende blokkering av JavaScript og CSS?

Nettutviklere kan optimalisere nettstedet sitt ved å minifisere JavaScript og CSS-filer, ved å bruke asynkron lasting for JavaScript, inlining kritisk CSS direkte i HTML, og utsette lastingen av ikke-kritiske CSS og JavaScript-filer. Implementering av disse strategiene kan forbedre belastningstidene og siderhastighetspoengene betydelig.

Perfekt Chrome Lighthouse Score: Hva skjer?