{"id":226613,"date":"2022-09-05T11:11:00","date_gmt":"2022-09-05T08:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226613"},"modified":"2022-11-08T20:08:50","modified_gmt":"2022-11-08T17:08:50","slug":"kuidas-korvaldada-lehe-uelaosa-sisus-renderdamist-blokeeriv-javascript-ja-css","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-korvaldada-lehe-uelaosa-sisus-renderdamist-blokeeriv-javascript-ja-css\/","title":{"rendered":"Kuidas k\u00f5rvaldada lehe \u00fclaosa sisus renderdamist blokeeriv JavaScript ja CSS"},"content":{"rendered":"\n

Veebisaidi loomisel on m\u00f5ned aspektid, mis on kasutajatele sujuva kogemuse pakkumisel esmat\u00e4htsad. \u00dchte neist aspektidest esindab laadimisaeg. Kiiresti laadivat veebisaiti<\/a> hindavad alati k\u00fclastajad, kes soovivad leida otsitava v\u00f5imalikult kiiresti. Kiire laadimisaja saavutamiseks peaksite \u00f5ppima, kuidas k\u00f5rvaldada lehe \u00fclaosa sisus renderdust blokeerivad JavaScriptid ja CSS.<\/p>\n

Veebisaidi kiirust v\u00f5ivad m\u00f5jutada v\u00e4ga paljud tegurid, kuid k\u00f5ige suurem m\u00f5ju on selles artiklis k\u00e4sitletud teguritel. T\u00e4iusliku veebisaidi v\u00f5rrandi lahendamine v\u00f5ib olla keeruline, kuna teatud elemendid ei s\u00f5ltu teie tegevusest. Need on m\u00e4\u00e4ratud iga konkreetse olukorraga (nt geograafiline asukoht, Interneti kiirus). Siiski saate optimeerida CSS-i edastamist, muutes elemente, mida saate t\u00e4ielikult juhtida. Lisateavet selle teema kohta leiate sellest artiklist, mille on loonud meie meeskond saidil wpDataTables<\/a>.<\/p>\n

Renderdust blokeeriva ja lehe \u00fclaosa sisu m\u00e4\u00e4ratlemine<\/h2>\n

Renderduse blokeerimine<\/h3>\n

Renderduse blokeerimine viitab elementidele, mis takistavad veebisaidi olulise sisu (nt artikli p\u00f5hiteksti) laadimist enne kogu lehe laadimist. Hea n\u00e4ide sellisest elemendist on mis tahes t\u00e4iendav JavaScript v\u00f5i CSS, mis veebisaidile lisatakse. See kood v\u00f5ib takistada kasutajal brauseris midagi n\u00e4gemast enne, kui kood on t\u00e4ielikult k\u00e4ivitatud, muutudes seega renderdust blokeerivaks.<\/p>\n

Lehe \u00fclaosa sisu<\/h3>\n

Kui k\u00fclastaja k\u00fclastab veebisaiti, tervitab teda teatud saidi osa \u2013 st \u00fclemine osa. \u00dclej\u00e4\u00e4nu n\u00e4gemiseks peab kasutaja allapoole kerima v\u00f5i saidil muid toiminguid tegema. Sisu, mida k\u00fclastajad n\u00e4evad kohe p\u00e4rast sellele juurdep\u00e4\u00e4su, nimetatakse lehe \u00fclaosa sisuks.<\/p>\n

Teave renderdamise blokeerimise kohta JavaScriptis ja CSS-is<\/h3>\n

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\u00e4iendavaid samme. Brauser peab taotlema faili, ootama vastust, laadima faili serverist alla ja seej\u00e4rel k\u00e4ivitama faili.<\/p>\n

Loomulikult v\u00f5ivad need lisatoimingud laadimisaega aeglustada. Pidage meeles, et m\u00f5ned WordPressi teemad h\u00f5lmavad rohkem kui \u00fchte CSS-i v\u00f5i \u00fchte JavaScripti faili. Nende failide t\u00f5ttu saab laadimisaega j\u00e4rsult aeglustada. See on p\u00f5hjus, miks peate oma saidilt k\u00f5rvaldama renderdust blokeerivad ressursid. Enamasti ei ole need kriitilised failid, nii et saate JavaScripti s\u00f5elumise edasi l\u00fckata, et v\u00e4hendada lehe renderdamise blokeerimist, parandades seel\u00e4bi oma saidi kiirust.<\/p>\n

Renderdust blokeeriva JavaScripti ja CSS-i tuvastamine<\/strong><\/h3>\n

\"Kuidas<\/a><\/p>\n

Et k\u00f5rvaldada lehe \u00fclaosa sisus renderdamist blokeerivad JavaScripti ja CSS-id, peate tuvastama, mis need elemendid on. \u00dcks lihtsamaid viise nende tuvastamiseks on veebisaidi avamine lehe kiiruse t\u00f6\u00f6riistaga, mis \u00fctleb teile, millised probleemid sellel laadimisel kokku puutuvad. Google’i PageSpeed \u200b\u200bInsights<\/a> on \u00fcks selline t\u00f6\u00f6riist, mis peaks aitama teil leida failid, mis teie saidil renderdamist blokeerivad. Kui olete aru saanud, mis failid on, v\u00f5ite j\u00e4tkata renderdust blokeeriva JavaScripti eemaldamist v\u00f5i \u00fcmberkorraldamist.<\/p>\n

Kuidas k\u00f5rvaldada lehe \u00fclaosa sisus renderdust blokeerivad JavaScript ja CSS?<\/h3>\n

Sellises olukorras on teil kaks v\u00f5imalust: \u00f5ppige ise k\u00f5rvaldama renderdust blokeerivat JavaScripti ja CSS-i lehe \u00fclaosa sisust v\u00f5i kasutage selleks pistikprogrammi. Kui olete tehnikatundlik ja olete valmis \u00f5ppima, kuidas renderdamist blokeerivaid ressursse k\u00f5rvaldada, kasutage \u00fchte j\u00e4rgmistest meetoditest.<\/p>\n

Kustutage JavaScript kriitiliselt renderdamisteelt<\/h3>\n

Kriitiline renderdamise tee peaks sisaldama ainult neid elemente, mis on veebisaidi jaoks olulised. Saate mittevajalikud JavaScripti ressursid sellelt teelt v\u00e4lja viia. Seda tehakse teatud atribuutide lisamisega, kus JavaScript on n\u00f5utav. Atribuudid on j\u00e4rgmised:<\/p>\n