Часто неудачные проверки PageSpeed ​​и как их исправить

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

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

Не обязательно, чтобы вы набрали 100 баллов из 100 в Google PageSpeed. Однако очень важно, чтобы ваш веб-сайт мог загружаться быстро, поскольку скорость является фактором ранжирования для поиска Google. Кроме того, существует множество статистических данных (все, что вам нужно сделать, это выполнить поиск в Google), которые объясняют, почему более быстрый веб-сайт приводит к более высокому коэффициенту конверсии и более низкому показателю отказов. Вы определенно хотите получить оценку ниже 2,0 по индексу скорости.

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

Мы используем WP Rocket для оптимизации всех сайтов WordPress. Сюда входят веб-сайты, которые мы создали как агентство, а также веб-сайты, над которыми мы работаем при запуске службы оптимизации с помощью SpeedOpp (профессиональная оптимизация скорости WordPress). Причина, по которой мы выбираем WP Rocket, заключается в том, что он самый быстрый в отрасли, а также чрезвычайно прост и удобен в реализации.

Не поймите нас неправильно, это супермощный инструмент, и он разработан таким образом, чтобы его было легко понять и использовать, что экономит нам много времени. Это плагин премиум-класса (49 долларов в год), но он простой и ведет к самым быстрым веб-сайтам (мы протестировали это).

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

Устранение ресурсов, блокирующих рендеринг

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

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

WP Rocket решает проблему блокировки рендеринга тремя способами. Во-первых, во-вторых, когда вы устанавливаете плагин на сайт, он автоматически генерирует кеш.

Во-вторых, инструмент предлагает 2 параметра, которые вы можете активировать, чтобы оптимизировать доставку JavaScript и CSS. Для этого перейдите на вкладку оптимизации файлов на панели инструментов WP Rocket.

На этой странице вы можете активировать следующие две настройки:

• оптимизировать доставку CSS — это чрезвычайно мощная, но автоматическая функция. Это происходит в два этапа. Во-первых, WP Rocket идентифицирует все CSS и необходимые для загрузки веб-сайта. Это называется критическим путем CSS, который необходим для загрузки начального окна просмотра. Затем он асинхронно загрузит весь дополнительный CSS, удалив аспект блокировки рендеринга.
• отложенная загрузка JavaScript — отсрочка загрузки JavaScript устраняет аспект блокировки рендеринга.

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

Отложить неиспользуемый CSS

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

Просто зайдите в WP Rocket --> Оптимизация файлов и активируйте функцию «оптимизировать доставку CSS». Это тот же параметр «оптимизировать доставку CSS», который только что обсуждался в разделе «Устранение ресурсов, блокирующих рендеринг».

Это было быстро и легко, не так ли?

Минимизируйте CSS и минимизируйте JavaScript

Веб-сайты WordPress обычно не проходят эти две проверки, потому что они используют несколько плагинов и тему. В этом нет ничего плохого, и довольно легко и просто объединять и минимизировать CSS и JavaScript в WordPress с помощью WP Rocket.

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

На вкладке оптимизации файлов в WP Rocket просто отметьте минимизацию CSS и минимизацию JavaScript. На этой вкладке вы найдете дополнительные функции и функции, такие как минимизация HTML, объединение файлов CSS и многое другое.

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

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

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

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

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

Отложить закадровые изображения

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

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

На вкладке мультимедиа в WP Rocket активируйте отложенную загрузку изображений, фреймов и видео. Если на вашем веб-сайте много видео YouTube, скорее всего, они серьезно влияют на скорость вашей страницы. Мы рекомендуем включить ленивую загрузку для высоких кадров и видео, если на вашем веб-сайте есть встроенные видеоролики YouTube.

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

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

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

Сокращение времени отклика сервера (TTFB)

Мы подумали, что включим это в нашу статью, хотя вы ничего не можете сделать, чтобы улучшить этот показатель с помощью WP Rocket.

Сокращение времени отклика сервера (также известного как время до 1-го байта) обычно означает, что вы находитесь на неподходящем хостинге. В частности, если вы используете виртуальный хостинг (Bluehost, GoDaddy, HostGator…), время отклика сервера всегда очень плохое.

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

Наша рекомендация по сокращению времени до 1-го байта будет заключаться в переходе с существующего хоста WordPress на Cloudways. У них есть план, который стоит всего 10 долларов в месяц и позволяет вам разместить свой веб-сайт на облачном хостинге корпоративного уровня. Вы можете попробовать их платформу (даже перенести копию своего веб-сайта) бесплатно в течение трех дней без ввода номера кредитной карты. Вы также можете получить скидку 30% на первый месяц хостинга, используя код скидки «ISOTROPIC».