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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PageSpeed Insights

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

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 місяці- реально!

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