Как увеличить скорость загрузки страниц сайта на WordPress с помощью Google PageSpeed Insights

 

Скорость загрузки сайта – серый кардинал влияющий на конверсии, динамику индексации страниц, приток пользователей из поиска, их лояльность. Но как определить эту самую скорость? Наиболее популярный инструмент проверки, который используют веб-мастера — Google PageSpeed Insights.

 

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

 

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

 

Компания HostPro предоставляет для украинской аудитории сервера в Украине, европейской — в Европе, американской — в США. Накопленный нами опыт в области ускорения сайтов позволяет обеспечивать их стабильную работу. А регулярная оптимизация и интеграция новых функций в хостинг улучшает предоставляемые услуги, развивает их в соответствии с инновациями рынка и потребностями пользователей.

 

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

— конфигурациям сервера;

— HTML-структуре страницы;

— использованию внешних ресурсов (таких, как изображения, Javascript и CSS).

 

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

 

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

 

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

 

 

 

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

 

Вот, что вам нужно сделать в первую очередь:

 

Время ответа сервера

 

 

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

 

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

 

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

 

Уменьшите количество плагинов

 

Среди всего прочего, наличие слишком большого количества плохо закодированных плагинов может негативно влиять на время отклика сервера. Чтобы проверить, какие плагины замедляют ваш сайт, используйте плагин P3 (Plugin Performance Profiler). Это даст вам список всех тех, кто создает проблемы. К сожалению этот плагин не совместим с PHP7.

 

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

 

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

 

Сфокусировав внимание на трех основных категориях контента, в HostPro разработали и успешно тестировали услуги CDN Диск, CDN Кеширование, CDN Видео и CDN Трансляция. Они подходят для любой CMS. Вы можете подключить к CDN сети от 1 до 20 сайтов. Важным является то, что оплата за использование CDN сети начисляется по факту использования.

 

Кэш браузера

 

Некоторые элементы веб-сайта, чтобы упростить загрузку, могут быть временно сохранены (кэшированы). Загрузка не кешированного контента (HTML, CSS, логотип, изображения) значительно замедляет работу. Неудивительно, что это исправление номер один, если вы хотите улучшить показатель PageSpeed Insights.

 

Кэширование для сайтов WordPress настраивается как бесплатными плагинами, так и плагинами премиум-класса. Предлагаем попробовать либо W3 Total Cache (бесплатное решение), либо воспользуйтесь WP Rocket (платное решение).

 

Сжатие изображений

 

Изображения занимают, в среднем, примерно 60% от общего размера веб-страницы — это самый большой фактор, влияющий на время загрузки. Их оптимизация может уменьшить размер ответа примерно на 70%.

 

Первый метод — сжатие ресурсов с помощью deflate.

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

 

Apache

 

Добавьте следующий код в ваш файл .htaccess:

 

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE

</files>

 

или

 

<IfModule mod_deflate.c>
 # 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>

 

Второй метод — включение gzip сжатия в WordPress. Необходимо добавить php код первой строкой в файл header.php вашей темы оформления:

 

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(«ob_gzhandler»); else ob_start(); ?>

 

Nginx

 

Включить сжатие можно добавив в файл nginx.conf следующего кода:

 

gzip on;

gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

gzip_disable «MSIE [1-6].(?!.*SV1)»;

gzip_vary on;

 

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

 

Существует три сценария проблем доступа с которыми сталкивается большинство: файлы JavaScript / CSS, шрифт Font Awesome и шрифты Google.

 

Файлы

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

 

Сохраните следующие настройки:

В разделе «Параметры JavaScript» снимите флажок «Использовать JavaScript в <head>?»

В разделе «Параметры CSS» установите флажок «Вставить все CSS?».

 

Font Awesome

Font Awesome загружаются супер быстро, если хостинговать их на собственном CDN.

 

Ссылка на ваш файл Font Awesome, использующий CDN URL, должна выглядеть следующим образом:

 

<link href=»https://cdn.keycdn.com/css/font-awesome-4.4.0.min.css» rel=»stylesheet»>

Google шрифты

По умолчанию WordPress использует хук, называемый wp_enqueue_scripts, который загружает шрифт в заголовок. Это автоматически приводит к тому, что он блокирует рендеринг. Чтобы исправить это, необходимо установить бесплатный плагин Disable Google Fonts или попросить разработчика темы отключить Google шрифты.

 

Затем, включить шрифт Google со следующим кодом в нижнем колонтитуле, прямо перед тегом </ body>.

 

<link href=’https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

 

Вы также можете асинхронно загружать шрифты Google с помощью веб-загрузчика Google. Просто разместите следующий код в нижнем колонтитуле.
<script type=»text/javascript»>
 WebFontConfig = {
   google: { families: [ ‘Noto+Serif:400,400italic,700,700italic’ ] }
 };
 (function() {
   var wf = document.createElement(‘script’);
   wf.src = ‘https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
   wf.type = ‘text/javascript’;
   wf.async = ‘true’;
   var s = document.getElementsByTagName(‘script’)[0];
   s.parentNode.insertBefore(wf, s);
 })(); </script>

 

Сократите CSS

 

Большинство CSS требует дополнительного времени для загрузки, поэтому уменьшение веса CSS-кода также поможет улучшить показатель PageSpeed Insights.

 

Бесплатные легковесные решения, которые действительно эффективны для минимизации JavaScript, CSS и HTML — Autoptimize, Better WordPress Minify. Просто установите один из них и настройте нужные параметры.

 

В настройках плагина вам нужно будет проверить следующее:

— Оптимизация HTML-кода

— Оптимизация кода JavaScript

— Оптимизация CSS-кода

 

Примечание:

— В WordPress код CSS лучше всего размещать вверху, а javascript внизу.

— После окончания работ проведите финальное тестирование сайта на наличие ошибок и возможных проблем.

 

Итог

 

Рекомендации Google PageSpeed Insights довольно ценные. Но помните, не нужно зацикливаться на достижении показателя 100 из 100. Достичь ожидаемых результатов иногда бывает невозможно в силу индивидуальных настроек среды. И поверьте — это не конец света. Лучше, просто предпримите как можно больше мер оптимизации вашей индивидуальной среды. Надеемся, что, следуя рекомендациям  PageSpeed Insights вы достигнете хороших результатов, которые выльются в конверсии и целевые действия на сайте.

 

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

 

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

 

  • А я по своему опыту понял, что 50% успеха зависит именно от выбранного шаблона, 30% от плагинов и 20% от того насколько нагружен сайт контентом (картинками, кнопками и тд). Но ускорять сайт можно вечно))