Полная оптимизация сайта заключается в повышении производительности. Начнем с оптимизации загрузки страниц.
Кеширование контента и файлов
Каждый раз, как посетитель делает запрос страницы вашего сайта, сервер срывается с колес и начинает обрабатывать массу скриптов и выполнять запросы к базе данных для генерации страницы. Для сайтов с небольшим количеством трафика нагрузка невелика и все загружается великолепно. Для высоко посещаемых сайтов, нагрузка на сервер с тысячами страниц может реально его замедлить.
Первое, что нужно сделать, это установить кеширующий плагин. Хороший кеширующий плагин снижает нагрузку на сервер путем создания статической копии каждой запрашиваемой страницы и затем отдает их на все поступающие запросы, вместо создания новой каждый раз. Обслуживание статических страниц требует от сервера гораздо меньше ресурсов и может значительно увеличить его скорость работы. Кеширующих плагинов не много, а очень много, вот примеры самых популярных:
На данный момент это три самых основных конкурента по популярности. Перед использованием рекомендуется изучать документацию и интерфейс, но в целом в большинстве ситуаций они равнозначны. И уж тем более не рекомендуется устанавливать одновременно несколько кеширующих плагинов одного типа. Комбинирование допускается в случае, если один плагин занимается файловым кешированием, а другой кеширует запросы к базе данных.
А для наблюдения за кешированием можно использовать WP Cache Inspect, который будет выводить подробную информацию о том, какие и сколько файлов кеша создано, как они используются и сколько раз вызываются.
И возможно самый лучший способ добиться максимальной производительности и скорости загрузки сайта — это выбрать правильный хостинг. Ничто так не влияет на скорость и постоянную доступность сайта, как быстрый сервер, поэтому держитесь подальше от дешевых хостингов и различных распродаж, когда на один сервер забивается огромное количество пользователей со своими сайтами, создающими обильную нагрузку.
Понятно, что хороший хостинг стоит дороже. Но не всегда более дорогой хостинг означает лучший. Поэтому только остается посоветовать искать, изучать и пробовать.
Метод сжатия файлов
Другой способ улучшения производительности и экономии трафика — это использование сжатия файлов и страниц сайта. Сжатие не означает сжатия файлов в прямом смысле этого слова, файлы и страницы остаются такими какие есть, но сжатие происходит на сервере перед передачей их посетителю. Как только страница загружена в браузер, она распаковывается и отображается корректно. В результате это приводит к уменьшению размеров передаваемых файлов и передаваемого трафика, и соответственно к уменьшению времени загрузки страницы.
Вот небольшая экскурсия в используемые техники сжатия, к которым вы точно обратитесь по мере достижения определенного опыта в настройке сайтов и серверов
- Сжатие файлов Apache’s gzip module — для серверов, работающих под управлением старых версий Апача, позволяет директивами mod gzip в htaccess файле указать что и как сжимать
- Сжатие файлов Apache’s deflate module — для серверов, работающих под управлением новых версий Апача, настраивается директивами mod_deflate
- Сжатие методами PHP, используя сжатие выходного буфера. Обычно реализуется вставками специальных скриптов в файл header.php, подробнее можно почитать тут
- Ручное сжатие файлов — для всех статических файлов типа css, javascript и т. п. Возможно существенное уменьшение размера путем выполнения архивации файлов в gzip архив
- Уменьшение CSS и JavaScript файлов — в отличие от упаковки в архив, речь идет о удалении из файлов всей служебной и ненужной информации — комментариев, пробелов, переносов и т.п. Автоматическое уменьшение таких файлов поддерживают некоторые кеширующие плагины.
- Собственно для минимизации файлов можно использовать плагин WP Minify или PHP-Speedy, которые выполняют уменьшение размеров, комбинирование и объединение нескольких файлов, а также кеширование.
Кроме этого можно воспользоваться онлайн сервисами и скриптами для минимизации размеров CSS и JavaScript файлов:
В то время как есть много разных способов выполнить компрессию, ваша реализация прежде всего зависит от возможностей вашего сервера. Если можно, то включите mod gzip или mod_deflate и забудьте об остальных способах.
Если же эти варианты недоступны, то тогда уже используйте другие методы.
Оптимизируем CSS и JavaScript
Если все эти серверные штучки и настройки сжатия-пережатия вызывают потерю сознания, то расслабьтесь — большой вклад в оптимизацию можно сделать простой концентрацией на коде и контенте, используемых для создания пользовательских интерфейсов. Оптимизируя код JavaScript, CSS, и даже HTML страниц, вы можете существенно снизить размер файлов и время загрузки.
Вот вам несколько ключевых стратегий оптимизации кода:
- Пишите понятный код! Убирайте ненужные комментарии и пометки, избегайте путанных и сложных конструкций.
- Уменьшайте http запросы до минимума. Это также очень сильно влияет на время загрузки. Каждый вызываемый файл, будь то скрипт, изображение или файл стиля создает свой http запрос и снижает время загрузки. Объединяя несколько css и javascript файлов в один и используя технологию спрайтов, когда несколько изображений объединяются в одно, вы можете значительно уменьшить число создаваемых запросов.
- Используйте спрайты. Это изображение, состоящие из нескольких склеенных других изображений. Размещая их в одном файле, мы снижаем задержку на загрузку файла и уменьшаем число http запросов. Также спрайты вместе с css используются для создания различных эффектов и сменяющихся при наведении изображений, создания фоновых изображений и т. п. Для полуавтоматического создания спрайтов воспользуйтесь spriteme.org
- Загружайте JavaScript файлы внизу страницы. Все файлы внешних скриптов должны загружаться непосредственно перед закрывающим тегом <html> , чтобы обеспечить полноценную загрузку страницы и выполнения скриптов на ее полностью готовом коде.
- Проверяйте свой код. Это самый простой способ убедиться, что все работает и отображается так как надо и соответствует всем требованиям и стандартам языка. После проверки, валидатор сообщит о всех найденных ошибках и покажет рекомендации по их устранению.
А теперь об этом поподробнее.
Снижение числа http запросов
Каждый вызов отдельного файла — это отдельный запрос к серверу, своему или внешнему. Есть определенные ограничения на количество одновременных запросов к одному серверу, поэтому все невыполненные запросы остаются в очереди, увеличивая и без того большое время загрузки страницы. Это хорошо видно на сайтах с огромным количеством подключаемых css и javascript файлов.
Вот основные методы борьбы:
- Уничтожайте ненужные файлы. Вызывайте только те файлы и только тогда, когда они действительно нужны
- Объединяйте CSS файлы. Вместо того, чтобы обращаться к пяти css файлам, объедините их в один. Особенно много разных файлов появляется при использовании плагинов, т. к. почти каждый плагин подключает свой файл стилей.
- Объединяйте JavaScript файлы. Точно так же как и в случае с css, нужно группировать и объединять скрипты в один.
- Используйте спрайты изображений. Многие шаблоны имеют большое количество мелких деталей- иконки социальных сетей, кнопки, элементы дизайна, а это все отдельные файлы и отдельные запросы. Чтобы объединить это все в спрайты и разобраться с этой технологией потребуется некоторое время, но оно того стоит — это очень эффективный прием.
- Комбинированное сжатие. С помощью различных плагинов и скриптов достигается максимальный эффект сжатия, когда файлы сначала минимизируются, затем объединяются, комбинируются, и упаковываются в архив.
- Прогрессивная загрузка изображений. Вместо того, чтобы одновременно пытаться загрузить все изображения на странице, делайте загрузку для тех изображений, что не попали в поле зрения. Это особенно эффективно на длинных страницах с большим количеством картинок. По своей сути это способ обратный предзагрузке — когда в фоновом режиме загружается тяжелая страница, зато при переходе на нее- она открывается моментально. При быстром проматывании страницы с прогрессивной загрузкой можно наблюдать небольшую задержку в появлении изображений, но это дает очень огромный выигрыш в производительности. Используйте для этой цели плагин Lazy Load
- Используйте сети доставки контента CDN. Это распределенные серверы, на которые вы копируете или размещаете часть информации с сайта. Используя дополнительные серверы для загрузки изображений, архивов и других статических файлов, вы снимаете нагрузку с своего сервера, а также обеспечиваете одновременную параллельную загрузку разных частей страницы из разных серверов.
Чтобы подробно изучить состав страниц своего сайта, а также получить информацию о скорости его работы, используйте отличный аддон Firebug, который в комплекте с аддоном Yslow даст всю нужную информацию о качестве оптимизации сайта.
К примеру так мы можем узнать сколько и каких изображений загружается на странице. А затем принять решение о объединении их в спрайты или переносе на сервер CDN.
А вот результаты тестов скорости загрузки сайта, оценки и советы:
Если покопаться в этих отчетах, можно найти очень много полезного и интересного.
Уход за плагинами
Много статей в интернете рекомендует отключать неиспользуемые плагины для оптимизации сайта. Но это лишь половина правды. Все начинается тогда, когда вы выбираете, какой плагин инсталлировать. Делайте некоторые исследования и принимайте осознанное решение, вместо того чтобы ставить все подряд. Каждый установленный плагин потребляет ресурсы и может снизить производительность.
Также возможен накопительный эффект, когда сочетание двух определенных плагинов может привести к непредсказуемым последствиям. Но все же, вполне бывают сайты с активированными и прекрасно и шустро одновременно работающими 50 плагинами. Поэтому просто контролируйте то, что вы делаете.
Далее, после того, как выбранный плагин был установлен, проверьте - все ли работает как надо?
Если вы замечаете глюки или тормоза, поменяйте свое решение и выберите другой плагин. В большинстве случаев всегда есть масса альтернатив.
Далее, чтобы взять под контроль весь имеющийся арсенал плагинов, имейте в виду, что следует избегать плагинов про запас, которые могут понадобиться когда-нибудь, но совершенно бесполезны сейчас. Деактивируйте и деинсталируйте абсолютно все ненужные и неиспользуемые плагины. Каждый раз, когда загружается страница вашего сайта, все плагины загружаются в фоновом режиме. Поэтому любой плагин, который можно убрать — нужно убрать.
Ну и как многократно говорилось, регулярно обновляйте плагины. Вполне вероятно, что кроме устранения старых глюков, в плагине могут появиться новые, но в большинстве случаев обновления приносят улучшения, повышенную безопасность и новые фишки.
И, наконец, как только вы решаете отключить какой-либо плагин — удаляйте его полностью. Не оставляйте его занимать место в админке в выключенном виде. Анинсталлируйте его и убедитесь, что все следы его пребывания также удалены.
Уход за базой данных
Если шаблон сайта — это сердце вордпресса, то база данных — это мозг. В базе данных содержатся все настройки, публикации, комментарии, опции плагинов и административная информация для корректной работы сайта. Если эти данные будут повреждены или не оптимизированы, производительность сайта ухудшится. Оптимизация базы данных и создание регулярных резервных копий — это очень хороший тон. Активно развиваемые и часто посещаемые сайты стоит оптимизировать каждый день, тогда как для менее активных сайтов нормально будет и раз в неделю.
Кроме этого уделите внимание удалению из базы данных всей ненужной информации, такой как остатки плагинов, таблицы и записи оставленные ими. Если разработчики плагина не зря едят свой хлеб, то после анинсталляции плагина в базе данных не остается никаких следов, однако далеко не все так делают.
Чтобы оптимизировать базу данных вручную, достаточно выделить в phpMyAdmin все таблицы и нажать «оптимизировать».
Или же сделать запрос типа OPTIMIZE TABLE `feeds`, `items`, `options`, `tags`
Также можно использовать специализированный плагин Optimize DB или плагин WP-Optimize, который выполняет кучу полезной работы по чистке мусора и в том числе чистит и оптимизирует базы данных.
Другие оптимизационные техники
Остается еще масса способов оптимизировать и улучшить производительность сайта. Вот еще некоторые примеры, куда можно приложить свои усилия.
Разбивайте длинные записи на постраничные
Вордпресс позволяет длинные тексты-простынки разбивать на индивидуальные страницы с помощью тега <!--nextpage-->
Для огромных записей с кучей изображений это будет самое то, чтобы ускорить их постраничную загрузку.
Ограничивайте количество записей
Идея в том, чтобы снизить количество выводимых записей на главной или архивной странице. Вместо того, чтобы отображать 20 записей на главной, т.к. такое же количество по дизайну требуется выводить в рубрике, стоит использовать плагин типа Custom Query String Reloaded для индивидуальной настройки количества отображаемых постов на различных страницах.
Укажите срок окончания жизни кеша в далеком будущем
Для статических ресурсов, типа изображений, css и javascript файлов, отличный способ снизить нагрузку, это указать время жизни кеша максимально большим с помощью Expire Headers. Тогда будучи один раз загруженными посетителем, при повторном визите они загружаться не будут, используя кеш браузера.
Вот пример конфигурации htaccess для изображений сроком жизни кеша 1 месяц
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/ico A2592000
Имейте в виду, что с таким кешированием при необходимости изменить изображение, нужно его переименовать, чтобы изменения увидели посетители имеющие закешированную копию.
Уменьшаем размер изображений
Очевидно, что огромные изображения требуют большого времени для загрузки, чем маленькие. Есть миллионы статей на эту тему, объясняющих как и зачем оптимизировать изображений, поэтому будем краткими.
- Онлайновые сервисы оптимизации, такие как Smush.it или punypng выполняют свою работу так: вы загружаете неоптимизированное изображение, а взамен скачиваете оптимизированное. Лучше всего они работают с JPEG, GIF и PNG. Оба сервиса используют технологию сжатия без потери качества, поэтому вы не потеряете ни грамма удовольствия от просмотра сжатых изображений.
- Плагин WP Smush.it, который на лету выполняет оптимизацию и сжатие уже загруженных на сайт изображений
- Офлайновые оптимизационные программы, типа OptiPNG или PNGcrush. Каждая из этих программ удаляет всю ненужную служебную информацию из png изображений, не ухудшая качества.
- Оптимизация изображений в процессе создания. Возможно самый лучший способ оптимизации — создавайте изображения именно в том размереразрешении, в котором они будут использованы на сайте без масштабирования, сохраняйте изображения в требуемом уровне качества, т.к. визуально не видно разницы между 100% и 80% качеством сжатия, а вот размер файла может отличаться в разы.