Прискорюємо завантаження сайту

1202
  • Проблеми повільного сайту вже не виходить ігнорувати
  • Досвід боротьби за швидкість і конверсію від флагманських сайтів
  • Що може гальмувати завантаження сторінок і як на це вплинути?
  • Швидке рішення — підключення до зовнішнього сервісу
  • А в цілому
  • Здрастуйте, шановні читачі блогу . Хочу ще раз звернутися до теми прискорення завантаження сторінок сайту. Швидкий сайт — це вже не просто круто, це запорука успіху, в тому числі і фінансового. Занадто багато речей стало залежати від того, наскільки жваво сторінки вашого ресурсу підвантажуються в браузері його відвідувачів.

    Прискорюємо завантаження сайту

    Ще більш актуальною цю проблему робить швидкий ріст частки мобільного трафіку в рунеті. Якщо на комп’ютери і ноутбуки відвідувачів навіть «важкий» сайт може більш-менш швидко зануритися за рахунок повсюдно використовуваного широкосмугового інтернету, то ось швидкість інтернету на гаджетах часто вельми обмежена.

    А це означає, що з кожним днем ми все більше втрачаємо потенційних доходів від тих, хто заходить на сайти з мобільних телефонів і планшетів. Пора щось робити. Давайте подивимося, що саме зробили в цьому напрямку флагманські сайти рунета і світу, ну, і спробуємо все це реалізувати тим чи іншим способом у себе.

    Проблеми повільного сайту вже не виходить ігнорувати

    Тема прискорення завантаження даного сайту (блогу) у мене піднімається з постійністю гідним кращого застосування, але ідеального рішення все ще не знайдено (за кілька років). Прочитав пару книжок по цій темі, багато статей, гілок на форумах. Багато експериментував, оптимізував і налаштовував вручну. Що-то поліпшувалось, щось виходило налаштувати, щось ні, але назвати підсумковий результат відмінним раніше не виходить.

    Зараз же взагалі стало досить важко ігнорувати цю тему, бо пошукові системи безпосередньо і опосередковано (оцінюючи поведінку користувачів на сайті — відмови, час і глибина перегляду) враховують це фактор в ранжируванні. А швидкість завантаження сторінок мого блогу за даними систем аналітики від Яндекса і Гугла мене таки просто вбивають — більше десяти секунд в середньому (повне завантаження — вивід проходить за декілька секунд).

    Время загрузки страниц сайтаПрискорюємо завантаження сайту

    До всього іншого зараз йде бурхливе зростання мобільного трафіку в рунеті, а отже, додається ще одна проблема, бо там швидкість завантаження часто лімітується ще й вузькістю каналу клієнта. Так Гугл нещодавно навів дані, що середній час завантаження мобільного посадкової сторінки – 22 секунди. І, за словами Гугла, це здорово впливає на доходи, бо конверсії на мобільних версіях істотно нижче, ніж на дестопных (саме через їх «тормознутости»).

    Гугл при цьому досить наполегливо просуває своє рішення цієї проблеми — AMP (полегшені, а значить прискорені мобільні сторінки сайту). Але річ ця нова і підтримується повною мірою поки тільки Google, а у нас Яндекс все ще в лідерах пошуку ходить (особливо за комерційним запитам). До того ж підійде це повною мірою тільки контентних проектів, бо сильно обмежує функціонал сторінок сайту. Загалом, буде майбутнє у цієї задумки поки до кінця не ясно.

    Більш популярним вирішенням проблеми прискорення завантаження сторінок сайту на мобільних пристроях є відкладене завантаження зображень і віджетів. Тобто спочатку (нашвидкуруч) підвантажується текстова (контентна) складова сторінка, а графіка і функціональні блоки вантажаться по мірі прокручування екрану гаджета. У підсумку вбиваємо як би двох зайців — збільшуємо швидкість відтворення сторінок на мобільнику і при цьому залишається закладений в сторінку функціонал. Проблема тут криється саме в реалізації — не так просто налаштувати все правильно самому.

    Про показник відмов я вже й не кажу (4 секунди — це межа терпіння сучасного користувача мережі). Знову ж таки є різні метрики вимірювання (напевно, треба брати до уваги саме час відтворення, а не повного завантаження), але суть зрозуміла — чим швидше, тим краще.

    Показатели скорости сайтаПрискорюємо завантаження сайту

    Відвідувач на загальне сприйняття вашого сайту (відкритої в браузері сторінки) витрачає буквально пару секунд, а якщо ці секунди йдуть на завантаження, то на адекватне сприйняття терпежу вже не вистачає.

    Однак, показник відмов — величина все ж відносна (і не всім до кінця зрозуміла), а от дохід, який добувають з сайту, річ однозначна. Виявляється, що чим вище швидкість завантаження, тим вигідніше це власнику. Що комерційні сайти, що статейники приносять прибуток (продажами, рекламою).

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

    Досвід боротьби за швидкість і конверсію від флагманських сайтів

    На Хабре є досить цікава добірка досліджень на цю тему (в тому числі проводяться Гуглом у своїй видачі). Як вам наприклад такі результати:

    0,5 секунди затримки на сервері віднімають 1,6-1,9% конверсії, підвищують показник відмов на 4,6-4,7%

    Всього якихось півсекунди. Пшик або навіть менше. Або ось ще від Амазона:

    Прискорення на 0,1 секунди збільшує виручку на 1%

    І таких прикладів там маса від різних популярних проектів, у яких мільйонні і мільярдні аудиторії, а значить дані виходять досить достовірними (зібраними на великих масштабах).

    Примітно те, що зміна конверсії сторінок відбувається не як наслідок зміни відносини до сайту пошуковиків (в цьому плані відгуку раніше місяця, напевно, чекати немає сенсу), а саме з-за того, що відвідувачі з іншого взаємодіють зі швидко й повільно загружающимся сайтом. Особисто я якось раніше на цьому не акцентувався, а факт-то вельми примітний. Дохід і швидкість сторінок — речі взаємопов’язані. Про це варто задуматися.

    На тому ж Хабре описаний кейс з оптимізації великого і старого сайту, котрий обріс купою доповнень жахливо уповільнюють його швидкість завантаження. Після проведення цілого комплексу робіт (навіть програвач відео оптимізували і зробили попередньо завантажувати популярних сторінок) сайт прискорився в 5 разів. При цьому конверсія увечилась на 20%. Цікаві розклади по залежності від швидкості завантаження в різних діапазонах швидкостей:

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

    Тобто чим повільніше був ваш ресурс спочатку, тим більше приріст у конверсії (продажах або доходи з реклами — не суть важливо) ви отримаєте при приведенні його в норму. Є про що замислитися.

    На Хабре є ще цікавий кейс по середньому прискоренню сайту лише на 1 секунду і результуючого приросту конверсії на 10%. Тут, правда, потрібно розуміти, що 1 секунда — це середня температура по лікарні. У самих повільних відвідувачів швидкість завантаження зросла на 6 секунд, а конверсія у них зросла на третину. Для відвідувачів нічого не змінилася (ні швидкість, ні віддача від сайту).

    Там же були наведені цікаві дані, де, наприклад, пара секунд затримки з завантаженням форми замовлення призводить до втрати частини п’ятої замовлень (багато хто зараз нетерплячі):

    Конверсия на сайте в зависимости от скорости его загрузкиПрискорюємо завантаження сайту

    Знову ж таки зазначу, що з даної статті можна зрозуміти, що робота була виконана величезна, довга (найчастіше удавана безнадійної) і кропітка, але зате підсумковий результат окупив все це з лишком. Про показано на скріншоті приріст конверсії на мобільних пристроях можна детальніше почитати за наведеним посиланням. Причому показник відмов показав навіть більшу залежність від швидкості завантаження, ніж конверсія.

    В буржунете подібних кейсів від дуже великих компаній можна знайти багато. Що з цього було перекладено й опубліковано, а тому є сенс ознайомитися з їх досвідом і вжиті ними кроки можна взяти на озброєння:

  • Walmart — 4 секунди = 20% конверсії
  • Edmunds — прискорення на 80% = 20% більше переглядів
  • Lenta.ru — на третину зросла на сайті і глибина перегляду після прискорення
  • Guardian — поява основного вмісту сторінок всього за 1 секунду
  • FT — залежність рівня залученості від швидкості роботи сайту
  • Як 0,1 секунди прискорення завантаження сайту може дати додаткові мільйони доларів
  • Що може гальмувати завантаження сторінок і як на це вплинути?

    Насправді, на швидкість завантаження сайту впливає цілий набір факторів, і кожен з них потрібно намагатися оптимізувати не в збиток іншим факторам і без втрати функціоналу сайту. Завдання дуже непросте. На початку статті я говорив, що прочитав кілька книг про цю справу і це були повноцінні видання з купою конкретики (правда, трохи застарілі, але базові принципи особливо не міняють — лише методи досягнення бажаної мети).

    В принципі, методи прискорення сайту своїми силами можна описати приблизно так:

  • Постаратися зменшити число http-запитів, які браузер відвідувача відправляє вашого сервера (де хоститься на сайті), а також стороннім серверів (аналітика, реклама, кнопки і віджети соцмереж). Наприклад, кожне зображення використовується на сторінці (в html коді або в якості фону в CSS) вимагає для завантаження окремого запиту. Кожен файл CCS, Js та інша статика теж підвантажується окремим запитом. Значить для зниження числа запитів потрібно: всі фонові зображення постаратися об’єднати в спрайт, а також об’єднати всі файли CSS в один, так само як і файли стилів JS. Про все це я писав окремо на прикладі Вордпресс.
  • На швидкість завантаження впливає не тільки кількість запитів, але і загальна вага завантажуваних файлів. Отже, наступним кроком буде:
  • Максимальне стиснення (бажано без втрати якості) і оптимізація (відмова від непотрібних «брязкалець» типу прозорість тощо) всіх наявних зображень. Способів реалізації багато (в тому числі і онлайн сервіси по стиснення зображень), але я останнім часом юзал безкоштовну прогу ФайлОптимизер. Стиснення на льоту можливо при підключенні зовнішнього сервісу, але про це трохи нижче.
  • Стискати html файли сторінок у Gzip (цей вид архівів браузери вміють автоматом розкривати), а так само CSS і JS. Все це, в принципі, можна робити на сервері (як заздалегідь, так і на льоту). Інша справа, що не завжди це можна зробити доступними способами (швидше за все буде потрібно залучати фрілансера).
  • Почистити безпосередньо код, прибравши зайве і дублює зміст.
  • На швидкість завантаження ще впливає відстань від вашого хостингу до комп’ютера відвідувача. Якщо він з іншого кінця земної кулі, то йому доведеться чекати значно довше ніж тим, хто знаходиться в тому ж місті (або хоча б регіоні). Виходом у цьому випадку може бути підключення сайту до CDN (мережі доставки вмісту). Грубо кажучи, копії файлів сторінок вашого сайту будуть зберігатися не в одному місці, а відразу на пулі розподілених по всьому світу серверів. Кожному відвідувачу дані будуть віддаватися з того сервера, який ближче до нього.
  • Також на швидкість завантаження може впливати низька швидкість інтернету у відвідувача вашого сайту. В сучасних реаліях така проблема виникає в основному у мобільних користувачів (не скрізь 3G ловиться). Як я вже згадував вище, в цьому випадку найбільш дієвим варіантом (на даний момент) буде відкладене завантаження зображень і віджетів на мобільні пристрої. Тобто спочатку вантажиться Html і CSS (текст, розбивка і розмітка), а картинки та інші віджети (функціональні блоки) завантажуються по мірі прокручування сторінки. Як це реалізувати самому я не знаю (зовнішні сервіси це дозволяють реалізувати).
  • І це тільки грубі мазки, бо є ще маса нюансів впливають на швидкість завантаження. Наприклад, використання шрифтів не входять в базовий набір будь-якої ОС уповільнює відображення сторінок, якщо їх не оптимізувати. Якщо сайт заробляє на показі реклами, то різні зовнішні коди її підвантаження можуть конфліктувати і заважати один одному. Бажано так, щоб спочатку вантажився основний контент (швидко), а потім все інше. І про це потрібно думати, враховувати і налагоджувати.

    Щось може підказати сервіс Гугла, але там, як правило, говорять тільки про проблему, а не про її вирішенні. Воно і зрозуміло — движків сайтів і типів серверів море, а універсальних рішень по суті немає. Детально вивчити http запити і побачити всі стадії завантаження вебсторінок вашого сайту дозволить сервіс WebPageTest.org.

    Изучение скорости загрузки вебстраницыПрискорюємо завантаження сайту

    Особливу увагу зверніть на синю вертикальну лінію — саме це і прийнято вважати інтервалом завантаження сторінки. Якщо воно близьке до 10 секунд, то потрібно щось терміново робити.

    Виходить, що це досить складний та обтяжливий процес. Але зате дуже ефективний у плані збільшення віддачі від сайту. Частина з описаних вище робіт можна зробити самому.

    Ну, наприклад, кожному під силу вивантажити з хостингу всі картинки використовувані на сайті до себе на комп’ютері і прогнати їх через FileOptimizer (у мене він тиждень без відпочинку «лопатил» картинки на зовсім слабкому компі). Ну, ще можна спробувати налаштувати стиснення Html, CSS і JS файлів на сервері (відкладене або на льоту, щоправда останнє істотно підвищує навантаження на сервер, що може бути чревате). Для відкладеного завантаження зображень можна використовувати jQuery плагін LazyLoad.

    Лізти ще глибше вже складніше, бо треба трохи розуміти адміністрування серверів (вони частіше на Юнікс-подібних системах працюють), а так само знати як зробити те чи інше дійство, яке PageSpeed Insights вважає за необхідне виконати для поліпшення ситуації з чуйністю сайту. Та й PageSpeed Insights не істина в останній інстанції — це лише набір базових рад.

    Тому однозначно кращим рішенням буде наймання грамотного програміста специализуруещегося саме в цій області — прискорення сторінок. Тут потрібно розуміти, що найчастіше доведеться перекроювати дуже багато, щоб отримати приріст в швидкості (див. наведені вище кейси). На це потрібно буде час, гроші, сили, нерви на узгодження пріоритетів і т. п… Але це саме радикальний варіант. Хороший спец за хороші гроші має високий шанс збільшити конвертованість вашого сайту (в продажах або доходи з реклами).

    Однак, CDN самому не зробити, як не крути. Так і фахівця стоїть ще пошукати треба. Грошей назбирати і придбати рішучості все «ламати», щоб зібрати заново (останнє не обов’язково, але цілком імовірно). А час іде. Тому є варіант простіше і дешевше — підключити до сайту сторонній сервіс, який спеціалізується на підвищення його швидкості. Такі є, і один з них я трохи нижче коротенько розгляну.

    Швидке рішення — підключення до зовнішнього сервісу

    Після виявлення всіх проблем і затыков у швидкості свого сайту можна вже буде окреслити фронт майбутніх робіт, який може бути вельми значним (див. наведені вище за посиланнями кейси). Можна спробувати вирішити їх самостійно (або заплатити профі), а можна скористатися одним із зовнішніх сервісів для прискорення сайту.

    Наприклад, у Айрі для вебмайстрів є досить приємний по грошах тариф, що дозволяє застосувати оптимізацію швидкості. Правда він партнерський (поки не зрозумів, що потрібно, щоб його отримати). Тарифи для інтернет-магазинів і представництв (судячи з наведеного трафіку — дуже серйозні) наведені тут, але там вже інший порядок цін.

    У Irie.рф мене найбільше приваблює географічно розподілена мережа рунету (країн СНД) і близького зарубіжжя. У аналогічних буржуйських сервісів дата центри в основному в Європі і Штатах, що дещо нівелює всю принадність використання CDN, бо до відвідувача сайту відстань будуть навіть вище, ніж при відправленні сторінок з рідного хостингу. Тут же як раз буде очевидний виграш від розподіленого по СНД розміщення вашого сайту.

    Ну і, природно, тут буде все те, що можна реалізувати для прискорення сайту шляхом його підключення до аналогу зворотного кеширующего проксі (Irie.рф):

  • CDN — вміст сторінок вашого сайту буде вантажитися в браузер відвідувача з найближчого до нього дата-центру Irie.рф, що знизить як час відправки запиту, так і час завантаження в браузер.
  • Розподілена по СНД мережу власних DNS-серверів. Підключення вашого сайту до цього сервісу буде полягати в простому прописування їх DNS серверів в налаштуваннях вашого реєстратора доменного імені. Всі запити відвідувачів будуть йти через ці сервера, яких багато по всьому світу і які досить швидко обробляють запити. У результаті знижується час з першого запиту до першого пікселя на екранах браузерів відвідувачів.
  • Вся статика (картинки, вміст і розмітка сторінок html, файли стилів і скриптів) кешируются розподілених на серверах Irie.рф і віддаються з найближчої до відвідувача сайту географічної точки. До вашого реального сервера хостингу) звертань при цьому не йде, що знижує на нього навантаження. Крім цього встановлюється великий рядків кешування статики в браузерах відвідувачів, щоб вони повторно не завантажувалися при відкритті сторінок сайту.
  • Статика не тільки кешується, але і максимально можливим чином стискається (без втрати якості). Розміри передається файлів (зображень, сторінок, стилів і скриптів) в цьому випадку можуть зменшуватися в рази, що істотно збільшує швидкість завантаження.
  • Кешированные в Irie.ра сторінки можуть віддаватися відвідувачам сайту навіть тоді, коли ваш хостинг або ВПС зависне, або з якихось інших причин буде недоступний. Тобто перерв у роботі сайту взагалі не буде. При цьому сервіс повідомить вам про проблеми з хостингом, щоб ви могли прийняти заходи по їх усуненню.
  • Сервіс уміє об’єднувати всі файли, передані при запиті сторінок, які можна об’єднати, що дозволяє зменшити кількість запитів до сайту, а значить скоротити час очікування при відкритті його сторінок. Такий метод прискорення завантаження сайту особливо помітний при перегляді сайту з мобільних пристроїв.
  • Для мобільних пристроїв використовуються окремі алгоритми, включаючи спеціальні зображення, відкладене завантаження картинок і віджетів, а так само полегшену верстку сайту.
  • Здійснюється «розумне» кешування динамічних сторінок, який добре працює для блогів, корпоративних сайтів та інтернет-магазинів. Зниження часу відповіді сервера на більшість запитів призводить до значного зростання позицій в пошуку (на 10-20%).
  • Для відображення хакерських атак на ваш сайт використовуються алгоритми, блокуючі переважна кількість небажаних запитів до вашого сайту. В тому числі і блокується звернення незрозумілих ботів (які не мають відношення до пошукачів), що саме по собі ще й додатково знімає зайве навантаження на ваш хостинг (можна буде використовувати більш дешевий тариф).
  • На дорогих тарифи в Irie.рф, для фільтрації будуть використовуватися вже WAF-фільтри, які практично стовідсотково захищають від переважної більшості можливих атак на ваш сайт (навіть масованих).
  • Сервіс подібний Irie.рф може використовувати для вирішення досить разннообразного кола завдань:

  • Якщо ваш сайт «великий гальма», то після підключення до сервісу він перестане таким бути і буде однаково швидко відкриватися на компах і у будь-яких мобільних користувачів з СНД, так і решти світу. Покращаться позиції сайту в пошуку, підвищиться конверсія і ваш настрій від зростання доходів. По суті, це найшвидший спосіб реалізації даної концепції. Приклад прискорення інтернет-магазинів можна подивитися тут.
  • Якщо ваш ресурс постійно Ддосят або ще як-то домагаються, підключення його до подібного сервісу в більшості випадків зніме цю проблему. В якості бонусу отримаєте високу швидкість і 100% аптайм (завжди доступний). Приклад дивіться тут.
  • Якщо вам важлива висока доступність сайту з регіонів Росії і СНД, то розподілені CDN і DNS сервера припадуть дуже до речі.
  • Якщо у вашого сайту висока відвідуваність, то підключення до Айру.рф може виявитися дешевше переїзду на нове обладнання. За рахунок кешування статики і динамічного кеша можна розвантажити ваш сервер хостингу до прийнятних значень, а так само розширити канальну швидкість за рахунок передачі значної частини трафіку через потужності сервісу. Приклад можна подивитися тут.
  • А в цілому

    Якщо зараз не почати думати про швидкості роботи свого сайту, а так само про його безпеки і стабільності, то потім може бути вже пізно. Справа це непроста, але віддача (за рахунок підвищення конверсії і доходів) все одно з лишком покриє всі тимчасові та ресурсні витрати.

    Займатися оптимізацією в ідеалі повинен фахівець, але за відсутністю такого можна і самому зробити в потрібному напрямі. Хоча б по дрібниці, і то буде толк (головне не поламати).

    Ну, а варіант з підключенням до сайту зовнішнього сервісу-прискорювача (типу Irie.рф) є дуже привабливим рішенням. Процес дуже простий, швидкий (чекати доведеться тільки переписування нових NS по всьому світу) і головне ефективний. Попутно зі швидкістю можна вирішити і ряд інших не менш важливих і актуальних задач. ІМХО.

    Удачі вам! До зустрічей на сторінках блогу