Что такое клиентская оптимизация?

Цели и задачи оптимизации

Каждая веб-страница состоит из основного HTML-файла и набора внешних ресурсов. Говоря о размере страницы (или сайта), очень часто имеют в виду размер именно первого файла, что, естественно, неверно.

Рис.1.Тенденция изменения размера страницы и числа объектов для сайтов, проверяемых через Web Optimizator в 2008 году

В настоящее время на каждой странице вызывается несколько десятков внешних объектов, а размер исходного файла составляет не более 5% от общего размера. Как показали многочисленные исследования, размер веб-страницы за последние 5 лет увеличился втрое, а число объектов на ней - почти в два раза. При этом темпы роста средней пропускной способности канала лишь немного выше данных показателей. Если учитывать расслоение пользователей по скоростям доступа, то стремление уменьшить число пользователей, превышающих допустимый порог ожидания на 1-5%, заставляет применять все более сложные и передовые технологии. Естественно, что технологии эти не ограничиваются сжатием текстовых (HTML, CSS, JavaScript) файлов на стороне сервера. Как несложно понять, основную часть внешних объектов на странице составляют изображения или мультимедийные файлы. И для них тоже есть свои методы оптимизации.

Основные задачи оптимизации

Если говорить кратко, то можно выделить 3 основные задачи клиентской оптимизации:

• Оптимизация размера файлов
• Оптимизация задержек при загрузке
• Оптимизация взаимодействия с пользователем

Краткий обзор технологий

При этом все основные методы можно разбить на 6 групп (каждая из которых позволяет решить одну из заявленных задач).

• Уменьшение размера объектов. Здесь фигурируют сжатие и методы оптимизации изображений.
• Особенности кэширования, которые способно кардинально уменьшить число запросов при повторных посещениях.
• Объединение объектов. Основными технологиями являются слияние текстовых файлов, применение CSS Sprites или data:URI для изображений.
• Параллельная загрузка объектов, влияющая на эффективное время ожидания каждого файла. Помимо этого мы приведем примеры балансировки запросов со стороны клиентского приложения.
• Оптимизация CSS-производительности, что проявляется в скорости появления первоначальной картинки в браузере пользователя и скорости ее дальнейшего изменения.
• Оптимизация JavaScript. Есть достаточно много проблемных мест в JavaScript, о которых необходимо знать при проектировании сложных веб-приложений. 

Хочется отметить, что, несмотря на всю сложность затрагиваемой темы, первоначального ускорения загрузки веб-страницы можно добиться в несколько очень простых шагов. При этом можно сократить время появления веб-страницы в несколько (обычно 2-3) раз. Все советы в книге упорядочены по увеличению сложности внедрения и уменьшению возможного выигрыша при загрузке страницы. Для простых веб-проектов можно ограничиться только включением кэширования и архивирования (gzip или deflate). Более сложным понадобится изменить верстку, используя CSS Sprites или data:URI, и добавить несколько хостов для загрузки изображений. Для высоконагруженных проектов (некоторые из них проанализированы в конце восьмой главе) нужно учитывать все аспекты клиентской оптимизации с самого начала при проектировании и применять их последовательно для достижения наилучшего результата.