Korjaa Google-sivunopeus Poista JavaScript-ja CSS-renderoinnin estäminen yläosassa



Ratkaise renderöinnin estävä Javascript ja CSS

Googlen PageSpeed ​​[1] -testi Eliminoi JavaScriptin ja CSS: n renderointia estävän sisällön yläpuolella ehdottaa, että toimitat sivustosi JS- ja CSS-tiedostot sen jälkeen, kun HTML on ladattu täyteen. Älä siis keskeytä HTML-latausta ladata ne.

[1] - PageSpeed ​​Insights - developers.google.com
Renderöintiä estävän komentosarjan määritelmä: Komentosarjat, jotka ladataan ennen kuin koko HTML DOM on jäsennelty. Esimerkiksi komentotiedostot, jotka sisältyvät otsikkoon tai sisältöön, ilman selaimille annettuja erityisiä ohjeita komentojonojen lataamisen viivästyttämisestä HTML-maalin jälkeen.

Poista renderöinti estävät JavaScript ja CSS sivun yläosasta: näytä kuinka korjata se

  1. Pyydä ulkoista järjestelmää optimoimaan verkkosivustosi puolestasi
  2. Käytä CDN: ää, joka suorittaa kaikki mahdolliset optimoinnit puolestasi, mukaan lukien kolme seuraavaa optimointia, jotka ovat tarpeen renderointia estävien resurssien korjaamiseksi:
  3. Lykkää Javascript-tiedostojen lataamista
  4. Lataa CSS HTML-latauksen jälkeen
  5. Käytä WordPress-laajennusta

Renderöintiä estävien resurssien poistamiseksi tarvitaan paljon optimointeja, ja saattaa olla hankalaa toteuttaa ne itse - ja sinun on jatkuvasti etsittävä uusia testejä, jotka sisältyvät Chrome LightHouseen ja Google PageSpeediin muiden sivunopeustestien joukossa.

Ei ole olemassa olemassa olevaa ratkaisua renderöintiä estävien resurssien poistamiseksi htaccess-koodista, koska asia liittyy DOM: iin, eli verkkosivuston sisältöön ja järjestykseen, johon mukana olevat resurssit, kuten Javascript ja CSS, ladataan, mutta ei vain. Näitä ei voida laukaista Htaccessissa, vaan vain HTML DOM -sisällössä.

Jos ratkaiset nämä asiat työpöydälle, eliminoit samalla renderöinnin estävät resurssit mobiililaitteille, koska molemmat ovat täsmälleen samat!

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

Luo Javascript-tiedostojen lataus

JS-tiedostojen [2] kuormituksen lykkäämiseksi voit lisätä asynk- tai lykkäysopastuksen komentosarjoihisi. Async ei takaa, että ne ladataan samaan järjestykseen - siis, jos sinulla on useita skriptejä, joiden pitäisi toimia peräkkäin, lykätä on parempi taata sekvenssi:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Poista renderöinti estävä JavaScript | PageSpeed ​​Insights | Hyvät kehittäjät - developers.google.com

Lataa CSS HTML-latauksen jälkeen

Jotta CSS ladataan täyden HTML-koodin lähettämisen jälkeen, Google ehdottaa [3] koodin lisäämistä HTML-koodin loppuun, esimerkiksi alatunnisteen sulkemisen jälkeen ja ennen kehon sulkemistarinaa:

</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] - Optimoi CSS-toimitus | PageSpeed ​​Insights | Hyvät kehittäjät - developers.google.com

Verkkosivuston optimoimiseksi on myös hyvä idea poistaa käyttämättömät CSS-koodi, joka voi olla ikävä, jos sinulla ei ole tietoa web-suunnittelussa. Jos et ole luonut sivuston teemaa itse, voi olla viisaampi käyttää ulkoista järjestelmää käyttämättömän CSS-koodin poistamiseksi sivuillesi puolestasi, kuten EZOIC LEAP esim. Uusi (ja täysin ilmainen) versio niiden hämmästyttävästä sivustosta Nopeuden kiihdytin.

Läpäise Google-sivuston nopeustesti!

Tämä antoi minulle mahdollisuuden siirtää Googlen PageSpeed ​​[1] -testi Eliminoida JavaScript-ja CSS-ominaisuuden estotoiminto ylhäältä-kertaisella sisällöllä (samoin Leverage browser caching [4]) sivustossa, nousemalla 51: stä mobiilipeleistä ( Kuvasta 1) 72: een (kuvio 2) ja ylös 59: sta (kuvio 3) 79: een työpöydälle (kuva 4).

[4] - Korjaa Google PageSpeed ​​-ominaisuus käyttää selaimen välimuistia htaccessissa - Yoann Bierling, kansainvälinen SAP / verkkokonsultti - www.ybierling.com

Miten poistaa esto-esto-resurssit WordPressissa

Jotta WordPressissa voidaan poistaa renderöinnin estävät resurssit, on asennettava plugin, kuten JetPack.

Siirry sitten valintoihin, joiden on oltava järjestelmänvalvoja, ja siirry JetPack-asetuksiin> Kirjoittaminen> Suorituskyky ja nopeus> Tarkista Ota sivuston kiihdytin käyttöön, nopeuta kuvien latausaikoja, nopeuta staattisen tiedoston latausaikoja ja ota laiska lataus käyttöön kuvia.

Näin poistetaan WordPress-ohjelmiston resurssien esto ja ladataan sivuja nopeammin sallimalla JetPackin optimoida kuvasi ja palvelemaan kuvia ja staattisia tiedostoja (kuten CSS ja JavaScript) niiden maailmanlaajuisesta palvelinverkostosta.

Kuinka poistaa JavaScript-esto ja CSS WordPressissa

Älä myöskään unohda lykätä kuvia kuvien off-näyttöä laiska kuormitustoiminnon avulla. Vaikka se oli aiemmin vaikeaa ja edellyttää ulkoista kirjastoa lykkäämällä kuvien off-näytön lataamiseen, se on nyt mahdollisia HTML5: ssä!

Kuvien laiska lastaus: Verkkosivuston kuvia pyydetään vain palvelimelle, kun käyttäjä selaa verkkosivulla ja saattaa näyttää ne

Voit toteuttaa laiskoja kuvia verkkosivustoillasi. Lisää arvot laiska arvot sivuston kuvien lataamiseen ja viimeisimmät selaimet ymmärtävät, että näitä kuvia olisi pyydettävä ja ladattava vain, jos ne näytetään, mikä tarkoittaa, että käyttäjä selaa alas kuvan paikkamerkit.

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

Tämän lisäksi laiska lastaus toimii myös IFRAMESin kanssa ja on tärkeä toteutus poistaa resurssit verkkosivuiltasi.

Kun renderointiresurssit ovat ohjeita, jotka latautuvat pääasiallisen sisällön jälkeen, eli HTML Dom, voit jo paljon pisteitä Google Lighthouse -testissä, sivun nopeudenkäynnin testi tai Google Core Web -raussit.

Pyydä ulkoista järjestelmää optimoimaan verkkosivustosi puolestasi

Tiesitkö, että saatat todellakin ratkaista kaikki  Google PageSpeed ‌  ​​-ongelmat puolestasi ilman paljon vaivaa sivustoltasi - paitsi rekisteröidäksesi ilmaiseksi kokeilujaksi ja muuttaaksesi DNS-osoitettasi?

Käyttämällä Ezoic-alustan Site Speed ​​Accelerator -teknologiaa kaikki tavalliset  Google PageSpeed ‌  ​​-ongelmat ratkaistaan ​​heidän järjestelmässään, joka on välittäjänä verkkosivustosi ja kävijöiden välillä. He optimoivat verkkosivun sinulle ennen kuin näyttävät sen vierailijalle.

Huhtikuussa 2021 EZOIC Paid Speed ​​Kiihdytin tulee ilmainen EZOIC-harppaus ja auttaa verkkosivustoja, jotka saavuttavat Core Web Vitals Green -tulokset veloituksetta!

Tule vihreäksi rekisteröimällä ilmainen kokeilu Ezoic-alustalle ja kokeile sitä itse - he saavat verkkosivustosi saavuttamaan sivunopeuden optimoinnin korkeimmat standardit muutamassa päivässä: tekevät seuraavan sukupolven webp-kuvia, optimoi CSS: n ja JavaScriptin poistamalla käyttämättömän CSS: n. ja JS, laiska lataa kuvia, koon muuttaminen, välimuisti sivustosi sivuilla, optimoi fontit, muodosta yhteys esiin kaikkiin mukana oleviin sivustoihin ja paljon muuta.

Luottokorttia ei tarvita - sinun tarvitsee vain rekisteröidä ilmaiseksi ja kokeilla sitä. Lisäksi, jos verkkosivustosi ansaitsee rahaa näyttömainoksista, sen lisäksi, että lisäät verkkosivustosi paljon nopeammin, ne voivat myös ansaita useita kertoja enemmän rahaa kuin Google AdSense: llä optimoimalla mainoksesi koneoppimisella ja edistyneellä keinotekoisella älykkyydellä.

Täydellinen Chrome Lighthouse Pisteet: Mitä tapahtuu?





Kommentit (8)

 2018-08-19 -  quranapk
Rakastan lukea sisältöäsi jatkuvasti lähettämässä - se auttoi minua korjaamaan CSS: n estävän renderöinnin
 2018-09-23 -  Monica
Joten näin teemme, on hienoa tietää, miten ratkaista estävät resurssit voidaan ratkaista
 2018-09-25 -  Van
Hienoa, juuri sitä etsin, nyt olen valmis poistamaan renderointia estävät resurssit mobiililaitteella
 2018-11-03 -  utumikaji0
Hämmästyttävää, nyt minun on aika kokeilla sitä ja korjata poistaa renderointia estävät resurssit!
 2019-01-12 -  Leo
En tiedä miten kiittää sinua, mutta se on puhdas nero, kiitos - se toimi WordPressin kanssa poistamaan renderöinnin estävät resurssit
 2019-04-21 -  Ludanulema
Hei, näin artikkelisi ja se auttoi minua ratkaisemaan ongelman poistamalla renderointia estävät resurssit PHP: ltä, kiitos
 2019-06-12 -  animeg2Q
Yritän nyt, kiitos, että jaoit tämän poistaaksesi renderöinnin estävät resurssit
 2019-07-02 -  Gasfackele
Se toimi minulle hyvin, ei tarvitse etsiä enää HTML-verkkosivuston renderointia estävien resurssien poistamiseksi

Jätä kommentti