Кейс: как создать сайт в зеленой зоне PageSpeed без танцев с бубном

Понятно, что скорость загрузки можно докрутить до значений, близких к 100 по PageSpeed, для любого проекта на любом конструкторе или CMS. Но всегда ли такие показатели идут из коробки?

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

Всем привет, меня зовут Андрей, в IT в области разработки и интеграции работаю c 2004 года. А с 2011, сразу после того, как мне закосячили сайт горе-фрилансеры, начал погружаться в веб. В 2013 году появилась студия. К 2016 по мере развития мы начали регулярно сталкиваться с задачами, которые требовали очень быстрого решения. Так мы открыли для себя блочные конструкторы, а в частности Тильду.

В 2022 случился новый вызов, не знаю как у кого в IT, а у нас начали срываться контракты, а бюджеты скудеть. Не то чтобы мы прям стали банкротами, но в середине года я понял — надо искать новый рынок, пока не поздно. Интуиция подсказала копать в сторону эконом-сегмента создания сайтов. Полгода экспериментов и отладки процессов и в итоге в январе 2023 года появился тогда еще пилотный проект Aince, а сегодня уже полноценная веб-студия по созданию сайтов на конструкторах.

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

Итак, клиент — агентство, специализирующееся на продвижении строительных и девелоперских проектов. Их специфика в том, что необходимо иметь порядка 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 пунктов. И это отличный подход, пользователь получает быструю загрузку — и все счастливы.

Разумеется, цифры по скорости загрузки до значений, близких к 100 по PageSpeed, можно докрутить для любого проекта. Для этого нужно поправить ошибки, которые вам выдаст сам PageSpeed. Для ускорения развернуть и отладить инфраструктуру для раздачи контента CDN. Проблема в том, что это все надо делать, а работа по настройке и сетевая инфраструктура тоже стоит денег и совершенно не подходит для проектов в бюджетом менее 50 000 р.

Craftum все это предоставляет из коробки.

Справедливости ради отмечу (для тех, кто не в курсе и может сделать не совсем корректные выводы), что показатель производительности плавает и напрямую зависит от загруженности сети в целом. Первый тест, скрины которого мы и опубликовали, попал в окно средней загруженности. Позже мы перепроверяли несколько раз, худший результат по производительности у нас составил 79 на телефоне и 90 на компьютере, но это все равно очень и очень достойно для решения из коробки!

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