Не змушуйте відвідувачів чекати, зменшіть розмір веб-сторінок
Одрі радить вам ознайомитися з цим посібником щодо технічного SEO.
На веб-сайті потрібно враховувати розмір сторінок: за логікою, чим він менший, тим швидше відображається сторінка. Дійсно, швидкість завантаження веб-сторінки є важливим елементом, оскільки користувачі Інтернету дійсно чутливі до часу завантаження сторінки.
Згідно з дослідженням Akamai, сторінку кидають, якщо вона не завантажується менше ніж за дві секунди, а за кожну наступну секунду рівень залишення збільшується на 5,8%.
Крім того, Google враховує швидкість завантаження сайтів у своєму рейтингу результатів пошуку, щоб забезпечити кращий досвід для користувачів.
Простіше кажучи, щоб залишатися високо в результатах пошуку, ваш бізнес повинен зосередитись на забезпеченні швидкого, оптимізованого досвіду на всіх пристроях. Щоб ваш веб-сайт не втрачав трафік, ось все, що вам потрібно знати про розмір сторінки та як його зменшити.
Як провести технічний SEO-аудит ?
Завантажте цей безкоштовний посібник та визначте ефективну технічну стратегію SEO для оптимізації роботи вашого сайту.
Який розмір веб-сторінки ?
Розмір сторінки або "вага" сторінки стосується загального розміру певної веб-сторінки. Сюди входять усі файли, використані для його створення: HTML-код, зображення, таблиці стилів, сценарії та інші носії інформації.
Який розмір не перевищувати ?
Щоб допомогти вам оцінити вагу вашої сторінки, HubSpot розглянув тести продуктивності, проведені Yottaa, компанією, що займається оптимізацією додатків.
У липні 2015 року Yottaa протестував роботу 25 URL-адрес з декількох веб-сайтів HubSpot COS, використовуючи дротові Інтернет-з'єднання (у браузері Chrome) та 3G/4G-з'єднання (з iPhone).
Результати показали, що середній розмір сторінки на HubSpot COS становив 2,43 МБ. Беручи до уваги недавнє дослідження Соасти, яке показало, що середній розмір сторінки зараз перевищує 2 Мб, ця цифра є частиною поточної веб-тенденції.
Однак не забувайте, що вага ваших сторінок також залежить від вашої компанії чи вашої галузі. Наприклад, якщо на вашому сайті електронної комерції є безліч фотографій, швидше за все, ваші сторінки будуть важчими. У будь-якому випадку, мета - залишатися середнім або нижче.
5 порад щодо зменшення розміру ваших сторінок
Дотримуючись деяких прикладних практик, розмір ваших веб-сторінок можна легко зменшити.
1 - Змініть розмір та стисніть зображення
Зображення часто є одним із факторів, що сприяють розміру сторінки. Якщо ви хочете зменшити його, вам доведеться змінити розмір усіх надмірно важких зображень.
Завантажуючи фотографії на свій сайт, пам’ятайте, що їх розміри ніколи не повинні перевищувати розмір контейнера. Якщо остання має максимальну ширину 500 пікселів, зазвичай немає причин завантажувати зображення шириною 1000 пікселів.
Але що, якщо ви хочете запропонувати зображення з високою роздільною здатністю, щоб його відвідувачі могли поділитися та завантажити? У цьому випадку рекомендується завантажити фотографію, розмір якої точно відповідає розміру контейнера, з гіперпосиланням на версію з високою роздільною здатністю, щоб уникнути зважування вашої сторінки.
Інший спосіб зменшити розмір зображення - стиснути його. Таким чином ви одночасно зменшуєте розмір його файлу та час завантаження сторінки.
Ось деякі найпопулярніші засоби стиснення:
Якщо ви використовуєте HubSpot, COS включає функцію автоматичного стиснення та зміни розміру зображення: якщо користувач завантажує зображення розміром 5000 х 5000 пікселів, яке відображається на веб-сайті лише у розмірі 500 х 500, автоматичне зображення розміру зменшить час завантаження браузера. З іншого боку, стиснення зображення зменшує розмір файлу, зберігаючи якість завантаженого зображення.
Однак найкращий спосіб полегшити свою сторінку - це усунути якомога більше сторонніх зображень, але тим, кому потрібно залишитися, допоможуть наведені вище поради.
2 - Використовуйте спрайти CSS
Тепер ви знаєте, що на сторінці, що містить безліч зображень, особливо великих, час завантаження збільшиться.
Дійсно, кожне зображення генерує запит до сервера, що уповільнює весь процес.
Тут з’являються спрайти CSS. Спрайт CSS відноситься до набору зображень, які об’єднані в один файл зображень. Потім ви використовуєте CSS для відображення лише тієї частини комбінованого зображення, яку ви хочете побачити, і таким чином зменшуєте кількість запитів сервера, необхідних для завантаження сторінки.
Ось більш наочне пояснення. Приклад A включає окремі файли зображень для кожної піктограми браузера, що представляють 70,7 КБ. Приклад B використовує спрайти CSS (одне зображення, яке використовує CSS для відображення його частин) і показує точно ту саму інформацію. Загальний розмір цих зображень становить половину розміру прикладу А.
3 - Видаліть непотрібні спеціальні шрифти
Спеціальні шрифти надають вашим сторінкам індивідуальності та виділяють ваш бізнес, але вони обтяжують ваш сайт.
Якщо веб-розробник використовує спеціальний шрифт і його не встановлено в операційній системі користувача, користувач повинен завантажити його разом із вмістом сайту.
Наприклад, Twitter використовує шрифт Gotham у трьох стилях: легкий, книжковий та середній. Загальна їх вага становить 154 КБ.
Іншими словами, якщо ви хочете полегшити свою сторінку, може бути корисно переоцінити кількість користувацьких шрифтів, які ви використовуєте. Якщо один або два користувацькі шрифти насправді не впливають, надмірне використання може зменшити швидкість завантаження сторінки.
4 - Зменште свої ресурси
Не могли б ви зменшити будь-які свої ресурси ?
Мініфікація відноситься до процесу видалення непотрібних або зайвих даних із ресурсу, не впливаючи на їх обробку браузером. Наприклад, коментарі та форматування коду, невикористаний код, скорочені імена змінних та функцій тощо.
Ось як зменшити свої ресурси відповідно до Google:
Створіть оптимізовану версію коду HTML за допомогою інструмента PageSpeed Insights. Використовуйте цей аналіз, щоб запустити свою HTML-сторінку та вивчити правило мініфікації HTML. Нарешті, натисніть "Переглянути оптимізований вміст", щоб отримати доступ до зменшеного HTML-коду.
Спробуйте такі інструменти:
JavaScript
Спробуйте такі інструменти:
5 - використовувати мережу доставки контенту
Мережа доставки вмісту (або CDN для мережі доставки вмісту) відноситься до взаємопов’язаної системи кеш-серверів, яка використовує географічну близькість як критерій доставки веб-вмісту.
Якщо всі елементи вашого веб-сайту розміщені в Ліоні, це гарна новина для жителів Рона-Альпи, якщо не всієї Франції. Але як щодо відвідувачів, які переглядають ваш сайт з Монреаля? Дуже ймовірно, що ваші сторінки завантажуватимуться для них набагато повільніше, просто тому, що відстань до вашого сервера більша.
CDN вирішує проблему, зберігаючи елементи веб-сайту в різних місцях по всьому світу, щоб кожен міг швидко отримати до них доступ.
Примітка: навіть якщо це не обов'язково зменшує вагу вашої сторінки, швидкість її завантаження все одно буде покращена.
Попередня оцінка
Перш ніж почати застосовувати ці поради, найкраще скласти уявлення про масштаб роботи. Щоб перевірити швидкість та розмір вашого веб-сайту, спробуйте інструмент Dareboost.
Щоб отримати більш детальний звіт про загальну ефективність вашого сайту, спробуйте веб-грейдер HubSpot. Ви отримаєте безкоштовний персональний звіт, який оцінить ваш сайт за ключовими показниками, такими як продуктивність, мобільна сумісність, SEO та безпека.
Щоб піти далі, скористайтеся цим безкоштовним інструментом, щоб оцінити свій веб-сайт за лічені секунди та отримати безкоштовну пораду, як його покращити.
Оригінальна публікація 13 лютого 2018 р., Оновлена 27 липня 2020 р