Odpowiednie zakolejkowanie najważniejszych zasobów na stronie wpływa bezpośrednio na metrykę LCP, która mierzy czas renderowania się największego elementu w obszarze ATF (Above The Fold). Elementy, które ładują się w obszarze BTF (Below The Fold) nie mają wpływu na tę metrykę. Jest to zgodne z tym, co dla użytkownika jest najważniejsze.
Dobrą praktyką jest odpowiednie umieszczenie zasobów w kodzie HTML, aby na górze ładowały się jako pierwsze arkusze stylów CSS, gdyż to one odpowiadają za renderowanie się strony oraz fonty.
Kolejna bardzo ważna kwestia, to wykonywanie kodu JS, który dołączony jest w sekcji HEAD. Jeżeli w kodzie nie ma żadnego skryptu, który odpowiedzialny jest za załadowanie się kluczowych elementów w obszarze ATF, wówczas powinieneś załadować go asynchronicznie lub odroczyć na sam koniec. Służą do tego atrybutu „defer” i „async”, które dodajesz do dołączanych plików JS, dzięki czemu kod HTML jest dalej parsowany niezależnie od tych plików.
Atrybut „async” powoduje, że plik JS będzie się ładował asynchronicznie wraz z ładowaniem się kolejnej części kodu HTML i uruchomiony zostanie zaraz po załadowaniu się JS, a „defer” uruchomi skrypt na samym końcu ładowania się dokumentu HTML.
Uwaga! Upewnij się, że skrypt, który chcesz załadować asynchronicznie, nie modyfikuje drzewa renderowania. Ponieważ wówczas możesz jedynie wydłużyć czas ładowania, gdyż po pełnym załadowaniu się skryptu nastąpi przeładowanie całego drzewa CSSOM. Jeżeli masz pewność, że plik JS nie wpływa na arkusze stylów CSS, wówczas możesz załadować go asynchronicznie na samym początku (nawet przed arkuszem stylów CSS).
Przykładem takiego skryptu jest np. tracker Google Analytics, który nie integruje w żaden sposób w kod HTML i drzewa renderowania, więc możesz go załadować na samym początku asynchronicznie.
Oprócz umieszczenia fragmentów CSS w odpowiedniej kolejności czasami warto małe fragmenty wklejać w ciało dokumentu HTML, zamiast w pliku CSS. Dzięki temu zostaną szybciej wykonane. Zmianę powinieneś wdrażać tylko dla małych fragmentów kodu i przeprowadzić testy przed i po wdrożeniu.
Podobnie sytuacja wygląda ze skryptami JS. Rozważ, czy małych skryptów, które odpowiedzialne są za ważne funkcje strony, nie warto przenieść bezpośrednio do kodu HTML.
Musisz też pamiętać, aby ładowanie asynchronicznie stosować z głową i nie wdrażać atrybutów „defer” w ciemno. Czasami lepszym efektem będzie ładowanie mniej kluczowych zasobów synchronicznie, ale na samym końcu kodu HTML, przed zamknięciem sekcji BODY.
Zamianę kolejności ładowanych skryptów i dostosowanie atrybutów ładowania asynchronicznego szybko się wdraża. I może to dać bardzo ciekawe efekty. Aby mieć jednak pewność, że zmiany kierują Cię w dobrą stronę, warto wdrażać je etapami naprzemiennie z testowaniem na nowo wyników PSI.