Прескача ли сайта ми и малко разсъжения върху новият Cumulative Layout Shift (CLS) от Google

След като четете най-вероятно вече имате обща представа за какво става въпрос, но все още не сте решили проблема си.

Добрата новина: Проблем все още няма…

Лошата: Все пак искате да сте една крачка пред конкуренцията и имате незадоволителен резултат в Search Console.

И най-добрата новина: Решението на проблемът е не особено трудно за реализиране!

Първо да започнем с това какво е Cumulative Layout Shift (CLS)?

Няма да се правя на умен, защото не съм :), на прост Български тази дълга Английска тъпотия (словосъчетание) ще рече, че сайта ви прескача… уау, кое прескача ще попитате, нали?

Ами съдържанието ви, ако сайтът е добре оптимизиран за скорост е много вероятно и да не ви прави впечатление, както и на мен не ми правеше до преди няколко седмици… сега пак не ми прави впечатление, но това е защото вече нямам от това чудо CLS.

Та за да съм максимално кратък. Съдържанието във сайта ви е двуизмерно или иначе казано използва координатите X и Y, ако забележите елемент който да се мести по хоризонталата (все още не е доказано, че има връзка с CLS, но лично аз мисля, че има) или по вертикалата докато елементите от съдържанието се зареждат е много вероятно той да влошава коефицента който Search Console ви показва.

Ако разбирате за какво ви говоря това е супер, ако не препоръчвам да прочетете какво е написано тук.

Какво можем да направим за да отстраним проблема?

Най-важното е да се научим да проектираме правилно структурата на съдържанието, но на това няма да обърна внимание сега, защото не съм учител, а направо ще ви кажа къде да гледате в сайта си:

  1. Ползвате ли Fontawesome или друг подобен webfont?
    Ако да тогава ви препоръчвам да добавите това в css-a

    @font-face{font-display:optional;font-family:FontAwesome…

    също така ви препоръчвам да не използвате целият пакет с икони, а да си изберете само тези които са нужни за дизайна ви да си създадете по-малък woff файл който да качите на сървара си и допълнително да му сложите прелод ето по този начин:

    < link rel=”preload” as=”font” href=”www.site.com/FontAwesome.woff” type=”font/woff2″ crossorigin=”anonymous“>
  2. Изображения без width/height трибут, проверете дали имате такива изображения, ако намерите такива просто им поставете тези атрибути с правилните стойности, за да може да се запази пространството необходимо за пълното им изобразяване.

    ok —> <img scr=”/image.jpg” width=”200″ heght=”200″/>

    не ok —> <img scr=”/image.jpg” width=”” heght=””/>
  3. Имате ли допълнителни css файлове които са разположени след съдържанието ви например точно преди </body>, или такива които се зареждат след като страницата ви е напълно заредена?

    Ако имате такива ще ви се наложи да ги инспектирате, а най-лесно ще бъде просто да ги преместите в header-a при основният css. По начало не би трябвало да имате повече от 1 css файл, който да се зарежда на повечето ви страници, ако това е така имате по сериозен проблем от CLS.
  4. Javascript който да отлага зареждането на елементи от съдържанието във времето, да кажем 500мс след зареждането на сайта.

Какъв инструмент ползах за да анализирам?

WebVitals за Chrome върши перфектна работа, правите промяна презареждате страницата и ви излиза резултат.

Но най-полезният инструмент се оказа зрителният ми нерв, тъй като до последно имах недобър показател на един тип страница, докато накрая не усанових визуално откъде идваше проблема – една тъпа анимация която просто премахнах от css-a.

Ако след всичко написано не виждате светлина в тунела, можете да пишете, при първото свободно време мога да погледна сайта ви и да дам препоръки.

За подобни заявки пишете отдолу в коментарите, надявам се да съм бил поне малко полезен, лека!

Добави коментар