Ознайомтеся з деякими важливими методами, які сприятимуть прискоренню вашого веб-сайту.
Якщо ваш сайт завантажується довше 3 секунд, це може призвести до втрати потенційних клієнтів та зниження позицій у пошукових системах. Також, недостатній рівень безпеки робить ваш ресурс вразливим до атак хакерів, що може спричинити втрату репутації та завдати шкоди вашому бізнесу.
Тому, налаштування безпеки та оптимізація продуктивності є критично важливими для забезпечення позитивного та безпечного досвіду користувача.
Коли мова заходить про оптимізацію продуктивності, зазвичай згадують про такі заходи, як стиснення даних, мінімізацію файлів, кешування, використання легких тем, мінімізацію кількості плагінів і т.д.
Ці методи є ефективними, але в цій статті ми розглянемо ще кілька підходів, які ви можете застосувати до будь-якої платформи, будь то WordPress, Joomla, Magento, Drupal, Node.js або інша.
Давайте проаналізуємо, що ви вже використовуєте, а що потрібно покращити.
Вибір надійного хостинг-провайдера
Іноді основна причина повільної роботи сайту – це неправильний вибір хостинг-провайдера або використання спільного хостингу.
Здебільшого проблема полягає не в поганих хостерах, а у занадто дешевих тарифних планах.
Варто задуматися, якщо ваші щомісячні витрати на хостинг є меншими, ніж вартість чашки кави.
Спільний хостинг можна порівняти з переповненим автобусом, де ніхто не хоче їхати, але всі терплять через низьку ціну.
Основні переваги спільного хостингу – це початкові знижки та відсутність прозорої інформації про те, скільки сайтів розміщено на одному сервері.
Зазвичай, кількість таких сайтів може досягати сотень.
Це призводить до перевантаження серверів та повільної роботи сайту. Багато з цих веб-ресурсів так і не потрапляють на першу сторінку пошукової видачі Google.
Для важливих проєктів краще використовувати VPS або виділені сервери.
Мережа доставки контенту (CDN)
Використання CDN – це наступний крок після вибору якісного хостингу.
CDN є необхідною для тих, хто має глобальну аудиторію. Адже ваш веб-сайт фізично розміщено в одному місці. Тому відстань від сервера до користувача відіграє важливу роль, коли користувач з Японії намагається отримати доступ до сайту, розміщеного в Нью-Йорку.
Підключення до CDN, наприклад, Cloudflare, вирішує цю проблему. CDN зберігає копії вашого сайту на своїх серверах і обслуговує запити з найближчого до користувача сервера. Це знижує навантаження на ваш центральний сервер.
Крім того, CDN забезпечують додатковий рівень безпеки, який часто перевищує можливості звичайного хостингу.
Активуйте IPv6
IPv6 працює швидше, ніж IPv4. LinkedIn зафіксував приріст продуктивності на 40% в Європі, а Facebook – на 10-15% завдяки використанню IPv6.
Зверніть увагу на графік впровадження IPv6 від Google по всьому світу.
Близько 42% користувачів підключаються до Google через IPv6, але лише 21,2% сайтів підтримують цей протокол.
Цікаво, що Cloudflare стверджує, що веб-сторінки з підтримкою IPv6 завантажуються на 27% швидше, ніж аналогічні сторінки з IPv4.
Чи підтримує ваш сайт IPv6? Якщо ви не впевнені, ви можете це перевірити онлайн.
Якщо ні, то ось як це можна зробити.
Більшість CDN-провайдерів, таких як Cloudflare, Incapsula, CacheFly, AKAMAI, пропонують підтримку IPv6. Ви можете перевірити налаштування у панелі керування, щоб активувати цю функцію.
Якщо ви не користуєтесь CDN, а хостинг здійснюється на VPS, наприклад Linode або DigitalOcean, вам потрібно буде налаштувати підтримку IPv6 на веб-серверах Nginx та Apache.
Впровадження IPv6 не матиме негативних наслідків, а натомість може прискорити завантаження сторінок на 10%.
Використовуйте HTTP/3 або HTTP/2
HTTP — це технологія, що використовується для завантаження веб-сторінок, коли ми вводимо URL-адресу в браузері.
Все почалося з HTTP/0.9 у 1991 році, а потім з’явилися оновлення, такі як HTTP/2 та новітній HTTP/3.
HTTP/2 має ряд переваг у порівнянні з HTTP/1.1, зокрема:
- Серверний push
- Мультиплексування
- Пріоритезація ресурсів
- Стиснення заголовків
- Низька затримка
Наразі HTTP/2 використовується на 39,3% веб-сайтів і він є в сім разів швидшим за HTTP/1.1. Перехід на HTTP/2 може зменшити час завантаження сторінки на 30-40%.
Перевірте, чи увімкнено HTTP/2 на вашому сайті.
Однак HTTP/2 має свої недоліки.
Наприклад, він схильний до блокування head-of-line. У цьому випадку будь-яка проблема з TCP-з’єднанням може призвести до блокування всіх потоків. З HTTP/3, який працює на основі UDP, втрата одного пакета не впливає на інші потоки.
HTTP/3 також зменшує затримку, уникаючи рукостискання TLS при повторному з’єднанні. Загалом HTTP/3 має всі переваги HTTP/2, але позбавлений його недоліків.
Перевірте, чи підтримує ваш сайт HTTP/3.
Ви можете дізнатися про підтримку HTTP/3 або HTTP/2 у свого хостинг-провайдера. Крім того, ваш CDN-провайдер може надати можливість перемикання між версіями HTTP.
Оптимізація зображень
Ніхто не любить читати довгі полотна тексту, тому зображення є необхідною частиною будь-якої веб-сторінки. З іншого боку, зображення роблять сторінку важкою і збільшують час її завантаження.
Тому варто використовувати легші формати зображень, такі як WebP або AVIF. Це не тільки зменшить розмір файлу (іноді більше ніж на 80%), але й не вплине на якість зображення.
Ви можете конвертувати зображення у ці формати перед завантаженням або скористатися сторонніми сервісами, як наприклад Optimole, для конвертації “на льоту”.
Скорочення зайвих HTTP-запитів
Веб-сайт завантажується не як єдиний файл. Кожен елемент, текст, зображення, CSS, JavaScript, надходить як окремий HTTP-запит.
За інших рівних умов веб-сторінка з меншою кількістю HTTP-запитів завантажується швидше, ніж сторінка з більшою їх кількістю.
Тому в наших інтересах мінімізувати кількість HTTP-запитів.
З особистого досвіду використання WordPress можу сказати, що вибір легкої теми, наприклад Generate Press, є дуже корисним. Крім того, зменшення кількості встановлених плагінів також сприяє швидшій та надійнішій роботі сайту.
Проте це окрема тема, яка потребує детальнішого розгляду.
Запам’ятайте, що зменшення кількості HTTP-запитів є важливим фактором для оптимізації WordPress.
Використання веб-безпечних шрифтів
Всі ми хочемо, щоб наші веб-сайти виглядали унікально та зручно. Одним з перших кроків до цього є вибір нестандартного шрифту.
І, на щастя, є багато безкоштовних варіантів, наприклад Google Fonts. Проте, використання таких шрифтів додає HTTP-запити. Що ще гірше, у випадку збою стороннього сервера шрифтів, ваш веб-сайт повернеться до системних шрифтів.
Щоб уникнути цього, деякі веб-майстри розміщують шрифти на своїх власних серверах. Однак, це також додає файл, який потрібно завантажити з вашого сервера на пристрій користувача, що призводить до додаткових HTTP-запитів.
Тому, варто використовувати веб-безпечні шрифти, які є стандартними для більшості операційних систем. Ці шрифти не створюють додаткових запитів і гарантують відображення контенту у випадку збою стороннього сервера.
Ось кілька прикладів веб-безпечних шрифтів:
- Arial
- Verdana
- Trebuchet MS
- Tahoma
- Times New Roman
- Georgia
- Impact та ін.
Застосування кешування
Кешування – це локальне збереження даних. Це забезпечує швидше завантаження веб-сайту під час повторного візиту. Експерти рекомендують використовувати кешування для прискорення завантаження сторінок.
Наприклад, для WordPress існує багато плагінів для кешування, наприклад WP Fastest Cache. Також можна налаштувати кешування браузера, редагуючи файл .htaccess.
Проте, методи кешування можуть відрізнятися залежно від платформи.
Асинхронне завантаження
Ця проблема виникла з мого особистого досвіду використання WordPress. Google Search Console повідомила, що понад 40 моїх публікацій у блозі не пройшли перевірку основних веб-показників.
Основні веб-показники є важливими для тих, хто намагається досягти високих позицій у пошуковій системі Google.
Для кращого розуміння погляньте на цей аналіз Pagespeed однієї зі статей techukraine.net:
Завдяки нашим розробникам WordPress, цей сайт чудово проходить тести Pagespeed.
У моєму особистому проєкті були проблеми з показниками Largest Contentful Paint (LCP) та First Contentful Paint (FCP). Зокрема, LCP становив 3,3 секунди, а FCP – близько 2,4 секунди.
Будучи блогером без досвіду в IT, я не знав, як це виправити. Я використовував преміум-тему, мінімізував кількість плагінів, використовував системні шрифти, зображення WebP, хмарний хостинг і т.д.
Ситуацію врятувала одна функція у плагіні Jetpack boost WordPress:
У двох словах, цей плагін завантажує сторонній Javascript асинхронно, додаючи атрибути async або defer до тегів <script>. Таким чином, скрипти завантажуються у фоновому режимі, не блокуючи рендеринг сторінки.
Для мене цей єдиний захід знизив LCP і FCP до 1,7 с і 1,2 с відповідно.
Для довідки, я також прибрав головне зображення з публікацій, а потім вже увімкнув функцію «Відкласти несуттєвий JavaScript», щоб досягти зазначених значень LCP та FCP.
Мінімізація перенаправлень
В ідеалі, для найкращої продуктивності сайту, потрібно уникати перенаправлень. Проте, іноді ми їх використовуємо.
Кожне перенаправлення додає час до завантаження сторінки. Занадто велика кількість перенаправлень може змусити користувача покинути ваш сайт.
Обережне використання відео
Відео збільшують час перебування користувачів на сторінці та роблять контент цікавішим. Вони є чудовим доповненням до зображень.
Найпростіший спосіб додати відео – це вставити відео з YouTube. Однак, за допомогою Google PageSpeed ви можете оцінити, як вбудовування відео впливає на продуктивність.
Для прикладу, я створив дві публікації на нашому тестовому сайті. Одна з відео YouTube (без тексту та зображень), а інша без нічого. Потім я порівняв ці дві сторінки за допомогою Google Pagespeed.
Зверніть увагу на вплив на Total Blocking Time, Speed Index, FCP і LCP. Відео додало цілу секунду до Total Blocking Time, чого цілком достатньо, щоб змусити користувачів піти до конкурентів.
Для підтвердження цих результатів я скористався інструментом Pingdom для перевірки швидкості.
Ви бачите, що одне відео YouTube додало 23 додаткових HTTP-запити, збільшило розмір сторінки, час завантаження і знизило загальний рейтинг продуктивності.
Існує кілька способів зменшити негативний вплив відео. По-перше, можна використовувати асинхронне завантаження, щоб зменшити Total Blocking Time.
Також можна використовувати відкладене завантаження. Для WordPress є багато плагінів для вбудовування YouTube, які спрощують цей процес.
І, нарешті, краще вбудовувати лише мініатюри відео, щоб відео завантажувалося тільки після натискання.
Мінімізація HTML, JavaScript і CSS
Мінімізація може здатися незначною, але вона справді робить сайт швидшим.
Мінімізація видаляє непотрібні елементи з вихідного коду, включаючи пробіли, крапки з комою, коментарі, переноси рядків і т.д. Це робить код більш компактним.
В залежності від платформи вам може знадобитися робити це вручну або використовувати спеціальні інструменти. Завжди робіть резервні копії вихідного коду, тому що редагування мінімізованого коду – це складне завдання.
Комп’ютер легко читає цей компактний код, що призводить до незначного покращення продуктивності.
Використання веб-стиснення
Веб-стиснення схоже на zip, але працює з веб-файлами, щоб прискорити завантаження сторінки і підтримується сучасними браузерами.
Простіше кажучи, сайт з підтримкою стиснення завантажує компоненти швидше, ніж сайт без стиснення. Веб-стиснення працює з HTML, JavaScript, CSS, зображеннями і може зменшити розмір сторінки більше ніж на 70%.
Існує два варіанти: Gzip та Brotli. Швидше за все, на вашому хостингу вже використовується один з них.
Ви можете перевірити, чи працює стиснення на вашому сайті. Якщо ні, зверніться до хостинг-провайдера або веб-розробника для налаштування стиснення.
Зовнішні елементи
Цей пункт можна розглядати як розширення розділу про HTTP-запити, але він заслуговує на окрему увагу.
Зовнішні елементи на сайті – це все, що не є частиною його основного коду, включаючи рекламу, аналітику, плагіни, форуми і т.д.
Такі елементи додають додатковий код, який збільшує кількість HTTP-запитів та робить сайт менш зручним для користувачів.
Звичайно, деякі з цих елементів є необхідними. Проте, будьте мінімалістом та експериментуйте з різними сервісами, щоб обрати ті, що мають найменший вплив на продуктивність.
Швидший веб-сайт!
Продуктивність веб-сайту має першочергове значення. Веб-технології постійно розвиваються, тому потрібно бути в курсі останніх оновлень та адаптуватися до нових вимог щодо швидкості та безпеки.
При цьому, безпека є не менш важливою, ніж швидкість.
І як експерти WordPress, ми не можемо не поділитися з вами деякими найкращими практиками для забезпечення безпеки WordPress.