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.

[1] - PageSpeed ​​Insights - developers.google.com
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:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Ta bort Render-Blocking JavaScript | PageSpeed ​​Insights | Bra utvecklare - developers.google.com

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:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Optimera CSS-leverans | PageSpeed ​​Insights | Bra utvecklare - developers.google.com

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).

[4] - Fix Google PageSpeed ​​utnyttja webbläsarens cachning i htaccess - Yoann Bierling, International SAP / Web Consultant - www.ybierling.com

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.

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.

Hur eliminerar render-blockering av JavaScript och CSS på WordPress

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!

Lazy Laddning av bilder: Webbplatsbilder begärs bara på servern när användaren bläddrar på webbsidan och kan visa dem

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>
Lazy Loading - Web Performance - Mozilla Developer Network

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.

I april 2021 blir ezoic betald platshastighetsaccelerator att bli gratis ezoic språng och hjälp webbplatser som når kärnwebben Vitale Green Scores utan kostnad!

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.

Perfect Chrome Lighthouse Score: Vad händer?






kommentarer (8)

 2018-08-19 -  quranapk
Älskar att läsa ditt innehåll fortsätter att publicera - det hjälpte mig att fixa fix render blockerande CSS
 2018-09-23 -  Monica
Så det är så vi gör det, det är fantastiskt att veta hur man löser eliminera renderingsblockerande resurser
 2018-09-25 -  Van
Bra, det var precis vad jag letade efter, nu är jag redo att eliminera renderingsblockerande resurser på mobilen
 2018-11-03 -  utumikaji0
Fantastiskt, nu är det dags för mig att prova och fixa eliminera renderingsblockerande resurser!
 2019-01-12 -  Leo
Vet inte hur jag ska tacka dig, men det är rent geni, tack - det fungerade på WordPress för att ta bort renderingsblockerande resurser
 2019-04-21 -  Ludanulema
Hej, jag såg din artikel och det hjälpte mig att lösa problemet att eliminera renderingsblockerande resurser på PHP, tack
 2019-06-12 -  animeg2Q
Jag ska prova det nu, tack för att du delar denna eliminera renderingsblockerande resursfix
 2019-07-02 -  Gasfackele
Det fungerade bra för mig, ingen anledning att leta längre för att eliminera renderingsblockerande resurser på HTML-webbplatsen

Lämna en kommentar