Розгін сайту з 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 #accessibility #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 #accessibility #seo
Одеса 
Вільний для роботи
Запропонувати роботу