Компьютерный мастер - Allcorp66

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

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

Выбор хорошего хостинга

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

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

CDN

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

Кэширование

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

Минификация CSS и JS файлов

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

Сжатие изображений

Помимо того, что большие файлы изображений значительно замедляют сайт на WordPress, они еще сильно забивают пропускную способность сети. Изображения это отличный подопытный для оптимизации. Используйте WPMU DEV WordPress Smush API, плагин WP SmushIt поможет уменьшить размер изображений без потери качества. Я сам пользуюсь этим плагином и считаю удивительным то, насколько он снижает размер изображений.

Сжатие сайта

Простыми словами сжатие сайта похоже на запаковку сайта в ZIP архив. И в случае запроса пользователем любой страницы, браузер ведет себя как WinRAR, распаковывает архив и отображает контент. Звучит, как что-то ненужное, что помимо всего прочего еще и замедлит ваш сайт. Поверьте мне, не замедлит.

Плагин W3 Total Cache крайне популярен для кэширования, но с его помощь можно также сжимать сайты. Воспользоваться данной функцией можно, перейдя: admin page -> Performance -> Browser Cache -> Enable HTTP (gzip) Compression.

Оптимизация базы данных

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

Также как и ваш жесткий диск может стать фрагментированным, базы данных WordPress страдают от того же недуга. Тем не менее, для оптимизации базы данных можно воспользоваться плагином WP-Optimize или WP-DB Manager. С помощью последнего плагина можно не только оптимизировать базу данных, но и установить расписание для регулярной проверки.

Выбор правильных плагинов

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

Отключение пингбеков и трекбеков

По умолчанию, когда другой сайт упоминает о вас, ваш сайт получает об этом уведомление. Такие уведомления называются пингбеки и трекбеки. Их можно отключить: admin page -> settings -> discussion снимите две верхние галочки, как на скриншоте ниже.

Отключение данной функции не навредит вашему сайту.

Выбор правильной темы или темы-фреймворка

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

Оптимизация структуры домашней страницы

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

Включение Keep-Alive

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

Скорость работы сайта очень важна не только для пользователей, но и для поисковых систем, которые в свои алгоритмы включили и данный показатель. Если ваш ресурс грузится, к примеру, секунд 10 и страница «весит» много, есть все шансы, что сайт или определенная продвигаемая страница не попадет в ТОП-10. По мнению Googleи любых других крупных поисковых систем этот показатель очень важен, особенно сейчас – в 2014 году, когда у вебмастеров имеется куча инструментов для «облегчения» сайта в пару кликов и быстрый интернет повсюду.

Самыми легкими являются сайты на голом HTML, но их функциональность оставляет желать лучшего. Используются ресурсы подобного рода уж в очень специфических ситуациях, когда предполагается, что контент менять в ближайшие годы не придется. Например – сайт какой-то фирмы с описанием услуг и телефоном, сдает хозяин 3 квартиры, их фото поместил на 1-2 страницы и оставил свои телефоны. Что ещё нужно потенциальному клиенту, особенно, если речь идет о небольшом городе…

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

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

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

Начнем с «проверки» ресурса. Для начала я определю – сколько времени требуется «в среднем» для загрузки главной страницы. Если у вас есть необходимость проверить другую страницу на скорость загрузки – это тоже можно сделать без проблем.

Проверка скорости работы сайта сервисом WebWait

Адрес сервиса webwait.com

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

Как видите, я проверил 2 ресурса. Первый – известный в кругах «вордпрессеров» ресурс, на котором распространяют модули, темы и многие другие полезные «плюшки» для данной CMS, второй сайт – одностраничный сайт на WordPress с минимумом графики и текстом. Показатели хорошие у двоих – 2.45 считается нормальным временем, если у вас 3-4 и более секунды, тогда читайте далее, на что же обратить внимание и как ускорить WordPress с помощью специальных инструментов.

Переходим к «ускорению» WordPress:

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

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

Мой данный сайт грузится вот так

Как видите меньше двух секунд это хороший показатель и советую вам стремится к нему.

Wordpress в стандартной установке довольно медленный. По умолчанию движок не использует некоторые возможности современного Веба для значительного своего ускорения. Существует целая куча плагинов для оптимизации Wordpress"a. Давайте наведем в них порядок и проведем капитальную оптимизацию.

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

Результат 76 из 100 довольно низкий. Посмотрим, насколько можно увеличить этот показатель.

Серверная часть

Nginx
Если Вы еще не используете Nginx, пора переехать на него. Простое и мощное решение. Конфигурация для работы с поддержкой permalinks и кешированием статики:

Server { server_name wp.com; root /var/www/wp; # путь к WP index index.php; location ~* ^.+\.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ { access_log off; log_not_found off; expires max; # кеширование статики } location / { try_files $uri $uri/ /index.php?$args; # permalinks } location ~ \.php$ { fastcgi_pass unix:/var/run/php5-fpm.sock; fastcgi_index index.php; include fastcgi_params; } }

PHP кеш
Если у Вас нет каких-то особых причин, по которым Вы не можете установить APC, включайте его обязательно. Проверяем наличие APC (в ответ получим список настроек APC):

Php -i | grep apc

В версиях PHP после 5.5 есть встроенный модуль opCache, так что APC ставить не прийдется.

Тюнинг Mysql
Wordpress использует InnoDB, а это значит мы можем существенно увеличить производительность MySQL, подстроив ряд параметров (файл my.cnf) под наше железо:

Размер буфера InnoDB лучше поставить в половину доступной оперативной памяти:

Innodb_buffer_pool_size = 256M

Не забываем включить кеширование MySQL:

Query_cache_size = 32M query_cache_limit = 1M

Более расширенная настройка MySQL для Wordpress.

Кеширование

Это наиболее важный пункт. Кеширование может дать значительное ускорение сайта и экономию ресурсов сервера. Для наглядности будем использовать ab от Apache . Проверим стандартную установку Wordpress без кеширования. Запросы направляем через локальную сеть, поэтому задержку ничего, кроме самого Wordpress"a не создает:

Ab -c 10 -n 500 http://wordpress/

Получаем среднее время на запрос около 50мс:

Total transferred: 4183000 bytes HTML transferred: 4074500 bytes Requests per second: 17.62 [#/sec] (mean) Time per request: 567.421 (mean) Time per request: 56.742 (mean, across all concurrent requests) Transfer rate: 143.98 received

Хром показывает среднее ожидание ответа на уровне 150мс (сервер находится в Нидерландах):

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

С включенным WP Super Cache получаем уменьшение среднего времени на запрос в 25 раз(!):

Total transferred: 4293500 bytes HTML transferred: 4146500 bytes Requests per second: 499.01 [#/sec] (mean) Time per request: 20.040 (mean) Time per request: 2.004 (mean, across all concurrent requests) Transfer rate: 4184.61 received

Cреднее ожидание ответа в Хроме уменьшилось в 3 раза:

В качестве серверной альтернативы WP Super Cache можно использовать Varnish . Он позволяет снизить время на обработку запроса еще почти на порядок, но само решение менее гибкое (хорошо подойдет для блогов без элементов динамики).

Стили, скрипты и картинки

Минификация и сжатие
Минификация CSS/JS может сэкономить 10...15% их размера. Для включения минификации статики есть модуль WP Minify . Качайте, активируйте и модуль начнет работать. Gzip позволит уменьшить размер текстовых файлов в несколько раз. В Nginx"e включается так:

Server { ... gzip on; gzip_disable "msie6"; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript; ... }

Оптимизация картинок
Картинки могут составлять очень большую часть общего размера страницы. Lossless сжатие картинок может сэкономить 30...40% их размера. Это умеет делать модуль EWWW Image Optimizer . Для его работы понадобится установить imagemagick и библиотеку gd:

Apt-get install imagemagick php5-gd

Хорошие практики и опыт

  • Лучше всего выбирать VPS для хостинга Wordpress. На Shared хостинге многое из описанного выше сделать невозможно. Кроме этого, VPS сейчас достаточно дешевый.
  • Проверяйте темы с помощью Pagespeed перед использованием
  • Очищайте корзину
  • Удаляйте старые ревизии постов
  • Удаляйте спам-комментарии
  • Отключайте трекбеки в моменты, когда все становится совсем медленно
  • Раздавайте RSS через feedburner

В результате

У нас получилось голую установку Wordpress разогнать почти в 100 раз по времени генерации страницы (мы включили Varnish) и увеличить показатель по Pagespeed с 76 до 93:

WordPress – отличная CMS для сайта, но она довольно медленная из коробки, если ее не оптимизировать правильно. В этом руководстве, составленном KeyCDN, мы рассмотрим основные способы оптимизации и ускорения сайта на WordPress.

WordPress также одна из самых популярных CMS для сайтов компаний. Более половины сайтов, на которых можно определить систему управления контентом, работают на WordPress. А это более чем 74 миллиона сайтов.

По данным W3Techs , WordPress используется на 60% сайтов с известной CMS. Это 31,6% всех сайтов в мире.

Инструменты для измерения скорости сайта

Один из самых важных инструментов при работе над оптимизацией скорости сайта — тестировщики скорости загрузки (page speed tool). Мы рекомендуем проводить измерения перед началом работ по оптимизации, и в процессе, после каждого внесенного изменения. Это даст лучшее понимание, изменения каких параметров оказывают положительное или отрицательное влияние на производительность.

Есть много инструментов для проверки скорости загрузки сайта, среди которых KeyCDN, который предлагает тесты из 16 точек по всему миру.

Важность скорости работы сайта в 2018 году

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

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

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

Ограничение количества редакций записей в WordPress

Для того, чтобы ограничить количество редакций записей в WordPress, достаточно добавить следующий код в файл wp-config.php . Он изменит интервал автосохранения записей с 60 секунд до 5 минут и установит количество сохраняемых редакций до трех. Можно задать количество ревизий любым числом.

Define("AUTOSAVE_INTERVAL", 300); // seconds define("WP_POST_REVISIONS", 3);

Удаление старых редакций записей из базы данных WordPress

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

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

Следите за ограничением на 100 страниц в WordPress

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

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

Решением этой проблемы может быть использование кастомных типов постов. Для этой задачи можно использовать бесплатный плагин Post Type Switcher , если нужно большое количество страниц конвертировать в пользовательские типы записей.

5. Оптимизация изображений с помощью сжатия

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

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

6. Сжатие Gzip/Brotli

Gzip это еще одна технология сжатия, которая используется для сжатия страниц, стилей и скриптов на уровне сервера перед отправкой браузеру. Проверить, работает ли сжатие Gzip на сайте WordPress можно с помощью сервиса Check GZIP Compression .

Apache

Настроить сжатие на сервере Apache можно, добавив следующий код в файл.htaccess

# Compress HTML, CSS, JavaScript, Text, XML and fonts 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 AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0 no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent

Nginx

Если вы используете веб-сервер Nginx, сжатие активируется путем включения следующих инструкций в файл настроек nginx.conf .

Gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_disable "MSIE .(?!.*SV1)"; gzip_vary on;

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

7. Уменьшение количества плагинов WordPress

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

Есть плагины, которые позволяют оценить степень влияния установленных плагинов на скорость работы сайта, но они устарели и не поддерживаются разработчиками. Это плагины P3 Plugin Performance Profiler и WP Performance Profiler

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

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

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

8. Оптимизация производительности веб-шрифтов

По данным исследований, в 2018 году 57% сайтов используют не стандартные шрифты, это рост на 850% по сравнению с 2011 годом. Очень важно использовать только те шрифты, которые нужны, в форматах WOFF и WOFF2. Сервисы типа Typekit base64 преобразуют шрифты во все возможные форматы, замедляя тем самым скорость загрузки сайта.

По результатам тестов, шрифты Google показывают хороший уровень производительности, потому что используют CDN для загрузки и предоставляются только в форматах WOFF. Open Sans — самый быстрый из 10 популярных шрифтов.

Важно также помнить о разнице между шрифтами Google и безопасными веб шрифтами, она может достигать 200 мс. Это преимущественно из-за скорости загрузки и дополнительных HTTP запросов к серверам Google.

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

Можно пойти еще дальше и поместить все шрифты в отдельный css файл и хранить их в localStorage. Браузерный кэш сбрасывается довольно часто, особенно на мобильных устройствах. А сохраняя файлы в localStorage, можно хранить их у пользователя постоянно. Smashing Magazine сэкономили 700 мс при загрузке страницы с помощью localStorage .

Рекомендуем использовать сервис localFont tool от Jaime Caballero. Можно перетащить свой шрифт в окно и конвертировать его в CSS и Javascript для размещения на сайте WordPress.

9. Оптимизация иконок Font Awesome

Если вы используете Font Awesome, можно ускорить их загрузку, поместив файлы на CDN. Если вы используете тему WordPress с Font Awesome, ее придется немного доработать.

Хранение Font Awesome на своей CDN уменьшит количество запросов к серверу и поисков DNS.

10. Lazy Load для изображений, видео и Disqus

Lazy loading – это технология загрузки объекта только в тот момент, когда он нужен. В случае WordPress это означает, что элемент не загружается до тех пор, пока пользователь не прокрутит страницу до него. Lazy load можно применить для любых элементов страницы, от изображений и видео, до блока комментариев Disqus.

Отложенная загрузка изображений

Для отложенной загрузки картинок на сайте WordPress можно использовать хороший бесплатный плагин BJ Lazy Load . Он заменяет все изображения, ярлыки и фреймы на странице плейсхолдерами и загружает контент по мере приближения его к границе окна при прокрутке пользователем. Это также работает и для текстовых виджетов. Если вы пользуетесь плагином WP Rocket, в нем есть настройки для включения Lazy Load.

Отложенная загрузка видео

Для отложенной загрузки видео на WordPress можно использовать бесплатный плагин Lazy Load for Videos . Он заменяет встроенное видео Youtube и Vimeo кликабельным изображением превью. Если у вас на сайте много видео, этот плагин поможет значительно улучшить скорость загрузки страниц.

Отложенная загрузка Disqus

Disqus – это очень удобная система комментирования, которая очень хорошо борется со спамом. Но стандартный плагин Disqus создает более 10 HTTP запросов, которые могут значительно замедлить загрузку страницы. Чтобы решить эту проблему, разработчик James Joel сделал плагин Disqus Conditional Load , который откладывает загрузку Disqus. Он в том числе не вредит SEO, то есть поисковые системы все равно могут индексировать комментарии.

11. Минификация и объединение CSS и Javascript файлов

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

Минификация

Минификация файлов означает удаление лишних символов из файлов HTML, Javascript, и CSS, таких как:

  • Пробелы
  • Переносы строки
  • Комментарии
  • Разделители блоков

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

Объединение (конкатенация)

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

Для минификации и конкатенации файлов в WordPress можно использовать плагины, например, WP Rocket

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

12. Уменьшение количества HTTP запросов

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

Рассмотрим несколько важных способов по уменьшению количества запросов к серверу.

Граватары

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

Есть несколько способов решения этой проблемы.

Вариант 1 — отключить граватары

Можно просто отключить все граватары пользователей, и использовать локальные аватары. Не идеальное решение, но рабочее.

Для этого нужно установить бесплатный плагин WP User Avatar . И в настройках включить опцию «Отключить Граватары и использовать только локальные аватары»

Вариант 2 – использовать Disqus

Можно использовать комментарии Disqus вместе с плагином lazy load Disqus . Кажется странным, что подключать дополнительный плагин, скрипты, делать вызов к сторонним сервисам предпочтительнее использования родного функционала. Но если сравнить скорость на записи с 5 или более комментариями, окажется, что Disqus быстрее из-за меньшего количества HTTP запросов.

Отключение Emoji

С выходом WordPress 4.2 появилась поддержка Emoji. Это привело к добавлению лишнего скрипта wp-emoji-release.min.js?ver=4.3.1 в хедере. Этот скрипт создает дополнительный HTTP-запрос, от которго нужно избавиться, если вы не собираетесь использовать Emoji.

В инструкции ниже покажем, как отключить Emoji и избавиться от лишнего HTTP запроса.

В настройках «Написание» отключите “convert emoticons”.

Вариант 1 – WordPress плагин

Установите бесплатный плагин для WordPress “Disable Emojis ” by Ryan Hellyer. Этот плагин отключает функционал emoji в WordPress 4.2.

Вариант 2 – функция WordPress

Чтобы не перегружать сайт лишними плагинами, можно избавиться от emoji путем добавления в functions.php следующего кода:

/** * Disable the emoji"s */ function disable_emojis() { remove_action("wp_head", "print_emoji_detection_script", 7); remove_action("admin_print_scripts", "print_emoji_detection_script"); remove_action("wp_print_styles", "print_emoji_styles"); remove_action("admin_print_styles", "print_emoji_styles"); remove_filter("the_content_feed", "wp_staticize_emoji"); remove_filter("comment_text_rss", "wp_staticize_emoji"); remove_filter("wp_mail", "wp_staticize_emoji_for_email"); add_filter("tiny_mce_plugins", "disable_emojis_tinymce"); } add_action("init", "disable_emojis"); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce($plugins) { if (is_array($plugins)) { return array_diff($plugins, array("wpemoji")); } else { return array(); } }

Отключение скриптов на странице

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

Отключаем Embeds

С версии 4.4 в WordPress загружается новый скрипт wp-embed.min.js , который позволяет упростить вставку видео, изображений, твитов, и т.п. Например, WordPress автоматически преобразует URL в YouTube вставку и сделает превью в визуальном редакторе. Но не всем нужна подобная функция, можно просто скопировать готовый код для вставки с YouTube или Twitter. Проблема с этой функцией в том, что она загружает свой скрипт на каждой странице. Есть несколько способов избавиться от него.

Вариант 1 – WordPress плагин

Установите WordPress плагин “Disable Embeds ” by Pascal Birchler. Он делает следующее:

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

Вариант 2 – функция WordPress

Можно добавить следующий код в файл functions.php, это отключит функцию вставки.

// Remove WP embed script function speed_stop_loading_wp_embed() { if (!is_admin()) { wp_deregister_script("wp-embed"); } } add_action("init", "speed_stop_loading_wp_embed");

Отключаем комментарии

Независимо от того, используете вы или нет систему комментариев WordPress, скрипт comment-reply.min.js подключается на каждой странице сайта. Это не всегда оправдано, на сайте могут быть не нужны комментарии вообще или подключен Disqus. Тогда можно отключить этот ненужный скрипт.

Для этого можно добавить следующий код в файл functions.php .

// Remove comment-reply.min.js from footer function comments_clean_header_hook(){ wp_deregister_script("comment-reply"); } add_action("init","comments_clean_header_hook");

13. Отключение хотлинков

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

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com RewriteRule \.(jpg|jpeg|png|gif)$ –

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

14. Отключение Pingback и Trackback

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

Отключить pingback и trackback можно в настройках обсуждения. Это изменение коснется только новых записей.

15. Задание размеров изображений

Optimization suggestion: “By compressing and adjusting the size of … you can save 5.8 KB (51%).”

Эти рекомендации относятся к изображениям на сайте, которые масштабируются браузером. Например, если изображение имеет ширину 500 пикселей, а на странице помещено в колонку шириной 400 пикселей. В результате оно будет уменьшено до 400 пикс.

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

16. Решение проблемы медленной загрузки admin-ajax.php

В WordPress 3.6 бал представлен WordPress Heartbeat API , который позволил WordPress общаться с сервером и браузером. Это улучшило управление сессиями, контроль ревизий и автосохранение.

WordPress Heartbeat API использует admin-ajax.php для AJAX запросов из браузера. Это может привести к повышенной нагрузке на процессор и большому количеству вызовов PHP. Например, если оставить открытой страницу с админкой, она будет посылать POST запросы к этому файлу постоянно с заданным интервалом.

Существует бесплатный плагин Heartbeat control , который позволяет задать частоту обращений WordPress heartbeat API.

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

Таким образом можно вычислить, какой плагин выполняет запрос. В этом примере это был плагин соцсетей, для которого не было включено кэширование. Как только кэширование плагина активировали, постоянные обращения к admin-ajax.php прекратились.

17. Настройка MySQL сервера

Оптимизация работы сервера баз данных MySQL также очень важна для быстрой работы сайта на WordPress. Настройки MySQL в большой степени зависят от конфигурации серверного окружения на вашем хостинге, поэтому нет универсальных рекомендаций по оптимизации MySQL. Обычно настройки MySQL/MariaDB находятся в файле /etc/my.cnf . Вот несколько параметров, на значение которых стоит обратить внимание:

  • tmp_table_size
  • query_cache_type
  • query_cache_size
  • query_cache_size
  • join_buffer_size
  • max_heap_table_size

Очень полезный инструмент — скрипт MySQL Tuner . Он делает обзор производительности сервера и дает некоторые базовые рекомендации по возможной оптимизации. Вот еще несколько инструментов, которые могут пригодиться при настройке MySQL:

18. Выбор качественного хостинга для WordPress

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

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

Оригинал статьи — https://www.keycdn.com/blog/speed-up-wordpress/

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

Однако если ваш сайт установлен на WP, то эта статья будет очень полезна для вас. Я раскрою все секреты, как ускорить сайт на WordPress за 10 шагов. Но прежде, чем приступать к ускорению сайта, давайте посмотрим, какая у нас скорость загрузки страниц?

Несколько отличных сервисов для проверки скорости сайта:

  1. — простой инструмент от Гугл, который показывает все ошибки, мешающие загрузить сайт быстро. Он нам нужен, только для того, что бы узнать основные ошибки для исправлений.
  2. — навороченный инструмент, который наглядно показывает, как загружается каждый элемент вашего сайта и сколько времени на это затрачивается. А так же вы узнаете, как пользователи видят ваш сайт по секундам.

Многие проверяют скорость только главной страницы — это ошибка! Всего 10% посетителей увидят вашу главную страницу, все остальные люди будут читать статьи.

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




В сервисе WebPageTest обязательно нажимайте на кнопку waterfall, что бы получить все данные в форме водопада. Это даст нам данные о TTFB (скорости передачи первого байта от хостинга) и путь рендеринга (когда пользователь получает отображенный сайт).

10 шагов по ускорению WordPress

1. Скорость хостинга — TTFB

Быстрый и качественный хостинг позволяет молниеносно передавать мегобайты данных о вашем сайте пользователям. Но как определить скорость и качество хостинга?

Переходим к анализа скорости сайта на WebPageTest. Стрелочкой я показал, за какой промежуток времени мой хостинг начинает передавать данные (первый байт информации или TTFB).Время составило 0,303 секунды, что достаточно хороший результат. Быстрый хостинг всегда показывает результаты от 0,2 до 0,4 сек — идеальные показатели!

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

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

2. Настройка WordPress

WordPress по какой-то причине передает много лишней информации из-за чего сайт не реально тормозит, особенно при большой посещаемости. Наша цель правильно настроить WP и убрать всё лишнее.

Первые делом переходим в административную панель > «настройки» > «написание» и убираем 2 галочки.Потом переходим во вкладку «обсуждение» и убираем галочки так же с двух пунктов. При желание в этой вкладке можно отменить пункт «показывать аватарку» это дает ускорение страниц на 10%, где есть аватарки.

Последнее, что осталось сделать это защитить сайт от различных атак, которые могут сильно нагружать сервер и заставлять тормозить сайт. А владелец сайта может даже не подозревать, что сайт тормозит из-за постоянных атак.
Плагин All In One WP Security позволит отвести практический любую угрозу от вашего сайта. Он может предотвращать спам в комментариях, поменять страницу входа, установить файрволл, защитить файлы от взлома, защитить базу данных и поменять пароли и доступы к самым нужным файлам.

Ну а если вас заинтересовала тема полной защиты сайта, тогда рекомендую прочитать — .

Надеюсь, что данная статья будет полезна не только новичкам, но и профессионалам, которые решили значительно ускорить свой сайт. А какие результаты вышли у меня? Изначально сайт загружался за 12 секунд, мне удалось это время сократить до 3-ех секунд (загрузка последующих страниц менее секунды).

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
ПОДЕЛИТЬСЯ: