Хостинг со скидкой 20%. Размещение в РФ. Собственный Дата-Центр.

Как ускорить сайт на WordPress — базовые рекомендации

 29 апреля 2018      
 HTML & CSS / WordPress      
 комментария 2      
 135

Уверен, вы слышали фразу, что медленный сайт убивает SEO. В этой статье я расскажу как быстро и просто максимально ускорить ваш сайт на WordPress.

Как измерить скорость сайта

В этой статье для анализа скорости загрузки сайта я буду пользоваться парой популярных сервисов — https://developers.google.com/speed/pagespeed/insights/ и https://gtmetrix.com/.

Наша задача минимум — это попасть в зеленую зону обоих тестов.

Что тормозит ваш сайт

На скорость загрузки сайта влияет следующее:

  • Хостинг
  • Изображения
  • JS скрипты
  • CSS стили

Остановлюсь подробно на каждом пункте

Быстрый хостинг для сайта на WordPress

Эти рекомендации универсальные и подойдут любому сайту, не только на WordPress. Однако мощный сервер отнюдь не гарантирует быструю работу сайта, ведь очень многое зависит от его настроек.

Список базовых рекомендаций:

  • Используйте PHP версии 7. Эта версия заметно быстрее предыдущих. Не забудьте про Zend OPcache.
  • В качестве веб-сервера используйте NGINX и режим работы PHP — PHP-FPM. WordPress поддерживает такой режим работы «из коробки».
  • Если не можете отказаться от веб-сервера Apache, то обязательно используйте NGINX в качестве Front-End.

По моему опыту связка NGINX плюс PHP-FPM работает заметно быстрее чем Apache плюс NGINX в качестве Front-End.

Как изображения тормозят ваш сайт

С изображениями все просто: они должны иметь оптимальное разрешение для вашего дизайна и минимально возможный размер файла.

Проанализируйте ширину страницы (поста, колонки) куда вставляете картинку. Если она 700 пикселей, то не следует загружать изображение размером 2048х2048! Поставьте ссылку на оригинальное изображение размеров 2048х2048, а на странице используйте оптимизированную картинку шириной 700 пикселей. Это заметно снизит размер файла изображения и соответственно ускорит загрузку сайта.

Экспериментируйте с форматами файлов изображений. В одних случаях меньший размер у PNG, в других у JPG.

В каждом формате есть свои методы оптимизации. В частности в PNG при малом количестве цветов лучше выбрать палитру из 256 цветов, что заметно уменьшит размер файла. А в JPG лучшее сжатие дает цветовая схема YCbCr.

Все вышеописанное хорошо, когда вы только готовите статью к публикации. Но если нужно оптимизировать существующие изображения на работающем сайте, то могу порекомендовать WordPress плагин — WP Smush (Smush Image Compression and Optimization).

Оптимальная загрузка JavaScript

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

Размещать JavaScript лучше в конце HTML документа перед закрывающим тегом BODY. Такой способ не тормозит загрузку видимой части сайта.

Чтобы это реализовать в WordPress используйте следующий код в файле functions.php для загрузки файлов JavaScript (это условный пример для рекламной сети Google.Adsense):

/* Подключаем скрипты */
 function theme_scripts_method(){
	wp_enqueue_script( 'adsbygoogle', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', false, null, true );
}

add_action( 'wp_enqueue_scripts', 'theme_scripts_method' );

В этом случае (последняя опция в значении true), ссылка на файл JavaScript будет размещаться перед закрывающим тегом BODY:

<script type='text/javascript' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
</body>
</html>

А в секции HEAD появится код:

<link rel='dns-prefetch' href='//pagead2.googlesyndication.com' />

Это нововведение так же ускоряет загрузку сайта. Так как является предзапросом ссылки и используется для определения источника, который будет востребован для загрузки необходимых ресурсов, чтобы браузер получил данные как можно скорее. Так что загружайте JavaScript в WordPress правильно, это ускорит ваш сайт!

Если загрузка файла JavaScript необходима в начале HTML документа (актуально для jQuery), то используйте асинхронную загрузку. Примеры моей реализации метода асинхронной загрузки скриптов в WordPress — https://moonback.ru/page/wordpress-javascript-async

Что не так с CSS стилями у WordPress

Реализация WordPress такова, что темы (шаблоны) до сих пор не подключают автоматически файл стилей по умолчанию style.css, который является обязательным.

Но проблема даже не в этом. Если вам необходимо подключить несколько файлов стилей, то не используйте оператор @import для подключения дополнительных стилей. Так как в таком случае браузер будет последовательно загружать все файлы стилей и объединять их в один.

Вместо этого используйте тег link для каждого файла стилей:

<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />

И браузер будет пытаться их загрузить разными потоками, что чаще всего быстрее.

Подробно как это сделать в WordPress описано в моей статье здесь.

Промежуточные результаты оптимизации

Применение этих простых правил позволит вам попасть в «зеленую» зону теста https://developers.google.com/speed/pagespeed/insights/

Как ускорить сайт на WordPress - базовые рекомендации

Как ускорить сайт на WordPress - базовые рекомендации

Можно ли получить еще большие значения, например 95/100 и выше? На wordPress это сложно, но так же реализуемо.

Скорость загрузки на мобильных является фактором ранжирования в Google

Для чего эта статья и почему все описанное важно. Дело в том, что с июля 2018 скорость загрузки является фактором ранжирования в поисковой выдаче Google для мобильных устройств. Это официальная информация — https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Суть документа в том, что ценный и уникальный контент все равно будет в ТОПе. Но при равной релевантности медленные сайты в результатах мобильного поиска буду ниже.

Поделись этой страницей с друзьями!

Прочтите это обязательно

Как узнать время генерации страницы и объем использованной памяти на PHP

Однажды я уже писал как это сделать в Wordpress - ...

JAVA & PHP php Далее

Свежие скидки на хостинг Adman.com для читателей блога

Коллеги, как вы знаете, я участник многих партнерских программ отечественных и зарубежных хостинговых компаний ...

Вебмастеру adman vds vps купоны распродажа скидки хостинг Далее

Обсуждение: 2 комментария

  1. Мария Крупнова:

    Спасибо за практические советы! Не знала о подобных нюансах!

    Ответить
  2. Игорь:

    Совет из личного опыта. Я остановился на w.tools, как дополнение к хостингу и вообще для ускорения сайта. Снижение нагрузки будет многократной за счет кеширования динамики в их CDN, т.к. страницы уже не будут постоянно генерится ЦМСкой + файрвол отфильтрует ненужные запросы, что тоже даст положительный эффект. У них полный охват РФ\СНГ, сервера в 31 стране. Мне хватило подключения, все четко настроили,рассказали, в итоге ускорился почти в 4 раза.

    Ответить

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

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

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

2018 © Технический блог
SQL - 95 | 0,412 сек. | 8.38 МБ
доступность сайта