В эпоху стремительного развития веб-технологий важность производительности сайта невозможно переоценить. Быстрая загрузка страниц и минимальное количество лишнего кода становятся решающими факторами не только для удовлетворенности пользователей, но и для успешного продвижения в поисковых системах. Мы решили поделиться нашим опытом кардинальной миграции с популярного фреймворка Next.js на статический генератор Eleventy (или 11ty) и рассказать, как этот шаг позволил увеличить производительность сайта на 24%. Изначально наш контентный ресурс etch.
co был построен на базе Next.js — современного React-фреймворка, предлагающего мощные инструменты для разработки динамичных приложений. Однако несмотря на все преимущества Next.js, со временем мы столкнулись с вызовами, связанными с избыточной сложностью, большим количеством Javascript на странице, а также высоким числом зависимостей, которые негативно влияли на скорость работы сайта и его устойчивость к обновлениям. Основным моментом, подтолкнувшим нас к переосмыслению архитектуры, стала необходимость адаптировать сайт для бесперебойной и быстрой работы с минимальным вмешательством после сборки.
Мы понимали, что современные пользователи и поисковые роботы ценят сайты, которые быстро отдают содержимое без перегрузки скриптами и лишними запросами. Выбор в пользу Eleventy был вызван его минимализмом и принципом «build-time only» — генерации статического HTML на этапе сборки без внедрения избыточных JavaScript-скриптов в браузер пользователя. Eleventy не предлагает сложных абстракций или специфических синтаксисов; вместо этого он предоставляет базовые инструменты для шаблонизации HTML, бандлинга CSS и аккуратного вкрапления JavaScript только в необходимых местах. Такое решение обеспечивало чёткое разделение ответственности между сборщиком и браузером, что положительно сказывалось на скорости загрузки страницы. Переход от Next.
js к Eleventy сопровождался впечатляющими изменениями в ключевых метриках. Производительность по Lighthouse выросла с 76 до 97 баллов. Количество JavaScript-кода на главной странице сократилось с 2161 килобайта до 11,3. Вместо 33 скриптов теперь грузится всего 2, что значительно уменьшило нагрузку на браузер и улучшило реактивность интерфейса. Число npm-зависимостей упало с 1115 до 13, а количество строк кода сократилось примерно на треть — с 6877 до 4307.
Такие параметры однозначно свидетельствуют о более чистом и лёгком коде, что способствует стабильности и упрощает поддержку сайта. При этом стоит отметить, что Eleventy не накладывает ограничений на выбор языка шаблонов. Этот факт открывает разработчикам широчайшие возможности для творчества и оптимизации. Мы выбрали язык WebC — современный и удобный формат, который позволяет формировать компоненты из чистого HTML с встроенными стилями и скриптами. Такой подход снизил зависимость от JSX и React, приближая разработку к работе с обычными веб-компонентами.
Хотя освоение WebC потребовало определённых усилий и корректировок, результат оправдал ожидания: мы получили гибкую и понятную структуру кода, позволяющую эффективно управлять компонентами и стилями. Особое внимание мы уделили стилизации. С помощью встроенного бандлера WebC мы аккуратно объединили CSS-файлы в единые пакеты, которые дополнительно прошли процесс минификации и оптимизации с помощью Lightning CSS и Browserslist. Это обеспечило оптимальную загрузку стилей и сокращение общего веса страницы. Такой метод улучшил рендеринг страницы, сделав внешний вид сайта при первом получении пользователем контента максимально быстрым и плавным.
Интерактивность на клиенте была сведена к разумному минимуму. Мы внедрили кастомные веб-компоненты, написанные на стандартном JavaScript, которые активировались только на стороне браузера. Это позволило выводить готовый HTML во время сборки, а уж затем динамически расширять функционал по мере загрузки страницы. Результат оказался впечатляющим: пользователи сразу видели содержимое, без долгого ожидания, а интерактивные элементы дополнялись плавно и без блокировок. Отдельным пунктом стала реализация сервис-воркера для поддержки PWA-функционала.
В отличие от Next.js, для которого мы использовали плагин next-pwa, в Eleventy не существует подобного инструмента. Это оказалось даже плюсом, поскольку мы получили полный контроль над настройками кеширования с помощью Workbox. Мы создали конфигурацию, в которой с помощью injectManifest формировался список предзагружаемых ресурсов, а отдельные стратегии кеширования были прописаны для различных типов контента: изображений, статических страниц и API-запросов. Это позволило добиться стабильной работы оффлайн и быстрой отдачи данных даже при медленном интернете.
В ходе миграции мы столкнулись с некоторыми трудностями. Использование WebC было не всегда интуитивным, существовало несколько способов передачи свойств и переменных в шаблоны, часть решений требовала дополнительной настройки и экспериментов. Однако осознанный выбор в пользу простоты и контроля над кодом позволил отказаться от избыточных плагинов и зависимостей, что повысило стабильность и сократило время на исправление неожиданных ошибок. Стоит подчеркнуть, что мы могли достичь схожих показателей, оставаясь на Next.js, применяя тонкую настройку и оптимизацию бандлов, анализатор и разделение кода.
Однако это требовало большого количества дополнительных действий и времени — решение, которое оправдано для крупных и сложных проектов, но избыточно для сайтов с малой функциональностью и статическим контентом. Миграция на Eleventy стала для нас уроком в том, что инструмент нужно выбирать исходя из конкретных задач, а не следовать модным трендам. Минимализм и отказ от лишнего сложного кода позволяют добиться высокой производительности и стабильности, улучшая пользовательский опыт и облегчая жизнь разработчикам. Наш сайт стал не только быстрее работать в браузере, но и получил более предсказуемый и надёжный процесс сборки, что положительно сказывается на развитии проекта. Мы уверены, что такие подходы находят отклик в командах, которые ценят легковесность и эффективность.
Переход к Eleventy — пример того, как правильный выбор технологии может решить множество проблем и улучшить качество продукта в целом. Этот опыт подтверждает, что иногда стоит отказаться от громоздких инструментов ради простоты, которая часто оказывается более мощной и эффективной.
