Як покращити швидкість завантаження оновленого сайту 2019 року
Оновлення швидкості Google - коли швидкість завантаження сайту стала справді важливою
Вже в 2016 році Google опублікував звіт, в якому стверджувалося, що 40% користувачів мобільних пристроїв залишають сторінку, якщо вона завантажується більше ніж за 3 секунди.
У середині січня 2018 року Google оголосив про початок нового проекту, який спрямований на покращення результатів пошуку для мобільних пристроїв. У липні 2018 року було впроваджено оновлення Speed - оновлення алгоритму Google, метою якого є зменшення позиції веб-сайтів зі зниженою швидкістю завантаження. З тих пір швидкість завантаження стала важливим фактором визначення позиції вашого сайту в результатах пошуку Google.
"Люди хочуть якнайшвидше знайти відповідь на його запитання - дослідження показали, що швидкість завантаження веб-сайтів для них дуже важлива", - заявили члени команди Google Чжихен Ван і Доантам Фан у дописі на веб-майстрі Google Центральний блог.
"Оновлення алгоритму Google вплине на відносно невелику кількість пошукових запитів. Тільки сторінки, які пропонують повільну швидкість завантаження, зазнають зменшення позиції в результатах пошуку. " Ван і Фан пояснюють.
Поряд з іншими UX-факторами, зовнішніми посиланнями та значенням вмісту, швидкість завантаження сайту має сильний і прямий вплив на ефективність SEO.
Приєднуйтесь до 170 000 користувачів, які створюють веб-сайти безкоштовно та без знань програмування.
Програма створення веб-сайтів, WebWave, дозволяє створювати веб-сторінки з повною свободою. Ви можете розпочати процес створення веб-сайту з чистої сторінки або скористатися шаблоном.
Як зменшити час завантаження веб-сторінки - кілька простих порад та інструментів
Що ми можемо зробити, щоб покращити швидкість завантаження нашого сайту? Найпростіший спосіб - це "послабити" веб-сторінку - зменшити обсяг даних, завантажених під час доступу. Ось декілька простих порад, які допоможуть вам покращити час завантаження веб-сайту:
a. Виберіть правильну роздільну здатність для зображень
Зображення з роздільною здатністю 5000 пікселів виглядають чудово, але, на жаль, вони займають кілька мегабіт або навіть більше. Вибір правильної роздільної здатності - це перший крок до "ослаблення" зображень та освітлення сторінки. Пам'ятайте, що чим більша роздільна здатність, тим більший розмір файлу.
У WebWave ми рекомендуємо використовувати на сайті зображення із роздільною здатністю, що вдвічі перевищує розмір зображення. Під час публікації зображення стискаються для прискорення завантаження сайту - що помітно на зображеннях із низькою роздільною здатністю.
Стиснення зображень є простим у таких популярних програмах, як GIMP або навіть у найпростішому Irfanview.
Люди хочуть якнайшвидше знайти відповідь на його запитання
б. Виберіть правильний формат зображення
На вибір є 3 варіанти: JPEG, PNG та SVG. Кожен із цих форматів має свою специфіку. Якщо ми вибрамо правильний формат для потрібного зображення, ми отримаємо високопродуктивні файли.
Формат PNG краще підходить для зображень з невеликою кількістю кольорів і відтінків.
Формат JPEG краще підходить для зображень із великою кількістю кольорів та деталей.
Формат SVG - це формат, який добре підходить для простих зображень з невеликою кількістю деталей (наприклад, логотипів)
Формат PNG включає 2 підформати: PNG-24 та PNG-8. Різниця між ними полягає в кількості кольорів, до складу яких може входити зображення. Якщо ви не впевнені, який формат буде більш доречним, виберіть оригінальний формат для збереження файлу.
в. Оптимізуйте файли зображень
Перед розміщенням зображень на сайті ви можете видалити ще кілька кілобайт за допомогою безкоштовних інструментів, таких як tinypng.com. Вони допомогли мені заощадити сотні мегабіт. Ви просто «кидаєте» зображення, робите магію і отримуєте зображення, яке виглядає однаково, але «важить» менше. Гаразд, це насправді не магія, це мудра автоматизація, але не потрібно детально описувати це. Головне, щоб це працювало.
Цікавий фокус, який дозволяє отримати чіткіші зображення, - подвоїти розмір і зменшити їх якість.
Зображення шириною 300 пікселів та якістю 60% буде "важити" приблизно стільки ж, скільки зображення 600 пікселів та якістю 30%. Але друге зображення, розміщене на 300-піксельній сторінці, буде виглядати краще.
- Ямгінея А - Оригінальне зображення з розмірами 300x200px, збережене з якістю 60%
- Ямгінея Б - Модифіковане зображення з розмірами 600x400px, збережене з якістю 30%
г. Оптимізуйте код JavaScript і CSS
На додаток до зображень під час доступу до сайту також завантажуються коди JavaScript та файли CSS. Вони також можуть багато «зважити» і заслуговують на зменшення. З іншого боку, якщо код сайту містить помилки або не є «зрозумілим», це ще більше уповільнить завантаження сайту.
Для оптимальної оптимізації кодів існують чудові інструменти, які усунуть усі непотрібні символи, коментарі та скоротять довгі речення, зберігаючи при цьому всю функціональність коду. Ці програми зможуть зменшити розмір файлів CSS та JS з 30% до 90%.
Якщо ви використовуєте WebWave, вам не потрібно оптимізувати код, він автоматично оптимізується під час публікації. Під час розробки платформи ми працювали над покращенням швидкості завантаження сайтів. Нижче я представляю найважливіші вдосконалення коду опублікованих сайтів, впроваджені за останні 12 місяців (з моменту оновлення статті):