Fix Google PageSpeed ​​Novērst renderēšanas bloķēšanu JavaScript un CSS, izmantojot augstākā līmeņa saturu

Google PageSpeed ​​[1] tests Izvairieties no renderēšanas bloķēšanas JavaScript un CSS augšējā kārtā saturošā satura piedāvā, lai jūsu vietnes JS un CSS faili tiktu rādīti pēc tam, kad HTML ir pilnībā ielādēts, un tādēļ neuztrauciet HTML ielādi lai tos lejupielādētu.


Atrisiniet renderēšanas bloķēšanu Javascript un CSS

Google PageSpeed ​​[1] tests Izvairieties no renderēšanas bloķēšanas JavaScript un CSS augšējā kārtā saturošā satura piedāvā, lai jūsu vietnes JS un CSS faili tiktu rādīti pēc tam, kad HTML ir pilnībā ielādēts, un tādēļ neuztrauciet HTML ielādi lai tos lejupielādētu.

[1] - PageSpeed ​​Insights - developers.google.com
Renderēšanas bloķējošo skriptu definīcija: skripti, kas tiek ielādēti pirms pilna HTML DOM parsēšanas. Piemēram, skripti, kas iekļauti galvenē vai saturā, bez īpašas instrukcijas pārlūkprogrammām atlikt skriptu ielādi līdz HTML krāsošanai.

Novērst renderēšanu bloķējošos JavaScript un CSS satura augšdaļā: parādiet, kā to salabot

  1. Ļaujiet ārējai sistēmai optimizēt savu vietni jūsu vietā
  2. Izmantojiet CDN, kas jūsu vārdā veiks visas iespējamās optimizācijas, tostarp trīs tālāk norādītās optimizācijas, kas nepieciešamas renderēšanas bloķējošu resursu novēršanai:
  3. Atlikt Javascript failu ielādi
  4. Pēc HTML ielādes ielādējiet CSS
  5. Izmantojiet WordPress spraudni

Lai novērstu renderēšanu bloķējošos resursus, ir nepieciešamas daudzas optimizācijas, un tas var būt garlaicīgs, lai pats tos ieviestu - turklāt jums būs nepārtraukti jāmeklē jaunie testi, kas iekļauti Chrome LightHouse un Google PageSpeed, kā arī citi lapu ātruma testi.

Nav nekāda risinājuma, lai htaccess kodā novērstu renderēšanu bloķējošus resursus, jo problēma ir saistīta ar DOM, kas nozīmē vietnes saturu un secību, kādā tiek ielādēti iekļauti resursi, piemēram, Javascript un CSS, bet ne tikai. Tos nevar aktivizēt vietnē Htaccess, bet tikai HTML DOM saturā.

Ja jūs atrisināsiet šīs problēmas darbvirsmā, jūs vienlaikus novērsīsit renderēšanu bloķējošos resursus mobilajām ierīcēm, jo ​​abi ir pilnīgi vienādi!

Did you know that you can even have all these steps executed automatically for you by using an external  Vietnes ātruma paātrinātājs   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!

Javascript failu ielāde tiek atlikta

Lai atliktu jūsu JS failu slodzi [2], jūs varat pievienot async vai atlikt norādījumus saviem skriptu saitēm. Async negarantēs, ka tie tiek ielādēti vienā secībā, tādēļ, ja jums ir vairāki skripti, kuriem vajadzētu palaist vienu pēc otra, vēlams atlikt, lai nodrošinātu secību:

[2] - Noņemt renderēšanu bloķējošo JavaScript | PageSpeed ​​Insights | Labi izstrādātāji - developers.google.com

Pēc HTML ielādēšanas ielādējiet CSS

Lai CSS, kas tiek ielādēts pēc pilna HTML pārraides, Google piedāvā [3] šo koda daļu, kas jāpievieno HTML beigās, piemēram, pēc kājenes aizvēršanas taga un pirms ķermeņa aizvēršanas taga:

[3] - optimizēt CSS piegādi PageSpeed ​​Insights | Labi izstrādātāji - developers.google.com

Lai optimizētu jūsu vietni, tā ir arī laba ideja, lai noņemtu neizmantoto CSS kodu, darbību, kas var būt garlaicīgs, ja jums nav zināšanu web dizains. Ja neesat izveidojis savu tīmekļa vietnes tēmu, tas varētu būt gudrāks, lai izmantotu ārējo sistēmu, lai noņemtu neizmantoto CSS kodu jūsu vārdā, piemēram, Ezoic Leap, piemēram, jaunā (un pilnīgi brīva) versija viņu apbrīnojamo vietni Ātruma paātrinātājs.

Iziet Google vietnes ātruma testu!

Tas ļāva mani izsniegt  Google PageSpeed   ​​[1] testu. Noņemiet renderēšanas bloķēšanu JavaScript un CSS augšējā saraksta saturā (kopā ar sviras pārlūka kešatmiņu [4]) vietnē, pieaugot no 51 vietnes mobilajās ierīcēs ( Attēls 1) līdz 72 (attēls 2) un uz augšu no 59 (3.att.) Līdz 79 uz galda (4.attēls).

[4] - Labojiet Google PageSpeed, izmantojot pārlūka kešatmiņu, izmantojot htaccess - Yoann Bierling, Starptautiskais SAP / tīmekļa konsultants - www.ybierling.com

Kā novērst resursu bloķēšanas resursus programmā WordPress

Lai novērstu WordPress resursus, kas padara bloķēšanu, ir nepieciešams instalēt spraudni, piemēram, JetPack.

Pēc tam dodieties uz opcijām, kurām jābūt administratoram, un dodieties uz JetPack opcijām> Rakstīšana> Veiktspēja un ātrums> Pārbaudiet Iespējot vietnes paātrinātāju, paātriniet attēlu ielādes laiku, paātriniet statisko failu ielādes laiku un iespējojiet slinku ielādi attēlus.

Uzziniet SEO pamatus: reģistrējieties jau šodien!

Palieliniet savas vietnes redzamību un trafiku, apgūstot SEO pamatus ar mūsu viegli izpildāmajiem pamatiem.

Sāciet mācīties SEO

Palieliniet savas vietnes redzamību un trafiku, apgūstot SEO pamatus ar mūsu viegli izpildāmajiem pamatiem.

Tas novērsīs resursus, kas bloķē WordPress resursus un ielādē lapas ātrāk, ļaujot JetPack optimizēt attēlus un apkalpot savus attēlus un statiskos failus (piemēram, CSS un JavaScript) no globālā servera tīkla.

Kā likvidēt JavaScript un CSS bloķēšanu programmā WordPress

Neaizmirstiet atlikt attēlus no ekrāna, izmantojot slinks slodzes funkciju. Lai gan tas bija grūti un nepieciešams, lai ārējo bibliotēku atlikt ielādējot attēlus ārpus ekrāna, tagad ir iespējams dabiski HTML5!

Lazy ielāde attēli: mājas attēli tiek pieprasīti tikai serverim, kad lietotājs ritiniet uz tīmekļa lapu un var parādīt tos

Lai ieviestu slinks ielādes attēlus jūsu mājas lapas, vienkārši pievienot vērtības slinks uz atribūtiem jūsu mājas lapā attēlus, un jaunākās pārlūkprogrammas sapratīs, ka šie attēli būtu jāpieprasa un jāielādē tikai tad, ja tie tiek parādīti, kas nozīmē, ka, ja lietotājs ritina uz leju Attēla vietnieki.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
Lazy Loading - Web Performance - Mozilla izstrādātāja tīkls

Papildus tam, slinks ielāde darbojas arī ar iFrames, un tā ir svarīga īstenošana, lai novērstu render-bloķējošus resursus no jūsu tīmekļa lapām.

Kad renderēšanas bloķējošie resursi būs instrukcijas pēc galvenā satura, kas nozīmē HTML DOM, jūs jau nopelnīsiet daudz punktus Google Lighthouse testā, lapas ātruma ieskatu tests vai Google Core Web Vitals.

Vai jums ir ārēja sistēma, kas jūsu vietni optimizē

Vai jūs zināt, ka faktiski visas  Google PageSpeed   ​​problēmas jūs varētu atrisināt jūsu vārdā bez lielas pūles no savas vietnes - izņemot reģistrēšanos bezmaksas izmēģinājumam un DNS maiņu?

Izmantojot Ezoic platformas vietnes ātruma paātrinātāja tehnoloģiju, visas parastās  Google PageSpeed   ​​problēmas atrisinās viņu sistēma, kas būs starpnieks starp jūsu vietni un apmeklētājiem. Viņi optimizēs tīmekļa lapu, lai jūs to parādītu jūsu apmeklētājam.

2021. gada aprīlī Ezoic maksā vietnes ātruma paātrinātājs kļūs par bezmaksas Ezoic lēcienu un palīdzēs tīmekļa vietnēm sasniegt galvenos Web Vitals Green rādītājus bez maksas!

Kļūstiet zaļš, vienkārši reģistrējoties bezmaksas izmēģinājumam vietnē Ezoic un izmēģiniet to pats - dažu dienu laikā jūsu vietne sasniegs visaugstākos lapas ātruma optimizācijas standartus: padarīs nākamās paaudzes tīmekļa attēlus, optimizēs CSS un JavaScript, noņemot neizmantoto CSS. un JS, slinki ielādējiet attēlus, mainiet attēlu izmērus, saglabājiet vietnes lapu kešatmiņā, optimizējiet fontus, iepriekš izveidojiet savienojumu ar visām jūsu iekļautajām vietnēm un vēl daudz vairāk.

Kredītkarte nav nepieciešama - viss, kas jums jādara, ir reģistrēties bez maksas un izmēģināt. Turklāt, ja jūsu vietne nopelna naudu no attēla reklāmām, papildus tam, ka vietne tiek padarīta daudz ātrāka, tās var arī dot jums iespēju nopelnīt vairākas reizes vairāk naudas nekā jūs nodarbojaties ar Google AdSense, optimizējot savas reklāmas ar mašīnmācīšanos un modernu mākslīgo intelektu.

Bieži Uzdotie Jautājumi

Kā novērst renderēšanas bloķēšanu JavaScript un CSS virsotnē?
Lai novērstu renderēšanas bloķēšanu JavaScript un CSS iepriekšējam saturam, jums jāpārliecinās, ka jūsu vietnes JS un CSS faili tiek ielādēti pēc HTML pilnībā ielādēšanas. Tas nozīmē, ka šo failu lejupielādēšanai nav apturēta HTML ielādes procesa apturēšana. Javascript failus var atlikt ar Async vai atlikt atribūtu, un CSS varat izmantot īpašu kodu, lai to ielādētu pēc HTML. To automātiski var apstrādāt arī ārēja optimizācijas sistēma, piemēram, Ezoic.
Kā tīmekļa izstrādātāji var uzrunāt Google PageSpeed ​​ieteikumu novērst Render bloķējošus JavaScript un CSS?
Tīmekļa izstrādātāji var optimizēt savu vietni, minificējot JavaScript un CSS failus, izmantojot asinhronu JavaScript ielādi, iekļaujot kritisko CSS tieši HTML un atliekot nekritisku CSS un JavaScript failu ielādi. Šo stratēģiju ieviešana var ievērojami uzlabot iekraušanas laiku un lapu rādītājus.

Perfect Chrome Lighthouse Score: Kas notiek?


Yoann Bierling
Par autoru - Yoann Bierling
Yoann Bierling ir tīmekļa izdošanas un digitālo konsultāciju profesionālis, kas globāli ietekmē zināšanas un inovācijas tehnoloģijās. Kaislīgi dodot iespēju indivīdiem un organizācijām attīstīties digitālajā laikmetā, viņš tiek virzīts, lai sniegtu izcilus rezultātus un izaugtu, izmantojot izglītības satura izveidi.

Uzziniet SEO pamatus: reģistrējieties jau šodien!

Palieliniet savas vietnes redzamību un trafiku, apgūstot SEO pamatus ar mūsu viegli izpildāmajiem pamatiem.

Sāciet mācīties SEO

Palieliniet savas vietnes redzamību un trafiku, apgūstot SEO pamatus ar mūsu viegli izpildāmajiem pamatiem.




Komentāri (8)

 2018-08-19 -  quranapk
Patīk lasīt jūsu saturu, turpiniet publicēšanu - tas man palīdzēja izlabot renderēšanas bloķēšanas CSS
 2018-09-23 -  Monica
Tā mēs to darām, ir lieliski zināt, kā atrisināt renderēšanu bloķējošos resursus
 2018-09-25 -  Van
Lieliski, tieši to es meklēju, tagad esmu gatavs likvidēt renderēšanu bloķējošos resursus mobilajā ierīcē
 2018-11-03 -  utumikaji0
Pārsteidzoši, tagad man ir pienācis laiks to izmēģināt un novērst kļūdas, kas bloķē renderēšanu!
 2019-01-12 -  Leo
Nezinu, kā jums pateikties, bet tas ir tīrs ģēnijs, paldies - tas strādāja pie WordPress, lai noņemtu renderēšanas bloķēšanas resursus
 2019-04-21 -  Ludanulema
Sveiki, es redzēju jūsu rakstu, un tas man palīdzēja atrisināt problēmu, lai novērstu renderēšanu bloķējošos resursus PHP, paldies
 2019-06-12 -  animeg2Q
Es to izmēģināšu tagad, paldies, ka kopīgojāt šo renderēšanas bloķējošo resursu novēršanu
 2019-07-02 -  Gasfackele
Tas man darbojās labi, vairs nav jāmeklē, lai HTML vietnē novērstu renderēšanu bloķējošos resursus

Atstājiet savu komentāru