Jeśli chodzi o całkowity rozmiar transferu i liczbę żądań na stronę, obecnie są to największe zasoby w internecie. Mediana łącznego rozmiaru przesyłanych danych w czerwcu 2022 r. wynosi około 2 MB, przy czym prawie połowę z nich stanowią same obrazy. Bez przesadnego twierdzenia, że optymalizacja żądań obrazów może być największą skutecznością optymalizacji wydajności.
Później dowiesz się, jak obrazy elastyczne zmieniły się w celu rozwiązania problemów, dlatego spróbujemy wyświetlać jeden obraz w każdej sytuacji. W tej sekcji poznasz kluczowe dane o skuteczności związane z obrazami i poznasz sposoby ich ulepszania.
Odraczam żądania obrazu
Poznasz wiele sposobów na zapewnienie jak najmniejszej wielkości żądań obrazu i uzyskania jak najmniejszej skuteczności. Najszybszym żądaniem zdjęcia zawsze będzie to, które nigdy nie zostanie wysłane. Na początku chcę wspomnieć, jaka może być najważniejsza zmiana, jaką możesz wprowadzić w sposobie dostarczania komponentów z obrazem użytkownikom: atrybut loading="lazy".
<img src="image.jpg" loading="lazy" alt="…">
Ten atrybut zapewnia, że żądania obrazów nie będą wysyłane, dopóki nie znajdą się w pobliżu widocznego obszaru użytkownika, co spowoduje odłożenie ich na początkowe ładowanie strony (czyli w momencie największego obciążenia) i usuwanie tych żądań z krytycznej ścieżki renderowania.
Proste, co w praktyce może być bardzo proste, ale użycie tego atrybutu może mieć ogromny pozytywny wpływ na wydajność: obrazy, które nigdy nie znajdą się w widocznym obszarze użytkownika, nigdy nie będą wysyłane, a przepustowość nie będzie nadmiernie wpływać na obrazy, których użytkownik nigdy nie zobaczy.
Jest jednak pewien haczyk: odłożenie żądań na później oznacza niekorzystanie z hiperzoptymalizowanych procesów przeglądarki, które powodują wysyłanie żądań obrazów. Jeśli używasz atrybutu loading="lazy" w elementach img u góry układu, czyli z większym prawdopodobieństwem znajdzie się w widocznym obszarze użytkownika po pierwszym wczytaniu strony, grafika może wydawać się znacznie wolniejsza.
Priorytet pobierania
Atrybut loading to przykład większych standardów internetowych, które mają dać programistom większą kontrolę nad sposobem, w jaki przeglądarki określają priorytety żądań.
Prawdopodobnie wiesz już o podstawowych metodach pobierania priorytetu w przeglądarkach: na przykład żądanie zewnętrznego pliku CSS w <head> dokumentu jest uznawane za wystarczająco ważne, aby zablokować renderowanie, a żądanie zewnętrznego pliku JavaScript powyżej </body> jest odroczone do momentu zakończenia renderowania. Jeśli wartość atrybutu loading w obiekcie <img> jest „leniwy”, powiązane żądanie obrazu jest odroczone, dopóki przeglądarka nie ustali, że obraz jest wyświetlany użytkownikowi. W przeciwnym razie obraz będzie miał taki sam priorytet
jak każdy inny obraz na stronie.
Atrybut fetchpriority ma dawać programistom bardziej szczegółową kontrolę nad priorytetem zasobów, umożliwiając oznaczanie zasobów o „wysokim” lub „niskim” priorytecie w stosunku do zasobów tego samego typu. Przypadki użycia atrybutu fetchpriority są podobne do atrybutu loading, ale znacznie bardziej ogólne. Możesz na przykład użyć parametru fetchpriority="low" w przypadku obrazu ujawnionego tylko po interakcji użytkownika (niezależnie od tego, czy znajduje się on w widocznym obszarze użytkownika, czy nie), aby nadać priorytet obrazom widocznym w innym miejscu na stronie, lub fetchpriority="high", aby nadać priorytet obrazowi, o którym wiesz, że będzie widoczny w widocznym obszarze od razu po wyrenderowaniu strony.
Pamiętaj, że fetchpriority różni się od loading tym, że nie zmienia zasadniczo działania przeglądarki. Nie informuje ono przeglądarki o wczytywaniu określonych zasobów w pierwszej kolejności, ale nadawanie jej istotnego kontekstu dla decyzji, jakie podejmuje w związku z prośbą o zasoby.
Pomiar wpływu obrazów
Podczas optymalizowania komponentów z obrazem postrzegana skuteczność jest często ważniejsza i trudniejsza do zmierzenia niż sam łączny rozmiar transferu.
Wskaźniki internetowe to wymierne i przydatne wskaźniki oraz wskazówki ułatwiające użytkownikom korzystanie z internetu, które wskazują takie problemy jak długi czas reakcji serwera WWW, problemy z renderowaniem i opóźnienia interakcji. Podstawowe wskaźniki internetowe to podzbiór tych celów. Są one skoncentrowane na bezpośredniej interakcji użytkownika z konkretną stroną. Jest to zestaw pomiarów technicznych, które razem określają, jak szybko działanie strony odnosi się do użytkownika.
zbiorcze przesunięcie układu
Skumulowane przesunięcie układu (CLS) to miara stabilności wizualnej. To dane pokazujące, jak bardzo układ treści na stronie zmienia się wraz z wczytywaniem zasobów i renderowaniem strony. Każdy, kto spędził dużo czasu w internecie, stracił w tekście długi czas w tekście na skutek „przeskoczenia” strony (opóźniona czcionka internetowa lub źródło obrazu nagle wyrenderowane) albo nagle, gdy element interaktywny oddalił się od Twojego wskaźnika. Wysoki CLS w największej sytuacji jest uciążliwy, a w najgorszym razie – przyczyną błędu użytkownika – np. przycisku „Anuluj” przenoszącego się w miejsce zajmowane wcześniej przez przycisk potwierdzenia – tak samo jak kliknięcie przez użytkownika.
Długi czas wczytywania i ilość miejsca, jaką mogą zająć w układzie, sygnalizuje, że obrazy są częstą przyczyną wysokich wyników CLS.
Dzięki stosunkowo niedawno zmianom w nowoczesnych przeglądarkach łatwiej jest uniknąć wysokiego wyniku CLS z powodu obrazów.
Jeśli pracujesz nad frontendem od kilku lat, znasz już atrybuty width i height w systemie <img>. Przed jego powszechnym wprowadzeniem CSS były to jedyny sposób kontrolowania rozmiaru obrazu.
<img src="image.jpg" height="200" width="400" alt="…">
Wycofaliśmy te atrybuty, aby oddzielić nasze kwestie dotyczące stylu od znaczników. Dotyczy to zwłaszcza elementów responsywnych, które wymagały określania za pomocą CSS rozmiaru za pomocą wartości procentowych. W początkowej fazie projektowania stron responsywnych często stosowana była rada „usunięcie nieużywanych atrybutów width i height”, ponieważ zastąpiły je wartości określone w naszym kodzie CSS – max-width: 100% i height: auto.
<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, jedyną metodą określenia wysokości obrazu przez przeglądarkę w tej sytuacji jest zażądanie źródła, przeanalizowanie go i wyrenderowanie z niewłaściwym współczynnikiem proporcji, zgodnie z szerokością miejsca zajmowanego przez układ po zastosowaniu arkuszy stylów. Znaczna część tego procesu ma miejsce po wyrenderowaniu strony, przy czym nowo obliczona wysokość powoduje dodatkowe przesunięcia układu.
W 2019 roku zmieniliśmy sposób działania przeglądarek, tak aby obsługiwał atrybuty width i height w różny sposób. Zamiast używać wartości tych atrybutów do określania stałego, opartego na pikselach rozmiaru elementu img w układzie, można uznać, że atrybuty te reprezentują współczynnik proporcji obrazu, choć ich składnia jest taka sama. Nowoczesne przeglądarki dzielą te wartości między siebie, aby przed wyrenderowaniem strony określić wewnętrzny współczynnik proporcji elementu img. Dzięki temu mogą zarezerwować miejsce zajmowane przez obraz przy renderowaniu układu.
Zasadniczo zawsze używaj atrybutów height i width w elemencie <img> z wartościami pasującymi do wewnętrznego rozmiaru źródła obrazu. Pamiętaj tylko, by zastąpić wysokość podaną w atrybucie HTML z atrybutem height: auto oraz max-width: 100%.
<img src="image.jpg" height="200" width="400" alt="…">
img {
max-width: 100%;
height: auto;
}
Używając atrybutów width i height w elementach <img>, pozwolisz uniknąć wysokiego wyniku CLS ze względu na obrazy.
Pamiętaj, że to podejście nie ma żadnych wad, ponieważ opiera się na ugruntowanej pozycji przeglądarki. Każda przeglądarka obsługująca podstawowe funkcje CSS działa tak, jak do tej pory, a atrybuty height i width w znacznikach zostaną zastąpione przez style.
Atrybuty width i height skutecznie unikają problemów z CLS, rezerwując niezbędną przestrzeń na układ obrazów, ale podawanie użytkownikom pustej luki lub obiektów zastępczych niskiej jakości czekających na przeniesienie i wyrenderowanie obrazu też nie jest idealnym rozwiązaniem. Istnieją różne sposoby, aby zniwelować wymierne i dostrzegalne efekty wolno ładujących się obrazów, ale jedynym sposobem na szybsze prezentowanie w pełni wyrenderowanego obrazu jest zmniejszenie rozmiaru transferu.
największe wyrenderowanie treści
Najwyższe wyrenderowanie treści (LCP) to czas potrzebny na wyrenderowanie największego „treściowego” elementu widocznego w widocznym obszarze użytkownika, czyli elementu treści, który zajmuje największy odsetek widocznej strony. Z pozoru może się wydawać, że są to zbyt szczegółowe dane, ale z perspektywy użytkownika wynika, że w praktyce pokazuje się, że większość strony została wyrenderowana. LCP to kluczowy wskaźnik (postrzeganej) skuteczności.
Dane takie jak DOMContentLoaded czy window.onload mogą pomóc w określeniu, kiedy proces wczytywania bieżącej strony został ukończony, ale niekoniecznie muszą być zgodne ze sposobem, w jaki użytkownik korzysta ze strony. Niewielkie opóźnienie renderowania elementu znajdującego się poza widocznym obszarem użytkownika zostanie uwzględnione w każdym z tych danych, ale prawdopodobnie nie zostanie wykryte przez prawdziwego użytkownika.
Długi LCP oznacza, że pierwsze wyświetlenie strony, czyli najważniejsza treść w bieżącym widocznym obszarze, polega na tym, że strona działa wolno lub od razu się wyświetla.
Odczucia użytkownika uzyskane przez LCP mają bezpośredni wpływ na wrażenia użytkowników. Eksperyment przeprowadzony przez firmę Vodafone w zeszłym roku wykazał, że wzrost wskaźnika LCP o 31% nie tylko przełożył się na wzrost sprzedaży o 8% (samodzielnie dobry wynik), ale w stosunku do łącznej liczby użytkowników zaobserwował 15-procentowy wzrost liczby użytkowników, którzy zostali potencjalnymi klientami („odsetek użytkowników, którzy dokonali zakupu”), oraz wzrost liczby wizyt w koszyku o 11%.
Na ponad 70% stron internetowych największy element w początkowym widocznym obszarze obejmuje obraz – jako samodzielny element <img> lub element z obrazem tła. Innymi słowy,
70% wyników LCP stron zależy od wydajności grafiki. Nie trzeba się specjalnie zastanawiać, dlaczego tak się dzieje.
Duże, przyciągające uwagę grafiki i logo mają duże szanse na pojawienie się w części strony widocznej na ekranie.
Aby uniknąć opóźnień LCP, możesz wykonać kilka czynności: po pierwsze, nigdy nie określaj wartości loading="lazy" w obrazie w części strony widocznej na ekranie, ponieważ opóźnienie żądania do czasu wyrenderowania strony może mieć ogromny negatywny wpływ na wynik LCP.
Po drugie, użycie atrybutu fetchpriority="high" może poinformować przeglądarkę, że przeniesienie obrazu powinno mieć wyższy priorytet nad obrazami w innych miejscach na stronie.
Biorąc pod uwagę te zasady, najważniejszą rzeczą, jaką możesz zrobić, aby poprawić wynik LCP strony, jest skrócenie czasu potrzebnego na przeniesienie i wyrenderowanie tych obrazów. W tym celu musisz zadbać o jak najmniejsze i efektywne źródła obrazów (oczywiście bez negatywnego wpływu na ich jakość), a także zadbać o to, aby wyświetlane były tylko te komponenty z obrazem, które najlepiej pasują do kontekstu przeglądania.
Podsumowanie
Komponenty z obrazem najbardziej obciążają przepustowość użytkownika, ponieważ przepustowość nie jest przenoszona na przesyłanie wszystkich pozostałych zasobów niezbędnych do wyrenderowania strony. Obrazy wywołują poważne problemy z postrzeganą wydajnością, zarówno w trakcie renderowania układu strony, jak i po nim. Krótko mówiąc: komponenty z obrazem szkodzą.
Może to być zniechęcające, chociaż stwierdzenie „lepiej byłoby, gdyby sieć z mniejszą liczbą obrazów” było oczywiste, jeśli chodzi o samą skuteczność, jednak jest ona niesamowicie niewygodna dla użytkowników. Obrazy to ważny element internetu, więc nie możesz narzucać jakości istotnych treści tylko dla zwiększenia skuteczności.
W pozostałej części tego kursu poznasz technologie, które wykorzystują nasze komponenty z obrazem i techniki, które pozwalają ograniczyć wpływ reklam na skuteczność bez obniżania jakości.