Google PageSpeed Insights: почему набрать 100/100 не так уж и важно

Google PageSpeed Insights - это сервис, который позволяет измерить скорость загрузки сайта. Это полезный инструмент для веб-разработчиков, потому что скорость загрузки влияет на то, останется ли пользователь на странице или нет. Далеко не каждому понравится 15-30 секунд тратить на загрузку страницы, на которой ты даже не знаешь, что находится. Действительно ли там представлена нужная информация или это пустая трата времени.

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

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

Правда в том, что Google PageSpeed Insights не создан для того, чтобы вы столько времени тратили на соответствие его стандартам. А вот если вы сосредоточитесь на выполнении рекомендаций платформы, то вы создадите гораздо больше преимуществ для своего сайта.

Мы решили написать руководство по использованию Google PageSpeed Insights в ваших интересах. Мы расскажем о том, как Google использует ваш рейтинг, а также о том, как внедрить рекомендации на сайт.

Введение в Google PageSpeed Insights

Если вы еще не знакомы с Google PageSpeed Insights, это инструмент, используемый для тестирования производительности веб-сайта. Вы можете ввести любой URL-адрес и проанализировать его:

Затем Google оценивает по 100-балльной шкале, насколько сайт оптимизирован и исправно работает:

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

С 2018 года оценки PageSpeed Insights рассчитываются с помощью Lighthouse, автоматизированного инструмента Google с открытым исходным кодом для улучшения общего качества веб-страниц. Эта платформа может оценивать всевозможные факторы, включая производительность, доступность, прогрессивные веб-приложения и многое другое.

Чтобы увидеть всестороннюю оценку вашего сайта Lighthouse, вы можете воспользоваться инструментом измерения Google:

В дополнение к аудиту производительности, который проводит и Google PageSpeed Insights, вы получите оценки за доступность, лучшие практики и оптимизацию поисковой системы (SEO).

Рекомендации как набрать 100/100 баллов в Google PageSpeed Insights

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

Хотя вы, безусловно, должны стремиться максимально увеличить время загрузки вашего сайта, оценка 100/100 в Google PageSpeed Insights на самом деле не так важна. Во-первых, это не единственный в своем роде тест на производительность.

Например, в отличие от PageSpeed Insights, инструменты Pingdom позволяют проверять производительность вашего сайта из разных мест:

Вы также можете запускать тесты на таких платформах, как GTmetrix (которая объединяет ваши результаты из PageSpeed Insights и YSlow) и WebPageTest. Скорее всего, ваши оценки по этим различным инструментам не будут точно совпадать.

Что действительно имеет значение, так это фактическая скорость вашего сайта. Чтобы представить это в перспективе, мы видели сайты со средним временем загрузки менее 500 миллисекунд (что чрезвычайно быстро!), которые не набирают 100/100 баллов по PageSpeed Insights.

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

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

Как Google Использует PageSpeed Insights

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

Реальность такова, что Google действительно использует PageSpeed Insights для определения, на какую позицию выставить ваш сайт в результатах поиска. Скорость сайта - это фактор ранжирования, один из самых простых и понятных. Однако Google принимает во внимание не только числовые показатели в верхней части результатов поиска по страницам. Попадание в 100/100 не гарантирует вам первое место в поисковой выдаче.

С учетом сказанного вы все равно можете использовать результаты PageSpeed Insights для улучшения вашего SEO. Например, с 2018 года скорость мобильных страниц стала фактором ранжирования для Google. Вы заметите, что ваш тест производительности предоставляет данные как для компьютерной, так и для мобильной версий вашего сайта:

Поскольку более 73% пользователей мобильного интернета утверждают, что столкнулись с сайтом, загрузка которого занимает слишком много времени, информация на вкладке Google PageSpeed Insights для мобильных устройств бесценна. Использование приведенных здесь рекомендаций для сокращения времени загрузки смартфонов и других устройств должно дать вам конкурентное преимущество.

24 способа повышения производительности от Google PageSpeed Insights

Однако прежде чем мы углубимся в отдельные рекомендации, вам необходимо понять разницу между Field Data и Lab Data. Первый сравнивает ваш сайт с другими в отчете о работе пользователей Chrome за последние 30 дней.

Есть также две диаграммы, которые показывают, куда падает ваша средняя Первое существенное отображение (FCP) - время, за которое пользователь увидит какое-то содержимое веб-страницы, и Задержка первого ввода (FID) - время, которое прошло с момента нажатия на ссылку сайта до загрузки содержимого по этой самой ссылке:

На изображении выше FCP сайта примерно равен 45% сайтов в 75-м процентиле, а наш FID примерно равен 9% 95-го процентиля.

Lab Data показывают конкретные данные для загрузки страницы:

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

При совместном рассмотрении Field Data и Lab Data должны дать вам представление о фактическом времени загрузки вашего сайта. Как мы упоминали ранее, это даже важнее, чем ваш общий показатель скорости просмотра страниц, поэтому вам стоит обратить внимание на эти цифры.

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

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

Одна из наиболее распространенных рекомендаций Google PageSpeed Insights заключается в устранении ресурсов, блокирующих визуализацию:

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

Что касается Google, то вам следует рассмотреть два решения:

Если у вас мало JavaScript или CSS, вы можете встроить их, чтобы избавиться от этого предупреждения. Этот процесс относится к включению вашего JavaScript и/или CSS в ваш HTML-файл. Вы можете сделать это с помощью такого плагина, как Autoptimize. Но это сработает только для очень небольших страниц.

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

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

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

В рамках этого предложения Google PageSpeed Insights покажет вам цепочки запросов на странице:

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

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

Устранение ресурсов, блокирующих рендеринг
Отсрочка закадровых изображений
Сокращение CSS и JavaScript

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

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

3. Стремитесь к более низкому количеству запросов.

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

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

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

Максимальные размеры изображений
Количество используемых веб-шрифтов
Сколько внешних ресурсов вы используете
Размер скриптов и фреймворков

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

4. Уменьшите CSS

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

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

Мы рекомендуем использовать плагин Autoptimize или WP Rocket для минимизации ваших CSS-файлов.

5. Уменьшите JavaScript

Точно так же, как вы можете уменьшить размер файла CSS с помощью минификации, то же самое относится и к вашим файлам JavaScript:

Autoptimize или WP Rocket также могут справиться с этой задачей для вашего сайта на WordPress.

6. Удалите неиспользуемый CSS

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

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

7. Сведите к минимуму работу с Main-Thread

Main-Thread - это основной элемент браузера пользователя, который отвечает за превращение кода в веб-страницу, с которой посетители могут взаимодействовать. Он анализирует и обрабатывает HTML, CSS и JavaScript. Кроме того, он отвечает за обработку пользовательских взаимодействий.

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

Google PageSpeed будет отмечать страницы, для завершения работы в Main-Thread которых требуется более четырех секунд, и представлять полезную веб-страницу:

Некоторые из методов, используемых для сокращения Main-Thread, уже были рассмотрены в других разделах этого поста, в том числе:

Сокращение вашего кода
Удаление неиспользуемого кода
Реализация кэширования

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

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

8. Сократите время выполнения JavaScript

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

Методы, предложенные выше для сокращения работы с Main-Thread, также должны устранить это предупреждение в результатах просмотра страниц.

9. Сократите время отклика сервера (TTFB)

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

Поэтому сокращение времени отклика сервера входит в число рекомендаций Google PageSpeed Insights. Если вам удастся достичь низкого TTFB, вы увидите это сообщение в разделе Пройденные аудиты:

Существует несколько факторов, которые могут повлиять на ваш TTFB. Некоторые стратегии его снижения включают:

Выбор высококачественного поставщика веб-хостинга, ориентированного на скорость
Использование легких тем и плагинов
Сокращение количества плагинов, установленных на вашем сайте
Использование сети доставки контента (CDN)
Реализация кэширования браузера
Выбор надежного поставщика системы доменных имен (DNS)

10. Изображения правильного размера

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

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

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

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

Например, у вас есть изображение обложки, и вы хотите сделать его адаптивным. Вы можете загрузить три его версии шириной 800, 480 и 320 пикселей. Затем вы бы применили атрибут srcset, например:

img srcset="header-image-800w.jpg 880w,

Header-image-480w.jpg 480w,

Header-image-320w.jpg 320w"

sizes="(max-width: 320px) 280px,

(max-width: 480px) 440px,

800px"

src="header-image-800w.jpg">

Атрибут srcset указывает различные доступные файлы, а атрибут sizes указывает браузерам, какой из них следует использовать в зависимости от текущего размера экрана.

11. Отложите скрытые изображения

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

Меньшая загрузка до того, как страница станет видимой, означает лучшую производительность, поэтому Google рекомендует этот метод:

Существует несколько плагинов WordPress, созданных специально для ленивой загрузки, в том числе a3 Lazy Load и Lazy Load от WP Rocket. Различные плагины для оптимизации изображений и производительности, такие как Autoptimize, также имеют функции ленивой загрузки.

12. Эффективное кодирование изображений

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

Главное - добиться минимально возможных размеров файлов, не жертвуя качеством самих изображений. Такие плагины, как Imagify и Smush, могут помочь в этой задаче.

Другие рекомендации, влияющие на то, "пройдете" вы или "не пройдете" аудит эффективного кодирования изображений, включают:

Отображение изображений нужного размера
Реализация отложенной загрузки (отсрочка закадровых изображений)
Преобразование изображений в форматы файлов следующего поколения, такие как WebP
Использование видеоформатов для анимированного контента, таких как GIF

13. Загружайте изображение в форматах следующего поколения

Существуют некоторые форматы файлов изображений, которые загружаются быстрее, чем другие. К сожалению, это не ваши обычные форматы PNG или JPEG. Изображения WebP становятся новым стандартом, и Google PageSpeed сообщит вам, если ваши изображения не соответствуют ему:

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

14. Используйте видеоформаты для анимированного контента

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

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

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

MP4: Создает файлы немного большего размера, но совместим с большинством основных браузеров.
WebM: Наиболее оптимизированный формат видео, хотя он имеет ограниченную совместимость с браузером.

После того, как вы сделали выбор, наиболее подходящий для вашего сайта, вам потребуется преобразовать форматы файлов. Лучший способ сделать это - через командную строку. Для начала установите FFmpeg. Это инструмент с открытым исходным кодом для преобразования форматов файлов:

Затем откройте интерфейс командной строки и выполните следующую команду:

ffmpeg -i input.gif output.mp4

Это приведет к преобразованию GIF с именем файла input.gif в видео MP4 с именем файла output.mp4. Однако изменение формата - это только начало. Теперь вам нужно встроить полученное видео на свой сайт WordPress таким образом, чтобы оно выглядело как анимированный GIF.

Встраивание видеоконтента для анимации

Как вы, вероятно, заметили, если вы когда-либо видели GIF раньше, они немного отличаются от обычных видео. Они обычно автоматически воспроизводятся и запускаются по циклу, и они всегда без звука. Встраивание вашего нового файла MP4 или WebM на ваш сайт WordPress не приведет к появлению этих функций.

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

</video>

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

15. Убедитесь, что текст остается видимым во время загрузки Webfont

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

Google советует вам решить эту проблему, применив директиву API подкачки отображения шрифтов в вашем стиле @font-face. Для этого откройте свою таблицу стилей (style.css) и добавьте следующее после атрибута src в разделе @font-face:

font-display: swap

16. Включите сжатие текста

Рекомендация Google PageSpeed Insights "Включить сжатие текста" относится к использованию сжатия GZIP:

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

Первый - установить плагин с функцией сжатия GZIP. WP Rocket - неплохое решение, если вы готовы за него заплатить.

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

Большинство сайтов WordPress работают на серверах Apache. Код для включения сжатия GZIP выглядит следующим образом:

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

Вы должны добавить его после #END в свой файл .htaccess. Если у вас есть сайт WordPress на сервере Nginx, вам следует вместо этого добавить следующий код в файл nginx.conf:

36 gzip on;

37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";

38 gzip_vary on;

39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Если вы хотите проверить сжатие текста на своем сайте, мы рекомендуем использовать такой инструмент, как GiftOfSpeed:

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

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

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

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

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

Существует несколько способов реализации этой стратегии оптимизации. Если вам удобно редактировать файлы WordPress, вы можете добавить тег ссылки на свой header.php файл. Вот пример:

В этом случае тег сообщает браузерам, что им необходимо установить соединение с example.com как можно быстрее. Google PageSpeed Insights перечислит все соответствующие ресурсы, для которых вам следует добавить теги ссылок с атрибутами preconnect.

Другой вариант - использовать плагин для достижения того же эффекта. Perfmatters включает функцию предварительного подключения. Подсказки для WP Rocket и схожих ресурсов включают аналогичную функциональность.

18. Предварительная загрузка Key Requests

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

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

Вы также можете включить этот тег с помощью Perfmatters, WP Rocket или Pre* Party Resource Hints.

19. Избегайте перенаправления на другие страницы

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

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

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

20. Обслуживайте статические ресурсы с помощью эффективной политики кэширования

Если вы уже некоторое время используете Google PageSpeed Insights, возможно, вам лучше известна эта рекомендация как предупреждение о кэшировании браузера. В версии 5 он теперь помечен как Статические ресурсы обслуживания С Эффективной политикой кэширования:

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

Наиболее распространенный способ, которым сайты WordPress реализуют кэширование, - это плагины. WP Rocket и W3 Total Cache являются популярными вариантами. Однако некоторые хостинг – провайдеры включают кэширование через свои серверы. Обязательно проверьте и убедитесь, что это относится к вашему хосту, прежде чем устанавливать плагин кэширования.

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

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

Добавление команд управления кэшем

Используйте следующий код для добавления команд управления кэшем в Nginx:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {

expires 30d;

add_header Cache-Control "public, no-transform";

}

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

Те, у кого есть серверы Apache, должны использовать этот фрагмент в своих файлах .htaccess вместо этого:

Header set Cache-Control "max-age=84600, public"

</filesMatch>

Добавьте этот код до #BEGIN WordPress или после #END WordPress. В этом примере срок действия кэша установлен равным 84 600 секундам.

Добавление команд с истекшим сроком действия

Команды управления кэшем сейчас в значительной степени являются стандартными. Тем не менее, есть некоторые инструменты (включая GTmetrix), которые все еще проверяют команды с истекшим сроком действия.

Вы можете добавить их на сервер Nginx, включив в свой серверный блок следующее:

location ~* \.(jpg|jpeg|gif|png|svg)$ {

expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

expires 2d;

}

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

## EXPIRES HEADER CACHING ##

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType image/svg "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES HEADER CACHING ##

Еще раз, вы должны добавить этот код либо до #BEGIN WordPress или после #END WordPress.

Эффективное кэширование Google Analytics

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

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

Если это единственный сценарий, указанный в этой рекомендации, вы все равно можете пройти аудит:

Однако, как мы отмечали, ваш показатель скорости просмотра страниц имеет меньшее значение, чем ваша фактическая и предполагаемая производительность. Чтобы эффективно обслуживать этот ресурс, вы можете рассмотреть возможность локального размещения Google Analytics.

Плагины, такие как Complete Analytics Optimization Suite (CAOS) и Perfmatters, позволят вам сделать это.

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

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

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

Кнопки и каналы обмена в социальных сетях
Видео, встроенные в YouTube
Фреймы для рекламы и другого контента
Библиотеки для JavaScript, шрифтов и других элементов

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

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

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

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

22. Избегайте тяжелых сетевых нагрузок

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

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

Отложенная загрузка CSS, JavaScript и изображений
Сокращение кода
Сжатие файлов изображений
Использование формата WebP для изображений
Реализация кэширования

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

23. Отметки и измерения времени пользователя

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

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

24. Избегайте чрезмерного размера объектной модели документа (DOM)

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

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

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

Google PageSpeed Insights должен быть основным элементом вашего набора инструментов для веб-мастеров. Однако одержимость достижением желанных 100/100, вероятно, не лучшее использование вашего времени. Это может отвлечь вас от других важных задач, которые могли бы принести более значительные выгоды.

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

У вас есть вопросы о Google PageSpeed Insights или оптимизации производительности вашего сайта? Оставляйте заявку на нашем сайте и мы ответим!