На Тильде для всех сайтов по умолчанию включен режим Lazy Load. Это позволяет сайтам загружаться очень быстро, даже на мобильных устройствах.
Внедрение технологии Lazy Load — это один из этапов оптимизации сайтов на Тильде для более быстрой загрузки. Технологии развиваются, и мы постоянно работаем над тем, чтобы сделать загрузку еще быстрее.
Lazy Load — это плагин, который блокирует загрузку изображений вне области просмотра. То есть изображения загружаются по мере того, как пользователь прокручивает страницу. Давайте посмотрим как это выглядит.
Возьмем стандартную страницу в темплейтах и опубликуем. http://project130385.tilda.ws/
Откроем инспектор браузера, включим в настройках имитацию медленной скорости интернета — 3G и перезагрузим страницу.
Возьмем стандартную страницу в темплейтах и опубликуем. http://project130385.tilda.ws/
Откроем инспектор браузера, включим в настройках имитацию медленной скорости интернета — 3G и перезагрузим страницу.
DOMContentLoaded: 628 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.
Finish: 1.65 секунд
параметр, который показывает, за какое время загрузился весь сайт.
Transferred: 263 kb
параметр, который показывает сколько байт информации было передано.
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.
Finish: 1.65 секунд
параметр, который показывает, за какое время загрузился весь сайт.
Transferred: 263 kb
параметр, который показывает сколько байт информации было передано.
Цифры очень оптимистичные! Но все познается в сравнении. Перейдем в Настройки сайта > Еще и отключим режим Lazy Load. Протестируем страницу еще раз.
DOMContentLoaded: 697 миллисекунд
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.
Finish: 10.14 секунд
параметр, который показывает, за какое время загрузился весь сайт.
Transferred: 1.8 mb
параметр, который показывает сколько байт информации было передано.
параметр, который говорит о том, что загрузились все важные скрипты и html, то есть пользователь может уже увидеть страницу.
Finish: 10.14 секунд
параметр, который показывает, за какое время загрузился весь сайт.
Transferred: 1.8 mb
параметр, который показывает сколько байт информации было передано.
Общее время загрузки страницы и количество информации, которая была передана, увеличилось в разы.
Давайте посмотрим, что скажет PageSpeed Google. Проверим страницу с выключенной оптимизацией:
Давайте посмотрим, что скажет PageSpeed Google. Проверим страницу с выключенной оптимизацией:
И включим Lazy Load:
Lazy Load блокирует изображения, которые не видны пользователю, и поэтому ускоряет загрузку сайта.
Кроме режима Lazy Load нужно обязательно оптимизировать изображения, загруженные на сайт. Больше всего на результаты теста PageSpeed Google влияют именно вес изображений. Чтобы уменьшить вес, можно использовать специальные инструменты, например Tinypng.
Примечание
Как удалить код JavaScript и CSS, блокирующий отображение верхней части страницы?
Это довольно частый вопрос, который появляется после прохождения теста. Google очень строго ругается на наличие скриптов в верхней части страницы.
Теоретически удалить скрипты можно, но нужно делать скидку на то, что это автоматический анализ, он не точен. Как мы посмотрели раньше, с включенным режимом Lazy Load страницы загружаются очень быстро — все, что можно уже оптимизировано. Мы проанализировали и пришли к выводу, что удаление скриптов даст выгоду в условные 0.3 секунды, которые принципиально ничего не изменят.
Поэтому наша позиция: мы игнорируем замечание автоматического теста Google о скриптах в начале страницы.
Кстати, а как Google проходит собственный тест?
Поэтому наша позиция: мы игнорируем замечание автоматического теста Google о скриптах в начале страницы.
Кстати, а как Google проходит собственный тест?
Упс.
