В ноябре прошлого года google изменили алгоритмы PageSpeed Insights. Для тех кто не знает, PageSpeed Insights - это инструмент проверки скорости загрузки страниц сайта.
Соответственно скорость влияет на поисковую выдачу в google. А все остальные поисковые системы ровняются на google. Т.е на сегодняшний день для продвижения сайта, очень важно добиться быстрой загрузки страницы. В этой статье речь пойдет о том, как это сделать для сайта на WordPress.
Содержание
- 1. Оптимизация графики
- 2. Оптимизация css, js, html
- 3. Кеширование.
- 4. Рекомендации
1. Оптимизация графики
Итак начнем. Первое что нужно сделать, это сжать изображения без потери визуального качества. В этом нам поможет плагин Smush.
С помощью этого плагина можно уменьшить полноразмерный изображения. Это очень удобно, не нужно скачивать каталог uploads, сжимать изображения через софт и обратно заливать на сервак.
Значит, ставим этот плагин, он есть в репозитории Wordpress. Далее переходим в меню Smush->панель управления . В панели управления нас интересует пункт меню массовая оптимизация и опция уменьшить мои полноразмерные изображения.
Активируем эту опцию. И задаем максимальную высоту и ширину изображений.
Нажимаем сохранить изменения и запускаем оптимизацию изображений. Обязательно сделайте резервную копию папки где лежат изображения.
Одно из нововведений PageSpeed Insights это требование наличия изображений в WebP формате. Что это за формат? WebP - Это современный формат графики разработанный google, аналог png и jpg. Для решения этой задачи на поможет плагин WebP Express
Ставим это плагин. Настройки не трогаем, оставляем все по умолчанию. У этого плагина, нас интересует очень полезная опция, подмена стандартных изображений на изображения в WebP формате.
Включаем эту опцию, она называется Alter HTML. Но перед этим конвертируем все изображения в WebP формат(нужно нажать на кнопку Bulk convert)
И теперь сообщение "Используйте современные форматы изображений" от Google PageSpeed Insights должно исчезнуть.
2. Оптимизация css, js, html
Для оптимизации css, js и html мы будем использовать плагин Autoptimize. С его помощью мы минифицируем и объедением в один файл все css файлы и тоже самое сделаем для js файлов.
Так же с помощью это плагина мы оптимизируем html код сайта.
У этого плагина есть полезная опция "Отложенная загрузка изображений". Ее тоже следует включить.
Теперь немного программирования. В зависимости от ситуаций мы можем попробовать переподключить все css и js файлы в footer сайта. Как это сделать?
Способ 1. В файле function.php темы WP, нужной найти хук wp_enqueue_scripts и заменить его на wp_footer. Хук wp_enqueue_scripts - отвечает за подключение скриптов и стилей.
Способ 2. Достаточно грубый метод, но рабочий.
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');
С ним надо быть по осторожнее! Он может нарушить работу сайта.
3. Кеширование.
И напоследок на осталось включить кеширования страниц сайта. В этом нам поможет плагин WP Super Cache.
Нас интересует опция: Сжимать файлы кэша чтобы ускорить работу.
4. Рекомендации
И еще хотелось бы отметить, что многое зависит от хостинга. На дешевых тарифах скорость выдачи страницы будет медленная. Так что найдите соотношение цена/качество.
Видео по статье:
Надеюсь, информация в данной статье будет вам полезна. Спасибо за внимание)