Obrazy to największe zasoby internetu, jeśli chodzi o łączny rozmiar przesyłanych danych. oraz liczbę żądań na stronę. Całkowity rozmiar przesyłanych danych na stronie, dla której wiemy, to mniej więcej 2 MB (stan na czerwiec 2022 r.) – prawie połowa tego stanowiły tylko obrazy. To nie przesada że optymalizacja żądań obrazu jest największą metodą optymalizacji skuteczności.
Później dowiesz się, jak zmieniały się obrazy elastyczne w rozwiązaniu problemów pojawiających się, próbując wyświetlać jeden obraz w każdej sytuacji. W tej sekcji znajdziesz najważniejsze dane o skuteczności związane z obrazami i sposoby ich ulepszania.
Odraczanie żądań obrazu
Za chwilę poznasz kilka sposobów na to, aby żądania dotyczące obrazów były jak najmniejsze i aby były jak najbardziej skuteczne. To jednak najszybszy sposób na uzyskanie zdjęć.
zawsze będzie tym, które nigdy nie zostanie zrealizowane. Na wstępie chcę więc powiedzieć, jaka może być najważniejsza zmiana, jaką możesz wprowadzić w swoim życiu.
dostarczasz użytkownikom komponenty z obrazem – atrybut loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Ten atrybut zapewnia, że żądania obrazów nie są wysyłane, dopóki nie zbliżą się do widocznego obszaru użytkownika, co opóźni ich względem początkowym. wczytanie strony, czyli czas, gdy przeglądarka jest najbardziej przeciążona, i usunięcie tych żądań z krytycznej ścieżki renderowania.
Jak to jest w praktyce, używanie tego atrybutu może mieć ogromny pozytywny wpływ na skuteczność: jest to obraz, którego nie należy umieszczać w treści widoczny obszar użytkownika nie będzie nigdy żądany, a przepustowość nie zostanie zmarnowana na obrazy, których użytkownik nigdy nie zobaczy.
Jest jednak pewien haczyk: odroczenie tych żądań oznacza, że nie wykorzystujesz możliwości, jakie dają przeglądarki. hiperoptymalizowane procesy wysyłania żądań
jak najwcześniej. Jeśli loading="lazy" jest używany w elementach img w górnej części układu – a przez to jest bardziej prawdopodobne
by znajdowały się w widocznym obszarze po załadowaniu strony – korzystanie z tych obrazów może być dla użytkownika znacznie wolniejsze.
Priorytet pobierania
Atrybut loading jest przykładem działań, które mają na celu zwiększenie standardów internetowych i umożliwiają programistom większą kontrolę nad sposobem, w jaki przeglądarki
nadawać priorytety żądaniom.
Prawdopodobnie wiesz już, jak działają przeglądarki, podstawowe sposoby uzyskiwania priorytetu:
Na przykład żądanie zewnętrznego pliku CSS w tagu <head> dokumentu jest uznawane za wystarczająco niezbędne, aby zablokować renderowanie, a żądanie
zewnętrzny plik JavaScript tuż powyżej </body> zostanie odroczony do momentu zakończenia renderowania. Jeśli wartość atrybutu loading elementu <img> jest „leniwa”,
powiązane żądanie obrazu zostanie odroczone do czasu, gdy przeglądarka ustali, że zostanie ono wyświetlone użytkownikowi. W przeciwnym razie obraz będzie mieć
tak jak pozostałe obrazy na stronie.
Atrybut fetchpriority służy do
programistom szczegółową kontrolę nad priorytetem zasobów, która umożliwia oznaczanie zasobów;
jako „wysoka” i „niski” w odniesieniu do zasobów tego samego typu. Przypadki użycia fetchpriority są podobne do loading
ale są one znacznie bardziej ogólne. Możesz na przykład użyć atrybutu fetchpriority="low" do obrazu, który ujawnił tylko interakcję użytkownika
(niezależnie od tego, czy znajduje się on w widocznym obszarze użytkownika, czy nie) w celu nadania priorytetu obrazom widocznym w innym miejscu na stronie; fetchpriority="high"
aby nadać priorytet obrazowi, który będzie widoczny w widocznym obszarze zaraz po wyrenderowaniu strony.
Pamiętaj, że fetchpriority różni się od loading tym, że nie zmienia zasadniczo działania przeglądarki. Nie informuje przeglądarki
aby wczytywały określone zasoby wcześniej niż inne, co daje istotny kontekst dla decyzji, które podejmuje w związku z przesyłaniem próśb o komponenty.
Pomiar wpływu obrazów
Przy optymalizacji komponentów z obrazem widoczna skuteczność jest często ważniejsza i trudniejsza do zmierzenia niż całkowity transfer i rozmiaru.
Wskaźniki internetowe zapewniają wymierne, praktyczne dane i wskazówki, które pozwalają korzystania z internetu, podkreślając problemy takie jak takie jak długi czas odpowiedzi z serwera WWW, problemy z renderowaniem i opóźnienia związane z interaktywnością. Podstawowe wskaźniki internetowe to tylko jeden z elementów tych celów. na sposób przeglądania poszczególnych stron przez użytkownika. Jest to zestaw pomiarów technicznych, które razem określają, jak szybko korzysta z przeglądarki.
zbiorcze przesunięcie układu
Skumulowane przesunięcie układu (CLS) to miara stabilności wizualnej. Ten wskaźnik pozwala określić, układ treści na stronie zmienia się podczas wczytywania zasobów i renderowania strony. Każda osoba, która wydała znaczną kwotę osób korzystających z internetu na dłuższą metę straciło miejsce z powodu „przeskakiwania” strony jako opóźniony czcionka internetowa lub źródło obrazu, wyrenderowano – lub element interaktywny nagle oddalił się od wskaźnika. Wysoki wskaźnik CLS jest największym problemem i przyczyną najgorszy błąd użytkownika – „cancel” (anuluj) przycisk zmieniający się na miejsce zajmowane wcześniej przez „potwierdzenie” tak samo jak klikany przez użytkownika.
Ze względu na długie czasy wczytywania i dużą ilość miejsca, jakie mogą zająć w układzie, taka sytuacja ma sens, że częstą przyczyną są obrazy. wysokie wyniki CLS.
Dzięki stosunkowo niedawnym zmianom w nowoczesnych przeglądarkach ominięcie wysokich wyników CLS z powodu obrazów jest łatwiejsze, niż mogłoby się wydawać.
Jeśli pracujesz nad frontendem już od kilku lat, znasz atrybuty width i height w systemie <img>:
przed powszechnym wprowadzeniem CSS był to jedyny sposób kontrolowania rozmiaru obrazu.
<img src="image.jpg" height="200" width="400" alt="…">
Te atrybuty nie są już używane, ponieważ postanowiliśmy oddzielić nasze kwestie związane ze stylem od znaczników, zwłaszcza te dotyczące elastyczności.
konieczne było określenie procentowego rozmiaru za pomocą CSS. Na początku elastycznie projektowanych witryn trzeba usuwać
nieużywane atrybuty width i height była typową wskazówką, jak wartości określone w naszym CSS – max-width: 100%
height: auto – zastąpiłyby je.
<img src="image.jpg" alt="…">
img {
max-width: 100%;
height: auto;
}
Po usunięciu atrybutów height i width tak jak w poprzednim przykładzie jest to jedyna metoda określona przez przeglądarkę
wysokość obrazu w tej sytuacji polega na zażądaniu źródła, przeanalizowaniu go i wyrenderowaniu na jego
szerokości miejsca zajmowanego w układzie po zastosowaniu arkuszy stylów. Większość tego procesu ma miejsce po odwiedzeniu strony
po wyrenderowaniu, nowa wysokość spowoduje dodatkowe przesunięcia układu.
W 2019 r. zaktualizowaliśmy działanie przeglądarek, aby inaczej obsługiwać atrybuty width i height. Zamiast używać wartości tych atrybutów
które określają stały, w pikselach rozmiar elementu img w układzie, które można uznać za reprezentatywne
współczynnik proporcji obrazu, chociaż składnia jest taka sama. Nowoczesne przeglądarki będą dzielić te wartości na siebie w celu
określają współczynnik proporcji elementu img przed wyrenderowaniem strony. Pozwala to zarezerwować miejsce zajmowane przez obraz podczas renderowania układu.
Z reguły w <img> należy zawsze używać atrybutów height i width, których wartości odpowiadają rozmiarowi rzeczywistemu źródła obrazu, więc
upewnij się, że oprócz wartości max-width: 100% określono także height: auto, aby zastąpić wysokość z atrybutu HTML.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Stosując atrybuty width i height w elementach <img>, możesz uniknąć wysokiego wyniku CLS spowodowanego obrazami.
Warto zauważyć, że ta metoda nie ma żadnych wad, ponieważ opiera się ona na tradycyjnym sposobie działania przeglądarki –
z obsługą podstawowego stylu CSS będzie działać tak, jak dotychczas, a atrybuty height i width w znacznikach zostaną zastąpione przez style.
Atrybuty width i height pozwalają uniknąć problemów z CLS, rezerwując odpowiednią ilość przestrzeni dla obrazów, prezentując
z pustą luką lub obiekt zastępczy niskiej jakości, podczas gdy
i czekają na przeniesienie obrazu, który też nie jest idealny. Chociaż możesz podjąć działania, by zniwelować
jedyny sposób, by szybciej przedstawić użytkownikowi w pełni wyrenderowany obraz, to zmniejszenie rozmiaru przesyłanych obrazów.
największe wyrenderowanie treści
Największe wyrenderowanie treści (LCP) mierzy czas potrzebny do wyrenderowania największego elementu „contentful” widocznego w widocznym obszarze użytkownika element treści, który zajmuje największy procent widocznej strony. Na pierwszy rzut oka może się wydawać, że to zbyt szczegółowe dane, pełni funkcję praktyczną informacją o tym, w jakim miejscu została wyrenderowana większość treści strony, z punktu widzenia użytkownika. LCP to podstawa jest miarą (widocznej) wydajności.
Przy określaniu, kiedy proces wczytuje się bieżącą stronę, przydatne mogą być dane takie jak DOMContentLoaded czy zdarzenie window.onload.
została technicznie zakończona, ale nie muszą być zgodne z wrażeniami użytkownika strony. Niewielkie opóźnienie w renderowaniu elementu
byłyby uwzględniane poza obszarem widocznym dla użytkownika, byłyby uwzględniane w tych danych, ale prawdopodobnie nie zostałyby wykryte przez prawdziwego użytkownika.
Długi LCP oznacza, że strona działa wolno po pierwszym wyświetleniu strony (najważniejszą treść w bieżącym widocznym obszarze).
lub ich odstępstwa.
Odczucia użytkownika określone przez LCP mają bezpośredni wpływ na wrażenia użytkownika. Eksperyment przeprowadzony w zeszłym roku przez Vodafone wykazał, że wzrost wskaźnika LCP o 31% nie tylko przełożył się na wzrost sprzedaży o 8% (jest to dobry wynik sam), ale w łącznej liczbie użytkowników o 15% wzrost liczby użytkowników, którzy zostali potencjalnymi klientami („współczynnik wizyt od użytkowników do potencjalnego klienta”), i wzrost liczby użytkowników o 11%; którzy odwiedzili jego koszyk („wskaźnik koszyka do wizyt”).
Na ponad 70% stron internetowych, będącym największym elementem na początku
widoczny obszar obejmuje obraz, jako samodzielny element <img> lub element z obrazem tła. Innymi słowy,
70% stron Wyniki LCP są oparte na wydajności obrazu. Nie wymaga wiele wyobraźni, aby zobaczyć, dlaczego jest duży, przyciągający uwagę.
obrazy i logo są bardzo często wyświetlane w części strony widocznej na ekranie.
Oto kilka wskazówek, które pomogą Ci uniknąć opóźnień LCP. Po pierwsze, nigdy nie określaj pola loading="lazy" w części strony widocznej na ekranie. obraz,
ponieważ opóźnienie żądania do czasu wyrenderowania strony będzie prawdopodobnie miało ogromny negatywny wpływ na wynik LCP.
Po drugie, użycie atrybutu fetchpriority="high" może poinformować przeglądarkę, że przeniesienie tego obrazu powinno być traktowane priorytetowo w porównaniu z obrazami w innym miejscu na stronie.
Mając na uwadze te zasady, najważniejszą rzeczą, jaką możesz zrobić, aby poprawić wynik LCP strony, jest skrócenie czasu potrzebne do przesłania i renderowania tych obrazów. Aby to było możliwe, źródła obrazów powinny być tak małe i efektywne, (bez utraty jakości) i zadbać o to, aby użytkownicy widzieli tylko najbardziej skuteczne komponenty w kontekście przeglądania.
Podsumowanie
Komponenty z obrazem najczęściej obciążają użytkowników przepustowość – oznacza to, że przepustowość nie będzie wystarczająca do przeniesienia wszystkich pozostałych zasobów; do renderowania strony. Obrazy stanowią istotne problemy dotyczące postrzeganej skuteczności, zarówno w czasie, gdy strona otaczająca ją reklamę, jak i po niej. wyrenderowano układ. Krótko mówiąc: komponenty z obrazem powodują uszkodzenia.
Może być zniechęcające, podczas gdy „lepiej byłoby, gdyby w internecie było mniej obrazów” jest to oczywiste, jeśli chodzi o samą skuteczność, to również bardzo zaszkodzi użytkownikom. Obrazy są istotną częścią internetu, dlatego nie można mieć negatywnego wpływu na ich jakość. które mają kluczowe znaczenie dla skuteczności.
W pozostałej części tego kursu poznasz technologie, które są wykorzystywane w naszych komponentach z obrazem, i techniki, które pomogą ograniczyć wpływa na wydajność bez negatywnego wpływu na jakość.