Fix Google PageSpeed ​​Eliminimi i paraqitjes së bllokimit të JavaScript-it dhe CSS-së në përmbajtjen më sipër

Testi i Google PageSpeed ​​[1] Eliminimi i bllokimit të skedarëve JavaScript dhe CSS në përmbajtjen e sipërme ju sugjeron që të shpërndani skedarët JS dhe CSS të sitit tënd pasi HTML të jetë plotësisht i ngarkuar - dhe, për këtë arsye, mos e ndërpritni ngarkimin në HTML për ta shkarkuar.


Zgjidhja e bërjes bllokuese të Javascript dhe CSS

Testi i  Google PageSpeed   ​​[1] Eliminimi i bllokimit të skedarëve JavaScript dhe CSS në përmbajtjen e sipërme ju sugjeron që të shpërndani skedarët JS dhe CSS të sitit tënd pasi HTML të jetë plotësisht i ngarkuar - dhe, për këtë arsye, mos e ndërpritni ngarkimin në HTML për ta shkarkuar.

[1] - PageSpeed ​​Insights - developers.google.com
Përkufizimi i skenarit që bllokon skedarin: Skriptet që janë ngarkuar para se të analizohet HTML i plotë DOM. Për shembull, skriptet e përfshira në kokë ose brenda përmbajtjes, pa ndonjë udhëzim specifik për shfletuesit që të vonojnë ngarkimin e skenarit deri pas ngjyrosjes HTML.

Eliminoni bllokimin e pasqyrimit të JavaScript dhe CSS në përmbajtjen e sipërme: tregoni se si ta rregulloni atë

  1. Keni një sistem të jashtëm që të zgjedh faqen tuaj të internetit për ju
  2. Përdorni një CDN që do të kryejë të gjitha optimizimet e mundshme në emrin tuaj, duke përfshirë tre optimizimet e mëposhtme të nevojshme për të rregulluar eliminimin e burimeve të bllokimit të pasqyrave:
  3. Shtyni ngarkesën e skedarëve Javascript
  4. Ngarko CSS pas ngarkesës HTML
  5. Përdorni një shtojcë WordPress

Ekzistojnë shumë optimizime të nevojshme për të rregulluar eliminimin e burimeve të bllokimit të pasqyrave dhe mund të jetë e lodhshme t'i zbatoni ato vetë - plus, do të duhet të kërkoni vazhdimisht për teste të reja të përfshira në Chrome LightHouse dhe  Google PageSpeed   ​​midis testeve të tjera të shpejtësisë së faqes.

Nuk ka asnjë zgjidhje ekzistuese për të eleminuar burimet e bllokimit të pasqyrimit në kodin htaccess pasi çështja lidhet me DOM, që do të thotë përmbajtjen e faqes në internet dhe rendin në të cilin ngarkohen burimet e përfshira, të tilla si Javascript dhe CSS, por jo vetëm. Këto nuk mund të shkaktohen në Htaccess, por vetëm në përmbajtjen HTML DOM.

Nëse i zgjidhni këto çështje për desktop, në të njëjtën kohë do të eleminoni burimet e bllokimit të pasqyrave për celular pasi që të dyja janë saktësisht të njëjta!

Did you know that you can even have all these steps executed automatically for you by using an external Përshpejtuesi i Shpejtësisë së sitit 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!

Shtyni ngarkesat e skedarëve Javascript

Në mënyrë që të shtyjë ngarkesën e skedarëve JS [2], ju mund të shtoni instruksionin async ose shtyrjen në lidhjet e skripteve tuaja. Async nuk do të garantojë se ato janë të ngarkuara në të njëjtën renditje - prandaj, nëse keni disa skripta që duhet të kandidoni njëra pas tjetrës, shtyrja është e preferueshme për të garantuar rendin:

[2] - Hiq JavaScript-Bllokimi i Renderit | Vështrime PageSpeed ​​| Zhvillues të mirë - developers.google.com

Ngarkoni CSS pas ngarkesës HTML

Për të ngarkuar CSS pasi të transmetohet HTML i plotë, Google propozon këtë pjesë të kodit për t'u shtuar në fund të HTML-it tuaj, për shembull pas etiketës përmbyllëse të futbollit dhe para tagit të mbylljes së trupit:

[3] - Optimizoni Dorëzimin e CSS | Vështrime PageSpeed ​​| Zhvillues të mirë - developers.google.com

Në mënyrë që të optimizoni faqen tuaj të internetit, është gjithashtu një ide e mirë për të hequr kodin e papërdorur të CSS, një operacion që mund të jetë i lodhshëm nëse nuk keni njohuri në web design. Nëse nuk e keni krijuar vetë temën tuaj të internetit, mund të jetë më e mençur të përdorni një sistem të jashtëm për të hequr kodin e papërdorur të CSS në faqet tuaja në emër tuaj, të tilla si Leap Ezoic për shembull, versioni i ri (dhe krejtësisht i lirë) i faqes së tyre të mahnitshme Përshpejtues me shpejtësi.

Kaloni testin e shpejtësisë së faqes Google!

Kjo më lejoi të kaloj testin  Google PageSpeed   ​​[1] Eliminimi i bllokimit të JavaScript-it dhe CSS-së në përmbajtjen e sipërme (së bashku me caching në shfletuesin e levave [4]) në një faqe interneti, duke shkuar nga një rezultat prej 51 në celular ( Fig. 1) deri në 72 (Fig. 2), dhe lart nga 59 (Fig. 3) deri në 79 në tavolinën e punës (Fig. 4).

[4] - Rregulloni cache-in e shfletuesit të levave të Google PageSpeed ​​në htaccess - Yoann Bierling, SAP Ndërkombëtar / Konsulent Uebi - www.ybierling.com

Si për të eliminuar burimet e bërjes së rendit në WordPress

Për të eliminuar burimet e bërjes së rendit në WordPress, është e nevojshme të instaloni një plugin siç është JetPack.

Pastaj shkoni te opsionet, për të cilat duhet të jeni administrator dhe shkoni te opsionet JetPack> Shkrimi> Performanca dhe shpejtësia> kontrolloni Aktivizo akrobatun e faqes, shpejtoni kohën e ngarkimit të imazhit, shpejtoni kohën e ngarkimit të skedarit statik dhe mundësoni ngarkimin e ngadalshëm images.

Krijimi i Uebfaqes Master: Regjistrohuni tani!

Transformoni praninë tuaj dixhitale me kursin tonë gjithëpërfshirës të krijimit të faqes në internet - filloni udhëtimin tuaj për t'u bërë një ekspert në internet sot!

Regjistrohuni këtu

Transformoni praninë tuaj dixhitale me kursin tonë gjithëpërfshirës të krijimit të faqes në internet - filloni udhëtimin tuaj për t'u bërë një ekspert në internet sot!

Kjo do të eliminojë burimet e bërjes së rendit në WordPress dhe faqet e ngarkesës më shpejt duke lejuar që JetPack të zgjedh imazhet tuaja dhe t'u shërbejë imazheve tuaja dhe skedarëve statikë (si CSS dhe JavaScript) nga rrjeti global i serverëve.

Si të eliminoni JavaScript-in dhe bllokimin e CSS-së në WordPress

Gjithashtu, mos harroni të shtyni ngarkimin e imazheve jashtë ekranit duke përdorur një funksion të ngarkesës dembel. Ndërsa përdoret për të qenë e vështirë dhe të kërkonte një bibliotekë të jashtme për të shtyrë imazhet e ngarkimit jashtë ekranit, tani është e mundur në mënyrë të natyrshme në HTML5!

Lazimi i imazheve: Imazhet e internetit kërkohen vetëm në server kur përdoruesi lëviz në faqen e internetit dhe mund t'i shfaqë ato

Për të zbatuar ngarkimin dembel të imazheve në faqet e internetit tuaj, thjesht shtoni vlerat e dembelës në atributet e ngarkimit të imazheve tuaja të internetit, dhe shfletuesit e fundit do të kuptojnë se këto imazhe duhet të kërkohen dhe të ngarkohen nëse ato po shfaqen, do të thotë nëse përdoruesi është duke u shfaqur në Vendi i imazhit.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - Rrjeti Zhvillues Mozilla

Në krye të kësaj, ngarkimi dembel gjithashtu punon me iframes, dhe është një zbatim i rëndësishëm për të eliminuar burimet e bllokimit të blloqeve nga faqet e internetit.

Sapo burimet e bllokimit të renditjes do të kenë udhëzime për të ngarkuar pas përmbajtjes kryesore, që do të thotë HTML DOM, ju tashmë do të fitoni shumë pikë në testin e Google Lighthouse, testin e shpejtësisë së faqes, ose në vitalet e Google Core.

Bëni një sistem të jashtëm të zgjedh faqen tuaj të internetit për ju

A e dini se në të vërtetë mund të keni zgjidhur të gjitha çështjet e  Google PageSpeed   ​​në emrin tuaj, pa shumë përpjekje nga faqja juaj - përveç regjistrimit për një gjykim falas dhe ndryshimit të DNS tuaj?

Duke përdorur teknologjinë e përshpejtuesit të shpejtësisë së faqes Ezoic, të gjitha çështjet e zakonshme të  Google PageSpeed   ​​do të zgjidhen nga sistemi i tyre, i cili do të jetë ndërmjetësi midis internetit tuaj dhe vizitorëve. Ata do të zgjedhin faqen e internetit për ju përpara se ta shfaqin atë tek vizitori juaj.

Në prill të vitit 2021, përshpejtuesi i shpejtësisë së paguar ezoic do të bëhet hap i lirë ezoik, dhe ndihmon faqet e internetit që arrijnë rezultatet e gjelbërta të web-it në pa pagesë!

Bëhuni të gjelbër duke regjistruar thjesht një provë falas në platformën Ezoic dhe provojeni vetë - ata do të bëjnë që faqja juaj e internetit të arrijë standardet më të larta të optimizmit të shpejtësisë së faqeve brenda disa ditësh: jepni imazhe të faqes në internet të gjeneratës tjetër, optimizoni CSS dhe JavaScript duke hequr CSS të papërdorura dhe JS, imazhe të ngarkesës dembel, imazhe për madhësinë, ruajini në faqet e faqes tuaj, zgjedhni mirë shkronjat, lidheni paraprakisht me të gjitha faqet tuaja të përfshira dhe shumë më tepër.

Nuk kërkohet kartë krediti - gjithçka që duhet të bëni është të regjistroheni falas dhe ta provoni. Plus, nëse faqja juaj e internetit po fiton para nga reklamat e ekranit, në krye të bërjes së internetit tuaj shumë më shpejt, ato gjithashtu mund t'ju bëjnë të fitoni disa herë më shumë para sesa që bëni me Google AdSense duke optimizuar reklamat tuaja me mësimin e makinerisë dhe inteligjencës artificiale të përparuar.

Pyetjet E Bëra Më Shpesh

Si të eliminoni JavaScript dhe CSS të bllokimit të dhënies në përmbajtje më të lartë?
Për të eleminuar bllokimin e JavaScript dhe CSS për përmbajtjen e mësipërme, duhet të siguroni që skedarët JS dhe CSS të faqes tuaj janë ngarkuar pasi HTML të jetë ngarkuar plotësisht. Kjo do të thotë të mos ndaloni procesin e ngarkimit HTML për të shkarkuar këto skedarë. Ju mund të shtyni skedarët JavaScript me atribut asinc ose shtytës, dhe për CSS, mund të përdorni kod specifik për ta ngarkuar atë pas HTML. Një sistem i jashtëm i optimizmit si Ezoic gjithashtu mund ta trajtojë këtë automatikisht.
Si munden zhvilluesit e uebit të adresojnë rekomandimin e Google Pagespeed për të eleminuar bllokimin e JavaScript dhe CSS të bllokimit të dhënies?
Zhvilluesit e uebit mund të optimizojnë faqen e tyre duke minifikuar skedarët JavaScript dhe CSS, duke përdorur ngarkesë asinkron për JavaScript, duke përfshirë CSS kritike direkt në HTML, dhe duke shtyrë ngarkimin e skedarëve jo kritikë CSS dhe JavaScript. Zbatimi i këtyre strategjive mund të përmirësojë ndjeshëm kohën e ngarkimit dhe rezultatet e pagespeed.

Rezultati i përsosur i kromit: Çfarë ndodh?


Yoann Bierling
Rreth Autorit - Yoann Bierling
Yoann Bierling është një profesionist i botimit dhe këshillimit dixhital në internet, duke bërë një ndikim global përmes ekspertizës dhe inovacionit në teknologji. I apasionuar pas fuqizimit të individëve dhe organizatave për të lulëzuar në epokën dixhitale, ai është i shtyrë të japë rezultate të jashtëzakonshme dhe të nxisë rritjen përmes krijimit të përmbajtjes arsimore.

Krijimi i Uebfaqes Master: Regjistrohuni tani!

Transformoni praninë tuaj dixhitale me kursin tonë gjithëpërfshirës të krijimit të faqes në internet - filloni udhëtimin tuaj për t'u bërë një ekspert në internet sot!

Regjistrohuni këtu

Transformoni praninë tuaj dixhitale me kursin tonë gjithëpërfshirës të krijimit të faqes në internet - filloni udhëtimin tuaj për t'u bërë një ekspert në internet sot!




Comments (8)

 2018-08-19 -  quranapk
Dashuria për të lexuar përmbajtjen tuaj vazhdoni të postoni - kjo më ndihmoi të rregulloj CSS-në e bllokimit të dhënies
 2018-09-23 -  Monica
Kështu që ne e bëjmë atë, është mirë të dish të zgjidhësh eleminimin e burimeve të bllokimit të pasqyrave
 2018-09-25 -  Van
E shkëlqyeshme, kjo është pikërisht ajo që po kërkoja, tani jam gati të eleminoj burimet e bllokimit të pasqyrave në celular
 2018-11-03 -  utumikaji0
E mahnitshme, tani është koha që unë ta provoj dhe të rregulloj eliminimin e burimeve të bllokimit të pasqyrave!
 2019-01-12 -  Leo
Nuk di si të të falënderoj, por kjo është një gjeni i pastër, faleminderit - ka punuar në WordPress për të hequr burimet e bllokimit të pasqyrave
 2019-04-21 -  Ludanulema
Përshëndetje, pashë artikullin tuaj dhe më ndihmoi të zgjidhja problemin për të eleminuar burimet e bllokimit të skedarëve në PHP, faleminderit
 2019-06-12 -  animeg2Q
Do ta provoj tani, faleminderit që ndau këtë rregullim të eleminimit të burimeve të bllokimit të pasqyrimit
 2019-07-02 -  Gasfackele
Ka punuar mirë për mua, nuk ka nevojë të kërkoj më tej për të eleminuar burimet e bllokimit të dhënies në faqen e internetit të HTML

Lini një koment