Как достичь 100 баллов в Google PageSpeed ​​Insights (на WordPress)

Было бы здорово, если бы существовал инструмент, который поможет вам сделать ваш сайт быстрее? Ну, есть! Google PageSpeed ​​Insights — это название, и это бесплатный сервис, который поможет решить проблемы с медленным веб-сайтом. В этой статье мы рассмотрим, что это такое, как это работает и как вы можете достичь неуловимой оценки Google PageSpeed ​​Insights 100/100 в WordPress.

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

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

Просто зайдите в Google PageSpeed ​​Insights, введите URL-адрес и нажмите «Анализ». Google оценивает ваш сайт как на мобильных устройствах, так и на настольных компьютерах. Вы можете обнаружить, что вы набираете больше очков по одному, чем по другому.

Google раньше давал общую оценку из 100 для веб-страницы, но теперь это не так.

Вместо этого Google измеряет три статистических показателя, которые он называет Core Web Vitals . Это:

• Largest Contentful Paint (LCP) : насколько быстро загружается основной контент сайта. Это должно быть 2,5 секунды или меньше для хорошего взаимодействия с пользователем.
• Задержка первого ввода (FID) : насколько сайт реагирует на ввод пользователя. FID должен быть 100 миллисекунд или меньше.
• Кумулятивное смещение макета (CLS) : измеряет визуальную стабильность веб-страницы. Предпочтителен показатель CLS 0,1 или меньше.

Кроме того, Google измеряет следующее:

• First Contentful Paint (FCP) : время, необходимое веб-странице для начала отображения на экране. Хорошая оценка FCP составляет 1,8 секунды или меньше.
• Interaction to Next Paint (INP) : измеряет, насколько страница реагирует на действия пользователя. У действительно отзывчивого веб-сайта INP составляет 200 миллисекунд или меньше.
• Время до первого байта (TTFB) : время, необходимое для отправки первого байта данных после запроса сервера. Идеальное значение TTFB составляет 0,8 секунды или меньше.

Ниже, в разделе «Диагностика проблем с производительностью», Google PageSpeed ​​Insights дает вам четыре балла: «Производительность», «Доступность», «Лучшие практики» и «SEO». 90 и более — это хороший показатель, от 50 до 89 указывает на то, что можно добиться улучшения, а все, что ниже 50, — плохо.

Ниже находятся «Возможности» и «Диагностика» Google. Это способы, которыми вы можете косвенно улучшить свой показатель производительности. Метрика производительности больше всего влияет на скорость вашего сайта.

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

Почему важна скорость сайта?

Скорость веб-сайта оказывает огромное влияние на поведение пользователей и потребителей.

Среднее время, необходимое для полной загрузки мобильной целевой страницы, составляет 22 секунды [1] .

Вероятность отказов увеличивается на 32% по мере того, как время загрузки страницы увеличивается с 1 секунды до 3 секунд [2] .

53% посещений прекращаются , если загрузка мобильного сайта занимает более 3 секунд [3] .

Очевидно, что если вы запускаете сайт электронной коммерции, медленный сайт приводит к снижению конверсий, и это то, что вам нужно решить. Коэффициент конверсии падает со временем загрузки сайта [4] :

• Страницы, которые загружались за 2,4 секунды, имели коэффициент конверсии 1,9%.
• Через 3,3 секунды конверсия составила 1,5%.
• На 4,2 секунды коэффициент конверсии составил менее 1%
• При продолжительности более 5,7 секунд конверсия составила 0,6 %.

Высокая оценка PageSpeed ​​Insights по сравнению с фактической скоростью страницы

Google рассчитывает показатель PageSpeed ​​Insights как на основе лабораторных данных (собранных в контролируемых условиях), так и полевых данных (собранных от реальных пользователей в дикой природе).

Чтобы проверить фактическую скорость страницы, вы можете использовать онлайн-инструменты, такие как GTmetrix или тест скорости Pingdom.

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

Вы можете видеть на GTmetrix, что время загрузки страницы для тестового сервера в Сан-Антонио, штат Техас, составляет 666 мс — очень хороший показатель.

В Гонконге время загрузки страницы немного больше — 1,4 с.

Pingdom также показывает быстрое время загрузки 850 мс для теста в Вашингтоне, округ Колумбия, но более медленное время загрузки 1,06 с в Токио, Япония.

Инструмент Uptrends позволяет тестировать на мобильных устройствах и компьютерах. Вот результат для сайта WP Shout из Парижа, Франция, на iPad Air — время загрузки 1,9 с:

Таким образом, существует корреляция между оценкой Google PageSpeed ​​Insights и фактической скоростью страницы.

Как получить идеальную оценку Google PageSpeed ​​Insights 100 на WordPress

Теперь вы знаете, почему важен высокий показатель Google PageSpeed ​​Insights, и пришло время подумать о том, как его улучшить.

Способы улучшить оценку Google PageSpeed ​​Insights

1. Оптимизируйте изображения

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

Вам понадобится плагин для сжатия изображений, например Optimole.

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

Он также может конвертировать ваши изображения в формат WebP, который имеет меньший размер, чем файлы JPG или PNG. Это поможет вам выполнить рекомендацию «Подавать изображения в форматах следующего поколения» . Кроме того, вы можете изменить размер любых больших изображений, установив для них максимальную ширину.

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

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

Другой способ уменьшить размер файла изображения — использовать изображения SVG. SVG — это векторные файлы, поэтому их можно легко масштабировать без ущерба для размера файла. Они изначально не поддерживаются в WordPress, но вы можете добавить их в свою медиатеку с помощью плагина, такого как SVG Support или Safe SVG.

2. Избегайте чрезмерного размера DOM

Что такое ДОМ? DOM означает объектную модель документа и представляет собой древовидную структуру со всеми элементами HTML, атрибутами и текстом страницы.

Пара стратегий уменьшения размера DOM состоит в том, чтобы разбить длинные веб-страницы на более мелкие разделы и избежать сокрытия узлов DOM с помощью объявления {display:none;} в CSS.

Одним из факторов, который может увеличить размер DOM, является использование компоновщика страниц. Конструкторы страниц обычно увеличивают количество элементов <div> на странице.

Если вы используете Elementor, начиная с версии 3.0 были удалены некоторые HTML-обертки, что уменьшило размер DOM.

Или вы можете перейти на использование Гутенберга вместо компоновщика страниц, как это сделал Крис Лема.

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

3. Оптимизируйте JavaScript и CSS

Файлы CSS и JS можно минимизировать и сжать для повышения производительности. Минификация удаляет все пробелы из файла CSS или JS, а сжатие GZIP удаляет повторяющиеся символы, такие как {.

Плагины WordPress, которые позволяют минимизировать CSS или JS, включают Autoptimize (бесплатно) и WP Rocket (платно).

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

WP Rocket также имеет возможность объединить ваши файлы CSS и JS в один файл, уменьшив количество запросов. Однако вы не захотите этого делать, если ваш веб-сервер использует HTTP/2. Вы можете сначала проверить, работает ли на вашем сервере HTTP/2.

Вы можете активировать сжатие GZIP с помощью большинства плагинов кэширования. Если ваш веб-сервер — Apache или LiteSpeed, плагин может напрямую писать в ваш файл .htaccess или предоставлять строки для копирования и вставки в него. Если вы используете NGINX или IIS, Hummingbird также предоставляет конфигурацию для включения сжатия на этих серверах.

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

Вы также можете использовать CSS Saver от Rapidload, чтобы увидеть, какие CSS вы можете потерять с вашего сайта:

4. Удалите ресурсы, блокирующие рендеринг

CSS и JS, блокирующие рендеринг, — это файлы, которые помечаются как блокирующие первую отрисовку вашей веб-страницы.

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

5. Сократите начальное время отклика сервера

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

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

Для хостинга мы рекомендуем управляемый хостинг WordPress вместо общего веб-хостинга. Управляемые хосты WordPress включают оптимизацию сервера как часть услуги.

6. Убедитесь, что текст остается видимым во время загрузки веб-шрифта. Убедитесь, что текст остается видимым во время загрузки веб-шрифта.

Если вы используете веб-шрифты, рекомендация Google предотвратит невидимость текста ваших страниц во время их загрузки.

В рекомендации предлагается добавить font-display: swap; к вашему объявлению @font-face в вашей таблице стилей.

На снимке экрана ниже показано, как добавить это свойство с помощью плагина Asset CleanUp.

7. Держите количество запросов на низком уровне, а размер передачи небольшим

Google PageSpeed ​​Insights регистрирует количество файлов, запрошенных веб-сервером, и размер этих файлов.

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

• Оптимизация изображений и медиафайлов. Вместо анимированных GIF-файлов рекомендуется использовать видеофайлы.
• Оптимизация вашего CSS и JS
• Оптимизация ваших шрифтов и сторонних скриптов
• Уменьшение размера файла HTML

8. Избегайте цепочки критических запросов

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

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

По словам Google, чтобы избежать объединения критических запросов в цепочку, вам следует:

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

Вы можете сделать это:

• Предварительная загрузка ключевых запросов, изображений и шрифтов с помощью «link rel=»preload» в HTML, который на них ссылается.
• Минимизация вашего CSS и JavaScript.
• Удалите ресурсы, блокирующие рендеринг.

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

9. Избегайте длинных задач основного потока и минимизируйте работу основного потока

Длинные задачи основного потока — это задачи JavaScript (более 50 мс), которые задерживают время до взаимодействия для пользователя.

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

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

• сведение к минимуму использования раздутых плагинов
• локальное размещение шрифтов и скриптов аналитики
• минимизация или отсрочка JS и CSS
• ленивая загрузка фоновых изображений

Дополнительные советы по минимизации работы основного потока в WordPress см. в следующей статье.

10. Избегайте больших сдвигов макета. Избегайте больших сдвигов макета.

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

Вы можете вылечить эту проблему:

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

Для получения дополнительной информации прочитайте это руководство по исправлению кумулятивного смещения макета в WordPress.

11. Уменьшите влияние стороннего кода

Сторонние скрипты — это скрипты, размещенные где-то еще, например отслеживание Google Analytics или встраивание YouTube.

По возможности старайтесь размещать скрипты локально. Вы не можете сделать это с YouTube, но вы можете разместить свой аналитический код и шрифты локально.

Вы можете использовать плагин Local Google Fonts для размещения шрифтов Google на своем собственном сервере.

Плагин Local Google Analytics для WordPress — кеширует внешние запросы — будет размещать вашу Google Analytics локально.

12. Используйте CDN

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

CDN может повысить скорость вашего сайта за счет кэширования статических файлов (например, HTML, CSS и JavaScript) и предоставления их из местоположения, находящегося поблизости от пользователя. Это помогает снизить баллы за первую отрисовку с содержанием и за самую большую отрисовку с содержанием.

Мы используем Cloudflare CDN в WP Shout. Вы можете начать работу с ним бесплатно.

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

Заключение о том, как добраться до Google PageSpeed ​​Insights 100 баллов

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

Однако не стоит слишком зацикливаться на 100 баллах — 90+ баллов — это все равно очень хорошо. Прочтите сообщение Дэвида об оптимизации производительности сайта, чтобы узнать, что мы сделали для улучшения наших показателей.