Как создать сайт в зеленой зоне PageSpeed без танцев с бубном
Понятно, что скорость загрузки можно докрутить до значений, близких к 100 по PageSpeed, для любого проекта на любом конструкторе или CMS. Но всегда ли такие показатели идут из коробки?
В текущей статье я хотел бы разобрать кейс одного из наших клиентов, который для нас открыл Craftum — не только как простое и понятное решение для сайтов, но и как конструктор, который показал феноменальные данные по скорости загрузки сайтов. Причем не просто из коробки без дополнительных настроек, а еще и нагруженный примерно 15 000 дополнительных строчек CSS и JS для его кастомизации под проект.
Итак, клиент — агентство, специализирующееся на продвижении строительных и девелоперских проектов. Их специфика в том, что необходимо иметь порядка 100 шаблонов проектов, из которых в активной фазе находится только несколько. Tilda для такого объема сайтов выходит в кругленькую сумму и держать их все на ней экономически нецелесообразно.
В качестве альтернативы Tilda клиент нашел другого подрядчика и начал экспериментировать с решениями на MODX. Бюджетное содержание обернулось высокой ценой регулярных доработок под новые задачи, а главное — сроки начали проседать. Руками маркетолога MODX как конструктор не поправить.
На фоне этой боли клиент и узнал об Aince и Craftum. Узнав наши условия, он отнесся с недоверием, так как, по его мнению, наш оффер был неправдоподобным по цене и срокам — дешевле и быстрее примерно раза в 3, чем он привык. Не откладывая в долгий ящик, в качестве эксперимента было решено перенести один из свежих, пока еще неактивных проектов, на Craftum и дальше уже смотреть, что получится.
На все про все ушло 5 дней. Хоть мы и называем это переносом, по факту мы создаем новый сайт, поэтому это не ctrl+C/ctrl+V. Естественно, совесть нам не позволила пройти мимо, и мы поправили дизайн и некоторые элементы.
Важный момент. Перенести сайт удалось полностью на стандартные блоки конструктора без использования дизайн-блока (аналог Zero Block в Tilda).
Дизайн-блок — отличный инструмент, когда нужно нарисовать один раз что-то уникальное, но, если мы работаем с регулярно обновляемым контентом, дизайн-блоки это очень ресурсозатратно. При каждой правке нужно как минимум проверять и регулярно поправлять дизайн во всех 5 состояниях для различных устройств и поворотов экранов, так как при изменении объема текста или картинки что-нибудь да съедет.
Но как же быть с кастомизацией стандартных блоков? Переверстывать каждый раз сайт с нуля было бы весьма затратно, поэтому нужно было как-то оптимизировать процесс. Пробовали создать библиотеку готовых решений, но идея оказалась не продуктивна, слишком много избыточного CSS. В поисках решения мы разработали целую методологию и написали под нее минималистичный CSS-фреймворк. В итоге мы в состоянии кастомизировать любой стандартный блок как угодно. Даже меньшим числом усилий, чем если бы мы использовали настройки Craftum, не говоря уже о дизайн-блоках.
Подробнее о методологии и фреймворке я обязательно напишу отдельно, а еще планирую выложить сам фреймворк и документацию в свободный доступ, так что подпишитесь, если интересно, а пока вернемся к кейсу.
Результаты тестов
По завершению каждого проекта мы проводим ряд тестов перед сдачей. Один из них PageSpeed Insights. И тут уникальная для нас ситуация: есть живой рабочий сайт, сверстанный вручную. Решили сравнить скорость загрузки старого сайта и нового.
Результаты старого сайта на MODX вполне предсказуемы и в каком-то смысле даже весьма неплохи, так как это одностраничник с большим количеством визуального контента.
Cтарый сайт на MODX:
Новый сайт на Craftum:
Наш самый любимый в прошлом, но сегодня ушедший на второе место инструмент — Тильда. Специально для статьи я подготовил сайт на этой платформе. Поскольку нам нужно было провести только тесты, я сделал просто эквивалент по стандартным блокам и залил исходный контент без кастомизации. А чтобы было совсем релевантно, вставил CSS и JS — тот, что написан для Craftum, чтобы достичь более точных условий сравнения.
Тильда тоже пушка вроде бы... но есть нюанс. Она, как я понимаю, делает один финт: не отдает сразу всю страницу, как Craftum, а динамически рендерит все, что ниже первого экрана. Отсюда показатель производительности поднимается на 20-30 пунктов. И это отличный подход, пользователь получает быструю загрузку — и все счастливы.
Но если вы кастомизируете сайт собственным кодом, например встраиваете калькулятор на VUE, то это прилично добавляет работы. С Craftum такой проблемы нет.
Разумеется, цифры по скорости загрузки до значений, близких к 100 по PageSpeed, можно докрутить для любого проекта. Для этого нужно поправить ошибки которые вам выдаст сам PageSpeed. Для ускорения развернуть и отладить инфраструктуру для раздачи контента CDN. Проблема в том, что это все надо делать, а работа по настройке и сетевая инфраструктура тоже стоит денег и совершенно не подходит для проектов в бюджетом менее 50 000р.
Craftum все это предоставляет из коробки.
Справедливости ради отмечу (для тех кто не в курсе и может сделать не совсем корректные выводы) , что показатель Производительности плавает и на прямую зависит от загруженности сети в целом. Первый тест, скрины которого мы и опубликовали попал в окно средней загруженности. Позже мы перепроверяли несколько раз, худший результат по производительности у нас составил 79 на телефоне и 90 на компьютере, но это все равно очень и очень достойно для решения из коробки!
Приятно, что на рынке появилось решение, которое оптимизировано так, что довольно-таки сложно сломать и при этом нет проблем с внедрением любого дополнительного кода. Вкупе с простотой это делает Craftum одним из лучших решений для небольших проектов здесь и сейчас.