Frontload — WebP i preload obrazu LCP

Dwie rzeczy, obie bez usługi zewnętrznej: konwersja obrazów do WebP na tym samym serwerze, który wydaje stronę, i reguła pobierania z wyprzedzeniem zbudowana z pomiarów, a nie z heurystyki.

Co rozwiązuje

Pobranie z wyprzedzeniem pomaga tylko wtedy, gdy wskaże właściwy plik.

Który obraz jest największym elementem widoku, wie wyłącznie przeglądarka — i za każdym razem może odpowiedzieć inaczej:

• zależy to od szerokości ekranu
• od tego, co jest w danym układzie schowane
• od tego, co dorysuje JavaScript
• a pobranie niewłaściwego pliku zabiera pasmo temu, który naprawdę decyduje o wyniku

Reguła oparta na kolejności w kodzie trafia dobrze na stronie głównej i chybia wszędzie indziej.

Jak działa

• Reguła powstaje z pomiarów PerformanceObserver zbieranych z prawdziwych odsłon.
• Zwycięzca jest zapamiętywany osobno dla telefonu i osobno dla monitora — to dwa różne układy, a nie ten sam w innej szerokości.
• Reguła zaczyna działać po trzech zgodnych pomiarach, więc jedna nietypowa odsłona nie przestawia serwisu.
• Wygasa sama, gdy plik zniknie albo gdy przez trzydzieści dni nikt jej nie potwierdzi.
• Konwersja WebP idzie biblioteką GD na Waszym serwerze — bez klucza, konta, limitów i bez wysyłania zdjęć klienta na cudzą infrastrukturę.
• Pliki zapisują się z dopisanym rozszerzeniem, nie podmienionym: „zdjecie.jpg.webp”. Inaczej jpg i png o tej samej nazwie skleiłyby się w jeden plik.

Na co uważamy

Punkt odbioru pomiarów jest publiczny z konieczności — znacznik jednorazowy nie przetrwa strony wydanej z pamięci podręcznej. Skoro jest publiczny, sprawdza wszystko inne: zasób musi leżeć w katalogu wgranych plików tego serwisu, nagłówek odsyłający musi się zgadzać, a limit wynosi sześćdziesiąt zgłoszeń na godzinę z adresu.

Obcy adres w znaczniku pobierania z wyprzedzeniem oznaczałby, że każda odsłona melduje się na cudzym serwerze razem z adresem IP odwiedzającego — dlatego reguła przyjmuje wyłącznie własne pliki.

Tła ustawiane w CSS wymagają zgłoszenia. Taki obraz nie przechodzi przez żaden filtr systemu, nie ma „srcset” i przeglądarka dowiaduje się o nim dopiero po przetworzeniu arkusza stylów. Motyw zgłasza je filtrem, a wtyczka składa z tego „image-set()” z wersją zapasową.