Февраль
6
2012

LazyLoad для изображений

LazyLoad для изображений

Что я только не делал для ускорения работы сайта. И настроил nginx для работы с Super Cache, и включил статическое сжатие страниц, а время загрузки страниц все никак не уменьшается. Начал разбираться и нашел главных виновников:  жетоны в Battlefield 3 и медали, нашивки в Battlefield 3. В этом нет ничего удивительного, ведь на одной странице больше 300 картинок, а на второй около 200. При этом battlelog-cdn работает под nginx 0.6.39 и не добавляет к картинкам данные о сроке годности (expires). Выход из этой ситуации — загружать картинки после полной загрузки страницы, называется такой способ LazyLoad и чуть раньше я писал как сделать позднюю загрузку для сторонних скриптов.

jquery Lazy Load

Я выбрал код, использующий библиотеку jQuery, написанный Mika Tuupola. Использовать его довольно просто

  1. Если у вас на сайте нет jQuery, то добавляем вызов
  2. Заливаем на сайт файл скрипта и добавляем его вызов
  3. Вызываем обработчик
  4. Те картинки, которые мы хотим получать после загрузки страницы нужно оформлять отдельно
  5. Некоторые пояснения. В этом случае я использую lazyload только для тех картинок, в которых выставлен class=»lazy», при этом заранее загружаются картинки на 200 пикселей ниже видимой области. В src=»http://tigors.net/js/grey.gif» хранится серая заглушка, а код настоящая картинка в параметре data-original=»». На сайте автора есть другие примеры и больше пояснений.

    Массовая переделка старых записей

    Проблема в том, что вручную переписать код полутысячи картинок задача непростая, но в этом случае нам поможет Notepad++.

    Заходим в редактирование нужной записи, переходим в режим редактирования HTML, выделяем весь код и копируем в Notepad++.

    Запускаем поиск (Cntrl+F), форму заменить. Выбираем замену по регулярным выражениям и заполняем поля.

    Полученный код вставляем обратно в WordPress и сохраняем страницу.

    Результат

    Результаты работы такого подхода сразу видно в отчетах по скорости GoogLe Analytics.

    Неправильная раскладка: дфяндщфв lkz bpj,hf;tybq

Понравилась статья? Посоветуйте друзьям!

Analytics JavaScript Скорость сайта


Понравилась статья? Подпишись на рассылку по E-Mail или в RSS.
  • Uucyc
    Но как это сказывается на индексации изображений поисковиками, ведь в их глазах у вас на странице есть только изображения-заглушки...
  • нужно под каждой картинкой добавлять эту же картинку как она и была написана в теге