Забери свій промокод на Black Friday

Перевіряємо і збільшуємо швидкість завантаження сайту

HTML5 + CSS3 + JS
14

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

Піднятися в топ без оптимізації швидкості завантаження сайту - місія тільки для відчайдушних. Сторінка, яку для відкриття потрібно більше 3 секунд, Вже зараз не викликає довіри у пошукових систем. Далі цей алгоритм буде тільки набирати обертів. Тому, скільки б сил ви не вклали в інші напрямки модернізації ресурсу, без роботи над прискоренням не обійтися.

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

увеличение скорости загрузки сайта

Як швидкість завантаження впливає на позиції у видачі та конверсію

Core Web Vitals - саме так називаються чинники Google для оцінки якості ресурсу, які пошуковик почав застосовувати в 2021 році. Вони враховують в тому числі час, що необхідний на очікування першого взаємодії з контентом. І повірте, чим більшим буде цей показник, тим менше шансів залишиться на гарне ранжування.

дослідники DoubleClick(Компанії-піонера інтернет-реклами) підрахували, що більше половини користувачів залишають сайт, якщо той вантажиться довше 3 секунд. Кожна наступна секунда очікування відрізає від кількості ваших клієнтів ще до 7%. У мобільній версії все ще гірше - користувачі смартфонів зовсім не схильні чекати навіть зайву секунду.

исследование о влиянии скорости загрузки веб ресурса

Якою ж має бути швидкість завантаження сайту?

Повільне завантаження - більше 4 секунд

Середня - 2,5-4 секунди

Швидка - 0 - 2,5 секунд

На що впливає цей показник?

  1. Індексація сайту, Який демонструє низьку швидкість завантаження, може зовсім не відбутися, тому що у пошукових роботів встановлений ліміт часу на відвідування. Якщо в цей період контент не завантажили, пошуковик його просто не сприйме, а сторінка не потрапить в індекс.
  2. Поведінкові чинники теж тісно пов'язані зі швидкістю завантаження сторінок.Чим вище відмова користувачів (догляд з ресурсу), тим нижче статистика сайту.У підсумку це обов'язково вплине на ранжування.
  3. Конверсія падає, якщо чекати відгуку на дію відвідувачеві доводиться довше 5 секунд. Низька швидкість завантаження сторінок впливає на показники тривалості перебування на сайті, кількість внутрішніх переходів і ін.

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

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

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

PageSpeed Insights

Визнаний лідер серед seo-фахівців і власників сайтів. Це офіційний ресурс Google, І він не просто дає максимально детальну інформацію по всім потрібним параметрам, а й рекомендує дії для поліпшення показників.

инструмент page speed insights

GTmetrix

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

SeoLik

Оцінює сайт за власною шкалою (від 0 до 100 балів). Містить безліч зручних інструментів і відразу вказує на проблемні місця ресурсу.

Pingdom Tools

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

Час діяти: як збільшити швидкість завантаження сайту

Отже, перевірка виконана, проблема наявності. Що робити далі?Для прискорення сайту потрібно проаналізувати слабкі місця і вжити заходів щодо їх усунення. Розглянемо основні позиції, які варто опрацювати.

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

увеличение скорости загрузки страниц

Стисніть зображення

Швидкість відтворення безпосередньо залежить від "тяжкості" картинок. Мінімум, який варто спробувати без шкоди для візуала - стиснути зображення по довгій стороні хоча б до 1600 пікселів. Можна також пожертвувати 10-20% якості. Швидше за все, це не буде помітно, але заощадить кілобайти. Спробуйте зробити це і провести повторну перевірку швидкості завантаження сайту - побачите миттєвий результат.

Хороший варіант стиснення - gzip. У разі використання техніки, дані сайту архівуються на спеціальному сервері. У браузер вони передаються саме в стислому вигляді, і він сам розпаковує їх. Таким чином можна відчутно "полегшити" ресурс, при цьому без видимих змін.

Скоротіть JavaScript і CSS

Сторінка буде важити ще трохи менше, якщо спростити код. Зробити це допоможе інструмент під назвою jscompress

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

Оптимизация скриптов и стилей

Попрацюйте над веб-шрифтами

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

Як варіант вирішення проблеми варто розглянути вибір форматів WOFF і WOFF2, При цьому в наборах символів залишити тільки латиницю і кирилицю.

Налаштуйте кешування

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

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

Базова директиви для кешування - це вказівка часу, протягом якого актуалбно зберігання кешу (це може бути будь-день, хоч тиждень, хоч рік). називається воно Expires або Cashe-Control max age.

Зверніть увагу на редіректи

Ця важлива функція допомагає уникати помилок 404 і переводить користувача на потрібну сторінку. Але якщо редиректів на ресурсі накопичилося занадто багато, page speed падає, особливо в мобільних версіях. Спробуйте знайти непотрібні редіректи і оптимізувати їх кількість, використовуючи утиліту Screaming Frog.

Налаштуйте черговість завантаження

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

Почистіть сторінку від зайвих плагінів

У прагненні автоматизувати якомога більше процесів на етапі розробки можна отримати не найприємніший побічний ефект - зниження page speed. Знайти і прибрати "Сміттєвий код" - ще один важливий крок на шляху до оптимізації швидкості завантаження сайту.

Хочете вміти все це і набагато більше? Чи відчуваєте, що готові програмувати, але не можете систематизувати знання і зрозуміти, як правильно виконувати дії на практиці?

Курс HTML5 + CSS3 + JS з нуля до готового проекту від Академії Wezom- це 21 урок, 21 практична робота, 20 тестів і фінальний проект, який доведе ваше майстерність. Програма розрахована на навчання верстці з нуля.

На курсі ви навчитеся базовим мови HTML і мета-мови CSS, дізнаєтеся, як переводити дизайнерський макет в робочий код, дізнаєтеся, з чого складається повний цикл роботи верстальника.

Прокачати свої скіли і стати затребуваним фахівцем за 2 місяці- реально!

Тут ви можете подивитися перший урок по верстці безкоштовно!