Защо пиша това

Сега управлявам няколко уебсайта и откакто започнах, представянето ми беше много нагоре и надолу. На моменти го намирам за направо досадно. Изглежда, че всичко работи толкова добре за мен локално, но след това проверявам анализа на сървъра си и виждам, че за определени държави скоростта ми е ужасна.

Изглежда винаги е било и едното, и друготоCLSилиLCPтова беше проблемът за мен. Затова реших да споделя опита си и да се опитам да помогна на другите да разберат това, особено ако вие преминавате през същото. Или може би сте имали проблеми с това и имате уникална гледна точка или решение? Бих искал да чуя за това.

СпоредВестник на търсачката, оптимизирането на тези два показателя може значително да подобри видимостта на вашия сайт и удовлетворението на потребителите. Това звучеше страхотно на теория, но всъщност поправянето им беше различна история. Нека ви преведа през това, което научих.

Какво точно представляват CLS и LCP?

Преди да навляза в собствените си проблеми, позволете ми да обясня какво всъщност представляват те, защото когато за първи път видях тези акроними в Google Search Console, нямах представа какво означават.

Кумулативно изместване на оформлението (CLS)измерва колко скача оформлението на страницата ви, докато се зарежда. Знаете ли, когато сте на път да докоснете бутон и цялата страница се измества, така че щракнете върху грешното нещо? Това е проблем на CLS. Това е невероятно разочароващо като потребител и се оказва, че търсачките също ви наказват за това.

Рисуване с най-голямо съдържание (LCP)измерва колко време е необходимо за зареждане на най-големия видим елемент на вашата страница. Обикновено това е главно изображение или голям блок от текст. Ако вашият LCP е бавен, посетителите ви гледат наполовина заредена страница и много просто ще си тръгнат.

И двете спадат към GoogleОсновни уеб показатели, които пряко влияят върху класирането ви при търсене. Така че дори съдържанието ви да е брилянтно, лошите резултати от CLS и LCP могат да ви спрат.

Оптимизирайте вашия уебсайт за CLS и LCP

🖼️

Задайте размери на изображението
Задайте ширина и височина за изображения

📢

Използвайте рекламите отговорно
Избягвайте неочаквано преоразмеряване на реклами

⚡

Предварително зареждане на важни ресурси
Осигурете бързо зареждане на критично съдържание

🔄

Минимизиране на динамичното съдържание
Ограничете съдържанието, което се променя по време на зареждане

📊

Наблюдавайте редовно ефективността
Използвайте инструменти за проследяване на CLS и LCP резултати

Моят CLS кошмар

CLS беше първият проблем, на който се натъкнах. Страниците ми изглеждаха добре, но резултатите ми бяха ужасни. След много ровене открих основните виновници:

Снимки без размери:Не задавах ширина и височина на моите изображения. Браузърът нямаше представа колко място да резервира, така че всичко се измести, след като изображенията се заредиха.
Шрифтовете се зареждат късно:Моите персонализирани шрифтове се зареждаха след изобразяването на страницата, което караше целия ми текст да скочи, тъй като новият шрифт замени резервния. Този беше фин, но добави.
Динамично съдържание:Имах някои компоненти, които инжектираха съдържание след зареждане на страницата, избутвайки всичко под тях надолу.

Решението за повечето ми проблеми с CLS беше изненадващо просто. Започнах да определям ясни размери за всички изображения и медии. Добавих суап за показване на шрифт към моето зареждане на шрифтове, така че резервният вариант да се изобразява незабавно. И запазих място с CSS за всяко съдържание, което се зарежда динамично.

Инструменти катоGoogle PageSpeed Insightsбяха огромна помощ тук. Те ви показват точно кои елементи причиняват промени в оформлението, така че не предполагате.

Тогава дойде проблемът с LCP

Точно когато си помислих, че съм подредил нещата, БожеLCP резултатизапочна да маркира. Разочароващата част беше, че сайтът ми се зареди бързо за мен в Обединеното кралство, но моите анализи показаха ужасни скорости в други страни. Това е нещото за LCP - зависи до голяма степен от това къде са вашите потребители и колко далеч са от вашия сървър.

Основните проблеми, които открих, бяха:

Големи неоптимизирани изображения:Изображенията ми на герои бяха твърде големи. Качвах снимки с пълна резолюция, без да ги компресирам.
Време за отговор на сървъра:Без CDN потребителите далеч от моя сървър чакаха векове за първия отговор.
JavaScript, блокиращ изобразяването:В главата ми се зареждаха скриптове, които блокираха изобразяването на страницата, докато не завършат.

катоПроучване на Backlinkoпоказва, сайтовете с добри LCP резултати имат забележимо по-добра ангажираност и по-ниски нива на отпадане. След като започнах да коригирам тези проблеми, можех да видя разликата в собствените си анализи.

Какво всъщност помогна на моя LCP

Започнах да компресирам всичките си изображения и да използвам WebP формат, където е възможно. Също така преместих несъществени скриптове да се зареждат асинхронно или ги отложих изцяло. Моите сайтове се хостват на Vercel, който обработва много от мрежовите неща за мен, но ако сте на традиционен хостинг, настройването наCDNможе да направи огромна разлика за международния трафик.

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

Досадната част - никога не е наистина "поправена"

Ето това, за което никой не ви казваCLS и LCP. Не ги поправяте веднъж и продължавате напред. Всеки път, когато добавя нова функция, ново изображение или променя оформлението си, резултатите могат да се променят отново. Това е нещо, което продължава.

Имал съм седмици, в които всичко е зелено в Google Search Console, след което добавям един нов компонент и внезапно моят CLS отново е маркиран. Направо е досадно, но сега се научих да проверявам основните си уеб показатели след всяка значителна промяна.

Въздействие на CLS и LCP върху потребителското изживяване

0,1 секунди

Потребителска толерантност

32%

Увеличаване на степента на отпадане

Спад на процента на реализация

Основни уеб показатели

Значение на SEO класирането

Доклад отФинансовата маркаподчертава как бавните уебсайтове могат директно да доведат до загуба на приходи. Това е достатъчна мотивация, за да се справите с него, дори когато ви се струва досадно.

Инструментите, които ми помогнаха най-много

Ако се сблъсквате със същите проблеми, ето инструментите, които всъщност използвам и намирам за полезни:

Google Search Console:Тук за първи път забелязах проблемите си. Той показва вашите резултати от Core Web Vitals, разбити по страници, и ви казва какво точно изисква внимание.
PageSpeed Insights:Преминавам всяка страница през това, след като направя промени. Той дава конкретни, приложими препоръки, а не неясни съвети.Ръководство за уеб ефективност на Shopifyсъщо е чудесен придружаващ ресурс.
Разширение Web Vitals:Това разширение за Chrome показва вашите CLS, LCP и други показатели в реално време, докато сърфирате в собствения си сайт. Държа го включен постоянно по време на разработката.

След като идентифицирате проблемите си с производителността, използвайте нашияИнструмент за класиране на Google Search AIза да проверите дали вашите подобрения действително се превръщат в по-добра видимост при търсене. Няма смисъл да коригирате резултати, ако това не помага на вашето класиране.

Моят съвет, ако преминавате през това

Ако вашето представяне е било нагоре и надолу като моето, ето какво бих предложил:

Не изпадайте в паника.Проблемите с CLS и LCP са невероятно често срещани. Не правите всичко погрешно - тези показатели са просто чувствителни.
Проверете вашите анализи по държави.Вашият сайт може да е бърз за вас, но бавен за посетители другаде. CDN може да реши това бързо.
Първо коригирайте изображенията.Според моя опит неоптимизираните изображения и липсващите размери са причина за повечето проблеми с CLS и LCP.
Тествайте след всяка промяна.Създайте си навик да стартирате PageSpeed Insights всеки път, когато правите значителни актуализации.
Бъдете търпеливи.Актуализирането на данните от Google Search Console може да отнеме дни или седмици. Не приемайте, че корекциите ви не работят само защото таблото за управление все още не е променено.

Все още се уча и все още се занимавам с това. Резултатите ми са по-добри, отколкото бяха, но не бих ги нарекъл перфектни. Ако сте намерили решения, които работят за вас, искрено искам да чуя за тях. Можете също да опитате да визуализирате вашите данни за ефективността с нашитебезплатен онлайн производител на диаграмиза проследяване на подобренията във времето.

Изводът е следният:CLS и LCPне си отиват. Те имат значение за SEO, имат значение за потребителското изживяване и ако управлявате уебсайтове като мен, те ще ви държат нащрек. Но те са поправими и всяко подобрение, което направите, си заслужава.