Разгон сайта с 50 до 96 PageSpeed — все метрики в зеленой зоне
Сайт ремонта генераторов. PageSpeed Insights Mobile — 50 баллов.
Задача: вывести все метрики в зеленую зону без изменения дизайна и верстки.
Что сделано:
Серверная часть. Настроено GZIP-сжатие через .htaccess — HTML уменьшился с 62 КБ до 18 КБ, CSS с 88 КБ до 7 КБ. Прописаны заголовки Cache-Control: шрифты кэшируются на 1 год, изображения на 30 дней, CSS и JS на 7 дней. Добавлены MIME-типы для WebP и WOFF2.
Изображения. Hero-фото конвертировано с JPEG 320 КБ в WebP: десктопная версия 148 КБ, мобильная версия 800px — 42 КБ. Реализован адаптивный preload с атрибутом fetchpriority=high — браузер начинает загружать нужное изображение до парсинга CSS.
Шрифты. Google Fonts полностью заменено на self-hosted Montserrat: 4 файла WOFF2 (кириллица и латиница, нормальное и курсивное начертание) с unicode-range для загрузки только нужного подсета. Устранено 2 внешних DNS-соединения. font-display: optional — нулевой CLS.
Критический CSS. Четыре CSS-файла заинлайнованы напрямую в head страницы: tilda-grid, tilda-cover, tilda-blocks, fonts. Ноль внешних блокирующих CSS-запросов.
Вторичный CSS. Три файла (animation, cards, forms) переведены на асинхронную загрузку через preload/onload — не блокируют первую отрисовку.
Google Tag Manager. Перенесено в отложенный запуск: выполняется через 2 секунды после события window.load. TBT снизился с 240 мс до 70 мс.
Доступность. Добавлены aria-label на все CTA-кнопки и кнопку отправки формы. Исправлена контрастность текста в футере (было 2.3:1 — стало 6.1:1). Декоративные SVG в кнопках получили aria-hidden. Минимальная высота touch-элементов на мобиле — 44px.
SEO. Атрибут lang="uk" на html. Canonical с абсолютным URL. og:image с абсолютным URL. DNS-prefetch для GTM и Google Analytics.
Результат:
Performance 50 → 96
Accessibility 82 → 97
Best Practices 100
SEO 92 → 100
FCP 3.4s → 1.0s
LCP 6.4s → 1.8s
TBT 240ms → 70ms
CLS 0.113 → 0
Блокирующих CSS-запросов 6 → 0
#pagespeed #webperformance #lighthouse #tilda #скорость_сайта #оптимизация #webp #criticalcss #gzip #доступность #seo
Задача: вывести все метрики в зеленую зону без изменения дизайна и верстки.
Что сделано:
Серверная часть. Настроено GZIP-сжатие через .htaccess — HTML уменьшился с 62 КБ до 18 КБ, CSS с 88 КБ до 7 КБ. Прописаны заголовки Cache-Control: шрифты кэшируются на 1 год, изображения на 30 дней, CSS и JS на 7 дней. Добавлены MIME-типы для WebP и WOFF2.
Изображения. Hero-фото конвертировано с JPEG 320 КБ в WebP: десктопная версия 148 КБ, мобильная версия 800px — 42 КБ. Реализован адаптивный preload с атрибутом fetchpriority=high — браузер начинает загружать нужное изображение до парсинга CSS.
Шрифты. Google Fonts полностью заменено на self-hosted Montserrat: 4 файла WOFF2 (кириллица и латиница, нормальное и курсивное начертание) с unicode-range для загрузки только нужного подсета. Устранено 2 внешних DNS-соединения. font-display: optional — нулевой CLS.
Критический CSS. Четыре CSS-файла заинлайнованы напрямую в head страницы: tilda-grid, tilda-cover, tilda-blocks, fonts. Ноль внешних блокирующих CSS-запросов.
Вторичный CSS. Три файла (animation, cards, forms) переведены на асинхронную загрузку через preload/onload — не блокируют первую отрисовку.
Google Tag Manager. Перенесено в отложенный запуск: выполняется через 2 секунды после события window.load. TBT снизился с 240 мс до 70 мс.
Доступность. Добавлены aria-label на все CTA-кнопки и кнопку отправки формы. Исправлена контрастность текста в футере (было 2.3:1 — стало 6.1:1). Декоративные SVG в кнопках получили aria-hidden. Минимальная высота touch-элементов на мобиле — 44px.
SEO. Атрибут lang="uk" на html. Canonical с абсолютным URL. og:image с абсолютным URL. DNS-prefetch для GTM и Google Analytics.
Результат:
Performance 50 → 96
Accessibility 82 → 97
Best Practices 100
SEO 92 → 100
FCP 3.4s → 1.0s
LCP 6.4s → 1.8s
TBT 240ms → 70ms
CLS 0.113 → 0
Блокирующих CSS-запросов 6 → 0
#pagespeed #webperformance #lighthouse #tilda #скорость_сайта #оптимизация #webp #criticalcss #gzip #доступность #seo