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

О технологии Lazy Load.
На Тильде для всех сайтов по умолчанию включен режим Lazy Load. Это позволяет сайтам загружаться очень быстро, даже на мобильных устройствах.
Внедрение технологии Lazy Load — это один из этапов оптимизации сайтов на Тильде для более быстрой загрузки. Технологии развиваются и мы постоянно работаем над тем, чтобы сделать загрузку еще быстрее.
Lazy Load — это плагин, который блокирует загрузку изображений вне области просмотра. То есть изображения загружаются по мере того, как пользователь прокручивает страницу. Давайте посмотрим как это выглядит.

Возьмем стандартную страницу в темплейтах и опубликуем. http://project130385.tilda.ws/

Откроем инспектор браузера, включим в настройках имитацию медленной скорости интернета — 3G и перезагрузим страницу.
DOMContentLoaded: 628 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.

Finish: 1.65 секунд
параметр, который показывает, за какое время загрузился весь сайт.

Transferred: 263 kb
параметр, который показывает сколько байт информации было передано.
Цифры очень оптимистичные! Но все познается в сравнении. Перейдем в Настройки сайта > Еще и отключим режим Lazy Load. Протестируем страницу еще раз.
DOMContentLoaded: 697 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.

Finish: 10.14 секунд
параметр, который показывает, за какое время загрузился весь сайт.

Transferred: 1.8 mb
параметр, который показывает сколько байт информации было передано.
Общее время загрузки страницы и количество информации, которая была передана, увеличилось в разы.

Давайте посмотрим, что скажет PageSpeed Google. Проверим страницу с выключенной оптимизацией:
И включим Lazy Load:
Lazy Load блокирует изображения, которые не видны пользователю, и поэтому ускоряет загрузку сайта.
Примечание
Как удалить код JavaScript и CSS, блокирующий отображение верхней части страницы?
Это довольно частый вопрос, который появляется после прохождения теста. Google очень строго ругается на наличие скриптов в верхней части страницы.
Теоретически удалить скрипты можно, но нужно делать скидку на то, что это автоматический анализ, он не точен. Как мы посмотрели раньше, с включенным режимом Lazy Load страницы загружаются очень быстро — все, что можно уже оптимизировано. Мы проанализировали и пришли к выводу, что удаление скриптов даст выгоду в условные 0.3 секунды, которые принципиально ничего не изменят.

Поэтому наша позиция: мы игнорируем замечание автоматического теста Google о скриптах в начале страницы.

Кстати, а как Google проходит собственный тест?
Упс.
Made on
Tilda