Глубокое погружение в PageSpeed Insights (Полное руководство & Советы по получению 100 баллов)

В интернете не существует ограничений скорости — но, к счастью, есть спидометр.

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

Но прежде чем вы сможете оптимизировать скорость вашего сайта, вам нужно знать, как он работает.

Вот тут и пригодится PageSpeed Insights.

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

В конце концов, что означают все эти разные термины и оценки? Как вам знать, что делать или с чего начать?

Это руководство сосредоточено на том, что делать с результатами вашего отчета PageSpeed Insights и как стратегически подходить к решению конкретных задач для улучшения каждого из ваших показателей, независимо от того, какие проблемы требуют решения!

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

Что такое Google PageSpeed Insights?

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

В дополнение к оценке вашего сайта по ряду ключевых показателей эффективности, PageSpeed Insights проводит ряд диагностических проверок и рекомендует конкретные меры, которые помогут вам улучшить производительность вашего сайта.

PageSpeed Insights работает на основе открытого аналитического движка Google, Lighthouse.

То, что делает инструмент PageSpeed Insights особенно важным для вебмастеров и маркетологов, заключается в том, что производительность сайта тесно связана с пользовательским опытом (UX), SEO, трафиком, конверсиями и всеми другими ключевыми показателями эффективности, которые имеют наибольшее значение для бизнеса.

Получение 100% в PageSpeed Insights похоже на получение высшего балла на SAT.

Это не обязательно означает, что у вас будет отлично в колледже, но это определенно дает вам преимущество.

Скорость страницы и SEO

Давайте сначала ответим на главный вопрос.

Да, скорость и производительность вашего сайта могут влиять на оптимизацию для поисковых систем (SEO).

В частности, плохая производительность может навредить вашему SEO. Полезно думать о вашем PageSpeed Insights как о «регуляторе» для вашего сайта. Если ваши оценки низкие, это означает, что сайт работает медленно – что также замедляет ваш рост в SERPs (Страница результатов поисковой системы)!

Google официально заявила, что использует сигналы скорости сайта, которые они называют «опыт работы со страницей», как фактор ранжирования SEO.

Существует три основных фактора, включенных в алгоритм поиска, на которые Google ссылается как на Основные показатели веб-виталитета:

1. Загрузка – Largest Contentful Paint (LCP)
2. Взаимодействие – First Input Delay (FID)
3. Визуальная стабильность – Cumulative Layout Shift (CLS)

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

Эти три фактора являются частью шести общих метрик, измеряемых с помощью PageSpeed Insights.

Как работает PageSpeed Insights

Теперь, когда мы понимаем кто, что, где и почему… всё, что осталось — это как.

Как работает PageSpeedInsights и как использовать предоставляемую им информацию?

Сначала немного о том, как инструмент работает за кулисами, напрямую от Google:

«PageSpeed Insights предоставляет данные как из лаборатории, так и из реальных условий о странице. Лабораторные данные полезны для устранения ошибок, поскольку они собираются в контролируемой среде. Однако они могут не улавливать проблемы, возникающие в реальных условиях. Данные из реальных условий полезны для фиксации настоящего пользовательского опыта в реальном мире, но имеют более ограниченный набор метрик.»

Другими словами, PageSpeed Insights анализирует два аспекта.

Сначала компьютеры Google загружают ваш сайт, чтобы посмотреть, как он работает.

Во-вторых, поскольку компьютеры Google отличаются от ноутбуков, которые вы можете использовать дома или на работе, они просматривают журнал исторических данных от реальных пользователей, которые посещали ваш сайт за последние 28 дней. (Эти данные поступают из отчета о пользовательском опыте Chrome, часто называемого «CrUX», и собираются от пользователей, которые используют браузер Chrome.)

Затем PageSpeed Insights объединяет эти два теста и оценивает ваш сайт на основе того, как его могут воспринимать реальные пользователи.

Оценка PageSpeed Insights представляет собой набор метрик о производительности вашего сайта, который показывает, какие области хороши, а какие могут требовать доработки.

Есть 6 основных показателей:

1. Первый контентный отрисовок (FCP)
2. Задержка первого ввода (FID)
3. Наибольший контентный отрисовок (LCP)
4. Накопительное смещение макета (CLS)
5. Взаимодействие до следующего отрисовка (INP)
6. Время до первого байта (TTFB)

Каждый из этих показателей измеряется, а затем оценивается в соответствии с уровнем производительности.

Когда вы запускаете отчет PageSpeed Insights для вашего сайта, вы получите оценку и «класс» для каждого из них, которые будут отнесены к одной из трех категорий:

1. Хорошо
2. Требует улучшения
3. Плохо

Эти оценки определяются предустановленными диапазонами, которые устанавливает Google:

Как использовать это руководство для улучшения результата PageSpeed Insights

Понимание PageSpeed Insights – это первая часть борьбы.

Далее, нам нужно выяснить, как перевести все оценки, числа и предложения в план действий по улучшению.

Вот как использовать это руководство:

• Запустите отчет о производительности вашего сайта в PageSpeed Insights.
• Ищите неудачные тесты CWV или показатели в разделе «Плохо».
• Найдите раздел ниже, который относится к этим конкретным показателям.
• Пройдите шаги (представленные в порядке от наибольшего к наименьшему влиянию).
• Повторно запустите отчет PageSpeed Insights.
• При необходимости повторите процесс для любых показателей, все еще отмеченных как «Плохо».
• Перейдите к показателям, отмеченным как «Требуется улучшение».
• Повторите с начала.

#1 – Первая контентная отрисовка (FCP)

Давайте рассмотрим первый показатель в списке Google.

Это первая содержательная отрисовка, или FCP, и она измеряет, насколько быстро пользователь может видеть ваш сайт во время его загрузки.

Что такое First Contentful Paint?

First Contentful Paint (FCP) — это время, необходимое для загрузки первого объекта в браузере пользователя. Это отличается от скорости загрузки страницы или времени загрузки, поскольку это не время отображения всей страницы — это просто первый элемент страницы, который появляется на экране.

Это важно с точки зрения пользователя, потому что они могут видеть прогресс, когда страница начинает появляться.

Это также означает, что стратегии ускорения FCP уникальны и отличаются от простого ускорения загрузки всей страницы.

FCP измеряется в секундах.

• Хорошо: < 1.8 секунд
• Требует улучшения: 1.8 – 3 секунды
• Плохо: > 3 секунд

Методы улучшения FCP

Допустим, ваш результат FCP составляет 2.2с. Вы надеетесь снизить его до 1.8с.

Какие инструменты у вас есть в распоряжении?

Минимизация ресурсов, блокирующих рендеринг

Помните, First Contentful Paint не только о том, сколько времени занимает загрузка всей страницы. Речь идет о том, чтобы как можно быстрее отобразить первые пиксели на экране.

Одна из ключевых стратегий – это просто изменение порядка контента на вашей странице.

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

Первое, что вам следует сделать: Удалите все неиспользуемые стили или скрипты со страницы.

Если вы загружаете JavaScript или CSS на страницу (обычно в разделе Head сайта), это замедлит FCP. Если вы их не используете, то это просто замедляет вас без необходимости.

В WordPress это обычно можно сделать, отключив неиспользуемые плагины, которые могут загружать код на страницу, даже если плагин не используется или не отображается.

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

Это должно подсказать вам, какой код или plugins можно безопасно удалить.

(Примечание: Отсутствие кода на одной странице не означает, что его нет на других страницах вашего сайта! Будьте осторожны, прежде чем начать удалять и изменять элементы на ваших страницах.)

Далее: Отложите или загрузите скрипты асинхронно.

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

Это довольно просто — вы можете добавить немного дополнительного кода на ваш сайт, который будет указывать браузеру отложить загрузку или загрузить асинхронно (или и то, и другое):

<script src="app.js" async></script>

(Заметка для энтузиастов: Async и defer технически не одно и то же. Но для большинства из нас различие в основном семантическое. Тем не менее, не стесняйтесь погрузиться в кроличью нору и узнать больше о тонких нюансах.)

Если вы хотите более простой способ выполнить этот шаг, рассмотрите возможность использования плагина JetPack Boost для WordPress.

JetPack — это бесплатный набор плагинов, который предоставляет вам все виды инструментов для оптимизации скорости и производительности вашего сайта. Особенно можно отметить возможность отложенной загрузки несущественного JavaScript одним кликом.

Изнутри WordPress перейдите в Plugins > Add New.

Затем найдите Boost. Кликните «Установить» и «Активировать».

Вы должны увидеть новое меню в вашей левой навигационной панели под названием «JetPack».

Перейдите в JetPack > Boost.

Плагин будет отображать ваш сайт в фоновом режиме и показывать ваш рейтинг, а также предложения по улучшению. Чтобы отложить выполнение несущественного JS, просто кликните по переключателю, чтобы его включить.

Наконец: Реструктуризация CSS (стилизация).

Если вы знакомы с CSS, то знаете, что обычно все стили собирают в один большой блок кода и загружают его в стандартный файл, например, style.css.

Это не неправильно. Это просто не очень производительно.

Чтобы улучшить FCP, вы можете оптимизировать структуру вашего CSS:

1. Удалить все стили, которые применяются к содержимому, являющемуся частью FCP (всё, что «наверху страницы»).
2. Добавить эти стили в виде блока inline стилей в заголовке вашего сайта.
3. Загрузить оставшиеся стили асинхронно с функцией «preload» (показано ниже).

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

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

Оптимизация изображений и видео

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

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

Использование сети доставки контента (CDN)

То же, что и выше. CDN могут помочь быстрее загрузить всю вашу страницу, что немного ускоряет FCP. Смотрите ниже для получения дополнительной информации о использовании CDN.

#2 – Задержка первого ввода (FID), Общее время блокировки (TBT) и Время до интерактивности (TTI)

Теперь давайте поговорим о компромиссах.

Если вы сосредоточены только на First Contentful Paint, вы можете подумать, что все, что вам нужно сделать для улучшения результата в PageSpeed Insights, это отложить и загрузить все ресурсы позже, чтобы верхняя часть вашего сайта загружалась быстрее.

Но если сайт загружается быстро, но я не могу с ним взаимодействовать, это также плохой пользовательский опыт.

Введите: Задержка первого ввода.

Задержка первого ввода также связана с метриками общего времени блокировки (TBT) и времени до интерактивности (TTI).

Давайте разберем каждый из этих аспектов и как они связаны, но отличаются.

Что такое задержка первого ввода?

Задержка первого ввода (FID) – это время, которое требуется браузеру для ответа на первый ввод или взаимодействие пользователя (например, при клике на ссылку или кнопку). Производительность вашего сайта влияет на задержку, поскольку большинство взаимодействий не могут быть обработаны во время загрузки или рендеринга кода браузером.

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

Этот показатель измеряется в миллисекундах и основан на данных реальных пользователей.

• Хорошо: < 100мс
• Требует улучшения: 100 – 300мс
• Плохо: > 300мс

Что такое время до интерактивности (TTI)?

Время до интерактивности — это время, необходимое для того, чтобы страница стала «надежно интерактивной».

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

Это метрика, измеряемая инструментом Google Lighthouse, поэтому она не основана на реальных данных пользователей. Вместо этого, она измеряется по определенным контролируемым критериям.

Что такое общее время блокировки (TBT)?

Общее время блокировки измеряет полный период времени между FCP и TTI.

Другими словами, отсчёт времени начинается не раньше, чем отобразится верх страницы, и останавливается после того, как страница считается «надёжно интерактивной» или через 5 секунд после освобождения основного потока.

Задержка первого ввода против времени до интерактивности против общего времени блокировки

Эти три метрики связаны, но не идентичны.

First Input Delay основан на реальных данных пользователей и Core Web Vitals. TTI и TBT измеряются в отчете о производительности в PageSpeed Insights, который работает на базе Lighthouse от Google.

Что касается улучшения производительности этих трех показателей, то решения также похожи, но не идентичны. Прежде всего, решения для улучшения FID, которые включают отложенную визуализацию JavaScript, не улучшат TTI или TBT, поскольку JavaScript все равно нужно загружать.

Но такие решения, как удаление, минификация и кэширование, должны помочь улучшить все три показателя.

Методы улучшения FID, TTI и TBT

Наибольшее влияние на FID оказывает JavaScript, загруженный на вашу страницу.

Можно представить JavaScript как отдельную железнодорожную ветку для браузера. Пока он рендерит или выполняет код JavaScript, он не может выполнять другие задачи или отвечать на входные данные, такие как клик пользователя по ссылке («основной поток» должен быть свободен, чтобы браузер мог реагировать).

Таким образом, чем дольше происходит чтение и выполнение JavaScript при первой загрузке страницы, тем больше будет задержка, если пользователь начнет взаимодействовать со страницей.

Сократите влияние кода сторонних разработчиков

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

Каждый раз, когда вы добавляете на свой сайт такие вещи, как Facebook, Drift, Intercom, HotJar или другие сторонние инструменты и сервисы, добавляется немного кода, который должен быть загружен и отображен на странице.

Если у вас много таких сервисов, загрузка всех может занять много времени.

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

Давайте исправим это.

Вариант №1: Удалите все неиспользуемые сторонние инструменты.

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

Сейчас самое время удалить или деинсталлировать те, которыми вы активно не пользуетесь.

Чтобы получить полный список загружаемых на вашей странице JavaScript сторонних разработчиков, обратитесь к отчету PageSpeed Insights или запустите отдельный отчет Lighthouse.

Вы должны увидеть список всех загружаемых скриптов и время их загрузки:

Теперь, используя эту информацию, вы можете решить, какие из этих элементов критически важны, а какие можно безопасно удалить.

В зависимости от того, какие сервисы вы хотите удалить, вам может потребоваться вручную удалить код с вашего сайта, удалить плагин WordPress или удалить код, добавленный через Google Tag Manager для повышения производительности страницы.

Вариант #2: Асинхронная загрузка JavaScript.

Если это не жизненно важно для отображения FCP, рекомендуется рендерить скрипты третьих лиц асинхронно. Если у вас есть важный JavaScript, который замедляет FID, но вы не можете его удалить, тогда попробуйте загрузить его асинхронно.

Минимизация времени выполнения JavaScript

Код сторонних разработчиков может быть подлецом, но что насчет нашего собственного кода, который мы разместили на нашем сайте?

Скорее всего, это не безобидно в плане медленной загрузки.

Если у вас есть несущественный JavaScript, который вы добавили на свой собственный сайт, возможно, вы захотите его удалить.

Просматривая отчет PageSpeed Insights, вы должны увидеть раздел, который упоминает неиспользуемый JavaScript:

• Если JavaScript не используется на 100%, рассмотрите возможность его удаления
• Если JavaScript используется на других страницах, рассмотрите возможность его выборочной загрузки только на тех страницах, где это необходимо (также известно как «разделение кода»)

Вы также можете изучить варианты улучшения времени загрузки JavaScript.

Самый распространенный способ ускорить время загрузки – уменьшить размер файла. И в случае с JavaScript существуют две основные стратегии:

• Минификация – Удаление всех пробелов, переносов строк и т.д. в коде
• Сжатие – “Архивация” файла для уменьшения его размера

Любой из этих методов может помочь сделать ваш код более производительным.

Приоритизация видимого содержимого

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

В конце концов, пользователи не могут взаимодействовать с элементами, которые не были отрисованы.

#3 – Наибольший значимый элемент (LCP)

Если FCP — это время вашего автомобиля от 0 до 60, то LCP — это его четверть мили.

Хорошо, если говорить простым языком, LCP измеряет, насколько быстро пользователь может увидеть «основное» содержимое вашей веб-страницы.

Что такое Largest Contentful Paint?

Largest Contentful Paint (LCP) — это метрика, которая измеряет, сколько времени требуется, чтобы самый большой блок контента на странице стал видимым для пользователя. В отличие от FCP, она учитывает время загрузки самого большого блока изображения или текста на странице, независимо от его позиции или порядка.

Он измеряет самый большой блок контента на основе его размеров в поле зрения пользователя. Другими словами, если есть один <div> с большим количеством текста или одно изображение, которое занимает большую часть экрана, это может быть рассмотрено как самый большой блок контента и использовано для расчета LCP.

Измеряется в секундах и основано на данных реальных пользователей (или «в полевых условиях»):

• Хорошо: < 2.5с
• Требует улучшения: 2.5 – 4с
• Плохо: > 4с

Методы улучшения LCP

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

Это может помочь вам сосредоточить усилия на улучшении производительности конкретной страницы или шаблона.

Вы можете сделать это, используя Chrome DevTools в вашем браузере для определения ресурса LCP на любой конкретной странице.

Оптимизировать приоритет загрузки

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

Вам стоит рассмотреть эти варианты как первоочередные.

Удаление или откладывание ресурсов, блокирующих отрисовку, может помочь основному содержимому загружаться быстрее. Однако имейте в виду, что если эти ресурсы значительно изменят макет или структуру страницы, это может фактически изменить, какой блок считается наибольшим и замедлить LCP, а не улучшить его!

Вы можете продвинуть эту стратегию еще дальше. Особенно если самым большим блоком контента является изображение.

Вы можете использовать так называемую PRPL (Preload, Render, Precache, Lazy load) архитектуру для того, чтобы задать приоритет загрузки определенных ресурсов на вашей странице и чтобы они загружались первыми в очереди. Если это изображение является самым крупным блоком контента, то это значительно улучшит ваш LCP показатель.

В дополнение к асинхронным вариантам рендеринга, этот фреймворк предоставляет другие стратегии для оптимизации пути рендеринга.

Одним из самых простых методов является предварительная загрузка критических ресурсов.

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

Например, если у вас есть главное изображение, которое является самым большим блоком на странице, тогда вы можете предварительно загрузить это изображение на каждой странице, используя такой фрагмент кода:

<link rel="preload" as="image" href="image1.png">

Это указывает браузеру начать загрузку этого ресурса немедленно, до того как он будет обнаружен на странице.

Оптимизация размера файла (ресурса)

Теперь давайте поговорим о размере файла.

Большие файлы загружаются дольше. Это касается изображений, скриптов, видео, шрифтов и всего остального на вашей странице, что может быть загружено как часть самого большого блока контента.

Один из способов ускорить ваш LCP показатель – это оптимизация размера файла.

Стратегии оптимизации размера файла будут зависеть от формата файла.

Оптимизация изображений

Обычно, вы можете добиться значительного улучшения, сжимая и оптимизируя ваши изображения.

Начните с оценки этих областей для улучшения:

• Формат: Различные форматы изображений предлагают разные уровни сжатия и качества. Для большинства случаев использования в Интернете наиболее распространены форматы JPEG, PNG и WebP.
  • JPEG обычно лучше всего подходит для фотографий.
  • PNG обычно лучше всего подходит для дизайнерских изображений с текстом или четкими краями.
  • WebP — более эффективный формат, который обеспечивает лучшее сжатие без потери качества, но может не поддерживаться всеми браузерами.
• Сжатие: Во многих случаях можно сжать размер файла изображения без значительной потери визуального качества.
  • Онлайн-инструменты для сжатия изображений: TinyPNG (для PNG и JPEG), Squoosh (для WebP).
  • Инструменты сжатия изображений для WordPress: ShortPixel, Imagify.
• Размер изображения: Если вы загружаете необработанные изображения или фотографии на свой сайт и затем добавляете их на страницу, скорее всего, они значительно больше, чем нужно, что замедляет время загрузки.
  • Измените размер своих изображений и загружайте только необходимый размер.
  • Используйте плагин WordPress для автоматического изменения размера изображений при их загрузке.
  • Используйте атрибуты “srcset” и “sizes” в теге “img” для указания нескольких источников и размеров изображений. Браузер автоматически выбирает наиболее подходящее изображение в зависимости от размера экрана и разрешения пользователя.

Оптимизация скриптов и стилей

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

Это включает скрипты и стили, которые влияют на ваш самый большой блок контента.

Используя некоторые из рассмотренных ранее методов, вы можете улучшить LCP, оптимизировав размер файла и путь рендеринга для JavaScript, CSS и т.д.:

• Минификация файлов.
• Разделение кода для уменьшения размера файла.
• Добавить стили и скрипты встроенными.
• Предварительная загрузка или кэш.

Оптимизация видео

Если ваш ресурс LCP может быть видео, то вам следует рассмотреть способы оптимизации видео.

• Разместите видео на YouTube или другой службе с быстрым CDN, вместо прямой загрузки.
• Сжимайте размер видеофайла.

Оптимизация шрифтов

Если ресурс LCP является текстом и этот текст использует импортированный шрифт (например, из Google Fonts), то вы можете оптимизировать его, улучшив скорость загрузки файла шрифта.

• Используйте только шрифты WOFF и WOFF2.0 для веба.
• Предварительно загрузите файл шрифта с помощью тега link rel (см. выше).
• Изучите больше вариантов для дальнейшего уменьшения времени загрузки файла шрифта.

Имплементация CDN

Представьте CDN как полосу для автомобилей с высокой посадочной способностью на шоссе.

Это помогает браузеру быстрее загружать ресурсы, кэшируя их на серверах по всему миру.

Главное, что нужно знать: внедрение CDN может значительно улучшить производительность сайта в целом. И, особенно когда речь идет о LCP, это может помочь быстрее отображать изображения, скрипты и другие ресурсы, чем обычный сервер вашего веб-хоста.

Для реализации CDN:

• Выберите провайдера CDN: На рынке доступно несколько популярных провайдеров CDN, таких как Cloudflare, Amazon CloudFront, Google Cloud CDN и Fastly.
• Зарегистрируйтесь и настройте CDN: После выбора провайдера CDN зарегистрируйтесь для получения аккаунта и настройте параметры CDN. Это обычно включает создание зоны CDN, настройку правил кэширования и установку шифрования SSL/TLS.
• Интегрируйте CDN с вашим сайтом: Для интеграции CDN с вашим сайтом вам потребуется обновить URL-адреса контента, который вы хотите обслуживать через CDN. Это включает изменение Nameservers так, чтобы они указывали на CDN, а не на ваш обычный сервер.
• Проверьте работу CDN: После интеграции CDN с вашим сайтом проведите тесты, чтобы убедиться, что контент поставляется через CDN и что производительность LCP улучшилась.

Для получения более подробного руководства ознакомьтесь с нашей статьей о использовании CDN с WordPress.

Улучшение производительности сервера

Наконец, не в последнюю очередь, производительность сервера вашего веб-хоста также играет ключевую роль в LCP.

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

#4 – Кумулятивное смещение макета (CLS)

Знаете ли вы, что сайты могут танцевать?

Ну, в какой-то степени. И не очень хорошо.

Более точно, они могут сдвигаться. Элементы на странице перемещаются, пока различные изображения, скрипты, стили и тексты рендерятся, пока страница не будет полностью загружена.

Что такое кумулятивное смещение макета?

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

Это неудивительно, если учесть ваши собственные привычки в интернет-сёрфинге.

Если вам кажется, что вы играете в крота, пытаясь нажать на ссылку, которая постоянно убегает вниз по странице, вы, вероятно, разочаруетесь и покинете сайт. (Привет, показатель отказов!)

Этот опыт может быть особенно раздражающим при просмотре на мобильном устройстве.

CLS — это данные с полевых исследований от реальных пользователей, измеряемые как оценка, которая объединяет «долю воздействия» (какой процент элементов в области просмотра сместился) и «долю расстояния» (насколько далеко они переместились по отношению к общему размеру экрана).

Существует также специальное обозначение для «ожидаемых изменений» (например, нажатие кнопки, которое открывает новый раздел на странице) и «неожиданных изменений», которые не вызваны вводом пользователя.

CLS измеряется путем умножения доли воздействия и доли расстояния:

• Хорошо: < 0.1
• Требует улучшения: 0.1 – 0.25
• Плохо: > 0.25

Методы улучшения CLS

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

Определите размеры всех изображений и видео

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

Это так же просто, как добавление атрибута для любого изображения или видео на странице:

<img src="hero_image.jpg" width="400" height="400">

Избегайте рекламы и всплывающих окон, вызывающих сдвиги макета

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

Выбирайте анимации с умом

С помощью современного CSS и JavaScript мы можем реализовывать на странице самые разнообразные крутые и эффектные анимации.

Но с точки зрения пользователя, функциональность всегда важнее формы.

Удалите любые анимации, вызывающие изменения в макете, поскольку каждое изменение состояния может способствовать общему сдвигу макета и снижению вашего показателя CLS.

#5 – Взаимодействие до следующего отображения (INP)

Как сказал когда-то Jay-Z, «У меня нет терпения. И я ненавижу ожидание.»

Разве не все?

Хотя мы уже рассмотрели задержку ввода при первом взаимодействии с вашим сайтом (FID), INP — это более широкий показатель, который оценивает общую отзывчивость вашего сайта.

Что такое Interaction to Next Paint?

Interaction to Next Paint измеряет, сколько времени требуется для появления следующего “отрисовки” или обновленного кадра на вашем сайте после взаимодействия пользователя с кнопкой или элементом страницы. Это показывает общую отзывчивость сайта и насколько плавными кажутся взаимодействия.

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

INP измеряется в миллисекундах:

• Хорошо: < 200 мс
• Требует улучшения: 200 – 500 мс
• Плохо: > 500 мс

Техники для улучшения INP

Если у вас возникли проблемы с INP, мне вас жаль, сынок. (Извините, это еще одна строчка из песни Jay-Z.)

К счастью, большинство проблем можно разбить на три основные категории:

1. Задержка ввода
2. Задержка взаимодействия
3. Задержка отображения

Это действительно сложная часть; чтобы более тщательно диагностировать проблему, вам необходимо использовать профайлер производительности Google Chrome или функцию записи Lighthouse.

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

Оттуда мы можем искать решения для каждой из проблем.

Устранение задержки ввода

Задержка ввода возникает, когда основной поток занят в момент взаимодействия. Это означает, что что-то другое происходит в момент клика или нажатия клавиши.

Чтобы исправить это, вам нужно будет исследовать, какие процессы выполняются в рамках основного потока:

• Удалить или оптимизировать сторонний JavaScript.
• Используйте web workers для выполнения JavaScript вне основного потока.
• Используйте слушатели, такие как isInputPending(), чтобы освободить основной поток (это самый продвинутый вариант).

Устранение задержек взаимодействия

Если проблема заключается в самом взаимодействии – то есть выполнение взаимодействия занимает много времени – тогда вам нужно будет рефакторить код для этого ввода.

Основная рекомендация здесь — отложить несущественные вычисления.

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

Предположим, например, что пользователь нажимает кнопку, которая открывает окно и также регистрирует событие, показывающее, что он нажал на кнопку. Вы бы хотели, чтобы ваш код сначала открыл окно, «завершив» взаимодействие с точки зрения пользователя.

Затем, после завершения взаимодействия, зарегистрируйте событие, которое пользователь не увидит и не почувствует напрямую.

Устранение задержки презентации

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

К сожалению, здесь много рефакторинга не поможет.

Но несколько факторов могут вызвать более длительную задержку:

• Чрезмерное использование requestAnimationFrame(). Каждый вызов этой функции создаёт небольшую задержку. Поэтому ищите случаи, когда она может использоваться слишком часто или без необходимости.
• Некорректная работа атрибутов «Async». В зависимости от контекста, некоторые ресурсы, отмеченные для асинхронной отрисовки, могут игнорировать директиву или загружаться неожиданно. Если это происходит, это может задержать другие элементы пути отрисовки и следующий кадр.

#6 – Время до первого байта (TTFB)

Теперь мы задумываемся о том самом первом моменте, когда загружается веб-страница.

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

Это первое рукопожатие содержит первый байт информации. Насколько быстро этот байт поступит, так же как выстрел из пистолета в начале скачек.

Что такое время до первого байта?

Time to First Byte — это время, необходимое вашему браузеру для выполнения процессов, таких как поиск DNS, TCP и SSL-рукопожатия, а также настройка соединения для запроса — и получения — первых байтов информации с веб-сервера. Скорость установления соединения с веб-сервером почти полностью зависит от самого сервера и способа размещения веб-сайта.

Измеряется в миллисекундах:

• Хорошо: < 800ms
• Требует улучшения: 800 – 1800ms
• Плохо: > 1800ms

Методы улучшения TTFB

Вы можете рассматривать TTFB как время, которое вы проводите на стартовой линии до выстрела пистолета. Любая задержка исходного разрешения добавит время к TTFB и общему времени загрузки страницы.

Итак, какие у вас варианты для улучшения?

Устранение перенаправлений

Прежде всего, по возможности устраните перенаправления страниц. Если вы перенаправляете пользователей с одной страницы на другую, время выполнения попадает в окно TTFB, что означает значительное увеличение времени вашего результата.

Это включает в себя 301 редиректы со старых URL-адресов на новый, а также временные редиректы и другие реализации.

Обновите ваш хостинг

Хостинг играет огромную роль в общей скорости вашего сайта и показателях производительности, особенно когда речь идет о TTFB.

Вам следует внимательно изучить детали вашего провайдера веб-хостинга, обращая внимание на такие аспекты как:

• Совместный против выделенного хостинга: Размещен ли ваш сайт на собственном экземпляре или он делит ресурсы с другими пользователями и их сайтами? Выделенный хостинг обычно стоит дороже, но обеспечивает более стабильную производительность.
• Память (RAM): Память, к которой ваш сайт имеет доступ на сервере, играет важную роль в его общей производительности. Если память загружена полностью, сервер не сможет обрабатывать и отвечать на новые запросы.
• CPU / Процессор: Скорость процессора сервера также играет роль в скорости его ответа и времени обработки.
• Обновления инфраструктуры: Обновляется ли программное обеспечение на сервере, чтобы оно было актуальным и не содержало ошибок или конфликтов? Обновите последние версии PHP, MySQL и других важных приложений для максимизации производительности.

Реализация кэширования

На так называемых «динамических сайтах», таких как сайты на WordPress, кэширование ваших страниц может значительно улучшить время загрузки страниц и TTFB.

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

Для получения информации о том, как это работает, прочтите наше руководство по кэшированию сайтов.

Примечание о показателе скорости

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

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

• Первый контентный кадр
• Самый большой контентный кадр
• Взаимодействие до следующего кадра
• Время до первого байта

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

Итоговые мысли о PageSpeed Insights

В этом руководстве мы рассмотрели практически все, что нужно знать о отчете PageSpeed Insights и о том, как стратегически решать каждую потенциальную проблему.

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

Возьмите под контроль гибкий VPS хостинг

Вот как предложение VPS от DreamHost выделяется: круглосуточная поддержка клиентов, интуитивно понятная панель, масштабируемая RAM, неограниченная пропускная способность, неограниченное количество доменов для хостинга и хранилище SSD.

Выберите ваш VPS план

Brian Glassman