Veebisaidi loomisel on mõned aspektid, mis on kasutajatele sujuva kogemuse pakkumisel esmatähtsad. Ühte neist aspektidest esindab laadimisaeg. Kiiresti laadivat veebisaiti hindavad alati külastajad, kes soovivad leida otsitava võimalikult kiiresti. Kiire laadimisaja saavutamiseks peaksite õppima, kuidas kõrvaldada lehe ülaosa sisus renderdust blokeerivad JavaScriptid ja CSS.

Veebisaidi kiirust võivad mõjutada väga paljud tegurid, kuid kõige suurem mõju on selles artiklis käsitletud teguritel. Täiusliku veebisaidi võrrandi lahendamine võib olla keeruline, kuna teatud elemendid ei sõltu teie tegevusest. Need on määratud iga konkreetse olukorraga (nt geograafiline asukoht, Interneti kiirus). Siiski saate optimeerida CSS-i edastamist, muutes elemente, mida saate täielikult juhtida. Lisateavet selle teema kohta leiate sellest artiklist, mille on loonud meie meeskond saidil wpDataTables.

Renderdust blokeeriva ja lehe ülaosa sisu määratlemine

Renderduse blokeerimine

Renderduse blokeerimine viitab elementidele, mis takistavad veebisaidi olulise sisu (nt artikli põhiteksti) laadimist enne kogu lehe laadimist. Hea näide sellisest elemendist on mis tahes täiendav JavaScript või CSS, mis veebisaidile lisatakse. See kood võib takistada kasutajal brauseris midagi nägemast enne, kui kood on täielikult käivitatud, muutudes seega renderdust blokeerivaks.

Lehe ülaosa sisu

Kui külastaja külastab veebisaiti, tervitab teda teatud saidi osa – st ülemine osa. Ülejäänu nägemiseks peab kasutaja allapoole kerima või saidil muid toiminguid tegema. Sisu, mida külastajad näevad kohe pärast sellele juurdepääsu, nimetatakse lehe ülaosa sisuks.

Teave renderdamise blokeerimise kohta JavaScriptis ja CSS-is

Brauserid loevad saidi kuvamiseks HTML-i. See on protsess, mis koosneb mitmest etapist. Kui brauser komistab elementidele, mis viitavad skriptile/laadilehele, on koodi lugemiseks vaja täiendavaid samme. Brauser peab taotlema faili, ootama vastust, laadima faili serverist alla ja seejärel käivitama faili.

Loomulikult võivad need lisatoimingud laadimisaega aeglustada. Pidage meeles, et mõned WordPressi teemad hõlmavad rohkem kui ühte CSS-i või ühte JavaScripti faili. Nende failide tõttu saab laadimisaega järsult aeglustada. See on põhjus, miks peate oma saidilt kõrvaldama renderdust blokeerivad ressursid. Enamasti ei ole need kriitilised failid, nii et saate JavaScripti sõelumise edasi lükata, et vähendada lehe renderdamise blokeerimist, parandades seeläbi oma saidi kiirust.

Renderdust blokeeriva JavaScripti ja CSS-i tuvastamine

Et kõrvaldada lehe ülaosa sisus renderdamist blokeerivad JavaScripti ja CSS-id, peate tuvastama, mis need elemendid on. Üks lihtsamaid viise nende tuvastamiseks on veebisaidi avamine lehe kiiruse tööriistaga, mis ütleb teile, millised probleemid sellel laadimisel kokku puutuvad. Google’i PageSpeed Insights on üks selline tööriist, mis peaks aitama teil leida failid, mis teie saidil renderdamist blokeerivad. Kui olete aru saanud, mis failid on, võite jätkata renderdust blokeeriva JavaScripti eemaldamist või ümberkorraldamist.

Kuidas kõrvaldada lehe ülaosa sisus renderdust blokeerivad JavaScript ja CSS?

Sellises olukorras on teil kaks võimalust: õppige ise kõrvaldama renderdust blokeerivat JavaScripti ja CSS-i lehe ülaosa sisust või kasutage selleks pistikprogrammi. Kui olete tehnikatundlik ja olete valmis õppima, kuidas renderdamist blokeerivaid ressursse kõrvaldada, kasutage ühte järgmistest meetoditest.

Kustutage JavaScript kriitiliselt renderdamisteelt

Kriitiline renderdamise tee peaks sisaldama ainult neid elemente, mis on veebisaidi jaoks olulised. Saate mittevajalikud JavaScripti ressursid sellelt teelt välja viia. Seda tehakse teatud atribuutide lisamisega, kus JavaScript on nõutav. Atribuudid on järgmised:

Async: see atribuut annab brauserile teada, et aeglase laadimisaja vältimiseks peaks ta alustama ressursside kohe allalaadimist. Kui ressursid on saadaval, peatatakse HTML-i sõelumine ajutiselt ja ressursid laaditakse.
Defer: see atribuut käsib brauseril ressursside allalaadimist edasi lükata, kuni HTML-i sõelumisprotsess on lõppenud. Kui see on lõpetatud, laadib brauser alla ja renderdab sissekirjutused nende veebisaidil ilmumise järjekorras.

Kontrollige, kuidas CSS-i ressursse tarnitakse, ja optimeerige neid

Renderdust blokeerivate ressursside kõrvaldamiseks CSS-is peate:

Tuvastage lehe ülaosa sisu jaoks vajalikud ressursid ja lisage CSS-i stiilid HTML-i.
Kasutage teist atribuuti, et tuvastada hädavajalikud CSS-i vahendid (meediumiatribuut).
Laadige CSS-i ressursid asünkroonselt (kasutades ülalkirjeldatud atribuute).

Loend pistikprogrammidest, mis võivad aidata teil hõlpsamini renderdamist blokeeriva JavaScripti kõrvaldada

Automatiseeri

Renderdust blokeeriva JavaScripti ja CSS-i kõrvaldamiseks WordPressi lehe ülaosa sisust saate kasutada pistikprogramme, nagu Autoptimize. See pistikprogramm muudab teie WordPressi saidi laadimisaja paremaks, kombineerides koodibitte, muutes koodiplokke väiksemaks, eemaldades mittevajalikud märgid (tihendamine) ja nii edasi. Nende muudatuste tegemisel on koodi hõlpsam lugeda ja faili suurus väheneb, mis vähendab laadimisajast mõnesaja millisekundi või isegi sekundi võrra.

Selle pistikprogrammi installimiseks peate lihtsalt pääsema juurde oma WordPressi armatuurlauale ja liikuma vahekaardile Pluginad. Seejärel valige suvand Lisa uus, mis asub akna ülaosas. Pärast seda saate otsida otsinguribalt automaatse optimeerimise või muid pistikprogramme. Klõpsake nuppu Installi kohe, aktiveerige see soovitud veebisaidi jaoks ja oletegi valmis.

W3 kogu vahemälu

Autoptimize pakub palju muid alternatiive, mida saate kasutada renderdust blokeerivate ressursside eemaldamiseks WordPressist. W3 Total Cache pistikprogramm on üks paremaid. Selle pistikprogrammi huvitav on see, et see sisaldab WordPressi optimeerimiseks mitmeid lisafunktsioone. Vahemällu salvestamine kujutab endast protsessi, mille käigus teatud failid salvestatakse kasutaja arvutisse, et muuta tema kasutuskogemus veebisaidiga paremaks. Järgnevad külastused muutuvad lihtsamaks ja laadimisajad paranevad.

Kiiruse suurendamise pakett

Teine võimalus on Speed Booster Pack. Kui olete selle installinud, pääsete juurde seadetele ja saate valida oma vajadustele vastavad valikud. Pistikprogramm pakub mõningaid seadistusvalikuid, nagu skriptide jalusesse teisaldamine või JavaScripti failide sõelumise edasilükkamine. Nende valimisel saate lehe ülaosa sisust renderdamist blokeeriva JavaScripti ja CSS-i eemaldada vaid paari klõpsuga.

JCH optimeerimine

JCH Optimize on pistikprogramm, mis ühendab JavaScripti ja CSS-i, vähendades samal ajal failide suurust. Sellel on palju muid funktsioone, mis võivad olla pikas perspektiivis kasulikud, kuid see on suurepärane renderdust blokeerivate ressursside kõrvaldamiseks. Liikuge selle seadetes ja aktiveerige funktsioonid, mis tunduvad teie veebisaidi jaoks asjakohased.

Kuigi see nõuab tähelepanu, mõjutab selle probleemi lahendamine teie saiti suurel määral. Kui olete õppinud eemaldama renderdust blokeerivat JavaScripti ja CSS-i lehe ülaosa sisust, eemaldage võimalikult kiiresti kõik elemendid, mis võivad teie veebisaiti aeglustada.

Kui teile meeldis lugeda seda artiklit renderdust blokeeriva JavaScripti ja CSS-i kõrvaldamise kohta lehe ülaosa sisust, peaksite WordPressis fontide muutmise kohta lugema seda artiklit .

Kirjutasime ka mõnest sellega seotud teemast, näiteks kuidas manustada WordPressi iframe’i, kuidas leida WordPressis lehe ID, kuidas alla laadida WordPressi meediumiteek, kuidas peatada DDoS-i rünnak ja kuidas WordPressis lehe pealkirja peita.

: wpdatatables.com