Popravite Google PageSpeed ​​Eliminišite JavaScript i CSS koji blokiraju ometanje u gore navedenom sadržaju

Google PageSpeed ​​[1] test Eliminacija JavaScript-a i CSS-a u sadržaju iznad linije predlaže vam da isporučite JS i CSS datoteke vašeg sajta nakon što je HTML u potpunosti učitan - i stoga ne zaustavljate HTML opterećenje da ih preuzmete.


Riješite blokiranje prikazivanja Javascript-a i CSS-a

Google PageSpeed ​​[1] test Eliminacija JavaScript-a i CSS-a u sadržaju iznad linije predlaže vam da isporučite JS i CSS datoteke vašeg sajta nakon što je HTML u potpunosti učitan - i stoga ne zaustavljate HTML opterećenje da ih preuzmete.

[1] - PageSpeed ​​Insights - developers.google.com
Definicija skripte za blokiranje prikazivanja: Skripte koje se učitavaju prije nego što se raščlani puni HTML DOM. Na primjer, skripte uključene u zaglavlje ili unutar sadržaja, bez ikakvih posebnih uputa za preglednike da odgode učitavanje skripte dok ne izađu iz HTML boje.

Eliminirajte JavaScript i CSS koji blokira generiranje u sadržaju iznad preloma: pokažite kako to popraviti

  1. Neka eksterni sistem optimizira vašu web lokaciju za vas
  2. Koristite CDN koji će u vaše ime izvršiti sve moguće optimizacije, uključujući tri sljedeće optimizacije potrebne za popravljanje uklanjanja resursa koji blokiraju prikazivanje:
  3. Odgodi učitavanje Javascript datoteka
  4. Učitajte CSS nakon učitavanja HTML-a
  5. Koristite WordPress dodatak

Puno je optimizacija potrebnih da se popravi uklanjanje resursa koji blokiraju prikazivanje i moglo bi biti dosadno sami ih implementirati - uz to ćete morati neprestano paziti na nove testove koji su među ostalim testovima brzine stranice uključeni u Chrome LightHouse i Google PageSpeed.

Ne postoji rješenje za uklanjanje resursa koji blokiraju generiranje u htaccess kodu, jer je problem povezan s DOM-om, što znači sadržaj web stranice i redoslijed učitavanja uključenih resursa, kao što su Javascript i CSS, ali ne samo. Oni se ne mogu aktivirati u Htaccessu, već samo u HTML DOM sadržaju.

Ako riješite ove probleme za radnu površinu, istovremeno ćete eliminirati resurse koji blokiraju prikazivanje za mobilne uređaje jer su oba potpuno ista!

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

Odgodite učitavanje Javascript datoteka

Da biste odložili opterećenje vaših JS datoteka [2], možete dodati async ili defer instrukciju u svoje skripte linkove. Async neće garantovati da su učitani u istom nizu - stoga, ako imate nekoliko skripti koje treba pokrenuti jedan za drugim, poželjno je odlaganje da biste garantovali niz:

[2] - Uklonite JavaScript koji blokira generiranje | PageSpeed ​​Insights | Dobri programeri - developers.google.com

Učitajte CSS nakon učitavanja HTML-a

Da bi se CSS učitao nakon prenosa potpunog HTML-a, Google predlaže [3] ovaj komad koda koji će se dodati na kraju vašeg HTML-a, na primer nakon oznake za zaključavanje nogu i pre zatvaranja tijela:

[3] - Optimizirajte CSS isporuku | PageSpeed ​​Insights | Dobri programeri - developers.google.com

Da biste optimizirali svoju web stranicu, također je dobra ideja ukloniti neiskorišteni CSS kôd, operaciju koja može biti naporna ako nemate znanje u web dizajnu. Ako niste napravili temu svoje web stranice, možda će biti mudriji korištenje vanjskog sustava za uklanjanje neiskorištenih CSS koda na vašim stranicama u vaše ime, poput Ezoic Shoap, na primjer, novom (i potpuno besplatnom) verzijom njihove nevjerojatne stranice Brzi akcelerator.

Prođite test brzine Google stranice!

Ovo mi je omogućilo da prođem test  Google PageSpeed   ​​[1] da uklonim JavaScript i CSS koji blokiraju rendere u sadržaju iznad linije (zajedno sa keširanjem pretraživača leverage-a [4]) na veb sajtu i da se kreće sa broja od 51 na mobilnom telefonu Fig. 1) do 72 (Slika 2), i od 59 (Slika 3) do 79 na radnoj površini (Slika 4).

[4] - Ispraviti Google PageSpeed ​​iskoristiti predmemoriranje preglednika u htaccess - Yoann Bierling, međunarodni SAP / web savjetnik - www.ybierling.com

Kako eliminisati resurse koji blokiraju renderiranje u WordPress-u

Da bi se eliminisali resursi koji blokiraju renderiranje u WordPress-u, potrebno je instalirati plugin kao što je JetPack.

Zatim idite na opcije za koje morate biti administrator i idite na JetPack opcije> Pisanje> Performanse i brzina> označite Omogući akcelerator lokacije, ubrzajte vrijeme učitavanja slike, ubrzajte vrijeme učitavanja statičke datoteke i omogućite lazno učitavanje za images.

Stvaranje master web stranice: upisati sada!

Pretvorite svoje digitalno prisustvo sa našim sveobuhvatnim tečajem za kreiranje web stranica - započnite svoj put da postanete web stručnjak danas!

Upisite se ovdje

Pretvorite svoje digitalno prisustvo sa našim sveobuhvatnim tečajem za kreiranje web stranica - započnite svoj put da postanete web stručnjak danas!

Ovo će eliminisati resurse koji blokiraju renderiranje u WordPress-u i brže učitati stranice dopuštajući JetPack-u da optimizira vaše slike i poslužuje vaše slike i statičke datoteke (kao što je CSS i JavaScript) iz njihove globalne mreže servera.

Kako eliminisati JavaScript i CSS koji blokiraju prikazivanje na WordPress-u

Takođe, ne zaboravite odgoditi utovarivanje slika isključivanja funkcije lijenog opterećenja. Iako je nekada bilo teško i zahtijevati vanjsku biblioteku da odgodi da se učitava slikama isključivanja ekran, sada je moguće i prirodno u HTML5!

Lijeno učitavanje slika: Slike web stranica traže se samo na poslužitelju kada se korisnik pomiče na web stranici i može ih prikazati

Da biste implementirali lijeno učitavanje slika na svoje web stranice, jednostavno dodajte vrijednosti atributa za utovarivanje vaših web stranica, a nedavni preglednici će shvatiti da se ove slike trebaju zatražiti i utovariti ako se prikazuju, značenje ako se korisnik pomiče na rezerve za slike.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lijeno učitavanje - Web performanse - Mozilla Programer Mreža

Povrh toga, lijeno učitavanje također radi s IFRAMS-om, a važna je implementacija za uklanjanje resursa koji blokiraju prikazivanje iz vaših web stranica.

Jednom kada će resursi za blokiranje resursa imati upute za učitavanje nakon glavnog sadržaja, što znači HTML DOM, već ćete zaraditi puno bodova na testu Google Lighthouse, uvid u opseg stranice ili u uvid u opseg stranice ili u uvid u opseg.

Neka spoljni sistem optimizira web lokaciju za vas

Znate li da biste zapravo mogli riješiti sve probleme sa  Google PageSpeed   ​​u vaše ime, bez puno napora sa vaše web lokacije - osim registracije za besplatno probno razdoblje i promjene svog DNS-a?

Korištenjem tehnologije Ezoic platforma za ubrzanje web stranice, sve uobičajene probleme sa  Google PageSpeed   ​​riješit će njihov sustav, koji će biti posrednik između vaše web stranice i posjetitelja. Oni će optimizirati web stranicu za vas prije nego je prikazuju posjetitelju.

U aprilu 2021. godine Ezoik plaćeni akcelerator brzine postat će besplatan Ezoic skok i pomoći web stranicama koje dolaze na osnovne web vitalne rezultate bez naknade!

Postanite zeleni tako što ćete se jednostavno registrirati za besplatno probno razdoblje na platformi Ezoic i isprobajte sami - oni će učiniti da vaša web stranica dosegne najviše standarde optimizacije brzine stranice u roku od nekoliko dana: prikaži webp slike sljedeće generacije, optimizirate CSS i JavaScript uklanjanjem neiskorištenog CSS-a i JS, lijene slike učitajte, promijenite veličinu slika, spremite predmemoriranje stranica na web mjestu, optimizirajte fontove, prethodno se povežite na sve uključene web lokacije i još mnogo toga.

Kreditna kartica nije potrebna - sve što trebate je besplatno registrirati i isprobati. Osim toga, ako vaša web lokacija zarađuje od prikaznih oglasa, uz to što vašu web lokaciju čini mnogo bržom, oni također mogu zaraditi nekoliko puta više novca nego što je to slučaj s Google AdSenseom optimiziranjem oglasa uz mašinsko učenje i naprednu umjetnu inteligenciju.

Često Postavljana Pitanja

Kako eliminirati javascript i CSS koji blokiraju prikazuju u gore-preklopni sadržaj?
Da biste uklonili javascript i CSS koji blokiraju prikaz za gore-preklopni sadržaj, trebali biste osigurati da su JS i CSS datoteke učitane nakon što se HTML potpuno učita. To znači da ne pauzira postupak HTML učitavanja da biste preuzeli ove datoteke. JavaScript datoteke možete odložiti sa atributom asinc ili odložite, a za CSS možete koristiti određeni kod za učitavanje nakon HTML-a. Vanjski sistem optimizacije poput Ezoic takođe se može automatski podnijeti.
Kako web programeri mogu obratiti preporuku Google Pagespeed da bi se eliminirao javaScript i CSS prikaz koji blokiraju prikaz?
Web programeri mogu optimizirati svoju web lokaciju miniranjem JavaScript-a i CSS datoteka, koristeći asinhrono opterećenje za JavaScript, uplitanje kritičnih CSS-a izravno u HTML i odlaganje nekritičnih CSS i JavaScript datoteka. Implementacija ovih strategija može značajno poboljšati vremena učitavanja i ocjene prehrane.

Savršeni Chrome Svjetionik Score: Šta se događa?


Yoann Bierling
O autoru - Yoann Bierling
Yoann Bierling je web izdavaštvo i digitalni konsultantski profesionalac, čineći globalni učinak stručnošću i inovacijama u tehnologijama. Strastveni o osnaživanju pojedinca i organizacija da napreduju u digitalnom dobu, odvezen je da isporučuje izuzetne rezultate i rast pogona kroz izradu obrazovnih sadržaja.

Stvaranje master web stranice: upisati sada!

Pretvorite svoje digitalno prisustvo sa našim sveobuhvatnim tečajem za kreiranje web stranica - započnite svoj put da postanete web stručnjak danas!

Upisite se ovdje

Pretvorite svoje digitalno prisustvo sa našim sveobuhvatnim tečajem za kreiranje web stranica - započnite svoj put da postanete web stručnjak danas!




Komentari (8)

 2018-08-19 -  quranapk
Volim čitati vaš sadržaj i dalje objavljujte - pomoglo mi je popraviti CSS koji blokira prikaz rendera
 2018-09-23 -  Monica
Dakle, ovako to radimo, sjajno je znati kako riješiti uklanjanje resursa koji blokiraju generiranje
 2018-09-25 -  Van
Super, upravo sam to tražio, sada sam spreman da eliminiram resurse koji blokiraju prikazivanje na mobilnom uređaju
 2018-11-03 -  utumikaji0
Nevjerovatno, sada je vrijeme da to pokušam i popravim i eliminiram resurse koji blokiraju prikazivanje!
 2019-01-12 -  Leo
Ne znam kako da vam zahvalim, ali to je čisti genije, hvala - radio je na WordPressu kako bi uklonio izvore koji blokiraju generiranje
 2019-04-21 -  Ludanulema
Zdravo, vidio sam vaš članak i pomogao mi je da riješim problem eliminirajući resurse koji blokiraju prikazivanje na PHP-u, hvala
 2019-06-12 -  animeg2Q
Pokušat ću sada, hvala što ste podijelili ovo uklanjanje popravka resursa koji blokiraju prikazivanje
 2019-07-02 -  Gasfackele
Uspjelo mi je, nije potrebno dalje tražiti da eliminiram resurse koji blokiraju prikazivanje na HTML web lokaciji

Ostavite komentar