Bevestig Google PageSpeed ​​Elimineer JavaScript-en-CSS-versperringsblokkering in bo-die-vou-inhoud

Die Google PageSpeed ​​[1] -toets Elimineer JavaScript-en-CSS-blokkering in bo-die-vou-inhoud stel jou voor om die JS- en CSS-lêers van jou werf te lewer nadat die HTML volledig gelaai is. om dit te laai.


Los weergaweblokkerende Javascript en CSS op

Die  Google PageSpeed   ​​[1] -toets Elimineer JavaScript-en-CSS-blokkering in bo-die-vou-inhoud stel jou voor om die JS- en CSS-lêers van jou werf te lewer nadat die HTML volledig gelaai is. om dit te laai.

[1] - PageSpeed ​​Insights - developers.google.com
Render-blocking script definisie: skrifte wat gelaai word voordat die volledige HTML DOM ontleed is. Byvoorbeeld, skrifte wat opgeneem is in die koptekst of in die inhoud, sonder enige spesifieke instruksies vir blaaiers om die laai van die script tot na HTML-verf te vertraag.

Elimineer JavaScript en CSS wat blokkeer weergawes in inhoud bo die vou: wys hoe u dit kan herstel

  1. Laat 'n eksterne stelsel u webwerf vir u optimaliseer
  2. Gebruik 'n CDN wat alle moontlike optimalisasies namens u sal uitvoer, insluitend die volgende drie optimalisasies wat nodig is om die render-blokkeerbronne op te los:
  3. Stel Javascript-lêers uit
  4. Laai CSS na HTML-laai
  5. Gebruik 'n WordPress-inprop

Daar is baie optimerings wat nodig is om op te los, hulpbronne wat die blokkering van rendering oplos, uit te skakel, en dit kan vervelig wees om dit self te implementeer - en u moet voortdurend op die uitkyk wees vir nuwe toetse wat in Chrome LightHouse en  Google PageSpeed   ​​insluit, onder andere die spoedtoetse.

Daar is geen bestaande oplossing om render-blokkeer bronne in htaccess-kode uit te skakel nie, aangesien die kwessie verband hou met DOM, wat beteken die inhoud van die webwerf en die volgorde waarop die ingeslote bronne gelaai word, soos Javascript en CSS, maar nie net nie. Dit kan nie in Htaccess geaktiveer word nie, maar slegs in die HTML DOM-inhoud.

As u hierdie probleme op die rekenaar oplos, sal u terselfdertyd render-blokkeerbronne vir selfone uitskakel, want albei is presies dieselfde!

Did you know that you can even have all these steps executed automatically for you by using an external  Terreinspoedversneller   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!

Stel Javascript-lêers uit

Om die lading van u JS-lêers uit te stel [2], kan u die async- of defer-instruksies by u skripskakels voeg. Async sal nie waarborg dat hulle in dieselfde volgorde gelaai word nie - daarom, as u verskeie skrifte het wat die een na die ander moet hardloop, is dit beter om die volgorde te waarborg:

[2] - Verwyder Render-blocking JavaScript | PageSpeed ​​Insights | Goeie ontwikkelaars - developers.google.com

Laai CSS na HTML-laai

Aangesien die CSS gelaai moet word nadat die volledige HTML oorgedra is, stel Google voor [3] hierdie stuk kode om aan die einde van u HTML te voeg, byvoorbeeld na die sluitingsetiket vir die voetskrif en voor die sluitingslabel vir die liggaam:

[3] - Optimaliseer CSS-aflewering | PageSpeed ​​Insights | Goeie ontwikkelaars - developers.google.com

Om jou webwerf te optimaliseer, is dit ook 'n goeie idee om ongebruikte CSS-kode te verwyder, 'n operasie wat vervelig kan wees as jy nie kennis in webontwerp het nie. As u nie u webwerf tema self geskep het nie, kan dit wyser wees om 'n eksterne stelsel te gebruik om ongebruikte CSS-kode op u bladsye namens u te verwyder, soos Ezoïese sprong byvoorbeeld die nuwe (en heeltemal gratis) weergawe van hul wonderlike terrein Spoedversneller.

Slaag die Google-snelheidstoets!

Dit het my toegelaat om die  Google PageSpeed   ​​[1] -toets te verlaat. Elimineer JavaScript-en CSS-versperring in bo-die-vou-inhoud (saam met die caching van die blaaier [4]) op 'n webwerf op 'n webwerf van 51 op mobiele Fig 1) tot 72 (Fig 2), en van 59 (Fig 3) tot 79 op die lessenaar (Fig 4).

[4] - Los Google PageSpeed ​​se blaaiergeheue in htaccess op - Yoann Bierling, Internasionale SAP / Webkonsultant - www.ybierling.com

Hoe om die herstel-blokkeer van hulpbronne in WordPress uit te skakel

Om te verhoed dat hulpbronne in WordPress herstel word, is dit nodig om 'n plugin soos JetPack te installeer.

Gaan dan na die opsies waarvoor u 'n administrateur moet wees, en gaan na JetPack-opsies> Skryf> Prestasie en spoed> tjek Aktiveer werfversneller, versnel die laai van die beeld, versnel statiese lêer laai tye en aktiveer lui laai vir beelde.

Leer die basiese beginsels van SEO: skryf vandag in!

Verhoog die sigbaarheid en verkeer van u webwerf deur die grondbeginsels van SEO te bemeester met ons maklike basiese kursus.

Begin om SEO te leer

Verhoog die sigbaarheid en verkeer van u webwerf deur die grondbeginsels van SEO te bemeester met ons maklike basiese kursus.

Dit sal eliminering van hulpbronne blokkeer in WordPress en laai bladsye vinniger deur JetPack te help om jou prente te optimaliseer en jou beelde en statiese lêers (soos CSS en JavaScript) van hul globale netwerk van bedieners te bedien.

Hoe om JavaScript en CSS op WordPress te herstel

Moet ook nie vergeet om die laai van beelde off-skerm uit te stel deur 'n lui vragfunksie te gebruik nie. Terwyl dit moeilik was en 'n eksterne biblioteek nodig het om die laai van beelde off-skerm uit te stel, is dit nou moontlik in HTML5!

Lae laai van beelde: Website beelde word slegs aan die bediener aangevra wanneer gebruikers op die webblad blaai en dit kan vertoon

Voeg lui laai van beelde op jou webwerwe, voeg die waardes wat lui by die eienskappe van jou webwerfbeelde, en onlangse blaaiers sal verstaan ​​dat hierdie beelde slegs aangevra en gelaai moet word indien hulle vertoon word, wat beteken dat die gebruiker afrol die beeldplekhouers.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Webprestasie - Mozilla Ontwikkelaarnetwerk

Daarbenewens werk lui laai ook met Iframes, en is 'n belangrike implementering om lewendige hulpbronne uit jou webblaaie uit te skakel.

Sodra die lewering van blokkerende hulpbronne instruksies sal hê om na die hoofinhoud te laai, wat die HTML-dom beteken, sal jy reeds baie punte op die Google-vuurtoringstoets verdien, die bladsy spoed insigte toets, of die Google Core Web Vitals.

Laat 'n eksterne stelsel u webwerf vir u optimaliseer

Weet u dat u al die Google PageSpeed-kwessies namens u kan oplos sonder veel moeite van u webwerf af - behalwe om vir 'n gratis proeflopie te registreer en u DNS te verander?

Deur gebruik te maak van die Ezoic platform Site Speed ​​Accelerator-tegnologie, word al die gewone Google PageSpeed-probleme deur hul stelsel opgelos, wat die tussenganger sal wees tussen u webwerf en besoekers. Hulle sal die webblad vir u optimaliseer voordat dit aan u besoeker vertoon word.

In April 2021 sal Ezoic betaalde werf spoed versneller word gratis ezoïese sprong, en help webwerwe wat kern web vitals groen tellings bereik sonder koste!

Word groen deur eenvoudig te registreer vir 'n gratis proeflopie op die Ezoic-platform en probeer dit self; dit sal u webwerf binne 'n paar dae die hoogste standaarde maak vir die optimalisering van die bladsnelheid: lewer die volgende generasie webprente, optimaliseer CSS en JavaScript deur ongebruikte CSS te verwyder en JS, lui laai beelde, verander die grootte van die beelde, kas u webwerfbladsye, optimaliseer lettertipes, maak vooraf verbinding met al u webwerwe wat ingesluit is, en nog baie meer.

Geen kredietkaart nodig nie - al wat u hoef te doen is om gratis te registreer en probeer. Boonop, as u webwerf geld verdien uit vertoonadvertensies, en u webwerf baie vinniger kan maak, kan dit u ook 'n paar keer meer geld verdien as wat u met Google AdSense doen deur u advertensies te optimaliseer met masjienleer en gevorderde kunsmatige intelling.

Gereeld Gevra Vrae

Hoe kan u JavaScript en CSS in die vou-vou-inhoud uitskakel?
Om JavaScript en CSS vir die vou-vou-inhoud te verwyder, moet u verseker dat u webwerf se JS- en CSS-lêers gelaai word nadat die HTML volledig gelaai is. Dit beteken om nie die HTML -laaiproses te onderbreek om hierdie lêers af te laai nie. U kan JavaScript -lêers met die ASync- of Deper -kenmerk uitstel, en vir CSS kan u spesifieke kode gebruik om dit na die HTML te laai. 'N Eksterne optimaliseringstelsel soos Ezoic kan dit ook outomaties hanteer.
Hoe kan webontwikkelaars die aanbeveling van Google Pagespeed aanspreek om die JavaScript en CSS-rakende blokkering uit te skakel?
Webontwikkelaars kan hul webwerf optimaliseer deur JavaScript- en CSS-lêers te verminder, met behulp van asinchroniese laai vir JavaScript, die kritieke CSS direk in die HTML in te sluit en die laai van nie-kritiese CSS- en JavaScript-lêers uit te stel. Die implementering van hierdie strategieë kan die laai tye en pagespeed -tellings aansienlik verbeter.

Perfect Chrome-vuurtoring telling: wat gebeur?


Yoann Bierling
Oor die skrywer - Yoann Bierling
Yoann Bierling is 'n Web Publishing & Digital Consulting Professional, wat 'n wêreldwye impak maak deur kundigheid en innovasie in tegnologie. Hy is passievol oor die bemagtiging van individue en organisasies om in die digitale era te floreer. Hy word gedrewe om buitengewone resultate te lewer en om groei deur die skepping van opvoedkundige inhoud te dryf.

Leer die basiese beginsels van SEO: skryf vandag in!

Verhoog die sigbaarheid en verkeer van u webwerf deur die grondbeginsels van SEO te bemeester met ons maklike basiese kursus.

Begin om SEO te leer

Verhoog die sigbaarheid en verkeer van u webwerf deur die grondbeginsels van SEO te bemeester met ons maklike basiese kursus.




kommentaar (8)

 2018-08-19 -  quranapk
Hou daarvan om u inhoud te lees, hou aan om dit te plaas - dit het my gehelp om CSS te herstel wat herstel
 2018-09-23 -  Monica
Dit is dus hoe ons dit doen. Dit is wonderlik om te weet hoe u die render-blokkeerbare hulpbronne kan oplos
 2018-09-25 -  Van
Goed, dit is presies wat ek gesoek het, nou is ek gereed om render-blokkeerbronne op mobiele toestelle uit te skakel
 2018-11-03 -  utumikaji0
Ongelooflik, dit is nou tyd dat ek dit probeer en die herstel van blokkeer wat render-blokkeer!
 2019-01-12 -  Leo
Weet nie hoe om u te bedank nie, maar dit is pure genie, dankie - dit het op WordPress gewerk om die blokkeerbare hulpbronne te verwyder
 2019-04-21 -  Ludanulema
Hallo, ek het u artikel gesien en dit het my gehelp om die probleem op te los om hulpbronne op PHP uit te skakel, dankie
 2019-06-12 -  animeg2Q
Ek sal dit nou probeer, dankie vir die deel van hierdie oplossing vir die verwydering van render-blokkerende hulpbronne
 2019-07-02 -  Gasfackele
Dit het goed gewerk vir my; ek hoef nie verder te soek om render-blokkeerbronne op die HTML-webwerf uit te skakel nie

Los kommentaar