Konpondu Google PageSpeed ​​Ezabatu errendatze-blokeoaren Javascript eta CSS goian-fold-ean

Google PageSpeed ​​[1] test Ezabatu errendatze-blokeoa JavaScript eta CSS goian-fold-ean proposatzen dizu zure webgunearen JS eta CSS fitxategiak kapsulatutako HTMLa guztiz kargatu ondoren eta, beraz, ez gelditu HTML kargatzean horiek deskargatzeko.


Ebatzi Javascript eta CSS blokeatzea errendatzea

Google PageSpeed ​​[1] test Ezabatu errendatze-blokeoa JavaScript eta CSS goian-fold-ean proposatzen dizu zure webgunearen JS eta CSS fitxategiak kapsulatutako HTMLa guztiz kargatu ondoren eta, beraz, ez gelditu HTML kargatzean horiek deskargatzeko.

[1] - PageSpeed ​​Insights - developer.google.com
Errendapena blokeatzen duen scriptaren definizioa: HTML DOM osoa analizatu aurretik kargatzen diren scriptak. Adibidez, goiburuan edo edukiaren barruan sartutako scriptak, arakatzaileek scriptaren karga HTML margotzeraino atzeratzeko berariazko instrukziorik gabe.

Ezabatu errendatze blokeoa JavaScript eta CSS fold-go edukian: erakutsi nola konpondu

  1. Kanpoko sistema batek zure webgunea optimizatzeko zuretzat
  2. Erabili zure izenean optimizazio posible guztiak egingo dituen CDN bat, errendimendua blokeatzeko baliabideak ezabatzeko beharrezkoak diren hiru optimizazio hauek barne:
  3. Geroratu Javascript fitxategiak kargatu
  4. Kargatu CSS HTML kargatu ondoren
  5. Erabili WordPress plugin bat

Errendimendua blokeatzeko baliabideak ezabatzeko konponbiderako beharrezkoak diren optimizazio asko daude eta neketsuak izan daitezke zuk zeuk ezartzea. Gainera, Chrome LightHouse-n eta Google PageSpeed-en sartutako proba berriak etengabe aztertu beharko dituzu beste orrien abiadura proben artean.

Htaccess kodean errendimendua blokeatzeko baliabideak ezabatzeko irtenbiderik ez dago, arazoa DOM-ekin erlazionatuta baitago, hau da, webgunearen edukia eta sartutako baliabideak nola kargatzen diren, hala nola Javascript eta CSS, baina ez bakarrik. Hauek ezin dira Htaccess-en abiarazi, HTML DOM edukian baizik.

Arazo hauek mahaigainerako konpontzen badituzu, aldi berean mugikorrentzako errendatze blokeatzeko baliabideak ezabatuko dituzu, biak berdinak baitira!

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

Atzerapena Javascript fitxategien karga

Zure JS fitxategiak kargatzeko [2] atzeratzeko, asinkronoa edo gerorapen instrukzioa gehitu dezakezu zure gidoien esteketan. Async-ek ez du bermatuko sekuentzia berean kargatzen direla, beraz, bata bestearen ondoren exekutatu beharko luketen zenbait gidoi badituzu, iraupena sekuentzia bermatzeko hobe da:

[2] - Kendu Render-Blocking JavaScript | PageSpeed ​​Insights | Garatzaile onak: developer.google.com

Kargatu CSS HTML kargaren ondoren

CSSa HTML osoa transmititu ondoren kargatzeko, Google-k [3] kodearen pieza hau proposatzen du zure HTMLaren amaieran gehitzeko, adibidez orriko itxiera etiketa eta gorputz-itxierako etiketa ondoren:

[3] - Optimizatu CSS entrega | PageSpeed ​​Insights | Garatzaile onak: developer.google.com

Zure webgunea optimizatzeko, ideia ona da, halaber, erabili gabeko CSS kodea kentzea, web diseinuan ezagutzarik ez baduzu. Zure webgunearen gaia zeure burua sortu ez baduzu, jakintsuagoa izan daiteke kanpoko sistema bat erabiltzea zure orrialdeetan erabili gabeko CSS kodea kentzeko, esaterako, Jauzi Ezoikoa, adibidez, beren gune harrigarriaren bertsio berria (eta guztiz doakoa) Abiadura azeleragailua.

Pasa Google gunearen abiadura proba!

Honek Google PageSpeed-en [1] proba gainditu ahal izan zuen, ezabatu errendatze-blokeoaren Javascript eta CSS gainetik fold-ean (Leverage browser caching [4]) webgune batean, mugikorreko 51 puntuazioetatik gora. 1. irudia) 72 (2 irudia) eta 59 (3 irudia) 79 mahaigainean (4 irudia).

[4] - Konpondu Google PageSpeed ​​arakatzailearen caching-a htaccess-en - Yoann Bierling, Nazioarteko SAP / Web Aholkularia - www.ybierling.com

Nola ezabatu errendatzeko blokeatzeko baliabideak WordPressen

Errendimendua blokeatzeko baliabideak ezabatzeko WordPressen, beharrezkoa da plugin bat instalatzea, esate baterako, JetPack.

Ondoren, joan administratzailea izan behar duzun aukeretara eta joan JetPack aukeretara> Idaztea> Errendimendua eta Abiadura> egiaztatu Gaitu gune azeleragailua, bizkortu irudien karga-denbora, fitxategi estatikoen kargatzeko denbora bizkortzea eta gaitu kargak alferrak. irudiak.

Webgune nagusia sortzea: matrikulatu orain!

Eraldatu zure presentzia digitala gure webgunearen sorkuntza ikastaro zabalarekin - Hasi zure bidaia gaur egun web aditu bihurtzeko!

Eman izena hemen

Eraldatu zure presentzia digitala gure webgunearen sorkuntza ikastaro zabalarekin - Hasi zure bidaia gaur egun web aditu bihurtzeko!

Honek WordPressen blokeo-blokeatzeko baliabideak ezabatuko ditu eta orrialdeak azkarrago kargatuko ditu JetPack-ek zure irudiak optimizatzeko eta zure irudiak eta fitxategi estatikoak (adibidez, CSS eta JavaScript) zerbitzariak zerbitzari sare globaletik kenduz.

Nola ezabatu errendatze-blokeatzea JavaScript eta CSS WordPress-en

Gainera, ez ahaztu irudiak kargatzea karga funtzio alferra erabiliz. Zaila izan zen eta kanpoko liburutegia nahi izanez gero, irudiak kargatzeko pantailan kargatzeko, orain posible da html5-en!

Irudiak kargatzea alferrak: webgunearen irudiak zerbitzarira soilik eskatzen dira erabiltzaileak web orrian mugitzen direnean eta bistaratzeko

Irudiak alferrak zure webguneetan ezartzeko, besterik gabe, gehitu balioak alferrak zure webgunearen irudiak kargatzen dituzten atributuei, eta azken berriek ulertuko dute irudi horiek bistaratzen badira eta kargatu behar direla, esan nahi du erabiltzaileak bistaratzen badira Irudiaren leku-markak.

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

Horren gainean, alferrak kargatzen du Iframes-ekin ere funtzionatzen du eta ezarpen garrantzitsua da zure web orrietatik errendatzeko baliabideak blokeatzeko.

Errendatzeak blokeatzeko baliabideak edukia nagusiaren ondoren kargatzeko argibideak izango ditu, HTML DOM esan nahi du, dagoeneko puntu asko irabaziko dituzu Google Itsasargiko Proban, Orriaren Abiadura Insights Proba edo Google Core Web Vitals-en.

Izan kanpoko sistema bat zure webgunea optimizatzeko

Ba al dakizu  Google PageSpeed   ​​arazo guztiak konpon daitezkeela zure izenean, zure webgunetik ahalegin handirik egin gabe - doako proban izena eman eta zure DNS aldatzea izan ezik?

Ezoic plataformaren Site Speed ​​Accelerator teknologia erabiliz,  Google PageSpeed   ​​ohiko arazo guztiak konponduko dira beren sisteman, zure webgunearen eta bisitarien arteko bitartekari izango dena. Zure web orria optimizatuko dute bisitariari erakutsi aurretik.

2021eko apirilean, ordaindutako gunearen abiadura bizkorreko azeleragailua desioiko jauzia bihurtuko da eta webguneak webguneen puntuazio berdeak lortzen lagunduko du kargurik gabe!

Egin zaitez berdea, besterik gabe, Ezoic plataforman doako proban erregistratuz eta probatu zeure buruari. Webguneak orrialdearen abiadura optimizatzeko estandarrik handienak lortuko ditu egun gutxiren buruan: hurrengo belaunaldiko webp irudiak erreproduzitu, CSS eta JavaScript optimizatu erabili gabeko CSSak kenduz. eta JS, alferrak kargatzeko irudiak, irudiak tamaina aldatu, cache zure web orriak, optimizatu letra-tipoak, aldez aurretik konektatu zure gune guztietara eta askoz gehiago.

Kreditu txartelik ez da egin behar. Guztiak egin behar duzu erregistratzea eta probatu. Gainera, zure webguneak iragarkien iragarkietatik dirua irabazten badu, zure webgunea askoz ere azkarragoa izateaz gain, Google AdSense-rekin egiten duzunarekin baino diru gehiago irabazten ahalko dute zure iragarkiak makinen ikaskuntzarekin eta intellence artifiziala aurreratuz.

Galdera Arruntak

Nola ezabatu errendatze-JavaScript eta CSS tolesturaren goiko edukian?
Goian tolesturako edukirako errendatze-JavaScript eta CSS kentzeko, zure webgunearen JS eta CSS fitxategiak kargatu behar dira HTML erabat kargatuta egon ondoren. Horrek esan nahi du fitxategi horiek deskargatzeko HTML kargatzeko prozesua ez uztea. JavaScript fitxategiak async edo atzerako atributuarekin eta CSS-rekin atzeratu ditzakezu, kode zehatza erabil dezakezu HTMLaren ondoren kargatzeko. * Ezoiko * bezalako kanpoko optimizazio sistema batek automatikoki kudeatu dezake hau.
Nola heltzen dira web garatzaileek Google PageSpeed-en gomendioak errendatze-JavaScript eta CSS kentzeko?
Web garatzaileek JavaScript eta CSS fitxategiak txikituz optimizatu ditzakete, JavaScript kargatzeko asinkronikoa erabiliz, CSS kritikoki HTML-ra zuzenean sartuz eta CSS eta JavaScript fitxategiak ez diren CSS eta kargatuz. Estrategia horiek ezartzeak nabarmen karga-denborak eta orrialdeetako puntuazioak nabarmen hobetu ditzake.

Perfect Chrome itsasargiaren puntuazioa: Zer gertatzen da?


Yoann Bierling
Egilearen inguruan - Yoann Bierling
Yoann Bierling web argitalpen eta aholkularitza digitaleko profesionala da, teknologien espezializazio eta berrikuntzaren bidez eragin globala eginez. Aro Digitalean hazteko gizabanakoak eta erakundeak ahalduntzeaz arduratzen da, aparteko emaitzak ematera bultzatzea eta hazkundea bultzatzea hezkuntza edukien sorreraren bidez.

Webgune nagusia sortzea: matrikulatu orain!

Eraldatu zure presentzia digitala gure webgunearen sorkuntza ikastaro zabalarekin - Hasi zure bidaia gaur egun web aditu bihurtzeko!

Eman izena hemen

Eraldatu zure presentzia digitala gure webgunearen sorkuntza ikastaro zabalarekin - Hasi zure bidaia gaur egun web aditu bihurtzeko!




Oharrak (8)

 2018-08-19 -  quranapk
Maite dut zure edukia irakurtzen jarraitzea - ​​CSS errendatze blokeoa konpontzen lagundu dit
 2018-09-23 -  Monica
Beraz, honela egiten dugu. Oso ona da errendatze-blokeatze baliabideak nola konpondu jakitea
 2018-09-25 -  Van
Bikain, horixe zen bila nenbilena, orain prest nago errendatze blokeatzeko baliabideak mugikorrean ezabatzeko
 2018-11-03 -  utumikaji0
Harrigarria, probatu eta errendatze blokeatzaileen baliabideak ezabatzeko ordua iritsi zait!
 2019-01-12 -  Leo
Ez dakit eskerrak ematen, baina jenio hutsa da, eskerrik asko - WordPress-en funtzionatu zuen errendatze blokeatzeko baliabideak kentzeko
 2019-04-21 -  Ludanulema
Kaixo, zure artikulua ikusi nuen eta arazoa konpontzen lagundu zidan PHP-n errendatze blokeatzeko baliabideak ezabatzen, eskerrik asko
 2019-06-12 -  animeg2Q
Saiatuko naiz orain, eskerrik asko errendatze-blokeatze baliabideen konponketa hau partekatzeagatik
 2019-07-02 -  Gasfackele
Niretzat ondo funtzionatu zuen, HTML webguneko errendatze-blokeatzeko baliabideak ezabatzeko gehiago bilatu beharrik ez nuen

Utzi iruzkin bat