Увеличение производительности сайта

1 . Производить как можно меньше HTTP запросов;
2 . Воспользоваться услугами сетей доставки контента (Content Delivery Network), например Akamai;
3 . Не пренебрегать HTTP заголовком "Expires" или "Cache-control";
4 . Отдавать страницы в сжатом виде (например, mod_gzip);
5 . Указывать ссылки на файлы с таблицами стилей (link href) в начале документа;
6 . Указывать ссылки на JavaScript файлы (script src) в конце документа;
7 . Не использовать вычислимые выражения (expression) в CSS;
8 . Хранить JavaScript и CSS вставки в виде отдельных файлов;
9 . Уменьшить число обращений к другим доменам на странице (например, когда картинки или iframe грузятся с другого сервера, в идеале не больше 3 доменов);
10 . Минимизировать размер JavaScript и CSS (например, при помощи JSMin или YUI compressor, которые убирают лишние пробелы, комментарии и сокращают переменные);
11 . Избегать редиректов (HTTP Redirect);
12 . Исключить дублирование JavaScript кода (например, IE повторно грузит повторяющиеся "script src" вставки);
13 . Настроить ETags ("FileETag None" в Apache);
14 . Кэшировать Ajax запросы;
15 . Сбрасывать буфер в на начальном этапе генерации страницы (например, через периодический вызов flush() в PHP, для того чтобы клиент получил ссылки на CSS файлы и успел начать их загрузку);
16 . Использовать для Ajax запросов HTTP метод GET (вмещается в 1 TCP пакет, в то время как POST отправляется в два этапа - заголовки и данные);
17 . Выделение контента, который можно загрузить в последнюю очередь (например, отложенная загрузка картинок и JavaScript блоков, после того как загрузится основная часть);
18 . Выделение скриптов, который нужно загрузить в первую очередь;
19 . Уменьшение числа элементов в дереве DOM (минимизация числа HTML тэгов на странице);
20 . Разделение контента по разным доменам: статика через отдельный static.domain.com (браузер будет загружать данные параллельно);
21 . Минимизировать число iframe'ов, не использовать в iframe и script src ссылки на чужие ресурсы (блокирует загрузку остальной части страницы);
22 . Недопускать появление 404 ошибки (страница не найдена);
23 . Уменьшить размер Cookie (убрать лишнее, сократить имена, привязать только к необходимым доменам, определить время жизни);
24 . Для вспомогательных страниц исключить установку Cookie (вынос картинок, CSS и скриптов на static.domain.com);
25 . В JavaScript минимизировать обращения к DOM (очень медленная операция), исключить повторяющиеся запросы к DOM через кэширование;
26 . Оптимизировать обработку событий в JavaScript (вместо "onload" использовать DOMContentLoaded, с осторожностью использовать onresize, провести аудит при помощи утилиты YUI Event);
27 . Загружать CSS через "link" вначале страницы, не использовать @import (в IE он приводит к загрузке CSS в самом конце);
28 . Избегать использования фильтров в CSS, они поддерживаются только в IE, лучше использовать PNG8;
29 . Оптимизировать изображения (минимизация размера палитры, переход на PNG, оптимизация через утилиты pngcrush, optipng или pngoptimizer, удаления комментариев в картинках, оптимизация JPEG через jpegtran);
30 . Оптимизация CSS спрайтов (css sprite) для создания фоновых изображений;
31 . Фактический размер изображения должен совпадать с указанным в параметрах width и height (для того чтобы избежать масштабирования);
32 . favicon.ico должен быть небольшим (менее 1 Кб) и кэшируемым (должен выставляться Expires, 9% всех запросов в Yahoo Search приходится на favicon.ico !). При использовании Flash нужно определить crossdomain.xml;
33 . Страницы, предназначенные для просмотра на мобильных устройствах, не должны превышать 25Кб (иначе не попадают в кэш iPhone);
34 . Для мобильных устройств можно использовать multipart блоки, когда дополнения к странице (css, картинки) упаковываются в самой странице в виде приложений;

Коментарів:

13

Коментувати

Увійдіть або зареєструйтесь, щоб додати коментар

Коментарі

эмм...
есть вопрос.
по обращению к DOM прогружаемой страницы и js.
не совсем понятно, почему прогрузка должна осуществляться в конце?
дело в том что есть внутренний порядок выполнения операций для этого js фрейма (а именно он идет по умолчанию в прогрузке)..
тут вопрос больше стоит наверно о стандартах самого кода и определенных условях в прогрузке модулей (ставить элементарные условия if при обработке кода, а не сплошным потоком в _init() грузить все подряд...

добавлю. графика порой кушает тоже много... особенно когда сама тема включает в себя бэкграунд из картинки, а ведь можно обойтись и css.. хотя наверно это больше уже к самому постоению кода темы стоит отнести (хотя сам грешил тем, что разделение на регионы и т.д. делал табличным стилем - но ИЕ6 и паддинги дело тоже не для слабонервных...)

и еще вопрос. по аяксу. почему именно get метод? как же тогда в плане безопасности?

спасибо за статью. узнал кое что интересное...
а как можно реализовать передачу страниц в сжатом виде (mod_gzip) в рамках друпалла?

совет номер 8.
нет однозначной рекомендации насчет того стоит или не стоит выносить css и js во внешние файлы.

вынос имеет смысл ТОЛЬКО в случае если обьем этих файлов велик, и стили/скрипты используются где то повторно.

во всех иных случаях это совет вреден, потому что напротив СУЩЕСТВЕННО замедляет загрузку.

примером тому служат страницы гугла.

вынос имеет смысл ТОЛЬКО в случае если обьем этих файлов велик, и стили/скрипты используются где то повторно.
во всех иных случаях это совет вреден, потому что напротив СУЩЕСТВЕННО замедляет загрузку.

При включенном кешировании и объединении JS и CSS файлов - тормозов не появится лишних, так как в любом случае будет один файл ;)
Зато насколько легче править или отлаживать файлы когда они не в куче. а логично раскиданы

конечно всегда нужно делить такие статьи на две части:
1. оптимизация для первой загрузки страницы
2. оптимизация для последеующих загрузок этой же страницы.

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

именно в этом контексте и стоит рассматривать мой комментарий.

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

зайдите на страницу гугла и посмотрите в стили.

Можливо трошки не в тему, але все ж ризикну запитати.
Як зробити сторінку переходу за зовнішньою ссилкою на CMF Drupal щось схоже на це: http://vkontakte.ru/away.php?to=http%3A%2F%2Farip.com.ua%2F але так, щоб можна було ставити і прямі ссилки з обходом цієї сторінки.

Краще звичайно було створити окрему тему ;)

http://drupal.org/project/gotwo — простий модуль робить з посилань виду
An examplе
Ось таке посилання
http://drupal.org/go/my_label

У фільтрах ставимо дозвіл на тег і забороняємо тег <а> (у фільтрі адміна дозволяємо і тег <а>)

Велике дякую!!! Зараз попробую зробити.

5 . Указывать ссылки на файлы с таблицами стилей (link href) в начале документа;
Прошу показати як це зробити на прикладі теми Garland. В мене при завантаженні на екран сторінок дуже довго завантажується правий блок сторінки http://www.anodonta.com.ua/. Перевірив швидкість завантаження через сервіс http://loadimpact.com/ і виявилося що найдовше за часом триває завантаження файлів CSS оформлення теми з правого блоку.
Прошу допомогти пришвидчити завантаження правого блоку (тема - стандартний Garland).

файли стилів у вас і так на початку сторінки вантажаться

на строінці www.anodonta.com.ua/admin/settings/performance можно ввімкнути оптимізацію CSS та JavaScript

Я не совсем понял смысл второго пункта. Можете объяснить подробнее. Что за сеть Akamai и как это поможет в оптимизации работы сайта?
Спасибо!

CDN (Content Delivery Network или Content Distribution Network) — если своими словами то это кеш на разные компьютеры, расположенные по всему миру. Пользователь при обращении к сайту получает контент из максимально близкому к нему компьютеру с необходимой страницей. Т.е. например, японец будет тянуть мой сайт из кеша расположенного в Японии, а не с моего сайта который в Украине.

Для этого есть например, модуль Akamai разработанный для белого дома

Спасибо! Теперь понял :)