Blog Web Dev Insider

Core Web Vitals to podstawowe wskaźniki internetowe, których wyniki wskazują na poziom postrzegalnej wydajności. Pod koniec lutego 2021 przeprowadziłem darmowe szkolenie LIVE, w którym omówiłem owe metryki i ich poprawę na przykładzie procesu optymalizacji front-endu realnej strony. Skupiam się w nim na celu, jakim jest po prostu wydajny front-end, jednocześnie nie przejmując się za bardzo tymi wskaźnikami.

W tym artykule przyjrzymy się różnym sposobom ładowania obrazka w przestrzeni hero / Above The Fold. Różne podejścia mogą przynieść naprawdę różne rezultaty wydajnościowe. Ważne jest, aby to, co znajduje się na samej górze strony, było ładowane jak najszybciej. Dzięki temu użytkownik będzie mógł zapoznawać się z treściami w sposób sprawny i będzie pozytywnie postrzegał progres ładowania.

Miałem przyjemność porozmawiać z Krzysztof Kempiński na temat optymalizacji front-endu, czego rezultatem jest odcinek podcastu Porozmawiajmy o IT z moim udziałem.

W optymalizacji frontendu kluczową sprawą to mierzenie wszelkiej maści metryk na stronie WWW - od TTFB, po LCP, Time to interactive, SpeedIndex itd. Po analizie czasów możemy przejść do planu ich optymalizacji i wdrażania go. Przyjęło się, że im szybszy dany czas, tym lepiej - czyli im szybciej pojawia się np. tytuł strony w przeglądarce - tym lepiej, im sprawniej pojawi się kluczowy element „above the bold” - tym lepiej, im szybciej strona jest interaktywna - tym lepiej.

Ostatnio na Instagramie natknąłem się na pytanie dotyczące nowej metryki (wchodzącej w skład Core Web Vitals) - Cumulative Layout Shifts (CLS) i wykorzystywania krytycznego CSSa. CLS to wskaźnik Zbiorczego Przesunięcia układu strony.

Doczekaliśmy się standaryzacji NATYWNEGO lazy loadingu iframe’ów przez WHATWG. Oznacza to lepsze wsparcie tego naprawdę ważnego usprawnienia w temacie optymalizacji frontendu wśród przeglądarek. Czy aby na pewno wiesz wszystko o iframe'ach w 2020 roku i jak je optymalnie ładować?