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.

[1] - PageSpeed ​​Insights - developers.google.com
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:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Odstrani JavaScript, ki blokira upodabljanje | PageSpeed ​​Insights | Dobri razvijalci - developers.google.com

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:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Optimizirajte dostavo CSS | PageSpeed ​​Insights | Dobri razvijalci - developers.google.com

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).

[4] - Popravite predpomnjenje brskalnika Google PageSpeed ​​v htaccess - Yoann Bierling, mednarodna svetovalka za SAP / splet - www.ybierling.com

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.

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.

Kako odstraniti JavaScript in CSS za blokiranje upodabljanja v WordPressu

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!

Leni nalaganje slik: Spletne slike se zahtevajo samo na strežnik, ko se uporabnik pomakne na spletno stran in jih lahko prikažete

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>
Lazy Loading - Web Performance - Mozilla Developer Network

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.

Aprila 2021 bo ezoic plačal hitrega pospeševalnik hitrosti, ki bo postal prost ezoic preskok, in pomoč spletnim mestom, ki so dosegli Core Web Vitals Zelene rezultate brezplačno!

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.

Perfect Chrome Lighthouse Score: Kaj se zgodi?





Komentarji (8)

 2018-08-19 -  quranapk
Obožujem branje vaše vsebine, še naprej objavljajte - pomagalo mi je popraviti CSS, ki blokira upodabljanje
 2018-09-23 -  Monica
Torej, kako to počnemo, super je vedeti, kako rešiti vire, ki blokirajo upodabljanje
 2018-09-25 -  Van
Odlično, točno to sem iskal, zdaj sem pripravljen odpraviti vire, ki blokirajo upodabljanje v mobilni napravi
 2018-11-03 -  utumikaji0
Neverjetno, zdaj je čas, da poskusim in odpravim vire, ki blokirajo upodabljanje!
 2019-01-12 -  Leo
Ne vem, kako bi se vam zahvalil, ampak to je čisto genialno, hvala - na WordPressu je odstranilo vire, ki blokirajo upodabljanje
 2019-04-21 -  Ludanulema
Živjo, videl sem tvoj članek in pomagal mi je rešiti težavo pri odpravi virov, ki blokirajo upodabljanje v PHP, hvala
 2019-06-12 -  animeg2Q
Poskusil bom zdaj, hvala za skupno rabo tega popravljanja virov, ki blokirajo upodabljanje
 2019-07-02 -  Gasfackele
Zame je delovalo dobro, ni treba iskati več, da bi odpravili vire, ki blokirajo upodabljanje, na spletnem mestu HTML

Pustite komentar