Ускорение WodPress для PageSpeed Insight
WordPress

Ускорение сайта WordPress для PageSpeed Insights

5 (100%) 1 vote

Оптимизация сайта на CMS WordPress для PageSpeed Insights — задача довольно сложная и нетривиальная. Причин для возникновения сложностей довольно много:

  1. Довольно сложно настроить кэширование. Например, Drupal в этом плане дает гораздо больше возможностей.

  2. Отсутствие встроенных методов асинхронной и отложенной загрузки скриптов.

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

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

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

Начало ускорения

Оптимизация WordPress начинается с теста скорости. Тут все довольно просто, есть такие инструменты, как PageSpeed Insights от Google, также Pingdom Tolls, Gtmetrix. Рекомендую использовать все, они покажут, какие слабости есть у сайта. Ниже скирншот первого теста. К сожалению, выложил только для мобильной версии, но у ПК примерно те же показатели. Плохие, стоит сказать.

Оптимизация сайта WordPress для PageSpeed InsightsИтак, в первую очередь отключаем плагины кэширования. Они будут серьезно мешать в процессе работы. Сжатие тоже рекомендую отключить на уровне хостинга. Если в файле .htaccess прописаны методы cache и сжатия, комментируем их. Теперь поехали. Начнем с оптимизации темы.

Настройка хостинга

Здесь очень важно включить подходящие параметры, которые обеспечат максимальную производительность. Начнем с PHP. По дефолту на хостингах обычно включена версия 5.6. Конечно, она была хороша, но PHP 7.2 показывает значительно лучшее быстродействие, иногда даже двукратный прирост. Показываю на примере ISPManager.

Заходим в админ панель, кликаем на www-домены, следом два раза кликаем на нужный домен. На картинке отмечено стрелочками.

ISPManager

Переходим непосредственно к настройке:

  1. Выбираем версию php 7.2. На картинке ниже отмечено красной стрелкой.

  2. Настраиваем сжатие. Учите, эта функция съедает ресурсы процессора, если сайт крупный, то грузить будет не по-детски.

  3. Включаем кэширование сжатых файлов. Период выбираем по собственному усмотрению. Рег.ру рекомендует 7 дней, но ставлю 2. Меньше суток ставить не рекомендую. Исключение, если стоят плагины для отправки форм обратной связи. На некоторых, например, Caldera Forms, есть токен, который должен обновляться каждые 12 часов. В кеше останется старый токен, соответственно, отправка формы будет невозможна. Тогда лучше выставить 11 часов.

Готово. Учтите, устаревшие плагины и WordPress ниже 4-ой версии не будут работать с данной версией PHP, потому, лучше сначала все обновить, после менять настройки. Если же версия CMS самая новая, но вылезают ошибки, то можно включить debag-режим через wpconfig.php и найти конфликтующий плагин.

Если есть выделенный сервер, то идеальный вариант — связка Apache с nginx. Там больше возможностей кэширования и сжатия. Впрочем, такая связка сама по себе шустрее. Если же хостинг, то придется довольствоваться перечисленными настройками.

Оптимизация WordPress для PageSpeed Insightsскрипты

Итак, в первую очередь внимание стоит обратить на скрипты. JavaScript сжирает огромное количество ресурсов. В обозреваемой CMS все .js автоматически подключаются через header, то есть, сначала обрабатываются скрипты, потом только отображается контент. С точки зрения поисковых систем — плохой метод. Причин несколько:

  • на обработку скриптов может потребоваться длительное время, соответственно, пользователь не сможет взаимодействовать с сайтом;

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

Значит, стоит вплотную заняться скриптами.

Отложенная и асинхронная загрузка

Есть два типа выполнения скриптов: отложенная загрузка и асинхронная. 
Начнем с асинхронной загрузки, атрибут «async». Выглядеть код асинхронной загрузки будет так: <script async=»async» type=’text/javascript’ src=’https://servakoff.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.1′></script>. Асинхронная загрузка позволяет загружать файлы параллельно и обрабатывать сразу, даже если загрузка остальной части страницы не закончена.
Для включения атрибута «async» необходимо в файл темы functions.php, а лучше создать дочернюю тему с отдельным файлом и туда добавить такой код:

function wcs_defer_javascripts ( $url ) {
if( is_admin() ) return $url;
if ( FALSE === strpos( $url, '.js' ) ) return $url;
//if ( strpos( $url, 'jquery.js') ) return $url;
return "$url' async='async";
}
add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );

Нашел такой код в сети, но добавил в него отключение асинхронной загрузки в админке сайта, сильно мешает. Как видите, строка if ( strpos( $url, ‘jquery.js’) ) return $url; закомментирована. Если jquery начнет чудить и не возвращать функции, например, перестанут работать слайдеры либо предзагрузчик, просто раскомментируйте строку.
Недостаток асинхронной загрузки в том, что некоторые функции могут напрочь вырубиться. Например, из-за данного кода посыпались формы обратной связи, и сломался слайдер.
Если с данным кодом не получится, вот еще:

function wcs_defer_javascripts ($url) {

if( is_admin() ) return $url; 
if (strpos($url, '.js') === FALSE) 
{ return $url;
} 
if (strpos($url, 'jquery.js')) { return $url; 
} 
return "$url' async onload='myinit()"; 

} 
add_filter('clean_url', 'wcs_defer_javascripts', 11, 1);

Если же асинхронная загрузка не сработала, самое время перейти к отложенной. Ее ключевое отличие в том, что выполнение .js происходит параллельно с выполнением остальных сценариев. Потому, скрипт запускается того, когда требуется. К сожалению, async дает больший прирост производительности, но если не работает, значит, придется поискать другой выход.
В первом коде заменяем строку return «$url’ async=’async»; на return «$url’ defer=’defer»; Вставляем в functions.php. Это хороший способ оптимизации сайта WordPress. Прирост в скорости может быть значительным. Проверяем работоспособность, в отличие от предыдущего варианта, этот код сайт не развалил. Кстати, MetaSlider сыпется от него. Если все работает, оставляем, если нет, используем комбинированные варианты. Со следующим вариантом MetaSlider работает прекрасно.

if(!is_admin()) {
function add_asyncdefer_attribute($tag, $handle) {
if (strpos($handle, ‘async’) !== false) {
return str_replace( ‘<script ‘, ‘<script async ‘, $tag );
}
else if (strpos($handle, ‘defer’) !== false) {
return str_replace( ‘<script ‘, ‘<script defer ‘, $tag );
}
else {
return $tag;
}
}
add_filter(‘script_loader_tag’, ‘add_asyncdefer_attribute’, 10, 2);
}

Данный код запускает одновременно два типа загрузки и автоматически выберет, какой тип присвоить определенному сценарию. Дескриптор $handle позволяет найти уникальное имя скрипта и определить, какая функция наиболее предпочтительна для загрузки. Код также работает не везде.
И теперь последний пункт. Если такая возможность есть, то можно перенести все JavaScript в подвал. Вкупе с отложенной загрузкой работает отлично. Добавляем в functions.php следующий код:

if(!is_admin()){ 
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); 
/*wp_deregister_script('jquery'); 
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"), false, '3.3.1', true); 
wp_enqueue_script('jquery'); */
}

Обратите внимание на последние строки. Они предназначены для обновления jquery. WordPress поддерживает версию 1.12, мы ее отключаем и подключаем версию 3.3.1. Она работает заметно шустрее. Если хотите обновиться, просто раскомментируйте, если возникнут проблемы, опять закройте в комментарий либо удалите код. Но лучше скачать jQuery себе на сайт и указать путь к нужной папке, чем брать из CDN.

В целом, с JavaScript разобрались, теперь перейдем к другим методам.

Кэширование и ускорители

Начнем с ускорения сайта. Для этого сначала устанавливаем плагин Jetpack, но лучше использовать другой плагин, например PageSpeed Ninja. Переходим во вкладку «Производительность» и включаем ленивую загрузку изображений. Данная функция позволяет изображениям загружаться позже страницы, по мере необходимости. Используйте только в том случае, если в теме функционал отложенной загрузки мультимедиа не реализован.

Lazy Load JetPackУскорители сайта включать не рекомендую, они отправляют статические файлы и картинки в CDN WordPress. Данная сеть предназначена для предоставления файлов с ближайших к пользователю серверов. Но это не гарант скорости. Можете попробовать, но не ручаюсь, что будет эффективно.
Если тема сложная, с мощным функционалом, анимациями и слайдерам, то можно включить мобильную версию сайта. Это значительно упростит сайт, уберет все ненужные функции. Настроить стили мобильной версии нетрудно, а вот добавить асинхронную, отложенную загрузку или перенести .js в подвал труднее. К сожалению, дочернюю версию мобильной темы Jetpack создать не выйдет, потому, при каждом обновлении добавленные функции будут слетать. Сохраните их в отдельный файл и добавляйте при каждом обновлении в файл functions.php мобильной темы. Расположен файл в следующем каталоге: ваш-сайт.ru/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/

JetPack Мобильная темаТеперь следующий плагин — Clearfy. Устанавливаем, заходим в настройке, переходим во вкладку производительность. Отключаем ненужные функции. Если совместимость со старыми версиями браузеров не нужна, то можете удалить jQuery Migrate.

ClearfyТеперь перейдем к cache. Переходим на вкладку Minify. Чтобы она появилась листаем ниже, нажимаем «Компоненты» и включаем «Html сжатие» и «Сжатие и объединение (JS, CSS)». Оптимизатор изображений тоже врубите. Пригодится. Рекомендую экспериментировать. Если сайт валится, обрубайте функции, после которых происходят неполадки.

Оптимизация сайта на WordPress не особо сложный процесс. Теперь требуется сократить вес сайта. Выбираем раздел «Оптим. изображений», в настройках указываем режим Lossy, этого достаточно, картинки сильно не портятся, запускаем процесс. Ждем. Готово, вес мультимедиа сократился, сайт ускорился.
Докидываем в файл .htacces в корневой папке сайта следующее:

#настраиваем кеширование
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 30 секунд
ExpiresDefault "access plus 30 seconds"
# Включаем кеширование изображений и флеш на 1 месяц
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/jpeg "access plus 4 weeks"
ExpiresByType image/png "access plus 30 days"
ExpiresByType image/gif "access plus 43829 minutes"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# Включаем кеширование css, javascript и текстовых файлов на 7 дней
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
# Включаем кеширование html и htm файлов на 12 часов
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кеширование xml файлов на 10 минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

# сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Оговорюсь. WP SuperCache и другие плагины мне достойной прибавки к производительности не дали. А W3 Total Cache даже уронил скорость.

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

PageSpeed Insightонечно, оптимизация WordPress для PageSpeed Insights – задача крайне сложная, но с этой инструкцией вы можете отлично улучшить результаты. Мне пришлось долго искать приведенные выше методы, испытывать, сжигать стул под собой. Вам же даю готовую инструкцию, выстраданную, работающую, пользуйтесь 🙂 Но предостерегаю. Не гонитесь за очками. Ваш сайт не должен терять полезные для пользователей возможности ради прибавки к конечному результату. Как показывает практика, удобство чаще всего полезнее скорости.

2 комментария

Добавить комментарий

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