<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Отложенная загрузка изображений

Отложенная загрузка изображений

Нас, веб-разработчиков, строгий Google, уже давно убедил, что изображения на сайте, надо оптимизировать – уменьшать их вес. Красный или оранжевый уровень скорости загрузки сайта, по данным Google PageSpeed Insights, никого не оставляет равнодушным.

Но, при большом нагромождении графики, на странице, одной оптимизации недостаточно, чтобы достичь отличных показателей, по скорости загрузки страницы. Что ещё можно предпринять, чтобы сайт быстрее загрузился?

Когда пользователь открывает сайт, то целиком загружается DOM-дерево, вместе со всеми картинками. Разве разумно, тратить ресурсы на загрузку изображений, до которых пользователь, ещё не до скроллил? Правильнее было бы, показывать только те изображения, которые попали в область видимости, подгружая остальные, по ходу движения, вниз страницы.

Сам Google рекомендует использовать на сайте, отложенную загрузку изображений. Для JavaScript программиста, не составит труда, написать такой скрипт. А что же делать остальным? Не волнуйтесь, уже все придумано, за нас. Например, есть готовое решение – плагин на JS - Lazyload.

Как использовать плагин lazyload

Подключить плагин к проекту, перед закрывающим тегом body.

<script src="js/lazyload.js">

Прописать в атрибутах изображения, параметр data-src.

<img class="lazyload" data-src="image_name.jpg">

Инициализировать в JS файле, на классе тега img.

$("img.lazyload").lazyload();

Однако, сам автор плагина Lazyload, указывает, что для правильной оптимизации, этого недостаточно. Поскольку, на самом деле, подгружается больше изображений, чем видит пользователь.

Для исправления этого бага, он предлагает использовать заглушки (thumbnails), прописав до них путь, в атрибуте src. Это прозрачные PNG файлы, с теми же пропорциями, что и у оригинальных изображений.

<img class="lazyload" src="thumbnail.png" data-src="image_name.jpg">

Где взять заглушки?

Как вариант создать в Photoshop или воспользоваться онлайн-генератором, что намного быстрее.

Практический пример

У меня создана галерея, состоящая из 4-ёх превью-картинок. Первые два изображения занимают первый экран, а 3-е и 4-ое, находятся во втором ряду. Как только откроется страница, все картинки начнут загружаться. Замерим скорость загрузки страницы,без lazyload плагина.

Скорость загрузки на Desktop, неудовлетворительная – 74/100, на оранжевом уровне.

Отложенная загрузка изображений (Lazyload).

Подключаем плагин lazyload

Воспользуемся онлайн-генератором и создадим адаптивные заглушки (placeholder image). Соотношение сторон изображения и заглушки, должны быть одинаковыми. Оригинальный размер картинки – 640x426. Однако для генерации кода заглушки, вам надо указать размер 600x400, получится соотношение сторон – 3:2.

Отложенная загрузка изображений (Lazyload).

Сгенерированный код в кодировке base64 , вставляете в img, всех изображений.

<img class="lazyload" src="data:image/gif;base64,R0lGODlhAwACAIAAAP///wAAACH5BAEAAAEALAAAAAADAAIAAAICjF8AOw=="
data-src="mountains.jpg" alt="Mountains">

Дополнительно, можно создать пиксельный узор в каком-нибудь графическом редакторе и использовать, как фон для placeholder. Загружаете GIF файл, а на выходе получаете код.

Отложенная загрузка изображений (Lazyload).

Вставляете полученный код, в CSS стили.

img {
width: 100%;
display: block;
background-image:url ("data:image/gif;base64,R0lGODlhBgAIAIABAOTk5P//
/yH5BAEAAAEALAAAAAAGAAgAAAILhIN2CpjvWJBpvQIAOw==")
}

Пользователь открывает страницу и видит первый ряд с картинками. Плагин lazyload, физически загрузил, только те изображения, которые попадают в область видимости пользователя. При прокрутке экрана вниз, подгружается следующий ряд с картинками.

Заключение

В результате, время загрузки страницы, уменьшается, за счет уменьшения количества одновременно загружаемой графики. Что нам теперь покажет Google PageSpeed?

Отложенная загрузка изображений (Lazyload).

У Desktop экранов, показатели улучшились до зеленого уровня - 88/100. Отложенная загрузка изображений, не была напрасна.

Пример страницы

Все файлы урока на GitHub

Никогда не видели, как создаются крупные на Java проекты с нуля? Переходите по ссылке и создайте вместе со мной программу на Java .

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.