Быстрые и отзывчивые интерфейсы с использованием 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 отключен, дожен быть предоставлен классический интерфейс.