Przyspieszenie strony z 50 do 96 PageSpeed — wszystkie metryki w zielonej strefie
Strona naprawy generatorów. PageSpeed Insights Mobile — 50 punktów.
Zadanie: wprowadzić wszystkie metryki do zielonej strefy bez zmiany designu i układu.
Co zostało zrobione:
Część serwerowa. Skonfigurowano kompresję GZIP przez .htaccess — HTML zmniejszył się z 62 KB do 18 KB, CSS z 88 KB do 7 KB. Ustawiono nagłówki Cache-Control: czcionki są buforowane na 1 rok, obrazy na 30 dni, CSS i JS na 7 dni. Dodano typy MIME dla WebP i WOFF2.
Obrazy. Zdjęcie hero skonwertowane z JPEG 320 KB do WebP: wersja desktopowa 148 KB, wersja mobilna 800px — 42 KB. Zrealizowano responsywny preload z atrybutem fetchpriority=high — przeglądarka zaczyna ładować potrzebny obraz przed parsowaniem CSS.
Czcionki. Google Fonts całkowicie zastąpiono samodzielnie hostowanym Montserrat: 4 pliki WOFF2 (cyrylica i łacina, normalne i kursywne kroje) z unicode-range do ładowania tylko potrzebnego podzbioru. Usunięto 2 zewnętrzne połączenia DNS. font-display: optional — zerowy CLS.
Krytyczny CSS. Cztery pliki CSS zainline'owane bezpośrednio w head strony: tilda-grid, tilda-cover, tilda-blocks, fonts. Zero zewnętrznych blokujących zapytań CSS.
Drugorzędny CSS. Trzy pliki (animation, cards, forms) przetłumaczone na asynchroniczne ładowanie przez preload/onload — nie blokują pierwszego renderowania.
Google Tag Manager. Przeniesiono do opóźnionego uruchomienia: wykonuje się po 2 sekundach od zdarzenia window.load. TBT zmniejszył się z 240 ms do 70 ms.
Dostępność. Dodano aria-label do wszystkich przycisków CTA oraz przycisku wysyłania formularza. Poprawiono kontrast tekstu w stopce (było 2.3:1 — stało się 6.1:1). Dekoracyjne SVG w przyciskach otrzymały aria-hidden. Minimalna wysokość elementów dotykowych na mobilnych — 44px.
SEO. Atrybut lang="uk" na html. Canonical z absolutnym URL. og:image z absolutnym URL. DNS-prefetch dla GTM i Google Analytics.
Wynik:
Wydajność 50 → 96
Dostępność 82 → 97
Najlepsze praktyki 100
SEO 92 → 100
FCP 3.4s → 1.0s
LCP 6.4s → 1.8s
TBT 240ms → 70ms
CLS 0.113 → 0
Blokujących zapytań CSS 6 → 0
#pagespeed #webperformance #lighthouse #tilda #szybkość_strony #optymalizacja #webp #criticalcss #gzip #dostępność #seo
Zadanie: wprowadzić wszystkie metryki do zielonej strefy bez zmiany designu i układu.
Co zostało zrobione:
Część serwerowa. Skonfigurowano kompresję GZIP przez .htaccess — HTML zmniejszył się z 62 KB do 18 KB, CSS z 88 KB do 7 KB. Ustawiono nagłówki Cache-Control: czcionki są buforowane na 1 rok, obrazy na 30 dni, CSS i JS na 7 dni. Dodano typy MIME dla WebP i WOFF2.
Obrazy. Zdjęcie hero skonwertowane z JPEG 320 KB do WebP: wersja desktopowa 148 KB, wersja mobilna 800px — 42 KB. Zrealizowano responsywny preload z atrybutem fetchpriority=high — przeglądarka zaczyna ładować potrzebny obraz przed parsowaniem CSS.
Czcionki. Google Fonts całkowicie zastąpiono samodzielnie hostowanym Montserrat: 4 pliki WOFF2 (cyrylica i łacina, normalne i kursywne kroje) z unicode-range do ładowania tylko potrzebnego podzbioru. Usunięto 2 zewnętrzne połączenia DNS. font-display: optional — zerowy CLS.
Krytyczny CSS. Cztery pliki CSS zainline'owane bezpośrednio w head strony: tilda-grid, tilda-cover, tilda-blocks, fonts. Zero zewnętrznych blokujących zapytań CSS.
Drugorzędny CSS. Trzy pliki (animation, cards, forms) przetłumaczone na asynchroniczne ładowanie przez preload/onload — nie blokują pierwszego renderowania.
Google Tag Manager. Przeniesiono do opóźnionego uruchomienia: wykonuje się po 2 sekundach od zdarzenia window.load. TBT zmniejszył się z 240 ms do 70 ms.
Dostępność. Dodano aria-label do wszystkich przycisków CTA oraz przycisku wysyłania formularza. Poprawiono kontrast tekstu w stopce (było 2.3:1 — stało się 6.1:1). Dekoracyjne SVG w przyciskach otrzymały aria-hidden. Minimalna wysokość elementów dotykowych na mobilnych — 44px.
SEO. Atrybut lang="uk" na html. Canonical z absolutnym URL. og:image z absolutnym URL. DNS-prefetch dla GTM i Google Analytics.
Wynik:
Wydajność 50 → 96
Dostępność 82 → 97
Najlepsze praktyki 100
SEO 92 → 100
FCP 3.4s → 1.0s
LCP 6.4s → 1.8s
TBT 240ms → 70ms
CLS 0.113 → 0
Blokujących zapytań CSS 6 → 0
#pagespeed #webperformance #lighthouse #tilda #szybkość_strony #optymalizacja #webp #criticalcss #gzip #dostępność #seo
Odessa 
Gotowy do podjęcia pracy
Zaproponuj zlecenie