веб-разработка / оптимизация / безопасность / программирование / софт

• Главная
• Контакты

Клиентская оптимизация сайта

После выхода в свет очередного дизайнерского решения в виде навороченного сайта с большим объёмом вёрстки, js`а и прочих "рюшечек" часто встаёт вопрос о медленной загрузке страниц, даже при условии проделанной работы по оптимизации кода, структуры БД и запросов. В этом случае полезно задуматься о клиентской оптимизации (или, по-другому, – оптимизации скорости загрузки страниц на стороне клиента), в нюансах которой мы и попробуем разобраться.

Анализ текущих показателей скорости загрузки сайта

Для начала, следует воспользоваться средствами анализа скорости загрузки страницы, которые условно можно разделить на две категории:

• плагины для браузеров;
• сторонние сервисы.

В качестве первого варианта подойдут следующие плагины (на примере FF):

• FireBug (вкладка Сеть);
• YSlow (от Yahoo!);
• Page Speed (от Google).

Примерами средств, относящихся ко второй категории, могут служить:

• webpagetest.org;
• fpt.pingdom.com;
• developers.google.com/pagespeed/?hl=ru
• webopulsar.ru;
• webo.in.

Рассмотрим методы клиентской оптимизации на примере сайта itsoft.ru. За начальные значения возьмём отчёты:

• itsoft.ru YSlow;
• http://webopulsar.ru/reports/1/09d14946e015c7a4.html;
• .

Время загрузки страницы может варьироваться в зависимости от многих факторов. За точку отсчёта возьмём следующие значения:

Анализ доступных способов ускорения загрузки сайта

Итак, что можно сделать для ускорения процесса загрузки страницы в общем:

• выноc стилей и скриптов в подключаемые файлы, отказ от использования атрибута style, тега script;
• использование сжатия gzip/deflate для текстовой информации;
• использование pack и minify в javascript-скриптах для уменьшения размера файлов;
• использование склейки css и js файлов в один для уменьшения количества запросов;
• выбор верного формата файлов изображений, уменьшение размера изображений без потери качества;
• предоставление изображения с нужными пропорциями, вместо их изменения посредством css / html;
• использование css-спрайтов (возможно использование Image Map / Data:URI) для сокращения количества запросов к серверу для получения большого количества (необязательно) маленьких иконок-изображений;
• установка заголовков кеширования для статической информации и файлов;
• использование keep-alive соединений, при наличии на сайте динамического медиа-контента (например фотогалереи);
• использование CDN или организация нескольких доменов для распределения контента и его параллельной загрузки, в силу того, что браузеры используют порядка 2-6 одновременных соединений к одному хосту;
• заключение javascript скриптов, обращающихся к сторонним сервисам в iframe;
• вынесение подключения js-скриптов в конец файла перед закрывающим тегом body ;
• вынесение подключения стилей в начало страницы в тег head ;
• исключение ситуации с попыткой подключения недоступного контента;
• уменьшение количества соединений при загрузке страницы;
• использование/отключение ETags;
• использование/принудительное обнуление загаловка Last-Modified
• управление параметром max_connections сервера.

Оптимизация содержимого на примере сайта itsoft.ru

Перейдём к конкретным действиям, которые мы можем предпринять в данной ситуации. Начнём с сжатия и кеширования:

• использование ETags;
• использование gzip/deflate;
• использование заголовков, управляющих процессом кеширования.

Модифицированный файл .htaccess будет выглядеть следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#naive
FileETag MTime Size
 
<IfModule mod_headers.c>
# 1 MONTH
<FilesMatch "\.(jpg|jpeg|gif|png|swf|css|js)$">
    Header set Cache-Control "max-age=2419200, public"
</FilesMatch>
# 1 DAY
<FilesMatch "\.(html|htm|php)$">
    Header set Cache-Control "max-age=86400, private, proxy-revalidate"
</FilesMatch>
</IfModule>
 
<IfModule mod_expires.c>
<FilesMatch "\.(jpg|jpeg|gif|png|swf|css|js)$">
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(html|htm|php)$">
    ExpiresActive on
    ExpiresDefault "access plus 1 day"
</FilesMatch>
</IfModule>
 
<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl|xml)$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
 
<ifmodule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#endofnaive

Как мы видим из отчёта, полученного после проделанных манипуляций скорость загрузки страницы уменьшилась, в то время, как количество запросов при повторной загрузке страницы сократилось с 163 до 29:

В нашем случае отдельно следует настроить:

• nginx;
• увеличить max_connections для расширения возможности одновременной отдачи контента сервером.

Для сокращения количество запросов, увеличения количество одновременных загрузок, увеличения скорости загрузки и уменьшения суммарного веса страницы:

• объединить все css- и js-файлы в один;
• выстроить верный порядок подключения файлов;
• минимизировать и сжать js-код;
• вынести в подключаемый файл все css- и javascript-вставки;
• использовать CDN  для javascript-библиотек.

Сервисы для сжатия и минимизации css- и js-файлов:

• http://www.refresh-sf.com/yui/
• jscompress.com
• javascriptcompressor.com/

В качестве CDN возможно использовать:

• Яндекс: http://api.yandex.ru/jslibs/ ;
• Google: http://code.google.com/apis/libraries/ .

Результаты теста загрузки страницы после проделанной работы по оптимизации:

Для сокращения количество запросов, уменьшения суммарного веса страницы и сокращения количества DOM-элементов необходимо:

• использовать CSS-Sprites для изображений;
• подогнать размеры используемых изображений под реально необходимые на сайте, для сокращения времени на их ресайзе;
• убрать лишние подключения сторонних сервисов на сайте, где это возможно.

Результаты тестирования скорости загрузки страницы после работы с изображениями и оптимизации лишних подключений:

Результаты клиентской оптимизации

После дополнительных косметических правок имеем следующие результаты:

• Page Speed: Score of 93 (out of 100);
• YSlow: Overall performance score 87;
• Pingdom: Perf. Grade 87/100 (Tested from New York City, New York, USA; Requests: 68, Load time: 1.59; Page Size: 1.0 Mb);
• WebPagetest.org:

до

после

Немного чисел для сравнения

* значения являются приблизительными и варьируются, в зависимости от многих факторов.

Практическая скорость загрузки сайта составляет: 1.5 – 4.6 (2.9 – 5.4) сек.

Ссылки

• http://www.wp-info.ru/razgonyaem-wordpress-do-skorosti-sveta/
• http://highload.com.ua/index.php/2009/06/07/%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b0%d1%86%d0%b8%d1%8f-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d1%81%d0%ba%d0%be%d0%b9-%d1%87%d0%b0%d1%81%d1%82%d0%b8/
• http://developer.yahoo.com/performance/rules.html
• http://aciddrop.com/php-speedy/
• http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html
• http://www.samaxes.com/2008/04/htaccess-gzip-and-cache-your-site-for-faster-loading-and-bandwidth-saving/
• http://big.eddiss.com/klientskaya-optimizatsiya/klientskaya-optimizatsiya/
• http://webo.in/articles/habrahabr/56-non-blocking-javascript/