Fix Google PageSpeed ​​Eliminera återställningsblockering av JavaScript och CSS i det övergripande innehållet

Lös renderingsblockerande Javascript och CSS

Google PageSpeed ​​[1] -testet Eliminera återställningsblockerande JavaScript och CSS i det övergripande innehållet föreslår att du levererar din webbplatss JS- och CSS-filer efter att HTML-filen är fullt laddad - och stoppa därför inte HTML-filen. att ladda ner dem.

Renderblockerande skriptdefinition: Skript som laddas innan hela HTML-DOM: n har analyserats. Till exempel skript som ingår i sidhuvudet eller i innehållet, utan någon specifik instruktion för webbläsare att fördröja skriptbelastningen tills efter HTML-färg.

Eliminera renderingsblockerande JavaScript och CSS i innehåll ovanför mitten: visa hur du åtgärdar det

1. Låt ett externt system optimera din webbplats för dig
   
2. Använd ett CDN som utför alla möjliga optimeringar för dina räkning, inklusive de tre följande optimeringar som är nödvändiga för att fixa eliminera renderingsblockerande resurser:
   
3. Uppskjuta Javascript-filer laddas
   
4. Ladda CSS efter HTML-inläsning
   
5. Använd ett WordPress-plugin
   

Det finns många optimeringar som krävs för att åtgärda eliminera renderingsblockerande resurser och kan vara tråkiga att implementera dem själv - plus, du måste ständigt se upp för nya tester som ingår i Chrome LightHouse och  Google PageSpeed   ​​bland andra sidhastighetstester.

Det finns ingen befintlig lösning för att eliminera renderingsblockerande resurser i htaccess-kod eftersom problemet är relaterat till DOM, vilket betyder webbplatsinnehållet och den ordning som de inkluderade resurserna laddas på, till exempel Javascript och CSS, men inte bara. Dessa kan inte utlösas i Htaccess, utan bara i HTML DOM-innehåll.

Om du löser dessa problem för skrivbordet kommer du samtidigt att eliminera renderingsblockerande resurser för mobilen eftersom båda är exakt samma!

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!

Uppskjutna Javascript-filer laddas

För att skjuta upp belastningen av dina JS-filer [2] kan du antingen lägga till async eller defer-instruktionen till dina skriptlänkar. Async garanterar inte att de laddas i samma sekvens. Därför, om du har flera skript som ska springa en efter en, föredras att föredra sekvensen:

Ladda CSS efter HTML-laddning

För att CSS ska laddas efter att hela HTML har överförts, föreslår Google [3] den här koden som ska läggas till i slutet av din HTML, till exempel efter avslutande tagg för körfält och före koden för stängning av kroppen:

För att optimera din webbplats är det också en bra idé att ta bort oanvänd CSS-kod, en operation som kan vara tråkig om du inte har kunskap i webbdesign. Om du inte har skapat ditt hemsida kan det vara klokare att använda ett externt system för att ta bort oanvänd CSS-kod på dina sidor på dina vägnar, till exempel EZOIC LEAP, till exempel den nya (och helt gratis) versionen av deras fantastiska webbplats Speed ​​accelerator.

Klara Googles hastighetstest!

Detta gjorde det möjligt för mig att klara testet  Google PageSpeed   ​​[1] Eliminera render-blockering av JavaScript och CSS i det övergripande innehållet (tillsammans med hävstart av webbläsarens caching [4]) på en webbplats som går upp från en poäng på 51 på mobilen ( Fig 1) till 72 (fig 2) och upp från 59 (fig 3) till 79 på skrivbordet (fig 4).

Så här eliminerar du blockeringsresurser i WordPress

För att eliminera återställningsskyddande resurser i WordPress är det nödvändigt att installera ett plugin som JetPack.

Gå sedan till alternativen, för vilka du måste vara en administratör och gå till JetPack-alternativ> Skriva> Prestanda och hastighet> markera Aktivera sidans accelerator, snabba upp bildbelastningstider, snabba upp statiska filbelastningstider och aktivera lat laddning för bilder.

Lär dig SEO -grunder: Anmäl dig idag!

Öka webbplatsens synlighet och trafik genom att behärska grunderna i SEO med vår lätt att följa grunderna.

Börja lära sig SEO

Detta kommer att eliminera återställningsskyddande resurser i WordPress och ladda sidor snabbare genom att tillåta JetPack att optimera dina bilder och tjäna dina bilder och statiska filer (som CSS och JavaScript) från deras globala nätverk av servrar.

Glöm inte att skjuta upp att ladda bilder utanför skärmen med hjälp av en lat lastfunktion. Medan det brukade vara svårt och krävde ett externt bibliotek att skjuta upp lastning av bilder off-screen, är det nu möjligt i HTML5!

För att implementera lat lastning av bilder på dina webbplatser, lägg bara till värdena lata till attributen som laddas på dina webbplatsbilder, och de senaste webbläsarna kommer att förstå att dessa bilder endast ska begäras och laddas om de visas, vilket innebär att användaren rullar ner till Bildplatshållarna.

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

Utöver det, är lat lastning också med iframes, och är ett viktigt genomförande för att eliminera resurser från dina webbsidor.

När den återgivande blockeringsresurserna kommer att ha instruktioner att ladda efter huvudinnehållet, vilket betyder HTML DOM, kommer du redan att tjäna mycket poäng på Google Lighthouse-testet, testet för sidovinst, eller Google Core Web Vitals.

Låt ett externt system optimera din webbplats åt dig

Vet du att du faktiskt kan få alla Google PageSpeed-problem att lösa för dig, utan mycket ansträngning från din webbplats - förutom att du registrerar dig för en kostnadsfri testversion och ändrar din DNS?

Med hjälp av Ezoic-plattformen Site Speed ​​Accelerator-teknik kommer alla vanliga problem med  Google PageSpeed   ​​att lösas av deras system, som kommer att vara mellanhand mellan din webbplats och besökarna. De kommer att optimera webbsidan för dig innan den visas för din besökare.

Bli grön genom att helt enkelt registrera dig för en kostnadsfri testversion på Ezoic-plattformen och prova det själv - de kommer att göra att din webbplats når de högsta standarderna för optimering av sidhastighet inom några dagar: ge nästa generations webb-bilder, optimera CSS och JavaScript genom att ta bort oanvänd CSS och JS, lata laddade bilder, ändra storlek på bilder, cachera dina webbplatssidor, optimera teckensnitt, föransluta alla dina medföljande webbplatser och mycket mer.

Inget kreditkort krävs - allt du behöver göra är att registrera dig gratis och prova. Dessutom, om din webbplats tjänar pengar på visningsannonser, utan att göra din webbplats mycket snabbare, kan de också få dig att tjäna flera gånger mer pengar än du gör med Google AdSense genom att optimera dina annonser med maskininlärning och avancerad konstgjord intellingce.

Vanliga Frågor

Hur eliminerar jag Render-blockerande JavaScript och CSS i ovanstående innehåll?

För att eliminera Render-blockerande JavaScript och CSS för ovanstående innehåll bör du se till att din webbplats JS- och CSS-filer laddas efter att HTML är fullastad. Detta innebär att inte pausa HTML -lastningsprocessen för att ladda ner dessa filer. Du kan skjuta upp JavaScript -filer med attributet Async eller Defer, och för CSS kan du använda en specifik kod för att ladda den efter HTML. Ett externt optimeringssystem som Ezoic kan också hantera detta automatiskt.

Hur kan webbutvecklare adressera Google PagesPeeds rekommendation att eliminera Render-blockerande JavaScript och CSS?

Webbutvecklare kan optimera sin webbplats genom att minska JavaScript- och CSS-filer, använda asynkron lastning för JavaScript, införa kritiska CSS direkt i HTML och skjuta upp lastning av icke-kritiska CSS och JavaScript-filer. Implementering av dessa strategier kan förbättra belastningstiderna avsevärt och sidor.

Perfect Chrome Lighthouse Score: Vad händer?