Статья о том, как увеличить производительность сайта на CMS MODX Revoluton.
Зачем это нужно?
- Высокая скорость сайта положительно влияет на SEO: поисковые системы поощряют шустрые сайты.
- Быстрая загрузка сайта положительно влияет на лояльность посетителей. Если сайт медленный, посетитель может уйти, не дождавшись загрузки сайта.
- Можно хвастаться метриками (Google PageSpeed Insights и прочие).
1 Как измерить производительность сайта?
1.1 PageSpeed Insights
Для того, чтобы увидеть разницу между состояниями сайта до
и после
, советую воспользоваться сервисом PageSpeed Insights
от Google. Данный сервис оценивает скорости загрузки и удобство сайта по шкале от 0 до 100. Конечно, не стоит слепо полагаться только на показатели этого сервиса, но советы он даёт преимущественно адекватные.
1.2 debugParser
Также есть очень полезный плагин для MODX — debugParser. Он поможет отследить то, сколько запросов и других операций совершают вызываемые на странице сниппеты и чанки.
2 Кеширование
Кеширование в MODX — гибкий и полезный механизм, кэширующий страницы, настройки и результаты вызова чанков и сниппетов. За счёт использования кеширования можно значительно сократить количество запросов к базе данных для получения информации, которая редко меняется.
2.1 Что кешировать
Как уже написал выше, кешировать нужно то, что редко меняется. Например, вывод новостей на главной странице. Важно настроить CMS так, чтобы при публикации очередной статьи происходила очистка кеша, иначе свежая запись не будет отображена.
2.2 Что не кешировать
То, что меняется часто, а также выводится индивидуально для посетителя: содержимое корзины, личный дайджест новостей, а также сниппеты, работающие с запросами (например, формы обратной связи или комментариев).
2.3 Как отключить кеширование в MODX
Чтобы отключить кеширование определённых частей сайта, достаточно поставить восклицательный знак перед именем сниппета, чанка и пр.
Вызов без кеширования:
[[!pdoResources]]Вызов с кешированием:
[[pdoResources]]Сниппеты, вызываемые программно — $modx->runSnippet('snippetName', []) — не кешируются.
Повторюсь: не следует кешировать сниппеты, которые обрабатывают POST-запросы (например, формы обратной связи).
Чтобы узнать, сколько запросов и времени требуется для генерации страницы, достаточно в шаблоне или чанке разместить следующее: 18 0.1286 s. В первом теге будет содержаться количество запросов к базе данных, во втором — время создания страницы.
3 Повышение версии PHP
С пятой по восьмую версию PHP делал кратные скачки в скорости. Поэтому для своих проектов я использую самую актуальную версию, лишь бы CMS поддерживала. Однажды я сменил на сайте версию PHP с 5.3 на 5.6 и скорость создания страницы увеличилась в 2 раза (с 0,06 с. до 0,03 с.). Так что обновление версии PHP — это не просто смена циферок, но и повышение скорости и безопасности сайта.
4 Минификация CSS и JS
Отступы и переводы строк улучшают читабельность кода, но только для человека. А вот браузеру можно отдавать минифицированные версии js/css-файлов.
Популярные библиотеки выпускаются в минифицированном виде, рекомендуется использовать именно эти версии. Например, вместо bootstrap.css лучше подключить bootstrap.min.css.
Есть несколько вариантов минификации:
- Онлайн-сервисы
- MODX-дополнения
- Минификация при локальной разработке
Теперь подробнее о каждом варианте:
4.1 Онлайн-сервисы
Есть большой выбор сервисов, но не удобно постоянно отправлять туда файлы при постоянных правках.
Проверенный сервис для минификации CSS: http://cssminifier.com/
Для минификации JavaScript: http://jscompress.com
4.2 MODX-дополнения
Я нашёл сниппет SmartOptimizer, который минифицирует CSS и JS на лету. Помимо SmartOptimizer есть MinifyX, который тоже предназначен для минификации и склейки статичных ресурсов.
4.3 Минификация при локальной разработке
Самый действенный способ. Есть исходники — файлы в удобочитаемом виде, а есть сборка — уже минифицированные файлы, которые стоит подключать на сайте. При разработке я использую в различных комбинациях webpack, немного rollup, postcss (а раньше sass), также раньше использовал gulp и grunt.
4.4 Bootstrap
Если на сайте используется Bootstrap, можно сделать свою сборку, содержащую только необходимое. Например, самая используемая часть этого фреймворка — сетка, и зачастую достаточно оставить только её. Создать свою сборку можно на официальном сайте: https://getbootstrap.com/customize/ .
Проверить, насколько эффективно используется Bootstrap на сайте, можно с помощью Coverage, я написал об этом статью: https://quasi-art.ru/library/it/using-chrome-devtools-coverage.
4.5 jQuery
Не используйте jQuery. Современный JavaScript позволяет писать довольно лаконичный код, а с помощью транспайлеров будет работать даже в старых версиях Internet Explorer.
Единственная возможная проблема — какие-то jQuery-плагины. Лучше поискать повнимательнее и найти плагин, не зависящий от jQuery. Я обычно ищу что-то вроде «js vanilla slider» или «js dependency-free slider».
5 Минификация HTML
Если открыть код страницы, отдаваемой браузеру, можно увидеть то, что в коде много лишних пробелов (при условии, что не проигнорировано форматирование кода при разработке). Опять же, браузеру глубоко всё равно на форматирование, ведь внутри элементов пробелы схлопываются в один, а между тегов они вообще игнорируются. Естественно, удалять все эти пробелы и переносы строк внутри чанков очень глупо. Для этого я однажды решил написать плагин, срабатывающий при событии OnWebPagePrerender
.
$output = &$modx->resource->_output;
$output = preg_replace('|\s+|', ' ', $output);
$modx->resource->set('content', $output);
На самом деле, довольно спорный способ ускорить сайт. Скорее всего он станет работать ещё медленнее, так как регулярные выражения довольно ресурсоёмкие. Да и незачем перекладывать эту головную боль с браузера на сервер.
Эффективнее использовать серверное сжатие, подробнее можно прочесть здесь: https://varvy.com/pagespeed/enable-compression.html .
6 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" />Экономия на спичках? Верно.
7 Изображения
Банально, но часто игнорируется этот аспект. А ведь всего лишь нужно уменьшать размеры изображений физически, используя графические редакторы и расширения (phpThumbOf, к примеру), а не с помощью CSS. Кстати, если вы используете phpThumbOf, то оптимизировать сайт можно, деактивировав плагин phpThumbOfCacheManager, который удаляет кэш изображений при очистке кэша сайта.
Оптимизации сквозных изображений (тех, что присутствуют на большинстве страниц) нужно уделить особое внимание. Логотипы, спрайты и фоновые изображения можно оптимизировать без изменения качества с помощью онлайн-сервисов, например, https://compresspng.com/ .
На рисунке ниже показано, что разработчики забыли сделать так, чтобы вместо оригинала весом почти 1 МиБ загружалось более скромное изображение. На данный момент сервис PageSpeed Insights
оценивает этот сайт на 0/100.
7.1 pThumb
Как уверяют разработчики, pThumb работает быстрее. Для установки pThumb достаточно удалить phpThumbOf и установить pThumb. Не стоит бояться за то, что после этой замены что-то сломается на сайте, так как оба сниппета используют одинаковые пространства имён.
8 Мобильная версия сайта
Есть два способа оптимизировать сайт для мобильных посетителей:
- Адаптивная вёрстка
- Мобильная версия сайта
8.1 Адаптивная вёрстка
Это менее затратный для разработчика путь. Недостаток его лишь в том, что пользователь мобильного устройства получает фактически то же самое, что и пользователь настольного компьютера: те же скрипты, те же стили, те же изображения (не всегда, но на практике — всегда). Это увеличивает время загрузки и рендеринга страницы. Может пострадать также и производительность, что негативно сказывается на аккумуляторе и отклике интерфейса сайта.
8.2 Мобильная версия сайта
Создание мобильной версии сайта зависит от используемой системы, на которой создан сайт (MODX, Evolution CMS, Laravel и так далее). Особенность этого способа в том, что пользователям настольных компьютеров и пользователям мобильных устройств отдаются разные ресурсы (вёрстка, изображения, CSS/JavaScript-файлы). Я уже писал статью о (создании мобильной версии сайта на CodeIgniter и для MODX Revolution.
9 Мобильное приложение
Если у сайта есть постоянные посетители, то есть смысл сделать мобильное приложение. В таком случае объём траффика между сайтом и мобильным устройством уменьшится, так как будет передаваться только сам контент, а код для отображения интерфейса уже будет содержаться в приложении. Затраты на разработку приложения и его сопровождение — это уже другая история.
Вывод
Надеюсь, статья была полезной :)