Mikrooptymalizacje, które robią różnicę: obrazy, fonty i critical CSS

Dlaczego „drobiazgi” sumują się do dużych zysków

W wielu projektach największy progres w performance nie wynika z jednej wielkiej zmiany, tylko z serii małych optymalizacji.

Obrazy

• Używaj WebP lub AVIF tam, gdzie ma sens
• Lazy loading dla elementów poza pierwszym ekranem
• Poprawne rozmiary i srcset
• Kompresja bez utraty jakości widocznej

Fonty

• Wybierz tylko potrzebne odmiany i subsety
• Preload dla fontów krytycznych
• font-display: swap, żeby nie blokować renderu

CSS i JS

• Critical CSS dla pierwszego widoku
• Minifikacja i usunięcie nieużywanego CSS
• Ładuj skrypty warunkowo i opóźniaj third party