Основные направления для проведения оптимизации с целью уменьшить время загрузки страницы включают уменьшение размера файла и уменьшение числа запросов. В качестве наиболее действенных методов, которые позволяют добиться поставленной задачи, можно рассмотреть:
Рассмотрим сжатие и минимизацию текстовых файлов. По итогам проведенных исследований, для сжатия JavaScript лучше использовать Dean Edwards Packer, если файлы не будут дополнительно архивироваться на сервере, иначе лучше пользоваться YUI Compressor'ом. Для сжатия CSS-файлов в любом случае лучше пользоваться CSS Tidy (но при этом возможны некоторые проблемы с хаками).
Если на сервере включено архивирование при выдачи файлов (mod_gzip/deflate), но CSS-/JS-файлы имеется смысл архивировать и класть в виде статических архивов, чтобы дополнительно не нагружать сервер. Процедуру минимизации/архивирования можно автоматизировать при загрузке всех изменений на production-сервер.
HTML можно также несколько уменьшить, если убрать незначащие пробелы, переводы строк, часть символов (html entities) заменить на их действительное представление.
Число фоновых картинок на странице может достигать нескольких сотен, обычно при этом значительное их количество используется на конкретной странице с подключенным файлом стилей. Обычно все картинки небольшие по размеру и могут быть собраны в характерные группы. Группировку можно проводить по следующим критериям:
repeat-x)repeat-y)repeat)no-repeat)Таким образом, сотни ресурсных файлов можно свести к паре десятков, что существенным образом снизит число запросов к серверу. Однако, если вы ориентируетесь на клиентов с IE 4.0, то этот подход использовать нельзя: браузер не понимает background-position.
Одним из наиболее действенных путей уменьшения времени загрузки страницы является кеширование. Его можно проводить на разных уровнях, но конечным его результатом должно быть сведение к минимум запросов при открытии страницы во все последующие посещения (в идеале, вообще 0 запросов).
Во-первых, для статических файлов, которые изменяются достаточно редко, можно прописать кеширующие заголовки (Cache-Control). Во-вторых, можно дополнительно выставить ETag на сервере (уникальный идентификатор ресурса). Однако, есть ряд проблем с настройкой ETag для сайтов, базирующихся на нескольких (кластере) серверах. Форсировать сброс кеша на клиенте можно выставлением уникальной GET-строки (метка текущей версии или метка текущей даты). Этот процесс также можно автоматизировать.
Очень часто при оптимизации забывают про качественное уменьшение HTML-кода, переход от табличной к семантической, смешанной или блочной, верстке. Однако, использование технологий, основанных на спецификации и передовых разработках в этой области, позволяют существенно уменьшить размер HTML. На данный момент, полностью блочная или смешанная семантическая верстка очень хорошо отображается в браузерах (корректность отображения достигается в 99,9%).
Вынесение общих стилевых объявлений и скриптов во внешние файлы также уменьшит размер страницы и позволит кешировать общую часть кода (CSS- и JS-).
При большом количестве запрашиваемых на странице ресурсов (от 20) для дальнейшей оптимизации можно распределить запросы к статическим файлам по нескольким внешним «легким» серверам (thttpd, nginx), чтобы распараллелить запросы. Более 4 таких серверов подключать не рекомендуется.
В начале февраля был запущен проект, полностью посвященный клиентской оптимизации. На данный момент им оценено 6500 сайтов, среднее время загрузки колеблется от 11 до 100 секунд, при этом рассчитанное ускорение составляет до 1000% (в случае применения всех указанных рекомендаций).
Проект работает в режиме справочного пособия, которое позволяет проанализировать конкретный сайт, установить узкие места и эффективно их исправить. Сейчас анализатор выдает более 30 советов по возможному уменьшению времени загрузки страницы, содержит несколько десятков статей и докладов, в которых рассматриваются проблемы оптимизации. Также выложены видео-записи докладов с ClientSide'2007.
Мне кажется, что у проекта большой потенциал, который можно и нужно развивать, ибо проблема оптимизации хоть и стоит перед веб-разработчиками, но о ней склонны забывать или не обращать внимание, ссылаясь на скорость современных каналов или малую нагруженность ресурса.
Спасибо за внимание. Буду рад ответить на ваши вопросы.