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

О чём?

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

Зачем?

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

Как?

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

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

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

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

Кэширование

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

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

Пример вызова без кэширования:

[[!If? &subject=`[[*id]]` &operand=`1` &operator=`==` &then=`Hello, world`]]

Пример вызова с кэшированием:

[[If? &subject=`[[*id]]` &operand=`1` &operator=`==` &then=`Hello, world`]]

Но будьте осторожны: не следует кэшировать сниппеты, которые обрабатывают POST-запросы (например, формы обратной связи).

Для того, чтобы узнать, сколько запросов и времени требуется для генерации страницы, достаточно в любом месте шаблона или чанка разместить следующее: 20 0.1113 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

На самом деле, есть более действенный способ: минификация во время разработки. То есть есть исходники — файлы в удобочитаемом виде, а есть сборка — уже минифицированные файлы, которые стоит подключать на сайте. При разработке сайта я использую: SASS, gulp — для CSS, webpack — для JavaScript.

Bootstrap

Если на сайте используется Bootstrap, можно сделать свою сборку, содержащую только необходимое. Например, самая используемая часть этого фреймворка — сетка, и зачастую достаточно оставить только её. Создать свою сборку можно на официальном сайте: https://getbootstrap.com/customize/.

Проверить, насколько эффективно используется Bootstrap на сайте, можно с помощью Coverage, я написал об этом статью: https://quasi-art.ru/library/it/using-chrome-devtools-coverage.

jQuery

Не используйте jQuery. Современный JavaScript позволяет писать довольно лаконичный код, а с помощью транспайлеров будет работать даже в старых версиях Internet Explorer.

Единственная возможная проблема — какие-то jQuery-плагины, но для большинства из них есть варианты, не зависящие от jQuery.

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

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

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

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

На самом деле, довольно спорный способ ускорить сайт. Скорее всего он станет работать ещё медленнее (не ощутимо, но есть объективные аргументы), так как регулярные выражения довольно ресурсоёмкие и эффективнее использовать серверное сжатие, подробнее можно прочесть здесь: https://varvy.com/pagespeed/enable-compression.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 достаточно удалить phpThumbOf и установить pThumb. Не стоит бояться за то, что после этой замены что-то сломается на сайте, так как оба сниппета используют одинаковые пространства имён.

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

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

  • Адаптивная вёрстка
  • Мобильная версия сайта

Адаптивная вёрстка

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

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

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

Мобильное приложение

Если у сайта есть постоянные посетители, то есть смысл сделать мобильное приложение. В таком случае объём трафика между сайтом и мобильным устройством уменьшится, так как будет передаваться только сам контент, а код для отображения интерфейса уже будет содержаться в приложении. Затраты на разработку приложения и его сопровождение — это уже другая история.

Вывод

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