▷ Google uczy, jak optymalizować obrazy w witrynie e-commerce ✅

Google uczy, jak optymalizować obrazy w witrynie e-commerce

Inhaltsverzeichnis

Podczas sesji wideo Google Googler Alan Kent mówił o optymalizacji obrazów w witrynie e-commerce.

Oferuje kilka wskazówek dla specjalistów SEO, które pomogą zoptymalizować obrazy w ich witrynie e-commerce:

Eliminacja skumulowanego przesunięcia układu,
Prawidłowe dobranie rozmiaru obrazów,
Wykorzystując najlepszy format pliku obrazu,
Odpowiednia kompresja obrazów,
Buforowanie obrazów w przeglądarce,
Prawidłowa kolejność pobierania obrazów

Wyeliminuj skumulowane przesunięcie układu

Alan szczegółowo wyjaśnił skumulowane przesunięcie układu, czyli CLS. Krótko mówiąc, CLS to miejsce, w którym zawartość Twojej strony w widoczny sposób porusza się na ekranie.

Znasz te witryny: zaczynasz czytać lub próbujesz kliknąć link i nagle zawartość strony się przesuwa.

Obrazy mogą przyczynić się do tego problemu, jeśli zostaną użyte niewłaściwie – mówi. CLS ma tak duży wpływ na wygodę użytkownika, że Google zdefiniował go jako jeden z trzech wskaźników Core Web Vitals.

Dlaczego obrazy mogą powodować CLS? Aby załadować stronę, wyjaśnia Alan, Twoja przeglądarka internetowa zaczyna pobierać znaczniki HTML strony. Większość przeglądarek rozpocznie wyświetlanie górnej części strony przed pobraniem całej strony.

Aby skrócić czas oczekiwania, wszelkie odniesienia do napotkanych obrazów są dodawane do kolejki zasobów do pobrania. Do kolejki dodawane są także pliki JavaScript i CSS.

Pliki te są następnie pobierane równolegle ze stroną główną, po kilka na raz.

Problem pojawia się, gdy przeglądarka nie zna wymiarów obrazu przed wyświetleniem zawartości strony.

Przesunięcie układu następuje w przypadku, gdy przeglądarka odkryje, że nie pozostawiła odpowiedniej ilości miejsca na obraz. CLS często można łatwo wykryć na stronie, ręcznie obserwując jej ładowanie. Istnieją jednak również zautomatyzowane narzędzia, które mogą to zmierzyć.

Dane terenowe są zbierane poprzez pomiar tego, co dzieje się z prawdziwymi użytkownikami Twojej witryny. W środowisku produkcyjnym dane terenowe można zbierać za pomocą JavaScript w celu osadzenia na własnych stronach internetowych lub za pośrednictwem anonimowych danych gromadzonych przez przeglądarkę Chrome.

Chrome udostępnia dane dotyczące popularnych witryn w raporcie komfortu użytkownika Chrome, w skrócie CrUX. Dane laboratoryjne mogą być łatwiejsze do gromadzenia i analizowania przez programistów, ale mają pewne ograniczenia.

PageSpeed Insights to przydatne narzędzie, ponieważ w jednym raporcie prezentuje dane laboratoryjne i terenowe. W przypadku CLS szukaj ostrzeżeń, takich jak: unikaj dużych zmian układu i obrazów, które nie mają określonej szerokości i wysokości.

Pamiętaj tylko, że zmiany układu raportu mogą być spowodowane czynnikami innymi niż obrazy, takimi jak JavaScript. Naprawienie problemów z buforowaniem obrazów może być tak proste, jak dodanie wymiarów obrazu do znaczników HTML.

Dzięki temu przeglądarka od razu dokładnie wie, ile miejsca zarezerwować na obraz. Istnieją inne triki CSS, których można również użyć, jeśli CSS zostanie poprawnie załadowany.

Wybierz odpowiednią szerokość i wysokość swoich obrazów

Prawidłowe dobranie rozmiaru obrazów może być skomplikowane ze względu na zakres rozmiarów i rozdzielczości urządzeń, z których uzyskuje się dostęp do Twojej witryny. Jeśli przeglądarka zmniejszy lub przytnie obraz, pobrany plik będzie większy niż jest to konieczne, co jest marnotrawstwem.

Jednym z łatwych sposobów wykrywania obrazów o nieprawidłowym rozmiarze jest użycie sekcji Obrazy o prawidłowym rozmiarze w obszarze Możliwości w raporcie PageSpeed Insights.

Na przykład w HTML istnieje atrybut zestawu źródeł. Umożliwia wyświetlenie adresów URL obrazów o różnych rozmiarach i formatach, dzięki czemu przeglądarka może wybrać najlepszy do pobrania. Wymaga to wcześniejszej zmiany rozmiaru obrazów lub wykonania zmiany rozmiaru obrazu na żądanie.

Jeśli zmiana rozmiaru obrazów wymaga zbyt wiele pracy w przypadku Twojej witryny, rozważ skorzystanie z sieci dostarczania treści lub CDN.

Wiele takich usług może w Twoim imieniu zmieniać rozmiar obrazów i konwertować je do bardziej wydajnych formatów.

Wykorzystaj formaty obrazów nowej generacji

Następną wskazówką jest rozważenie formatu pliku obrazów, na przykład tego, czy używać plików PNG, JPG czy webP. Format pliku wpływa na rozmiar pliku. Należy jednak zachować ostrożność w formatach takich jak JPEG i webP, które mogą redukować pliki przy użyciu algorytmów kompresji stratnej. Stratna oznacza, że jakość obrazu może zostać obniżona w zamian za zmniejszenie rozmiaru pliku.

Jeśli wymagane są obrazy o doskonałej rozdzielczości, np. w przypadku ikon przycisków, należy zastosować mniej wydajne, ale doskonałe pod względem pikseli formaty. Chociaż obrazy o niższej jakości mogą wydawać się złym pomysłem, pamiętaj, że pogorszenie jakości może nie być zauważalne dla kupujących.

Ten raport zawiera listę obrazów na stronie, które można przekonwertować na bardziej wydajny format pliku. Czy istnieje zatem jeden najlepszy format obrazu, którego można użyć? Jedną z komplikacji jest to, że nie wszystkie formaty obrazów będą działać we wszystkich przeglądarkach. Na stronie caniuse.com można sprawdzić, które przeglądarki obsługują dane formaty plików graficznych. Na przykład webP jest teraz obsługiwany przez prawie wszystkie używane przeglądarki.

Zapewnia to dobre połączenie wydajności i adopcji. Alternatywnie, zamiast wybierać jeden format, możesz ustawić, aby Twoja witryna zwracała najbardziej wydajny format obsługiwany przez przeglądarkę. Ponownie jest to usługa oferowana przez sieci CDN.

Efektywnie koduj swoje obrazy

Wskazówka numer cztery polega na zastosowaniu odpowiedniego współczynnika jakości obrazów, aby skutecznie je zakodować, zachowując jednocześnie pożądaną jakość obrazu. Sekcja Efektywne kodowanie obrazów w raporcie PageSpeed Insights może służyć do identyfikowania obrazów kandydatów do optymalizacji kompresji.

Raport pokazuje również potencjalne oszczędności w rozmiarze pliku. Należy jednak pamiętać, że raport nie przeprowadza wizualnej kontroli skompresowanych obrazów. Raport opiera się na powszechnie używanych współczynnikach kompresji.

Aby znaleźć współczynnik jakości, z którego będziesz zadowolony, użyj swojego ulubionego narzędzia do konwersji obrazów na kilku obrazach o różnych wartościach jakości. Typową wartością domyślną dla webP jest 75.

W tym celu przydatna może być sproszkowana witryna aplikacji, ponieważ ułatwia porównanie wersji obrazów przed i po.

Pamiętaj też, że czasami potrzebujesz obrazów o wyższej rozdzielczości, na przykład gdy chcesz pozwolić kupującemu na powiększenie obrazu produktu. Chcesz zejść głębiej?

Jake i Surma odbyli świetną sesję na temat kompresji obrazu, którą dali w Web.dev Live.

Buforuj obrazy za pomocą przeglądarki

Jednym ze sposobów sprawdzenia, czy nagłówki pamięci podręcznej odpowiedzi HTTP zostały odpowiednio ustawione w Twojej witrynie, jest ponowne skorzystanie z raportu PageSpeed Insights. W sekcji Udostępnij zasoby statyczne przy użyciu zasad wydajnej pamięci podręcznej raportu PageSpeed Insights zidentyfikowano obrazy, które mogą zyskać na ulepszeniach pamięci podręcznej.

Innym podejściem jest użycie karty Sieć w narzędziach programistycznych w przeglądarce Chrome w celu sprawdzenia nagłówków odpowiedzi pamięci podręcznej HTP. Aby rozwiązać problemy w swojej witrynie, sprawdź, czy masz ustawienia platformy lub serwera internetowego, które możesz zmienić, aby dostosować czas trwania pamięci podręcznej dla obrazów w Twojej witrynie.

Jeśli nie zmieniasz często obrazów lub jeśli zawsze nadajesz obrazom nowy adres URL, możesz ustawić bardzo długi czas życia pamięci podręcznej.

Oprócz czasu trwania pamięci podręcznej korzystanie z sieci CDN często przyspiesza pobieranie, buforując kopie obrazów w wielu lokalizacjach na całym świecie, bliżej miejsc, z których użytkownicy się łączą.

Popraw kolejność pobierania zasobów

Ostatnia wskazówka jest bardziej zaawansowaną wskazówką. Prawidłowe ustawienie kolejności pobierania zasobów, w tym obrazów, może znacznie poprawić wydajność strony, ponieważ pobieranie obrazów jeden po drugim może być powolne. Przeglądarki korzystające z protokołu HTTP/1 zazwyczaj pobierają kilka obrazów równolegle za pośrednictwem niezależnych połączeń sieciowych z witryną.

Po pierwsze, chcesz pobrać duże obrazy bohaterów u góry strony, ponieważ mogą one wpłynąć na wynik największego malowania zawartości na stronie. Największa zawartość treściowa, w skrócie LCP, to czas potrzebny na pokazanie użytkownikowi głównej zawartości ekranu. Największe odwzorowanie treści, takie jak skumulowane przesunięcie układu, to podstawowy wskaźnik parametrów sieci.

Następnie chcesz pobrać inne obrazy, które będą widoczne bez przewijania. Obrazy widoczne bez użycia przewijania nazywane są obrazami znajdującymi się nad zakładką. Pozostałe są określane jako poniżej zakładki.

Ponieważ stronę internetową można przeglądać na urządzeniach o różnych rozmiarach ekranów, często ocenia się, które obrazy znajdują się w części widocznej na ekranie, a które w części widocznej na ekranie, sprawdzając witrynę na wielu urządzeniach. Na koniec chcesz, aby pobierane były obrazy znajdujące się tuż poza ekranem, aby były gotowe do wyświetlenia, gdy użytkownik zacznie przewijać.

Inne obrazy, które prawdopodobnie nie zostaną wkrótce wyświetlone, często najlepiej ładować leniwie. Jeśli użytkownik nie przewinie strony, pobranie ich byłoby stratą zasobów. Raport PageSpeed Insights również może pomóc w wykryciu, czy Twoja witryna skutecznie ładuje obrazy.

Na przykład sekcja raportu „Różne obrazy pozaekranowe” identyfikuje obrazy, które można wczytać po innych obrazach. Istnieją inne sekcje, które mogą być przydatne, takie jak Unikaj łączenia zasobów krytycznych w łańcuchy.

Chociaż te łańcuchy zazwyczaj obejmują pliki JavaScript i CSS. Powszechną techniką poprawiającą kolejność ładowania obrazów jest leniwe ładowanie. W tym miejscu obrazy nie są pobierane, dopóki użytkownik nie przewinie do tej części strony. Leniwe ładowanie zostało pierwotnie zaimplementowane przy użyciu JavaScript, ale obecnie większość przeglądarek obsługuje atrybut loading=”lazy” HTML. Należy zachować ostrożność, ponieważ w przypadku korzystania z leniwego ładowania obrazów w części widocznej po przewinięciu może nastąpić pogorszenie wydajności.

Transkrypcja Hangouta Johna Muellera

Alana Kenta 0:07
Mówią, że obraz jest wart tysiąca słów. I nie ma dziedziny, w której nie byłoby to bardziej prawdziwe niż e-commerce. Nazywam się Alan Kent i jestem doradcą programistów w Google. W tym odcinku omówię sześć wskazówek, jak zoptymalizować obrazy w witrynie e-commerce. Nierzadko zdarza się, że strona e-commerce zawiera odniesienia do setek obrazów. Te obrazy obejmują wszystko, od pełnowymiarowych zdjęć produktów, mniejszych miniatur produktów, obrazów kategorii, banerów, dekoracji stron i ikon przycisków. Biorąc pod uwagę ich obfitość, jak możesz się upewnić, że są szybkie i wydajne?

Pierwszą wskazówką dotyczącą optymalizacji wykorzystania obrazów w witrynie jest wyeliminowanie skumulowanych zmian układu. Skumulowane przesunięcie układu, w skrócie CLS, polega na widocznym przesuwaniu się zawartości strony na ekranie. Znasz te witryny, zaczynasz czytać lub próbujesz kliknąć link i nagle zawartość strony się przesuwa. To jest naprawdę denerwujące. Obrazy mogą przyczynić się do tego problemu, jeśli zostaną użyte nieprawidłowo. CLS ma tak duży wpływ na doświadczenie użytkownika, że Google zdefiniował CLS jako jeden z trzech kluczowych czynników sieciowych. Są to czynniki, które Google uważa za ważne dla wygody użytkownika na wszystkich stronach internetowych. Dlaczego więc obrazy mogą powodować CLS? Aby załadować stronę, Twoja przeglądarka internetowa rozpoczyna pobieranie znaczników HTML strony. Większość przeglądarek rozpocznie wyświetlanie górnej części strony przed pobraniem całej strony. Aby skrócić czas oczekiwania. Wszelkie odniesienia do napotkanych obrazów są dodawane do kolejki zasobów do pobrania. Do kolejki dodawane są także pliki JavaScript i CSS.

Pliki te są następnie pobierane równolegle do strony głównej, po kilka na raz. Problem pojawia się, gdy przeglądarka nie zna wymiarów obrazu przed wyświetleniem zawartości strony. Przesunięcie układu następuje w przypadku, gdy przeglądarka odkryje, że nie pozostawiła odpowiedniej ilości miejsca na obraz. CLS często można łatwo wykryć na stronie ręcznie, obserwując jej ładowanie. Istnieją jednak również zautomatyzowane narzędzia, które mogą to zmierzyć.

Ale najpierw zboczmy z drogi i porozmawiajmy o danych laboratoryjnych i terenowych. Dane laboratoryjne są zbierane przez narzędzia testujące, które wskazują Twoją stronę internetową, takie jak Google Lighthouse. W każdej chwili możesz wykonać badanie laboratoryjne i mieć nad nim pełną kontrolę. Dane terenowe są zbierane poprzez pomiar tego, co dzieje się z prawdziwymi użytkownikami Twojej witryny w fazie produkcyjnej. Dane terenowe można zbierać za pomocą JavaScript w celu osadzenia na własnych stronach internetowych lub za pośrednictwem anonimowych danych gromadzonych przez przeglądarkę Chrome. Chrome udostępnia dane dotyczące popularnych witryn w raporcie komfortu użytkownika Chrome, w skrócie CrUX. Dane laboratoryjne mogą być łatwiejsze do gromadzenia i analizowania przez programistów, ale mają pewne ograniczenia.

Na przykład dane laboratoryjne CLS mogą nie uwzględniać przesunięć, które mają miejsce po zakończeniu ładowania strony. Ostatecznie to dane terenowe pokazują, czy naprawdę rozwiązałeś problem swoich użytkowników. PageSpeed Insights to przydatne narzędzie, ponieważ w jednym raporcie prezentuje dane laboratoryjne i terenowe. W przypadku CLS szukaj ostrzeżeń, takich jak „unikaj dużych zmian układu” i „obrazy nie mają określonej szerokości i wysokości”. Pamiętaj tylko, że zmiany układu raportu mogą być spowodowane czynnikami innymi niż obrazy, takimi jak JavaScript. Naprawianie problemów z obrazem CLS może być tak proste, jak uwzględnienie wymiarów obrazu w znacznikach HTML. Dzięki temu przeglądarka od razu dokładnie wie, ile miejsca zarezerwować na obraz. Istnieją inne triki CSS, które można również zastosować, jeśli CSS zostanie poprawnie załadowany.

Drugą wskazówką jest wybranie odpowiedniej szerokości i wysokości obrazów. Pobieranie większych plików trwa dłużej, szczególnie na telefonach komórkowych z wolniejszymi połączeniami sieciowymi. Większe pliki również wymagają więcej czasu na przetwarzanie, szczególnie w przypadku telefonów komórkowych ze słabszymi procesorami. Prawidłowe dobranie rozmiaru obrazów może być skomplikowane ze względu na zakres rozmiarów i rozdzielczości urządzeń, z których uzyskuje się dostęp do Twojej witryny. Jeśli przeglądarka zmniejszy lub przytnie obraz, pobrany plik będzie większy niż jest to konieczne, co jest marnotrawstwem. Jednym z łatwych sposobów wykrycia obrazów o nieprawidłowym rozmiarze jest skorzystanie z sekcji obrazów o prawidłowym rozmiarze w obszarze Możliwości w raporcie PageSpeed Insights.

Statystyki PageSpeed identyfikują obrazy na stronie, które mają większe wymiary niż to konieczne, podając ich adresy URL. Po wykryciu problemu, jak go naprawić? Obrazy responsywne odnoszą się do technik zapewniających dobre zachowanie obrazów na urządzeniach o różnych rozmiarach. Na przykład w języku HTML istnieje atrybut zestawu źródeł, który umożliwia wyświetlenie listy adresów URL obrazów o różnych rozmiarach i formatach, dzięki czemu przeglądarka może wybrać najlepszy do pobrania. Wymaga to wcześniejszej zmiany rozmiaru obrazów lub wykonania zmiany rozmiaru obrazu na żądanie. Jeśli zmiana rozmiaru obrazów wymaga zbyt wiele pracy w przypadku Twojej witryny, rozważ skorzystanie z sieci dostarczania treści lub CDN.

Wiele takich usług może w Twoim imieniu zmieniać rozmiar obrazów i konwertować je do bardziej wydajnych formatów. Następną wskazówką jest rozważenie formatu pliku obrazów, na przykład tego, czy używać plików PNG, JPEG czy webP. Format pliku wpływa na rozmiar pliku. Należy jednak zachować ostrożność, ponieważ formaty takie jak JPEG i webP mogą redukować pliki przy użyciu algorytmów kompresji stratnej. Stratna oznacza, że jakość obrazu może zostać obniżona w zamian za zmniejszenie rozmiaru pliku. Jeśli wymagane są obrazy o doskonałej rozdzielczości, np. w przypadku ikon przycisków, należy zastosować mniej wydajne, ale doskonałe pod względem pikseli formaty. Chociaż obrazy o niższej jakości mogą wydawać się złym pomysłem, pamiętaj, że pogorszenie jakości może nie być zauważalne dla kupujących.

Korzyści z szybkości mogą być znaczne. Kupujący mogą opuścić Twoją stronę, jeśli ładuje się zbyt długo. Aby sprawdzić, czy Twoja witryna może zyskać na użyciu innego formatu obrazu, spójrz na wyświetlane obrazy w sekcji Format nowej generacji raportu PageSpeed Insights. Ten raport zawiera listę obrazów na stronie, które można przekonwertować na bardziej wydajny format pliku. Czy istnieje zatem jeden najlepszy format obrazu, którego można użyć? Jedną z komplikacji jest to, że nie wszystkie formaty obrazów będą działać we wszystkich przeglądarkach. Na stronie caniuse.com można sprawdzić, które przeglądarki obsługują dane formaty plików graficznych. Na przykład webP jest teraz obsługiwany przez prawie wszystkie używane przeglądarki.

Oferuje więc dobre połączenie wydajności i adopcji. Alternatywnie, zamiast wybierać jeden format, możesz ustawić, aby Twoja witryna zwracała najbardziej wydajny format obsługiwany przez przeglądarkę. Ponownie jest to usługa oferowana przez sieci CDN. Wskazówka numer cztery polega na zastosowaniu odpowiedniego współczynnika jakości obrazów, aby skutecznie je zakodować, zachowując jednocześnie pożądaną jakość obrazu. Sekcja Efektywne kodowanie obrazów w raporcie PageSpeed Insight może służyć do identyfikowania obrazów kandydatów do optymalizacji kompresji. Raport pokazuje również potencjalne oszczędności w rozmiarze pliku. Należy jednak pamiętać, że raport nie przeprowadza wizualnej kontroli skompresowanych obrazów. Raport opiera się na powszechnie używanych współczynnikach kompresji. Aby znaleźć współczynnik jakości, z którego będziesz zadowolony, użyj swojego ulubionego narzędzia do konwersji obrazów na kilku obrazach, używając różnych wartości jakości. Powszechnie stosowaną wartością domyślną dla webP jest 75. W tym celu przydatna może być sproszkowana witryna aplikacji, ponieważ ułatwia porównanie wersji obrazów przed i po. Pamiętaj też, że czasami potrzebujesz obrazów o wyższej rozdzielczości, na przykład gdy chcesz pozwolić kupującemu na powiększenie obrazu produktu. Chcesz zejść głębiej? Jake i Surma odbyli świetną sesję na temat kompresji obrazu, którą dali na Web.dev Live.

Wskazówka numer pięć polega na poinformowaniu przeglądarki, jak długo może bezpiecznie buforować obrazy. Gdy zwracasz obraz ze swojej witryny, możesz dołączyć nagłówek odpowiedzi HTTP ze wskazówkami dotyczącymi buforowania, takimi jak zalecany czas, przez który przeglądarka ma buforować obraz. Jednym ze sposobów sprawdzenia, czy nagłówki pamięci podręcznej odpowiedzi HTTP zostały odpowiednio ustawione w Twojej witrynie, jest ponowne skorzystanie z raportu PageSpeed Insights. W sekcji Udostępnij zasoby statyczne przy użyciu zasad wydajnej pamięci podręcznej raportu PageSpeed Insights zidentyfikowano obrazy, które mogą zyskać na ulepszeniach pamięci podręcznej. Innym podejściem jest użycie karty Sieć w narzędziach programistycznych w przeglądarce Chrome w celu sprawdzenia nagłówków odpowiedzi pamięci podręcznej HTB. Aby rozwiązać problemy w swojej witrynie, sprawdź, czy masz ustawienia platformy lub serwera internetowego, które możesz zmienić, aby dostosować czas trwania pamięci podręcznej dla obrazów w Twojej witrynie.

Jeśli nie zmieniasz często obrazów lub jeśli zawsze nadajesz obrazom nowy adres URL, możesz ustawić bardzo długi czas życia pamięci podręcznej. Oprócz czasu trwania pamięci podręcznej korzystanie z sieci CDN często przyspiesza pobieranie, buforując kopie obrazów w wielu lokalizacjach na całym świecie, bliżej miejsc, z których użytkownicy się łączą. Ostatnia wskazówka jest bardziej zaawansowaną wskazówką. Prawidłowe ustawienie kolejności pobierania zasobów, w tym obrazów, może znacznie poprawić wydajność strony, ponieważ pobieranie obrazów jeden po drugim może być powolne. Przeglądarki korzystające z protokołu HTTP/1 zazwyczaj pobierają kilka obrazów równolegle za pośrednictwem niezależnych połączeń sieciowych z witryną.

Jeśli witryna internetowa obsługuje protokół HTTP/2, większość przeglądarek pobiera obecnie multipleksowo pliki w ramach jednego połączenia sieciowego. Jest to zazwyczaj szybsze i pozwala uniknąć problemów, takich jak blokowanie pobierania mniejszych plików przez duże pliki. Niezależnie od tego, które podejście zostanie zastosowane, nadal istnieje wąskie gardło w przepustowości sieci. Ogólnie rzecz biorąc, chcesz, aby obrazy były pobierane w następującej kolejności: Najpierw chcesz pobrać duże obrazy bohaterów na górze strony, ponieważ mogą one mieć wpływ na największy wynik Contentful Paint na stronie. Największa zawartość treściowa, w skrócie LCP, to czas potrzebny na wyświetlenie użytkownikowi głównej zawartości ekranu. Największa zawartość treściowa, podobnie jak skumulowana zmiana układu, jest kluczowym wskaźnikiem sieci. Następnie chcesz pobrać inne obrazy, które będą widoczne bez przewijania. Obrazy widoczne bez użycia przewijania nazywane są obrazami znajdującymi się nad zakładką. Pozostałe są określane jako poniżej zakładki. Ponieważ stronę internetową można przeglądać na urządzeniach o różnych rozmiarach ekranów, często ocenia się, które obrazy znajdują się w części widocznej na ekranie, a które w części widocznej na ekranie, sprawdzając witrynę na wielu urządzeniach. Na koniec chcesz, aby pobierane były obrazy znajdujące się tuż poza ekranem, aby były gotowe do wyświetlenia, gdy użytkownik zacznie przewijać. Inne obrazy, które prawdopodobnie nie zostaną wkrótce wyświetlone, często najlepiej ładować leniwie. Jeśli użytkownik nie przewinie strony, pobranie ich byłoby stratą zasobów. W wykryciu, czy Twoja witryna skutecznie ładuje obrazy, ponownie pomocny może być raport PageSpeed Insights. Na przykład sekcja raportu „Różne obrazy pozaekranowe” identyfikuje obrazy, które można wczytać po innych obrazach. Istnieją inne sekcje, które mogą być przydatne, takie jak Unikaj łączenia zasobów krytycznych w łańcuchy. Chociaż te łańcuchy zazwyczaj obejmują pliki JavaScript i CSS. Powszechną techniką poprawiającą kolejność ładowania obrazów jest leniwe ładowanie. W tym miejscu obrazy nie są pobierane, dopóki użytkownik nie przewinie do tej części strony.

Leniwe ładowanie zostało pierwotnie zaimplementowane przy użyciu JavaScript. Ale teraz większość przeglądarek obsługuje atrybut loading=lazy HTML. Należy zachować ostrożność, ponieważ w przypadku korzystania z leniwego ładowania obrazów w części widocznej po przewinięciu może nastąpić pogorszenie wydajności. Najnowsze wersje Lighthouse będą podświetlać, jeśli obraz jest ładowany z opóźnieniem, co będzie miało wpływ na LCP. Wraz z pojawieniem się protokołu HTTP/2 możliwe są dodatkowe optymalizacje, jeśli zarówno przeglądarka, jak i witryna internetowa obsługują protokół HTTP/2. Witryna internetowa HTTP/2 może rozpocząć przesyłanie do przeglądarki obrazów, o których wie, że będą potrzebne, bez czekania, aż przeglądarka ich zażąda. Protokół HTTP/2 umożliwia także przeglądarkom efektywniejsze pobieranie wielu obrazów równolegle za pośrednictwem jednego połączenia sieciowego. Aby móc korzystać z protokołu HTTP/2, należy skonfigurować serwer WWW tak, aby wiedział, które zasoby należy wypchnąć, lub użyć sieci CDN z obsługą protokołu HTTP/2 i skonfigurować ją tak, aby przesyłała zasoby zgodnie z wymaganiami.

Na koniec pokazałem typowe problemy, które mogą wystąpić w witrynach e-commerce ze statycznymi obrazami. Niektóre mają proste rozwiązania, takie jak zapewnienie, że znaczniki obrazów w formacie HTML zawsze określają atrybuty szerokości i wysokości obrazu lub użycie atrybutu ładowania równa się leniwemu obrazowi. Istnieją bardziej zaawansowane techniki, które możesz wdrożyć bezpośrednio na swojej stronie internetowej. Ale najłatwiejszym rozwiązaniem może być skorzystanie z CDN strony trzeciej z odpowiednią obsługą.

Usługi takie mogą udostępniać obrazy w najlepszym formacie obsługiwanym przez przeglądarkę. W razie potrzeby konwertuj obrazy z jednego obrazu źródłowego na bardziej wydajne formaty. Wstępnie skaluj obrazy do wielu rozmiarów, aby efektywnie je pobierać i wyświetlać na różnych urządzeniach, a także kompresuj obrazy, aby zmniejszyć rozmiar pobieranych plików.

Dzięki za oglądanie. Jeśli spodobał Ci się ten film, nie zapomnij kliknąć Subskrybuj. Co tydzień w Centrum wyszukiwarki Google pojawiają się nowe filmy.