Уроки

Общее время загрузки

Загрузка файлов страницы происходит в следующем порядке:

  1. Загрузка HTML кода.
  2. Загрузка ресурсов, указанных в коде. Это картинки, CSS, JavaScript код и другие файлы.
  3. Второй этап загрузки ресурсов. Например, если в CSS коде в качестве фона указано изображение, то оно загрузится на этом этапе. Код JavaScript исполняется в синхронном, однопоточном режиме. Он может загрузить другие файлы, но это считается дурным тоном, так как ведёт к проблемам многопоточного программирования.
  4. Срабатывает событие onpageready. В этот момент браузер перестаёт показывать иконку о том, что страница загружается. Это и считается загрузкой страницы. В момент срабатывания этого события браузер гарантирует, что HTML код страницы и все файлы первых двух этапов загрузки полностью загружены, а JavaScript код исполнен.
  5. Загрузка отложенных ресурсов. У события onpageready может быть множество обработчиков. Часть из них запускают бизнес логику вроде генерации интерактивных функций. Какие-то обработчики могут отправлять данные и загружать файлы. Но если ваш сайт — не какой-то сложный программный онлайн-продукт, то вся бизнес-логика отрабатывает за доли секунды, а сетевые запросы производятся асинхронно. Поэтому считается, что страница в этот момент готова к работе и интерактивна.

Главный способ ускорить сайт - это перенос всего, чего только можно с первых трёх этапов загрузки на последний:

  • Загружайте код капчи, карт, онлайн консультант и других сторонних сервисов не через размещение тега <script> в HTML коде страницы, а путём добавления обработчика события onpageready.
  • Большие куски контента также лучше подгрузить отложено. Например, в карточке товара могут быть рекомендации похожих товаров. Поскольку пользователь прокрутит страницу и увидит рекомендации самое ранее через 10 секунд, то есть смысл подгрузить эти данные отдельным запросом. Сделать это можно также в коде обработчика события onpageready.
  • Медиафайлы, как картинки видео и аудио лучше вообще загружать по запросу. Картинки, когда пользователь прокручивает экран и находится на расстоянии 1-2 экранов от них. Видео и аудио, когда пользователь нажимает кнопку воспроизведение.

Если загрузка страницы длиться 30 секунд и более, то значит на ней присутствуют блокирующие окончательную загрузку файлы. Один или несколько файлов не получается загрузить и браузер ждёт 30 секунд, прежде чем откажется от их загрузки и переведёт статус страницы в состояние «готово».

Проверьте ваш сайт
Это бесплатно и займёт от 7 до 45 секунд

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Ладушки