Высокопроизводительная загрузка страницы
Способы ускорения загрузки Вашего сайта от Yahoo!
Веб-страница работает в 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>
. - Однако, это может не повлиять на скорость отображения браузерами, ибо они, скорее всего, буферизируют данные перед их отображением.
- Загрузка внешних CSS-файлов (должны быть в самом верху страницы!) может начинаться сразу после объявления тега
- Загружайте только необходимые ресурсы / загружайте ресурсы с задержкой или по запросу
- Используйте 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/