Швидкість завантаження сайту. Аналіз, причини та оптимізація швидкості — блог Drudesk
050 640 98 44
support@drudesk.com

Швидкість завантаження сайту. Аналіз, причини та оптимізація швидкості

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

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

Наприклад, пошукова система Google піднімає у видачі більш «легкі» сайти, оскільки це допомагає користувачеві отримати необхідну інформацію в найкоротші терміни (ви ж знаєте, що час — це гроші. Гугл теж це знає). Швидкість завантаження сайту впливає на показник відмов і глибину перегляду, які вважаються поведінковими факторами. Чим швидше буде завантажуватися ваш сайт, тим ці показники будуть кращі.

Середня швидкість завантаження сайту (сторінки) не повинна перевищувати 3-х секунд (тут все залежить від конкретної сторінки та її вмісту). Найоптимальнішим варіантом буде швидкість до 2-ох секунд. Але в будь-якому випадку, чим швидше швидкість завантаження сайту — тим краще.

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

Щоб визначити швидкість завантаження сторінок сайту можна скористатися PageSpeed Tools. За допомогою цього сервісу ви здійсните поверхневий аналіз, отримаєте поради і вже готові оптимізовані файли (скриптів, картинок і стилів CSS).

Багатьом дуже важлива конкретна швидкість завантаження сайту. Щоб виміряти її, ми рекомендуємо скористатися онлайн сервісом Pingdom Website Speed ​​Test. Тут необхідно вставити URL сторінки і натиснути на кнопку Settings. Приберіть галочку з «Save test and make it public» (зберегти результат і зробити його публічним) і поставте маркер в Amsterdam, Netherlands (середня швидкість завантаження сайту для європейців). Натисніть «Test Now». Сервіс проведе аналіз і видасть вам результат:

Perf. grade - приблизно теж що і показник в Page Speed.
Requests - кількість запитів браузера до сервера.
Load time - час завантаження сторінки сайту.
Page size - «вага» сторінки.
Рядок «Your website is faster than 72% of all tested websites» означає, що «Ваш сайт працює швидше, ніж 72% всіх тестованих сайтів».

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

4 способи збільшити швидкість завантаження сайту

Отже, що ж можна зробити, щоб прискорити завантаження сайту:

1. Зменшіть розмір сторінок сайту

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

Щоб зменшити розмір сторінок, в першу чергу скористайтеся стисненням даних в протоколі HTTP. Це зменшує розмір текстових ресурсів, які включають елементи HTML, CSS і JavaScript, на 50% і більше. Для стиснення даних протоколу HTPP використовуються технології zip, gzip та інші.

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

2. Знизьте «вагу» графіки

Графіка часто становить 80% і більше від загального розміру сторінок. Тому дуже важливо правильно оптимізувати фотографії, які публікуються. Наступні рекомендації допоможуть вам зменшити розмір зображень на 50% і більше:

  • публікуйте фотографії у форматі JPEG, уникайте формату PNG. Формат JPEG дозволяє сильно стискати зображення без втрати якості;
  • не зловживайте використанням формату PNG для забезпечення прозорості графіки. Ефект прозорості — це дуже красиво, але не завжди функціонально;
  • коректно вибирайте рівень якості картинок у форматі JPEG. Зменшивши якість фото на 25-50%, ви практично не помітите різниці в порівнянні з вихідним зображенням. При цьому «вага» ілюстрації значно зменшиться;
  • очищайте графічні файли від цифрового сміття. Різні редактори фото, якими напевно користується ваш дизайнер, залишають у файлі багато різних даних, наприклад, коментарі, робочі версії зображення, невикористовувані палітри і т.п. Це цифрове сміття не потрібне вашим читачам. Щоб очистити файл, скористайтеся сервісами Pngcrush, або Smush.it.

Зменшуючи «вагу» фотографій, постарайтеся зберегти естетичну привабливість сайту. Користувачі та пошукові системи більше цінують візуально привабливі ресурси.

3. Спростіть код JavaScript і CSS

Використання спеціальних засобів спрощення коду JavaScript і CSS зменшує «вагу» відповідних елементів сильніше, ніж стандартні технології стиснення, наприклад, gzip. Сервіси спрощення видаляють з коду зайві елементи, а також скорочують назви функцій.

Щоб спростити код елементів JavaScript і CSS, скористайтеся програмними засобами або онлайн-сервісами, наприклад, Online Javascript Compression Tool або Online JavaScript/CSS Compression.

4. Зменшіть число запитів браузера

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

Ви ніколи не замислювалися, чому головна сторінка Google виглядає так аскетично? Ймовірно, однією з причин є бажання розробників збільшити швидкість її завантаження.

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

  • дозвольте браузерам кешувати дані. Якщо сторінки вашого сайту є статичними, немає потреби «змушувати» відвідувачів щоразу завантажувати їх вміст заново. Попросіть адміністратора сервера або хостинг-провайдера включити опцію кешування фотографій, елементів CSS і JavaScript. Щоб перевірити результат цієї дії, скористайтеся, наприклад, сервісом Redbot;
  • комбінуйте і стискайте файли CSS і JavaScript. Об'єднуючи ці елементи, ви значно зменшуєте кількість запитів браузера. Цей метод підходить для статичних сторінок. Щоб об'єднати файли CSS і JavaScript, скористайтеся спеціальними сервісами та ПО, наприклад, CakePHP;
  • об'єднуйте невеликі фотографії в CSS-спрайт. Це особливо зручно для ресурсів, на яких є багато іконок, кнопок та інших маленьких зображень. Спеціальні сервіси дозволяють об'єднати їх в один файл, який називається CSS-спрайт. Скористайтеся інструментом SpriteMe, щоб перевірити ефективність даної рекомендації на практиці.

Зверніть увагу, включивши опцію кешування, ви не впливаєте на швидкість завантаження сайту при першому відвідуванні. Однак при повторному відвідуванні швидкість завантаження сайту приємно здивує ваших клієнтів. Звичайно, якщо вони не користуються утилітами очищення типу CCleaner.

Як прискорити свій сайт відразу?

Вище ми перерахували основні причини довгого завантаження сайту і надали поради для його прискорення, які може втілити в реальність будь-який користувач, котрий більш-менш знає HTML і CSS. Але наші остаточні рекомендації будуть зводитися до одного — скористайтеся послугами спеціалістів. Фахівці служби підтримки друпал-сайтів зроблять ваш веб-ресурс швидким і максимально доступним будь-якому користувачеві.

Аналізуйте не тільки головну сторінку, але і всі інші сторінки сайту (сторінки розділів і категорій, сторінку матеріалу і коментарів до нього, шаблон виду матеріалів та інші ділянки шаблону). Враховуйте те, що сторінка фотоальбому або з великою кількістю графічних елементів буде відкриватися трохи довше, ніж проста статична сторінка. Враховуйте, що для адміна сайту Page Speed ​​покаже один результат (враховується швидкість завантаження адміністративної панелі), а для гостей - інший.

Оптимізуйте кожен скрипт, кожну точку, кожен символ, кожну картинку (навіть вагою 5Kb) і завжди згадуйте приказку: «Копійка гривню береже!». Якщо ваш сайт задовольняє тимчасові показники швидкості завантаження сторінки, то все одно рекомендуємо провести оптимізацію, так як це тільки покращить ваш сайт.