Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights

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

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

Оптимизируем WordPress по сервису PageSpeed Insights

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

PageSpeed Insights
Pingdom Website Speed Test
GTmetrix

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

Включите gzip сжатие

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

<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
  # Удалить ошибки браузера (требуется только для очень старых браузеров)
  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>

Код для сервера Nginx:

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, блокирующий отображение верхней части страницы

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

Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

Подключение скриптов

Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script, как обычно, а через файл functions.php в футер сайта, таким образом:

function my_scripts_method() {
        wp_enqueue_script( 'id-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Подключение скрипта только на определенной странице.

function my_scripts_method() {
   if( is_page('1984') ) {
        wp_enqueue_script( 'id-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
        }
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Подключение скрипта во всех типах записей, только не на главной.

function my_scripts_method() {
   if ( is_singular() ) {
        wp_enqueue_script( 'id-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
        }
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

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

function my_scripts_method() {
   if ( is_single() ) {
        wp_enqueue_script( 'id-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
        }
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri().

Подключение стилей

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

/* style footer */
function my_add_footer_styles() {
        wp_enqueue_style( 'id-style', get_template_directory_uri() . '/css/style.css', array(), '1.0');
};
add_action( 'get_footer', 'my_add_footer_styles' );

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

Подключение библиотеки jQuery

По умолчанию WordPress подключает библиотеку из своей директории и также в заголовок сайта. Если нам нужно изменить версию jQuery или зарегистрировать ее в подвале, тогда мы вначале удаляем старую при помощи функции wp_deregister_script и тут же регистрируем свою.

/* Регистрация jQuery */
function jquery_script_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'https://code.jquery.com/jquery-2.0.0.min.js', false, null, false );
        wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'jquery_script_method' );

Отключаем стили плагинов

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

Пример из WP-Pagenavi

wp_enqueue_style( 'wp-pagenavi', $css_file, false, '2.70' );

Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
    wp_deregister_style( 'wp-pagenavi' );
}

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

Переносим все скрипты в footer

Есть такой небольшой плагин Footer JavaScript, который написал автор Vladimir Prelovac. Он переносит все подключения, даже те, которые не нужно, в низ сайта. Используйте на свое усмотрение.

function footer_enqueue_scripts(){
        remove_action('wp_head','wp_print_scripts');
        remove_action('wp_head','wp_print_head_scripts',9);
        remove_action('wp_head','wp_enqueue_scripts',1);
        add_action('wp_footer','wp_print_scripts',5);
        add_action('wp_footer','wp_enqueue_scripts',5);
        add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('after_setup_theme','footer_enqueue_scripts');

Используйте кеш браузера

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

Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин Complete Analytics Optimization Suite, который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js, сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

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

 <filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
 Header set Cache-Control "max-age=84600, public"
 </filesMatch>

Код для сервера Nginx:

location ~* \.(js|css|png|jpg|svg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
}

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

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

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

Сократите время ответа сервера

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

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

Сокращение JavaScript, CSS, HTML

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

Autoptimize
WP Minify Fix
Better WordPress Minify

Они будут на лету сокращать файлы.

А лучше всего взять просто копию любого файла, переименовать его, к примеру, script.min.js, поместить туда сокращенный код и подключить вместо того, что был. Во всяком случае это можно проделать с теми файлами, которые вы практически никогда не редактируете или очень редко. По окончании проверки сервиса PageSpeed Insights дается ссылка на скачивания всех сокращенных файлов.

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

7 комментариев
  1. Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights — это название вашей статьи не самое правильное? может нужно указать-"уменьшить" ?

  2. Добрый вечер Андрей. Подскажите, гугловский сервис предлагает скачать оптимизированные файлы. Картинки понятно, там ни о чем. А вот css и js можно использовать? И в какую директорию на сайте их вписывать? Благодарю

  3. Чуть не забыл. Андрей, а вот код для сервера Nginx — это этот код прописывать, если пользуюсь этим серевером. А как это узнать? Благодарю

    1. Здравствуйте. Особо не стоит с этим заморачиваться. Если вы хотите сокращать код вручную, тогда сокращайте (то есть меняйте содержимое этих файлов на то, которое предоставляет вам гугл) только те файлы, которые подключаются из вашей темы. Но, оригинал обязательно нужно сохранять.

      Можно узнать разными способами: спросить у хостинга, плагины диагностики, из конфигурационных файлов, онлайн сервисы http заголовка. К примеру, bertal.

  4. здравствуйте,

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

    Очень разные показатели оценки и скорости на этих трех тестирующих сайтах. page speed insights дает самую медленную/низкую оценку.Благодарю

    1. День добрый. Я уже давно не обращаю внимание на эти сервисы, разве что, так в среднем.

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *