98: Lazy load отложенная загрузка изображений на сайте

В этом прямом эфире с нами был Андрей Жинжер из студии разработки сайтов WhiteLabelDevelopers. Мы обсудили нововведения, анонсированные компанией Apple и во второй части эфира дали скрипт для отложенной загрузки картинок на сайте.

Смотрите эфир по временным меткам, что вам интересно.

• 2:00 – Добрый вечер! Знакомство с уважаемым гостем, Андреем, представителем компании по веб-разработке White Label Developers

• 3:09 — Сегодня поговорим о: нововведении в продукции Apple, преимущества webp формата и делимся бесплатными скриптами в эфире

• 3:11 – Крутая новость! Теперь MacOS и IOS (программные обеспечения Apple) будет поддерживать webp c новой версии Safari 14

• 4:05 – Получить скрипты платно после эфира возможно по ссылке https://pay.loading.express/ob/ord/lazyloadimg

• 4:35 – История эволюции формата сжатия изображений от jpeg до нынешнего webp

• 6:01 – Почему Apple отказывался от webp долгое время

• 7:20 – Готовый скрипт для сжатия картинок сайта в webp доступен тут https://pay.loading.express/ob/ord/webp

• 7:55 – Полезные советы по сжатию изображений без потери качества в 97 эфире https://youtu.be/77FbuuAbWEo

• 8:12 – О преимуществах последнего обновления Safari

• 8:50 – В чем же причина изменений взгляда компании Apple к webp

• 10:27 – Делимся статистикой развития браузера Safari, выявляем причины

• 12:20 – Сложность внедрения расширений для Safari

• 13:49 – Преимущества Safari перед перво-востребованным браузером Google Chrome, подробнее о Google Chrome — 17:20

• 14:37 – Немного о браузере Firefox Developer Edition

• 18:43 – Как переход Safari на версию 14 с поддержкой webp напрямую влияет на конверсию и продажи непосредственно

• 20:55 – Вопрос из зала: «На каких устройствах останется Safari-13?», подробнее об обновлениях ПО (IOS/MacOS) – 21:58

• 22:54 – На самом ли деле webp является новым форматом сжатия изображений

• 25:40 – Насколько широко webp поддерживается ПО для программного конвертирования и сжатия картинок, подробнее 26:18

• 28:28 – Отвечаем на вопрос: «Что скажете про плагин nginx pagespeed?»

• 30:40 – Вопрос из зала: «setTimeout не работает в IE? Получается отложив счетчик — он не будут собирать посетителей с IE. Да и весь отложенный функционал соответственно перестает работать в IE. Есть ли костыль?»

• 32:32 – Вопрос о скрипте от LOADING.express: «Чем отличается Ваш lazy load от всех других плагинов для wordprees?» https://pay.loading.express/ob/ord/lazyloadimg

• 34:20 – Отвечаем на вопросы: «Отложили загрузку блока на 5 сек. Но при загрузке смещает контент (не стали для него резервировать место). PageSpeed все равно увидит совокупное смещение контента даже с учетом его таймаута?»

• 35:20 – Подробный ответ о размерах изображений на вопрос из зала: «Решил, создать 3 версии по размерам для слайдера, по сетке бутстрап, т.е если устройство больше 768px, подгружается картинка большим размером для ПК, lazyload подключен, заметил iphone X, размер 812px. Пейдж спид все равно ругается на картинку для мобильных, как быть ведь сетка 768 px, далее уже идет сетка для ПК»

• 36:40 – Демонстрация работы LazyLoad на сайте

• 39:28 — Проверка скорости загрузки сайта сервисами Google PageSpeed и LOADING.express, https://developers.google.com/speed/pagespeed/insights/ и https://pagespeed.loading.express/    

• 41:02 – Насколько LazyLoad замещает сжатие картинок, проверка на GTmetrix

• 43:02 – Подробней рассказываем о технологии ленивой отложки LazyLoad, подробнее о скрипте 45:30

• 44:53 – Вопрос из зала: «Как дела с индексацией фоток и bg-image?»

• 47:03 – Вопрос: «Откладывает ли этот скрипт iframe и video?». Развернутый разбор в 96 эфире об отложенной загрузке видео https://youtu.be/qcJz8nuqYYY

• 47:43 – Скрипт по ускорению загрузки видео доступно по ссылке https://pay.loading.express/ob/ord/youtube

• 50:00 – Какие параметры необходимо поменять в коде для интеграции в свой сайт

• 52:06 – Как загрузку с LazyLoad делать плавной как на примере

• 53:46 – Полезная статья на VC: «Могильная версия сайта: как угробить конверсию, создав сайт на конструкторе» https://vc.ru/services/106083-mogilnaya-versiya-sayta-kak-ugrobit-konversiyu-sozdav-sayt-na-konstruktore 

• 56:14 – Какие изображения не рекомендуется откладывать во избежании спада оценки Google PageSpeed

• 58:20 – Вопрос от зрителя: «Для внешних шрифтов надо ставить font-display: swap. А если шрифты выкачаны к себе на сервер, то тоже стоит прописывать font-display: swap», отвечаем в следующем эфире

• 59:06 – Немного о предстоящем эфире про шрифты https://www.youtube.com/watch?v=UCe1U9Qz5JA&t=1s

• 1:00:14 – Подписывайтесь и получайте полезный контент! Вопрос из зала: «По email-подписке помимо анонса эфира что еще приходит? Например, Алексей говорил про статью, после эфира с интересом посмотрю»

• 1:00:42 – Вопрос: «Можете ли кого-то посоветовать, чтобы встать под фильтрацию трафика проксированием (ддос-защиту)? Условия: поддержка https2; уникальный IP; не дорого; чтобы фильтрация не влияла на скорость сайта»

• 1:02:30 – О кешировании Google PageSpeed

• 1:05:15 – Школа конверсии https://xn—-7sbhmpgbcgxge3ao7g.xn--p1ai/. Научитесь настраивать поведенческую аналитику и оптимизировать конверсию сайта

• 1:09:32 – Вопрос: «Из-за чего скачет ответ сервера?». Проверить свой сайт можно на сервисе LOADING.express  https://ping.loading.express, аудит из 4-х стран https://loading.express/ 

• 1:10:16 – Важный вопрос от зрителя: «Часто LazyLoad в слайдерах не работает»

• 1:12:08 – Послеэфирная пятиминутка https://www.youtube.com/watch?v=RHgxNNfGX0E с новыми фишками

Проверяйте скорость загрузки вашего сайта:

Успехов!