WordPress скорость загрузки – Как узнать, что нагружает wordpress и увеличить скорость загрузки сайта? — Хабр Q&A

Содержание

Как ускорить загрузку сайта 10 способов

(Последнее обновление: 05.05.2019)

Доброго времени суток, дорогие коллеги! Хочу вернуться ещё раз к важной теме — как ускорить загрузку сайта WordPress и сейчас добавлю к предыдущим постам еще один небольшое повествование. Попить чайку, принять душ и заняться домашними делами … Всё это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится более 3 — х секунд. Я лично всегда так делаю, не жду, а перехожу на другой источник.

Быстрая загрузка веб-ресурсаБыстрая загрузка веб-ресурса

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

В этой статье мы рассмотрим 10 способов, с помощью которых можно повысить скорость загрузки сайта и улучшить пользовательский опыт.

1. Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

Чтобы ускорить WordPress-сайт, лучшее, что можно сделать, – это установить кэширующий плагин, который позаботится о большинстве из пунктов, которые мы рассмотрим ниже.

Кэширование – это способ временного хранения данных для более простого и быстрого извлечения. Это означает, что кэширование может быть выполнено двумя путями: сервер вашего хоста может кэшировать некоторые данные, а затем браузеры ваших пользователей могут кэшировать оставшиеся данные. Это гарантирует, что вашему серверу не придётся запускать так много запросов и файлов, а пользователям – загружать каждый отдельный файл всякий раз, когда они посещают ваш сайт.

Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании.

Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.

2. Подключение к сети доставки контента

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

CDN – это крупная сеть серверов, распределённых по всему миру, способная кэшировать файлы вашего сайта, а затем отправлять эти файлы с ближайшего к вашим пользователям сервера. Таким образом, в идеальной ситуации пользователь в Нью-Йорке загрузит файлы сайта с северо-востока Соединенных Штатов, а не западного побережья или Европы.

Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.

Чтобы настроить CDN, например CloudFlare, выполните следующие действия:

Зарегистрируйте аккаунт на сайте https://www.cloudflare.com/.

Добавьте в него свой сайт. (С системой справится даже ребенок. Вы просто указываете адрес своего сайта и нажимаете большую зеленую кнопку. В течение минуты ваш сайт анализируется и затем на странице отображаются все предыдущие настройки DNS. Также предлагается изменить/добавить некоторые значения, если что-то вдруг перенеслось неправильно. В чем плюс? Все очень просто, ваш сайт перенесется и не будет простаивать. Ваши пользователи даже не заметят каких-либо изменений).

Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare:

CloudflareCloudflare

Плагин Cloudflare для WordPress

При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка 🙂

3. Оптимизация изображений

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

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

Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG.

сервис TinyPNGсервис TinyPNG

Веб-сервис TinyPNG, который позволяет сжимать PNG-файлы

Далее, можно оптимизировать изображения, используя более новый стандарт WebP. Однако на сегодняшний день этот стандарт поддерживают не все браузеры (только Google Chrome, Android и Opera), поэтому при его применении обязательно нужно использовать резервные методы для корректной загрузки изображений в других браузерах.

4. Объединение и удаление файлов Javascript

Для выполнения этой задачи нужно иметь представление о JavaScript, в противном случае можно нарушить эту функциональность на сайте.

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.

Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress (https://jscompress.com/).

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt (https://gruntjs.com/) или Gulp (https://gulpjs.com/) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache (https://www.modpagespeed.com/doc/filter-js-minify), который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.

После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте — http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird (https://premium.wpmudev.org/blog/hummingbird/) или плагин Async JavaScript (https://wordpress.org/plugins/async-javascript/), которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

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

Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.

Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier — https://www.minifier.org/.

6. Загрузка динамических частей через AJAX

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

Например, на сайте PriceListo те страницы, на которых находятся счётчики репостов в социальных сетях, могли бы загружаться медленно, поскольку сайту нужно связываться с серверами Facebook и Twitter для правильного расчёта общего числа репостов.

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

Такой подход позволяет предотвратить необходимость загрузки данных из Facebook или Twitter при каждой загрузке страницы. Кроме того, даже если в процессе получения этих данных есть ошибка, то она затронет лишь часть страницы, а не всю её целиком.

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

7. Использование браузерного кэширования

Браузерное кэширование – это способность браузера сохранять локально ресурсы, такие как изображения, файлы JavaScript и файлы CSS, чтобы их не нужно было загружать каждый раз. Хотя использование этой функции влияет в основном на повторных посетителей, это по-прежнему важный шаг для ускорения сайта.

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

Browser Cache ExpirationBrowser Cache Expiration

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

Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому — https://gtmetrix.com/leverage-browser-caching.html, в файл .htaccess в корневом каталоге вашего сайта.

8. Использование алгоритма сжатия Gzip

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

Вы можете включить сжатие Gzip так же, как браузерное кэширование. Просто добавьте следующий код в файл .htaccess в корневом каталоге вашего сайта:

# Enable Compression
<IfModule mod_deflate.c>
  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
</IfModule>
<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  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_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Leverage Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
  Header set Cache-Control "max-age=2678400, public"
  </filesmatch>
  <filesmatch "\.(html|htm)$">
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  </filesmatch>
  <filesmatch "\.(pdf)$">
  Header set Cache-Control "max-age=86400, public"
  </filesmatch>
  <filesmatch "\.(js)$">
  Header set Cache-Control "max-age=2678400, private"
  </filesmatch>
</IfModule>

Если вы используете CloudFlare, ваши ресурсы автоматически будут автоматически сжиматься с помощью Gzip.

9. Избегание загрузки большого количества внешних ресурсов

Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.

Проблема в том, что когда вы добавляете сторонние фрагменты кода на свой сайт, он, скорее всего, загрузит различные зависимые объекты и файлы, чтобы их функциональность работала. Это в свою очередь экспоненциально увеличит время загрузки вашего сайта – вплоть до 100%.

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

Если вы используете другие сторонние ресурсы, такие как формы, чат, всплывающие оповещения и т. д., то вам нужно будет проверить сайт с помощью инструмента GTmetrix (https://gtmetrix.com/). На вкладке Waterfall вы сможете просмотреть скорость загрузки всех файлов, найденных на странице, и понять, какие из них больше всего её замедляют.

10. Настройка Google AMP

Google AMP (Accelerated Mobile Pages) – это фреймворк для создания облегчённых версий веб-страниц для мобильных устройств. Для ускорения загрузки эти страницы предварительно загружаются и кэшируются серверами Google.

Для настройки AMP пользователям WordPress рекомендуется использовать официальный AMP-плагин.

AMP for WordPressAMP for WordPress

Плагин AMP for WordPress

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

Автор статьи: Харис Басич (Haris Bacic) – руководитель отдела дизайна и разработки в агентстве поискового маркетинга AdFicient. Перевод www.searchengines.ru.

P.S. Для быстрой загрузки сайта используйте быстрые темы для WP, например — Basic


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

увеличить скорость загрузки сайта на 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>

# сжатие 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>

# кеш браузера <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>

<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} !^https://(.+.)?yandex.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?undsoft.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?yandex.net/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?feedburner.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?mail.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?poisk.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https://(.+.)?ИМЯВАШЕГОСАЙТА.ru/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^$ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]

RewriteEngine On RewriteCond %{HTTP_REFERER} !^https://(.+.)?yandex.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?undsoft.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?yandex.net/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?feedburner.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?mail.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?poisk.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^https://(.+.)?ИМЯВАШЕГОСАЙТА.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.

Как ускорить сайт WordPress для Google PageSpeed

(Последнее обновление: 12.08.2019)

Как ускорить сайт WordPress для Google PageSpeed Insights с показателями 100/100? Сегодня я хочу поделиться с вами некоторыми советами которые помогут вам набрать 100/100 баллов в Google PageSpeed ​​Insights на вашем сайте WordPress. Или, по крайней мере, приблизить к этому показателю ваш веб-сайт ВордПресс.

В январе 2018 года Google официально объявил, что скорость сайта является фактором ранжирования в мобильном поиске. И хотя время загрузки страниц всегда имело решающее значение для хорошего пользовательского опыта, именно после заявления Google многие владельцы обратили внимание на скорость своих ресурсов.

Как ускорить сайт WordPress для Google PageSpeed InsightsКак ускорить сайт WordPress для Google PageSpeed Insights

Операция: Ускорить сайт WordPress

Западный SEO-консультант Ник Лерой (Nick Leroy) рассказал, что много внимания уделял скорости загрузки сайтов своих клиентов, а его собственный сайт на WordPress был довольно медленный. Чтобы не быть сапожником без сапог, он решил начать работу по ускорению ресурса. В итоге он сумел добиться максимальной скорости загрузки 100 в Google Page Speed Insights для десктопной версии сайта NickLeRoy.com. Мобильную версию удалось ускорить до 89.

Оптимизация сайта на WordPress для Google PageSpeedОптимизация сайта на WordPress для Google PageSpeed

Скорость загрузки в Google Page Speed Insights

Все владельцы веб-ресурсов могут значительно увеличить скорость загрузки страниц сайта на ВордПресс, считает Ник и рассказывает, как это сделать. 100/100 с помощью WordPress (возможно?).

Как ускорить сайт на WordPress?

Существует множество факторов, которые влияют на скорость загрузки сайта: число и размер объектов на страницах, время ответа сервера, не нужные редиректы и многое другое.

Прежде чем приступить к ускорению своего ресурса, Ник Лерой решил понять, с чем предстоит работать. Так как сайт построен на CMS WordPress, были проанализированы следующие области:

  • Хостинг,
  • Тема WordPress,
  • Плагины ВордПресс,
  • Изображения,
  • Ресурсы.
    На основе проверки был составлен список того, что можно улучшить. Затем Ник приступил к внедрению изменений.

Проблема: хостинг и TTFB

Первое, что бросалось в глаза при поверхностном анализе — большое время до получения первого байта после отправки запроса со стороны клиента (Time To First Byte или TTFB) для всех страниц сайта: от 1,5 до 2 секунд. И это было просто время, которое необходимо для первоначального соединения со страницей без ее загрузки.

Помимо этого были и другие проблемы, связанные с хостингом: отсутствие HTTP/2 setup/configured (проблему можно было бы исправить, используя CDN), отсутствие кэширования и т.п. Общий хостинг на Hostgator не способствовал достижению цели увеличения скорости загрузки сайта.

Решение: смена хостинг-провайдера

В качестве альтернативы существующему хостингу были выбраны два провайдера: FlyWheel и Kinsta. Оба провайдера:

  1. Предлагали услуги хостинга специально для WordPress-сайтов,
  2. Относительно доступны по цене ($25-30 в месяц),
  3. Предлагали решения для кэширования на сервере,
  4. Имели встроенную технологию CDN,
  5. Предлагали бесплатный SSL-сертификат (и протокол HTTP/2).

В итоге было решено остановиться на хостинге FlyWheel. Этот провайдер был немного дешевле и предоставлял локальные решения для разработки новых сайтов на WordPress.

После некоторых раздумий Ник Лерой решил создать новый сайт NickLeRoy.com. И вот, почему.

Проблема: оптимизация тем, плагинов, изображений, ресурсов

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

Тема WordPress

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

В результате многие темы содержат большое количество не нужного функционала.

Плагины ВордПресс

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

Изображения

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

Хотя WordPress сжимает загружаемые медиа-файлы, он справляется с этим не очень хорошо. Большинство изображений обычно весит гораздо больше, чем необходимо. А это, в свою очередь, влияет на скорость загрузки страниц.

Ресурсы

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

На сайте NickLeRoy.com использовалось большое количество ресурсов, даже там, где они не были необходимы. Шрифты, javascript-файлы для ненужных функций, CSS для стилей и эффектов и многое другое, от чего можно было бы избавиться.

Решение: создание нового сайта

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

Тогда Ник принял решение перезапустить сайт с нуля на новом хостинге. Для этого была проделана следующая работа:

  • Чистая установка WordPress на Local by Flywheel с чистой базой данных и кодом,
  • Установка облегченной темы,
  • Установка конструктора страниц Elementor, чтобы сайт выглядел так же, как изначально, но загружался быстрее,
  • Перестройка всего сайта,
  • Оптимизация изображений с помощью imageOptim. Для этого все картинки были загружены в папку wp-content/uploads, пропущены через сервис imageOptim, и выложены обратно на сайт. Суммарное сжатие составило около 90% по сравнению с исходным размером файлов,
  • установка Autoptimize и Async Javascript, что позволило объединить JS и CSS и уменьшить / удалить блокировку рендеринга.

После реализации описанных выше действий сайт был перемещен из локальной среды разработки в промежуточную. Затем специалисты настроили SSL и HTTP/2 и после тестирования обновили DNS.

Результаты

Скорость загрузки страниц в Google Page Speed оценивалась с помощью сервиса SanityCheck.io. На скриншоте видно, как после внесения всех изменений улучшились показатели для мобильной версии сайта (синяя линия) и для десктопной (черная линия).

Сайт WordPress со 100 баллами на Google PagespeedСайт WordPress со 100 баллами на Google Pagespeed

Улучшение скорости сайта WordPress

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

  1. Отказаться от Google Fonts и полностью перейти на системные шрифты или загрузить Google Fonts на сервер,
  2. Удалить из верхней части страницы код CSS и Inline,
  3. Оптимизировать файлы JS / CSS,
  4. Установить стороннюю CDN (например, CloudFlare) или использовать сторонний сервис для оптимизации изображений, например, в формате WebP,
  5. Улучшить кэширование для ресурсов.

Ранее рейтинг скорости страниц измерялся тем, насколько быстро ваш сайт загружался на компьютер. Но по состоянию на 09 июля 2018 года скорость страницы является фактором ранжирования для мобильного поиска. Это означает, что оптимизация вашего WordPress для мобильных устройств важна как никогда!

В заключение

Любой владелец сайта на WordPress и другой CMS может значительно ускорить ресурс. Можно последовать примеру Ника и перезапустить сайт или попытаться исправить проблемы на текущем сайте, влияющие на скорость загрузки страниц. Какой бы вариант вы ни выбрали, затраченные усилия обязательно окупятся ростом трафика, снижением показателя отказов и, возможно, повышением позиций в поисковых системах.

Источник перевода: www.seonews.ru


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

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

В этой статье мы расскажем обо всём, что касается скорости работы сайта – мы расскажем, на что и как это влияет, и как увеличить скорость загрузки сайта на WordPress. Покажем на примере самой популярной в мире системы управления сайтом.

uvelichit

Что такое скорость загрузки сайта

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

Для продвижения имеют значения доли секунд. Улучшение даже на небольшое время может повысить позиции сайта в поисковой выдаче. Также может сыграть и ухудшение скорости – понизить позиции.

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

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

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

Поисковики умеют определять скорость загрузки страниц и создавать, исходя из этого, поисковую выдачу. Кроме того, они умеют определять поведенческие факторы посетителей на сайте, и они зависят от скорости работы страниц. Особенно этот показатель оценивается поисковиком Google.

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

Хостинг

Хостинг влияет на данный параметр. Если он некачественный и слабый, то сайт будет работать медленно. В особенности для WordPress нужно подбирать качественный и быстрый хостинг, так как именно эта CMS показывает себя как самая ресурсоёмкая. Да, за функциональность приходится чем-то платить.

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

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

Почему мы не даём точных параметром хостинга, которые подойдут для WordPress? Всё потому, что скорость будет зависеть не только от хостинга, от установленного там ПО и “железа”, но и от других показателей – посещаемости сайта, установленных темы и плагинов, внедрённых скриптов и другое. Так что серверные параметры в данном случае субъективны.

Установленные плагины и тема

Чем больше установлено плагинов, тем медленнее сайт, но и обойтись без них нельзя. К тому же, нельзя прибегать и к способу “без плагинов” (то есть внедрением своих кодов). Это, во-первых, не практично, во-вторых, небезопасно, в-третьих, также замедляет сайт.

Порекомендовать можно лишь только то, что установлены должны быть лишь необходимые плагины. Ставить плагин ради того, что когда-то в будущем он может быть понадобится, не нужно. Так же, не нужно держать стопку деактивированных плагинов. Даже выключенные плагины нагружают сайт.

Темы также влияют на это. В темы могут быть встроены какие-либо скрипты (вроде плагинов), также они могут содержать графические элементы. Особенно этим страдают платные темы (раз нашли деньги на платную тему, не пожалейте и на хороший хостинг для неё).

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

Ленивая загрузка изображений

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

В Wordress реализовать ленивую загрузку можно с помощью разнообразных плагинов. Каждый из них имеет свои особенности и настройки, благодаря которым можно подобрать наиболее подходящий для любого случая вариант. Например, отлично подойдут варианты a3 Lazy Load, Easy Lazy Loader, Lazy Load Optimizer или любой другой с хорошим рейтингом, который можно найти в каталоге плагинов по запросу “lazy load”.

Плагин Autoptimize

Можно долго и нудно рассказывать о том, что увеличить скорость загрузки сайта на WordPress можно путём перемещения одних скриптов в подвал, других в верхнюю часть сайта, третьи нужно объединить, четвертые разделить… А можно просто установить плагин Autoptimize.

В большинстве случаев даже с настройками по умолчанию получится прирост скорости загрузки. Те, кто разбираются, могут настроить его ещё более оптимизировать. Поэтому есть смысл изучить настройки, которые в основном на русском языке. Плагин работает с HTML, Java script и CSS файлами, оптимизирует их и делает всё, что можно, чтобы они оказывали наименьшее влияние на скорость.

Плагины для ускорения загрузки сайта WordPress

(Последнее обновление: 05.05.2019)

Приветствую вас, дорогие друзья! Сегодня у меня снова важная тема для вас — как увеличить скорость загрузки сайта? Как ускорить ваш сайт WordPress? Об этом написано у меня подробно здесь, а этот пост будет дополнение к нему. Лишние знание об ускорение загрузки сайта WordPress нам не повредят. Сразу признаюсь, статья не моя. Позаимствовал её с популярного сервиса pr-cy. Надеюсь они не против. И так, погнали наших городских. Плагины для ускорения загрузки сайта на WordPress?

Первое, что влияет на впечатление пользователя от сайта — скорость его загрузки. Если сайт не загрузился в первые 3 секунды, скорее всего пользователь его закроет.

Загрузка сайта WordPressЗагрузка сайта WordPress

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

Даже если на сайте выстроена идеальная воронка продаж, продумано юзабилити, продается что-то выгодное и полезное, клиент этого не увидит. Поисковые системы тоже поощряют ускорение загрузки: с 9 июля Google запустил алгоритм Google Speed Update, которые понижает в выдаче сайты, которые загружаются долго. Особенно рискуют интернет-магазины, потому что обычно они функционально перегружены.

Многие владельцы сайтов и SEO-специалисты жаловались на значительную просадку позиций после обновления алгоритма. Хотя сервисы мониторинга позиции не показывают каких-либо значительных изменений. Интересно, что по анализу Барри Шварца, владельца портала Seroundtable, апдейт больше всего навредил сайтам о здоровье. Пострадали 42% официальных ресурсов медучреждений, частных сайтов о здоровье и фитнесе, ЗОЖ. Причина такого смещения результатов неизвестна. Даже если ваш сайт далек от темы здоровья, работать над скоростью все равно нужно.

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

WordPress плагины для ускорения загрузки сайта

В подборке бесплатные русифицированные плагины для сайта на WordPress, которые исправят ошибки кода, закэшируют страницы и сделают загрузку сайта ВордПресс быстрее. Вы можете установить выбранные плагины стандартным способом. Перейти в панель администрирования вашего сайта. Перейдите в раздел плагины Добавить новый. Искать плагин по названию. Нажмите Установить. После установки активировать плагин и перейти к его настройкам.

WP Fastest Cache

WP Fastest CacheWP Fastest Cache

Плагин WP Fastest Cache

Плагин создает статические html-файлы с сайта на WordPress и сохраняет их, то есть кэширует страницы.

Возможности:

  • кэширование страниц в браузере для более быстрой загрузки у пользователей, посещавших сайт ранее;
  • gzip-сжатие;
  • оптимизация кода;
  • уменьшение размера файлов css.
Данные WP Fastest CacheДанные WP Fastest Cache

Сравнение производительности с другими плагинами

Плагин совместим с HTTPS, поддерживает SSL, CDN, Cloudflare. Не работает с режимом Multisite. Совместим с версиями WordPress вплоть до свежей 4.9.8 версии от 03.08.18. Минимальное требование — версия WordPress от 3.3. Настройка этого плагина очень проста.

Плагин PageSpeed Ninja

PageSpeed NinjaPageSpeed Ninja

Плагин PageSpeed Ninja

PageSpeed Ninja — это наилучший плагин производительности для WordPress. Вы сможете сделать свои сайты загружающимися быстрее на десктопах и мобильных устройствах, в один клик исправив проблемы найденные Google PageSpeed Insights.

  • Простое влючение gzip сжатия для файлов;
  • Исправление блокирующих отрисовку css и javascript;
  • Улучшение критического пути отрисовки и авто-генерация критического CSS;
  • Минификация html, javascript и css файлов;
  • Объединение и подстановка javascript и css;
  • Отложенная загрузка javascript и css;
  • Оптимизация порядка загрузки стилей и скриптов;
  • Сжатие всех изображений для оптимизации размера;
  • Отложенная (ленивая) загрузка изображений с поддержкой предпросмотра в низком разрешении;
  • Получайте преимущества от кэширования в браузере и на стороне сервера.
Настройки PageSpeed NinjaНастройки PageSpeed Ninja

PageSpeed Ninja предлагает действия по ускорению загрузки сайта

Плагин может быть несовместим с некоторыми сайтами, поэтому проверьте совместимость на сайте PageSpeed.Ninja (http://pagespeed.ninja/). Введите свой домен, результаты появятся на экране и придут на почту. Совместим с версиями WordPress от 4.0.1 вплоть до последней на сегодня версией 4.9.8. Минимальное требование — версия от 4.0.1.

PageSpeed Module

PageSpeed NinjaPageSpeed Ninja

Плагин PageSpeed Ninja

Плагин открывает дополнительные настройки страниц для ускорения загрузки, если на сайте используется веб-сервера с открытым исходным кодом Apache или Nginx. Возможности плагина:

Возможности:

  • очистка кэша от модулей;
  • включение режим разработчика для обхода кэширования PageSpeed.

Плагин имеет страницу настроек в консоли сайта, с кнопками и элементами управления:

Настройки PageSpeed ModuleНастройки PageSpeed Module

Панель настроек плагина PageSpeed Module

Для работы нужно, чтобы был установлен веб-сервер Apache или Nginx. Плагин совместим с версиями WordPress вплоть до свежей 4.9.8 версии от 03.08.18. Минимальное требование — версия WordPress от 4.4.

Jetpack от WordPress.com

JetpackJetpack

Jetpack от WordPress.com

Удобный дизайн, маркетинговые инструменты и средства безопасности — всё собрано вместе. Плагин от WordPress.com, его функциональность позволяет улучшить оформление сайта, обеспечить пользователям безопасную работу, отследить маркетинговые данные. Создайте сайт WordPress с чистого листа и настройте его по своему усмотрению. Плагин установили более 5 000 000 пользователей.

Создайте сайт WordPressСоздайте сайт WordPress

Создайте сайт WordPress с чистого листа и настройте его по своему усмотрению

Возможности Jetpack:

  • отложенная загрузка изображений для ускорения работы на мобильных устройствах;
  • темы для оформления;
  • поддержка статистики и аналитики;
  • автоматический постинг в соцсети с планированием публикаций;
  • статистика и аналитика сайта
  • Elasticsearch — поиск похожего контента на сайтах;
  • фильтрация спама;
  • ежедневное резервирование;
  • поддержка системы оплаты;
  • двухфакторная аутентификация для входа на сайт;
  • и другие возможности для безопасной работы на сайте и маркетинга.

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

AMP for WordPress

AMP for WordPressAMP for WordPress

AMP project. Плагин ускоряет загрузку страниц, преобразовывая их в AMP

Плагин ускоряет загрузку страниц, преобразовывая их в AMP. Такие страницы быстро загружаются: все элементы статичны, поэтому их положения и размеры можно определить до загрузки, и макет загружается сразу без перекомпоновки. Возможности:

  • преобразование страниц в вид AMP, тогда к URL каждой страницы добавится /amp/;
  • отображение сайта как «Native AMP», тогда у каждого адреса будет только одна AMP-версия URL;
  • обновление кэша по расписанию.

Поддерживает CDN. Совместим с версиями WordPress вплоть до свежей 4.9.8 версии от 03.08.18. Минимальное требование — версия WordPress от 4.7.

All in One SEO Pack

All in One SEO PackAll in One SEO Pack

Плагин All in One SEO Pack

Плагин работает с ускорением загрузки страниц, но предназначен в целом для автоматизации работы с SEO сайта. Более 45 000 000 установок. Возможности:

  • поддержка Google AMP для ускорения загрузки мобильных страниц;
  • уведомление Google об изменениях на сайте;
  • автоматическая оптимизация заголовков и генерация метатегов;
  • поддержка Google Analytics;
  • встроенный API, который позволяет дорабатывать плагины под себя;
  • и другая функциональность для SEO.

Совместимость с PHP 7. Совместим с версиями WordPress вплоть до свежей 4.9.8 версии от 03.08.18. Минимальное требование — версия WordPress от 4.4.

Autoptimize
AutoptimizeAutoptimize

Настройки плагина Autoptimize

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

  • оптимизация JavaScript и CSS;
  • исправление кода, блокирующего отображение верха страницы.
  • кэширование и объединение скриптов и стилей;
  • работа с заголовками;
  • перемещение скриптов в нижний колонтитул;
  • упрощение HTML.

Совместим с версиями WordPress вплоть до свежей 4.9.8 версии от 03.08.18. Минимальное требование — версия WordPress от 4.0.

Yandex.News Feed by Teplitsa

Плагин упрощает интеграцию сайта с Яндекс.Новостями, включая поддержку турбо. Возможности:

  • трансляция контента для Яндекс.Новостей;
  • поддержка режима Турбо Страниц.
  • настройка категорий, которые попадут в трансляцию;
  • и другие настройки RSS-ленты для Яндекс.Новостей.
Yandex.News Feed by TeplitsaYandex.News Feed by Teplitsa

Плагин Yandex.News Feed by Teplitsa

Плагин имеет минимум необходимых настроек. Минимальное требование — версия WordPress от 3.9. Смотрите другие плагины для турбо-страниц яндекса тут.

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

И последнее. Очищайте базы данных.

При выполнении любого действия на сайте, удаление или добавление записей, новостей, комментариев, меняя настройки, устанавливая новые плагины, база данных сохраняет об этом всю информацию. Ее следует постоянно чистить. А точнее хотя бы раз в неделю. В этом поможет плагин. В WordPress, в репозитории, можно найти огромный выбор плагинов, чтоб чистить базу данных. К примеру, плагин WP-Optimize поможет провести очистку всего в один клик.

По материалам: pr-cy.ru


20+ способов как ускорить загрузку сайта на WordPress в 2019 году

Ускорить работу сайта на WordPress в 2019 году, не меняя любимый хостинг очень просто. Но прежде чем приступить к мероприятиям по оптимизации скорости, проясните для себя два момента:

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

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

Готовы? Тогда начнем.

Как ускорить работу сайта на WordPress, не меняя  хостинга

1. Удалите или отключите ненужные плагины

Лишние плагины и приложения могут СУЩЕСТВЕННО замедлить работу сайта, особенно если он реализован на таких платформах, как WordPress, Joomla или Drupal.

Так, согласно данным одного исследования, плагины могут увеличивать время загрузки сайта на целых 86%! То есть, сайт, на загрузку которого требовалось 4,23 секунды, после удаления ненужных плагинов сможет загружаться всего за 1,33 секунды.

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

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

Если ваш ресурс создан на WordPress установите плагин P3 (Plugin Performance Profiler), отслеживающий производительность сайта.

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

2. Уберите или существенно сократите количество кнопок социальных сетей на сайте

Вы уверены, что вам нужна сотня кнопок «Поделиться» в различных соцсетях? Если так, то вам есть о чем задуматься. Установить связь между наличием подобных кнопок и существенным притоком трафика на сайт довольно сложно. А вот то, что из-за медленно работающего сайта трафик снижается, уже было доказано. В любом случае, слишком большое количество кнопок социальных сетей может смущать посетителей.

Большинство кнопок «Поделиться» реализованы на JavaScript, что может не лучшим образом сказаться на производительности сайта. Не раз случалось, что из-за перебоев в работе Facebook и других социальных сетей, значительно снижалась скорость загрузки сайтов, установивших соответствующие кнопки.

Чтобы избежать подобных проблем, ограничьте количество кнопок соцсетей или вовсе уберите их. Еще вариант – настроить сайт так, чтобы кнопки разных социальных сетей не подгружались одновременно.

Уберите или существенно сократите количество кнопок социальных сетей на сайте

3. Загружайте коды аналитики и рекламных сетей асинхронно

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

Загружайте коды аналитики и рекламных сетей асинхронно

4. Используйте HTTP-заголовки Expires

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

Заголовки Expires сообщают браузерам посетителей, когда запрашивать те или иные файлы с вашего сервера, а когда – из кэш-памяти. Если заголовки Expires настроены на то, что файл будет запрашиваться только раз в месяц, и этот файл хранится в кэше с прошлого визита, то браузеры не будут снова запрашивать данный файл с сервера, пока не закончится месяц. Получается двойной эффект: ограничивается количество HTTP-запросов к вашему серверу, и в то же время сокращается нагрузка на сервер, поскольку один и тот же файл не будет запрашиваться повторно.

5. Используйте кэширование

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

Использование кэширования существенно влияет на скорость работы сайта. Исследования показали, что при полном кэшировании время загрузки сайта может сократиться с 2,4 до 0,9 секунд – это отличный показатель!

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

6. Поменяйте веб-хостинг

Мы не собирались об этом говорить, но все же…

Если все ваши попытки ускорить работу сайта не приносят результата, или же результат едва заметен, возможно, пришла пора сменить веб-хостера.

Хостинг-провайдер LandingHost.ru предлагает не дорогой веб-хостинг для ваших сайтов, наши тарифы:

Сравнить тарифы

Заказывая хостинг у нас, вы получаете:

  1. Бесплатный конструктор сайтов
  2. Бесплатный SSL сертификат с автоматической перегенерацией
  3. Выбор версии PHP (Apache, LSAPI, CGI, FastCGI) с поддержкой файла .htaccess
  4. Ежедневное полное резервное копирование сайта
  5. Защита от DDoS-атаки
  6. Поддержка протокола HTTP/2
  7. Бесплатный почтовый клиент Roundcube
  8. Shell-доступ
  9. Безопасный SSH-протокол
  10. И многое другое

7. Используйте тему оформления сайта с «чистым» кодом

Влияет ли тема оформления сайта на скорость его работы? Еще как! Просто поменяв тему, можно уменьшить скорость загрузки сайта в 3,6 раз! Таковы данные реального исследования, в ходе которого пользователю удалось сократить время загрузки сайта с 630 до 172 миллисекунд. При этом кроме темы оформления сайта, ничего не поменялось.

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

8. Установите на вашем сервере программу PageSpeed от Google

Модуль PageSpeed – это серверный инструмент с открытым исходным кодом от компании Google. Он автоматически оптимизирует скорость вашего сайта, внося изменения в серверную часть и в файлы, – то есть, делает производительность сайта максимально возможной, не требуя от вас никаких дополнительных действий.

Если вы технически подкованы, установите сервис PageSpeed самостоятельно, если же нет – обратитесь за помощью к своему хостинг-провайдеру или разработчикам программного обеспечения.

9. Оптимизируйте и уменьшайте размер картинок

Неоптимизированные изображения могут «весить» очень много, а значит, они будут задействовать большое количество ресурсов сервера и медленнее загружаться. Если средний размер картинок на вашем сайте составляет 1-2 МБ или более, вам предстоит серьезная работа. Существенно уменьшить размер изображений без потери качества можно с помощью следующих инструментов:

10. Используйте сжатие файлов с помощью gzip

Вероятно, вы уже пробовали сжимать файлы на своем компьютере и знаете, насколько меньше места они могут занимать. Например, файл размером 60 МБ можно «ужать» всего до 5 МБ. Сжатие с помощью программы gzip работает так же, только в отношении сайтов: файлы сайта сжимаются и автоматически упаковываются в zip-архив. В итоге освобождается место, и увеличивается скорость работы сайта.

Так, был зафиксирован случай, когда размер сайта сократился с 68 до 13 КБ – исключительно благодаря использованию gzip.

11. Регулярно оптимизируйте базу данных

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

12. Минифицируйте файлы JavaScript и CSS

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

Например с помощью плагина Autoptimize:

Минифицируйте файлы JavaScript и CSS

13. Объедините фоновые изображения в спрайты

Чем больше запросов браузеры посетителей посылают на ваш сервер, тем медленнее работает ваш сайт на их компьютерах. Большинство шаблонов сайтов состоят из многочисленных фоновых картинок, что приводит к созданию нескольких запросов всякий раз, когда посетители загружают сайт. Чтобы решить эту проблему, нужно объединить все изображения в одно (спрайт) – тогда, в процессе загрузки сайта, браузеры пользователей будут посылать лишь один запрос.

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

14. Используйте HTTP Keep-Alive

Обычно, когда браузер посетителя запрашивает файлы с вашего сервера, передача каждого файла осуществляется по отдельности. Иначе говоря, как только браузер загрузил файл, связь с сервером прерывается, а затем возобновляется, чтобы запросить следующий файл. При этом увеличивается нагрузка на процессор и сеть, и задействуется больше памяти, что в итоге замедляет работу сайта. После установки заголовка Keep-Alive для всех HTTP-запросов будет использоваться только одно соединение, что снизит нагрузку на сервер и позволит значительно повысить производительность сайта.

15. Исправьте все нерабочие ссылки на сайте

Нерабочие ссылки в текстах сайта не влияют на скорость его работы, разве что расстраивают пользователей. А вот «битые» ссылки в адресах JavaScript, CSS и изображений способны сделать загрузку сайта раздражающе медленной. Просканируйте сайт на наличие нерабочих ссылок и исправьте их прежде, чем распугаете посетителей.

Например с помощью плагина Broken Link Checker:

16. Избегайте хотлинкинга изображений

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

Поэтому, решив использовать какие-либо картинки (будь то иллюстрации к текстам или изображения для рекламных баннеров), разместите их на своем сервере, а уже потом давайте ссылки.

Защититься от хотлинкинга изображений в WordPress можно вставив в файл htaccess следующий код:

RewriteEngine on
	RewriteCond %{HTTP_REFERER} !^$
	RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Или воспользоваться плагином для WordPress, например:

17. Ограничьте количество внешних запросов

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

Отлично эту задачу решают серверы с HTTP/2

На серверах хостинг-провайдера LandingHost.ru по умолчанию включён протокол HTTP/2 для всех сайтов.

Не теряйте время на поиски лучшего хостинга для своего сайта! Вы его уже нашли!

18. Выбирайте надежную CMS

Система управления контентом – это каркас вашего сайта. Если вы используете простой шаблон HTML или такие популярные и надежные CMS, как WordPress, Drupal, Joomla, MODX и т.д. то беспокоиться не о чем. Однако, если вы предпочитаете менее известный или самостоятельно созданный движок, то рискуете столкнуться с проблемой медленно работающего сайта. Исследуйте этот вопрос, проведите соответствующие тесты, чтобы убедиться, что выбранная вами CMS будет работать быстро и надежно.

19. Используйте PHP-акселератор

PHP избавляет от необходимости многократно вводить на сайте одни и те же данные, но может увеличивать время загрузки сайта. Эту проблему можно решить двумя способами: по возможности заменить PHP-файлы статичными HTML-файлами, или же, если ваш сайт написан в основном на PHP, ускорить его работу с помощью PHP-акселератора.

20. Не допускайте хотлинкинга ваших изображений

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

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

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

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

Оптимизация скорости загрузки сайта | WordPress Mania

(Последнее обновление: 15.05.2019)

Привет, друзья! Оптимизация скорости загрузки сайта продолжается, Google рекомендует — мы подчиняемся и выполняем. В предыдущем посте мы с вами занимались автоматическим сжатием изображений в WordPress, а сегодня давайте посмотрим, какие предложения/рекомендации по оптимизации страниц от PageSpeed Insights мы ещё можем выполнить. Добиться показателей в 100% нам не по силам, но приблизиться к зелёной зоне или попасть в неё мы в состоянии. Хотя многое зависит от вашей темы/шаблона. Есть такие темы, что оптимизировать почти ничего не надо. Одни говорят, что шаблоны такие существуют, а другие говорят — что это фантастика.

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

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

Напомню вам, что я создал новый сайт, установил сложную тему Newspaper с дизайном Бизнес и теперь выполняю рекомендации Google по оптимизации скорости загрузки страниц (из за этого, снова затронута тема оптимизации сайта WordPress). После проделанной мной работе над сайтом — результаты есть (для мобильных 78, комп 84, было около 40) и есть к чему стремиться в дальнейшем.

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

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

Важно! Перед тем, как проверять свой сайт на скорость загрузки в PageSpeed Insights нужно убрать рекламу с сайта (после вернёте её назад), удалить не нужные плагины. После этого, можно тестировать свой веб-ресурс. Как выше написано, с картинками мы разобрались, хотя о них ещё будет сказано ниже, теперь перейдём к рекомендации — Сократите CSS:

Сократите код CSSСократите код CSS

Сократите CSS

Как сократить код CSS?

Делается это очень легко и просто. PageSpeed Insights уже позаботился об этом — Примененные приемы оптимизации. Вам надо лишь «Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы». Нажав на соответствующею ссылку -изображения, ресурсы JavaScript и CSS. Файлы загрузятся на ваш жесткий диск в архиве, с названием optimized_contents. Распакуйте архив и вы там найдёте нужные нам папки:

Папка CSSПапка CSS

Папка с файлом CSS

Нас интересует в данный момент папка CSS, там оптимизированный файл style для вашего шаблона, который вы тестировали. Открываете файл style с помощью отличной программы Notepad++:

Оптимизированный код CSSОптимизированный код CSS

Готовый оптимизированный код CSS

Оптимизированный код CSS это — удалены комментарии из CSS, новые и пустые строки, двойные пробелы, табуляции и так далее (на скриншоте сразу видно). Далее, вам остаётся теперь заменить стили шаблона на оптимизированные. Я делал эту операцию сразу в своей админке, легко и просто. В разделе — Внешний вид, нажимаем — Редактор. Всегда открывается файл style.css вашей темы, по крайней мере у меня всегда так. В примере взята тема Twenty Sixteen:

Таблица стилей (style.css)Таблица стилей (style.css)

Twenty Sixteen: Таблица стилей (style.css)

Вот этот код нам нужно заменить на оптимизированный. Можете, если не любите рисковать, сначала сделать копию оригинала CSS, а потом заменить стили. Обновляете файл и снова проверяете сайт в PageSpeed Insights. Одно из предложений — Сократите CSS — исправлено:

Таблица стилей (style.css)Таблица стилей (style.css)

Предложение Сократите CSS — исправлено

Что касается — скачанных оптимизированных изображений — папка image, то данным предложением можно воспользоваться, если картинки у вас маленькие. Если большие, то это не подойдёт. PageSpeed Insights их размер слишком уменьшает. Самый лучший вариант, это загружать фотки для статьи сразу оптимизированные/сжатые. Для этого, можно использовать программу Photoshop или специальные проги и сервисы (смотрите набор тут) и тогда нам не придётся устанавливать лишний плагин для сжатия картинок.

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

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


Поделиться в социальных сетях

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

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