Dodanie „leniwego ładowania” elementów iframe zamieszczonych na mobilnych stronach internetowych może przyspieszyć je nawet o 10 sekund!
Wzrost ruchu internetowego pochodzącego od użytkowników mobilnych i ludzi na całym świecie z ograniczonymi możliwościami połączeń komórkowych zmusił firmy i deweloperów do znacznej optymalizacji szybkości ładowania witryn. Tradycyjnie, kiedy przechodzisz do strony internetowej, przeglądarka pobiera i wyświetla całą dostępną zawartość: obrazy, ikony, GIF-y, style, skrypty i tak dalej. Jak możesz sobie wyobrazić, ładowanie wszystkich tych rzeczy powoduje opóźnienie podczas uruchamiania witryny, szczególnie w przypadku użytkowników korzystających z wolnych połączeń.
Google od jakiegoś czasu próbuje wyeliminować ten problem. W zeszłym roku dodano funkcję leniwego ładowania obrazów w przeglądarce Google Chrome w wersji 76. Teraz Google wprowadza tę samą funkcjonalność opóźnionego ładowania dla iframe’ów.
Leniwe ładowanie (ang. lazy loading) ładuje zawartość strony internetowej na żądanie, co oznacza, że nie zostaną one pobrane i wyświetlone, dopóki nie przewiniesz w dół i nie wyświetlisz ich na ekranie, co zmniejsza początkową prędkość uruchamiania witryny.
Jak wspomniano, opóźnione ładowanie obrazów jest dostępne w Chromie od zeszłego roku, ale teraz programiści mogą używać tej samej metody również w ramkach iframe. Aby zaimplementować to we własnej witrynie, wystarczy dodać atrybut loading="lazy" do swoich obrazów: <img loading="lazy"> i elementów iframe: <iframe loading="lazy">.
Przykład:
<iframe
src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>Przeglądarki takie jak Firefox i Safari mają już zaimplementowaną funkcję opóźnionego ładowania natywnych obrazków. Jeśli chodzi o elementy iframe, nadal pracują nad naprawieniem kilku błędów. Google wspomniało również, że przeglądarka mobilna Chrome na Androida w wersji uproszczonej automatycznie ładuje obrazy i ramki iframe poza ekranem.
Jak na ironię, podczas testowania jak osadzanie filmów z YouTube’a (które są oparte na elementach iframe) wpłynęłoby na szybkość ładowania strony internetowej przy leniwym wczytywaniu – zespół Chrome’a odkrył, że „zaoszczędził 10 sekund na tym, jak szybko nasze strony mogą być interaktywne na urządzeniach mobilnych”. Nie trzeba dodawać, że opóźnione ładowanie ma rzeczywistą przewagę nad tradycyjną metodą pobierania całej zawartości strony internetowej podczas jej odwiedzania.
źródło: Github | Web.DEV| XDA-Developers
Od 2005 roku zajmuję się komunikacją internetową i e-marketingiem, jestem pasjonatem urządzeń mobilnych oraz nowych technologii – i nie waham się ich używać.