Советы по оптимизации скорости загрузки сайтов на wordpress и не только

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

Кстати о Google, записался на на курсы по AdSense от Backspark — сколько не пытался самостоятельно найти силы для изучения темы, ничего не получалось. Надеюсь с помощью этого успешного мастера по MFA сайтам смогу сдвинуться с мертвой точки. План курса, в принципе, прост и доступен, нужно только желание учиться и целеустремленность, чем я потихоньку запасаюсь:) Но вернемся к теме оптимизации скорости загрузки.

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

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

Оптимизация картинок сайта

Здесь есть 2 «уровня сложности». Если говорить о базовой оптимизации, то следует учитывать, что формат PNG имеет некоторое преимущества перед JPEG, тоже самое как GIF может занимать гораздо меньше PNG. Вообще GIF можно (и нужно) использовать для всех изображений, которые не прихотливы к цветовой палитре — фоны, иконки, логотипы. Так, например, я без особых потерь сократил вес фоновой картинки для сайта в 2 раза.

Второй уровень сложности — использование специальных инструментов для еще больше компрессии, оптимизации изображений. В частности на webo.in посоветовали gif2png или gifsicle дабы уменьшить GIF в размере и аналогичное для PNG — pngcrush.

CSS спрайты

Это такой хак в CSS, которые позволяет физически использовать одну картинку для разных элементов дизайна. Чаще всего это можно встретить при задании разных изображение для ссылки — обычное и после наведения. В этом случае оба варианта помещаются в один файл, после чего в css указывается смещение для обычного a и a:hover. Эту же технику можно применить для работы с большим числом мелких деталей — иконки для категорий, тегов, списков, даты, числа комментариев и т.п. — все это можно поместить на одно изображение. Большой плюс метода заключается в том, что позволяет сократить число запросов к серверу.

Оптимизация Head а точнее вызываемых в нем CSS и JavaScript

Здесь есть несколько моментов:

• во-первых, нужно объединить все CSS файлы;
• во-вторых, избавиться от условий при вызове стилей CSS для других браузеров (IE 6,7 и т.п.) — это нужно делать через CSS хаки (* html);
• в-третьих, объединять также нужно javascript скрипты, следить дабы они не дублировались и убирать лишние, как иногда бывает в вордпресс.

Подробнее об этом читаем в статье оптимизируем WordPress header и удаляем лишние элементы. В комментариях к этой статье мне посоветовали плагин wp-minify, который позволяет объединить несколько CSS и Javascript файлов, а также применить к ним технику minify. Да, это удобно, но следует заметить, что с этим пунктом нужно быть осторожным — слишком большой файл CSS также не лучший вариант решения задачи, нужно удалять из него все лишние не используемые настройки, применять сжатие. При объединении нескольких Javascript в один могут возникнуть проблемы с работоспособностью некоторых скриптов.

Обновление 18.05.2018: При реализации этой задачи и общей оптимизации работы системы вам поможет плагин Clearfy для WordPress — мега полезное и удобное решение, позволяющее легко править более 50-ти параметров CMS, в том числе удалять лишний код и минимизировать его.

Кстати о плагинах wordpress.  Очень часто они являются одной из основных причин медленной работы сайта. Во-первых, нужно оставлять только те плагины, которые реально используете в работе. Раньше часто по работе помогал настраивать wordpress и всегда удивлялся количеству установленных модулей под 30 штук. Во-вторых, выбирая плагины, нужно (по возможности) анализировать их эффективность, почитать отзывы и т.п. Так, например, в новых версиях Simple Tags разработчики убрали часть функций и добавили «советы» по установке других более подходящих модулей для тех или иных целей.

Если есть разные варианты решения задач, то всегда нужно сравнивать альтернативы и выбирать наиболее подходящую. Так, года 2 назад открыл для себя замечательный плагин WP-SpamFree который убирал весь автоматический спам в блоге, но недавно узнал, что он практически полностью нивелирует эффект от кэширования, что, конечно, очень нехорошо. Поэтому лучше использовать другие модули — плагин Antispam Bee или тот же Akismet. Еще один наглядный пример о самых популярных постах с WP-PostViews — оказалось, что он весьма неслабо грузит сервер. Поэтому в качестве альтернативы можно установить плагин рейтинга статей WP-PostRatings — принцип работы его, конечно, немного иной, но цель использования практически одна и та же.

Весьма здорово ускорить процесс загрузки сайта помогает кэширование. Некоторые плагины показывают чуть ли не феноменальные результаты выигрыша производительности на 600-800%. Я для своих блогов используют WP Super Cache и весьма им доволен. Как правило, для средних проектов оптимизации и кэширования хватает, но особо посещаемые и требовательные wordpress  сайты могут использовать скрипт maxcache кэш, который сокращает нагрузку в 100 раз (скрипт платный, 30 долларов). Что касается другие сторонних разработок — можно также воспользоваться решением WEBO Site SpeedUp где есть модули для популярных CMS и бесплатные версии. Оно позволит воплотить в реальность все советы по оптимизации загрузки сайта что отображались в результате анализа webo.in. Я пытался ставить модуль для wordpress , но там нужно во всем подробно разбираться, настроек очень много. Для тех, кто не любит в них особо копаться, вникать, подробно изучать, проще воспользоваться модулем maxcache кэш.

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

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

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

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