Popravite Google PageSpeed ​​Odpravite JavaScript in CSS, ki blokira renderje, v zgornji vsebini

Rešite blokiranje upodabljanja Javascript in CSS

Preskus  Google PageSpeed   ​​[1] Odpravi JavaScript in CSS, ki blokira renderje, v zgornji vsebini vam predlagata, da predate HTML-je in celotno datoteko vašega spletnega mesta, in tako ne zaustavite nalaganja HTML-ja da jih prenesete.

Opredelitev skripta za blokiranje upodabljanja: Skripti, ki se naložijo pred razčlenitvijo celotnega DOM-a HTML. Na primer skripti, vključeni v glavo ali znotraj vsebine, brez posebnih navodil za brskalnike, da odložijo nalaganje skriptov, dokler ne pride do barve HTML.

Odpravite JavaScript in CSS, ki blokira upodabljanje, v vsebini, ki je zgoraj prikazana: pokažite, kako jo lahko popravite

1. Naj zunanji sistem optimizira vaše spletno mesto za vas
   
2. Uporabite CDN, ki bo v vašem imenu izvedel vse možne optimizacije, vključno s tremi naslednjimi optimizacijami, potrebnimi za odpravo virov, ki blokirajo upodabljanje:
   
3. Preloži nalaganje datotek Javascript
   
4. Naloži CSS po nalaganju HTML-ja
   
5. Uporabite vtičnik WordPress
   

Za odpravo virov, ki blokirajo upodabljanje, je potrebnih veliko optimizacij, zato bi jih bilo dolgočasno izvajati sami - poleg tega boste morali med drugimi preskusi hitrosti strani nenehno paziti na nove teste, vključene v Chrome LightHouse in Google PageSpeed.

Za odpravo virov, ki blokirajo upodabljanje, v kodi htaccess ni obstoječe rešitve, ker je težava povezana z DOM, kar pomeni vsebino spletnega mesta in vrstni red nalaganja vključenih virov, kot sta Javascript in CSS, vendar ne samo. Tega ni mogoče sprožiti v Htaccessu, ampak samo v vsebini HTML DOM.

Če boste te težave rešili za namizje, boste hkrati odpravili vire, ki blokirajo upodabljanje za mobilne naprave, saj sta oba popolnoma enaka!

Did you know that you can even have all these steps executed automatically for you by using an external Hitri pospeševalec spletnega mesta 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!

Odloži datoteke Javascript

Da bi odložili obremenitev vaših datotek JS [2], lahko dodate ukaz async ali deferer na svoje skripte. Async ne jamči, da so naloženi v isto zaporedje - zato, če imate več skript, ki bi se morali zagnati ena za drugo, je odlaganje bolje, da se zagotovi zaporedje:

Po nalaganju HTML naložite CSS

Če želite CSS naložiti po prenosu celotnega HTML-ja, Google predlaga [3] to kodo, ki jo želite dodati na koncu HTML-ja, na primer po zaključni oznaki noge in pred oznako za zapiranje telesa:

Da bi optimizirali vašo spletno stran, je to tudi dobra ideja odstraniti neuporabljeno kodo CSS, operacijo, ki je lahko dolgočasna, če nimate znanja v spletnem oblikovanju. Če niste sami ustvarili teme spletnega mesta, je morda pametna za uporabo zunanjega sistema za odstranitev neuporabljene CSS kode na vaših straneh v vašem imenu, kot je Ezoic Leap na primer, novo (in popolnoma brezplačno) različica njihovega neverjetnega mesta Pospeševalnik hitrosti.

Opravite test hitrosti Googlovega spletnega mesta!

To mi je omogočilo, da uspešno opravim test  Google PageSpeed   ​​[1] Odpravite JavaScript in CSS, ki blokira renderje, v zgornji vsebini (skupaj s predpomnilnikom brskalnika Leverage [4]) na spletnem mestu, in sicer s številko 51 na mobilnem telefonu Sl. 1) do 72 (slika 2) in od 59 (slika 3) do 79 na namizju (slika 4).

Kako odpraviti blokiranje virov v WordPressu

Da bi v WordPressu odstranili vire za blokiranje upodabljanja, morate namestiti vtičnik, kot je JetPack.

Nato pojdite na možnosti, za katere morate biti skrbnik, in pojdite na možnosti JetPack> Pisanje> Učinkovitost in hitrost> preverite Omogoči pospeševalnik mesta, pospešite čas nalaganja slik, pospešite statične obremenitve datotek in omogočite lazno nalaganje za slik.

Ustvarjanje glavnega spletnega mesta: Vpišite se zdaj!

Preoblikujte svojo digitalno prisotnost z našim celovitim tečajem ustvarjanja spletnih strani - začnite svojo pot, da postanete danes spletni strokovnjak!

Vpišite se tukaj

To bo odpravilo sredstva za blokiranje upodabljanja v WordPressu in hitrejše nalaganje strani, tako da bo JetPack optimiziral vaše slike in prikazoval slike in statične datoteke (kot sta CSS in JavaScript) iz njihovega globalnega omrežja strežnikov.

Prav tako ne pozabite, da odložite nalaganje slik izven zaslona z uporabo lene funkcije obremenitve. Medtem ko je bila težavna in zahteva zunanja knjižnica, da odloži nalaganje slik Off-Screen, je zdaj možno na HTML5!

Za izvajanje leni nalaganje slik na vaše spletne strani, preprosto dodajte vrednosti leni na atribute nalaganje vaših spletnih strani slik, nedavni brskalniki pa bodo razumeli, da se te slike zahtevajo in naložijo, če se prikažejo, kar pomeni, če se uporabnik pomakne navzdol imetnike slik.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Poleg tega, leni nakladanje deluje tudi z Iframes, in je pomembno izvajanje za odpravo virov blokiranja upodabljanja iz vaših spletnih strani.

Ko bodo viri blokiranja upodabljanja nalagali navodila za nalaganje po glavni vsebini, kar pomeni HTML DOM, boste že zaslužili veliko točk na Googlovem testu Lighthouse, preskus hitrosti s hitrostjo, ali Google Core Web Vitals.

Naj zunanji sistem optimizira vaše spletno mesto za vas

Ali veste, da bi lahko dejansko v vašem imenu rešili vse težave, povezane z Googlovim spletnim strežnikom, brez velikega truda na svojem spletnem mestu - razen če se registrirate za brezplačno preskusno različico in spremenite svoj DNS?

Z uporabo tehnologije Ezoic platform Speed ​​Accelerator bo vse običajne težave z  Google PageSpeed   ​​rešil njihov sistem, ki bo posrednik med vašo spletno stranjo in obiskovalci. Optimizirali bodo spletno stran za vas, preden jo prikažejo obiskovalcu.

Postanite zeleni tako, da se preprosto registrirate za brezplačno preskusno različico na platformi Ezoic in preizkusite sami - na vašem spletnem mestu bodo dosegli najvišje standarde optimizacije hitrosti strani v nekaj dneh: upodabljajo slike nove generacije webp, optimizirajo CSS in JavaScript, tako da odstranijo neuporabljen CSS in JS, leno nalagate slike, spremenite velikost slik, predpomnite strani svojih strani, optimizirajte pisave, se predhodno povežite na vsa vključena spletna mesta in še veliko več.

Kreditna kartica ni potrebna - vse, kar morate storiti, je, da se brezplačno registrirate in poskusite. Če vaše spletno mesto zasluži z prikaznimi oglasi, poleg tega, da bo vaše spletno mesto veliko hitrejše, lahko z optimizacijo oglasov s strojnim učenjem in naprednim umetnim namenom zaslužite tudi nekajkrat več denarja kot pri Googlu AdSense.

Pogosto Zastavljena Vprašanja

Kako odpraviti JavaScript in CSS, ki blokirajo v zgornji vsebini?

Če želite odpraviti javascript in CSS za odpravo za zgoraj navedeno vsebino, bi morali zagotoviti, da se datoteke JS in CSS vašega spletnega mesta naložijo, ko je HTML v celoti naložen. To pomeni, da ne zaustavite postopka nalaganja HTML za prenos teh datotek. Datoteke JavaScript lahko odložite z atributom Async ali Defer, za CSS pa lahko s posebno kodo naložite po HTML. Zunanji sistem optimizacije, kot je Ezoic, lahko to tudi samodejno reši.

Kako lahko spletni razvijalci obravnavajo priporočilo Google PageSpeed, da odpravi JavaScript in CSS, ki blokira upodobitev?

Spletni razvijalci lahko svoje spletno mesto optimizirajo tako, da čistijo datoteke JavaScript in CSS z uporabo asinhronega nalaganja za JavaScript, vgradijo kritični CSS neposredno v HTML in odložijo nalaganje nekritičnih datotek CSS in JavaScript. Izvajanje teh strategij lahko znatno izboljša čas nalaganja in rezultate PageSpeed.

Perfect Chrome Lighthouse Score: Kaj se zgodi?