Пользователь
0,0
рейтинг
10 марта 2010 в 23:47

Разработка → Увеличиваем скорость загрузки сайта используя lazy-load изображений

Сейчас многие сайты насыщены графикой в разных видах: аватары, иллюстрации к постам, галереи и тп.

Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.

Количество обращений к серверу можно легко уменьшить с помощью техники пост загрузки изображений, которые не попадают в область видимости(первый экран). Т.е изначально будут загружаться только те изображения которые пользователь способен увидеть, остальные будут загружаться по мере скролинга страницы.



Так как я сторонник использования различных JavaScript фреймворков я приведу компоненты/расширения для одних из самых популярных: JQuery, Prototype и YUI. Если вы знаете похожие расширения для других библиотек, пожалуйста, пишите в комментариях и я добавлю их в список.

Добиться ускорения загрузки сайта можно с помощью следующих компонент:

UPD: DevMan подсказал класс для mootoolshttp://davidwalsh.name/mootools-lazyload

Список выстроен в таком порядке не случайно, появления одного плагина вызывало рождение другого — YUI -> JQuery -> Prototype.

Это очень простое решение, которое встраивается в вэбсайт всего менее чем за час(а то и 10 минут), но может принести вам значительную экономию трафика и увеличение скорости загрузки страниц, а главное снижение нагрузки на сервер.

Посмотреть как работает данная техника можно, например, на сайте mashable.com

via askdev.ru/blog
Иван @ivv
карма
56,7
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (75)

  • +2
    я едва заметил разницу с моим интернетом, но идея очень интересная
    • +2
      я не просто так привел в пример mashable(который очень тяжелый), учитывая что по версии алексы он №358 в мире, сами подумайте сколько трафика они так экономят, и как снижается нагрузка на их CDN.
      • +1
        Там особые таланты сидят — сайт рулится по-детски, вордпрессом с суперкеш плугином… их в пример приводить несолидно)
        • +2
          я привожу «как пример» а не ставлю «в пример» :)
    • +3
      Например, скроллинг с задержками.
  • +6
    • 0
      добавил в список, спасибо
  • 0
    А как красиво появляются картинки в примере. Спасибо, возьму на заметку.
  • –1
    насчет нагрузки на сервер — она-то как раз, в среднем, увеличится: данных будет загружено больше, чем нужно.

    И Lazy Load под свои нужды ботается тоже минут за 10. Не больше.
    • +1
      почему больше? те файлы которые пользователь не будет смотреть загружаться не будут вообще, а загрузятся только если он начнет скролить.
      • 0
        черт, вредно много знать. Lazy load перепутал с prefetching aka pre-load :)

        На Facebook такое реализовано. Только немного напрягает + браузер кушает мощно.
  • +13
    Что-то я не ощутил пользы. На сайте, который вы привели в пример, «Опера» мне сообщила, что загрузила что-то около 170 изображений. По мере пролистывания ничего не грузилось больше, только картинки появлялись фейдом.
    • 0
      вы случайно небыли сегодня на машабле раньше? иначе, картинки то уже в кеше.
      • +4
        Никогда не был на этом сайте.
        • 0
          возможно у них уже что-то изменилось с того времени как я интересовался именно этой темой, но те плагины которые я привожу будут делать именно то, что я описал.

          Не в mashable суть, но визуально это будет выглядеть именно так(или без фейда)
        • 0
          Так фейдом как раз и появляются подгружаемые картинки.
          Возможно библиотеки ведут себя по разному в различных браузерах — у меня например не работает пример на jquery в swiftfox (оптимизированный firefox, если кто не знает).
          Если в лисе отключить кэш, открыть firebug на вкладке net->images и скролить, то видно как картинки подгружаются.
          • 0
            Как я уже сказал, у меня картинки грузятся разом, потом просто на экране появляются плавно.
            • –1
              Opera просто сразу всё выкачивает, ведь картинки есть в разметке и display: none не предохраняет их от скачки. С точки зрения пользователя — это правильно. С точки зрения разработчиков сайтов — распределять так нагрузку не особо умно, ибо давным-давно люди придумали лоад-балансеры, статику, спрайты и прочие красивости.
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  Сыплю голову пеплом, что-то меня маразм заел совсем. Такой фейл от заядлово оперовода! Сам же так баннеры режу (:
    • 0
      да, пример явно неудачный
      • 0
        вот здесь (не сочтите за рекламу) реализован lazy load www.facebook.com/pages/Web-Optimizer/183974322020 — доматываем до конца списка, только тогда начинается загрузка остального контента
        • +1
          Google Reader, опять же.
        • 0
          некоторые вещи на хабре так сильно всем знакомы, что в рекламе не нуждаются :)
        • +1
          Кстати варианты, когда страница подгружается при скролле (и в Ридере тоже), по моему неудачны, так как запутывают пользователя (то есть меня): размер линейки прокрутки не соответсвует действительной длине страницы, и при прокрутке вдруг все это резко прыгает. Также, если интернет не очень быстрый, то из-за задержек контент вообще будет неожиданно выскакивать, что еще хуже.

          Думаю, место под подгружаемый контент надо резервировать заранее.
          • 0
            А постраничная навигация вас не запутывает? Заходишь так на хабр, глядь на скролбар, а на сайте то 10 статей, не больше. Долистываешь до конца, а там!
            • +1
              Ох, вы не прочли, что я пишу, запутывание идет в том, что страница внезапно прыгает и в ней больше контента, чем казалось.
          • 0
            Меня в Ридере сильно раздражает невозможность быстро пропустить запись с большим количеством картинок, размеры которых не указаны. А вот подгрузка следующих записей сильно ускоряет чтение.
            • 0
              а клавишу «j» пробовали нажимать?
              • 0
                О том и пишу: j помогает только если размеры картинок указаны. Если они не указаны, то следующий пост сразу уедет внизу, приходится ждать пока не загрузятся все картинки.
      • 0
        для каждого плагина можно посмотреть демки.
  • +1
    Спасибо, я уже не одну неделю ломаю себе голову как называется данный плагин! Спасибо!
  • +5
    На безлимитке мне бы не очень понравилось, что страничка открытая полчаса назад начинает тупить и грузиться, когда я наконец решил ее почитать

    А вот на 3G с недешевым трафиком это очень полезно.

    Было бы интересно увидеть подобный функционал, в виде расширения для браузера. То есть кому нужно — ставит, а у кого безлимитка — не ловит непонятных глюков с недогруженными картинками.
    • 0
      Хотелось бы, чтобы подобный функционал реализовывался на самом сайте в виде этакой кнопочки при нажатии на которую он переходит в режим lazyload.
    • 0
      Полезно, когда вас везут в тоннеле и вы как раз дочитали до незагруженного места?

      Было бы здорово, если бы браузеры просто сами сортировали загрузку картинок, определяя те, которые появятся первыми, затем на следующей странице, затем в конце, затем все остальные… Или это уже и так есть? Во всяком случае, если divёы с элементами первой страницы не будут загнаны в конец html-документа (как в Википедии, например), то >img< как раз будут в порядке появления.
  • +2
    Приведенный пример понравился. Именно «мягкостью» появления картинок под катом. То, что я видел до этого, когда картинки просто недогружались и вместо них появлялась дырка меня порядком бесило (на www.smashingmagazine.com часто такое бывает в обзорах). Особенно это напрягает, когда картинки большие и ты дожидаешься загрузки страницы и спокойно начинаешь ее просматривать, когда вдруг, после очередного скролла обнаруживаешь, что тебе «подсунули огрызок» страницы и остатки ждать нужно опять.
  • +1
    Дабы не быть многословным — на сайте ютуба такая же вещь, когда справа список рекомендуемых и если резко промотать вниз — догружаются пикчи
    всем чмоке
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      если кэш не пустой, то естественно будет тянуть из него. Выше люди привели другие примеры, может и правда у машабла это «уже» не работает.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Если вы откроете эту страницу в chrome или firefox c запущенным http-дебагером и будете не спеша скролить страницу вниз, то дебагер вам наглядно покажет как подгружаются файлы.
          • 0
            вот результат эксперимента с выдёргиванием сетевого шнура:
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              За другие библиотеки не скажу, а класс для mootools реализует нечто похожее на onFocus (навешивает обработчик на скрол, который обрабатывает текущие координаты и подгружает изображения по необходимости).
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  как узнать, что картинка стоит за тысячным пикселем, а не за девятисотым?
                  А в чём, собственно, проблема это узнать?
                  Код небольшой, загляните и увидите, что никакого onfocus там нет.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      Я писал о решении под mootools. Если хотите ответа, потрудитесь привести пример из него.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    а как насчет ленивой загрузки фоновых (background) изображений? :)
    • 0
      таким не занимался
  • +2
    Выше уже отметили, что данный прием несколько раздражает. Для счастливых обладателей быстрого интернета это еще подходит и они не заметят неудобств.

    Если раньше я просто открывал страницу в фоновой вкладке и ждал пока она загрузится, то при использовании lazy load мне нужно сначала подождать пока загрузится страница, а потом проскроллить ее до конца и подождать пока загрузятся картинки. Мягко говоря, это не слишком-то удобно…
  • 0
    Ну вообще. На приведенном в качетсве примера сайте не работает в Опере, а демка от плагина от jQuery работает только в Оперы.

    Если кому-то всеже интересно посмотреть на реально работающую ленивую загрузку, можете посмотреть здесь. Сделано года 2 назад.
  • 0
    Было бы здорово иметь такого рода пользовательский скрипт, скажем, для greasemonkey, потому что на сайте вцелом это не всегда нужно. То есть на представлениях такого рода, ленивая загрузка, кнешно необходима. Но, как правильно заметил Peretyaka, такая штука есть не очень здорово для активного сёрфинга на широченном безлимите :) А для людей, что сидят на даче с триджи мопедом не помешал бы аддон в браузер.
  • 0
    Есть плагин для Wordpress, но у меня на 2.9.2 версии не работает. Сейчас буду пробовать вручную.
  • 0
    Классная вещь!
    Но эти сеошники… чую как они завоют из-за того что в scr прописана затычка изначально, то поисковики не будут видеть картинки…
  • 0
    Здесь используется загрузка скрипта в HEAD страницы, поэтому приходится загружать jquery минимальный, потом ещё этот скрипт, и он начинает работать сразу же, ДО загрузки картинок. Он их прячет (меняет src на grey), а потом по событиям показывает (грузит) в нужный момент.

    Но это очень грубый вариант, хотя и позволяющий работать с любым сущестующим проектов.

    Если же использовать подобную технологию на собственном проекте, лучше всего сделать, чтобы картинки изначально шли с src подложки grey, и был атрибут originalSrc (еcли js включен), и чтобы скрипты грузились правильно, то есть в конце страницы.
  • +1
    Ваш mashable.com ужасно долго думал прежде чем отрендериться на фаерфоксе. Какая уж тут скорость? Если бы был левый сайт — я б его закрыл наверно, не дожидаясь загрузки.
    Рубить нафиг весь яваскрипт лишний и верстку надо делать легкую.
    • 0
      Скорее это особенности вашего ff и/или провайдера — ни у меня, ни у моих коллег не возникает ни каких проблем с mashable.com в лисе, даже с выключенным кэшем.
    • 0
      Установил на сайт, 10 минут порадовался :) Потом тоже зашел под фаерфоксом, ужаснулся, и убрал скрипт.
  • 0
    А как с SEO?
  • 0
    На дочерних сайтах Tuts+ Network (Vectortuts, Psdtuts, ...) картинки тоже грузятся через lazy-load скрипт. Это очень мешает, когда открываешь страничку и сохраняешь её: сохраняются только загруженные изображения. Приходится блокировать этот скрипт.
  • 0
    Счетчик стал грузится только при промотке к самому низу страницы, как это исправить?
  • 0
    В избранное.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      не ну если они есть в кеше браузера, то оттуда и возьмутся, правда браться они будут в момент прокрутки, а не при загрузке.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Да, я полностью с Вами согласен, просто сказал как он это делает=)
        • 0
          тут имеется в виду экономия трафика сервера а не пользователя
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              картинка будет показана из кэша в любом случае, кэш отключить может только пользователь браузера
            • 0
              Ну так и на сервере эконимии не получается, так как пользователь каждый раз при загрузке страницы, вместо того, чтобы показать картинку из кэша браузера, дергает его, чтобы тот отдавал картинку пользователю.

              Если картинка уже есть в кэше браузера, она дёргается из кэша, а не с сервера.
  • 0
    mashable.com тормозит неподецки даже на chrome на 4хядернике из-за этой lazy load.
    Можно представить менее тормозящую технику?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.