суббота, 27 марта 2010 г.

Оптимизация загрузки xhtml страниц

Чтобы сайт загружался быстро существует несколько простых способов, которые к тому же не сложно применить на практике. Конечно все зависит от вашего проекта, его размеров и особенностей. Но все же большинство правил применимо везде.




Основные принципы:

   1. Делать меньше HTTP запросов к серверу
   2. CSS файлы подключаем в head
   3. Скрипты загружаем перед и перед счетчиками и дургими внешними "медленными" или непрогнозируемыми вещами
   4. Убираем inline стили, блоки кода с HTML шаблонов. Все грузим с кешируемых внешних файлов.
   5. Переносим файлы CSS JavaScript графику на cookie-free домен
   6. Избегаем CSS Expressions
   7. Expires заголовки, настраиваем нужное кеширование
   8. GZIP для HTML CSS JavaScript файлов
   9. Уменьшаем кол-во используемых DNS имен
  10. Сжимаем HTML CSS JavaScript
  11. Избегаем редиректов



Я выделяю три состояния загруженности страницы:

    * Читабельный текст - time-to-text
    * загружен DOM, можем отпработать JavaScript
    * Полная загрузка

Предзагрузка

Когда мы можем догадаться о следующих действиях пользователя (переход на соседнюю старницу в пейджере, ссылка на следующее фото и тд) выгодно загрузить эти данные не дожидаясь клика пользователя. И при клике он уже увидит все моментально.

Данные можно грузить как до DOM-load так и после. Я бы предпочел грузить после если они не влияют на работоспособность скриптов. А в скриптах учитывать факт загрузки данных, чтобы не формировать лишние AJAX запросы. Можно отлавливать действия пользователя ивентами onmouseover, onmousedown и тд.

Фактически мы можем нагрузить кучу данных которые просто никогда не покажуться и все это выйдет бессмысленно. Нужно искать баланс.

Одна из возможных ошибок при предзагрузке - то что если в HTML указаны элемеенты IMG, EMBED< OBJECT и тд - то файлы будут грузиться независимо от свойства display и visible.
Постзагрузка

Вообще часть данных можно смело перенести на пост-загрузку. Это когда уже произошло событие DOM=load, у нас еще догружаются картинки в своей очереди.

В пост загрузку эффективно отправлять медленные мало-важные для нас скрипты, счётчики, дополнительный функционал которым редко пользуются пользователи.

Например, всегда старался подключать банера только после DOM-load (обговорено, не втихаря). Тогда пользователь ждущий появление текста на экране - увидит текст а не банер на пол экрана net-бука с 3G модемом и помегобайтной оплатой :)
Инструменты для оптимизации:
Google Chrome:

    * Speed Tracer

Firefox:

    * Firebug/Net
    * Yahoo! YSlow
    * Inline Code Finder
    * Page speed

    * AOL Pagetest

Комментариев нет:

Отправить комментарий