Fix Google PageSpeed ​​Liigutage renderdamise blokeerimise JavaScripti ja CSS-i ülaosas olevas sisus

Lahendage Javascripti ja CSS-i blokeerimise renderdamine

Google'i PageSpeed ​​[1] test Kõrvaldage renderdamiseks blokeeriv JavaScript ja CSS ülalolevas vormis pakub teile veebisaidi JS ja CSS-failide edastamist pärast HTML-i täieliku laadimist - ja seetõttu ärge pausi HTML-i laadimist neid alla laadida.

Renderdamist blokeeriva skripti määratlus: skriptid, mis laaditakse enne täieliku HTML DOM-i sõelumist. Näiteks päises või sisus olevad skriptid ilma brauseritele konkreetse juhiseta skripti laadimist edasi lükata kuni HTML-i värvimiseni.

Likvideerimise blokeeriva JavaScripti ja CSS-i välistamine lehe ülaosas: näidake, kuidas seda parandada

1. Laske välisel süsteemil oma veebisaiti teie jaoks optimeerida
   
2. Kasutage CDN-i, mis teeb teie nimel kõik võimalikud optimeerimised, sealhulgas renderdamist blokeerivate ressursside kõrvaldamiseks vajalikud kolm järgmist optimeerimist:
   
3. Lükake Javascripti failide laadimine edasi
   
4. CSS-i laadimine pärast HTML-i laadimist
   
5. Kasutage WordPressi pistikprogrammi
   

Renderdamist blokeerivate ressursside kõrvaldamiseks on vaja palju optimeerimisi ja see võib olla tüütu neid ise rakendada - lisaks peate muude lehekiiruse testide seas pidevalt jälgima uusi teste, mis sisalduvad Chrome LightHouse'is ja Google PageSpeedis.

Renderdamist blokeerivate ressursside ht-juurdepääsukoodis kõrvaldamiseks pole ühtegi lahendust, kuna probleem on seotud DOM-iga, mis tähendab veebisaidi sisu ja kaasatud ressursside, näiteks Javascripti ja CSS-i laadimise järjekorda, kuid mitte ainult. Neid ei saa käivitada Htaccessis, vaid ainult HTML DOM-i sisus.

Kui lahendate need probleemid töölaua jaoks, välistate samal ajal mobiilseadmete renderdamist blokeerivad ressursid, kuna mõlemad on täpselt samad!

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

Javascripti failide laadimise edasilükkamine

Teie JS-failide koormamise edasilükkamiseks [2] võite oma skriptide linkide abil lisada asünkroonse või lükata juhiseid edasi. Async ei garanteeri, et need laaditakse samas järjekorras - seetõttu, kui teil on mitu skripti, mis peaksid teineteise järel käivituma, on järjestuse tagamiseks soovitatav edasi lükata:

Pärast HTML-i laadimist laadige CSS

CSS-i laadimiseks pärast täieliku HTML-i edastamist pakub Google välja selle koodi, mida HTML-i lõpus lisada, näiteks pärast jaluse sulgemist ja enne keha sulgemist:

Veebisaidi optimeerimiseks on hea mõte eemaldada kasutamata CSS-koodi, operatsiooni, mis võib olla tüütu, kui teil ei ole veebis disaini teadmisi. Kui te ei ole oma veebisaidi teema ise loonud, võib targem kasutada välist süsteemi, et eemaldada kasutamata CSS-kood teie nimel lehekülgedel, näiteks ezoic hüpe näiteks uus (ja täiesti tasuta) nende hämmastava saidi versioon Kiiruse kiirendaja.

Läbida Google'i saidi kiiruskatse!

See lubas mul läbida  Google PageSpeed   ​​[1] testi. Eemaldage veebisaidil renderdamise blokeerimise JavaScripti ja CSS-i ülaosas sisalduvas sisus (koos turbevõimaluste brauseri vahemällu salvestamisega [4]), mis tõuseb 51-st mobiilis ( Joonis 1) kuni 72 (joonis 2) ja üles 59 (joonis 3) kuni 79 töölauale (joonis 4).

Kuidas kõrvaldada WordPressis renderdusblokeerivad ressursid

WordPressi renderdusblokeerivate ressursside kõrvaldamiseks on vaja paigaldada plugin nagu JetPack.

Seejärel avage suvandid, mille jaoks peate olema administraator, ja valige JetPacki valikud> Kirjutamine> Toimivus ja kiirus> kontrollige saidi kiirendi lubamist, kiirendage piltide laadimise korda, kiirendage staatilise faili laadimise korda ja lubage laisk laadimist pilte.

Õppige SEO põhitõed: registreeruge juba täna!

Suurendage oma veebisaidi nähtavust ja liiklust, valides SEO põhialused meie hõlpsasti jälgitavate põhikursusega.

Alustage SEO õppimist

See kõrvaldab renderdamise blokeerivad ressursid WordPressis ja laadib leheküljed kiiremini, võimaldades JetPackil optimeerida oma pilte ja serveerida oma pilte ja staatilisi faile (nt CSS ja JavaScript) oma globaalsest serverite võrgustikust.

Samuti ärge unustage postpone laadimine pilte välja ekraani abil, kasutades laisk koormuse funktsiooni. Kuigi seda kasutati keeruliseks ja vajate välise raamatukogu piltide väljavõtmise edasilükkamiseks, on see nüüd võimalikult võimalik HTML5-s!

Oma veebilehtede laisk laadimise rakendamiseks lisage lihtsalt väärtused laisk oma veebisaidi piltide atribuutide laadimiseks ja hiljutised brauserid mõistavad, et neid pilte tuleks küsida ja laadida, kui kasutaja keritab alla pildi kohahoidjad.

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

Selle peal töötab laisk laadimine ka Iframe'iga ja on oluline rakendamine, et kõrvaldada oma veebilehtede rental-blokeerivate ressursside kõrvaldamine.

Kui renderdamine blokeerivate ressursside on juhiseid laadida pärast põhisisu, mis tähendab HTML DOM, te juba teenida palju punkte Google Lighthouse Test, lehekülje kiirus Insights Test või Google Core Web Vitals.

Laske väline süsteem oma veebisaiti teie jaoks optimeerida

Kas teate, et tegelikult võiksid kõik Google PageSpeed'i probleemid teie nimel lahendada ilma teie saidilt palju vaeva nägemata - välja arvatud tasuta prooviversioonile registreerimine ja DNS-i muutmine?

Kasutades Ezoicu platvormi Site Speed ​​Accelerator tehnoloogiat, lahendab kõik tavalised Google PageSpeed'i probleemid nende süsteem, mis on vahendajaks teie veebisaidi ja külastajate vahel. Nad optimeerivad teie jaoks veebilehe enne külastajale kuvamist.

Saage roheliseks, registreerudes lihtsalt Ezoicu platvormil tasuta prooviversioonile ja proovige seda ise teha - need muudavad teie veebisaidi mõne päeva jooksul leheküljekiiruse optimeerimise kõrgeimatele standarditele vastavaks: teevad järgmise põlvkonna veebipilte, optimeerivad CSS-i ja JavaScripti, eemaldades kasutamata CSS-i ja JS, laadige laisalt pilte, muutke piltide suurust, salvestage oma saidi lehtede vahemälu, optimeerige fonte, tehke eelühendus kõigi kaasatud saitidega ja palju muud.

Krediitkaarti pole vaja - peate vaid registreeruma tasuta ja proovima. Lisaks sellele, kui teie veebisait teenib displeireklaamidest raha, lisaks sellele, et teete oma veebisaidi palju kiiremaks, teenivad need teile ka mitu korda rohkem raha kui teenite Google AdSense'i abil, optimeerides oma reklaame masinõppe ja täpsema kunstliku intelligentsuse abil.

Korduma Kippuvad Küsimused

Kuidas kõrvaldada renderdamise blokeeriv JavaScript ja CSS-i ülaosas?

JavaScripti ja CSS-i renderdamise blokeerimise kõrvaldamiseks peaksite tagama, et teie saidi JS ja CSS-failid laaditakse pärast HTML-i täielikku laadimist. See tähendab, et nende failide allalaadimiseks ei peata HTML -i laadimisprotsessi. JavaScripti faile saate edasi lükata Asynci või Atribuudi edasilükkamisega ning CSS -i jaoks saate selle laadimiseks kasutada konkreetset koodi. Väline optimeerimissüsteem nagu Ezoic saab sellega ka automaatselt hakkama.

Kuidas saavad veebiarendajad käsitleda Google Pagespeedi soovitust renderdamise javastri ja CSS-i kõrvaldamiseks?

Veebiarendajad saavad oma saiti optimeerida, minikiniseerides JavaScripti ja CSS-faile, kasutades JavaScripti asünkroonset laadimist, sisestades kriitilised CS-d otse HTML-i ja lükates edasi mittekriitiliste CSS-i ja JavaScripti failide laadimise. Nende strateegiate rakendamine võib laadimisaegade ja lehtede kiiruse hindeid märkimisväärselt parandada.

Perfect Chrome Lighthouse Score: Mis juhtub?