Чтобы сайт загружался быстро существует несколько простых способов, которые к тому же не сложно применить на практике. Конечно все зависит от вашего проекта, его размеров и особенностей. Но все же большинство правил применимо везде.
Основные принципы:
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
Комментариев нет:
Отправить комментарий