Optymalizacja frontendu
Nowości ze świata optymalizacji frontendu (grudzień 2023)
U mnie bardzo zajęty czas związany z nagrywaniem kursu Wydajne Interakcje. Już za parę tygodni pierwsze materiały ujrzą światło dzienne, a całość szkolenia będzie miała swoją premierę w styczniu 2024. Oprócz tworzenia kursu na bieżąco monitoruję ciekawostki i nowości ze świata wydajnego frontendu. Oto kilka z nich.
Dlaczego <link rel=preconnect> może nie działać?
Harry w swoim najnowszym blogowym poście przedstawił ciekawą analizę waterfalla żądań na podstawie strony BBC. Okazuje się, że nieprzemyślane użycie atrybutu crossorigin może spowodować błędne działanie "rozgrzewania" połączenia (procedura DNS, TCP, TLS). Warto spoglądać na nagłówki żądań do zasobów z zewnętrznej domeny, a konkretnie na Sec-Fetch-Mode, by zobaczyć, czy mamy do czynienia z CORSem. Jeżeli tak - dodaj crossorigin, jeżeli nie - nie dodawaj. Brak tego atrybutu lub niepotrzebne użycie spowoduje nieprawidłowe działanie preconnectu.
Responsywne <video> wraca do łask
Przez długi czas przeglądarki Firefox czy Chrome nie wspierały responsywnego wideo w HTML poprzez tag <video>. Jedynie Safari zawsze dzielnie broniło tego (efektywnego w mojej opinii) rozwiązania. W naszych projektach wielokrotnie stosowaliśmy alternatywę na bazie Javascriptu, by ładować odpowiedni rozmiar wideo na danej rozdzielczości. Udział JS w tym procesie, zwłaszcza, gdy wideo osadzone było w przestrzeni Above The Fold powodował problemy chociażby z Total Blocking Time. Od końca listopada możemy w zasadzie swobodnie korzystać z poniższej struktury i tym samym w pełni natywnego, efektywnego rozwiązania:
<video>
<source src="/video/small.mp4" media="(max-width: 599px)">
<source src="/video/large.mp4">
</video>
Interaction To Next Paint
Zauważam w końcu spory wzrost zainteresowania tą metryką i coraz więcej przydatnych rekomendacji. To mnie bardzo cieszy. Chciałem polecić Twojej uwadze następujące artykuły:
- Częste problemy z interakcjami na listingach produktów stron ecommerce (np. filtrowanie oraz wysyłanie eventów do tag managerów)
- Optymalizacja długich zadań (Long Tasks) w praktyce
- Prerenderowanie stron w React a deaktywacja przycisków na czas ładowania strony
To tyle w tym poście. Udanej lektury.