w tym artykule
Ostatnio zainteresowałem się optymalizacją wyników szybkości ładowania stron po tym, jak Google ogłosiło nowe metryki Core Web Vitals i że będą one kluczowym czynnikiem rankingowym w przyszłości. Zasadniczo premiują one strony, które oferują najszybsze i najlepsze wrażenia na urządzeniach mobilnych. I właśnie teraz pokażę Ci, jak to zrobić.
Optymalizacja zasobów
W dużej mierze sprowadza się to do optymalizacji zasobów, takich jak dostosowanie rozmiaru obrazów do ich wyświetlanego rozmiaru. Na przykład, nie ma sensu używać obrazu o szerokości 1000 pikseli, który w CSS jest skalowany do 300 pikseli na ekranie. To marnowanie miejsca. Kompresja bezstratna wszystkich zasobów może zmniejszyć ich rozmiar nawet o 80%. D bezstratnej kompresji obrazów można użyć narzędzi takich jak Compressor.io.
Kolejna sprawa to obrazy tła. Po co ładować zdjęcie stockowe o szerokości 2300 pikseli na ekran telefonu o szerokości 400 pikseli? Zmień rozmiar tego obrazu na 500 pikseli i skompresuj go. Z 2,3 MB robi się 37 KB lub mniej. To ogromna redukcja rozmiaru i czasu ładowania. Na tabletach i komputerach możesz po prostu ustawić większy obraz o szerokości 2300 pikseli. Widziałem stronę, gdzie ktoś ładował kilka obrazów tła o szerokości 4000 pikseli – była strasznie wolna. Sama kompresja to za mało, bo nawet jeśli skompresujesz o 70%, to 70% z 4 MB to wciąż 1,2 MB, co jest dużą wartością dla obrazu na urządzeniach mobilnych. Zmień rozmiar obrazów, ładuj mniejsze na telefony, a większe na tablety i komputery i skompresuj je.
Kolejna kwestia to wybór odpowiednich rozmiarów obrazów dla różnych rozmiarów ekranów, a do tego służy atrybut srcset. Możesz przeczytać o nim na MDN. Działa to tak, że podajesz listę obrazów o różnych rozmiarach, które mają się ładować dla określonych rozmiarów ekranów, a src służy jako obraz zapasowy. Dzięki temu, jeśli masz obraz o szerokości 700 pikseli w HTML na komputerze, możesz ładować jego wersję o szerokości 350 pikseli na ekranach poniżej 480 pikseli – lub jakikolwiek rozmiar wybierzesz – co zmniejsza rozmiar pliku i przyspiesza ładowanie.
Po wykonaniu tych kroków upewnij się, że dodajesz odpowiednie atrybuty wysokości i szerokości do swoich obrazów, bo Google wymaga ich dla każdego z nich. Pomaga to zarezerwować miejsce na obraz przed jego załadowaniem i zmniejsza przesunięcia układu treści.
Lazy Loading
Kolejna kwestia to opóźnione ładowanie, czyli użycie atrybutu loading="lazy", który jest wspierany przez większość przeglądarek. Wykorzystuje ono wbudowane opóźnione ładowanie elementów strony w przeglądarce, bez konieczności pisania skomplikowanego kodu JavaScript. Jednak nie zalecam stosowania go dla obrazów „powyżej linii przewijania” (ang. above the fold), czyli tych widocznych na ekranie zaraz po załadowaniu strony. Jeśli obraz znajduje się w sekcji początkowej strony i jest widoczny w obszarze wyświetlania, nie używaj opóźnionego ładowania, bo może to powodować przesunięcia układu treści.
Usuń jQuery, Google Fonts i inne nieistotne linki CDN
Wszystko ma swój czas i miejsce, a czas jQuery minął lata temu. Przełączanie klas i inne funkcje można teraz obsługiwać w czystym JavaScript, więc naprawdę nie ma powodu, by używać jQuery. Jest przerośnięty, a jego usunięcie może zwiększyć bezpieczeństwo strony i znacznie przyspieszyć jej ładowanie. Wynik PageSpeed Insights od Google wskaże jQuery jako element do usunięcia, by poprawić ocenę, więc wszyscy powinniśmy przyzwyczaić się do pracy bez niego.
Kolejna sprawa to linki CDN do Google Fonts. Zamiast umieszczać je w sekcji <head>, pobierz fonty z Google, jeśli nie są to standardowe fonty dostępne w przeglądarkach. Używam @font-face, by ładować fonty lokalnie. Przechowuję pobrane pliki w folderze „fonts”, a następnie ładuję je w pliku styles.css, który jest współdzielony na wszystkich podstronach witryny. Dzięki temu eliminuję konieczność używania CDN Google Fonts, co usuwa je jako zasób blokujący renderowanie.
Możesz wkleić ten kod do arkusza CSS, który jest współdzielony na wszystkich podstronach. Zastąp ścieżkę pliku ścieżką do pobranego fontu. Właściwość font-family w tym kodzie to nazwa, którą Ty nadajesz fontowi. Nie musi to być “Saans”, jak w przykładowym kodzie. Może nazywać się jak chcesz i później tej nazwy używasz, deklarując font w CSS.
@font-face {
font-family: 'Saans';
src: url('/fonts/Saans.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}Pobierając i ładując fonty lokalnie, możesz wyeliminować potrzebę korzystania z CDN Google, przyspieszyć ładowanie fontów i usunąć zasób blokujący renderowanie. Polecam robić to dla wszystkich stron.
Odrocz nieistotny JavaScript
Na wszystkich znacznikach <script> dodaj atrybut defer do otwierającego znacznika, co „odroczy” jego ładowanie do czasu po załadowaniu strony. Dzięki temu JavaScript nie przeszkadza w ładowaniu HTML i CSS oraz renderowaniu strony. Cierpliwie czeka na swoją kolej, aż wszystko inne zostanie ukończone.
Używaj SVG zamiast PNG, kiedy tylko możesz
Stosuj jak najwięcej SVG zamiast PNG. Pliki SVG są znacznie mniejsze i ładują się szybciej. Korzystam z Iconify, by pobierać grafiki i ikony w formacie SVG – mogę dostosować ich kolory i pobrać plik SVG. Pozwala to też zastąpić FontAwesome, bo to kolejny link CDN, którego nie musisz ładować. Zamiast FontAwesome po prostu wczytuj potrzebne ikony jako SVG. To dużo lżejsze rozwiązanie.
Jeśli możesz, skorzystaj z programu do rysowania wektorowego (Inkscape, Affinity Designer), by przekonwertować loga na format SVG. To dużo bardziej zoptymalizowany i skalowalny format. Możesz zastąpić PNG o rozmiarze 36 KB lub większym plikiem SVG o rozmiarze 2 KB.
Zawsze dobrym pomysłem jest przekonwertowanie loga klienta na format SVG i przekazanie go do wykorzystania na naklejkach, wizytówkach czy koszulkach. Klienci będą Ci za to wdzięczni.
Google Lighthouse
Gdy wszystko jest gotowe, sprawdź wyniki strony w PageSpeed Insights i upewnij się, że wszystko spełnia wymagania. Zazwyczaj wystarczy poprawić kilka kwestii dostępności, takich jak dodanie atrybutów aria-label do linków bez tekstu, znaczników alt do obrazów lub poprawić kontrast. Gdy uzyskasz wynik wydajności strony na poziomie 96+ i niemal 100 we wszystkich pozostałych kategoriach, Twoja strona jest odpowiednio zoptymalizowana i gotowa, by zrobić wrażenie.
To kroki optymalizacyjne, które podejmuję za każdym razem, gdy kończę stronę. Chciałem opisać to szczegółowo dla osób szukających jasnego „procesu” – co robić i jak to robić, bez technicznego żargonu i przydługich, skomplikowanych wyjaśnień. Mam nadzieję, że to pomoże!