Команда Yahoo! «Exceptional Performance team», ратующая за повышение производительности веб-страниц, выделила ряд наилучших методов организации максимально быстрой работы вашего сайта. В список вошли 34 метода, разделенные на 7 категорий:
1) Контент
2) Сервер
3) CSS
4) JavaScript
5) Изображения
6) Мобайл
7) Все методы
Сведите HTTP-запросы к минимуму
80% времени, в течение которого грузится сайт, тратится на загрузку компонентов интерфейса – изображений, таблиц стилей, скриптов, флэш-элементов и т.п. Если вы снизите количество этих труднозагружаемых компонентов, то ваш сайт сразу же начнет работать быстрее за счет снижения количества HTTP-запросов.
Простейший способ минимизировать количество элементов – это упростить дизайн сайта. А вот возможно ли организовать быструю загрузку сайта не в ущерб дизайну? Вот некоторые техники, которые позволят ускорить работу сайтов даже со сложным дизайном.
Один из способов – это комбинирование файлов. Сведите все скрипты и CSS в один файл. Если таблицы стилей и скрипты для разных страниц сайта различаются, вам будет сложнее скомбинировать файлы, однако это значительно сократит время загрузки сайта.
Чтобы уменьшить число запросов на изображения, вы можете также использовать CSS Sprites. Соедините все фоновые картинки в одну, а затем воспользуйтесь функциями CSS background-image и background-position для отражения нужного элемента на странице.
Image maps также дают возможность объединить несколько картинок в одну. Общий размер изображений останется прежним, но количество HTTP-запросов существенно снизится. Однако такая карта ссылок работает лишь в том случае, если изображения примыкают друг к другу, как, например, навигационная панель. В противном случае вычислить точные координаты изображения будет достаточно сложно, а ошибки приведут к неточностям при загрузке. Использовать карты для навигации тоже неудачное решение, так что этот способ подходит в редких случаях.
Встроенные изображения: используйте схему data: URL scheme, чтобы вставить изображение в код страницы. Хотя это, разумеется, увеличит размер HTML-документа, количество запросов будет меньше, что повысит скорость работы сайта. Однако встроенные изображения пока еще не поддерживаются большинством ведущих Интернет-браузеров.
Сокращение количества HTTP-запросов – это первый шаг в оптимизации вашего сайта. Скорость загрузки – это то, на что не в последнюю очередь обращают внимание пользователи, впервые попавшие на ваш сайт, ведь 40-60 % гостей приходят на ваш сайт с пустым кэшем, и, если скорость загрузки им не понравится, это может крайне отрицательно сказаться на репутации вашего сайта.
Используйте сети отдачи контента
Удаленность сервера пользователя от вашего сервера также влияет на скорость загрузки. Если вы распределите контент сайта между несколькими серверами, находящимися в разных регионах, то сайт будет работать быстрее – но с чего же начать?
Когда вы начнете создавать контент, распределенный по разным серверам, не пытайтесь переделать веб-приложение так, чтобы оно работало в различных типах архитектуры программного обеспечения. В зависимости от приложения, изменение архитектуры может повлечь за собой такие задачи, как синхронизация веб-сессии и копирование операций с базами данных с одного сервера на другой. Так что не делайте этого – результат будет прямо противоположным желаемому.
Не забывайте, что 80-90% времени загрузки сайта тратится именно на загрузку дополнительных компонентов страницы: изображений, таблиц стилей, скриптов, флэш-элементов и т.п. Золотое правило: вместо того, чтобы усложнять себе жизнь, пытаясь переделать архитектуру приложения, распределите статичный контент по разным серверам. Это поможет значительно сократить время загрузки, а, кроме того, благодаря сетям доставки контента это намного проще сделать.
Сеть отдачи контента – это несколько веб-серверов, которые находятся в разных регионах и служат для облегчения доставления контента сайтов пользователям. Сервер, с которого будет доставляться контент, определяется в зависимости от расстояния до сервера пользователя – сами понимаете, что сеть автоматически выберет ближайший.
Некоторые крупные Интернет-компании располагают собственными сетями доставки контента, но дешевле будет воспользоваться независимыми сетями, к примеру, Akamai Technologies, Mirror Image Internet, или Limelight Networks. Доступ к этим сетям может быть закрыт для только появившихся на рынке компаний или же для платных сайтов, однако по мере роста вашей аудитории вы сможете воспользоваться сетями доставки контента для ускорения работы сайта. К примеру, сети Yahoo! позволяют снизить время загрузки на 20% и больше. Использование сетей загрузки контента для ускорения сайта – это просто и эффективно.
Задайте дату истечения срока годности и управление кэшем
Здесь есть два правила:
• Для статических компонентов не указывайте дату истечения срока годности.
• Для динамических компонентов используйте подходящий вариант кэш-контроля для того, чтобы помочь браузеру в обработке запросов.
Веб-страницы становятся все сложнее и разнообразнее, в них добавляется все больше скриптов, изображений, таблиц стилей, флэш-анимации. Пользователю, заглянувшему на ваш сайт впервые, возможно, придется совершить несколько HTTP-запросов, однако использование функции Expires сделает сложные компоненты кэшируемыми, что позволит избежать «пустых» запросов. Функция Expires обычно применяется для картинок, но она может быть использована для всех элементов сайта, в том числе скриптов, таблиц стилей и анимации.
Браузеры, а также прокси-серверы используют кэширование для того, чтобы сократить количество и размер HTTP-запросов, что способствует более быстрой загрузке сайтов. На веб-серверах функция Expires используется для того, чтобы сообщить клиенту, сколько времени потребуется для кэширования компонента. Существует долгосрочный заголовок Expire, который сообщает браузеру, что ответ будет актуальным до 15 апреля 2010 года.
Expires: Thu, 15 Apr 2010 20:00:00 GMT
Если вы пользуетесь Apache-сервером, примените директив ExpiresDefault, чтобы установить дату истечения срока годности в соответствии с текущей датой. В нижеприведенном примере устанавливается срок 10 лет с момента запроса.
ExpiresDefault «access plus 10 years»
Не забывайте, что, если вы используете долгосрочный заголовок Expire, то всякий раз, когда происходит изменение компонента, вам придется менять имя файла. Веб-разработчики компании Yahoo учитывают это в процессе написания программ: номер версии указывается в имени файла компонента, например, yahoo_2.0.6.js.
Эффект от использования долгосрочных заголовков Expire становится заметным лишь в том случае, если пользователь уже заходил на ваш сайт – при его первом визите вне зависимости от числа HTTP-запросов кэш-память пуста. Таким образом, эффективность этого способа зависит от популярности вашего сайта и числа пользователей, которые регулярно заходят на него и имеют собственную кэш-историю. На сайте Yahoo, к примеру, существуют страницы с кэш-уровнем 75-85%. При использовании долгосрочных заголовков Expire вы увеличиваете число компонентов, кэшируемых браузером и используемых повторно при возвращении пользователя на сайт – при этом ему не приходится загружать ни одного байта информации.
Gzip-сжатие
Время, затраченное на передачу HTTP-запроса, и получение ответа на него может быть сокращено путем внесения некоторых изменений в интерфейс. Очевидно, что разработчики сайта не могут повлиять на скорость Интернета у пользователя, близость к нему серверов сети передачи контента и т.д., однако кое-что разработчики все же могут предпринять. Сжатие файлов поможет снизить время загрузки сайта.
Начнем с HTTP/1.1, где сжатие осуществляется путем применения функции Accept-Encoding в HTTP-запросе.
Accept-Encoding: gzip, deflate
Если веб-сервер фиксирует нечто подобное в запросе, то осуществляет сжатие запроса, предупреждая об этом клиента с помощью функции Content-Encoding.
Content-Encoding: gzip
Gzip-сжатие – это один из наиболее популярных и эффективных методов сжатия файлов в настоящее время. Оно было разработано в рамках проекта GNU и стандартизировано RFC 1952. Единственный формат сжатия, кроме этого, который вы теоретически можете использовать – это deflate, однако он не так эффективен и популярен.
Использование Gzip-сжатия сокращает размер запроса примерно на 70%. Примерно 90% Интернет-траффика в настоящее время принадлежит браузерам, которые требуют применения Gzip-сжатия. Если вы пользуетесь Apache, то имейте в виду, что Apache 1.3 поддерживает mod_gzip, а Apache 2.x – mod_deflate
Существует вероятность того, что некоторые браузеры и прокси-серверы могут некорректно отображать сжатый контент. Однако, к счастью, это в основном устаревшие версии браузеров, которые сейчас используются редко. Модули Apache автоматически регулируют отображение сжатых элементов.
На серверах имеется возможность выбора файлов для сжатия, однако их ресурсы сжатия контента весьма ограничены. Большинство веб-сайтов применяют gzip-сжатие своих HTML-документов. Вы также можете сжать скрипты и таблицы стилей, но для многих сайтов это невозможно. Впрочем, в любом случае стоит сократить любые текстовые файлы XML и JSON. Картинки и файлы PDF сжимать не стоит, так как они уже сжаты.
Использование gzip-сжатия для максимально возможного числа файлов веб-сайта поможет сократить объем страницы и будет способствовать более быстрой загрузке.
Размещайте таблицы стилей вначале кода
Команда Yahoo! выяснила, что перемещение таблиц стилей вверх документа приводит к более быстрой загрузке страницы. Причина в том, что, если такие объемные элементы находятся сверху, скорость открытия страницы увеличится.
Веб-разработчики прилагают все усилия для увеличения скорости загрузки страницы – ведь, нужно, чтобы браузер смог отобразить контент максимально быстро! Это особенно актуально для сайтов с обширным содержимым, а также для пользователей, у которых низкая скорость связи. Если страница загружается постепенно, и пользователь видит сначала заголовок, потом, к примеру, логотип компании, это способствует лучшему впечатлению о сайте, чем если он в течение нескольких минут видит только пустой браузер.
Трудность применения этого способа заключается в том, что расположение стилей вверху страницы плохо воспринимается некоторыми браузерами, в том числе Internet Explorer. Эти браузеры блокируют отображение, чтобы им не пришлось загружать картинки заново, если их оформление вдруг изменится – так что пользователю приходится созерцать только белый экран.
В спецификациях HTML четко указано, что таблицы стилей следует размещать вверху страницы. Что ж, попробуйте рискнуть – может быть, пользователь увидит только белый экран, а может быть, все получится. Следуйте HTML-спецификации.
Скрипты разместите внизу страницы
Скрипты плохи тем, что блокируют параллельную загрузку. Спецификация HTTP/1.1 specification предлагает отображение не более 2 компонентов на хост-сервере одновременно. Если вы загружаете картинки с нескольких хост-серверов, то можете добиться более 2 одновременных загрузок. Однако, пока загружается скрипт, браузер не в состоянии начать какие-либо иные загрузки, даже с других хост-серверов.
В некоторых ситуациях переместить скрипты вниз страницы непросто. К примеру, если в скрипте используется функция document.write для вставки части контента страницы, ее невозможно сдвинуть ниже. Существуют и другие ограничения, но в некоторых случаях их можно обойти.
Альтернативный вариант – использование отложенных скриптов. Атрибут DEFER предполагает, что скрипт не содержит функции document.write, и браузер может продолжать загрузку. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer скрипт может быть отложен, но незначительно. Если скрипт можно отложить, его можно и передвинуть вниз страницы, после чего ваш сайт будет открываться быстрее.
Избегайте конструкций CSS Expression
CSS Expression – это мощное, но опасное средство для установки правильной работы динамических функций CSS. Internet Explorer, начиная с версии 5, поддерживает CSS. К примеру, с помощью CSS можно каждый час менять цвет фона:
background-color: expression( (new Date()).getHours()%2 ? «#B8D4FF» : «#F08A00» );
Как показано здесь, метод expression сочетается с JavaScript. Свойства CSS задаются с помощью JavaScript. Однако другие браузеры игнорируют метод Expression, так что он годится только для Эксплорера.
Сложности, связанные с применением CSS Expressions, заключаются в том, что они срабатывают намного чаще, чем надо бы – не только при обновлении страницы и изменении ее размера, но и при прокрутке, и даже при движении мышью по странице. Можно добавить счетчик в CSS Expressions, который будет отслеживать, как часто срабатывает функция.
Можно сократить количество загрузок CSS Expression, задав единовременное выражение, которое установит стиль для всех дальнейших загрузок. Если свойства стиля должны меняться в процессе просмотра страницы, используйте привязку к событиям вместо CSS Expression. Если вы все же сочли использование CSS Expressions необходимым, не забывайте, что они будут срабатывать сотни раз и могут повлиять на отображение страницы.
Используйте внешние файлы JavaScript и CSS
Мы будем говорить в основном о внешних компонентах страницы, однако есть один очень важный вопрос, на который нужно ответить до начала оптимизации: файлы JavaScript и CSS должны быть внешними, или же их стоит вписать в код страницы?
Если вы сделаете вышеупомянутые файлы внешними, то страница будет загружаться быстрее – ведь файлы станут доступны для кэширования браузером. Вписанные в HTML-код файлы приходится загружать каждый раз при открытии страницы. Это сокращает количество запросов, но увеличивает объем HTML-документа. С другой стороны, при внешнем хранении файлов размер HTML-документа сокращается без увеличения количества запросов HTTP.
Таким образом, ключевой фактор – это частотность, с которой кэшируются элементы JavaScript и CSS применительно к запросам HTML-документа. Этот показатель измерить достаточно сложно, но все же можно. Если пользователи на вашем сайте просматривают одни и те же страницы в течение сессии, и при этом на многих страницах используются одинаковые скрипты и стилевые оформления, тогда выгода внешнего кэширования очевидна.
Однако многие сайты представляют собой нечто среднее. Для них оптимальный вариант – это разместить файлы на внешних ресурсах. Единственный подходящий вариант для включения их в код – это домашняя страница сайта, на которой пользователи бывают редко (чаще всего только один раз за сессию). Такая комбинация размещений позволит получить максимально быструю загрузку сайта.
Для заглавных страниц, на которые пользователи обычно заходят в первую очередь, существуют специальные техники, позволяющие сократить количество HTTP-запросов с помощью включения файлов в код, так же, как и с помощью кэширования файлов, находящихся на внешних ресурсах. Одна из таких техник – это включение файлов в код на заглавной странице, однако при этом после полной загрузки страницы остальные файлы будут загружаться с внешних источников. Соответствующие файлы для каждой страницы сайта будут позже записаны в кэш-историю.
Сократите количество обращений к DNS серверам
Система доменного имени (DNS) связывает хостинговые имена с IP-адресами, так же, как в телефонной книге номера телефонов людей определяются по их именам. Когда вы набираете в браузере www.yahoo.com, система ДИ определяет IP-адрес данного сервера. Однако работа этой системы связана с некоторыми накладками – на загрузку IP-адреса заданного хостингового имени системе требуется примерно 20-120 миллисекунд, а, пока адрес не определен, дальнейшая загрузка не начнется.
Система поиска по доменному имени кэшируется для более качественного выполнения сценария веб-страницы. Кэширование может происходить на специальном кэш-сервисе, который определяется Интернет-провайдером пользователя либо локальной сетью, однако иногда кэширование может происходить непосредственно на компьютере пользователя. Информация о доменных именах записывается в кэш-историю операционной системы («Система DNS-клиент в Microsoft Windows). Большинство интернет-браузеров имеют собственную систему кэширования, независимую от операционной системы. Пока интернет-бразуер пользуется собственной системой кэширования, аналогичная программа операционной системы задействована не будет.
Internet Explorer кэширует систему поиска по доменному имени в течение 30 минут (по умолчанию это указано в настройках DnsCacheTimeout). Firefox тратит на кэширование 1 минуту, в соответствии с настройками конфигурации network.dnsCacheExpiration. Fasterfox увеличивает время до 1 часа.
Когда история кэширования системы доменных имен пуста (как в браузере, так и в операционной системе), число запросов системы поиска по доменному имени будет равняться числу уникальных хостинговых имен веб-страницы. В их число входят имена собственно страницы, изображений, файлов скриптов, таблиц стилей, анимации и т.п. Сокращение количества хостинговых имен приведет к сокращению числа запросов системы.
Однако сокращение числа уникальных хостинговых имен способствует уменьшению числа параллельных загрузок на странице. Если вы сократите количество запросов системы доменных имен, то время загрузки страницы снизится, однако отсутствие доступа к параллельным загрузкам вновь увеличит время загрузки. Мой совет – распределите эти компоненты между 2-4 именами хост-системы.
Сведите к минимуму JavaScript и CSS
Сократите код до минимума, уберите из него все лишние символы, и страница будет загружаться намного быстрее. Уберите все комментарии и лишние пробелы. При использовании JavaScript это положительным образом скажется на времени загрузки, так как размер загружаемого файла будет меньше. Две популярные программы, применяемые для сокращения кода – это JSMin и YUI Compressor. YUI compressor может также использоваться для сокращения CSS.
Еще один вариант – это так называемая маскировка кода. Это сделать сложнее, чем просто минимизировать код, поэтому часто при маскировке в коде возникают ошибки (баги). Однако маскировка эффективнее – она позволяет сократить время загрузки на 25%, в то время как сокращение кода – на 21%. Но все же рекомендуется использовать сокращение кода – это проще и безопаснее.
Кроме сокращения внешних скриптов и стилей, стоит сократить внутренние блоки <script> и <style>. Даже если вы уже использовали Gzip-сжатие, вы сможете сократить файл еще на 5%. Чем больше размер сайта, тем больше внимания следует уделить минимизации кода.
Избегайте перенаправлений
Перенаправления отображаются сообщениями об ошибках №301 и 302. Вот пример:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
Браузер автоматически направляет пользователя по адресу, указанному в поле Location. Вся информация, необходимая для перенаправления, указана в заголовке. Окно браузера при этом остается пустым. Кэширование в случае перенаправления не производится, если только не используются дополнительные функции, к примеру, Expires или Cache-Control. Тэг «мета-обновление» и сценарии JavaScript – это одни из вариантов перенаправления запроса пользователя, однако мы рекомендуем использование стандартного кода статуса 3xx HTTP.
Главное, о чем вам следует помнить – перенаправление замедляет процесс взаимодействия пользователя и сайта. Пока пользователь ждет автоматического перенаправления, он не может ознакомиться с элементами страницы.
Существует один вариант перенаправления, который, пожалуй, представляет собой самую глупую и распространенную ошибку веб-разработчиков, которые часто сами о ней не подозревают. Этот вариант связан с отсутствием косой черты (/) в конце адреса страницы при том, что она должна обязательно там быть. К примеру, если вы наберете http://astrology.yahoo.com/astrology, то получите сообщение об ошибке 301 и будете перенаправлены на http://astrology.yahoo.com/astrology/ (обратите внимание на добавленную в конце адреса косую черты). Этого можно избежать при использовании Apache с помощью директивов Alias, или mod_rewrite, или DirectorySlash.
Иногда перенаправление связано с тем, что старый сайт поменялся на новый. Переход на новый сайт организовать очень просто – потребуется всего лишь пара новых строчек в коде. Впрочем, при этом пользователю придется долго ждать, так что еще один вариант – это использование функций Alias и mod_rewrite если старый и новый сайт расположены на одном и том же сервере. Если же серверы разные, вам следует создать CNAME (запись в системе поиска доменных имен, которая сообщает о смене имени) и использовать ее вместе с Alias или mod_rewrite.
Не дублируйте скрипты
Не стоит использовать одни и те же файлы JavaScript несколько раз в одной странице. А это случается не так уж редко. Согласно результатам проведенных исследований, в ходе которых анализировались коды 10 самых популярных сайтов США, в двух из них были обнаружены двойные скрипты. Двойные скрипты могут появиться, если над сайтом работает большая команда разработчиков, которой не всегда удается скоординировать свои действия, или же если скриптов очень много. Сами понимаете, двойные скрипты значительно замедляют скорость загрузки страницы.
HTTP-запросы, которые на самом деле неактуальны, могут иметь место в Internet Explorer, но не в Firefox. В Internet Explorer, если скрипт встречается дважды и не поддается кэшированию, то во время загрузки страницы происходит два запроса HTTP. Даже если скрипт кэшируемый, второй запрос происходит при перезагрузке страницы.
Кроме бесполезных HTTP-запросов, время тратится на восприятие браузером лишних компонентов скрипта. Это случается как в Firefox, так и в Internet Explorer, вне зависимости от того, кэшируется скрипт или нет.
Один из способов избежать дублирования скриптов – это использование стандартного модуля управления скриптами. Обычно для этого применяется тэг SCRIPT.
<script type=»text/javascript» src=»menu_1.0.17.js»></script>
В PHP вместо этого можно использовать функцию insertScript
<?php insertScript(«menu.js») ?>
Функция будет отслеживать повторяющиеся скрипты и сообщать о них разработчику, давая возможность вовремя исправить код.
Используйте E-тэги (тэги объектов)
Тэги объектов (Е-тэги) – это механизм, позволяющий веб-серверам и браузерам определять, соответствует ли компонент в кэше браузера соответствующему компоненту на сервере. («Объект» — это название для компонентов: изображений, скриптов, стилей и т.д.). Е-тэги были разработаны для валидации объектов. Е-тэг представляет собой компонент кода, который производит идентификацию соответствующего объекта. Е-тэги пишутся в кавычках. Сервер распознает компоненты Е-тэгов с помощью функции ответа на запрос Etag.
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: «10c24bc-4ab-457e1c1f»
Content-Length: 12195
Далее, если бразуеру необходимо завалидировать компонент, он пользуется функцией If-None-Match для передачи Е-тэга обратно на сервер.
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: «10c24bc-4ab-457e1c1f»
HTTP/1.1 304 Not Modified
Сложность использования Е-тэгов заключается в том, что они обычно работают с компонентами, расположенными на каком-либо определенном сервере. Если браузер загружает оригинальный компонент с одного сервера, а затем пытается провести валидацию с компонентом, находящимся на другом сервере, Е-тэги не сработают – а ведь такое случается достаточно часто. Если же компоненты сайта расположены на разных серверах, эффективность Е-тэгов становится еще ниже.
Формат Е-тэгов для Apache 1.3 and 2.x – inode-size-timestamp. Несмотря на то, что валидируемые файлы могут быть расположены в одном и том же каталоге на разных сайтах и, разумеется, иметь одинаковый размер, их дескрипторы будут отличаться.
В версиях IIS 5.0 и 6.0 Е-тэги используются точно так же. Формат Е-тэгов для IIS — Filetimestamp:ChangeNumber. ChangeNumber – это счетчик, который используется для отслеживания изменений конфигурации . Вряд ли конфигурация будет одинковой для всех IIS-серверов.
Конечный результат использования Е-тэгов Apache и IIS для одного и того же компонента приведет к различиям в характеристиках этого компонента в зависимости от сервера, на котором он находится. Если Е-тэги не совпадают, пользователь не получит быстрый ответ 304, для которого были разработаны Е-тэги – он получит стандартный ответ 200 вместе со всей информацией о компоненте. Если ваш сайт находится на одном сервере, это не проблема. Однако если серверов много, и при этом вы используете Apache or IIS вместе с Е-тэгами, то страница будет загружаться медленнее, нагрузка на сервер возрастет, кэширование контента будет затруднено. Даже если вы воспользуетесь функцией Expires, условный запрос GET будет выполнен при перезагрузке или обновлении страницы.
Если вы не собираетесь пользоваться гибкой моделью валидации Е-тэгов, лучше все их убрать. Функция Last-Modified производит валидацию в соответствии с меткой даты и времени. Отсутствие Е-тэгов сократит размер заголовков HTTP в запросах и ответах серверов на запросы. В статье Microsoft Support article подробно рассказывается о том, как убрать Е-тэги. При использовании Apache это сделать очень просто, добавив в файл конфигурации следующую строчку:
FileETag none
Организуйте кэширование Ajax
Одно из преимуществ Ajax – это то, что данная технология предоставляет собой возможность получения пользователем мгновенного отклика от сайта, так как получает информацию непосредственно с конечного сервера. Однако использование Ajax не гарантирует того, что пользователю не придется томиться в ожидании ответа на асинхронные запросы JavaScript и XML. Во многих приложениях время ожидания зависит от способа применения Ajax. Например, при применении Ajax на почтовом сервере пользователю придется ждать, пока Ajax найдет все почтовые сообщения, соответствующие условиям запроса. Помните, что асинхронизация не всегда обеспечивает немедленный ответ сервера.
Для улучшения работы функционала следует оптимизировать все потенциальные функции Ajax. Лучше всего сделать ответы, контролируемые Ajax, кэшируемыми. Перечисленные выше правила тоже касаются Ajax:
• Gzip сжатие
• Сократите количество обращений к DNS серверам
• Сократите JavaScript
• Избегайте перенаправлений
• Используйте Е-тэги
Рассмотрим пример. Допустим, что на почтовом сайте Web 2.0 используется Ajax для загрузки адресной книги пользователя и ее автоматической комплектации. Если со времени последней загрузки адресная книга пользователя не подвергалась изменениям, то при кэшировании запросов Ajax адресная книга может быть загружена из кэш-истории. В настройках браузера следует указать, в каких случаях следует использовать кэшированную адресную книгу – это делается с помощью добавления маркировки времени и даты в адрес Ajax. С помощью этой маркировки функция будет отслеживать даты изменения адресной книги, к примеру, &t=1190241612. В случае, если в адресную книгу со времени последней загрузки сайта не было внесено изменений, метка времени и даты останется прежней, и книга будет загружена из кэш-истории. Если же изменения были, то дата обновляется, а браузер загружает новую версию адресной книги.
Даже несмотря на то, что ответы на запросы Ajax характеризуются высокой динамикой, и могут быть использованы только при работе с одним пользователем, их все равно можно кэшировать, что позволит странице загружаться быстрее.
Используйте функцию Flush
При обращении пользователя к сайту, конечному серверу может потребоваться от 200 до 500 миллисекунд для того, чтобы полностью загрузить страницу. Все это время окно браузера остается пустым, ожидая получения информации. В PHP имеется функция flush(), которая позволяет загружать полученную с сервера информацию по частям, и она постепенно будет отображаться в окне браузера, пока остальная информация все еще загружается с сервера. Это особенно актуально для сильно загруженных конечных серверов или сложного интерфейса.
Размещать эту функцию лучше всего сразу после HEAD, так как HTML-контент заголовка обычно легче всего открыть, кроме того, в него можно добавить файлы CSS и JavaScript, которые будут загружаться параллельно с остальным контентом страницы.
Пример:
… <!— css, js —>
</head>
<?php flush(); ?>
<body>
… <!— content —>
Проведенные Yahoo! исследования демонстрируют высокую эффективность данного метода оптимизации.
Используйте функцию GET для запросов AJAX
Команда разработчиков Yahoo! Mail изобрела этот способ при использовании XMLHttpRequest, функция POST используется в два этапа: сначала отправляются функции, затем сама информация. Так что лучше всего использовать функцию GET, которая отправляет только пакет TCP (если только у вас не слишком много cookies). Максимально возможная длина адреса в IE – 2K, так что если вы отправляете больше информации, функция может не сработать.
Интересный побочный эффект, обнаруженный ими, заключается в том, что функция POST, если не брать в расчет непосредственное размещение информации, функционирует примерно так же, как GET. Это обусловлено некоторыми специфическими характеристиками HTTP, в соответствии с которыми функция GET применяется для поиска информации, так что если ваша цель – только запрос, используйте функцию GET.
Пост-загрузка компонентов
Вы можете внимательно посмотреть на свой сайт и задать себе вопрос: «Какие компоненты страницы нужно загрузить в первую очередь, а какие могут подождать?»
Для разделения компонентов на те, которые стоит загрузить раньше или позже, идеально подходит JavaScript. Предположим, у вас есть код JavaScript, который содержит анимацию и спецэффекты, которые могут подождать, так как сначала нужно загрузить основные элементы. Кроме того, в пост-загрузку могут быть включены скрытые компоненты (те, для загрузки которых требуются определенные действия со стороны пользователя) и сжатые изображения.
Вот что может вам помочь: YUI Image Loader для откладывания загрузки сжатых изображений, YUI Get utility для включения компонентов JS и CSS в список максимально быстрой загрузки.
Как следует обдумайте порядок загрузки компонентов – желательно, чтобы самые важные элементы контента загружались в первую очередь. Возможно, следует сначала запустить страницу без разделения компонентов, а затем уже расформировать их на более и менее важные.
Компоненты для начальной загрузки
Предварительная загрузка – это, как вы понимаете, противоположность пост-загрузке. Если некоторые компоненты будут внесены в список предварительной загрузки, вы сможете спокойно воспользоваться временем, необходимым для загрузки остальных компонентов (рисунков, стилей, скриптов), пока пользователь рассматривает то, что уже загрузилось. Когда пользователь перейдет на другую страницу сайта, она уже будет полностью открыта, так что ему не придется заново ждать.
Существует несколько типов предварительной загрузки:
• Безусловная загрузка – сразу после начала загрузки сайта вы загружаете некоторые дополнительные компоненты.
• Условная загрузка – вы предполагаете, что больше всего заинтересует пользователя, и выдвигаете соответствующие компоненты на первый план.
• Предусмотренная загрузка – предварительная загрузка до выпуска редизайна. В случае изменения дизайна сайта часто бывает так, что новый сайт выглядит лучше, но работает намного медленнее. Дело здесь в основном в пустой кэш-истории, так что неплохо было бы организовать предварительную загрузку основных компонентов сайта – сначала пользователи увидят их, а затем уже новый дизайн.
Сократите число DOM элементов
Сложный сайт предполагает загрузку большого количества информации и замедляет доступ элементов стандарта консорциума к JavaScript. Когда вы, к примеру, решаете добавить новый элемент управления, то многое зависит от того, сколько элементов стандарта консорциума вам придется просматривать — 500 или 5000.
Большое количество элементов консорциума может свидетельствовать о том, что в страницу нужно внести некоторые изменения, не обязательно связанные с удалением некоторых частей контента. Возможно, стоит оптимизировать разметку, сократить коды, которые не несут важной функциональной нагрузки.
Вам пригодится программа YUI CSS utilities, которая поможет совершить общий обзор страницы и помочь выявить элементы, тормозящие загрузку. Пересмотрев разметку, вы, возможно, сможете разработать оптимальный вариант ее огранизации.
Число элементов системы консорциума подсчитать очень просто:
document.getElementsByTagName(‘*’).length
А какое количество элементов считается слишком большим? Проверьте другие страницы с хорошей разметкой – к примеру, стартовая страница yahoo сделана очень неплохо, а компонентов там всего 700.
Распределяйте компоненты между доменами
Распределение компонентов позволит максимизировать число одновременных загрузок, однако не используйте более 4 серверов. К примеру, HTML-код и динамические компоненты можно разместить на www.example.org, а статичные компоненты распределить между static1.example.org и static2.example.org
Сведите к минимуму количество iframe-компонентов
Компоненты iframe отвечают за включение HTML-документа в родительский документ. Необходимо понять механизм работы этих компонентов для их эффективного использования.
Преимущества <iframe>:
• Помощь в загрузке малозначимых компонентов
• Обеспечение безопасности
• Параллельная загрузка
Недостатки <iframe>:
• Занимают много места, даже если пустые
• Замедляют загрузку
• Не семантические
Никаких ошибок 404
Если в ответ на свой запрос пользователь будет регулярно ответ «Ошибка 404 – страница не найдена», ни к чему хорошему это не приведет.
На некоторых сайтах существуют так называемые «подсказки-404»: «Возможно, вы имели в виду…?» Это удобно для пользователей, но ресурсы сервера все равно тратятся впустую. Постарайтесь ни в коем случае не допускать ошибок в JavaScript, которые приводят к ссылке на «страницу 404».
Сократите размер cookies
HTTP cookies используются во многих случаях, в частности, для идентификации и персонализации. Информация, записанная в cookies передается с сервера на сервер, так что их размер необходимо свести к минимуму, чтобы не увеличивать время загрузки сайта.
• Не используйте данные функции без крайней необходимости
• Сведите к минимуму размер cookies
• Не используйте домены более низкого уровня в процессе передачи информации с помощью cookies
• Устанавливайте дату истечения срока годности
Используйте для компонентов домены без cookies
Когда браузер посылает запрос на статическое изображение и вместе с ним отправляются cookies, их нет на сервере, так что они совершенно бесполезны, только создают дополнительный траффик. Вам необходимо удостовериться, что все запросы на статические компоненты совершаются без cookies. Создайте дополнительный сервер и разместите эти компоненты на нем.
Если ваш домен – www.example.org, вы можете разместить статические компоненты на static.example.org. Однако если они уже размещены на домене более высокого уровня example.org вместо www.example.org, во все запросы static.example.org будут включены cookies. В этом случае придется приобрести новый домен, разместить на нем статические компоненты и не допускать появления там cookies.
Еще одно преимущество размещения статических компонентов на отдельном домене – это то, что некоторые прокси-серверы отказываются кэшировать элементы, запросы на которые сопровождаются cookies.
Сократите доступ к элементам консорциума
Доступ к элементам DOM от JavaScript замедляет загрузку, так что вам следует:
• Кэшировать элементы, к которым предоставляется доступ
• Организовать узловые события «offline»
• Не использовать JavaScript при разметке
Оптимизируйте обработчик событий
Иногда страницы загружаются медленно из-за слишком большого количества обработчиков событий, прикрепленных к различным элементам страницы. Следует максимально сократить их количество, к примеру, объединив некоторые события в один функциональный обработчик.
Также вам не обязательно ждать события «начало загрузки» для того, чтобы начать работать с деревом стандартов консорциума. Часто вам нужен всего один элемент – не обязательно ждать загрузки остальных. Вместо события «начало загрузки» можно использовать DOMContentLoaded , однако, пока эта функция не стала доступной для всех браузеров, пользуйтесь YUI Event
Предпочитайте <link>, а не @import
Установлено, что элементы CSS должны располагаться в начале страницы, что способствует максимальной скорости загрузки.
В IE @import функционирует так же, как <link>, но находится внизу страницы, так что лучше его не использовать.
Избегайте фильтров
Фильтр IE под названием AlphaImageLoader применяется для создания прозрачного эффекта изображений PNG в версиях IE до 7. Проблема в том, что этот фильтр мешает загрузке страницы, а также увеличивает объем запроса в целом.
Оптимальный вариант – не применять этот фильтр вообще и вместо него использовать PNG8, который отлично работает в IE. Однако если без вышеупомянутого фильтра никак не обойтись, воспользуйтесь функцией _filter, чтобы не создавать пользователям неудобств.
Оптимизируйте изображения
После того, как дизайн сайта разработан, подумайте о некоторых улучшениях и дополнениях к нему:
• Проверьте файлы GIF и удостоверьтесь, что их палитра соответствует цветовой комбинации. Это легко сделать с помощью imagemagick. Если в изображении используется 4 цвета, а в палитре 256 цветовых оттенков, кое-что нужно подправить.
• Попробуйте перевести изображения GIF в PNG и посмотрите, сохранятся ли они. Скорее всего, да. Разработчики часто избегают использования PNG-рисунков, так как не все браузеры поддерживают этот формат, но сейчас это уже неактуально. Единственная проблема – это альфа-прозрачность PNG, однако изображения GIF также не могут быть прозрачными. Так что все, что возможно для GIF, возможно и для PNG (PNG8), кроме анимации. Вот эта простая команда переводит изображение в формат PNGs:
convert image.gif image.png
• Используйте функцию pngcrush (или любую другую функцию оптимизации PNG) для всех изображений данного типа. Пример:
pngcrush image.png -rem alla -reduce -brute result.png
• Используйте функцию jpegtran для всех файлов JPEG. Эта функция не портит качество изображений формата JPEG и может быть использована для их изменения и улучшения.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
Оптимизируйте графические объекты CSS
• Горизонтально расположенные изображения занимают меньший объем памяти, чем вертикальные
• Комбинирование похожих цветов в графическом объекте снизит нагрузку на сервер
• Не оставляйте больших пробелов между рисунками в графическом объекте. Это не повлияет на размер файла, но снизит нагрузку на сервер. Рисунок 100×100 – это 10 тысяч пикселей, а 1000×1000 – это 1 миллион пикселей
Не используйте слишком большие изображения
Не используйте изображения слишком большого размера – ведь ширину и высоту можно задать непосредственно в коде.
Если вам нужно
<img width=»100″ height=»100″ src=»mycat.jpg» alt=»My Cat» />
ваше изображение (mycat.jpg) должно быть 100x100px, а не 500x500px.
Сделайте иконку сайта небольшой и кэшируемой
Иконка сайта – это изображение, которое находится в корне сервера. Ее наличие является обязательным – даже если вам она не нужна, браузер все равно ее потребует, так что во избежание сообщения 404 Not Found следует создать иконку. Иконка является первостепенным элементом загрузки, даже если вы организовали порядок загрузки элементов самостоятельно.
Удостоверьтесь, что иконка сайта:
• Небольшого размера, лучше всего не более1K.
• Контролируется функцией Expires оптимальным для вас образом (так как ее нельзя переназвать)..
Сайт Imagemagick поможет вам в создании небольшой иконки.
Не создавайте компоненты, размер которых превышает 25К
Это ограничение обусловлено тем, что устройства iPhone не кэшируют компоненты, размер которых превышает 25К. Обратите внимание, что это должен быть размер файла до его сжатия.
Упакуйте компоненты в документ, состоящий из нескольких частей
Упаковка компонентов в документ, состоящий из нескольких частей, сравнима с прикреплением файлов к письму: вы можете включить в один запрос несколько компонентов. При использовании этого метода не забудьте проверить, поддерживает ли его агент пользователя (устройства iPhone не поддерживают).