Co to jest LCP i dlaczego warto się przejmować?
Zacznijmy od przypomnienia, czym właściwie jest LCP, a nie, to nie nowe schorzenia. Largest Contentful Paint, w skrócie LCP, to jedna z metryk używanych przez Google do oceny wydajności strony. Mierzy czas, jaki upływa, zanim największy element widoczny w oknie przeglądarki zostanie w pełni załadowany. Jeśli nie zależy ci na SEO, to może cię to nie rusza, ale jeśli chcesz, by twoja strona piłowała w wynikach, warto zawrócić uwagę.
1. Optymalizacja obrazów
Tak, brzmi jak znowu to samo, ale prawda jest taka, że obrazy często są największym elementem na stronie. Możesz użyć formatu WebP, który oferuje lepszą kompresję lub skorzystać z narzędzi takich jak ImageOptim. Zresztą, czy ktoś jeszcze używa PNG zamiast SVG dla grafik wektorowych?
2. Preload najważniejszych zasobów
Nie czekaj, aż przeglądarka zdecyduje się pobrać twoje kluczowe zasoby. Ogarnij <link rel="preload"> dla głównych fontów i obrazów. Działa to jak VIP-pas dla twoich plików.
3. Wykorzystaj Lazy Loading
Kolejny klasyk, ale nie można go pominąć. Jeśli masz masę obrazów i wideo, które nie muszą być załadowane od razu, użyj lazy loading. W końcu kto potrzebuje całego albumu zdjęć od razu na start?
4. Minimalizacja CSS i JS
Twoje pliki CSS i JavaScript mogą być bardziej opasłe niż myślisz. Użyj narzędzi takich jak Terser czy CSSNano, aby zmniejszyć ich wagę. Każdy kilobajt mniej to większa szansa na lepszy LCP.
5. Serwer gotowy na wyzwania
Twoja strona może być szybka w teorii, ale jeśli serwer jest jak auto na ręcznym, to nic z tego. Zastanów się nad CDN (Content Delivery Network) albo chociaż uprzedź swojego dostawcę, że możesz potrzebować więcej zasobów w godzinach szczytu.
6. Skróć czas odpowiedzi serwera
Nie, nie chodzi o twojego admina, który wiecznie nie odbiera telefonu. Chodzi o rzeczywisty czas odpowiedzi serwera (TTFB). Im szybciej serwer odpowie, tym szybciej zacznie ładować się największy element. Czasami kilka code review wystarczy, by znaleźć wąskie gardła.
7. Unikaj render-blocking resources
Jeśli twoje zasoby blokują renderowanie strony, to mamy problem. Przenieś skrypty na dół strony lub użyj atrybutu defer. To jak usunięcie korka na autostradzie – wszystko płynie szybciej.
Najlepsza strona to szybka strona. Nie zwlekaj i napisz do nas jeśli potrzebujesz pomocy z optymalizacją.