Лучшие 9 способов оптимизации скорости загрузки сайта на WordPress

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

1. Передавайте пользователям статичные материалы с cookie независимого домена

Около 80 до 90% времени, пользователи тратят на загрузку статического контента с вашего блога WordPress. Это означает, что гораздо больше времени тратится на загрузку страницы чем на ее просмотр и чтение, пользователи ждут загрузки таких элементов web как: изображения, таблицы стилей, скрипты, Flash, и т.д. Вы можете оптимизировать этот контент, сделать так, чтобы он быстрее загружался, для этого вы можете использовать бесплатный поддомен который не отправляет cookie а только раздает статические файлы WordPress для ускорения загрузки содержимого сайта. Эти действия помогают сократить несколько микро-секунд времени загрузки, что может показаться не так много, но когда на сайте много контента и пользователей это дает реально ощутимый.
К тому же, это очень просто реализовать в WordPress, просто добавьте две строки в код файла WP-config.php:

define(“WP_CONTENT_URL”, “http://static.mydomain.com”);
define(“COOKIE_DOMAIN”, “www.mydomain.com”);

После того как вы это сделали загрузите свой статический контент на поддомен. Всё готово! переходим ко второму способу.

2. Задайте время кэширования для статических материалов

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

<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault      "access plus 1 month"
# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# RSS feed
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files  (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>

Как видно из кода, часть файлов, некоторые их типы, мы кэшируем на 1 неделю access plus 1 week, другие на один месяц access plus 1 month, иные на 1 год access plus 1 year. Там, где нам не нужно кэширование, обычный текст или блок часто обновляемого материала, например прогноз погоды по часам, мы устанавливаем кэш 0 секунд access plus 0 seconds.

3. Оптимизация базы данных сайта на WordPress

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

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

4. Используйте специальные плагины для кэширования медиа файлов

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

5. Используйте CDN

Чтобы сэкономить время загрузки сайта можно использовать сеть сайтов CDN которые позволяют размещать бесплатно или за небольшую плату ваш статический контент. При запросе страницы вашего сайта все статические файлы отдаются пользователю с высокоскоростных серверов, а так как на 1 серевер браузер может создать только 2 подключение, то, если количество серверов будет 2 то файлы вашего сайта будут загружаться 4 потоками, то есть в 2 раза быстрее. Использование CDN на сайте WordPress можно сравнить с облачными технологиями, за исключением того, что на сторонних серверах размещается только статичные файлы, а не весь сайт,
Есть несколько плагинов в свободном доступе, которые позволяют быстро настроить сайт вордпресс для работы с CDN.
Альтернативные варианты серверов CDN: Amazon S3, Max CDN, Media Temple CDN , и Free CDN.

6. Сжатие и объединение всех JS и CSS файлов стилей на сайте WordPress

Сжатие всех JS и CSS файлов очень полезное действие, так как это уменьшает общий размер загружаемой страницы, что также способствует снижению времени загрузки для пользователя. Однако, если вы хотите, добиться большего эффекта от оптимизации мы настоятельно рекомендуем объединить файлы JS и CSS на сколько это возможно. Дето в том, что некоторые js фалы могут конфликтовать между собой при объединении в один из за одинаковых имен классов, то же может быть и с файлом стилей, в идеале, объединяемые файлы должны сначала пройти визуальную и программную проверку на наличие схожих имен операторов в одном из редакторов кода, например NetBeans IDE.
Объединение нескольких файлов в один может значительно уменьшить число запросов к веб-серверу, что снизит время загрузки сайта.
Компрессоры JS: Closure Compiler и Minify JavaScript .
Компрессоры CSS: альтернативы CSS являются Minify CSS и CSS Compressor .
Кроме того, вы также можете использовать плагин WP Minify, который может объединять JS и CSS файлы, управлять этим процессом можно прямо из WordPress. Но, советуем использовать плагин сразу, а сперва протестировать на локальном сервере или копии сайта.
Используйте CSS Sprite, чтобы уменьшить число запросов к серверу. если вы имеете много свободного времени и чувствуете в себе особенный энтузиазм.

7. Сжатие графических файлов, оптимизация фото на сайте WordPress

Сжатие изображений на сайте WordPress можно выполнить несколькими способами. Первый из них находится за пределами сайта, и заключается в том чтобы изначально создать в программе редакторе оптимизированное изображение. Для этого подойдет Adobe Photoshop, Adobe Fireworks и некоторые другие.
Но что делать если файл изображение уже загружен, или он не оптимизирован перед загрузкой на сервер? Второй способ, это установка специального плагина WP Smush IT который позволяет оптимизировать как уже загруженные фото на сайт так и вновь загружаемые фотографии.
Снижение размера фото на сайте вордпресс позволяет оптимизировать скорость загрузки сайта за счет снижения веса страницы, а также делает его доступнее более широкой аудитории пользователей интернет, так как картинка меньшего размера загружается относительно быстрее большого файла фото.

8. Сжатие статического содержимого WordPress в GZIP

Еще один совет по увеличению скорости загрузки сайта на WordPress, это сжатие и передача содержимого сайта в gzip. Практически все современные браузеры поддерживают gzip метод передачи и распаковки, это если хотите, тот же самый архив. Перед отправлением файлов сайта клиенту все они упаковываются в gzip архив а затем в сжатом виде передаются клиенту, где браузер разархивирует полученный файл и затем отображает страницу веб сайта в привычном для нас виде.
В gzip можно упаковать такие типы файлов: CSS, JS, и файлы изображений,
К счастью, для сайтов на WordPress есть невероятно простой способ включить gzip, для этого откройте на редактирование файл Htaccess и добавьте следующий код:

<IfModule mod_deflate.c>
# force deflate for mangled headers
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
FilterDeclare   COMPRESS
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
FilterChain     COMPRESS
FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Для того чтобы приведенный выше код работал ваш хостинг должен поддерживать или разрешить использовать mod_deflate.c. Обычно, на хостинге этот параметр ограничен из за того что gzip сжатие выполняется на стороне сервера сайта что приводит к увеличению нагрузки на последний. Смотрите также статью оптимизация сайта на wordpress при помощи htaccess.

9. Отключение ETags в WordPress

Отключение ETags это отличный способ кэширования контента в WordPress. При помощи отключения ETags можно сократить размер заголовков HTTP. Тем не менее, перед использованием этой опции подробнее ознакомьтесь с документацией, потому как если вы например активно используете ответ Last-Modified в заголовках ответа сервера, то такой ответ станет недоступен. Код нужно добавить в файл Htaccess:

File ETag none

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