Pull to refresh

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

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

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

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



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

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

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

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

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

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

via askdev.ru/blog
Tags:
Hubs:
+56
Comments 75
Comments Comments 75

Articles