Почему я пишу это

Сейчас я веду несколько веб-сайтов, и с тех пор, как я начал, моя производительность то повышалась, то падала. Иногда меня это совершенно раздражало. Кажется, у меня локально все работает так хорошо, но затем я проверяю аналитику своего сервера и вижу, что в некоторых странах моя скорость была ужасной.

Всегда казалось, что это либоЦЛСилиЛКПэто было проблемой для меня. Поэтому я решил поделиться своим опытом и попытаться помочь другим разобраться в этом, особенно если вы проходите через то же самое. Или, может быть, у вас были проблемы с этим и у вас есть уникальная точка зрения или решение? Мне бы хотелось услышать об этом.

В соответствии сЖурнал поисковых систем, оптимизация этих двух показателей может значительно улучшить видимость вашего сайта и повысить удовлетворенность пользователей. В теории это звучало здорово, но на самом деле их исправление — это совсем другая история. Позвольте мне рассказать вам, что я узнал.

Что такое CLS и LCP?

Прежде чем я перейду к собственным трудностям, позвольте мне объяснить, что это на самом деле, потому что, когда я впервые увидел эти аббревиатуры в консоли поиска Google, я понятия не имел, что они означают.

Совокупное изменение макета (CLS)измеряет, насколько сильно меняется макет вашей страницы во время загрузки. Знаете, когда вы собираетесь нажать кнопку, и вся страница смещается, и вы нажимаете не на ту вещь? Это проблема CLS. Это невероятно расстраивает пользователя, и оказывается, что поисковые системы тоже наказывают вас за это.

Самая большая содержательная краска (LCP)измеряет, сколько времени требуется для загрузки самого большого видимого элемента на вашей странице. Обычно это главное изображение или большой блок текста. Если ваш LCP работает медленно, ваши посетители смотрят на наполовину загруженную страницу, и многие просто уйдут.

Оба они подпадают под действие GoogleОсновные веб-показатели, что напрямую влияет на ваш рейтинг в поиске. Таким образом, даже если ваш контент великолепен, плохие оценки CLS и LCP могут вас сдержать.

Оптимизируйте свой веб-сайт для CLS и LCP

🖼️

Установить размеры изображения
Укажите ширину и высоту изображений

📢

Используйте рекламу ответственно
Избегайте неожиданного изменения размера объявления

⚡

Предварительная загрузка важных ресурсов
Обеспечьте быструю загрузку критического контента

🔄

Минимизируйте динамический контент
Ограничьте контент, который меняется во время загрузки

📊

Регулярно контролируйте производительность
Используйте инструменты для отслеживания оценок CLS и LCP.

Мой кошмар CLS

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

Изображения без размеров:Я не устанавливал ширину и высоту своих изображений. Браузер понятия не имел, сколько места нужно зарезервировать, поэтому все изменилось после загрузки изображений.
Шрифты загружаются поздно:Мои пользовательские шрифты загружались после рендеринга страницы, в результате чего весь мой текст подпрыгивал, поскольку новый шрифт заменял резервный. Это было тонко, но в сумме.
Динамический контент:У меня было несколько компонентов, которые вводили контент после загрузки страницы, опуская все, что находится под ними.

Решение большинства моих проблем с CLS оказалось на удивление простым. Я начал определять явные размеры для всех изображений и медиафайлов. Я добавил замену шрифта-дисплея в загрузку шрифта, чтобы резервный вариант отображался немедленно. И я зарезервировал место с помощью CSS для любого контента, который загружается динамически.

Такие инструменты, какСтатистика Google PageSpeedбыли здесь огромной помощью. Они показывают вам, какие именно элементы вызывают сдвиги макета, поэтому вы не будете гадать.

Затем возникла проблема с LCP

Когда я подумал, что все улажено, мойбаллы LCPначал отмечать. Разочаровало то, что мой сайт загружался быстро для меня в Великобритании, но моя аналитика показывала ужасные скорости в других странах. В этом вся особенность LCP — это сильно зависит от того, где находятся ваши пользователи и насколько далеко они находятся от вашего сервера.

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

Большие неоптимизированные изображения:Мои изображения героев были слишком большими. Я загружал фотографии в полном разрешении, не сжимая их.
Время ответа сервера:Без CDN пользователи, находящиеся далеко от моего сервера, целую вечность ждали первого ответа.
JavaScript, блокирующий рендеринг:У меня в голове загружались сценарии, которые блокировали рендеринг страницы до ее завершения.

КакИсследование БаклинкоКак показывает практика, сайты с хорошими показателями LCP имеют заметно большую вовлеченность и более низкие показатели отказов. Как только я начал исправлять эти проблемы, я увидел разницу в своей собственной аналитике.

Что на самом деле помогло моему LCP

Я начал сжимать все свои изображения и использовать формат WebP, где это возможно. Я также переместил несущественные скрипты на асинхронную загрузку или полностью отложил их загрузку. Мои сайты размещены на Vercel, который выполняет за меня большую часть задач периферийной сети, но если вы используете традиционный хостинг, настройтеCDNможет иметь огромное значение для международного трафика.

CDN хранит копии вашего сайта в разных местах по всему миру, поэтому посетители обслуживаются откуда-то ближе к ним, а не с вашего единственного исходного сервера. Если вы наблюдаете низкую скорость в определенных регионах, это одна из первых вещей, на которые стоит обратить внимание.

Раздражающая часть: это никогда не «исправляется»

Вот о чем вам никто не говоритЦЛС и ЛКП. Вы не исправляете их один раз и идете дальше. Каждый раз, когда я добавляю новую функцию, новое изображение или меняю макет, оценки могут снова меняться. Это постоянное явление.

У меня бывали недели, когда в Google Search Console все было зеленым, а потом я добавлял один новый компонент, и внезапно мой CLS снова помечался. Это совершенно раздражает, но теперь я научился проверять свои основные веб-показатели после каждого существенного изменения.

Влияние CLS и LCP на пользовательский опыт

0,1 секунды

Допуск пользователя

32%

Увеличение показателя отказов

Падение коэффициента конверсии

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

Важность SEO-рейтинга

ОтчетФинансовый брендподчеркивает, как медленные веб-сайты могут напрямую привести к потере дохода. Этой мотивации достаточно, чтобы оставаться на высоте, даже если это кажется утомительным.

Инструменты, которые помогли мне больше всего

Если вы столкнулись с теми же проблемами, вот инструменты, которые я действительно использую и считаю полезными:

Консоль поиска Google:Здесь я впервые заметил свои проблемы. Он показывает ваши показатели Core Web Vitals с разбивкой по страницам и точно сообщает, что требует внимания.
Статистика PageSpeed:Я просматриваю каждую страницу после внесения изменений. Он дает конкретные, действенные рекомендации, а не расплывчатые советы.Руководство по производительности Shopify в Интернететакже является отличным сопутствующим ресурсом.
Расширение Web Vitals:Это расширение Chrome показывает ваши CLS, LCP и другие показатели в режиме реального времени, когда вы просматриваете свой сайт. Я держу его включенным постоянно во время разработки.

Как только вы обнаружите проблемы с производительностью, воспользуйтесь нашимИнструмент ранжирования Google Search AIчтобы проверить, действительно ли ваши улучшения приводят к улучшению видимости в поиске. Нет смысла фиксировать баллы, если это не способствует вашему рейтингу.

Мой совет, если вы проходите через это

Если ваши результаты были такими же взлетами и падениями, как и мои, вот что я бы посоветовал:

Не паникуйте.Проблемы CLS и LCP невероятно распространены. Вы не все делаете неправильно — просто эти показатели чувствительны.
Проверьте свою аналитику по странам.Ваш сайт может быть быстрым для вас, но медленным для посетителей в других местах. CDN может решить эту проблему быстро.
Сначала исправьте изображения.По моему опыту, неоптимизированные изображения и недостающие размеры являются причиной большинства проблем CLS и LCP.
Тестируйте после каждого изменения.Возьмите за привычку запускать PageSpeed Insights всякий раз, когда вы вносите существенные обновления.
Потерпи.Обновление данных Google Search Console может занять несколько дней или недель. Не думайте, что ваши исправления не работают только потому, что панель мониторинга еще не изменилась.

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

Суть в следующем:ЦЛС и ЛКПне уходят. Они важны для SEO, они важны для пользовательского опыта, и если вы управляете веб-сайтами, как я, они будут держать вас в напряжении. Но они поправимы, и каждое ваше улучшение того стоит.