Швидкість завантаження та продуктивність веб-сторінки є дуже важливими для взаємодії з користувачем. Якщо ваш сайт працює надто повільно, ви втратите не лише відвідувачів, а й потенційних клієнтів.
Чому швидкість завантаження сторінки має значення?
Споживачі не люблять чекати. Все, що триває довше 3 секунд, збільшує можливість відмов на 32%.
Коли відвідувачі продовжують залишати ваш сайт, ви отримуєте нижчий рейтинг в органічному пошуку, низький коефіцієнт конверсії, поганий користувальницький досвід і загалом погану репутацію.
В цілому, швидкість сторінки спрямована на покращення взаємодії з користувачем, коли він потрапляє на ваш сайт. І найкращий спосіб зробити це можливим – оптимізувати свій сайт.
Як визначити, що ваш сайт потребує поліпшення
Поліпшення вашого сайту – половина справи. Знання того, що потрібно покращити, означає перемогу у війні.
Ось що вам потрібно зробити:
1. Перевірте свій сайт за допомогою інструменту оцінки продуктивності
Існує кілька доступних інструментів для оцінки продуктивності, за допомогою яких ви можете перевірити свій сайт. Ось три з них, які заслуговують на увагу:
- — це безкоштовний інструмент, створений Google для аналізу вашого сайту за допомогою тестів Core Web Vitals. Цей тест оцінює сайт за шкалою від 1 до 100 на ПК та мобільних пристроях. Чим швидше сайт, тим вищий бал.
- — це інструмент веб-аналітики, створений GT.net. Інструмент тестує ваш веб-сайт за допомогою сервера з будь-якого місцезнаходження, оцінюючи продуктивність від 1 до 100% і від A до F.
- — також є безкоштовним інструментом, який пропонує реальний користувальницький та синтетичний моніторинг вашого сайту. Pingdom також оцінює ваш сайт за шкалою від 1 до 100 та від A до F.
2. Ознайомтеся із рекомендаціями
Після проведеного аналізу свого сайту будь-яким із цих інструментів, ви отримаєте результати та дієві рекомендації щодо покращення продуктивності сайту. Деякі з цих рекомендацій можуть змінюватись від простих виправлень, таких як оптимізація головного зображення, до складних виправлень, таких як вбудовування CSS. Якщо будь-яке з рекомендованих виправлень виходить за межі ваших можливостей, зверніться до фахівців веб-студії TONYLINE.
Наприклад, давайте протестуємо наш сайт https://tonyline.com.ua в Google PageSpeed Insights.
Як перевірити ефективність вашого сайту за допомогою Google PageSpeed Insights
- По-перше, вам потрібно перевірити швидкість нашої сторінки, перейшовши на сайт Google PageSpeed Insights та ввівши URL-адресу сайту.
- Потім натисніть «Аналізувати».
- Як тільки сторінка завантажиться, ви отримаєте швидкість завантаження як для ПК, так і для мобільних пристроїв.
Залежно від оцінки, ви захочете оптимізувати свій сайт для досягнення максимальної продуктивності. У нашому випадку десктопна версія нашого сайту не потребує виправлень із оцінкою 100/100. Проте, в мобільній версії є рекомендації для ознайомлення.
- Для цього прокрутіть вниз, щоб знайти два розділи: «Оптимізація» і «Діагностика».
Завдяки цим рекомендаціям ми тепер знаємо, де проблема та як її вирішити. Якщо ви здійснили цей крок, наступним кроком буде оптимізація швидкості вашого сайту. Ось десять порад, які вам допоможуть.
10 порад з оптимізації сайту, які допоможуть прискорити ваш сайт
1. Оптимізуйте розмір зображень
Якісні зображення естетичні, але впливають на швидкість роботи вашого сайту через їхній розмір. Що ж робити? Видалити їх неможливо, особливо якщо ви керуєте інтернет-магазином, де високоякісні зображення допомагають здобути довіру серед онлайн-покупців. Найкраще рішення — оптимізувати розміри зображення без втрати якості, і ось як це зробити:
Зменшіть розмір зображення за допомогою інструментів стиснення
Наприклад, такий інструмент, як , допомагає стискати високоякісні зображення до 81% їх вихідного розміру без втрати якості. Просто завантажте свої зображення і інструмент максимально стисне ваші зображення. Інші інструменти, такі як , і , також забезпечують стиснення зображень без втрат до 50%.
Завантажуйте свої зображення у форматі WebP
Зображення WebP пропонують сучасний підхід до оптимізації зображень.
При еквівалентному індексі якості SSIM зображення WebP без втрат на 26% менше за розміром у порівнянні з PNG. А зображення WebP із втратами на 25-34% менше, ніж JPEG. Таким чином, для веб-сайтів, які використовують багато високоякісних зображень, перехід на WebP скоротить час завантаження на кілька мілісекунд та підвищить продуктивність веб-сайту.
Щоб перетворити зображення на WebP, ви можете завантажити на свій комп’ютер попередньо скомпільований інструмент конвертації cwebp, наданий Google. Крім того, ви можете використовувати такі сайти, як та , для конвертації зображень з PNG та JPG у WebP.
2. Мінімізуйте час до отримання першого байта
Час до отримання першого байта (TTFB) — це час (у мілісекундах), який потрібний браузеру для отримання першого байта інформації з сервера. Цей час включає всі процеси від пошуку DNS, встановлення з’єднання через квитування TCP і SSL.
Суть TTFB полягає в оцінці часу, який потрібний сайту для відповіді на запит користувача. В ідеалі Google рекомендує тримати TTFB до 200 мс для гарної взаємодії з користувачем. Якщо TTFB знаходиться між 300-500 мс — це все ще норма, кілька налаштувань можуть довести значення до 200 мс або близько того.
Однак, якщо значення TTFB знаходиться в межах 600 мс — необхідно перевірити сервер.
Ось кілька корисних порад, які слід враховувати при покращенні TTFB:
- Перехід на швидкий хостинг.
- Регулярне оновлення плагінів та тем.
- Використання CDN для скорочення затримки між серверами та користувачами.
- Покращення запитів до бази даних.
- Вибір постачальника DNS преміум-класу.
- Використання кешування на стороні клієнта.
- Підтримка PHP в актуальному стані (WordPress).
3. Виправте множинні перенаправлення та непрацюючі посилання
Надлишкові перенаправлення призводять до додаткових запитів HTTP, які блокують відповідь основного потоку на запит користувача. В результаті основний потік не може виконувати нові запити доти, доки завдання не буде виконано.
Короткий приклад: припустимо, користувач відвідує сайт, і йому потрібно пройти чотири переадресації:
👉 yourwebsite.com → www.yourwebsite.com → d.yourwebsite.com → yourwebsite.com/homepage
Кожне з цих перенаправлень є HTTP-запитом до сервера. А більша кількість переадресацій призводить до більшої кількості запитів, які зрештою уповільнюють роботу сторінки.
Те саме стосується непрацюючих посилань, оскільки браузеру буде складно з’єднати користувача із запитаною сторінкою. У більшості випадків це призводить до циклу перенаправлення, через який пошукові системи не індексують сайт.
Ви можете вирішити цю проблему, виявивши перенаправлення та непрацюючі посилання на вашому сайті за допомогою . Коли ви маєте список посилань, ви можете обмежити переадресацію максимум двома запитами або взагалі видалити непрацююче посилання.
4. Скоротіть кількість плагінів
На сайтах є плагіни, які пропонують безліч функцій для зовнішнього та внутрішнього інтерфейсу сайту.
Для ефективної роботи сайту потрібна обчислювальна потужність сервера. Чим більше плагінів ви встановите, тим більше обчислювальної потужності потрібно. Коли сервер більше не може обробляти плагіни, які конкурують за ту саму обчислювальну потужність, він починає сповільнювати роботу сайту. Ви відчуєте його вплив на час відгуку сервера, час завантаження сторінки та спільну взаємодію з користувачем. Хорошим правилом є встановлення лише тих плагінів, які необхідні для роботи сайту.
5. Використовуйте мережі доставки вмісту (CDN)
Відстань між вашим сервером та місцезнаходженням користувача часто є однією з причин поганої роботи сайту. На щастя, мережі доставки вмісту пропонують послуги, які дозволяють швидше доставляти сайт користувачам по всьому світу.
CDN є географічно розподіленою мережею серверів, які працюють разом для забезпечення більш швидкої доставки контенту. За допомогою CDN система кешує копію сайту на кількох серверах по всьому світу.
Щоразу, коли користувач запитує ваш сайт, CDN просто надає йому копію з найближчого сервера. Цей процес усуває затримку, оскільки не вимагає надсилання запиту на вихідний сервер.
6. Виберіть правильний хостинг-план та провайдера
План хостингу та провайдер закладають основу для визначення продуктивності вашого сайту. В ідеалі, на початку, ви повинні вибрати найдоступніший або найбезкоштовніший варіант хостингу для свого сайту. Перш ніж вибрати план хостингу, вам необхідно розглянути хостинг-провайдера і функції, що надаються їм, а найголовніше, їх гарантований час безвідмовної роботи.
Багато хостинг-провайдерів рекламують 99-відсотковий час безвідмовної роботи як «оптимальну продуктивність». Що це означає? Наприклад, 7 днів на тиждень дорівнює 10080 хвилин. При простої в 1% ви очікуєте, що ваш веб-сайт буде відключений протягом 108 хвилин на тиждень. Це приблизно 2 години на тиждень та 8 годин на місяць. Ці розрахунки дають уявлення про те, наскільки критичним є час безвідмовної роботи для продуктивності вашого сайту.
Рекомендуються , які гарантують час безвідмовної роботи не менше 99,5%, щоб уникнути втрати продажів, клієнтів і загалом зіпсувати користувальницький досвід.
Наступний крок — вибір правильного плану хостингу. Більшість хостинг-провайдерів поділяють свої плани на три окремі рівні:
- Віртуальний хостинг
- Хостинг віртуальних приватних серверів (VPS)
- Виділений хостинг
Віртуальний хостинг
Це найпоширеніший пакет хостингу для розміщення сайту у мережі. Він працює, дозволяючи вам спільно використовувати ресурси одного сервера разом з іншими (можуть бути сотні або навіть тисячі веб-сайтів).
Перевагою цього хостингу є його низька вартість, оскільки він потребує невеликого обслуговування чи технічних знань. Однак недолік переважує всі інші фактори, оскільки він піддає ваш сайт кібератакам та проблемам безпеки. Крім того, спільне використання ресурсів із кількома веб-сайтами знижує продуктивність сайту.
Хостинг віртуальних приватних серверів (VPS)
Він створюється у середовищі віртуального хостингу та працює з використанням ресурсів сервера (або набору серверів). Якщо налаштувати все правильно, VPS може працювати як фізичний сервер сам по собі. З VPS-хостингом ви отримуєте той самий контроль над сервером, що і виділений хостинг, але за нижчою ціною.
Виділений хостинг
Це найдорожчий план хостингу, оскільки він передбачає виділення ресурсів всього сервера одному веб-сайту/користувачу. Однак вибір цього плану дає вам автономію щодо сервера, його продуктивності та безпеки. Думайте про виділений хостинг як про володіння будинком, а не про його оренду.
Завдяки своїм гнучким і настроюваним функціям виділений хостинг є найкращим варіантом для вашого бізнесу, якщо ви отримуєте високий трафік на свій сайт. Однак вартість та обслуговування виділеного хостингу підходять не всім, особливо якщо у вас є невеликий або середній веб-сайт. В ідеалі виділений хостинг найкраще підходить для корпоративних підприємств, таких як великі інтернет-магазини, які відвідують щонайменше 500 тисяч людей на місяць.
7. Скоротіть файли HTML, JavaScript та CSS
Чим менше запитів веб-сайт робить до сервера, тим швидше завантажується сторінка. Коли на вашому сайті є зайві файли HTML, JS та CSS, сервер повинен обробляти кілька запитів і зрештою блокувати DOM. І коли це відбувається, у користувачів збільшується час відповіді сервера на запити.
Мініфікація — найкраще рішення, коли ви не можете видалити код. Наприклад, ви можете використовувати такий сайт, як , щоб видалити пробіли та коментарі, а також скоротити коди у своїх скриптах, не порушуючи їхнього виведення. Для стиснення JS можна використовувати наш JavaScript компресор.
Ось короткий приклад звичайного коду CSS:
/*
* Vertical
*/
.uk-text-top {
vertical-align: top !important;
}
.uk-text-middle {
vertical-align: middle !important;
}
.uk-text-bottom {
vertical-align: bottom !important;
}
.uk-text-baseline {
vertical-align: baseline !important;
}Коли ви мініфікуєте цей код, отримаєте це:
.uk-text-top{vertical-align:top!important}.uk-text-middle{vertical-align:middle!important}.uk-text-bottom{vertical-align:bottom!important}.uk-text-baseline{vertical-align:baseline!important}Обидва варіанти дають однаковий результат, але другий простий і прискорює завантаження. Крім того, ви можете змінити код CSS та JS для підвищення продуктивності.
CSS
- Об’єднайте свій CSS в один файл.
- Позначте ресурси CSS, які не блокують рендеринг за допомогою медіа-запитів.
- Використовуйте правильні атрибути для внутрішнього та зовнішнього виклику вашого CSS.
JavaScript
- Відкладіть завантаження JavaScript.
- Вбудуйте свій JavaScript, якщо він маленький.
- Об’єднайте свій JavaScript.
- Використовуйте асинхронне завантаження, щоб уникнути блокування рендерингу.
8. Використовуйте методи попередньої вибірки, попереднього рендерингу та попереднього завантаження
Ці методи дозволяють браузерам виконувати дії, перш ніж їх ініціює користувач. У більшості випадків сайт відправляє браузеру підказки або сигнали для попередньої обробки, попереднього завантаження або попередньої вибірки відповіді на можливий запит. Цей метод вимагає розуміння моделей поведінки користувачів на сайті. Нижче наведено деякі з технік:
Попередня вибірка DNS
Цей метод дозволяє IP-адресу сайту до того, як користувач натисне посилання. В результаті скорочується час, який витрачається на дозвіл DNS. В результаті ця спроба зведе до мінімуму затримку та скоротить час завантаження сторінки на кілька мілісекунд.
Ось приклад:
<link rel="dns-prefetch" href="//www.site.com">Пререндеринг
Цей метод найкраще підходить для дій, які, як ви впевнені, користувачі здійснюватимуть на сайті. У цьому випадку ви попередньо візуалізуєте всю сторінку разом з її активами та ресурсами у фоновому режимі. Це скорочує час завантаження сторінки, оскільки користувачі отримують миттєву відповідь на запит.
Ось приклад:
<link rel="prerender" href="http://site.com/page.html">Попереднє завантаження
Цей метод використовує спосіб зберігання ресурсів вашого веб-сайту в локальному кеші браузера. Таким чином, щоразу, коли користувач робить запит, ресурси сторінки (скрипти, таблиці стилів, зображення тощо) обслуговуються з локального кеша, а не з сервера. Цей підхід подібний до того, як працюють CDN, коли вони кешують сайт.
9. Кешуйте свій сайт (на стороні клієнта)
Немає жодних сумнівів: кешування сайту зменшує час завантаження. Чи кешуєте ви за допомогою CDN або виконуєте попередній рендеринг своїх ресурсів вручну, кінцева мета та сама. Більшість методів кешування знаходяться на стороні сервера. За умовчанням кешування на стороні сервера — це спосіб надання контенту користувачам. Він працює, виймаючи контент із сервера на запит користувача. Яка ж проблема із цим способом кешування? Це забирає багато часу.
Рішенння — кешування на стороні клієнта. Кешування вашого сайту на стороні клієнта означає збереження копії сайту на телефоні користувача після першого відвідування. Таким чином, при наступних відвідуваннях браузер може просто отримати кешований контент із локального сховища користувача та надати його на запит. Це рішення позбавляє необхідності звертатися до вихідного сервера для отримання контенту.
10. Увімкнути GZIP-стиснення
Чим більше ваш сайт, тим довше він завантажується, тому краще зробити сторінку якомога меншою. Загальне правило — розмір сторінки не повинен перевищувати 5 MB. Це включає стиснення всього, починаючи з зображень, сценаріїв, відео та інших ресурсів сайту, за допомогою GZIP.
За допомогою GZIP ви можете зменшити розмір запитів HTTP до того, як вони потраплять на сервер. Це заощаджує пропускну здатність і скорочує час відгуку сервера до 70%.
Висновок
Поліпшення продуктивності сайту може бути складним завданням, особливо з урахуванням величезних відмінностей у пристроях, можливостях підключення, браузерах та операційних системах, але це вплине на ваш бізнес, якщо ваш бізнес покладається на ваш сайт як на один з основних каналів залучення клієнтів.
Зв’яжіться з нами онлайн сьогодні або зателефонуйте нам по телефону +38 (098) 900-3-901, щоб ми допомогли покращити продуктивність вашого веб-сайту, а ви почали займати більш високі позиції та отримувати більше доходів.
