Ленивая загрузка или загрузка по требованию на клиентской части
Бывает так, что часть содержимого страницы нужна не всем или не всегда, но на генерацию или передачу этого материала тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.
Ленивая загрузка реализуется при помощи AJAX и инициируется событиями, отслеживаемыми с помощью JavaScript. Для работы методики необходима поддержка JS браузером: перед тем как применить ленивую загрузку, стоит знать, что пользователи без JS не смогут воспользоваться функцией, а поисковые роботы, которые не исполняют JavaScript, такой контент не увидят.
Разновидности ленивой загрузки:
- Загрузка «по клику» — например, раскрывающийся текст по ссылке «показать больше» или «подробнее», справочная информация в модальных окнах или загрузка большого изображения при нажатии на миниатюру. Это наиболее распространённый способ представления контента, который вряд ли заинтересует пользователя. В случае, если контент скорее всего заинтересует или текст важен для поисковых систем, а цель скрытия — экономия пространства, то лучше реализовывать функциональность не на AJAX, а на простом JS — загружать сразу, но отображать по требованию.
- Загрузка «при скроллинге» — загрузка следующей партии материалов в тот момент, когда пользователь уже почти ознакомился с изначально загруженным содержанием. Этот способ ленивой загрузки используется в социальных сетях («бесконечные» ленты новостей), но также применим для интернет-магазинов, каталогов и сайтов СМИ. В случае «бесконечных» лент стоит помнить о доступности навигации: нужна либо фиксированная панель меню, либо кнопка «наверх».
- Фоновая загрузка «по времени» — если страница уже загружена, а пользователь остаётся на открытой странице сайта, то можно в фоновом режиме загрузить какие‑либо ресурсы (большие изображения, например), которые ему понадобятся в дальнейшем. Метод может ускорить сайт, если загружать действительно необходимые при дальнейшей работе материалы, но требует осторожного применения — необходимо знать, что именно загружать (это можно определить на основании статистики посещений, например), а также учитывать скорость доступа посетителя к сети интернет (пользователь медленного мобильного интернета не будет вам благодарен за такую «заботу»).
Тематические статьи
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, без которых скорость загрузки и отрисовки будет ниже.