4 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>12 дек 2019</li>
2
<ul><li>12 дек 2019</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как ускорить загрузку страниц сайта с помощью lazy loading и как это влияет на поведение пользователей.</p>
4
</ul><p>Рассказываем, как ускорить загрузку страниц сайта с помощью lazy loading и как это влияет на поведение пользователей.</p>
5
<p> vlada_maestro / shutterstock</p>
5
<p> vlada_maestro / shutterstock</p>
6
<p>SEO-специалист компании Adindex.ua</p>
6
<p>SEO-специалист компании Adindex.ua</p>
7
<p>Исследование Google<a>показало</a>, что при увеличении скорости загрузки страницы с 1 до 3 секунд вероятность, что пользователь уйдёт сразу, возрастает на 32%, а с 1 до 5 секунд - на 90%. Кстати, среднее время полной загрузки страниц составляет около 15 секунд. Это слишком медленно, ведь 53% пользователей покидают страницу, загрузка которой занимает более трёх секунд. К счастью, это наш шанс выделиться среди конкурентов.</p>
7
<p>Исследование Google<a>показало</a>, что при увеличении скорости загрузки страницы с 1 до 3 секунд вероятность, что пользователь уйдёт сразу, возрастает на 32%, а с 1 до 5 секунд - на 90%. Кстати, среднее время полной загрузки страниц составляет около 15 секунд. Это слишком медленно, ведь 53% пользователей покидают страницу, загрузка которой занимает более трёх секунд. К счастью, это наш шанс выделиться среди конкурентов.</p>
8
<p>На веб-странице может быть много изображений, и зачастую они критически влияют на скорость загрузки содержимого страниц. Но у нас не всегда есть возможность сократить количество изображений. Чтобы сохранить весь медиаконтент и одновременно улучшить поведенческие факторы, пригодится функция отложенной<em>("ленивой")</em>загрузки.</p>
8
<p>На веб-странице может быть много изображений, и зачастую они критически влияют на скорость загрузки содержимого страниц. Но у нас не всегда есть возможность сократить количество изображений. Чтобы сохранить весь медиаконтент и одновременно улучшить поведенческие факторы, пригодится функция отложенной<em>("ленивой")</em>загрузки.</p>
9
Производительность страницы до реализации механизма lazy loading<p><strong>Lazy loading</strong><em>("ленивая" загрузка)</em> - это метод, который откладывает загрузку некоторых элементов страницы, показывая их лишь тогда, когда пользователь доскроллит страницу до их расположения. То есть при открытии страницы загружаются только её структура, тексты и стили, а, например, изображения, находящиеся ниже первого экрана прокрутки, подтягиваются позже. Когда мы "лениво" загружаем изображения, то уменьшаем начальное время отклика страницы, её начальный вес и использование системных ресурсов компьютера. Это положительно влияет на производительность сайта.</p>
9
Производительность страницы до реализации механизма lazy loading<p><strong>Lazy loading</strong><em>("ленивая" загрузка)</em> - это метод, который откладывает загрузку некоторых элементов страницы, показывая их лишь тогда, когда пользователь доскроллит страницу до их расположения. То есть при открытии страницы загружаются только её структура, тексты и стили, а, например, изображения, находящиеся ниже первого экрана прокрутки, подтягиваются позже. Когда мы "лениво" загружаем изображения, то уменьшаем начальное время отклика страницы, её начальный вес и использование системных ресурсов компьютера. Это положительно влияет на производительность сайта.</p>
10
<p>Есть несколько методов, как реализовать отложенную загрузку согласно<a>рекомендациям Google</a>.</p>
10
<p>Есть несколько методов, как реализовать отложенную загрузку согласно<a>рекомендациям Google</a>.</p>
11
<p><strong>Обработчик событий (например, scroll или resize)</strong></p>
11
<p><strong>Обработчик событий (например, scroll или resize)</strong></p>
12
<p>Он подходит, если для вас критически важна совместимость браузеров, но при этом у обработчика есть потенциальные проблемы с производительностью из-за повторяющихся вызовов задержки обработки.</p>
12
<p>Он подходит, если для вас критически важна совместимость браузеров, но при этом у обработчика есть потенциальные проблемы с производительностью из-за повторяющихся вызовов задержки обработки.</p>
13
<p><strong>API-интерфейс обозревателя пересечений</strong></p>
13
<p><strong>API-интерфейс обозревателя пересечений</strong></p>
14
<p>Он проще в использовании и чтении, чем код с обработчиками событий. Разработчикам нужно всего лишь зарегистрировать его для наблюдения за элементами, а не писать код обнаружения их видимости. Недостаток - поддерживается не во всех браузерах. Не поддерживают или поддерживают только некоторые функции API Chrome ver. 4-57, Mozilla Firefox ver. 2-54, все версии IE, Safari ver. 3.1-11.1, Microsoft Edge ver. 12-15, Opera ver. 10.1-44.</p>
14
<p>Он проще в использовании и чтении, чем код с обработчиками событий. Разработчикам нужно всего лишь зарегистрировать его для наблюдения за элементами, а не писать код обнаружения их видимости. Недостаток - поддерживается не во всех браузерах. Не поддерживают или поддерживают только некоторые функции API Chrome ver. 4-57, Mozilla Firefox ver. 2-54, все версии IE, Safari ver. 3.1-11.1, Microsoft Edge ver. 12-15, Opera ver. 10.1-44.</p>
15
<p><strong>Отсрочка загрузки изображений в CSS</strong></p>
15
<p><strong>Отсрочка загрузки изображений в CSS</strong></p>
16
<p>При этом методе JavaScript определяет, когда элемент находится в области просмотра, и применяет к нему класс, который использует стилизацию, вызывающую фоновое изображение. Так изображение загружается только в момент необходимости. В отличие от <img>-тегов, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений.</p>
16
<p>При этом методе JavaScript определяет, когда элемент находится в области просмотра, и применяет к нему класс, который использует стилизацию, вызывающую фоновое изображение. Так изображение загружается только в момент необходимости. В отличие от <img>-тегов, которые загружаются независимо от их видимости, загрузка изображений в CSS выполняется с большим количеством предположений.</p>
17
<p><strong>Готовые решения</strong></p>
17
<p><strong>Готовые решения</strong></p>
18
<p>Если не хотите заморачиваться технической реализации функции "ленивой" загрузки, есть множество готовых библиотек. Многие библиотеки используют шаблон разметки, аналогичный тем, которые описаны выше. Среди готовых решений выделю<a>lazysizes</a>,<a>lozad.js</a>,<a>Blazy</a>,<a>yall.js</a>.</p>
18
<p>Если не хотите заморачиваться технической реализации функции "ленивой" загрузки, есть множество готовых библиотек. Многие библиотеки используют шаблон разметки, аналогичный тем, которые описаны выше. Среди готовых решений выделю<a>lazysizes</a>,<a>lozad.js</a>,<a>Blazy</a>,<a>yall.js</a>.</p>
19
<p>Нужно проверить, что Google способен индексировать контент, для которого используется отсрочка загрузки. В <a>руководстве Google</a>есть рекомендации на тему, как это сделать.</p>
19
<p>Нужно проверить, что Google способен индексировать контент, для которого используется отсрочка загрузки. В <a>руководстве Google</a>есть рекомендации на тему, как это сделать.</p>
20
<p>Для локального тестирования рекомендуется скрипт<a>Puppeteer</a>. После запуска скрипта изучите созданные им скриншоты. Если на них представлен весь необходимый контент, значит, всё в порядке. Или посмотрите, всё ли на месте, с помощью<a>инструмента проверки URL</a>в Search Console.</p>
20
<p>Для локального тестирования рекомендуется скрипт<a>Puppeteer</a>. После запуска скрипта изучите созданные им скриншоты. Если на них представлен весь необходимый контент, значит, всё в порядке. Или посмотрите, всё ли на месте, с помощью<a>инструмента проверки URL</a>в Search Console.</p>
21
-
Производительность страницы после реализации механизма lazy loading<a><b>Попробуйте 4 профессии в интернет-маркетинге на практике ➞</b>На бесплатном мини-курсе вы исследуете ЦА, создадите сайт, оформите социальные сети, напишете продающие тексты и настроите рекламу. Смотреть программу</a>
21
+
Производительность страницы после реализации механизма lazy loading<p>Интернет-маркетинг на практике</p>
22
+
<p>Вы изучите SMM, копирайтинг, таргетинг и продвижение в интернете. На примере кафе с доставкой еды вы разберёте, как продвигать бизнес в интернете, и соберёте сильное портфолио.</p>
23
+
<p><a>Пройти бесплатно</a></p>
24
+
<a><b>Попробуйте 4 профессии в интернет-маркетинге на практике ➞</b>На бесплатном мини-курсе вы исследуете ЦА, создадите сайт, оформите социальные сети, напишете продающие тексты и настроите рекламу. Смотреть программу</a>