Ամրագրել Google PageSpeed ​​Վերացնել վերոհիշյալ բովանդակության պարունակության ցուցադրման JavaScript- ը եւ CSS- ը

Լուծեք մատուցել Javascript- ը և CSS- ն արգելափակող

Google PageSpeed ​​[1] թեստը «Վերացնել վերը նշված բովանդակության մեջ JavaScript- ի եւ CSS- ի արգելափակումը» առաջարկում է Ձեզ ներկայացնել ձեր կայքի JS եւ CSS ֆայլերը HTML- ի ամբողջությամբ բեռնվածից հետո եւ, հետեւաբար, չի դադարում ձեր HTML- ի բեռը բեռնել դրանք:

Render-blocking script սահմանումը. Սցենարներ, որոնք բեռնված են մինչև HTML ամբողջական DOM- ի վերլուծությունը: Օրինակ, վերնագրում կամ բովանդակության մեջ ներառված սցենարներ ՝ առանց զննարկիչների համար հատուկ հրահանգների ՝ հետաձգել սցենարի բեռնումը մինչ HTML ներկելուց հետո:

Վերացրեք մատուցման արգելափակման JavaScript- ը և CSS- ը վերևում պարունակվող բովանդակության մեջ. Ցույց տվեք, թե ինչպես կարելի է այն ուղղել

1. Արտաքին համակարգը ձեր կայքը օպտիմալացնելու համար
   
2. Օգտագործեք CDN, որը ձեր անունից կկատարի բոլոր հնարավոր օպտիմիզացումները, ներառյալ մատուցման արգելափակման ռեսուրսները վերացնելու համար անհրաժեշտ երեք հետևյալ օպտիմալացումը.
   
3. Հետաձգեք Javascript ֆայլերի բեռը
   
4. HTML բեռնվածությունից հետո բեռնել CSS
   
5. Օգտագործեք WordPress հավելված
   

Ռենդեր արգելափակող ռեսուրսները վերացնելու համար անհրաժեշտ է շատ օպտիմալացումներ, և գուցե ձանձրալի լինի դրանք ինքնուրույն իրականացնելը. Գումարած, ստիպված կլինեք անընդհատ որոնել Chrome LightHouse- ում և Google PageSpeed- ում ներառված նոր թեստեր `էջի արագության այլ թեստերի մեջ:

Htaccess կոդում ռենդեր արգելափակող ռեսուրսները վերացնելու համար գոյություն չունի որևէ լուծում, քանի որ խնդիրը կապված է DOM- ի հետ, այսինքն `կայքի բովանդակությունը և ներառված ռեսուրսների բեռնման կարգը, ինչպիսիք են Javascript- ը և CSS- ը, բայց ոչ միայն: Դրանք չեն կարող գործարկվել Htaccess- ում, բայց միայն HTML DOM բովանդակության մեջ:

Եթե ​​այս խնդիրները լուծում եք աշխատասեղանի համար, միևնույն ժամանակ կվերացնեք բջջայինի համար մատուցման արգելափակման ռեսուրսները, քանի որ երկուսն էլ միանգամայն նույնն են:

Did you know that you can even have all these steps executed automatically for you by using an external  Կայքի արագության արագացուցիչ   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 ֆայլերի բեռը

Ձեր JS ֆայլերի բեռնաթափման համար [2], դուք կարող եք կամ ավելացրեք async կամ հետաձգման հանձնարարական ձեր սցենարների հղումներ: Async- ը չի երաշխավորում, որ դրանք բեռնված են նույն հաջորդականությամբ, հետեւաբար, եթե դուք ունեք մի քանի սցենարներ, որոնք պետք է վարվեն մյուսից հետո, նախընտրելի է երաշխավորել հաջորդականությունը:

HTML բեռից հետո բեռնեք CSS- ը

Ամբողջ HTML- ը փոխանցվելուց հետո CSS- ը բեռնվում է, Google- ը առաջարկում է այս կոդը [3] ձեր HTML- ի վերջում ավելացնելու համար, օրինակ `ստորագրության փակման պիտակի եւ մինչեւ մարմնի փակման պիտակի:

Ձեր կայքը օպտիմալացնելու համար նաեւ լավ գաղափար է հեռացնել չօգտագործված CSS ծածկագիրը, գործողություն, որը կարող է լինել հոգնեցուցիչ, եթե դուք գիտելիքներ չունեք վեբ ձեւավորման մեջ: Եթե ​​ինքներդ չեք ստեղծել ձեր վեբ կայքի թեման, գուցե ավելի իմաստուն լինի օգտագործել արտաքին համակարգ, ձեր անունից ձեր էջերում չօգտագործված CSS ծածկագիրը հանելու համար Արագ արագացուցիչ:

Անցեք Google կայքի արագության թեստը:

Սա թույլ տվեց ինձ անցնել  Google PageSpeed   ​​[1] թեստը վերացնելով վերը նշված բլոկում ջնջել JavaScript- ը եւ CSS- ը (Leverage- ի բրաուզերի քեշավորման հետ միասին [4]) կայքում, 1-ին) 72-ին (նկար 2) եւ մինչեւ 59-ը (նկար 3) 79-ը սեղանի վրա (նկար 4):

Ինչպես վերացնել մատուցվող ռեսուրսները WordPress- ում

WordPress- ում մատուցելու ռեսուրսների արգելափակման համար անհրաժեշտ է տեղադրել plugin, ինչպիսիք են JetPack- ը:

Այնուհետեւ, գնացեք այն տարբերակները, որոնց համար դուք պետք է լինեք ադմինիստրատոր եւ անցեք JetPack- ի ընտրանքներ> Գրելու> Արդյունք եւ արագություն> ստուգեք կայքի արագացուցիչը, արագացնել պատկերի բեռնման ժամանակը, արագացնել ստատիկ ֆայլի բեռի ժամանակները եւ թույլ ծույլ բեռը պատկերներ:

Master Վեբ կայքի ստեղծում. Գրանցվեք հիմա:

Վերափոխեք ձեր թվային ներկայությունը մեր վեբ կայքի ստեղծման մեր համապարփակ դասընթացով `սկսեք ձեր ճանապարհորդությունը` դառնալով վեբ փորձագետ այսօր:

Գրանցվեք այստեղ

Սա վերացնում է WordPress- ում ցուցադրման արգելափակման ռեսուրսները եւ արագորեն բեռնաթափում էջերը, թույլ տալով JetPack- ին թույլ տալ ձեր պատկերները եւ ծառայել ձեր պատկերները եւ ստատիկ ֆայլերը (CSS- ի եւ JavaScript- ի նման) սերվերների գլոբալ ցանցից:

Նաեւ մի մոռացեք հետաձգել պատկերների արտաճանապարհային էկրանը `օգտագործելով ծույլ բեռի գործառույթը: Չնայած նախկինում դժվար էր եւ անհրաժեշտ է արտաքին գրադարան հետաձգել պատկերների վերազինման էկրանը, այն այժմ հնարավոր է, որ HTML5- ում հնարավոր է:

Ձեր կայքերում պատկերների ծույլ բեռը կյանքի կոչելու համար պարզապես ավելացրեք արժեքները ձեր վեբ կայքի պատկերների բեռնումը, եւ վերջին զննարկիչները կհասկանան, որ ցուցադրվում են միայն այն դեպքում, եթե դրանք ցուցադրվեն պատկերի տեղապահները:

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

Դրա վերեւում ծույլ բեռնումը գործում է նաեւ IFRames- ի հետ եւ կարեւոր իրականացում է ձեր վեբ-էջերից ստացված ռենդլինգ ռեսուրսները վերացնելու համար:

Հաղորդագրման արգելափակումների ռեսուրսները հրահանգներ կունենան հիմնական բովանդակությունից հետո բեռնելուց հետո, նկատի ունենալով HTML Dom- ը, դուք արդեն կվաստակեք շատ միավորներ Google Lighthouse թեստում, էջի արագության պատկերացումների ստուգում կամ Google Core վիտալներ:

Արտաքին համակարգ ունենալ ձեր վեբ կայքը ձեր համար օպտիմիզացնել

Գիտե՞ք, որ իրականում կարող եք լուծել ձեր Google PageSpeed- ի բոլոր խնդիրները ձեր անունից, առանց ձեր կայքի մեծ ջանքերի, բացառությամբ անվճար փորձության գրանցվելու և ձեր DNS փոխելու:

Օգտագործելով Ezoic պլատֆորմի կայքի Speed ​​Accelerator տեխնոլոգիա, Google PageSpeed- ի բոլոր սովորական խնդիրները կլուծվեն իրենց համակարգի միջոցով, որը կդառնա միջնորդը ձեր կայքի և այցելուների միջև: Դրանք ձեզ համար ավելի լավատեսական կդարձնեն վեբ էջը, նախքան այն ձեր այցելուին ցուցադրելը:

Դարձեք կանաչ ՝ պարզապես գրանցելով անվճար փորձարկում Ezoic հարթակում և փորձեք ինքներդ ձեզ համար - դրանք կդարձնեն ձեր վեբ կայք մի քանի օրվա ընթացքում հասնել էջի արագության օպտիմիզացիայի ամենաբարձր չափանիշներին. Մատուցեք հաջորդ սերնդի վեբ պատկերներ, օպտիմիզացնել CSS- ն և JavaScript- ը `հանելով չօգտագործված CSS և JS, ծույլ բեռնվածքի պատկերներ, չափափոխել պատկերները, քեշել ձեր կայքի էջերը, օպտիմալացնել տառատեսակները, նախնական միանալ ձեր ներառված բոլոր կայքերին և շատ ավելին:

Վարկային քարտ չի պահանջվում. Ամեն ինչ դուք պետք է անեք անվճար գրանցվել և փորձել: Ավելին, եթե ձեր կայքը գումար է վաստակում ցուցադրման գովազդներից, ձեր կայքը շատ ավելի արագ դարձնելով, դրանք կարող են նաև ձեզ մի քանի անգամ ավելի շատ գումար վաստակել, քան Google AdSense- ով աշխատելը `ձեր գովազդը օպտիմալացնելով մեքենայական ուսուցման և առաջադեմ արհեստական ​​ինտելեկտիայով:

Հաճախակի Տրվող Հարցեր

Ինչպես վերացնել վերգետնյա բովանդակության վերեւում գտնվող JavaScript- ը եւ CSS- ը:

Վերանայելու բովանդակության բովանդակության համար Render-Blocking JavaScript- ը եւ CSS- ը վերացնելու համար դուք պետք է ապահովեք ձեր կայքի JS եւ CSS ֆայլերը բեռնված լինեն HTML- ի ամբողջությամբ բեռնված լինելու մասին: Սա նշանակում է, որ չխանգարեք HTML բեռնման գործընթացը այս ֆայլերը ներբեռնելու համար: Դուք կարող եք հետաձգել JavaScript ֆայլերը ASYNC- ի կամ հետաձգման հատկանիշով, իսկ CSS- ի համար կարող եք օգտագործել հատուկ կոդ `HTML- ից հետո այն բեռնելու համար: * Ezoic- ի նման արտաքին օպտիմիզացման համակարգը կարող է ինքնաբերաբար կարգավորել դա:

Ինչպես կարող են վեբ մշակողները դիմել Google Pagespeed- ի առաջարկությանը `վերացնելու համար JavaScript- ը եւ CSS- ը վերացնելու համար:

Վեբ ծրագրավորողները կարող են օպտիմիզացնել իրենց կայքը `ականազերծելով JavaScript եւ CSS ֆայլերը, օգտագործելով javaScript- ի համար ասինխրոն բեռներ, ընդգրկելով կրիտիկական CSS- ն ուղղակիորեն HTML- ի մեջ: Այս ռազմավարությունների իրականացումը կարող է զգալիորեն բարելավել բեռնման ժամանակներն ու էջերի վարկերը:

Կատարյալ Chrome Lighthouse Score. Ինչ է պատահում: