Главная Новости

WordPress и Google PageSpeed Insights: Набираем баллы

Опубликовано: 01.09.2018

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

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

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

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

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

Включите 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

Есть такой небольшой плагин , который написал автор 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 аналитика есть специальный плагин , который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу 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 есть много плагинов, минимизирующих код. Вот самые популярные:

WP Minify Fix

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

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

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

rss