Быстрые и отзывчивые интерфейсы с использованием AJAX

Использование AJAX может как ускорить загрузку сайта, так и сделать интерфейс более отзывчивым. Представленный список рекомендаций поможет этого добиться.

AJAX (Asynchronous Javascript and XML) — это подход к построению пользовательских интерфейсов сайтов и веб‑приложений, заключающийся в «фоновом» обмене данными браузера с веб‑сервером: при обновлении данных веб‑страница не перезагружается полностью — меняется только содержание отдельных блоков. Работа с сайтом или веб‑приложением за счёт этого становится быстрее и удобнее для пользователя. Для реализации подхода на клиентской части используется JavaScript, а реализация серверной части возможна на любом языке программирования (то есть на любой платформе: на любом фреймворке или на любой CMS).

Если данные для какого‑то блока на странице на стороне сервера генерируются долго, то этот блок может быть загружен уже после загрузки страницы. Если это основные данные страницы, то следование этому совету имеет смысл при генерации данных длительностью более 1-2 секунд или при объёме данных свыше 200Kb. Для дополнительных блоков этот порог несколько ниже.

Если данные на странице не видны сразу, то их тоже можно загружать асинхронно. Если какие‑то данные находятся где‑то далеко внизу страницы или для их отображения требуются действия пользователя, то имеет смысл загружать их либо после загрузки основного содержания страницы, либо при выполнении пользователем некоторых действий (прокрутки страницы или использования управляющих элементов).

Быстрые AJAX‑ссылки — обработка переходов по ссылкам при помощи AJAX, загрузка только изменяемого содержания, например, без перезагрузки подключенных стилей и скриптов, «шапки» сайта, меню и «подвала». Для реализации подобного отлично подойдут Turbolinks и Wiselinks.

Использование AJAX при фильтрации и сортировке. Отслеживание взаимодействия пользователя с формой фильтрации и перезагрузка списка элементов соответствующих новым критериям поиска может быть очень удобным инструментом для ускорения взаимодействия пользователя с интерфейсом. При высокой нагрузке на проект будьте осторожны с использованием AJAX‑запросов в фильтрах, инициируемых сразу после изменения значения поля формы, — такие фильтры создают избыточную нагрузку на сервер, так как запросы отправляются при каждом изменении, а большая часть изменений носят промежуточный характер (пользователь только формулирует свой запрос, а обрабатываются все промежуточные шаги).

«Прогрев» браузерного и серверного кэша при помощи AJAX. Ваши пользователи часто работают с приложением по какому‑то определенному или предсказуемому сценарию, а некоторые шаги этого сценария требуют загрузки большого объёма данных или сложного процесса генерации? Тогда стоит задуматься о загрузке в кеш браузера данных, которые вскоре потребуются вашему пользователю, или о подготовке этих данных на стороне сервера. Например, если пользователь заходит на страницу товара, то можно в фоновом режиме загрузить ему увеличенные фотографии этого товара (еще до инициации им процесса увеличения). Тут, конечно, важен баланс между потенциальным ускорением дальнейшей работы и вызываемой нагрузкой на сервер и канал пользователя — не стоит использовать данный подход без замера скорости канала пользователя (например, для мобильных пользователей), а также без действительной обоснованности предварительного выполнения задачи и оценки текущей загрузки сервера.

Передача данных, а не представления в AJAX — загрузка JSON- или XML‑данных и последующая их шаблонизация уже на стороне клиента требует меньше трафика между сервером и клиентов, меньше ресурсов сервера на шаблонизацию и чаще всего работает быстрее, нежели загрузка уже заранее сформированного HTML‑кода.

Кэширование и GZIP‑сжатие AJAX‑запросов ускоряют отзывчивость приложений. Современные браузеры поддерживают обработку сжатых данных, сжатые данные меньше по объёму и передаются быстрее. Кэширование AJAX‑ответов очень ускоряет работу с приложением, просто используйте соответствующие заголовки в ответе веб‑сервера — Expires или Cache-Control max-age, Last-Modified или ETag. Впрочем, все правила оптимизации JS работают и для AJAX.

Учёт аудитории с отключенным JavaScript. Если важна аудитория с отключенным JS (доля таких пользователей чаще всего менее 0.5%), то активация AJAX‑интерфейса должна происходить только при активности JS в браузере, а в случае, если JS отключен, дожен быть предоставлен классический интерфейс.

быстродействие
Статья опубликована в 2014 году

Тематические статьи

Платформы для создания сайтов: CMS, фреймворки и SaaS‑решения

От выбора платформы для разработки зависит как сама по себе реализуемость необходимого функционала, так и возможности дальнейшего развития веб‑проекта. Для создания сайта, как правило, выбирается одна из платформ: CMS, фреймворк или SaaS‑решение.

SaaS‑платформы еще часто называют «конструкторами сайтов». Основное преимущество этого варианта — весьма хороший уровень качества за очень небольшие деньги.

Система управления сайтом (Content Management System) служит для разработки стандартных разновидностей сайтов. Много небольших и средних сайтов строится именно на CMS‑платформах, так как это наиболее целесообразный с экономической точки зрения подход.

Фреймворк — это программный продукт, который также как и CMS служит основой для сайта, но фреймворк в отличие от CMS — это более низкоуровневое решение, обладающее большей гибкостью и производительностью. Этот вид платформ используют почти все крупные веб‑проекты, а также подавляющее большинство веб‑приложений и веб‑сервисов.

платформы
фреймворки
CMS
SaaS
бэкенд
веб-разработка
Статья опубликована в 2019 году

Фреймворки в веб‑разработке

Фреймворки — это программные продукты, которые упрощают создание и поддержку технически сложных или нагруженных проектов.

Фреймворк — это программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. Благодаря использованию фреймворков достигается не только высокая скорость разработки, но и большая производительность и надёжность решений.

фреймворки
бэкенд
веб-разработка
платформы
Статья опубликована в 2019 и обновлена в 2023 году

Системы управления сайтами — CMS

Коробочная система управления сайтом или CMS — это готовый программный продукт, который упрощает создание основных видов сайтов.

Эта платформа для разработки подходит для создания как простых, так и средних по сложности сайтов. Большинство систем управления достаточно универсальны и на них можно собрать почти что угодно — от простого информационного сайта или сайта‑визитки до интернет‑магазина или информационного портала. Есть и специализированные CMS, заточенные под один конкретный тип сайтов, например, для интернет‑магазинов.

CMS
веб-разработка
бэкенд
платформы
корпоративные информационные системы
Статья опубликована в 2019 году

Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS‑кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.

быстродействие
фронтенд
JavaScript
веб-разработка
Статья опубликована в 2014 году