Popravite Google PageSpeed ​​Uklonite JavaScript i CSS koji blokiraju prikazivanje oglasa u gornjoj ponudi sadržaja

Test Google PageSpeed ​​[1] Uklonite JavaScript i CSS koji blokiraju prikazivanje oglasa u gornjoj ponudi sadržaja predlaže vam dostavljanje JS i CSS datoteka vaše web stranice nakon što je HTML u potpunosti učitan - pa stoga nemojte pauzirati učitavanje HTML-a da ih preuzmete.


Riješite blokiranje prikazivanja Javascript i CSS

Test  Google PageSpeed   ​​[1] Uklonite JavaScript i CSS koji blokiraju prikazivanje oglasa u gornjoj ponudi sadržaja predlaže vam dostavljanje JS i CSS datoteka vaše web stranice nakon što je HTML u potpunosti učitan - pa stoga nemojte pauzirati učitavanje HTML-a da ih preuzmete.

[1] - PageSpeed ​​Insights - developers.google.com
Definicija skripte za blokiranje generiranja: Skripte koje se učitavaju prije raščlanjivanja cijelog HTML DOM-a. Na primjer, skripte uključene u zaglavlje ili unutar sadržaja, bez ikakvih posebnih uputa za preglednike da odgode učitavanje skripte dok ne završi HTML boju.

Uklonite JavaScript i CSS koji blokira generiranje u sadržaju koji je preklopljen: pokažite kako ga popraviti

  1. Neka vanjski sustav optimizira vaše web mjesto za vas
  2. Upotrijebite CDN koji će u vaše ime izvršiti sve moguće optimizacije, uključujući tri sljedeće optimizacije potrebne za uklanjanje resursa koji blokiraju generiranje:
  3. Odgodi učitavanje Javascript datoteka
  4. Učitajte CSS nakon učitavanja HTML-a
  5. Upotrijebite dodatak za WordPress

Puno je optimizacija potrebnih da se popravi uklanjanje resursa koji blokiraju prikazivanje, a možda bi bilo dosadno sami ih primijeniti - 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. To se ne može pokrenuti u Htaccessu, već samo u HTML DOM sadržaju.

Ako riješite ove probleme za radnu površinu, istodobno ćete ukloniti 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

Kako bi se odgodio učitavanje vaših JS datoteka [2], možete dodati instrukcije async ili odgoditi veze skripti. Async neće jamčiti da su učitani u istom slijedu - stoga, ako imate nekoliko skripti koje bi trebale pokrenuti jedna za drugom, preporučuje se odgoditi kako bi se zajamčilo slijed:

[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 prijenosa punog HTML-a, Google predlaže [3] ovaj komad koda koji se dodaje na kraju HTML-a, na primjer nakon oznake zatvaranja zaglavlja i prije oznake zatvaranja tijela:

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

Kako bi se optimizirala vaša web-lokacija, također je dobra ideja ukloniti neiskorišteni CSS kod, operaciju koja može biti zamorna ako nemate znanja u web dizajnu. Ako niste stvorili temu web-lokacije sebe, to bi moglo biti mudriji koristiti vanjski sustav za uklanjanje neiskorištenog CSS kod na vašim stranicama u vaše ime, kao što je Ezoic skok na primjer, nova (i potpuno besplatna) verzija njihove nevjerojatne stranice Speed ​​Accelerator.

Prođite test brzine Google stranice!

To mi je omogućilo da prođem  Google PageSpeed   ​​[1] test Izbrišite JavaScript i CSS koji blokiraju prikazivačku mrežu u gornjoj mapi (zajedno s Iskoristivim predmemoriranjem preglednika [4]) na web stranici, koji se povećava od bodova od 51 na mobilnim uređajima ( Slika 1) do 72 (slika 2), a od 59 (slika 3) do 79 na radnoj površini (sl. 4).

[4] - Ispravite predmemoriranje preglednika Google PageSpeed ​​u htaccessu - Yoann Bierling, međunarodna savjetnica za SAP / web - www.ybierling.com

Kako eliminirati resurse koji blokiraju prikazivanje u programu WordPress

Da biste uklonili resurse koji blokiraju prikazivanje u programu WordPress, potrebno je instalirati dodatak 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 web-lokacije, ubrzajte vrijeme učitavanja slike, ubrzajte vrijeme učitavanja statičnih datoteka i omogućite lazno učitavanje za slike.

Master stvaranje web stranice: Upišite se odmah!

Preobrazite svoju digitalnu prisutnost s našim sveobuhvatnim tečajem za stvaranje web stranica - započnite svoj put da postanete danas web stručnjak!

Upišite se ovdje

Preobrazite svoju digitalnu prisutnost s našim sveobuhvatnim tečajem za stvaranje web stranica - započnite svoj put da postanete danas web stručnjak!

To će eliminirati resurse koji blokiraju prikazivanje u programu WordPress i učitati stranice brže dopuštajući JetPacku optimiziranje slika i posluživanje slika i statičnih datoteka (poput CSS-a i JavaScript-a) iz njihove globalne mreže poslužitelja.

Kako eliminirati JavaScript i CSS koji blokiraju prikazivanje na WordPressu

Također, ne zaboravite odgoditi učitavanje slika izvan zaslona pomoću funkcije lijenog opterećenja. Iako je nekad bilo teško i zahtijevati vanjsku knjižnicu za odgodu učitavanja slika izvan zaslona, ​​sada je moguće na početku u HTML5!

Lazy učitavanje slika: Slike web-mjesta zatražile su samo poslužitelju kada se korisnik pomiče na web-stranici i mogu ih prikazati

Za implementaciju lijenog učitavanja slika na vaše web-lokacije, jednostavno dodajte vrijednosti lijen na atribute učitavanje slika na web-lokaciji, a nedavni preglednici će shvatiti da se te slike trebaju tražiti samo ako se prikazuju, što znači da se korisnik sviđa dolje slika mjesta.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy učitavanje - web performanse - Mozilla Developer mreža

Povrh toga, lijeno učitavanje također radi s Iframesom i važna je implementacija za uklanjanje resursa za blokiranje render-a iz vaših web stranica.

Nakon što će blokiranje renderiranja imati upute za učitavanje nakon glavnog sadržaja, što znači HTML dom, već ćete zaraditi mnogo bodova na testu Google Svjetionik, test stranice brzine uvida, ili Google jezgre web vitali.

Neka vanjski sustav optimizira web mjesto za vas

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

Pomoću 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 travnju 2021., ezoic platio suđe mjesto ubrzivač će postati besplatan Ezoic skok, a pomoći web-mjesta dosežu jezgre web vitali zelenih rezultata 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že slike nove generacije webp, optimizira 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 stranice i još mnogo toga.

Nije potrebna kreditna kartica - sve što trebate je registrirati besplatno i isprobati je. Osim toga, ako vaša web lokacija zarađuje od prikaznih oglasa, uz to što web mjesto čini mnogo bržim, oni mogu i zaraditi nekoliko puta više novca nego što to čini Google AdSense optimiziranjem oglasa uz mašinsko učenje i naprednu umjetnu inteligenciju.

Često Postavljana Pitanja

Kako eliminirati JavaScript i CSS koji blokira render u iznad puta sadržaja?
Da biste eliminirali JavaScript i CSS koji blokira render za gore naklonjeni sadržaj, trebali biste osigurati da se JS i CSS datoteke vaše web stranice učitavaju nakon što se HTML u potpunosti učitava. To znači da ne pauziranje HTML postupka učitavanja za preuzimanje ovih datoteka. Možete odgoditi JavaScript datoteke s atributom Async ili Defer, a za CSS možete koristiti određeni kôd za učitavanje nakon HTML -a. Vanjski sustav za optimizaciju poput Ezoic također se može automatski nositi s tim.
Kako se web programeri mogu pozabaviti preporukom Google PageSpeed-a za uklanjanje JavaScript-a i CSS-a?
Web programeri mogu optimizirati svoju web lokaciju minimaliranjem JavaScript i CSS datoteka, koristeći asinhrono učitavanje za JavaScript, ugrađujući kritične CS-ove izravno u HTML i odgodu učitavanja nekritičnih CSS i JavaScript datoteka. Provedba ovih strategija može značajno poboljšati vrijeme utovara i bodove PageSpeed.

Savršen Chrome Svjetionik Rezultat: Što se događa?


Yoann Bierling
O autoru - Yoann Bierling
Yoann Bierling je stručnjak za web objavljivanje i digitalno savjetovanje, što čini globalni utjecaj kroz stručnost i inovacije u tehnologijama. Strah od osnaživanja pojedinaca i organizacija da napreduju u digitalnom dobu, potaknut je da postigne izuzetne rezultate i postigne rast kroz stvaranje obrazovnog sadržaja.

Master stvaranje web stranice: Upišite se odmah!

Preobrazite svoju digitalnu prisutnost s našim sveobuhvatnim tečajem za stvaranje web stranica - započnite svoj put da postanete danas web stručnjak!

Upišite se ovdje

Preobrazite svoju digitalnu prisutnost s našim sveobuhvatnim tečajem za stvaranje web stranica - započnite svoj put da postanete danas web stručnjak!




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 eliminirati resurse koji blokiraju generiranje na mobitelu
 2018-11-03 -  utumikaji0
Nevjerojatno, sada je vrijeme da to pokušam i popravim i eliminiram resurse koji blokiraju prikazivanje!
 2019-01-12 -  Leo
Ne znam kako vam zahvaliti, ali to je čisti genij, 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 generiranje na PHP-u, hvala
 2019-06-12 -  animeg2Q
Pokušat ću sada, hvala što ste podijelili ovaj popravak uklanjanja resursa koji blokiraju generiranje
 2019-07-02 -  Gasfackele
Uspjelo mi je, nije potrebno tražiti dalje kako bih eliminirao resurse koji blokiraju generiranje na HTML web mjestu

Ostavite komentar