WP Rocket Guide – Як оптимізувати швидкість вашого сайту WordPress

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

У вас ще немає WP Rocket? Ознайомтеся зі складеним мною оглядом WP Rocket отримайте копію плагіна . Ви можете тестувати його протягом 14 днів безкоштовно.

Чому швидкість веб-сайту має вирішальне значення?

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

Згідно з дослідженнями Google, 53% людей, які відвідують веб-сайт, залишають його, якщо він завантажується більше 3 секунд. Тому кожен веб-сайт повинен бути оптимізований для швидкості та мати потужну систему кешування.

У 2020 році Google оголосила про оновлення приблизно в травні 2021 року , зосередившись на основних веб-показниках. Це означає, що швидкість завантаження веб-сайту сильно вплине на ваш рейтинг. І ми знаємо, що падіння ключових слів може призвести до втрати до 80% трафіку. Ви не можете собі цього дозволити.

Отже, мати швидкий веб-сайт означає більше відвідувачів, більше конверсій і більше конверсій.

Як швидко працює ваш веб-сайт? Перевірте це в Інтернеті. dev , створений Google, і зосередитися на найважливіших факторах швидкості вашого веб-сайту. Нижче наведено звіт про веб-сайт, який я кілька днів тому оптимізував для клієнта:

На жаль, хостинг спільний; інакше ми могли б націлитися принаймні на 95%. Проте 84% результату достатньо, і я отримав його, встановивши та налаштувавши WP Rocket.

Я переконав вас звернути увагу і читати далі?

Що таке WP Rocket?

Підсумовуючи, WPRocket — це простий у використанні плагін WordPress, який пришвидшує ваш веб-сайт, оптимізуючи кеш-пам’ять сторінок, доставку зображень і багато інших технічних аспектів щодо сценаріїв, завантаження сторінок тощо. Експерти WordPress визнають WP Rocket найпотужнішим кешувальником плагін.

Плагін прискорює майже 1 мільйон 500 веб-сайтів, що робить його найпопулярнішим плагіном для підвищення швидкості WordPress.

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

Ми розглянемо всі інструменти та налаштування WP Rocket, щоб зрозуміти, що ви можете легко зробити, і оптимізувати ваш веб-сайт для підвищення швидкості.

У вас ще немає WP Rocket? Зробіть послугу своєму веб-сайту та придбайте копію плагіна . Ви можете тестувати його протягом 14 днів безкоштовно.

Придбання та встановлення

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

Після цього перейдіть до панелі адміністратора WordPress, перейдіть до плагінів, додайте новий плагін і завантажте zip-архів, який ви щойно завантажили. Потім активуйте плагін.

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

Починаємо!

Приладова панель

Вкладка «Інформаційна панель» містить інформацію про вашу ліцензію та дозволяє виконувати важливі дії . Зокрема, ви можете очистити весь кеш і/або розпочати попереднє завантаження кешу.

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

Кеш

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

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

Мобільний кеш

Я ввімкнув мобільний кеш. Вам не потрібно створювати окремі файли кешу для мобільних пристроїв, оскільки моя тема WP адаптивна та швидко змінює дизайн для мобільних пристроїв.

Кеш користувача

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

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

Термін служби кешу

Скільки часу файли кешу мають бути доступними, перш ніж їх буде автоматично видалено та відновлено? Ви повинні поекспериментувати з найкращим для вас варіантом. Я встановив значення 0 на необмежений час, оскільки вручну видалив кеш на веб-сайті.

Оптимізація файлів

Ще одна необхідна вкладка налаштувань – це вкладка оптимізації файлів. Файли (HTML, CSS і JS) сильно впливають на швидкість завантаження.

Дуже важливо перевірити ці параметри та побачити, які з них вам підходять. Не забудьте спробувати контактні форми, завантаження сторінок тощо.

Є тисячі тем і плагінів. Деякі старі та застарілі, а інші закодовані погано. WP Rocket намагається оптимізувати їх, але іноді це може порушити роботу. Отже, перевірте та подивіться, що вам підходить.

Файли CSS

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

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

Зменште файли CSS

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

Виключити файли CSS

Якщо деякі файли CSS викликають візуальні помилки, ви повинні виключити їх із скорочення та конкатенації в полі « Виключити файли CSS» .

Оптимізуйте доставку CSS

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

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

Якщо у вас виникли проблеми з видаленням невикористаного CSS, ви можете скористатися Load CSS Asynchronous . Однак асинхронне завантаження CSS не можна ввімкнути одночасно з видаленням невикористаного CSS.

Файли JavaScript

Файли JavaScript відповідають за функціональність вашого сайту WordPress. Тим не менш, вони можуть спричинити уповільнення, якщо код не оптимізовано чи завантажено належним чином або якщо завантажено забагато файлів.

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

Зменште файли JavaScript

Увімкніть мінімізацію файлів JavaScript, а потім опцію їх об’єднання. Якщо вбудовані шаблони JS спричиняють помилки, їх слід виключити з мінімізації та конкатенації у вікні виключення файлів CSS. Те саме стосується файлів JavaScript.

Об’єднайте файли JavaScript

Якщо ваш веб-сайт розміщено на сайті, який не використовує HTTP/2, вам також слід поставити прапорець «Об’єднати файли JavaScript». Це мінімізує запити, поєднуючи внутрішні, сторонні та вбудовані HTTP-запити, що зменшують JS, вашого сайту. Однак хости HTTP/2 можуть передавати кілька файлів одночасно, тому краще не використовувати цю функцію. Детальніше про це .

Завантажити JavaScript відкладено

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

Затримка виконання JavaScript

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

Під час використання ви можете зіткнутися із затримкою завантаження елементів у вікні перегляду, які мають з’явитися негайно, наприклад, повзунок, заголовок і меню. Ви можете легко вибрати, які сценарії НЕ слід відкладати, якщо вам потрібна миттєва видимість. Цей вибір допоможе користувачам одразу взаємодіяти з елементами.

Виключені файли JavaScript

Укажіть URL-адреси або ключові слова, які можуть ідентифікувати вбудовані файли або файли JavaScript, які потрібно виключити із затримки виконання (по одному на рядок).

ЗМІ

Третя найважливіша вкладка стосується мультимедійних файлів (зображень і відео).

Ледаче навантаження

Lazy Load покращує фактичний і передбачуваний час завантаження. Зображення, iframe та відео завантажуються лише тоді, коли вони потрапляють у вікно перегляду, що зменшує кількість запитів HTTP.

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

Використовуйте «Виключити зображення» або iframe для елементів, які виглядають або не працюють належним чином.

Розміри зображення

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

Вбудовує

Він не дозволяє іншим вставляти вміст із вашого сайту, не дозволяє вам вставляти вміст з інших (недозволених) сайтів і видаляє. Запити JavaScript, пов’язані з вбудовуванням WordPress.

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

Попереднє навантаження

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

Попереднє завантаження кешу

Я активував попереднє завантаження кешу, і плагін визначив, що я використовую карту сайту Yoast SEO XML як джерело сторінок. Якщо ви використовуєте інший плагін для карт сайту, ви можете додати карти сайту в текстове поле.

Попереднє завантаження посилань

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

Попередньо отримати запити DNS

Попередня вибірка DNS може прискорити завантаження зовнішніх файлів, особливо в мобільних мережах. Щоб зробити це, подивіться, які зовнішні ресурси завантажує ваш веб-сайт, і додайте домени в поле попередніх запитів DNS.

Попереднє завантаження шрифтів

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

Додаткові правила

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

Ніколи не кешувати URL-адреси

Тут ви повинні додати будь-які URL-адреси, які не потрібно кешувати. Я додав посилання, що містять контактні форми з Recaptcha, оскільки вони конфліктують із WPRocket.

Ніколи не кешуйте файли cookie

Тут ви можете вказати повні або часткові ідентифікатори файлів cookie, які мають запобігти кешуванню сторінки, коли встановлено у браузері відвідувача (по одному на рядок). Однак вам не потрібно використовувати це 99% часу.

Ніколи не кешувати агент(и) користувача

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

Завжди очищати URL-адреси

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

Кешувати рядок(и) запиту

Кеш для рядків запитів дозволяє примусово кешувати певні параметри GET.

База даних

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

Після очищення

Редакції публікації та чернетки буде видалено назавжди. Не використовуйте цей параметр, якщо вам потрібно зберегти редагування або чернетки.

Очищення коментарів

Спам і поміщені в кошик коментарі буде видалено назавжди. Я вмикаю обидва ці параметри.

Очищення перехідних процесів

Перехідні процеси є тимчасовими варіантами; їх безпечно видалити. Вони будуть автоматично відновлені відповідно до вимог ваших плагінів.

Очищення бази даних

Зменшує накладні витрати на таблиці бази даних, тому ввімкніть параметр оптимізації таблиць.

Автоматичне очищення

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

CDN

CDN (Мережа доставки вмісту) допоможе вам швидше доставляти зображення та інші мультимедійні файли з вашого сайту. Це тому, що вони розміщені на різних серверах по всьому світу, тож люди з Європи отримають зображення з європейського сервера, американські – із сервера в США тощо.

Приємно, що ви можете створювати окремі правила для всіх файлів, зображень, CSS і JavaScript, а також CSS і JavaScript.

WP-Rocket рекомендує отримати свою службу CDN під назвою RocketCDN. Якщо у вас є інша служба, ви можете включити її на цій вкладці. Я використовую KEYCDN на даний момент.

Виключити файли з CDN.

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

Серцебиття

Зменшення або вимкнення активності Heartbeat API може допомогти заощадити частину ресурсів вашого сервера.

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

Аддони

Додатки WPRocket — це функції, що розширюють доступні параметри.

Лак

Ви повинні активувати цей аддон, якщо на вашому сервері працює система Varnish Caching.

Cloudflare

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

Сумісність з WebP

Увімкніть цей параметр, якщо ви хочете, щоб WP Rocket надсилав зображення WebP у сумісні браузери. Зауважте, що WP Rocket не може створювати для вас зображення WebP. Ви можете скористатися їхнім сервісом Imagify або ShortPixel . Я використовую другий.