Разгони свой сайт

Основы клиентской оптимизации

2-е издание, исправленное

Мациевский Н.С.

Национальный Открытый Университет “ИНТУИТ”
2016

2

УДК 004.455.1:004.738.12
ББК 10
М36
Разгони свой сайт / Мациевский Н.С. - M.: Национальный Открытый Университет “ИНТУИТ”, 2016
(Архитектор информационных систем)
ISBN 9-785-99630-0242

В курсе рассматриваются базисные понятия и техники по ускорению загрузки и работы веб-сайтов.
Среди них: алгоритмы сжатия и архивирования текстовых файлов, методы кэширования и
объединения внешних ресурсов, используемых для отображения веб-страницы.
В курсе освещены все проблемные места, возникающие при загрузке сайта, и для каждого из них
предложен набор решений, позволяющих максимально оптимизировать производительность в
каждом конкретном случае. Рассматривается производительность CSS-правил, используемых при
отображении HTML-страницы на экране браузера, и JavaScript-библиотек при выполнении
некоторых элементарных операций.

(c) ООО “ИНТУИТ.РУ”, 2009-2016
(c) Мациевский Н.С., 2009-2016

3

Введение

Об этой книге и проекте webo.in

Вопрос скорости загрузки веб-страниц привлекает внимание всех веб-разработчиков
уже очень давно — практически с того момента, как в HTML-документе появились
картинки и веб-страницы вышли на уровень взаимодействия с пользователями, а не
только предоставления им необходимой информации.

За последние 10 лет уже многократно менялся сам подход к созданию сайтов. В эпоху
браузерных войн и ограниченного доступа по модему наиболее важными аспектами
клиентской производительности (отвечающей за скорость загрузки и работы вебстраницы) были ускорение передачи данных и ускорение отображения этих данных
при использовании многоуровневых таблиц на странице. О блочной верстке и
семантической разметке тогда просто не думали.

Но ситуация изменилась. Сейчас средняя веб-страница уже крайне тяжело вписывается
в установленные когда-то рамки “загрузка за 10 секунд на модеме”. В среднем на ней
используются десятки различных объектов, и не всегда это только картинки. Объем
файлов скриптов, обеспечивающих взаимодействия пользователя с веб-страницей,
сейчас уже намного превышает размер предоставляемой на этой странице информации.
И мир движется в сторону усложнения взаимодействия человека с машиной, а никак не
в обратную.

Данное издание старается объединить в себе все современные подходы к построению
высокопроизводительных веб-приложений и просто веб-сайтов, которые быстро
загружаются. Подавляющая часть материалов книги уже была опубликована в 2008
году на сайте Web Optimizator (ссылка: http://webo.in/), из них были отобраны наиболее
актуальные и проверенные на практике решения, которые и вошли в основу этой
книги.

Кроме теоретических аспектов производительности приведено также большое
количество практических рекомендаций, примеров конфигурационных файлов,
различных приемов и проанализировано несколько высокопосещаемых ресурсов.
Книга предназначена, с одной стороны, для последовательного погружения в сферу
клиентской оптимизации веб-разработчиков любого уровня. С другой стороны,
благодаря большому количеству прикладных советов, она ставит своей целью стать
настольным справочником оптимизатора.

Web Optimizator

Идея организовать ресурс, как посвященный теоретическим аспектам оптимизации
времени загрузки веб-страницы, так и предлагающий online-инструменты для этой
самой оптимизации, появилась после обсуждения на конференции ClientSide‘2007
(ссылка: http://client2007.ru/), где на фоне общего интереса к затронутой проблеме была
задана пара вопросов о рассмотрении частных практических случаев.

4

За основу online-инструмента были взяты замечательные примеры с Web Site
Optimization (ссылка: http://www.websiteoptimization.com/), OctaGate SiteTimer (ссылка:
http://www.octagate.com/service/SiteTimer/ ) и Pingdom Tools (ссылка:
http://tools.pingdom.com/fpt/), краткий обзор которых приводится в восьмой главе. Все
эти сервисы являются англоязычными и предлагают достаточно широкий спектр
инструментов для анализа скорости загрузки сайта. Однако русскоязычного сервиса на
тот момент не было, и выдаваемая информация не являлась достаточно точной.
Поэтому основным отличием от этих инструментов стало наличие максимально
детальных советов по каждому анализируемому веб-сайту, которые, по идее, должны
помочь веб-разработчикам предпринять конкретные действия для улучшения качества
своего продукта.

Именно с этой целью и был создан Web Optimizator (ссылка: http://webo.in/).

Благодарности

Книга не увидела бы свет без помощи, советов и рекомендаций огромного количества
людей. Каждый из них добавил что-то новое в изложенный ниже материал, поэтому у
меня просто не получится упомянуть всех, кто внес свой вклад в создание статей и
развитие ресурса, посвященного клиентской оптимизации, — перечислить всех не
представляется возможным. И все же некоторым людям хочется сказать отдельное
спасибо за их замечания и поддержку.

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

Во-вторых, нельзя не упомянуть Павла Димитриева и его замечательный перевод
классических советов от группы разработчиков Yahoo! (часть 1, ссылка:
http://webo.in/articles/habrahabr/15-yahoo-best-practices/), которые послужили отправной
точкой в оптимизации скорости загрузки для многих тысяч веб-разработчиков.

Значительный вклад в продвижение идей “ненавязчивого” JavaScript и обратной
совместимости в работе веб-сайтов (когда пользователь может взаимодействовать со
страницей и с отключенным JavaScript или CSS) был внесен Дмитрием Штефлюком
(ссылка: http://kpumuk.info/), Андреем Миндубаевым (ссылка: http://covex.in.nnov.ru/),
Андреем Суминым (ссылка: http://jsx.ru/), Павлом Корниловым (ссылка:
http://lusever.ru/), Павлом Довбушом (ссылка: http://dpp.su/), Вадимом Макеевым
(ссылка: http://pepelsbey.net/) и Артемием Трегубенко (ссылка: http://arty.name/). Их
идеи легли в основу некоторых частей данной книги.

Также необходимо упомянуть Евгения Степанищева (ссылка: http://bolknote.ru/),
предложившего альтернативу data:URI-подхода для Internet Explorer, что позволило
расширить этот метод для всех браузеров и составить реальную конкуренцию CSS
Sprites. И Александра Лозовюка (ссылка: http://abrdev.com/), который смог найти время
и дополнить предварительную версию рукописи своими замечаниями по

5

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

Естественно, нельзя обойти вниманием всех моих соратников по российскому крылу
Web Standards Group (ссылка: http://web-standards.ru/). Не опираясь на их мощную
профессиональную поддержку, освещать такую сложную и неоднозначную тему, как
клиентская оптимизация, было бы весьма непросто.

Кроме этого Антон Лобовкин ( ссылка: http://anton.lobovkin.ru/ ), Денис Кузнецов
(ссылка: http://q-zma.com/), Евгений Кучерук (ссылка: http://kuklaora.blogspot.com/),
Иван Никитин (ссылка: http://ivan-nikitin.spaces.live.com/), Алексей Басс (ссылка:
http://alexey-bass.blogspot.com/), Владимир Юнев (ссылка:
http://blogs.gotdotnet.ru/personal/XaocCPS/), Павел Власов (ссылка:
http://zencd.livejournal.com/), Артем Курапов (ссылка: http://kurapov.name/), Алексей
Тен (ссылка: http://lynn.ru/), Константин Бурнаев (ссылка: http://bkonst.livejournal.com/),
Timur Vafin (ссылка: http://timurv.ru/), Денис Воробьев (ссылка: http://alfa.1nsk.ru/),
Алексей Хоменко (ссылка: http://core.freewheel.ru/), Паша Друзьяк (ссылка:
http://ilive.in.ua/enej/), Иван Курносов (ссылка: http://www.mzz.ru/) и многие-многие
другие поделились полезными методиками, примерами конфигурационных файлов и
просто ценными советами, за что им также огромное спасибо.

И конечно, обязательно хочу поблагодарить всех пользователей Web Optimizator
(ссылка: http://webo.in/) и читателей блога Клиентская оптимизация (ссылка:
http://habrahabr.ru/blogs/client_side_optimization/). Без их моральной поддержки и веры в
благое начинание эта книга никогда не была бы опубликована.

6

Что такое клиентская оптимизация?

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

Цели и задачи оптимизации

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

Рис. 1.1.  Тенденция изменения размера страницы и числа объектов для сайтов,
проверяемых через Web Optimizator в 2008 году

В настоящее время на каждой странице вызывается несколько десятков внешних
объектов, а размер исходного файла составляет не более 5% от общего размера. Как
показали многочисленные исследования, размер веб-страницы за последние 5 лет
увеличился втрое, а число объектов на ней — почти в два раза. При этом темпы роста
средней пропускной способности канала лишь немного выше данных показателей.
Если учитывать расслоение пользователей по скоростям доступа, то стремление
уменьшить число пользователей, превышающих допустимый порог ожидания на 1–5%,
заставляет применять все более сложные и передовые технологии.

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

Основные задачи оптимизации

7

Если говорить кратко, то можно выделить 3 основных задачи клиентской оптимизации:

1. Оптимизация размера файлов
2. Оптимизация задержек при загрузке
3. Оптимизация взаимодействия с пользователем.

Краткий обзор технологий

При этом все основные методы можно разбить на 6 групп (каждая из которых
позволяет решить одну из заявленных задач).

1. Уменьшение размеров объектов. Здесь фигурируют сжатие и методы оптимизации

изображений, подробнее об этом можно прочитать во второй главе.

2. Особенности кэширования, которые способны кардинально уменьшить число

запросов при повторных посещениях, раскрываются в третьей главе.

3. Объединение объектов. Основными технологиями являются слияние текстовых

файлов, применение CSS Sprites или data:URI для изображений. Этому посвящена
четвертая глава книги.

4. Параллельная загрузка объектов, влияющая на эффективное время ожидания

каждого файла. В пятой главе помимо этого приведены примеры балансировки
запросов со стороны клиентского приложения.

5. Оптимизация CSS-производительности, что проявляется в скорости появления

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

6. Оптимизация JavaScript. Есть достаточно много проблемных мест в JavaScript, о

которых необходимо знать при проектировании сложных веб-приложений. Обо
всем этом можно прочитать в седьмой главе.

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

Все советы в книге упорядочены по увеличению сложности внедрения и уменьшению
возможного выигрыша при загрузке страницы. Для простых веб-проектов можно
ограничиться только включением кэширования и архивирования (gzip или deflate).
Более сложным понадобится изменить верстку, используя CSS Sprites или data:URI, и
добавить несколько хостов для загрузки изображений. Для высоконагруженных
проектов (некоторые из них проанализированы в конце восьмой главы) нужно
учитывать все аспекты клиентской оптимизации с самого начала при проектировании и
применять их последовательно для достижения наилучшего результата.

Психологические аспекты производительности

Согласно многочисленным исследованиям пользовательское раздражение сильно
возрастает, если скорость загрузки страницы превышает 8–10 секунд безо всякого

8

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

В проведенном в 2007 году опросе было установлено, что 33% пользователей
скоростного соединения не хотят ждать при загрузке страницы более 4 секунд, при
этом 43% пользователей не ждут более 6 секунд. В данном случае имеется в виду, что
пользователь в большинстве случаев покинет сайт, если в течение 5–10 секунд будет
видеть вместо него белый экран в браузере.

Терпимое время ожидания

При исследовании, проведенном в 2004 году, было установлено, что терпимое время
ожидания для неработающих ссылок (без обратной связи) находилось между 5 и 8
секундами. С добавлением уведомления пользователя о процессе загрузки (обратной
связи), например, индикатора загрузки, такое время ожидания увеличилось до 38
секунд. Распределение времени для повторных попыток зайти на неработающие
ссылки имело максимум в районе 23 секунд (без наличия каких-либо индикаторов,
показывающих, что страница загружается или в данный момент недоступна).

Таким образом, можно заключить, что для 95% пользователей время ожидания ответа
от неработающего сайта составит не более 8 секунд. Если учесть стремление
пользователя посетить сайт повторно, то исследования продемонстрировали крайне
малое (почти равное нулю) число пользователей, ждущих более 10 секунд.

Эффекты медленной скорости загрузки

Даже малые изменения времени загрузки могут иметь значительные последствия. Так,
для Google (ссылка: http://www.google.com/) увеличение времени загрузки для
страницы с 10 поисковыми результатами на 0,4 секунды и на 0,9 секунд для страницы с
30 результатами сказалось на уменьшении трафика и рекламных доходов на 20% (в
соответствии с исследованиями, проведенными в 2006 году). Когда главную страницу
Google Maps (ссылка: http://maps.google.com/) уменьшили в объеме с 100 Кб до 70-80
Кб, трафик увеличился на 10% в течение первой недели и еще на 25% в следующие три
недели (по данным 2006 года).

Тестирование в 2007 году для Amazon дало очень близкие результаты: каждые 100 мс
увеличения времени загрузки для Amazon.com уменьшали продажи на 1%.
Эксперименты Microsoft для Live Search (ссылка: http://www.live.com/) показали, что
при замедлении загрузки страниц на 1 секунду количество сброшенных поисковых
запросов возросло на 1% и число кликов по рекламе уменьшилось на 1,5%. При
увеличении времени загрузки страницы с результатами еще на 2 секунды количество
сброшенных поисковых запросов возросло на 2,5% и число кликов по рекламе
уменьшилось на 4,4%.

9

Как время ответа сайта влияет на пользовательскую психологию

Пользователи ощущают, что сайты, которые загружаются медленно, менее надежны и
менее качественны. В случае, если удерживать время загрузки в пределах “терпимого”,
пользователи будут ощущать гораздо меньше неудовлетворенности от посещения
сайта, среднее число просмотров страниц возрастет, увеличится конверсия посетителей
и снизится число отказов. Сайты, которые быстро загружаются, также кажутся
пользователям более интересными и привлекательными.

“Терпимое” время будет сильно зависеть от аудитории, но его можно достаточно
надежно проверить: для этого нужно значительно (например, в 2–3 раза) увеличить
(или уменьшить) время задержки при показе страницы и посмотреть на число отказов
(число пользователей, закрывших страницу сразу после захода на сайт) и на число
постоянных посетителей. Если при сильном увеличении (или уменьшении) задержки
при загрузке сайта количество пользователей практически не изменилось, значит,
страница уже загружается в допустимом диапазоне. Если же число пользователей
претерпело видимые изменения, то, следовательно, со временем загрузки сайта нужно
что-то делать.

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

Стадии загрузки страницы

Рис. 1.2.  Стадии загрузки страницы

В качестве основных проблемных мест при загрузке страницы любого веб-ресурса
можно выделить четыре ключевых момента.

1. Предзагрузка — появление страницы в браузере пользователя. После некоторого

времени ожидания загрузки при заходе на веб-ресурс у пользователя в браузере

10