Быстрота загрузки страницы напрямую влияет на рейтинг вашего сайта в поисковых системах, количество посетителей, подписчиков и, конечно же, доход, который вы получаете. Если время загрузки слишком долгое, пользователи, как правило, уходят, не успев увидеть, что вы предлагаете и насколько привлекателен ваш дизайн. К сожалению, многие сайты на WordPress сталкиваются с проблемой низкой производительности. Но, к счастью, существуют простые шаги для оптимизации и ускорения вашего сайта. В этой статье мы расскажем, как это сделать.
Статья полезна тем, кто хочет ускорить свой сайт WordPress, но не знает, с чего начать.
Мы вместе рассмотрим распространенные проблемы, которые могут замедлить работу вашего сайта, и предоставим пошаговые инструкции по их устранению. В частности, я постараюсь объяснить, как оптимизировать скорость сайта WordPress с помощью плагинов, а также дам основные рекомендации по настройке веб-сервера. Исходя из моего опыта, эти шаги должны решить проблему в 90% случаев.
Конечно, для получения максимальной пользы от представленной информации, вы должны быть знакомы с WordPress и знать, как устанавливать плагины.
Здесь я хотела бы предостеречь вас о некоторых важных моментах. Ускорение работы сайта WordPress не всегда достижимо только с помощью плагинов. В некоторых ситуациях требуются более сложные подходы, такие как оптимизация кода и настройки сервера. Для этого потребуются базовые навыки программирования и системного администрирования. Однако в данной статье мы не будем углубляться в оптимизацию кода.
Кроме того, для оценки скорости загрузки страниц мы используем инструменты Google PageSpeed Insights и GTmetrix, которые являются самыми популярными на рынке.
Итак, давайте приступим к работе.
Почему ваш сайт на WordPress работает медленно?
Прежде чем я расскажу вам, как ускорить загрузку вашего сайта на WordPress, давайте разберемся, что может замедлять его работу. Вот несколько основных причин плохой производительности WordPress, которые я обнаружила:
-
Изображения и видео большого размера или их слишком много на одной странице. Я заметила, что когда на странице есть множество изображений или видео большого размера, это значительно замедляет загрузку сайта.
-
Чрезмерное количество ненужных плагинов WordPress. Раньше я использовала множество плагинов, но позже поняла, что они только замедляют работу сайта. Я начала удалять ненужные плагины и заменять их несколькими строками кода. Это существенно улучшило производительность.
-
Проблемы с кэшированием браузера и сервера. Я обнаружила, что у меня не были настроены правильные настройки кэширования, что приводило к медленной загрузке страниц.
-
Устаревшие плагины WordPress. Я столкнулась с проблемой устаревших плагинов, которые требовали регулярных обновлений. Когда я обновила их до последней версии, производительность сайта существенно улучшилась.
-
Слишком длинные веб-страницы. У меня были страницы, которые загружались полностью сразу, без метода отложенной загрузки. Я изменила этот подход и начала использовать отложенную загрузку, что помогло ускорить загрузку страниц.
-
Неправильная конфигурация сервера. У меня были проблемы с сервером, такие как отключенное сжатие и кэширование GZIP. Когда я настроила эти параметры правильно, это существенно улучшило производительность сайта.
-
Слишком много сторонних рекламных скриптов. У меня было множество рекламных скриптов, которые были настроены неправильно и замедляли загрузку страницы. Я начала удалять ненужные скрипты и оптимизировать оставшиеся.
-
Неоптимизированные файлы CSS и JavaScript. Я обнаружила, что некоторые файлы CSS и JavaScript не были оптимизированы, что замедляло загрузку сайта. Я начала минифицировать файлы и оптимизировать их загрузку.
-
Низкое качество кода. Я обнаружила, что у меня были неоптимизированы запросы к базе данных, что замедляло работу сайта. Я начала оптимизировать код и улучшать его качество.
Теперь, когда вы знаете, что влияет на производительность сайта на WordPress, я расскажу вам, как ускорить его работу.
Как подготовить ваш сайт на WordPress к оптимизации скорости страницы.
Перед тем как приступить улучшению времени загрузки страниц вашего веб-сайта, важно создать резервную копию базы данных и всех файлов. Это необходимо, потому что после оптимизации сайта могут возникнуть проблемы с его работой или он может функционировать некорректно. Это довольно распространенная ситуация, поэтому иметь возможность восстановить предыдущую версию сайта со всеми исходными настройками очень важно.
Также было бы идеально создать точную копию вашего сайта WordPress на тестовом сервере. Это позволит вам экспериментировать и не беспокоиться о возможных сбоях на основном сайте. Когда вы убедитесь, что все работает должным образом, вы сможете применить те же методы оптимизации к реальному сайту. В моем блоге есть статья о том, как сделать копию вашего сайта на WordPress.
Вторым шагом должно быть обновление всех плагинов WordPress и отключение тех из них, которые вы не используете. Рекомендуется проверять работоспособность сайта после каждого обновления, так как не всегда ясно, какие изменения могут повлиять на его функциональность.
Также важно знать, на каком веб-сервере размещен ваш WordPress. В этой статье мы рассмотрим два наиболее распространенных варианта - Apache и Nginx. Если вы не уверены, какой сервер у вас используется, вы можете легко проверить это. Просто включите режим разработчика и найдите соответствующие параметры на любой странице вашего сайта: F12 -> Сеть -> Документ -> Галочка «Обзор», далее перезагрузите страницу и вы увидите то, что на скриншоте ниже:
Если вы ничего подобного не видите, еще раз нажмите Сеть -> Документ -> Галочка «Обзор».
Поскольку настройки кэширования и сжатия сервера отличаются для Apache и Nginx, их нужно настраивать по-разному.
Важно отметить, что в некоторых случаях оба веб-сервера могут использоваться одновременно в одном решении: Apache обычно отвечает за маршрутизацию, а Nginx - за доставку файлов.
Как увеличить скорость загрузки страницы.
Для увеличения скорости загрузки вашего сайта WordPress необходимо решить проблемы, которые замедляют его работу. В общем, у вас есть два варианта: установить соответствующие плагины или настроить веб-сервер вручную. Я расскажу, как ускорить WordPress и решить конкретные проблемы, используя один из этих вариантов или оба (если это возможно).
Оптимизация изображений.
Это один из самых эффективных относительно простых способов ускорить загрузку WordPress. Для оптимизации изображений вы можете использовать плагины или интерфейс командной строки (CLI). Также есть возможность сжимать изображения вручную, загружая их через FTP (или другим способом), оптимизируя и затем снова загружая на веб-сайт. Однако мы с вами не будем рассматривать этот подход в данной статье.
Есть еще один важный момент, на который стоит обратить внимание, прежде чем мы перейдем к техническим деталям. Иногда Google PageSpeed Insights не обнаруживает проблемы, если изображение оптимизировано, но оно выглядит плохо на устройствах с высоким разрешением. Поэтому очень важно найти баланс между качеством и размером изображения.
Оптимизация изображений с помощью плагинов WordPress.
Для более оптимизированных изображений на вашем веб-сайте WordPress с целью улучшения SEO, вы можете использовать следующие плагины:
-
Regenerate Thumbnails. Этот плагин позволяет обновлять размеры изображений для всех файлов в медиатеке WordPress. Он также удаляет старые миниатюры изображений, которые больше не используются, освобождая место на сервере.
-
Optimus - WordPress Image Optimizer. Этот плагин автоматически оптимизирует и сжимает изображения во время их загрузки. Он сохраняет качество изображения, но бесплатная версия имеет ограничение размера изображения в 100 КБ.
Теперь давайте перейдем ко второму варианту.
Оптимизация изображений с помощью CLI.
Если упомянутые плагины WordPress по какой-то причине не подходят, у вас есть возможность выбрать одну из следующих утилит для оптимизации изображений:
-
JPEGoptim. Эта утилита позволяет оптимизировать изображения в формате JPEG и конвертировать их в файлы с прогрессивной разверткой без потери качества. Обычные изображения в формате JPEG загружаются по одной строке сверху вниз. В то же время, прогрессивный JPEG позволяет изображению появляться целиком, но последовательно в волнах. Таким образом, сначала вы видите размытое изображение, которое постепенно становится четким по мере загрузки. Благодаря прогрессивному формату JPEG посетители сайта могут получить общее представление об изображении, даже если загружена только небольшая часть файла.
-
OptiPNG. Это утилита для оптимизации файлов в формате PNG без потери качества. Она уменьшает размер изображения, удаляя ненужные функции из исходных файлов (например, полноцветность для черно-белых изображений).
Если вы правильно оптимизируете изображения с помощью плагинов или утилит WordPress, они должны успешно проходить тест PageSpeed. Однако иногда этого не происходит, поэтому вам может потребоваться использовать дополнительные методы оптимизации.
Как использовать PageSpeed Insights.
Если вы уже оптимизировали изображения, но Google PageSpeed Insights все еще указывает на них как на проблему, вы можете попробовать следующие методы:
Измените формат изображения. Например, вы можете использовать форматы SVG или WebP.
Используйте HTML элемент изображения <picture>. Это позволит браузеру выбирать наиболее подходящее изображение для конкретного размера и разрешения экрана, вместо загрузки одного и того же изображения для всех случаев.
На данном этапе мы рассмотрели основные методы оптимизации изображений. Теперь пришло время обсудить другие способы ускорения вашего сайта WordPress.
Решение проблем со скоростью загрузки страниц с помощью многофункциональных плагинов.
Для уменьшения задержки загрузки вашего сайта WordPress вы можете использовать многоцелевые плагины. Существуют четыре наиболее распространенных вариантов:
-
W3 Total Cache
-
WP Rocket
-
Autoptimize
-
Nitropack for WordPress
Важно отметить, что эти плагины для WordPress взаимозаменяемы, поэтому вам следует выбрать только один из них. Не рекомендуется использовать два плагина одновременно, как это делают некоторые отчаявшиеся пользователи.
Все три плагина осуществляют оптимизацию скорости загрузки страниц в следующих областях:
-
Кэширование. Это способ работы с данными, который временно сохраняет копии веб-файлов, чтобы они могли быть быстрее доступны при последующих запросах.
-
Сжатие сервера (сжатие GZIP). Когда посетитель заходит на веб-страницу, браузер загружает множество файлов с разными расширениями. Чем больше их размеры, тем дольше загружается содержимое страницы. GZIP - это технология сжатия файлов .HTML, .XML, .JS и .CSS, что сокращает время ответа сайта.
-
Минификация. Это процесс удаления ненужных данных (например, пробелов и комментариев) из файлов CSS и JavaScript, чтобы браузер мог быстрее отобразить страницу. Кроме того, минификация улучшает позиции сайта в результатах поиска.
-
Конкатенация. Она объединяет все файлы CSS и JS в два больших файла: файл стилей и файл скриптов. Конкатенация сокращает количество запросов HTML, что приводит к более быстрой загрузке страницы.
-
Ленивая загрузка. Она задерживает загрузку тяжелых элементов веб-страницы до тех пор, пока пользователь не прокрутит страницу и не достигнет этих элементов. Эта оптимизация особенно полезна, если на сайте WordPress содержится много изображений и видео.
Кроме того, существуют отдельные плагины для ленивой загрузки, например, Lazy Load by WP Rocket и a3 Lazy Load. Первый из них более ориентирован на мобильные устройства, но на самом деле оба плагина хороши.
При установке одного из многофункциональных плагинов (W3 Total Cache, WP Rocket или Autoptimize) вам нужно обратить внимание на тип веб-сервера вашего сайта (Apache или Nginx). Это важный аспект, поскольку эти плагины вносят изменения в файл .htaccess для настройки кэширования браузера и сжатия сервера (методы Deflate и GZIP).
Файл .htaccess является конфигурационным файлом Apache, поэтому он не работает на Nginx. Поэтому, если ваш сайт размещен на Nginx, вам придется настраивать параметры сервера вручную. Я расскажу, как это сделать в разделе оптимизации для Nginx позже в этой статье.
Если плагины не помогли ускорить ваш сайт WordPress, вы все равно можете использовать другие способы увеличения скорости загрузки. Давайте рассмотрим это далее.
Решение проблем со скоростью загрузки страниц без использования плагинов.
Также можно настроить кэширование, сжатие передаваемых данных и изменение заголовков ответа сервера без использования плагинов WordPress. Вот шаги, которые вам нужно предпринять.
Оптимизация для Apache.
Конфигурации, описанные ниже, должны быть выполнены в файле .htaccess. Он находится в корневом каталоге сайта. Вам нужно добавить эти конфигурации в конец этого файла.
Настройки кэша.
Сначала убедитесь, что модуль mod_expires включен. Он должен быть активирован по умолчанию, но могут быть редкие исключения.
Если модуль включен, вам нужно указать период хранения для каждого типа файлов.
Пример:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
Управление кэшем с помощью HTTP-заголовка
Для управления кэшированием браузера используется HTTP-заголовок Cache-control. Его необходимо передавать вместе со всеми файлами, которые требуется кэшировать. Ниже приведен пример, который должен подойти большинства случаев.
Пример:
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
Сжатие ответа сервера.
Для сжатия ответа сервера существует два метода и соответствующих модуля: mod_gzip и mod_deflate. Мы сосредоточимся на модуле mod_deflate, так как этот метод является более современным и требует меньше процессорного времени.
<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
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Не забудьте перезапустить Apache, чтобы изменения в конфигурации вступили в сил. Для этого можно использовать команду: sudo service apache2 restart (в некоторых операционных системах они могут отличаться).
Оптимизация Nginx.
Если ваш сайт работает на Nginx, вам потребуется внести изменения в файл конфигурации домена, чтобы оптимизировать работу веб-сервера. Вот как это сделать.
Активация и настройка сжатия:
gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
gzip_buffers 16 8k;
Включение кэширования:
location ~* \.html$ {
expires 7d;
}
location ~* \.(ogg|ogv|svg|svgz|eot|otf|woff|mp4|mp3|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)(\?ver=[0-9.]+)?$ {
access_log off;
log_not_found off;
expires max;
}
Не забудьте перезапустить Nginx, чтобы изменения в конфигурации вступили в силу. Для этого можно использовать команду: sudo service nginx restart (в некоторых операционных системах команда может отличаться).
Итоговый список по оптимизации WordPress.
-
Чтобы упростить вам жизнь, я собрала список того, что стоит запомнить для успешного завершения процесса оптимизации WordPress:
-
Всегда создавайте резервную копию веб-сайта перед началом оптимизации.
-
Проводите все эксперименты на точной копии сайта, а не на рабочем сайте.
-
Обновляйте все плагины и отключайте те, которые не используете.
-
После внесения любых изменений очистите кэш браузера и сервера, а затем протестируйте веб-сайт, чтобы убедиться, что он работает как прежде.
-
Стремитесь сохранять баланс между качеством и размером изображений.
-
Начните с оптимизации плагинов; только если они не решают проблему, приступайте к оптимизации кода и настройке параметров сервера.
-
Не вносите изменения в настройки сервера, если не понимаете, как они работают.
Итог.
Оптимизация WordPress может быть простой задачей, если у вас есть некоторый технический опыт и вы понимаете, как работают плагины и серверы. Однако, если вы не уверены в своих навыках и возможностях, рекомендуется обратиться к профессионалам, например, к нам
