Na skrypty warto popatrzeć przez pryzmat tego, czy są każdorazowo używane na naszej stronie. Przykład? Jeśli mamy wtyczkę, która działa tylko na określonej podstronie serwisu (np. wtyczka odpowiadająca za formularz reCaptcha), nie ma potrzeby uruchamiania jej każdorazowo na każdej stronie, skoro będzie działać tylko na podstronie kontakt, na której znajduje się nasz formularz. W tym punkcie warto przeglądnąć wszystkie wtyczki dodane do WordPressa i sprawdzić jaką część faktycznie wykorzystujemy na stronie.
- usunięcie lub opóźnienie skryptów, które są ładowane z zewnątrz
Podobnie jak w przypadku usunięcia niewykorzystanych skryptów JS, i tutaj mamy do czynienia z usunięciem nieużywanych elementów – wtyczek w WordPressie czy modułów w PrestaShop. Przy okazji warto sprawdzić także biblioteki, z których korzysta nasz serwis i zaktualizować je do wyższych wersji bądź, jeśli są nieużywaną „zaszłością”, usunąć ich odnośniki.
Minifikacja, czyli zmniejszenie kodu JavaScript, także zwiększy wydajność serwisu pod kątem FID. Minifikując kod usuwamy m.in. zbędne komentarze, spacje, tabulatory czy znaki nowej linii. Minimalizację JS możemy wykonać ręcznie, za pomocą wtyczki lub zewnętrznych narzędzi np. https://javascript-minifier.com/.
Przy optymalizacji FID warto zastosować wskazówki wskazane przy optymalizacji zdjęć w LCP.
Jak widać optymalizacja JavaScript, w kontekście FID, wychodzi tutaj na pierwszy plan. Chcąc poprawić wskaźnik FID, przede wszystkim powinniśmy się skoncentrować na optymalizacji JavaScript. Więcej informacji na temat technik optymalizacji FID znajdziesz pod adresem https://web.dev/fid/.
Optymalizacja CLS
Zmniejszenie przesunięć w polu widoku przeglądarki możemy wykonać poprzez:
- dodanie atrybutów height i width do obrazów
Dodanie konkretnych wymiarów – wysokości i szerokości w obrazach zminimalizuje ryzyko przesunięć podczas ładowania strony. Warto pamiętać, że obrazy będą miały inną wysokość w wersji desktop oraz w wersji mobile. Tworząc arkusz stylów CSS (odpowiedzialny za wyświetlanie grafiki), należy uwzględnić osobno rozmiar dla wersji desktop oraz dla wersji mobile. Dobrą praktyką jest zastosowanie 4 rozmiarów – dla komputerów z wysoką rozdzielczością 1920px, laptopów do 1360px, tabletów poniżej 900px i urządzeń mobilnych poniżej 580px. Dane dla tabletów i mobile są przykładowe i najlepiej skonfrontować je z danymi z Google Analytics o użytkownikach serwisu. Sprawdzimy te dane w Google Analytics w raporcie: Odbiorcy > Technologia > Przeglądarka i system > Wymiar podstawowy: rozdzielczość ekranu.
- rezerwacja miejsca dla reklam
Jeśli korzystamy z systemu Google Adsens i wydzielamy powierzchnię reklamową w naszym serwisie, warto rozważyć przesunięcie miejsca reklamowego poniżej obszaru above the fold (choć może to ograniczyć klikalność reklam, a tym samym zmniejszyć ich zysk). Dobrą praktyką jest także wyeliminowanie reklam o różnej wysokości.
- optymalizacja ładowania fontów
Optymalizacja ładowania fontów została opisana w kontekście LCP.
Więcej informacji o optymalizacji CLS znajdziemy na stronie https://web.dev/cls/.
Podsumowanie
Podane powyżej rozwiązania są przykładowe. Przed rozpoczęciem optymalizacji zachęcamy przede wszystkim do weryfikacji, jakie błędy są zgłaszane dla poszczególnych podstron w narzędziu PageSpeed Insight i wykonywanie optymalizacji pod ich kątem. Choć prawdą jest, że optymalizacja HMTL, CSS czy JS każdorazowo powinna pozytywnie przyczynić się do poprawy wyników w zakresie podstawowych wskaźników internetowych. Usunięcie niewykorzystanych kodów JS czy CSS, minifikacja kodów HTML, CSS, czy JS jest „bolączką” wielu serwisów, dlatego warto także bliżej spojrzeć na temat ich optymalizacji.