Če svoje spletno mesto izvajate prek Lighthouse, ste morda opazili predlog za odstranitev virov, ki blokirajo upodabljanje.
Če odložite JavaScript in vstavite pomembne sloge CSS, se lahko znebite virov v WordPressu, ki upočasnjujejo upodabljanje. To podpira večina vtičnikov za predpomnilnik, Autoptimize in Async JavaScript. Tako Elementor kot Divi imata vgrajene načine, da se znebite virov, ki preprečujejo upodabljanje strani, z uporabo odloženega in vgrajenega CSS. Odstranjevanje nepotrebnega CSS, JavaScripta in kode tretjih oseb lahko prav tako pomaga pri razrešitvi.
V tem članku bomo opredelili vire za blokiranje upodabljanja in opisali prednosti, če se jih znebite s spletnega mesta. Nato vam bomo predstavili pet alternativnih načinov, kako se jih znebiti.
Kaj so viri za blokiranje upodabljanja?
Razumevanje običajnega procesa nalaganja spletnega mesta je ključnega pomena, preden podrobneje pogledamo vire, ki blokirajo upodabljanje. Celotno vsebino vašega spletnega mesta mora obiskovalčev brskalnik upodobiti (ali prenesti), potem ko klikne povezavo do nje. Prebere ves HTML, CSS in JavaScript na vašem spletnem mestu od zgoraj navzdol. Vaše spletno mesto ne bo vidno obiskovalcem, dokler brskalnik ne prebere te čakalne vrste skriptov. Če obstajajo viri, ki blokirajo upodabljanje, bodo morda morali čakati dolgo časa. V bistvu je datoteka CSS ali JavaScript, ki brskalniku preprečuje nalaganje druge vsebine med obdelavo, vir, ki blokira upodabljanje. To lahko ustavi postopek upodabljanja in naredi stran videti nedokončano ali prazno.
Ustvarite neverjetna spletna mesta
Z najboljšim brezplačnim graditeljem strani Elementor
Začni zdajKo so na vašem spletnem mestu viri, ki blokirajo upodabljanje, se dodatne datoteke naložijo na vrh kode. Pred ogledom spletnega mesta morajo uporabniki počakati, da se te datoteke obdelajo. Viri, ki blokirajo upodabljanje, lahko vplivajo na več kazalnikov uspešnosti spletnega mesta. Na primer, slika z največjo vsebino meri, koliko časa traja, da se primarna vsebina strani naloži. Prvič, ko brskalnik upodobi gradivo iz Document Object Model (DOM) vašega spletnega mesta, je znano kot prvo vsebinsko slikanje. Skupni čas blokiranja je čas med prvim slikanjem vsebine in časom za interakcijo (koliko časa traja, da stran postane popolnoma interaktivna).
Čeprav niso potrebni za nalaganje, lahko viri, ki blokirajo upodabljanje, ovirajo upodabljanje. Zaradi tega lahko trpi uporabniška izkušnja vašega spletnega mesta (UX). Zato je ključnega pomena, da se jih znebite, da preprečite obiskovalcem, da bi zapustili vaše strani.
Prednosti odprave virov, ki blokirajo upodabljanje
Uporabniki interneta na splošno ne marajo čakati, da se spletna mesta naložijo. Hitro spletno mesto lahko privabi uporabnike, da raziščejo vaše gradivo, in jim prepreči obisk tekmeca. Z odstranitvijo elementov, ki blokirajo upodabljanje, učinkovito olajšate kodo svojega spletnega mesta, kar je lahko skrivnost za izboljšanje hitrosti strani. Ker sta uspešnost spletnega mesta in angažiranost uporabnikov dva dejavnika, ki ju velikani iskalnikov, kot je Google, upoštevajo pri ocenjevanju spletnih mest, lahko odstranitev datotek, ki blokirajo upodabljanje, pomaga dvigniti uvrstitev vašega spletnega mesta v iskalnikih.
Kako odstraniti vire, ki blokirajo upodabljanje v WordPressu
Morda se sprašujete, kako s spletnega mesta odstraniti elemente, ki blokirajo upodabljanje, zdaj ko veste, kako jih prepoznati v WordPressu. Na srečo smo sestavili seznam številnih pristopov, ki jih lahko uporabite, da to dosežete, začenši z najpreprostejšimi.
Optimizirajte nalaganje CSS
Povečanje hitrosti nalaganja CSS na vašem spletnem mestu je ena od tehnik, s katerimi se lahko znebite virov, ki blokirajo upodabljanje. Brskalnik naloži vašo spletno stran od zgoraj navzdol, kot je bilo že rečeno. To lahko povzroči, da postopek nalaganja traja dlje, ko je treba nekatere datoteke obdelati. Ključnega pomena je vedeti, da se morajo naložiti samo nekatere datoteke CSS, da se stran prikaže. Zato lahko pri optimizaciji nalaganja CSS najprej prikažete najbolj ključne datoteke. CSS, ki blokira upodabljanje, je mogoče odstraniti ročno, lahko pa namestite tudi vtičnik, da olajšate delo. Svoje spletno mesto lahko optimizirate neposredno na nadzorni plošči WordPress z uporabo Jetpack Boost. Ta vtičnik omogoča preprosto implementacijo lenega nalaganja, odlog nebistvenega JavaScripta in izboljšanje nalaganja CSS. Eden najpreprostejših načinov, kako se znebiti virov, ki blokirajo upodabljanje v WordPressu, je ta.
Začnite z iskanjem Jetpack Boost pod Plugins Add New na nadzorni plošči WordPress. Namestite in nato vklopite vtičnik na svojem spletnem mestu.
Lahko obiščete Jetpack My Jetpack, če že imate Jetpack. Poiščite Boost in na seznamu izdelkov Jetpack izberite Activate.
Ko je vtičnik aktiviran, kliknite zavihek Jetpack Boost in izberite Get Started.
Vaše spletno mesto bo Jetpack takoj prejelo oceno uspešnosti. V rezultatih na namizju in mobilni napravi boste videli črkovno oceno skupaj z informacijami.
Nato aktivirajte to funkcijo tako, da se pomaknete navzdol do Optimize CSS Loading. Ko je aktiviran, bo Jetpack Boost dvignil ključni CSS za vaše spletno mesto, tako da se nalaga hitreje.
Odložite nebistveni JavaScript
Lahko sprejmete več ukrepov, da se znebite virov, ki blokirajo upodabljanje v WordPressu, razen samo optimizacije nalaganja CSS. Nebistveni JavaScript je mogoče tudi odložiti, da še pospešite nalaganje vašega spletnega mesta. Nebistveni JavaScript je mogoče odložiti, da odložite nekatere procese, dokler se vaša vsebina ne naloži. Brskalniku lahko preprečite izvajanje datotek JavaScript, če niso potrebne za nalaganje strani. Na srečo je z uporabo vtičnika Jetpack Boost to preprosto. Ko ste optimizirali postopek nalaganja CSS, lahko preprosto odložite nebistveni JavaScript. Preklopite preklopno stikalo področja Defer Non-Essential JavaScript na vklopljeno. Ta razdelek najdete pod razdelkom Optimiziraj nalaganje CSS.
Vtičnik bo posodobil svojo oceno splošne uspešnosti vaše strani, ko omogočite to nastavitev. Prikazan bo vaš rezultat pred in po uporabi Jetpack Boost.
Oglejte si rezultate na posnetkih zaslona, posnetih pred in po zaključku tega postopka. Opazili boste, da je bilo povečanje hitrosti strani doseženo z zakasnitvijo nebistvenega JavaScripta in učinkovitejšim nalaganjem CSS. Brskalniki lahko hitreje naložijo vašo vsebino, ker jim ni treba izvajati velikih skriptov.
Odložite slike zunaj zaslona
Čeprav slike niso vir, ki preprečuje upodabljanje strani, boste morda želeli razmisliti o pospešitvi njihovega nalaganja. Spletna mesta imajo pogosto slike zunaj zaslona, ki se ne prikažejo, dokler uporabnik ne izvede interakcije s stranjo, na primer drsenja. Te lahko odložite z lelim nalaganjem, ker niso potrebni za nalaganje spletne strani. Samo slike, ki jih obiskovalci lahko vidijo, se nalagajo leno. Te fotografije se naložijo tik preden se prikažejo na strani, ko se uporabnik pomakne. Če leno nalaganje ni omogočeno, bo brskalnik poskušal naložiti vsako sliko na strani hkrati. Dlje kot traja, da se vaše gradivo naloži, večja je verjetnost, da bodo obiskovalci zapustili vaše spletno mesto.
Redno nalaganje morda ne bo težava, če obiskovalec uporablja namizni računalnik. Pametni telefoni in tablice pa imajo manjše zaslone in manjšo pasovno širino. Vaše spletno mesto lahko porabi več pasovne širine in se naloži dlje za uporabnike mobilnih telefonov, če v celoti naloži vse svoje fotografije hkrati. Ta težava je odpravljena z odloženim nalaganjem.
Če želite na svojem spletnem mestu omogočiti leno nalaganje, uporabite Jetpack Boost. Samo poiščite možnost Lazy Image Loading in jo omogočite.
Če to storite, bo gledalec videl samo nalaganje slik na vašem spletnem mestu, ko se bo pomaknil navzdol po strani. Čeprav fotografije niso vir, ki upodablja bloke, lahko omogočanje lenega nalaganja pospeši vašo stran.
Odstranite vire, ki blokirajo upodabljanje, z Elementorjem/Divi
Tako Elementor kot Divi vključujeta možnosti za odstranjevanje virov, ki ovirajo upodabljanje.
Omogočite Izboljšano nalaganje CSS in Font-Awesome Inline v nastavitvah Elementor Experiments, da naložite CSS in pisave v vrstici, tako da ne blokirajo upodabljanja. Izboljšano nalaganje sredstev odpravlja nepotreben CSS/JavaScript, kar na različne načine izboljšuje osnovne spletne elemente.
Z uporabo ključnega CSS, odložitvijo CSS/JavaScript in nalaganjem vaših pisav v vrstici lahko Divi -jeve možnosti zmogljivosti tudi zmanjšajo vire, ki blokirajo upodabljanje.
Ročno odstranite JavaScript, ki blokira upodabljanje
Vire, ki blokirajo upodabljanje, lahko tudi ročno izbrišete, čeprav je namestitev vtičnika za optimizacijo veliko lažja možnost. V idealnem primeru bi morali o tej izbiri razmišljati le, če ste izkušen koder. Če želite zmanjšati število vtičnikov na svojem spletnem mestu, je ta postopek prav tako lahko koristen. Svojim datotekam lahko dodelite lastnost async ali defer za učinkovitejše delovanje JavaScripta. Brskalnik bo dobil navodila, naj nekritične skripte upodablja ločeno, tako da jih označi kot take. Obe lastnosti je mogoče uporabiti za pospešitev nalaganja informacij HTML.
Datoteka HTML je razčlenjena na običajen način, dokler ne naleti na datoteko skripta. Razčlenjevanje se bo nato ustavilo, medtem ko najde skript. Po prenosu in zagonu se razčlenjevanje nadaljuje.
Med obdelavo preostalega HTML-ja lahko brskalnik zaradi funkcije async prenese JavaScript. Po prenosu lahko ustavi obdelavo HTML in zažene skript.
Atribut defer deluje podobno in brskalniku omogoča prenos skripta, medtem ko razčlenjuje HTML. Razlika je v tem, da tudi zakasni izvajanje skripta, dokler ni končano razčlenjevanje HTML.
V datoteko functions.php morate vključiti del kode, da lahko implementirate eno od teh lastnosti. Najprej morate poiskati oznako script> vira, ki blokira upodabljanje. naslednje kot asinhroni atribut:
<script src="resource.js" async></script>Druga možnost je, da razmislite o tem, kako se lahko zdi skript, ko je uporabljena lastnost defer:
http://resource.jsMedtem ko lahko vtičnik poskrbi za te lastnosti namesto vas, bi lahko bolje ustrezalo vašim željam, če to storite sami. Če je tako, je ključnega pomena razumeti, kdaj uporabiti posamezen atribut. Za nebistvene skripte, ki so odvisni od drugega skripta, morate uporabiti lastnost defer. Možnost async je primerna za vse druge skripte.
Z vtičnikom uporabite asinhrone ali odložene atribute
Če imate težave z ročnim urejanjem skriptov, uporabite vtičnik, kot je Async JavaScript. Zahvaljujoč temu orodju imate popoln nadzor nad tem, kateri skripti imajo lastnost async ali defer.
Ko je vtičnik nameščen, v razdelku Nastavitve Async JavaScript izberite Enable Async JavaScript.
Nato pojdite na razdelek z naslovom Metoda asinhronega JavaScripta. Tukaj lahko izberete, ali želite omogočiti asinhrone ali odložene atribute.
Te skripte je dobro izključiti, ker je veliko vtičnikov odvisnih od jQuery. Uporaba asinhronih lastnosti za jQuery lahko povzroči zlom vašega spletnega mesta.
Če ste v dvomih, lahko uporabite atribut defer, vendar je najboljša možnost, da v celoti izključite jQuery.
Zdaj lahko določite, katere skripte želite zagnati v async ali defer. Paziti morate, da vsak skript postavite v ustrezen razdelek.
V razdelku Izključitev skriptov lahko navedete vse skripte, ki jih želite izključiti iz tega postopka.
Na dnu strani so tudi možnosti za izključitev vtičnikov in tem. Skripti za katere koli teme ali vtičnike, ki jih tukaj omenjate, ne bodo uporabni za asinhrone ali odložene značilnosti.
Ko opravite potrebne prilagoditve, lahko kliknete Shrani nastavitve. Ta pristop je lahko koristen kompromis med ročnim spreminjanjem skriptov in uporabo vtičnika za opravljanje naloge namesto vas. Namesto tega lahko te dodatne korake odpravite z uporabo aplikacije vse v enem, kot je Jetpack Boost.
Zavijanje
S tem, da brskalniki obiskovalcev odložijo upodabljanje vsebine na vrhu strani, medtem ko prenašajo sredstva, ki niso takoj potrebna, viri, ki blokirajo upodabljanje, povečajo zaznane čase nalaganja strani vašega spletnega mesta WordPress. Odložite nalaganje virov, ki niso takoj potrebni, da bi obiskovalcem pomagali pri hitrejšem nalaganju vidnega območja vaše strani. Uporabite vnaprej izdelane vtičnike, da se znebite virov, ki blokirajo upodabljanje v WordPressu. Za brezplačno rešitev lahko kombinirate Autoptimize in Async JavaScript, dva vtičnika, ki ju je ustvaril isti razvijalec. Uporabite lahko WP Rocket, ki ponuja posebno interakcijo s Kinsta in vam lahko pomaga pri številnih dodatnih prilagoditvah zmogljivosti WordPressa, če ste za to pripravljeni plačati.
