кнопка наверх

Как ускорить загрузку сайта на WordPress. Google PageSpeed Insights

увеличить скорость загрузки сайта на WordPress

Приветствую! В моей статье о показателе отказов на сайте были рассмотрены причины, по которым посетители могут покинуть ваш блог. Одна из главных – это низкая скорость загрузки страниц ресурса. Сегодня мы детально разберем различные способы того, как предотвратить эту проблему и увеличить скорость загрузки сайта на WordPress. Также узнаем, как сервис Google PageSpeed Insights может помочь оптимизировать работу вашего блога. 

Приглашаю своих читателей отправиться в йога-поход, который буду вести я на Кавказе. Мужчинам приятный бонус! Подробнее по ссылке.
поход

Содержание:

Методы ускорения работы блога

Редактируем файл .htaccess

Находим в корне сайта файл .htaccess и открываем для редактирования. Здесь мы добавим команды, которые снизят нагрузку на сервер и ускорят загрузку в WordPress.

Рекомендуется указать кэширование для отдельных объектов вашего ресурса. Для этого вставляем следующий код в конце файла, но перед «# ENDWordepress»:

1
2
3
4
# сжатие text, html, javascript, css, xml:
<ifModulemod_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>

Затем добавляем еще:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# кеш браузера
<ifModulemod_expires.c>
ExpiresActiveOn
#по умолчанию кеш в 5 секунд
ExpiresDefault "accessplus 5 seconds"
# Включаем кэширование изображений и флэш на месяц
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 и текстовых файлов на одну неделю
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 файлов на один день
ExpiresByType text/html "access plus 43200 seconds"
# Включаем кэширование xml файлов на десять минут
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

Теперь кэширование указанных в коде объектов (изображений, css, javascriptфайлов) будет происходить на стороне браузера, и ему не придется загружать их всякий раз, когда к ним обращается пользователь.

Включим gzip сжатие файлов. Это специальный сжатый вид HTML-страниц для браузеров.Таким способом сервер каждый раз архивирует соответствующие текстовые файлы, передает их на ваш компьютер, а браузер при получении автоматически их распаковывает. Gzip работает только с  текстом. Для включения сжатия поместим необходимый код в файл .htaccess:

1
2
3
4
5
6
7
8
9
<ifModulemod_gzip.c> mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.*
</ifModule>

После этого количество траффика, передаваемого браузеру, значительно уменьшится.

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

1
2
3
4
5
6
7
8
9
10
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(.+.)?ИМЯВАШЕГОСАЙТА.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^$ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]

Обратите внимание: вместо фразы «ИМЯ ВАШЕГО САЙТА», следует указать название вашего домена.

Используем плагины кэширования

Следующий эффективный способ ускорить WordPress блог – воспользоваться плагином кэширования. После того, как посетитель заходит на сайт, CMS формирует из отдельных частей PHP-кода, на котором он написан, целостную HTML-страницу и передает её браузеру пользователя. Кэширование позволяет избежать необходимости при каждом запросе снова проделывать эту работу и тем самым снижает нагрузку на сервер. После активации плагина сгенерированная копия страницы будет оставаться на хостинге ресурса в специальной папке. И при следующем обращении к этой странице, будет загружаться сохраненная копия.

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

Оптимизируем базу данных

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

Сжимаем изображения

Убедитесь, что вы используете в своем блоге файлы изображений с оптимальным сочетанием «размер – качество». Для его достижения можно воспользоваться опцией Photoshop – «SaveForWeb» («Сохранить для Web»).

Сжимаем изображения

Файлы .png имеют большой вес и замедляют загрузку. Используйте этот формат только для небольшой графики и картинок с прозрачным фоном. В остальных случаях больше подойдет расширение .jpg.

Если вы хотите автоматизировать процесс обработки изображений на вашем сайте, Вордпресс предоставляет возможность выбрать один из соответствующих плагинов. Среди самых популярных – WPSmush.

плагин WP-Smush

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

Для сжатия уже имеющихся картинок воспользуемся возможностью пакетной обработки. Для этого перейдем в «Медиафайлы»- «WPSmush». На открывшейся странице сразу после блока настроек («Settings») следует блок «Smushinbulk». Нажав кнопку «BulkSmushNow», мы запускаем процесс сжатия всех изображений. Также можно воспользоваться ссылкой на «Библиотеку файлов», если мы хотим оптимизировать отдельные изображения.

Smush in bulk

Оптимизируем код

Следующий способ ускорить сайт на WordPress– сжать HTML и скрипты. Воспользуемся плагином Autoptimize.

сжать HTML и скрипты

Плагин объединяет все файлы css-стилей и js-скриптов в один файл – с расширением .cssили .js соответственно. Сохраняет их на сервере и размещает ссылки на них в HTML-документе.  А сам HTML-код очищает от лишних пробелов и переносов строк.  На странице настроек Autoptimize мы просто отмечаем галочками нужные нам параметры для оптимизации.

ускорим сайт на WordPress

Создаём мобильную версию сайта

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

Дополнительные рекомендации по ускорению работы сайта:

  1. Деактивируйте и удалите плагины, которыми вы не пользуетесь. Сведите их количество к 10-15. Подберите только самые необходимы плагины для Вордпресс.
  2. Старайтесь использовать как можно меньше внешних скриптов и виджетов социальных сетей на вашем блоге.
  3. Размещайте по возможности все скрипты перед закрывающим тегом </body>. Таким образом они буду загружаться после основного контента, что ускорит ваш сайт на WordPress.
  4. Выберите качественный хостинг. От его технических характеристик зависит скорость и качество работы вашего ресурса.

Как работать с сервисом Google PageSpeed Insights

Page SpeedInsights – специальный инструмент от Google, анализирующий скорость загрузки страниц на десктопных и мобильных устройствах. Чтобы приступить к работе, перейдем по ссылке — https://developers.google.com/speed/pagespeed/insights/ и введем URL веб-страницы. Нажмем «Анализировать».

Google PageSpeed Insights

В течении нескольких секунд будет сформирован результат. Он состоит из оценки скорости по 100-бальной шкале, причин медленной работы и рекомендаций от Google. В них будет указано, какими методами стоит воспользоваться, чтобы ускорить загрузку сайта на WordPress.

ускорить загрузку сайта на WordPress

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


1 звезда2 звезды3 звезды4 звезды5 звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Юрий:

    Где же Вы раньше были

    Пишу коммент не читая статьи

    Три дня СИДЕЛ НАД ЭТОЙ ТЕМОЙ

    С 20/ 100 добился 50/100 для мобильных

    я не прогер у меня проблемы с кодами а здесь такое —

    Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

    может подскажете как решить проблему

    За ранее спасибо

    Ответить
    • Анна:

      «Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение» — с этим сама еще не разобралась:) может быть имеется ввиду, перенести по возможности все скрипты перед закрывающим тегом body.

      Ответить
      • Олег:

        В идеале Google PageSpeed Insights вообще мечтает о том, чтобы в не было ни скриптов ни css. Если просто переместить перед закрывающим тегом , то посетитель будет видеть скачкообразную загрузку сайта. И это сверху нужно чем-то прикрывать. Для этого и существуют прелоадеры. Есть css прелоадеры, есть gif-прелоадеры. В свое время наткнулся на статью:

        popel-studio.com/blog/article/preloader-saita-svoimi-rukami.html

        Реализовываю теперь прелоадеры gif-картинки.

        Google PageSpeed Insights не распознает за вред если стили в написать между тегами . Таким образом

        1. вписываете в :

        #page-preloader {

        position: fixed;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        background: #000;

        z-index: 100500;

        }

        #page-preloader .spinner {

        width: 32px;

        height: 32px;

        position: absolute;

        left: 50%;

        top: 50%;

        background: url ('/images/spinner.gif') no-repeat 50% 50%;

        margin: -16px 0 0 -16px;

        }

        2. переносите все стили и скрипты размещаете их перед (если css то лучше до js)

        3.вставляете тем, где уже как бы сайт подгрузился код, выключающий прелоадер скрипт. Я делаю до загрузки jQuery.

        $(window).on ('load', function () {

        var $preloader = $('#page-preloader'),

        $spinner = $preloader.find ('.spinner');

        $spinner.fadeOut ();

        $preloader.delay (350).fadeOut ('slow');

        });

        4. Теперь вставить включение прелоадера в сам код страницы. В самый, самый верх. и сразу

        Вот и все. Загрузка сайта прикрыта сверху картинкой. Обратите внимание на строчку -16px. Здесь ширина картинки прелоадера делится на 2. Например если прелоадер 64 на 64px то значение будет -32, а иначе нарушается выравнивание по середине. В этом случае меняете значение на width: 64px;

        height: 64px;

        Если хотите посложнее css прелоадеры, то не youtube в поиск вбейте мастер css. Там у Сереги два урока есть. Я реализовал css прелоадер на лендинге eslawintl.ru (ссылку можете удалить) Хотя сам думаю, что css прелоадеры — заморочка лишняя.

        И вот после всего вопрос. Борюсь с кучей картинок, но метод выставления на ноль всех значений в медиа не помогает. Делаю «применить» и опять вижу стандартные значения. Версия WP последняя. Может и вы мне, что подскажете.

        Ответить
        • Олег:

          Решил уточнить:

          $(window).on ('load', function () {

          var $preloader = $('#page-preloader'),

          $spinner = $preloader.find ('.spinner');

          $spinner.fadeOut ();

          $preloader.delay (350).fadeOut ('slow');

          });

          Ответить
  2. Юрий:

    перенести по возможности все скрипты перед закрывающим тегом body . — да есть такая инфа, нашел на другом блоге подробно все описано но сам боюсь туда лазить.

    Ответить
  3. Роман:

    Не работает часть кодов (2-я вставка). После модификации .htaccess браузер выдает ошибку: 500 Internal Server Error

    И все вставки нужно отредактировать, не хватает пробела между ifModule и например mod_deflate.c

    Ответить
    • Ваше имя:

      Поддержу Романа после редактирования .htaccess браузер выдает ошибку: 500 Internal Server Error

      Анна большая просьба посмотрите какие есть опечатки в коде жду с нетерпением вашего ответа от нашего призыва!

      Ответить
      • Сергей:

        У меня то же самое — пробовал вставлять и все коды, и по отдельности — в любом случае ошибка 500 при попытке входа в админ панель, и сайт недоступен.

        Ответить
Ваш комментарий: