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

Прислано: andreyle

ср, 26/03/2008 - 17:44

На OpenNet.ru выложен очень интересный материал: "34 совета по увеличению производительности web-приложений" от разработчиков, отвечающие за создание высокопроизводительных решений в Yahoo.

Комментарии


Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано Dimm в ср, 26/03/2008 - 17:56.

Наверно можно их здесь продублировать
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, картинки) упаковываются в самой странице в виде приложений;


Опубликовано Dimm в ср, 26/03/2008 - 18:06.

Интересует 15 - как это можно сделать в Drupal?
15 . Сбрасывать буфер в на начальном этапе генерации страницы (например, через периодический вызов flush() в PHP, для того чтобы клиент получил ссылки на CSS файлы и успел начать их загрузку);
Ждем когда сделают в Drupal:
24 . Для вспомогательных страниц исключить установку Cookie (вынос картинок, CSS и скриптов на static.domain.com);
Актуально:
27 . Загружать CSS через "link" вначале страницы, не использовать @import (в IE он приводит к загрузке CSS в самом конце);
Надо сделать:
32 . favicon.ico должен быть небольшим (менее 1 Кб) и кэшируемым (должен выставляться Expires, 9% всех запросов в Yahoo Search приходится на favicon.ico !).


Опубликовано Dimm в ср, 26/03/2008 - 18:28.

Более подробная расшифровка:
http://javascript.ru/optimize/performance-rules


Опубликовано Dimm в ср, 26/03/2008 - 18:41.

27. Решил так:
Файл common.inc, строка 1489

//      $output .= '<style type="text/css" media="'. $media .'">@import "'. base_path() . $preprocess_file .'";</style>'. "\n";
      $output .= '<link rel="stylesheet" href="'. base_path() . $preprocess_file .'" type="text/css">'. "\n";

27 . Загружать CSS через "link" вначале страницы, не использовать @import (в IE он приводит к загрузке CSS в самом конце);


Опубликовано Valeratal в чт, 27/03/2008 - 06:11.

а чем плохо загрузка CSS в конце?


Опубликовано KalanSPb в пт, 28/03/2008 - 02:24.

Многие советы интуитивно очевидны, но выжимка хорошая, спасибо

Dimm написал(а):

27. Решил так:
Файл common.inc, строка 1489

//      $output .= '<style type="text/css" media="'. $media .'">@import "'. base_path() . $preprocess_file .'";</style>'. "\n";
      $output .= '<link rel="stylesheet" href="'. base_path() . $preprocess_file .'" type="text/css">'. "\n";

27 . Загружать CSS через "link" вначале страницы, не использовать @import (в IE он приводит к загрузке CSS в самом конце);

'media="' . $media . '"' еще добавить не мешало бы в link

Valeratal написал(а):

а чем плохо загрузка CSS в конце?

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


Опубликовано Valeratal в пт, 28/03/2008 - 06:38.

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

странно, но на своем сайте не замечал такого
так вставляется у меня

style type="text/css" media="all">@import "/themes/danger4k/style.css


Опубликовано marazmus в пт, 28/03/2008 - 07:08.

Valeratal написал(а):

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

странно, но на своем сайте не замечал такого
так вставляется у меня

style type="text/css" media="all">@import "/themes/danger4k/style.css

Этим страдает гребаный IE - эффект FOUC - http://www.bluerobot.com/web/css/fouc.asp/
Вы могли этого не заметить, потому что перед @import встречается link, а это как раз лечит IE от такого поведения :)


Опубликовано Valeratal в пт, 28/03/2008 - 07:59.

спасибо за разъяснения


Новое на сайте

Ссылки партнёров