С каждым годом Интернет вбирает в себя всё больше информации. Увеличивается пропускная способность каналов, cайты становятся больше по размеру, больше по наполнению и сложнее во взаимодействии. Размеры загружаемых файлов при этом увеличиваются многократно, а время ожидание пользователей уменьшается не такими темпами. За последние 5 лет средний размер веб-страниц вырос втрое (по данным исследования Akamai), а за последний год — в полтора раза (по данным webo.in). При этом каждая страница использует в среднем по 50 объектов, что крайне негативно сказывается на общем времени загрузки. Только порядка 5-10% от общего времени загрузки приходится на серверную часть. Все остальное составляет инициализация приложения на клиенте. В среднем, на web-странице используются десятки различных объектов, и не всегда это только картинки. Объем файлов скриптов, обеспечивающих взаимодействия пользователя с веб-страницей, сейчас уже намного превышает размер предоставляемой на этой странице информации. И мир движется в сторону усложнения взаимодействия человека с машиной, никак не в обратную. [1,10] Скорость загрузки страниц очень важна для любого интернет-пользователя. Исследования Kissmetrics показывают, что 47% клиентов ожидают загрузки сайта в течение 2-х секунд, а 40% пользователей закрывают сайты, которые загружаются более 3-х секунд. Секундная задержка в загрузке сайта может привести к уменьшению конверсии на 7%, снижению количества просмотров страницы на 11% и уменьшению удовлетворенности пользователей вашим сайтом на 16%. К примеру, если ваш сайт зарабатывает 100 тыс. долларов в день, секундная задержка при загрузке страницы будет стоить вам порядка 2,5 млн. долларов в год. Например, задержка в 500 миллисекунд при отдаче страниц компании Google привела к потере трафика на 20%, задержка в 100 миллисекунд на Amazon.com к уменьшению доходов на 1%, а для корпорации Yahoo задержка в 400 миллисекунд снизила трафик на 9%. Медленная скорость загрузки страниц воспринимается конечным пользователем как долгосрочное явление, поэтому даже после повышения эффективности отдачи контента и половина потерянных пользователей не возвращается на ресурс.[3] Скорость загрузки сайта становится еще важнее, когда речь заходит о поисковых системах. Даже самая кропотливая работа над SEO и AdWords бесполезна, если ваш сайт медленно загружается. Таким образом, вы проиграете битву еще до ее начала — на стадии ранжирования. Скорость сайта — один из обязательных факторов в алгоритме ранжирования Google. Специалисты Google твердо уверены, что “…чем быстрее сайты, тем счастливее пользователи”.[2]

Актуальность оптимизации скорости загрузки http-ресурсов можно рассматривать с учётом того какое количество уже имеющихся сайтов на сегодняшний день и какова их динамика роста. Кроме того стоит учитывать что при большом количестве ресурсов в интернете борьба каждого из них за конечного пользователя всё сильнее. Как уже известно скорость загрузки страниц сильно влияет на конверсию сайта, поэтому стоит очень трепетно относится к этой теме. В ином случае Ваш web-ресурс просто никогда не попадёт на первые строчки поисковых систем и как следствие это пагубно повлияет на количество посетителей сайта. Также немаловажным фактором является динамика роста числа пользователей сети интернет. Теперь немного обсудим динамику роста количества сайтов в сети интернет с 1991 года. Собственно создавать площадки в сети обычные пользователи начали еще в конце прошлого века. Самая первая страничка заработала в интернете в далеком 1991 году. Посвящена она была технологиям World Wide Web, основанным на языке разметки HTML. Также на этом мини-сайте рассматривались принципы работы серверов и браузеров. После создания первого публичного сетевого ресурса дело пошло «по накатанной». К 1993 г. в интернете работало уже порядка 100 сайтов. Правда, поисковых систем тогда еще не существовало и попасть на эти площадки можно было только с той же первой, созданной в 1991 г, странички. В 1997 г. в сети начался настоящий бум доткомов - компаний, чья деятельность была целиком и полностью связана со Всемирной паутиной. Продолжался этот ажиотаж примерно до 2000 года. К тому времени в сети уже существовало более 10 млн сайтов. Через 15 лет число интернет-площадок перевалило за миллиард. Количество сайтов в России при этом приблизилось к 5 млн. Львиную долю их составляли коммерческие ресурсы. Официальных исследований в отношении того, как растет количество сайтов в интернете сегодня, к сожалению, не проводилось. Однако многие специалисты считают, что в сети в настоящее время наблюдается лишь экспоненциальное их увеличение. Новые площадки в интернете все еще появляются, но свободной аудитории для них уже не хватает. Связано это прежде всего с замедлением роста собственно количества самих пользователей интернета. Ведь компьютеры и разного рода гаджеты имеются практически у всех, и большинство тем, интересных для той или иной категории людей, уже освещено. Согласно данным неофициальных исследований, проведенных энтузиастами, к настоящему времени в интернете ежедневно появляется около 100 тыс. новых сайтов. Но при этом примерно столько же и исчезает. Количество сайтов растет, но несравнимо медленнее чем в период с 1997 г. по 2015 г. Порядка 60% всех имеющихся на данный момент в сети площадок являются нерабочими и невостребованными. Таким образом, рост числа сайтов в интернете в ближайшее время, скорее всего, еще больше замедлится, а затем и вовсе прекратится. Количество в интернете будет окончательно заменено на качество. То есть новые сайты появляться будут, но выживут только самые информативные и полезные для пользователя. Общее же количество площадок в сети будет оставаться практически неизменным. То есть в сети локально и в полной мере начнет действовать стандартный закон рынка в плане соответствия спроса и предложения.[4] Исходя из этого можно утверждать что несмотря на то что по прогнозам динамика роста количество сайтов может замедлиться, количества уже существующих web-ресурсов настолько много что их конкуренция на очень высоком уровне. Поэтому никакая кропотливая работа над SEO не поможет Вам при условии того что Ваш сайт значительно проигрывает другим по скорости загрузки.

Целями исследования являются:

• достижение минимально возможного времени загрузки какой-либо конкретной страницы;
• достижение минимально возможного времени загрузки группы страниц, просматриваемых в произвольном порядке;
• обеспечение минимально возможного времени с момента запроса страницы до момента появления у пользователя возможности просматривать страницу и взаимодействовать с ней.[5]

Это далеко не полный перечень возможных целей, а иногда и вовсе, требуется достигать компромисса и выбирать между несколькими взаимоисключающими вариантами оптимизации. В таких ситуациях лучше иметь максимум возможной информации о веб - сайте и их посетителях. Определить список критических страниц, на которых необходим максимальный эффект оптимизации можно при помощи систем сбора и анализа статистики. Необходимо также учитывать назначение и специфику оптимизируемого сайта или сервиса. Как правило, оптимизация требуется на главной странице сайта и других страницах с высокой посещаемостью, но это не всегда так. В качестве примера можно привести страницы оформления заказа на коммерческом сайте. На них может приходить лишь 5% от общего числа посетителей сайта, однако если они будут загружаться слишком медленно, посетители могут так и не стать клиентами. [6] Каждая веб-страница состоит из основного HTML-файла и набора внешних ресурсов. Говоря о размере страницы (или сайта), очень часто имеют в виду размер именно первого файла, что, естественно, неверно. В настоящее время на каждой странице вызывается несколько десятков внешних объектов, а размер исходного файла составляет не более 5% от общего размера. Как показали многочисленные исследования, размер веб-страницы за последние 5 лет увеличился втрое, а число объектов на ней — почти в два раза. При этом темпы роста средней пропускной способности канала лишь немного выше данных показателей. Если учитывать расслоение пользователей по скоростям доступа, то стремление уменьшить число пользователей, превышающих допустимый порог ожидания на 1–5%, заставляет применять все более сложные и передовые технологии. Естественно, что технологии эти не ограничиваются сжатием текстовых (HTML, CSS, JavaScript) файлов на стороне сервера. Как несложно понять, основную часть внешних объектов на странице составляют изображения или мультимедийные файлы. И для них тоже есть свои методы оптимизации. [7] Можно выделить 3 основные задачи клиентской оптимизации:

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

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

• Уменьшение размера объектов. Здесь фигурируют сжатие и методы оптимизации изображений;
• Особенности кэширования, которые способны кардинально уменьшить число запросов при повторных посещениях;
• Объединение объектов. Основными технологиями являются слияние текстовых файлов, применение CSS Sprites или data:URI для изображений;
• Параллельная загрузка объектов, влияющая на эффективное время ожидания каждого файла;
• Оптимизация CSS-производительности, что проявляется в скорости появления первоначальной картинки в браузере пользователя и скорости ее дальнейшего изменения.
• Оптимизация JavaScript. Есть достаточно много проблемных мест в JavaScript, о которых необходимо знать при проектировании сложных веб-приложений.

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

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

JSMin Ant Task. Приложение позволяет воспользоваться логикой работы JSMin (алгоритма преобразования JavaScript-кода путем удаления из него ненужных символов) при работе с Ant-сервером.

JSMin PHP. Достаточно известное PHP-приложение, реализующее логику JSMin на PHP. Из замеченных недостатков: отбрасываются условные комментарии и могут быть проблемы при разборе сложных регулярных выражений. Во всем остальном хорошо себя зарекомендовало (также и по скорости преобразования кода). При дополнительном gzip-сжатии незначительно уступает YUI Compressor, но для работы требует лишь PHP.

YUI Compressor. Данный инструмент возник из Rhino-оптимизатора и активно развивается специалистами Yahoo!. YUI Compressor идет дальше в оптимизации JavaScript-кода: он заменяет имена всех локальных переменных их сокращенными (в большинстве случаев до 1 символа) вариантами. При использовании с gzip-сжатием дает наилучший результат. К сожалению, требует на сервере установленной java.

Packer от Dean Edwards. В отличие от всех предыдущих инструментов Packer создает некоторое подобие архива, используя встроенные средства JavaScript, при этом степень сжатия получается весьма значительной (до 50%). Однако при дополнительном использовании gzip файлы, сжатые с помощью Packer, проигрывают своим аналогам, преобразованным при помощи YUI Compressor. К дополнительным минусам стоит отнести некоторую нагрузку на процессор при распаковке такого архива (обычно составляет 30-300мс). Доступен в качестве реализации на PHP.

CSS Min PHP является попыткой применить логику JSMin для оптимизации CSS-кода. Достаточно бедно на функциональность, но для простейших задач (минимизация CSS в одну строку) вполне подходит.

CSS Tidy наиболее мощный на сегодняшний день инструмент для анализа и оптимизации CSS-кода. Позволяет не только отформатировать исходный файл по заданному шаблону, но и привести его в стандартный вид (по аналогии с HTML Tidy для HTML). Имеет множество настроек для оптимизации кода, в том числе и пересортировку CSS-селекторов для уменьшения размера. Приложение портировано на два языка: PHP и C (есть версия для локального использования). На текущий момент приложение застыло в версии 1.3 и требуются добровольцы, чтобы привести его в соответствие с текущим состоянием веб-стандартов и продолжить разработку.

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

qpimg php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Использование CSS спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц Данный инструмент позволяет назначать конечные позиции для фоновых изображений для автоматического их объединения. В качестве альтернативного решения можно привести инструмент coolRunnings, который решает ту же самую задачу, но представляет собой отдельный веб-сервис.

Smart Sprites идет дальше в процессе объединения CSS Sprites и предлагает делать это в полностью автоматическом режиме, создав ряд инструкций в комментариях в CSS-файле. Проект изначально написан на Java, но имеет и PHP-ветку.

SpriteMe новый проект от известного Steve Souders (автора двух книги по клиентской оптимизации и со-организатора конференций Velocity, полностью посвященной вопросам клиентской производительности), который позволяет создавать CSS Sprites в интерактивном режиме. В качестве основных плюсов стоит отметить полностью автоматический режим, моментальное применение изменений, связанных с объединением картинок (всегда можно увидеть, как измениться дизайн в любом браузере) и возможность гибкой настройки и изменения файлов с самими спрайтами (файлы создаются при помощи веб-сервиса coolRunnings).

Smart Optimizer позиционирует себя (в отличие от Minify) как отдельное веб-приложение, направленное на ускорение клиентской составляющей веб-сайтов. В качестве основных возможностей стоит отметить: объединение и минимизация CSS- и JavaScript-файлов, кэширование на клиентском и серверном уровне, возможность конвертации в data:URI. Приложение довольно сложно в установке (необходимо внесение изменений как в .htaccess, так и в исходные файлы шаблона сайта) и обладает рядом ограничений (не позволяет объединять файлы из разных директорий). Доступно только для PHP-сайтов, работающих под управлением Apache + mod_php.

PHP Speedy более продвинутое приложение для автоматизации действий по клиентской оптимизации. Имеет собственный мастер установки , в котором позволяет настроить конфигурацию и выдает список необходимых изменений для исходных файлов сайта (обычно это 2 строки с вызовами PHP Speedy). Основные возможности: минимизация, объединение и кэширование CSS- и JavaScript-файлов, «безопасная» конвертация в data:URI, настройка использования .htaccess, настройка директорий кэширования и возможность исключения ряда файлов. На данный момент приложение доступно в том числе как дополнение к Wordpress и Joomla! 1.0, а также может быть установлено на любые сайты, использующие PHP5.

Web Optimizer является на данный момент наиболее мощным веб-приложением с открытым кодом для клиентской оптимизации. Для большинства сайтов ускорение составляет 3-5 раз (в некоторых случаях доходя до 7-10 раз), результат оценки по YSlow поднимается до 92-96 баллов (из 100). Для установки не нужно глубоких знаний технологии или специфических прав на сайте. Список поддерживаемых систем управления сайтом и фреймворков включает несколько десятков наиболее известных, в том числе: Wordpress (ускорение WordPress), Joomla! (ускорение Joomla!), Drupal, Bitrix, NetCat, UMI.CMS, DataLife Engine, Simple Machines Forum, phpBB, Invision Power Board и т.д. Приложение обладает огромным функционалом/ Web Optimizer работает как на PHP4, так и на PHP5, а также, если PHP подключается через CGI, а не mod_php. [9]

В данном реферате были поставлены цели и задачи для оптимизации скорости загрузки http-ресурсов. Были рассморены существоющие методы и разработки в этой сфере. Как подход к клиентской оптимизации был представлен сборщик файлов Gulp и описаны его характеристики и инструменты. Но для больщей эффективности будут использованы несколько подходов в совокупности, что даст определённо намного более эффективный результат

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

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

1. Н.Мациевский, Разгони свой сайт — Методы клиентской оптимизации веб-страниц // «Бином» [Электронный ресурс] – Режим доступа:[Ссылка ]
2. И.Алексеев, 7 способов увеличить скорость загрузки сайта в 2017 году // МОТОCMS [Электронный ресурс] – Режим доступа:[Ссылка]
3. Т. Каловская, Клиентская оптимизация скорости загрузки веб-страниц // [Электронный ресурс] – Режим доступа:[Ссылка]
4. Как растет количество сайтов в интернете // Как просто [Электронный ресурс] – Режим доступа:[Ссылка]
5. Что такое клиентская оптимизация? // CWPRO [Электронный ресурс] – Режим доступа:[Ссылка]
6. Анализ веб-страниц. Определение цели оптимизации. Обзор методов клиентской оптимизации. // cap-design [Электронный ресурс] – Режим доступа:[Ссылка]
7. Что такое клиентская оптимизация? // Онлайн библиотека PLAM.RU [Электронный ресурс] – Режим доступа:[Ссылка]
8. Обзор технологий автоматической клиентской оптимизации // Проверка скорости загрузки сайтов [Электронный ресурс] – Режим доступа:[Ссылка]
9. И. Дмитрий, Сборка front-end проекта с помощью Gulp и Node.js // Частный вебмастер Ильичёв Дмитрий [Электронный ресурс] – Режим доступа:[Ссылка]
10. Н. Мациевский, Клиентская оптимизация // Проверка скорости загрузки сайтов. [Электронный ресурс] – Режим доступа:[Ссылка]
11. Основы использования Gulp для сборки JavaScript-приложений // GetInstance - статьи о фронтенд-разработке. [Электронный ресурс] – Режим доступа:[Ссылка]