Уменьшение количества запросов. Встраивание внешних объектов в код веб-страницы. Обзор методов клиентской оптимизации
Объединение изображений
Встраивание внешних объектов в код веб-страницы
Исключение избыточных HTTP-запросов
Настройка кэширования
Встраивание объектов CSS и JS
В ряде случаев, фрагменты CSS и JS кода, а также изображения можно подставлять напрямую в HTML-документ.
Плюсы такой подстановки очевидны: количество запросов внешних объектов при загрузке страницы уменьшается до минимального количества. Минусом при использовании такого подхода на всех страницах сайта будет то, что пользователь лишится возможности кэшировать какие-либо объекты, вновь и вновь будет загружать их при просмотре страниц сайта.
Из этого очевидно, что подстановку внешних объектов в HTML-документ следует производить в следующих случаях: когда требуется исключительная клиентская производительность страницы, например, на главной странице сайта или других страницах с наивысшей посещаемостью;
когда суммарная скорость загрузки всех внешних объектов меньше или приблизительно равняется затратам на поочередный запрос каждого из этих объектов по отдельности, т.е. в ситуациях когда не возникнет уменьшения скорости загрузки страницы из-за невозможности кэширования внешних объектов; когда требуется полная автономность веб-приложения.
Встраивать код CSS следует внутрь тега <style>, расположенного в секции <head> страницы. JavaScript код — в теги <script> в конце документа, перед закрывающим тегом <body> либо также внутри секции <head>.
Следуя приведенным выше рекомендациям, необходимо избегать встраивания CSS и JS кода непосредственно в теги веб-страницы (т.е. в атрибуты style, onclick и т.д.). Это исключит дублирование кода на странице, а также упростит его сопровождение.
Подстановка изображений
Встраивать изображения прямо в HTML-документ можно используя схему data:URI. По стандарту RFC 2397 такие URI предназначены для вставки небольших объектов как «непосредственных данных». Синтаксис должен быть следующим:
data:[<тип данных>][;base64],<данные>
В случае изображений необходимо указание mime-типа для них (например, image/gif). После него должно располагаться base64-представление бинарного файла с изображением. Ниже приведен пример такой подстановки:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" width="16" height="14" alt="Встроенное изображение" />
Такие изображения, внедренные в HTML-страницы, разумеется, кэшируются только вместе с самим HTML-документом, содержащим их. Однако учитывая то, что изображения могут быть встроены и в файлы каскадных стилей, можно добиться кэширования этих изображений путем объединения их в одном внешнем CSS-файле.
У данного подхода есть следующие минусы: изображения в base64-представлении имеют размер примерно на 33% больше исходного; необходимо вычислять и обновлять base64-представление изображения каждый раз, когда оно меняется; требуется отдельное решение для браузера Internet Explorer версии 7 и ниже.
Решение первой проблемы возможно за счет использования gzip-сжатия файлов CSS, в которых располагаются встроенные изображения. Вторая и третья проблемы легко решаются автоматическим преобразованием изображений в base64-представления при помощи серверных скриптов и созданием альтернативной версии кода для указанных браузеров Internet Explorer.
Описание способа автоматического встраивания изображений в код по схеме data:URI расположено в четвертой главе.