Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

MODX Revolution: Оптимизация скорости работы сайта

О чём?

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

Зачем?

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

Как?

Для того, чтобы увидеть разницу между состояниями сайта до и после, советую воспользоваться сервисом PageSpeed Insights от Google. Данный сервис оценивает сайт по скорости загрузки и удобству для посетителей по шкале от 0 до 100. Естественно, не стоит полагаться только на показатели этого сервиса, но по большей части советы он даёт вполне адекватные.

Проверка сайта в Google Pagespeed Insights
Проверка сайта в Google Pagespeed Insights

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

Результат проверки скорости работы сайта в Google Pagespeed Insights
Результат проверки скорости работы сайта

Кэширование

Кэширование — одна из сильнейших частей в MODX. Несмотря на то, что многие не умеют правильно проектировать сайты (не только на MODX), получая медленные сайты, создать сайт, способный выдержать высокую нагрузку, не так сложно, если надеяться не только на железо и программное обеспечение, но и на себя. За счёт использования кэширования можно значительно сократить количество запросов к базе данных, если они используются для получения данных, которые меняются относительно редко.

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

Для того, чтобы узнать, сколько запросов и времени требуется для генерации страницы, достаточно в любом месте шаблона или чанка разместить следующее: 9 0.0314 s. В первом теге будет содержаться количество запросов к базе данных, во втором — время создания страницы.

Обновление PHP

Обычно мне лень проводить тесты производительности, но зато не упускаю возможности почитать новости об очередных нововведениях и исследованиях. Обычно в новостях про новые выпуски PHP пишут о повышении его производительности, что не может не радовать. Поэтому дома я стараюсь держать самую актуальную версию. К сожалению, не все придерживаются этой идеи и часто можно встретить сайт, работающий на PHP 5.3 (я даже видел сервер с 5.2, в 2015-то году). К счастью, большинство хостеров предоставляют пользователям выбор версии PHP. Поэтому я, ничтоже сумняшеся, сменил на одном сайте версию PHP с 5.3 на 5.6, увеличив скорость создания страницы в 2 раза (с 0,06 с. до 0,03). Как видно, обновление версии PHP грозит не только сменой циферок, но и повышением скорости и безопасности сайта.

Как узнать версию PHP
Как узнать версию PHP

Минификация CSS и JS

Отступы и переводы строк улучшают, конечно же, читабельность кода, но только для человека. Браузеру же можно отдавать минифицированные версии этих ресурсов: без лишних пробелов и переводов строк. Сначала я сжимал CSS и JS с помощью онлайн-сервисов, но это не совсем удобно, так как при очередном обновлении оригиналов этих файлов мне придётся заново минифицировать эти файлы и заливать на сайт. Тогда я нашёл сниппет SmartOptimizer, который минифицирует CSS и JS на лету. Помимо SmartOptimizer есть MinifyX, который тоже предназначен для минификации и склейки статичных ресурсов. Такие популярные фреймворки как jQuery, Bootstrap и др. выпускаются в минифицированном виде, рекомендуется использовать именно эти версии. Например, вместо bootstrap.css лучше подключить bootstrap.min.css. Если, конечно, ничьи шаловливые ручонки до этого не вносили в эти файлы никаких изменений.

Проверенный сервис для минификации CSS: http://cssminifier.com/

Для минификации JavaScript: http://jscompress.com

Минификация HTML

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

$output = &$modx->resource->_output;
$output = preg_replace('|\s+|', ' ', $output);
$modx->resource->set('content', $output);

До и после минификации HTML
До и после минификации HTML

favicon

Браузер, впервые загружая сайт, также ищет favicon. Даже если ссылка на favicon не указана в мета-тегах, браузер попытается загрузить её по адресу site.ru/favicon.ico. Эта простая операция хоть и занимает один запрос, и при загрузке следующей страницы браузер возьмёт favicon из собственного кэша, но её тоже можно исключить. Делается это очень просто — нужно закодировать favicon в base64 и вставить напрямую в страницу. Закодировать favicon в base64 можно, например, на сайте http://xaviesteve.com/pro/base64.php. Затем полученный код вставить в заголовок страницы.

Например, если раньше favicon указывался так:

<link rel="icon" href="http://quasi-art.ru/favicon.ico" />

То этот тег можно заменить следующим:


<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,data:image/x-icon;base64,AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAREREREREAABABEAEQAQAAEAEQARABAAAREREREREAABERAAAREQAAEAEAABABAAAQAQAAEAEAABERAAAREQAAERERERERAAAQARABEAEAABABEAEQAQAAERERERERAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAMADAADZmwAA2ZsAAMADAADDwwAA29sAANvbAADDwwAAwAMAANmbAADZmwAAwAMAAP//AAD//wAA" />

Изображения

Каким бы банальным ни был этот совет, многие полностью игнорируют этот момент. А ведь всего лишь нужно оптимизировать изображения для сайта: уменьшать размеры физически, используя графические редакторы и расширения (phpThumbOf, к примеру), а не визуально, устанавливая размеры в атрибутах height и width (что не соответствует стандартам, кстати) или с помощью CSS. Кстати, если вы используете phpThumbOf, то оптимизировать сайт можно, деактивировав плагин phpThumbOfCacheManager, который удаляет кэш изображений при очистке кэша сайта.

Оптимизации сквозных изображений (тех, что присутствуют на большинстве страниц) нужно уделить особое внимание. Логотипы, спрайты и фоновые изображения можно оптимизировать без изменения качества с помощью онлайн-сервисов, например, http://compresspng.com/ .

На рисунке ниже показано, что люди очень спешили попить пивка в подъезде, поэтому забыли сделать так, чтобы вместо оригинала, имеющего вес почти 1 МиБ, загружалась скромная миниатюра, экономящая время посетителя. На данный момент сервис PageSpeed Insights оценивает этот сайт на 0/100. Это вам не Танцы на льду с щедрыми 5.9 из 6.0.

Отдельный котёл этим сударям
Отдельный котёл этим сударям

pThumb

В дополнение к предыдущему пункту стоит упомянуть про альтернативу phpThumbOf — pThumb. Как уверяют разработчики, pThumb работает быстрее (лично я не проверял). Для установки pThumb достаточно удалить phpThumb и установить pThumb. Не стоит бояться за то, что после этой замены что-то сломается на сайте, так как оба сниппета используют одинаковые пространства имён.

Мобильная версия сайта

Есть два способа оптимизировать сайт для мобильных посетителей:

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

Создание мобильной версии сайта зависит от используемой системы, на которой создан сайт (MODX, CodeIgniter, Phalcon и пр.). Особенность этого способа в том, что пользователям настольных компьютеров и пользователям мобильных устройств отдаются разные версии сайта (разная вёрстка, CSS и JavaScript-скрипты). Я уже писал статью о (создании мобильной версии сайта на CodeIgniter и для MODX Revolution.

Вывод

С помощью этих простых телодвижений мне удалось существенно оптимизировать сайты, ускорив их по некоторым показателям в десятки раз.

Комментарии