Высокопроизводительные AJAX-приложения. Часть 2.

Высокопроизводительная загрузка страницы

Способы ускорения загрузки Вашего сайта от Yahoo!

Веб-страница работает в 3 иногда перекрывающихся состояниях:

  1. загрузка
  2. отрисовка
  3. исполнение

Следующие правила покрывают, в основном, первое состояние.

  • Уменьшите количество HTTP-запросов
  • Используйте CDN
  • Используйте HTTP-заголовок Expires
  • Сжимайте компоненты страницы
  • Помещайте CSS в начале страницы
  • Помещайте скрипты в конец
  • Избегайте CSS-выражений (expressions)
  • Выносите javascript и CSS во внешние файлы
  • Уменьшайте количество DNS-запросов
  • Минимизируйте Javascript
  • Избегайте редиректов
  • Уберите повторяющиеся скрипты
  • Настройте ETag’и
  • Делайте AJAX кэшируемым

Оптимизация активов

  • Уменьшайте CSS- и JavaScript-файлы:
    • Используйте YUI Compressor [http://developer.yahoo.com/yui/compressor/]
    • Постарайтесь избегать так называемых продвинутых алгоритмов сжатия (обфускации), как, например Packer
  • Объединяйте CSS- и JavaScript-файлы:
    • Во время разработки [http://www.julienlecomte.net/blog/2007/09/16/]
    • При загрузке
  • Оптимизируйте графические ресурсы:
    • PngCrush [http://pmt.sourceforge.net/pngcrush/]
    • PngOptimizer [http://psydk.org/PngOptimizer.php]
    • И т.д.

Уменьшайте размер кода, который не минимизируется

  • Загрузка и анализ HTML, CSS и JavaScript-кода ресурсоемки.
  • Будьте кратки и пишите меньше кода.
  • Используйте JavaScript-библиотеки по назначению.
  • Может быть, стоит разделить ваши большие JavaScript-файлы на несколько более маленьких (пакетов), если анализ и исполнение скриптов занимает слишком много времени (ошибка Firefox #313967)
  • Загружайте код (HTML, CSS и JavaScript) по требованию (a.k.a «ленивая загрузка» или ненавязчивый JavaScript)
    • Ознакомьтесь с http://ajaxpatterns.org/On-Demand_Javascript
    • Используйте загрузчик YUI
    • Рассмотрите систему пакетов в Dojo
    • Рассмотрите систему импортов в JSAN

Оптимизируем начальную загрузку (1/4). Общие советы…

  • Лучше создавать первоначальный вид страницы прямо на сервере:
    • Избегайте добавления к странице лишнего объема
    • Вам по-прежнему придется прикреплять обработчики событий, как только будет готово DOM-дерево
  • Закрывайте HTML-теги для ускорения анализа страницы:
    • Неявно закрытые теги увеличивают затраты при анализе
    • http://msdn2.microsoft.com/en-us/library/ms533020.aspx#Close_Your_Tags
  • Может быть, стоит сбрасывать буфер вывода для Apache как можно быстрее:
    • Загрузка внешних CSS-файлов (должны быть в самом верху страницы!) может начинаться сразу после объявления тега <head>.
    • Однако, это может не повлиять на скорость отображения браузерами, ибо они, скорее всего, буферизируют данные перед их отображением.
  • Загружайте только необходимые ресурсы / загружайте ресурсы с задержкой или по запросу
    • Используйте YUI Image Loader

Оптимизируем начальную загрузку (2/4). Не всегда стоит ждать onload…

  • Большинство DOM-операций может быть выполнено перед тем, как сработает событие onload.
  • Если вы обладаете полным контролем нам тем, где можно разместить вызовы скриптов, стоит инициализировать весь ваш код в теге <script>, расположенном прямо перед закрывающим тегом </body>.
  • Также можно использовать метод onDOMReady в утилите YUI Event:

    YAHOO.util.Event.onDOMReady(function () {     // Выполняем какие-нибудь действия...     // например, прикрепляем обработчики событий. });

Оптимизируем начальную загрузку (3/4). Загрузка скриптов напоследок

  • Если ваш сайт хорошо спроектирован, то должен полностью работать и без включенного JavaScript.
  • Следовательно, вы можете загружать все скрипты с некоторой задержкой.
  • Следуя этому принципу, можно загрузить все остальные ресурсы (файлы стилей, изображения и т.д.) в первую очередь
  • Это (визуально) увеличит скорость загрузки сайта
  • Прямо перед закрывающим тегом </body> добавьте следующее:

    <script>  window.onload = function () {     var script = document.createElement("script");     script.src = ...;     document.body.appendChild(script); };  </script>

Оптимизируем начальную загрузку (4/4). Условная предзагрузка

  • Предзагрузка ресурсов (JavaScript, CSS, изображений и т.д.) потенциально улучшит удобство для пользователя.
  • Однако, стоит хорошо задуматься о том, что и когда подгружать: предзагрузка может и ухудшить удобство использования сайта…
  • http://www.sitepoint.com/article/web-site-optimization-steps/3
  • Оценить демонстрационную версию можно по адресу: http://search.yahoo.com/