Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Optymalizacja zapytań http dzięki redukcji ilości obrazków na stronie

Czasami jest tak, że na stronie jest dużo obrazków. Każdy obrazek to zapytanie do serwera, które w mniejszym lub większym stopniu wpływa na szybkość wczytywania się strony i wygenerowany transfer. W tym wpisie przedstawię prosty sposób na ograniczenie ilości zapytań za pomocą prostego skyptu w JS.

Problem

Zanim przejdziemy do konkretów, spójrzcie na poniższy obrazek.

Jest to jeden z moich serwisów. Przedstawia on stronę z ogłoszeniami, gdzie przy każdym z nich znajduje się obrazek (opcjonalnie). W najgorszym wypadku tych zdjęć będzie 10 (tyle samo dodatkowych zapytań). Są serwisy gdzie tych zdjęć może być znacznie więcej np. galerie, listy produktów w sklepach - problem jest ten sam. Tramsfer i niepotrzebne zapytania do serwera po obrazki.

Na czym polega zatem trik?

Trik

Na tym aby pokazywać użytkownikowi te obrazki, które będą w zasięgu jego "wzroku" (przeglądarki). Na powyższym obrazku oznaczyłem zdjęcia kolorem zielonym i czerwonym. Zielony oznacza obrazek, który zostanie wgrany za pierwszym razem (gdy wgra się strona), zaś czerwony obrazek który się wgra gdy użytkownik przewinie stronę w dół.

Wszystkie obrazki wskazują na przezroczysty obrazek o wymiarach 1px na 1px. Zaś oryginalny url jest trzymany w atrybucie lazy-img-url. Podmiana jest robiona w momencie gdy pozycja obrazka znajdzie się w obszarze przeglądarki.

<img src="blank.gif" lazy-img-url="/path/to/original/image">

Do tego celu stworzyłem prosty plugin jQuery, który odpala się w następujący sposób:

$('img[lazy-img-url]').lazyimg();

Lub z dodatkowymi parametrami:

$('img[custom-img-url]').lazyimg({
    offset: 10,
    attr: 'custom-img-url'
});

Oba te parametry są opcjonalne i oznaczają kolejno:

Działanie pluginu można zobaczyć na stronach miast serwisu estancje.pl np. Lublina.

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Dawid

05.02.2014 Dawid

Bardzo Ciekawe rozwiązanie ;) na pewno wykorzystam na jakiejś stronce. Dzięki.

Gavatar artur

05.02.2014 artur

A jak to widzi robot googla? Chodzi mi o SEO i ruch z wyszukiwarki obrazów

Gavatar Piotrek

05.02.2014 Piotrek

@Artur: Tutaj SEO raczej kiepsko jest. Albo redukujesz zapytania http albo jesteś wysoko w google w grafice.

Gavatar Łukasz Fedorowicz

06.02.2014 Łukasz Fedorowicz

Fajne i przydatne.

Gavatar Comandeer

07.02.2014 Comandeer

Swego czasu się zastanawiałem nad lazy loading a accessibility i usability.
Tutaj o accessibility można powiedzieć jedno: nie isnieje ;) czemu nagle stracił się alt z obrazka? On tam powinien być i to bezwzględnie
Ciekawszy jest przypadek js-off, bo w tym momencie obrazek wgl się nie wyświetli (i choć pewnie większość tutaj uzna to za edge'owy przypadek, warto nadmienić, że większość osób, które nie obsłużą JS, nie obsłuży ich z powodu wszelkiego rodzaju błędów - wbrew pozorom najmniejszą grupę bez JS stanowią właśnie ci, którzy go specjalnie wyłączyli). jak dla mnie, najlepiej z punktu widzenia usability, byłoby po prostu otoczyć taki placeholder linkiem do prawdziwego obrazka. proste i skuteczne (i mamy pewność, że 100% nas odwiedzających obrazek zobaczy... pod warunkiem oczywiście, że nie bawią się lynxem ;))
co do JS-a - naprawdę nie rozumiem boomu na jQuery (ok, rozumiem - sam go używam, ale już mnie krew zalewa jak widzę jego niekonsekwencje). tym bardziej, że ten lazy loading można spokojnie napisać w czystym JS - i nie będzie to specjalnie bardziej rozbudowane.
w przypadku scroll raczej należy uważać ;) przy większej ilości obrazków pojawią się pewnie lagi - raczej warto tutaj pomyśleć o tzw. debounce function. powinno bardzo usprawnić pracę całości
no i czemu niestandardowy atrybut, skoro w HTML5 mamy data-*?

Dodaj komentarz