⚡️ Как PageSpeed привёл меня к созданию собственного CSS-фреймворка
Кейс с реального MODX-проекта
В SEO-сообществах до сих пор спорят, насколько важны высокие баллы PageSpeed.
Лагерь “Яндекс”: «Это бесполезная метрика. Главное — поведенческие и контент».
Лагерь “Google”: «Зелёная зона (90+) обязательна, иначе в ТОП не попадёшь».
Моя позиция: нейтральная, хуже точно не будет. Скорость — это в первую очередь комфорт для пользователя, а уже потом фактор ранжирования.
Но главное: честная скорость важнее цифр PageSpeed.
🔴 Кейс: Как я ускорял крупный MODX-сайт на Bootstrap 4
Недавно ко мне пришёл довольно крупный проект на MODX. Показатели PageSpeed были в красной зоне — ниже 50. Классический набор проблем: Bootstrap 4 → тонна CSS/JS → куча устаревших jQuery-библиотек → тяжёлая сетка → отсутствие оптимизации.
Первые шаги — «на минималках»:
- минификация и склейка CSS/JS,
- сжатие HTML,
- WebP,
- кэширование, и прочие мелочи.
Результат: PageSpeed вырос до 61.
Но фактическая скорость почти не изменилась. Пользователь всё так же ждал.
Знакомо? :)
🧱 Чтобы получить честные 90+ пришлось переверстать всё
Я оставил от Bootstrap только сетку (и то уже от 5-й версии),
а всё остальное собрал вручную на современном легком JS без старых зависимостей.
И что получилось:
- первый экран начал отрисовываться в 10 раз быстрее,
- сайт стал ощутимо легче,
- PageSpeed упёрся в 89.
И тут вылезли три вещи, которые «ломают» почти каждый сайт:
- Метрика,
- Веной (чат),
- Мегафон (виджет перезвони).
Это те вещи, которые нельзя выкинуть, но они тянут скорость вниз.
Решение: отложенная загрузка
- Метрика → +1 сек,
- Чат и «перезвонишку» → после полной отрисовки страницы.
Итог: 98 баллов PageSpeed.
Если интересно — могу сделать отдельный пост, как правильно откладывать загрузку внешних скриптов.
💡 Почему в этой истории Bootstrap?
Всё просто: каждый второй MODX-сайт страдает от одной и той же проблемы — перегруженного Bootstrap.
Русскоязычное MODX-сообщество его любит: модули и сниппеты часто используют именно его разметку.
Но Bootstrap — это комбайн, который тащит на себе сотни килобайт CSS и JS, даже если сайту нужны только:
- сетка,
- кнопка,
- пара цветов,
- и пара отступов.
🛠 Так родился Light Code Framework
Именно на этой рутине и появилась идея: создать CSS-фреймворк, который можно подключить вместо Bootstrap на текущем сайте — без «развала» верстки.
Цели Light Code Framework:
- быть в разы легче Bootstrap,
- сразу давать прирост PageSpeed,
- сохранять сетку и базовую разметку,
- иметь всё нужное и ни грамма лишнего.
❓ Вопрос к сообществу
Какой у вас максимум (или антирекорд) PageSpeed?
И как часто сталкиваетесь с «зависимостью» от Bootstrap в проектах?
Пишите — обсудим.
🔜 В следующем посте
Протестируем ТОП нейросетей: смогут ли они написать такой фреймворк или хотя бы его основу.
#LightCodeDev #MODX #PageSpeed #FastDevLab
Кейс с реального MODX-проекта
В SEO-сообществах до сих пор спорят, насколько важны высокие баллы PageSpeed.
Лагерь “Яндекс”: «Это бесполезная метрика. Главное — поведенческие и контент».
Лагерь “Google”: «Зелёная зона (90+) обязательна, иначе в ТОП не попадёшь».
Моя позиция: нейтральная, хуже точно не будет. Скорость — это в первую очередь комфорт для пользователя, а уже потом фактор ранжирования.
Но главное: честная скорость важнее цифр PageSpeed.
🔴 Кейс: Как я ускорял крупный MODX-сайт на Bootstrap 4
Недавно ко мне пришёл довольно крупный проект на MODX. Показатели PageSpeed были в красной зоне — ниже 50. Классический набор проблем: Bootstrap 4 → тонна CSS/JS → куча устаревших jQuery-библиотек → тяжёлая сетка → отсутствие оптимизации.
Первые шаги — «на минималках»:
- минификация и склейка CSS/JS,
- сжатие HTML,
- WebP,
- кэширование, и прочие мелочи.
Результат: PageSpeed вырос до 61.
Но фактическая скорость почти не изменилась. Пользователь всё так же ждал.
Знакомо? :)
🧱 Чтобы получить честные 90+ пришлось переверстать всё
Я оставил от Bootstrap только сетку (и то уже от 5-й версии),
а всё остальное собрал вручную на современном легком JS без старых зависимостей.
И что получилось:
- первый экран начал отрисовываться в 10 раз быстрее,
- сайт стал ощутимо легче,
- PageSpeed упёрся в 89.
И тут вылезли три вещи, которые «ломают» почти каждый сайт:
- Метрика,
- Веной (чат),
- Мегафон (виджет перезвони).
Это те вещи, которые нельзя выкинуть, но они тянут скорость вниз.
Решение: отложенная загрузка
- Метрика → +1 сек,
- Чат и «перезвонишку» → после полной отрисовки страницы.
Итог: 98 баллов PageSpeed.
Если интересно — могу сделать отдельный пост, как правильно откладывать загрузку внешних скриптов.
💡 Почему в этой истории Bootstrap?
Всё просто: каждый второй MODX-сайт страдает от одной и той же проблемы — перегруженного Bootstrap.
Русскоязычное MODX-сообщество его любит: модули и сниппеты часто используют именно его разметку.
Но Bootstrap — это комбайн, который тащит на себе сотни килобайт CSS и JS, даже если сайту нужны только:
- сетка,
- кнопка,
- пара цветов,
- и пара отступов.
🛠 Так родился Light Code Framework
Именно на этой рутине и появилась идея: создать CSS-фреймворк, который можно подключить вместо Bootstrap на текущем сайте — без «развала» верстки.
Цели Light Code Framework:
- быть в разы легче Bootstrap,
- сразу давать прирост PageSpeed,
- сохранять сетку и базовую разметку,
- иметь всё нужное и ни грамма лишнего.
❓ Вопрос к сообществу
Какой у вас максимум (или антирекорд) PageSpeed?
И как часто сталкиваетесь с «зависимостью» от Bootstrap в проектах?
Пишите — обсудим.
🔜 В следующем посте
Протестируем ТОП нейросетей: смогут ли они написать такой фреймворк или хотя бы его основу.
#LightCodeDev #MODX #PageSpeed #FastDevLab
👍4
🤖 #AITools: Тестируем ТОП-6 нейросетей на кодинг! Смогут ли они написать Light Code Framework?
В прошлый раз мы обсудили, что для чистых 90+ PageSpeed нужен легкий CSS-фреймворк вместо раздутого Bootstrap. Сегодня — тест-драйв: Могут ли нейросети сделать мою работу и написать этот фреймворк за меня?
Участники теста (ТОП-модели): Qwen2.5-Max, Deepseek, Grok 4, Gemini (Google), ChatGPT 5, Claude Sonet 4.5 (везде, где можно включен режим рассуждения и поиска в интернете).
📝 Лайт-Промт:
" Ты профессиональный Web разработчик, со стажем 20 лет. Твоя задача разработать CSS / JS фреймворк подобный bootstrap 5. В идеале чтобы он и использовал его классы, сетки и т.п. Но бутстрап считаю сильно перегружен кнопки 10 цветов и т.п. и его JS ну такой себе. Ему нужно сильно почикать CSS оставить, к примеру по 3 цвета (кнопок и т.п.), весь JS переписать."
📉 Результаты: Провал и костыли
- Qwen2.5-Max: ❌ Полный провал. Порекомендовал использовать несуществующий кастомайзер Bootstrap и 'почистить' Sass-переменные вручную. То есть, свалил работу на меня.
- Gemini: ❌ Не справился. Набросал Sass-шаблон (тупое подключение Bootstrap по частям) и написал нативный JS только для одного компонента — Modal. Бесполезно.
- ChatGPT 5: 🤦♂️ Фиаско. Позадавал вопросы, пообещал архив, а в итоге выдал HTML с пустыми CSS и JS файлами. Спасибо за потраченное время.
Deepseek / Grok 4: ⚠️ Частичный успех. Набросали работающий CSS, JS и HTML. Но забили на половину утилит. Им можно заменить сайт на Bootstrap? Нет, он развалится. Но можно заставить их доработать.
🏆 Победитель: Claude Sonet 4.5
Я тестировал его через Perplexity.ai, и он реально удивил!
✅ Claude Sonet 4.5 сразу (без дополнительных вопросов) создал все файлы: CSS, JS и HTML, причем:
- Сделал страницу с документацией фреймворка.
- Добавил рабочий переключатель цветовых схем прямо в документацию.
- Даже создал документацию в PDF-файле.
Лайк ему однозначно! Он единственный понял задачу комплексно и сразу выдал готовый продукт для дальнейшей доработки.
➡️ Что дальше? От идеи к GitHub
Сейчас я иду ковыряться в сгенерированном коде Claude Sonet. Посмотрю, что нужно доработать (и заставлю его же исправлять косяки).
А главное: я начал разработку сайта FasDevLab, чтобы ускориться, выбрал готовый премиум шаблон Porto, который использует Bootstrap 5.
Мой дальнейший план — заменить в нем Bootstrap на новоиспеченный Light Code Framework.
Если замена пройдет гладко, фреймворк можно заливать на GitHub, создавать полноценную документацию и выводить в свет!
❓ Вопрос к вам: какая нейросеть вас чаще всего спасает в кодинге? И какой компонент (кроме сетки) вы считаете критичным для любого Bootstrap-подобного фреймворка?
#AITools #LightCodeDev #Coding #FastDevLab
В прошлый раз мы обсудили, что для чистых 90+ PageSpeed нужен легкий CSS-фреймворк вместо раздутого Bootstrap. Сегодня — тест-драйв: Могут ли нейросети сделать мою работу и написать этот фреймворк за меня?
Участники теста (ТОП-модели): Qwen2.5-Max, Deepseek, Grok 4, Gemini (Google), ChatGPT 5, Claude Sonet 4.5 (везде, где можно включен режим рассуждения и поиска в интернете).
📝 Лайт-Промт:
" Ты профессиональный Web разработчик, со стажем 20 лет. Твоя задача разработать CSS / JS фреймворк подобный bootstrap 5. В идеале чтобы он и использовал его классы, сетки и т.п. Но бутстрап считаю сильно перегружен кнопки 10 цветов и т.п. и его JS ну такой себе. Ему нужно сильно почикать CSS оставить, к примеру по 3 цвета (кнопок и т.п.), весь JS переписать."
📉 Результаты: Провал и костыли
- Qwen2.5-Max: ❌ Полный провал. Порекомендовал использовать несуществующий кастомайзер Bootstrap и 'почистить' Sass-переменные вручную. То есть, свалил работу на меня.
- Gemini: ❌ Не справился. Набросал Sass-шаблон (тупое подключение Bootstrap по частям) и написал нативный JS только для одного компонента — Modal. Бесполезно.
- ChatGPT 5: 🤦♂️ Фиаско. Позадавал вопросы, пообещал архив, а в итоге выдал HTML с пустыми CSS и JS файлами. Спасибо за потраченное время.
Deepseek / Grok 4: ⚠️ Частичный успех. Набросали работающий CSS, JS и HTML. Но забили на половину утилит. Им можно заменить сайт на Bootstrap? Нет, он развалится. Но можно заставить их доработать.
🏆 Победитель: Claude Sonet 4.5
Я тестировал его через Perplexity.ai, и он реально удивил!
✅ Claude Sonet 4.5 сразу (без дополнительных вопросов) создал все файлы: CSS, JS и HTML, причем:
- Сделал страницу с документацией фреймворка.
- Добавил рабочий переключатель цветовых схем прямо в документацию.
- Даже создал документацию в PDF-файле.
Лайк ему однозначно! Он единственный понял задачу комплексно и сразу выдал готовый продукт для дальнейшей доработки.
➡️ Что дальше? От идеи к GitHub
Сейчас я иду ковыряться в сгенерированном коде Claude Sonet. Посмотрю, что нужно доработать (и заставлю его же исправлять косяки).
А главное: я начал разработку сайта FasDevLab, чтобы ускориться, выбрал готовый премиум шаблон Porto, который использует Bootstrap 5.
Мой дальнейший план — заменить в нем Bootstrap на новоиспеченный Light Code Framework.
Если замена пройдет гладко, фреймворк можно заливать на GitHub, создавать полноценную документацию и выводить в свет!
❓ Вопрос к вам: какая нейросеть вас чаще всего спасает в кодинге? И какой компонент (кроме сетки) вы считаете критичным для любого Bootstrap-подобного фреймворка?
#AITools #LightCodeDev #Coding #FastDevLab
👍2