Cumulative Layout ShiftԻնչպես հարմարվել

Cumulative Layout Shift (CLS) կատարողականի կարևոր չափանիշ է, որը չափում է, թե որքան բովանդակություն է տեղաշարժվում կամ տեղաշարժվում վեբ էջի վրա, երբ այն բեռնվում է: Այս շարժումը կարող է հիասթափեցնել օգտատերերին, քանի որ այն կարող է պատճառ դառնալ, որ նրանք պատահաբար սեղմեն սխալ տարրերի վրա կամ կորցնեն իրենց տեղը էջում: Google-ը նաև վերջերս հայտարարեց, որ CLS-ը կդառնա վարկանիշային գործոն 2021 թվականի մայիսին՝ դարձնելով ավելի քան երբևէ կարևոր, քան երբևէ կայքերի սեփականատերերի համար օպտիմալացնել իրենց էջերը այս չափման համար: Այս հոդվածում մենք կքննարկենք, թե ինչ է CLS-ը, ինչպես է այն ազդում օգտատերերի փորձի և SEO-ի վրա, ինչպես նաև CLS-ի հարմարեցման լավագույն եղանակները՝ ձեր կայքի արդյունավետությունը բարելավելու համար:

Ինչ է Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) չափիչ է, որը չափում է էջի դասավորությունը բեռնելիս որքանով է փոխվում: Այս տեղաշարժը կարող է պայմանավորված լինել մի շարք գործոններով, ներառյալ պատկերներն ու տեսանյութերը, որոնք ուշ են բեռնվում կամ տարրերը, որոնք դինամիկ չափափոխվում են էջի բեռնման ժամանակ: CLS-ը հաշվարկվում է՝ բազմապատկելով դասավորության տարրի անցած հեռավորությունը իր չափերով: Այնուհետև գումարելով այս արժեքները դասավորության բոլոր տեղաշարժերի համար, որոնք տեղի են ունենում էջի բեռնման ժամանակ: Արդյունքը 0-ից 1 միավոր է, իսկ ավելի ցածր միավորը ցույց է տալիս դասավորության ավելի քիչ տեղաշարժ:

Ինչու է CLS-ը կարևոր:

Cumulative Layout Shift կարևոր չափիչ է երկու հիմնական պատճառով՝ օգտագործողի փորձ և SEO: Օգտագործողի փորձի տեսանկյունից, բարձր CLS-ով էջը կարող է հիասթափեցնել և շփոթեցնել օգտատերերի համար: Երբ էջի տարրերն անսպասելիորեն շարժվում կամ տեղաշարժվում են, օգտվողները կարող են կորցնել իրենց տեղը էջում կամ պատահաբար սեղմել սխալ տարրերի վրա: Սա կարող է հանգեցնել վատ օգտվողների փորձի և ստիպել օգտվողներին լքել ձեր կայքը:

SEO-ի տեսանկյունից Google-ը հայտարարել է, որ CLS-ը կդառնա վարկանիշային գործոն 2021 թվականի մայիսին: Սա նշանակում է, որ CLS-ի բարձր միավոր ունեցող էջերը կարող են տուգանվել որոնման վարկանիշում, մինչդեռ ցածր CLS միավոր ունեցող էջերը կարող են տեսնել վարկանիշի բարձրացում: Հետևաբար, CLS-ի համար օպտիմիզացումը շատ կարևոր է, եթե ցանկանում եք բարելավել ձեր կայքի որոնման համակարգի տեսանելիությունը:

Ինչպես չափել Cumulative Layout Shift?

Չափել Cumulative Layout Shift ձեր կայքում կարող եք օգտագործել Google-ի PageSpeed Insights գործիքը կամ Chrome DevTools-ը: Երկու գործիքներն էլ ձեզ կտրամադրեն 0-ից 1 միավոր, ինչպես նաև դասավորության ցանկացած տեղաշարժի պատճառների բաշխում, որոնք տեղի են ունեցել էջի բեռնման ժամանակ: Դուք կարող եք նաև օգտագործել այնպիսի գործիք, ինչպիսին է WebPageTest-ը, ձեր կայքի համար CLS-ը և կատարողականի այլ ցուցանիշները չափելու համար:

Ինչպե՞ս կարգավորել CLS-ը:

Ահա մի քանի քայլեր, որոնք կարող եք ձեռնարկել ձեր CLS-ը կարգավորելու համար.

Օպտիմալացնել պատկերները: Խոշոր կամ ոչ օպտիմալացված պատկերները կարող են առաջացնել դասավորության տեղաշարժեր, երբ դրանք բեռնվում են: Համոզվեք, որ պատկերները պատշաճ չափերով և սեղմված են՝ նվազեցնելու դրանց ազդեցությունը CLS-ի վրա:
Օգտագործեք կողմերի հարաբերակցությունը մեդիա տարրերի համար: Երբ պատկերի կամ տեսանյութի համար օգտագործում եք կողմերի հարաբերակցությունը, զննարկիչը գիտի, թե որքան տարածք կզբաղեցնի այն նախքան բեռնումը: Սա կարող է օգնել կանխել մեդիա տարրերի հետևանքով առաջացած դասավորության փոփոխությունները:
Պահպանեք տարածություն գովազդի և զետեղումների համար. գովազդները և ներկառուցումները հաճախ բեռնվում են ասինխրոն, ինչը կարող է առաջացնել դասավորության փոփոխություններ: Ձեր դասավորության մեջ նրանց համար տեղ վերապահելով՝ կարող եք կանխել այդ տեղաշարժերը:
Խուսափեք դինամիկ ներարկվող բովանդակությունից: Բովանդակությունը, որը ներարկվում է էջի բեռնումից հետո, օրինակ՝ թռուցիկ պատուհանները կամ զրույցի տուփերը, կարող են առաջացնել դասավորության փոփոխություններ: Փորձեք խուսափել այս տեսակի բովանդակությունից: Համոզվեք, որ այն բեռնված է այնպես, որ չի ազդի դասավորության վրա:
Բեռնել տառատեսակները ասինխրոն կերպով: Եթե դուք օգտագործում եք հատուկ տառատեսակներ ձեր կայքում, դրանք ասինխրոն կերպով բեռնելը կարող է օգնել կանխել տառատեսակի բեռնման հետևանքով առաջացած դասավորության փոփոխությունները:
Օգտագործեք նախաբեռնիչ: Նախաբեռնիչը էկրան է, որը հայտնվում է, երբ ձեր կայքը բեռնվում է: Այն կարող է օգնել կանխել դասավորության տեղաշարժերը՝ օգտվողին տալով ինչ-որ բան նայելու, երբ էջը բեռնվում է:

Կատարելով այս քայլերը՝ դուք կարող եք օգնել նվազեցնել դասավորության տեղաշարժերի ազդեցությունը ձեր կայքի վրա և բարելավել օգտատերերի փորձը: Մենք խորհուրդ ենք տալիս Hosta Blanca Համօգտագործված հոստինգ or VPS սերվեր ձեր վեբ նախագծերի համար: