Чи є у вас потреба у швидкості? Ні, я не маю на увазі прослуховування на роль у наступному фільмі "Форсаж" - я маю на увазі постійний пошук способів пришвидшити роботу вашого веб-сайту.

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

Можливо, саме ці факти привели вас до нашого огляду NitroPack - це універсальний інструмент для підвищення продуктивності веб-сайтів, який, за словами його цільової сторінки, є "єдиним сервісом, який вам потрібен для швидкої роботи веб-сайту".

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

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

У цьому огляді я збираюся протестувати NitroPack за допомогою...

• Я провів кілька тестів продуктивності до і після, щоб побачити, наскільки NitroPack може прискорити роботу мого сайту.
• Вивчення різних функцій, які пропонує NitroPack.
• Показуємо, як встановити та налаштувати NitroPack за допомогою веб-сайту WordPress ( хоча NitroPack працює і з сайтами, що не належать до WordPress ).

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

Дані тестування продуктивності NitroPack

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

В основному, функції звучать гарно в маркетинговому тексті, але час завантаження сторінки - це те, що має значення.

Щоб перевірити продуктивність NitroPack, я взяв свій надійний демо-сайт на WordPress і використав його для проведення тестів "до і після" з різних місць.

Мій тестовий сайт розміщений на найдешевшій краплі DigitalOcean і використовує тему Astra (наш огляд). Щоб додати трохи "ваги" і зробити тест більш реалістичним, я також імпортував повну версію шаблону Organic Store від Elementor, яка включає плагін WooCommerce (разом з демонстраційним контентом, створеним за допомогою Elementor, популярного плагіна для побудови сторінок WordPress).

Для збору тестових даних я використовував WebPageTest, який, на мою думку, є найкращим інструментом тестування продуктивності. Окрім різних метрик для "часу завантаження", він також включає дані для нової ініціативи Google Core Web Vitals, яка стане фактором ранжування в 2021 році.

Метрики Core Web Vitals вимірюють час завантаження, оскільки вони стосуються користувацького досвіду, а не лише одну метрику "час завантаження". Оскільки багато оптимізацій NitroPack зосереджені на покращенні цих метрик (наприклад, шляхом вбудовування критичного CSS), я вважаю, що вони є ще одним важливим елементом, на який варто звернути увагу.

Для своєї тестової конфігурації я використовував наступне:

• Тестова локація . Чикаго, штат Іллінойс І Мумбаї, Індія ( щоб побачити, як працює CDN )
• Браузер Хром.
• Підключення Це дасть повільніший результат, ніж такий інструмент, як Pingdom, але він точніше відображає те, як ваш сайт сприйматимуть реальні відвідувачі, оскільки він близький до середньої швидкості інтернету в США в цілому.
• Кількість тестів для запуску: "9". WebPageTest запустить дев'ять окремих тестів і візьме середнє значення, що усуває варіабельність одного тесту.

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

Ось як це працювало - я почну з вихідних даних, а потім підсумую все в кінці цього розділу:

Чикаго, США:

Відсутня оптимізація (контроль) продуктивності

З NitroPack

Мумбаї, Індія

Відсутня оптимізація (контроль) продуктивності

З NitroPack

PageSpeed Insights

До NitroPack:

Мобільний:

Робочий стіл:

Після NitroPack:

Мобільний:

Робочий стіл:

Висновки

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

NitroPack значно покращив час завантаження сторінок мого сайту в усіх сферах :

• Загальний час завантаження сторінки зменшився, що є найважливішим для більшості користувачів.
• Удосконалено найбільшу змістовну фарбу (LCP) Core Web Vitals, що означає, що ваші відвідувачі зможуть бачити найважливіший контент вашого сайту швидше (що має призвести до покращення взаємодії з ним).
• Час до першого байта (TTFB) зменшився, а це означає, що сервер відповідав швидше.
• Показники PageSpeed Insights значно покращилися.

Щоб допомогти вам візуалізувати порівняння, ось як виглядають результати тесту в Чикаго, штат Іллінойс:

Ось тест Мумбаї:

Зверніть увагу на значне покращення: тестовий майданчик працює майже в 3 рази швидше з NitroPack.

Нарешті, ось результати PageSpeed Insights:

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

Записка від Адама: Пам'ятайте, що це результати тестування з використанням Elementor і "сильного" налаштування в NitroPack. Якщо ви використовуєте "смішний" режим, ви відчуєте швидший час завантаження, але можете зіткнутися з проблемами. На одному з моїх невеликих сайтів я зміг отримати час завантаження мобільних сторінок в 90-х роках, використовуючи легку тему GeneratePress і не маючи конструктора сторінок.

Як NitroPack прискорює роботу вашого веб-сайту?

Отже, тепер ви знаєте, що NitroPack може значно покращити час завантаження сторінок вашого сайту. Тож... як він це робить?

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

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

Кешування

NitroPack має безліч систем кешування для підвищення продуктивності та зменшення навантаження на ваш сервер. Дві найбільші з них - кешування сторінок та кешування браузера:

• Кешування сторінок - зберігає статичну HTML-версію сторінки, щоб вашому серверу не потрібно було запускати PHP при кожному відвідуванні.
• Кешування браузера - зберігає певні статичні ресурси на локальному комп'ютері відвідувача, щоб йому не потрібно було завантажувати ці ресурси при кожному завантаженні сторінки.

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

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

Мережа доставки контенту (CDN)

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

Ця мережа CDN значною мірою пояснює, чому мій тестовий сайт працював більш ніж утричі швидше з NitroPack під час тесту в Мумбаї, Індія.

CDN NitroPack працює на базі Amazon CloudFront і автоматично вбудовується в сервіс.

Оптимізація зображень

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

Оптимізація коду

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

По-перше, NitroPack може автоматично генерувати критичний CSS для кожного унікального макета, а потім відкладати завантаження некритичного CSS, що прискорює видимість контенту (а також підвищує ваші показники PageSpeed Insights).

Він також може відкласти JavaScript, який блокує рендеринг, що дає такий самий позитивний ефект, як і відкладення CSS (і це те, про що PageSpeed Insights завжди кричить на вас).

Нарешті, є деякі інші покращення, такі як попередня вибірка DNS та оптимізація відображення шрифтів.

Ціни на NitroPack

Тепер до наступного важливого питання - у скільки вам обійдуться всі ці функції?

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

Після цього платні плани починаються від $17.50 на місяць з річною тарифікацією або від $21 на місяць з помісячною тарифікацією.

Ці ціни вказані за один сайт, але ви також можете зв'язатися з відділом продажів, щоб дізнатися про плани для кількох сайтів або агентств .

Як налаштувати NitroPack на WordPress

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

У цьому посібнику я зосереджуся на WordPress. Однак пам'ятайте, що NitroPack не обмежується сайтами на WordPress. Якщо ви використовуєте WordPress, спеціальний плагін для WordPress допоможе вам налаштувати і запустити його за кілька хвилин.

Для початку вам знадобиться

• Зареєструйте обліковий запис NitroPack. 14-денна безкоштовна пробна версія для преміум-планів, а також безкоштовний план, про який я згадував раніше. Не забудьте ввести URL-адресу вашого сайту на WordPress під час реєстрації.
• Встановіть плагін NitroPack з WordPress.org.

Потім перейдіть до Налаштування → NitroPack на панелі управління WordPress і натисніть кнопку Підключення до NitroPack кнопку:

Якщо ви вже увійшли до свого облікового запису NitroPack, NitroPack визначить це. В іншому випадку ви побачите запит на вхід.

Потім вам потрібно вибрати веб-сайт, який ви хочете оптимізувати, який ви повинні були ввести при створенні свого облікового запису NitroPack:

І все! Ви підключені - я ж казав, що це легко.

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

Як налаштувати NitroPack

Класна річ про NitroPack полягає в тому, що вам навіть не потрібно його "налаштовувати". Він практично працює з коробки. Насправді, коли я проводив тести вище, я використовував конфігурацію за замовчуванням - я буквально не вніс жодної зміни.

Якщо ви хочете поглибитися в тему, вам слід зайти в розділ Налаштування Потім ви можете вибрати бажаний рівень оптимізації на вкладці "Оптимізація" на панелі керування NitroPack. Конфігурація Залежно від обраного вами рівня оптимізації, NitroPack автоматично налаштує деякі/всі функції, про які я згадував вище.

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

Якщо ви звичайний користувач, то все! Просто зупиніться - вам не потрібно йти далі, ніж вибрати потрібний рівень оптимізації.

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

Наприклад, ви можете виключити певні зображення або ресурси, файли cookie, URL-адреси і т.д. Це може бути корисно, якщо ви, скажімо, фотограф і хочете виключити стиснення зображень вашого портфоліо з високою роздільною здатністю, або якщо у вас сайт для членів і ви не хочете, щоб користувачі, які увійшли в систему, отримували кешований вміст:

У "The Інтеграції також допоможе вам інтегруватися з деякими іншими інструментами:

• Зворотний проксі - багато керованих хостів WordPress використовують Varnish або Nginx як зворотний проксі для кешування на рівні сервера, тому ця функція дозволяє вам продовжувати отримувати вигоду від цих оптимізацій.
• Хмарний спалах
• Сукурі.

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

Легко, так?

Заключні думки: Чи варто використовувати NitroPack?

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

Крім того, він надзвичайно простий у використанні - процес налаштування WordPress надзвичайно простий і повністю автоматизований, як тільки ви подолаєте цей початковий бар'єр.

Єдиний фактор, що бентежить, - це ціна.

Бачите, питання не просто "Чи прискорює NitroPack ваш сайт?". Відповідь - рішуче "так".

Замість цього питання: "Чи достатньо NitroPack прискорює ваш сайт, щоб виправдати сплату щонайменше $X щомісяця?"

Тут відповідь - так... іноді і ні... іноді.

Коли NitroPack може не підійти

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

Цей тестовий сайт знаходився в іншому хостинговому середовищі, тому порівнювати цей показник з NitroPack несправедливо (мій тестовий сайт NitroPack починає роботу з набагато швидшого базового хостингу). Однак, суть в тому, що за $49 на рік WP Rocket може значно покращити час завантаження вашого сайту.

Для багатьох сайтів це "достатньо добре" і заощадить вам багато грошей. Однак це не включає CDN або оптимізацію зображень.

Пам'ятайте: NitroPack пропонує безкоштовний тарифний план для 5 000 відвідувачів на місяць, якщо ви не проти показувати бейдж у нижньому колонтитулі. Плюс в тому, що цей тарифний план все ще включає CDN і безліч поліпшень продуктивності.

Коли слід використовувати NitroPack

Якщо ви готові платити за першокласну продуктивність, NitroPack має багато переваг:

По-перше, покращення продуктивності в моїх тестах було... ну, до біса вражаючим. Насправді він показав набагато кращі результати, ніж я очікував. Мій тестовий сайт вже досить швидкий завдяки краплі DigitalOcean, але NitroPack все одно скоротив час завантаження сторінок мого сайту більш ніж на 50% як у тестах Чикаго, так і в Мумбаї.

По-друге, на додаток до поліпшення показника часу завантаження верхнього рядка сторінки, NitroPack також значно покращив більш "користувацькі" показники продуктивності в Google's Core Web Vitals. Наприклад, у тесті Чикаго він скоротив час мого найбільшого контентного малювання (LCP) з 2,319 с до 0,958 с.

Оскільки Google почне використовувати Core Web Vitals як фактор ранжування SEO в 2021 році, це ще один спосіб, яким NitroPack заробляє свої гроші.

Пам'ятайте, що існує багато даних, які пов'язують час завантаження з такими важливими показниками, як коефіцієнт конверсії та відсоток відмов. Тож якщо у вас "серйозний" веб-сайт, наприклад, членський сайт або магазин електронної комерції, NitroPack цілком може окупитися, допомагаючи вам продавати більше продуктів і створювати щасливіших клієнтів.

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