Чому я це пишу

Зараз я керую кількома веб-сайтами, і з самого початку моя ефективність була то вгору, то впадок. Мене іноді це просто дратує. Здається, у мене на локальному рівні все працює дуже добре, але потім я перевіряю аналітику свого сервера й бачу, що для деяких країн моя швидкість була жахливою.

Здавалося, що завжди було так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, що блокує візуалізацію:У мене в голові завантажувалися сценарії, які блокували рендеринг сторінки, доки вони не завершаться.

якДослідження Беклінкопоказує, сайти з хорошими показниками 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 Insight щоразу, коли ви робите значні оновлення.
Наберіться терпіння.Оновлення даних Google Search Console може тривати кілька днів або тижнів. Не думайте, що ваші виправлення не працюють лише тому, що інформаційна панель ще не змінилася.

Я все ще вчуся і все ще маю справу з цим. Мої результати кращі, ніж були, але я б не назвав їх ідеальними. Якщо ви знайшли рішення, які спрацювали для вас, я щиро хочу почути про них. Ви також можете спробувати візуалізувати дані про ефективність за допомогою нашогобезкоштовний онлайн-конструктор діаграмвідстежувати покращення з часом.

Суть така:CLS і LCPне йдуть. Вони важливі для SEO, вони важливі для взаємодії з користувачем, і якщо ви керуєте такими веб-сайтами, як я, вони будуть тримати вас на ногах. Але їх можна виправити, і кожне ваше вдосконалення того варте.