Ajax-навигация Turbolinks & Wiselinks
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
Turbolinks и Wiselinks — это библиотеки, которые позволяют ускорить практически любые сайты и приложения, поскольку при переходе по ссылкам загружают только тело страницы или отдельные изменённые блоки. Делается это с помощью JavaScript на стороне браузера, используя технологию Ajax.
При переходе по ссылке инициируется JS‑событие и срабатывает сценарий, заменяющий содержание отображаемого в текущий момент документа на содержание документа по ссылке. Перезагрузки стилей не происходит, а также не осуществляется загрузка и переинициализация скриптов, расположенных в head‑секции. Это снижает объём данных, передаваемых между сервером и клиентом, и ускоряет загрузку страниц. Адрес страницы при этом меняется, обычно при помощи History API.
Turbolinks — более простая библиотека, она не работает с фрагментарной загрузкой, а загружает всё содержимое тега <body>. Этого вполне достаточно для ускорения загрузки страниц, а её простота облегчает интеграцию.
Wiselinks — более сложная библиотека, она позволяет более гибко настроить Ajax‑загрузку изменённого содержания, тем самым добиваясь лучших результатов, но и времени на её интеграцию уходит больше.
Тематические статьи
Бывает так, что часть содержимого страницы нужна не всем или не всегда, но на генерацию или передачу этого материала тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, без которых скорость загрузки и отрисовки будет ниже.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
Выбор правильного формата изображения — ключевой аспект оптимизации веб‑страниц. От него зависят скорость загрузки, качество контента и пользовательский опыт. Рассмотрим популярные форматы, поддерживаемые современными браузерами, их особенности и сферы применения.
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG. Неверный выбор формата обычно приводит к кратному возрастанию размера изображения и, следовательно, к долгой загрузке изображений на медленном интернет-канале (мобильный интернет, например).
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.