5 простих способів прискорити завантаження сторінок вашого сайту

Опубліковано: 13.08.2015 |
Автор: Аліна Дріга |

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

 

На HubSpot опублікували статтю про 5 простих способів прискорити сайт у епоху вимогливих користувачів. Нічого надзвичайно секретного, але поради корисні та дійсно прості. Нижче – короткий зміст статті. 

 

Отже, як прискорити сторінки: 

1. Оптимізуйте зображення 

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

 

Масштабуйте зображення, перш ніж завантажувати їх на сайт, – так ви можете зменшити їх в 2 рази. 

 

Другий спосіб оптимізації стиснути зображення. 

 

Для цього можна використовувати спеціальні безкоштовні сервіси на зразок tinypng.com, які стискають їх без втрати якості. Так ви зможете зменшити розмір зображень на 25-80%. 

2. Увімкніть кешування браузера 

Це дозволить тимчасово зберігати певні дані на комп'ютерах користувачів – їм не доведеться чекати кожного разу завантаження однакових елементів. 

 

Як довго будуть зберігатися дані, залежить від налаштувань браузера користувача й вашого сервера. 

 

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

3. Увімкніть стиснення 

Стиснути свій сайт  практично те ж саме, що заархівувати його. Стиснувши його, ви зможете заощадити час на завантаженні 50-70% HTML і CSS файлів, а це тонни даних. 

 

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

4. Оптимізація CSS 

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

 

Що робити? 

 

По-перше, запитайте себе: Чи використовую я всі CSS-файли? Якщо ні, позбудьтеся зайвого коду в файлах. 

 

По-друге, зведіть розмір CSS до мінімуму – для цього використовуйте можливості своєї CMS або, якщо така можливість не передбачена (а в WordPress і Joomla вона не передбачена), використовуйте безкоштовний сервіс на зразок csscompressor.com

 

Просто скопіюйте свій CSS і натисніть "Compress" (Стиснути). 

5. Розміщуйте JavaScript-файли внизу сторінки 

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

 

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

 

Ще один метод – використовувати атрибути defer і async, розміщуючи файли JavaScript на сайті. 

 

Важливий момент: перш ніж використовувати їх, переконайтеся, що розумієте різницю між ними: 

 

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

 

Наприклад, ви можете взяти стандартний скрипт: 
<script type="text / javascript" src = "/ path / filename.js"> </ script> 

 

І додати трохи коду, щоб він завантажувався тоді, коли ви хочете: 
<script type="text / javascript" src = "/ path / filename.js" defer> </ script> 
<script type="text / javascript" src = "/ path / filename.js" async> </ script> 

 

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

 

  • Нагадуємо: Перевірити швидкість завантаження сторінок можна за допомогою сервісу Google PageSpeed Insights або GTMetrics

 

З ростом очікувань користувачів будуть збільшуватися розміри сторінок наших сайтів і тягнути їх вниз. Ми, як маркетологи, не можемо цього допустити. Пам'ятайте, що затримка навіть у 1 секунду може призвести до втрати ліду. 

 

Оригінал статті – http://blog.seolib.ru/marketing/5-sposobov-uskorit-sajt/