З кожним роком Інтернет вбирає в себе все більше інформації. Збільшується пропускна здатність каналів, користувачі переходять з комутованого доступу на безлімітний. Сайти стають більше за розміром, більше по наповненню і складніше у взаємодії. Розміри файлів, що завантажуються при цьому збільшуються багаторазово, а час очікування користувачів зменшується не такими темпами. За останні 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 - статьи о фронтенд-разработке. [Электронный ресурс] – Режим доступа:[Ссылка]