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

После выхода в свет очередного дизайнерского решения в виде навороченного сайта с большим объёмом вёрстки, 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. За начальные значения возьмём отчёты:

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

 

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

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

  • выно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 будет выглядеть следующим образом:


#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/ .

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

Статистика загрузки страницы itsoft.ru после сжатия сss и js файлов

 

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

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

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

Статистика загрузки страницы itsoft.ru после 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:

до

после

Статистика загрузки страницы itsoft.ru после CSS-Sprites

 

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

  Вес страницы (МБ): Количество запросов: Полная загрузка* (сек): Начало отрисовки* (сек): Google Page Speed: Yahoo! Perf. Grade:
до 1.984 225 12.11 2.32 62% F
после 1.168 92 7.54 0.82 93% B

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

Практическая скорость загрузки сайта составляет: 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/

Оптимизация картинок и графики (дополнение)

В статье был не полностью раскрыт момент, касающийся возможности оптимизации самих файлов изображений, поэтому, я попробую вкратце компенсировать это упущение.

Важным фактором клиентской оптимизации является оптимизация графики, благодаря которой можно сократить размер изображений на сайте до 30%, а в отдельных случаях, и до 90% (например, при использовании правильной оптимизации PNG). Оптимизированные изображения не теряют изначального качества. Для оптимизации всех картинок можно использовать онлайн-сервис от Yahoo — Smush.it. Для оптимизации PNG изображений без потери качества лучше всего использовать PNGOUT (Windows / Linux).

Также всем изображениям, которые выводятся в HTML при помощи тега <img> необходимо прописывать атрибуты width и height. Это действие избавит движок браузера от определения размеров изображения, тем самым мы ускорим скорость их прорисовки.

В некоторых случаях возможно поступиться некой степенью качества изображений в пользу скорости и уменьшения веса. Здесь неплохо проиллюстрирована зависимость размера изображения от качества JPEG.

Для различных изображений необходимо использовать различные форматы при сохранении:

  • GIF — идеально подходит для однотонных иконок или изображений, которые используют цветовую палитру до 256 цветов. Также GIF изображения поддерживают прозрачный фон. Благодаря палитре в 256 цветов, изображения в GIF весят гораздо меньше, чем изображения в других форматах.
  • JPG — самый распространенный формат изображений, который используется как в контенте, так и в служебных изображениях на сайте. JPG изображения поддерживают всю цветовую палитру, но не могут содержать прозрачный фон. Сохранять JPG изображения необходимо с качеством ~80%. Вес JPG изображений может сильно варьироваться в зависимости от качества изображения.
  • PNG — используем для служебных изображений на сайте. PNG изображения поддерживают прозрачный фон и могут использовать всю цветовую палитру. Вес PNG изображений зависит от прозрачности и цветовой палитры изображения, обычно PNG изображения весят больше, чем в GIF или JPG.
    Полезная статья о нюансах работы с PNG форматом опубликована на сайте студии Лебедева.

Для самых маленьких изображений, например однопиксельный background у фона сайта, рекомендуется использовать base64. Изображения в base64 уменьшают количество запросов к серверу, поскольку рисует изображение сам браузер. Закодировать изображение в base64 можно при помощи онлайн-сервисов, например: webcodertools.com. Использовать изображения более чем 1-2 px не рекомендуется, поскольку размер base64-представления будет превышать общий размер изображения и выгода в сокращении количества запросов будет нивелироваться.Пример вывода однопиксельного background используя base64:

body {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBCNkM3QjAzMjk3ODExRTJCN0M0ODVDOUY0MzE0MjQyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBCNkM3QjA0Mjk3ODExRTJCN0M0ODVDOUY0MzE0MjQyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEI2QzdCMDEyOTc4MTFFMkI3QzQ4NUM5RjQzMTQyNDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEI2QzdCMDIyOTc4MTFFMkI3QzQ4NUM5RjQzMTQyNDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K1TALAAAADklEQVR42mL6/4cBIMAABQEB/u4q/vYAAAAASUVORK5CYII=) repeat;}

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

  1. Уведомление: Как ускорить сайт?
  2. Уведомление: Promonika

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>