0-800-759-750
Ми на зв'язку с 7:00 до 24:00
office@elit-web.ua

Як перевірити швидкість завантаження сайту?

Поділіться
Зміст

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

    Що зрештою? Зусилля щодо оформлення та наповнення сайту залишаються не оцінені здебільшого потенційними відвідувачами, зростає кількість відмов, а разом з цим падають позиції у пошуковій видачі. Всі зусилля мають зворотний ефект, і в результаті замість прогресу доводиться спостерігати відтік аудиторії, падіння конверсії та доходів. І справа тут зовсім не в поганій ідеї щодо покращення сайту, а в невмілому способі її реалізації. Розберемо цей ефект докладніше.

    Що впливає на швидкість завантаження сторінки?

    Під час завантаження сторінки відбувається ланцюжок процесів:

    1. Користувач вводить пошуковий запит і переходить за посиланням.
    2. Браузер надсилає запит на вебсервер.
    3. Вебсервер обробляє запит.
    4. Вебсервер надсилає відповідь браузеру.
    5. Браузер починає отримувати інформацію (ми вивчаємо цей аспект як час до першого байта).
    6. Браузер аналізує, завантажує та відображає вміст сторінки.
    7. Сторінка стає повністю доступною у браузері.

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

    Що впливає на швидкість завантаження сторінки

    Що відбувається на сервері?

    Процес пошуку потрібної інформації на сервері має такий вигляд:

    1. Сервер отримує запит від браузера. Його обробкою та аналізом займається спеціальне програмне забезпечення, яке працює у взаємодії з програмами-обробниками, наприклад такими, як PHP.
    2. Сформована відповідь перенаправляється браузеру. Він містить точну закодовану інформацію про те, як саме має виглядати вебсторінка. Надсилання даних здійснюється пакетами, які відповідають за окремі елементи майбутньої сторінки, видимої користувачеві.

    Якщо серверних налаштувань не так багато, і в процесі оптимізації сайту вплинути на них неможливо, HTML-код можна модернізувати з метою прискорення завантаження сторінки. Для цього краще відмовитися від плагінів WordPress та робити PHP-код максимально простим та зрозумілим. Рекомендуємо видалити з нього елементи, що не використовуються, зайві символи, розділові знаки і пробіли. Крім того, файли CSS, HTML та JavaScript можна стискати для прискорення завантаження. Якщо ваші користувачі знаходяться в різних географічних регіонах, можна використовувати CDN-хостинг, що забезпечить швидший та надійніший доступ до сайту.

    Перевірити швидкість завантаження Вашого сайту

    Адреса сайту

    Що відбувається на стороні браузера?

    Браузер допомагає вашому сайту відображатись швидше. Він здійснює:

    1. Виявлення IP-адреси сайту в інтернеті. Для цього браузер спочатку звертається до історії відвідувань. Це кешовані дані, які допомагають йому швидше знаходити та завантажувати сторінки, які були відкриті раніше. Якщо сайт відкривається вперше, пошук IP-адреси буде здійснюватися за допомогою DNS-сервера. Не знаходячи потрібну інформацію, він перенаправлятиме запит до серверів іншого рангу.
    2. Створення запиту HTTP для отримання потрібного контенту.
    3. Прийом відповіді від сервера у вигляді пакетів даних та послідовне відображення їх вмісту відповідно до внутрішнього алгоритму. Спочатку відображається основний HTML-код, після чого створюються запити на додаткові елементи, такі як відео або картинки. В останню чергу завантажується JavaScript.

    Щоб швидкість завантаження сторінки була вищою, краще скоротити кількість циклів запит-відповідь під час переходу. Також слід уникати елементів JavaScript, здатних блокувати рендеринг. Не варто заперечувати важливість кешування даних – цей елемент обов'язково має бути включений до процесу оптимізації. Прискорити завантаження допоможе оптимізація зображень. Важливо стежити за правильністю формату, стискати фото без втрати якості, а для однотипних елементів, які часто використовуються на сторінках, застосовувати CSS-спрайти, що скоротить кількість звернень до сервера.

    Що відбувається на стороні браузера

    Чи дійсно швидкість сторінки впливає на позиції Google?

    Місією Google є зручний, швидкий та корисний інтернет. На досягнення цієї мети спрямовано роботу безлічі внутрішніх алгоритмів, у тому числі й визначення швидкості завантаження сторінки. У 2010 році Google оголосила її одним із факторів ранжування під час пошуку на комп'ютерах, а з 2018 року – ще й на мобільних пристроях. Оновлення Page Experience, випущене у 2021 році, підтверджує, наскільки важливий досвід користувача при ранжуванні сторінок.

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

    • якщо час очікування виявиться більше 3 секунд, більше половини користувачів покинуть ваш сайт;
    • 47% користувачів розраховують, що швидкість завантаження сторінки не перевищить 2 секунд;
    • якщо час завантаження збільшиться з 1 до 3 секунд, ймовірність відмов зросте на 32%;
    • коефіцієнт конверсії знижується загалом на 4,42% з кожною додатковою секундою завантаження.

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

    Чому варто інвестувати у прискорення роботи сайту?

    Швидкість сайту впливає на безліч показників, серед яких і позиції Google. Пошукова система не заперечує своєї любові до швидкого завантаження. За даними, опублікованими Mayabytes, Google направить на ваш сайт менше пошукових роботів, якщо сервер працюватиме повільніше 2-3 секунд. Тому всі ваші зусилля в SEO просуванні можуть не дати бажаного рейтингу тільки через повільне завантаження. Але це далеко не єдина причина інвестувати у прискорення.

    Чому варто інвестувати у прискорення роботи сайту

    Ваші клієнти не нервують

    Швидкість завантаження сайту – перше враження, яке отримує ваш клієнт. Необхідність зачекати кілька секунд дратує, якби вхід до супермаркету було закладено купою коробок. Їх начебто можна оминути, але сам факт наявності перепонів змушує нервувати. Клієнти сайтів, бачачи довге завантаження, відчувають ті ж почуття, і ще до знайомства з вашим товаром та сервісом налаштовуються на негативне ставлення до них. До того ж такі сайти, що «зависають», вважають небезпечними, що змушує клієнтів кілька разів подумати, перш ніж залишити там свої платіжні дані.

    Дані, опубліковані Google/Civic Science, показали, що 54% власників смартфонів розчаровуються, коли спостерігають тривале завантаження сторінки.

    Ви зменшуєте показник відмов

    Користувачі оцінюють швидкість завантаження сайту за своїми суб'єктивними відчуттями, проте загальні закономірності виражені надто яскраво, щоб їх ігнорувати. Дослідження щодо відмов Google продемонструвало, що при збільшенні швидкості завантаження сторінки з 1 до 10 секунд ймовірність відмови користувача мобільного пристрою зростає на 123%.

    Наочним прикладом ефекту від прискорення є результати роботи з сайтом компанії Dakine. Збільшення швидкості завантаження окремих сторінок на 48-65% призвело до зростання трафіку на 31%.

    Ви збільшуєте конверсію/швидкість продажів

    Взаємозв'язок між цими двома показниками було виявлено ще 2006 року. Його продемонстрував Грег Лінден з прикладу компанії Amazon. Ви здивуєтеся, але клієнти виявились нелояльними навіть до такого гіганта індустрії. 100 мілісекунд затримки рендерингу призвели до скорочення продажів на 1%. Сучасні дослідження, проведені Akamai, демонструють ще більш шокуючі результати – зниження конверсій на 7% при затримці завантаження сайту всього на 1 секунду. Що таке 7% для сайту, що приносить 100 000 грн. щоденно? За рік ця сума перевищить 2,5 млн грн.

    Збільшення швидкості сайту прискорює процес просування клієнта воронкою продажів. В результаті прискорення більше клієнтів сягатиме моменту покупки. Ось що станеться, якщо ви збільшите швидкість завантаження сторінок всього на 0,1 секунди:

    Ви збільшуєте конверсію - швидкість продажу

    У цьому ж дослідженні Google було встановлено, що прискорення сайту на 0,1 с дає приріст конверсії на 8,4% для роздрібної торгівлі та 10,1% для туристичної галузі. До того ж у сфері рітейлу прискорення призвело до збільшення середньої суми замовлення на 9,2%.

    Як перевірити швидкість: сервіси та їх можливості

    Швидкість завантаження сторінок визначається великою кількістю факторів, серед яких якість HTML-коду, налаштування контенту, CSS, JavaScript та багато іншого. Оцінити, наскільки швидко обробляються окремі елементи і на якому етапі відбуваються найбільші затримки, допомагає спеціальне програмне забезпечення. Існує безліч сервісів, що дозволяють перевірити швидкість завантаження сайту та допомагають виявляти найпріоритетніші для модернізації елементи. Ви здивуєтеся, як багато можливостей оптимізації сторінок пропонують ці послуги.

    Google PageSpeed Insights

    Перевіряє швидкість завантаження сайту та видає загальну оцінку у балах. Результат вище 90 свідчить про хорошу швидкість завантаження сторінки, діапазон від 50 до 90 говорить про середні значення, а показники нижче 50 є низькими. Сервіс оцінює час завантаження за 16-ма найбільш значущими критеріями та дає рекомендації для подальшої оптимізації ресурсу під час роботи на комп'ютерах та мобільних пристроях. Виглядає це як перелік елементів, що вимагають вашої уваги до їхньої URL. Прислухатися до рекомендацій Google PageSpeed Insights однозначно варто, особливо якщо ви займаєтеся просуванням у цій пошуковій системі.

    Google PageSpeed Insights

    Pingdom Tools

    Безкоштовний сервіс призначений для вимірювання швидкості вибраних сторінок у певному регіоні. Pingdom Tools дає оцінку окремих елементів за шкалою від A до F, крім того, вказує на конкретні напрямки для подальшої оптимізації, які можуть бути використані для просування сайту в інтернеті. Сервіс аналізує використання кеш-пам'яті, файлів кукі, редиректи, CDN, оцінює якість опрацювання CSS, Java Script, графічного контенту та посилань.

    Pingdom Tools

    Load Impact

    Програма, що вимагає встановлення на ваш ПК. Основне призначення – перевірка швидкості завантаження сайту за зміни кількості відвідувачів. Імітує навантаження на сервер, що становить до 50 осіб. Платна версія дозволяє тестувати сторінки за умов ще більшого навантаження. Попутно в Load Impact (K6) перевіряється швидкість завантаження сторінки. Такий підхід дозволяє виявити, чи справляється ваша система з піковими навантаженнями і чи може витримувати тимчасові сплески приросту трафіку без збоїв у роботі.

    Which Loads Faster

    Як випливає з назви, сервіс призначений для порівняння швидкості завантаження сайту з конкурентами. Which Loads Faster має максимально простий інтерфейс. Будь-які налаштування відсутні – необхідно лише ввести URL сторінок, що вивчаються. Аналіз дає загальні результати, але відмінно підходить для швидкого порівняння.

    Which Loads Faster

    GTmetrix

    Сервіс рандомно визначає локацію та браузер для тестування, внаслідок чого результати кількох тестів, виконаних поспіль, можуть відрізнятися між собою. Користувач не має змоги самостійно встановлювати налаштування – необхідно ввести лише адресу сторінки. Результат відображається для сторінки в цілому, а також окремо оцінюються важливі показники:

    GTmetrix

    GTmetrix - у вкладках звіту

    У вкладках звіту можна детальніше вивчити показники, які цікавлять.

    Додаткові послуги для перевірки швидкості завантаження сайту

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

    WebPagetest

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

    WebPagetest

    Для найбільш точної оцінки ви можете тестувати сторінку до 9 разів за один сеанс із виведенням середніх значень, а також вивчати швидкість обробки даних при початковому та повторному візиті користувачів. Важлива перевага WebPagetest – безкоштовний доступ до аналітики, а також зручний формат подачі результатів із їх деталізацією за швидкістю завантаження окремих елементів:

    Додаткові послуги для перевірки швидкості завантаження сайту

    Додаткові сервіси для перевірки швидкості завантаження сайту WebPagetest

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

    Dotcom-Monitor

    Платний хмарний додаток із 30-денним тестовим періодом. Дозволяє перевірити сайт на швидкість в умовах використання різних браузерів та систем – Google, Firefox, Edge, iOS, Android та різних типів мереж (2G, 3G, 4G). За один тест аналізує 25 геолокацій. Підсумки аналізу в Dotcom-Monitor відображаються у вигляді звіту про час завантаження при першому та повторному відвідуванні, а також сервіс надає детальну інформацію щодо кожного конкретного місця розташування.

    Dotcom-Monitor

    У вкладці Page Speed Insights доступний перелік порад щодо оптимізації графічного контенту, кешу, Java Script і CSS та інших факторів. Результати тесту можна розповсюдити за допомогою відкритих посилань.

    Dareboost

    Dareboost – хмарний сервіс, що пропонує розширені можливості аналітики. Зручно, що ресурс відстежує зміни швидкості завантаження сайту та відображає результати на дашборді з основними показниками. Також можна налаштувати регулярне отримання звітів електронною поштою. Цікаво, що програма дає поради, які допоможуть працювати краще. За підсумками аналізу сервіс дає рекомендації щодо використання кешу, оптимізації кількості запитів, безпеки, доступності, відгуків, якості коду, SEO-параметрів.

    Dareboost

    Недоліком сайту є обмеження кількості безкоштовних перевірок п'ятьма на місяць.

    GiftofSpeed

    Виконує комплексне тестування сайту, що дозволяє провести оптимізацію для всіх типів пристроїв – комп'ютерів, планшетів та мобільних телефонів. GiftofSpeed використовує 8 країн контролю. Аналізує такі важливі фактори, як оптимізація CSS та JS, стиснення CSS та JS файлів, перевіряє GZIP, кешування файлів, кількість HTTP-запитів.

    GiftofSpeed

    Uptrends

    Дозволяє налаштовувати перевірку відповідно до геолокації, підбирати тип пристроїв, а також браузер. Результатом аналізу в Uptrends є водоспадна діаграма з часом завантаження сторінки, а також деталізація за окремими елементами та їхньою вагою. За один сеанс сайт проходить одразу триразову перевірку. Також тут передбачена можливість налаштування сповіщень.

    Uptrends

    Varvy

    Інструмент, який може бути цікавим як новачкам індустрії, так і професіоналам. Varvy допомагає отримати або поглибити свої знання у різних галузях оптимізації сайту. Сервіс досліджує SEO-параметри, перевіряє швидкість завантаження та якість оптимізації сторінок для мобільних пристроїв. У Varvy не потрібно авторизуватися, а для перевірки швидкості достатньо використовувати лише URL сторінки.

    Varvy

    KeyCDN

    Дозволяє виконати перевірку із 10 країн. KeyCDN виділяє на тлі інших такі показники, як тривалість завантаження, розміри сторінок та кількість запитів. Досліджує HTML-код, JavaScript, CSS, зображення, відео, шрифти та інші дані. Розглянувши детальний звіт, ви можете проаналізувати DNS-запити, групування контенту за типом і розміром, а також отримати цінні рекомендації щодо прискорення роботи сайту.

    KeyCDN

    Як прискорити завантаження сайту: ефективні прийоми

    Швидкість завантаження сторінок сайту – це комплексний показник, який залежить від того, наскільки швидко сервер здатний виконати ваш запит, а браузер – отримати готовий код та відобразити його у браузері користувача. Вона залежить від великої кількості показників, таких як обсяг даних, що передаються, кешування, якість коду, наявність угруповання типових елементів та інше. Прискорення завантаження сторінок передбачає усунення факторів, що її уповільнюють. Як ми з'ясували, ключові рекомендації можна отримати за допомогою сервісів перевірки швидкості. Тепер розберемо докладніше принцип роботи кожного компонента.

    Що можна пришвидшити на стороні сервера?

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

    Використовувати стиснення без втрат

    Стиснення без втрат – це зменшення розміру файлів, що передаються, яке не впливає на якість їх підсумкового відображення. Цей процес відбувається на етапі передачі даних від сервера до браузера. Згодом вони розпаковуються, і користувач бачить контент без спотворень у вихідному форматі. Для цього можна використовувати Apache, такі як GZIP або deflate.

    Оптимізуйте свій PHP-код

    Якщо код сторінки не повністю задіяний, його невикористовувані частини можна просто видалити. Така модернізація може проводитися вручну, а також за допомогою автоматизованих рішень, таких як CSSNano або UglifyJS. Для визначення коду, що не використовується, можна застосовувати Developer Tools в Chrome. Для цього вам знадобляться вкладки Sources та Coverage:

    Оптимізуйте свій PHP-код

    Тут ви можете спостерігати відсоткове співвідношення і розміри даних, що використовуються і не використовуються, завантаження яких впливає на швидкість сторінки.

    Використовувати кеш на стороні сервера

    Кешування допомагає збільшити швидкість завантаження деяких елементів при повторному відвідуванні сайту користувачами або оновленні сторінки. Цей спосіб оптимізації допоможе скоротити час до першого байта (TTFB), вимагаючи, щоб сервер використовував менше ресурсів для завантаження вебсторінки. Кешування зберігає копії файлів, зводячи до мінімуму роботу з їх подальшого пошуку та передачі. Це відбувається за рахунок того, що сервер створює статичний HTML-файл з однотипними даними, які надсилаються кожному наступному користувачеві. Дані в кеш можуть зберігатися обмежений час, після чого пам'ять очищується і виконується заново. Кешування дозволяє не тільки прискорювати завантаження сторінок, але й використовувати менше ресурсів хостингу. За даними Kinsta, такий прийом дозволяє прискорити завантаження до 30%.

    Що можна прискорити у браузері?

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

    Увімкнути кешування на стороні браузера

    Кешування на стороні браузера дозволяє зберігати в ньому різну інформацію, включаючи елементи стилів, графічний контент та JavaScript. У процесі повторного звернення відвідувача до сайту ці дані не завантажуватимуться заново, що значно збільшить швидкість відображення сторінки.

    Оптимізуйте свою графіку

    Зображення – важлива частина контенту, яка допомагає зробити сайт цікавішим та інформативнішим для користувача. Однак у середньому вони займають 17,4% ваги сторінки. Їх велика кількість, так само як великий формат, можуть негативно відбиватися на швидкості завантаження сайту онлайн. Оптимізація розміру зображень є одним із найпростіших і одночасно ефективних способів прискорення. Вона може включати:

    • зміну форматів файлів;
    • запуск відкладеного завантаження;
    • стиск без втрати якості.

    Для оптимізації графіки є готові рішення – плагіни WordPress. Якщо ваш сайт розроблений на іншій платформі, можна скористатися такими сервісами, як Attrock або Squoosh. Це дозволить зменшити «вагу» окремих файлів на 25-80%.

    Як прискорити завантаження сайту, працюючи із зображеннями? У вас є кілька способів:

    • оптимізуйте розміри файлів. Враховуйте формат екрану пристроїв, які використовуються відвідувачами сайтів;
    • використовуйте формати за призначенням. JPG призначені для фотографій, PNG – для растрової графіки, а SVG – для векторної. Використання оптимальних форматів кожного типу інформації допоможе скоротити час завантаження сторінок без втрати якості зображень;
    • задійте Lazy Load. «Ледаче» завантаження передбачає, що файли, які знаходяться на сторінці, завантажуються поступово. Користувачі навіть не помічають такої відстрочки, оскільки зображення підвантажуються в момент прокручування, перед тим, як вони знадобляться.

    Для оптимізації розміру зображень є такі інструменти, як ImageOptim, JPEGmini, Kraken. Також можна відкоригувати їхній формат безпосередньо в HTML-коді, керуючи такими атрибутами, як <secret> та <size>.

    Оптимізація файлів CSS та JS

    Визначте файли JavaScript, які блокують рендеринг основного контенту. При нагоді варто відмовитися від них зовсім. Скрипти, які не використовуються для перегляду вебсторінки, можуть бути запущені з відстрочкою. Для цього достатньо запустити асинхронне завантаження коду JavaScript. Крім цього, для оптимізації швидкості обробки CSS та JS можна використовувати мініфікацію. Процес передбачає роботу над вмістом коду та розмітки з видаленням коментарів розробників, які не відбиваються на результаті його роботи, а також зайвих пробілів та розділових знаків. Коди до та після мініфікації можуть виглядати так:

    Оптимізація файлів CSS та JS

    Одним із ефективних методів прискорення є об'єднання файлів CSS та JS. Таким чином, замість кількох окремих завантажень браузер виконує лише одну. Недоліком такого підходу можна вважати підвантаження кодів, що не використовуються, наприклад, слайдерів, які використовуються тільки на головній сторінці.

    Відкладене завантаження CSS та JS, які не відповідають за правильне завантаження сторінки, дозволить відвідувачу сайту швидше побачити загальний результат. Опустіть ці файли в нижню частину документа HTML. Не зайвим буде також вивчити код і прибрати з нього елементи, що не використовуються, і інструкції з їх стилізації.

    Висновки

    Технічний SEO може вплинути на безліч аспектів, що впливають на швидкість завантаження сторінок. Однак розпочати роботи з оптимізації сайту необхідно з вивчення вашої аудиторії. Важливо знати, якими пристроями, браузерами та хостингом вони користуються. Наприклад, оптимізація сайту для мобільних пристроїв може опинитися у пріоритеті, якщо більшість клієнтів саме з їхньою допомогою знаходить ваш ресурс. Не акцентуйте свої зусилля лише на покращенні швидкості завантаження – моніторте та перевіряйте показники, які безпосередньо впливають на поведінку користувачів. Далі слід знайти найбільш проблемні місця, які впливають на завантаження, і направити свої зусилля на усунення існуючих недосконалостей. Ми рекомендуємо регулярно перевіряти швидкість завантаження нових сторінок, щоб кожна з них ранжувалась належним чином.

    КОМПЛЕКСНИЙ АУДИТ САЙТУ
    Професійний комплексний аудит сайту - глобальний аналіз вашого проекту ✔ Детальний звіт з переліком помилок та рекомендацій для покращення ✔ Збільшення конверсій
    Получить консультацию
    Наш менеджер свяжется с Вами в ближайшее время

    У Вас залишились запитання?
    Наші експерти готові відповісти на них.
    Залишіть ваші контактні дані.
    Будемо раді обговорити ваш проект!
    Отримати консультацію
    Наш менеджер зв'яжеться з Вами найближчим часом