Перевіряємо і збільшуємо швидкість завантаження сайту
Низька швидкість завантаження сайту - один з "смертних гріхів" просування, причому "б'є" повільність відразу по декількох позиціях. Це і дратівливий чинник для користувача, який швидше за піде шукати потрібне далі, ніж буде витрачати час на повільній сторінці, і "червона ганчірка" для систем пошукової видачі.
Піднятися в топ без оптимізації швидкості завантаження сайту - місія тільки для відчайдушних. Сторінка, яку для відкриття потрібно більше 3 секунд, Вже зараз не викликає довіри у пошукових систем. Далі цей алгоритм буде тільки набирати обертів. Тому, скільки б сил ви не вклали в інші напрямки модернізації ресурсу, без роботи над прискоренням не обійтися.
Як перевірити даний показник і що робити, якщо справи йдуть гірше, ніж хотілося б? Зібрали для вас всю корисну інформацію по темі в одному матеріалі.
Як швидкість завантаження впливає на позиції у видачі та конверсію
Core Web Vitals - саме так називаються чинники Google для оцінки якості ресурсу, які пошуковик продовжує застосовувати в 2022 році. Вони враховують в тому числі час, що необхідний на очікування першого взаємодії з контентом. І повірте, чим більшим буде цей показник, тим менше шансів залишиться на гарне ранжування.
дослідники DoubleClick(Компанії-піонера інтернет-реклами) підрахували, що більше половини користувачів залишають сайт, якщо той вантажиться довше 3 секунд. Кожна наступна секунда очікування відрізає від кількості ваших клієнтів ще до 7%. У мобільній версії все ще гірше - користувачі смартфонів зовсім не схильні чекати навіть зайву секунду.
Якою ж має бути швидкість завантаження сайту?
Повільне завантаження - більше 4 секунд
Середня - 2,5-4 секунди
Швидка - 0 - 2,5 секунд
На що впливає цей показник?
- Індексація сайту, Який демонструє низьку швидкість завантаження, може зовсім не відбутися, тому що у пошукових роботів встановлений ліміт часу на відвідування. Якщо в цей період контент не завантажили, пошуковик його просто не сприйме, а сторінка не потрапить в індекс.
- Поведінкові чинники теж тісно пов'язані зі швидкістю завантаження сторінок.Чим вище відмова користувачів (догляд з ресурсу), тим нижче статистика сайту.У підсумку це обов'язково вплине на ранжування.
- Конверсія падає, якщо чекати відгуку на дію відвідувачеві доводиться довше 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"
Бажаєш отримати навчання від Микити Лукашова?
На курсі навчимося:
- Верстати сайти та створювати інтерфейси
- Освоїмо основи Photoshop для перекладу дизайну в код
- Розширимо знання у розробці на HTML, CSS та JavaScript
- Поповнимо ваше портфоліо!
Хочете вміти все це і набагато більше? Чи відчуваєте, що готові програмувати, але не можете систематизувати знання і зрозуміти, як правильно виконувати дії на практиці?
Курс HTML5 + CSS3 + JS з нуля до готового проекту від Академії Wezom- це 21 урок, 21 практична робота, 20 тестів і фінальний проект, який доведе ваше майстерність. Програма розрахована на навчання верстці з нуля.
На курсі ви навчитеся базовим мови HTML і мета-мови CSS, дізнаєтеся, як переводити дизайнерський макет в робочий код, дізнаєтеся, з чого складається повний цикл роботи верстальника.
Прокачати свої скіли і стати затребуваним фахівцем за 2 місяці- реально!
Тут ви можете подивитися перший урок по верстці безкоштовно!
