Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 5
×

Усе, що ви хотіли знати про оптимізацію сайтів на WordPress: навіщо, як та якими інструментами

Привіт! Мене звати Влад Коба, я WordPress Lead у ІТ-компанії Boosta. Безпосередньо з WordPress я працюю вже понад 8 років і за цей час я переконався, що оптимізація цієї CMS часто може бути досить нетривіальним завданням, але в той самий час вкрай важливим.

Тож про що ця стаття

Цей матеріал — не інструкція чи магічний набір ритуалів, як зробити ваш WordPress швидшим. У першу чергу, я хочу поділитися власним досвідом, знаннями та інструментами, які дозволять вам самостійно проаналізувати та зрозуміти потреби конкретно вашого сайту.

Хтось може поставити запитання, яке аж проситься: «Хто взагалі зараз робить сайти на WordPress»? Адже існує величезна кількість популярних фреймворків, мов програмування, які дозволяють зробити центр керування польотами у кожного у смартфоні. Моя відповідь така: ці «хто» — 43,2% інтернету (станом на 25 квітня 2023) .

Інколи я порівнюю WordPress з Toyota Prius у світі вебу. Хтось може вертіти від нього носа, але за потреби він швидко, досить дешево та надійно виконає поставлену йому задачу.
Інше питання — навіщо взагалі треба оптимізувати свій сайт? Існує ж «золоте правило»: не зламалося — не ремонтуй.

Ще у 2020-му Google анонсував оновлення до побудови видачі в пошуку, відому широкому загалу, як «Page Experience.» З того часу всі намагаються віднайти секрет ранжування сторінок. Поглянемо, що кажуть про це в Google:

«— Швидкість, безумовно, є фактором ранжирування?
— Так.»
John Mueller, Google

«53% юзерів покидають сайт, якщо мобільна версія завантажується довше трьох секунд.»
Dainial An, Google

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

PSI

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

Задля нашої зручності у Google створили інструмент PageSpeed Insights, тому надалі пропоную орієнтуватись, в основному, на нього.

Якщо ввести у єдине поле на цій сторінці посилання на будь-яку сторінку вашого сайту, вам видадуть сукупність статистики (field data) й аналітики (lab data) по цій конкретній сторінці.

Статистика буде містити реальні дані від користувачів, але з обмеженими даними по метриках.

Аналітика, своєю чергою, збирається за допомогою Lighthouse на рандомному сервері Google в світі. До речі, є цей інструмент й у вас у браузері, якщо ви користуєтесь Google Chrome.

Що варто оптимізувати першочергово

У першу чергу, варто орієнтуватися на метрики, які вам видає статистика.

Дуже детально про метрики тут, а якщо коротко:

  • FCP — час відображення першої картинки чи тексту;
  • SI — швидкість відображення контенту на сторінці;
  • LCP — час відображення «найважчої» картинки чи тексту;
  • TTI — як швидко на сторінці можна починати тицяти на кнопки;
  • TBT — сума всіх довгих (>50 мс) процесів на сторінці;
  • CLS — показник того, наскільки сайт «стрибає» при завантаженні.

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

Також PSI дуже зручно показує головні проблеми оптимізації сторінки.

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

Тому пропоную спочатку розглянути загальні підходи до вибору процесу оптимізації в рамках WordPress (так, стаття все ж про нього).

WordPress: статичний чи динамічний

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

  • Статичний WordPress — це, зазвичай, невеликі сайти а-ля лендінги, сайти-візитки, особисті блоги чи новинні ресурси. Тобто такі, на яких контент дуже рідко змінюється після наповнення, отже сайт можна кешувати зі всіх сторін і віддавати користувачу найоптимізованішу версію сторінок з найближчих до цього юзера регіонів. Правильний кеш може розв`язати усі ваші проблеми. Якими саме інструментами це можна зробити, я опишу далі у статті.
  • Динамічний WordPress — це, своєю чергою, сайти, на яких контент на сторінках змінюється динамічно. Для прикладу це — інтернет-магазини (WooCommerce та подібні), сайти з динамічною перелінковкою, форуми, навчальні ресурси тощо. Зазначу: контент, що наповнюється з адмінки або логіка обробки цього контенту на беку має динамічні параметри. У цьому випадку, задача оптимізації стає складнішою, адже, окрім того, що кешування всієї сторінки стає нам недоступним, навантаження на сайт, у більшості випадків, зростатиме.
    Це природно, адже для такого роду сайтів типово, що користувач може проводити на них більш ніж 10 хвилин та відвідувати багато внутрішніх сторінок. Такі сайти потребуватимуть більшої серверної потужності, а також рішень з оптимізації, які ніяк не впливають на постачання контенту.

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

Розділ для адміністраторів

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

На щастя, на ринку існують рішення для WordPress, які дають змогу виконати деякі кроки з оптимізації прямо з адмінки. Це різноманітні плагіни кешування, оптимізації зображень, сервіси CDN тощо.

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

Поради щодо «оптимального» користування WordPress

  • Перш за все, більшість проблем починаються з неякісно створених тем під WordPress. Обираючи готову тему на маркетплейсі, або замовляючи таку в сторонніх розробників, звертайте увагу на оптимізацію. На маркетплейсах часто є демоверсія бажаної теми, яку можна перевірити за допомогою PSI.
  • Слідкуйте за кількістю плагінів, які ви використовуєте, та періодично проводьте «інвентаризацію». Видаляйте ті, якими ви вже не користуєтесь, адже вони засмічують код і створюють зайве навантаження.
  • Завантажуючи картинки, попередньо оптимізуйте їх. Є безліч сервісів, за допомогою яких це можна зробити, наприклад Optimizilla TinyPng.
  • Якщо контент у вас «верстається», слідкуйте за рівнем вкладеності й кількістю елементів. Роздутий DOM сильно впливає на швидкість завантаження сторінки, адже браузеру необхідно обробити надто велику кількість контенту.

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

Плагіни для кешування

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

З цим вам зможуть допомогти наступні плагіни:

  • WP Rocket. Простий у налаштуванні та ефективний плагін з великою кількістю додаткових фіч. Мінус в тому, що він платний. Але його величезний плюс — у стабільній роботі перекешування сторінок.
  • WP Fastest Cache. Безкоштовна альтернатива, яка має схожі налаштування, але менше сторонніх можливостей для оптимізації.

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

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

Плагіни для оптимізації

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

  • AutoOptimize. Швидкий у налаштуванні плагін, що може легко оптимізувати швидкість WordPress і дати додаткові 20-30 балів до PSI.
    Мінус в тому, що методи оптимізації, які він використовує, можуть у деяких випадках просто зламати вам фронт сайту. До того ж сильно ускладнюється розробка і підтримка такого проєкту. Ідеально підходить для проєктів-мастодонтів, які технічно не розвиваються, але які дуже треба оптимізувати швидко й дешево.
  • Nitropack. Найефективніший інструмент з точки зору витраченого часу, з яким я працював. Оптимізує сайт власною CDN. Але мінуси теж суттєві. По-перше, це ціна, що залежить від кількості користувачів. По-друге, можливий негативний вплив на SEO. І, найважливіше, ваш сайт «проходить через треті руки», що не сильно безпечно.

Плагіни для медіа

Часто PSI забирає велику кількість балів виключно через неоптимізовані картинки вагою в кілька мегабайтів. Такі картинки могли бути завантажені неуважним контент-менеджером прямо у media вашого WP. Коли таких картинок сотні, ця проблема набуває катастрофічного характеру для оптимізації вашого сайту.

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

Розділ для адміністраторів із залученням технічних спеціалістів

Правильний хостинг

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

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

При виборі хостингу варто врахувати наступне:

  • навантаження на сайт та кількість його відвідувачів;
  • складність функціоналу та розміри контенту;
  • регіон, на який ви орієнтуєтесь.

Хостинги бувають декількох типів:

Shared-хостинг. Це найпопулярніший вид хостингу. Ціни на послуги стартують орієнтовно від $3. Його особливість в тому, що вашому сайту виділяється місце на сервері поруч з іншими сайтами. Це сильно здешевлює вартість, до того ж shared-хостинги беруть на себе зобовʼязання керувати сервером і пропонують вам технічну підтримку.

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

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

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

VPS-хостинг. Ще одним варіантом розміщення сайту на WordPress є Virtual Private Server. Це сервіси, що дають змогу засетапити й повністю контролювати «сервер» і стек технологій, що на ньому використовується.

Ціни стартують від $5, але на відміну від shared-хостингу, ви маєте можливість отримати більше ресурсів за ті ж самі гроші.

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

Managed-хостинг. Це найдорожчий варіант, але одночасно і золота середина між VPS і Shared. Він поєднує в собі зручність управління й оптимальність виділених ресурсів.

У випадку WordPress на таких хостингах часто є додаткові фішки, спеціально розроблені під CMS.

Cloudflare

Я недаремно виділив цьому інструменту окремий пункт, адже CloudFlare — must have на вашому сайті.

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

Крім того, він також дає змогу кешувати сайт, з відносно гнучкими налаштуваннями.

Безпосередньо для WordPress є інтеграція у вигляді плагіна, що дозволяє менеджерити cloud з адмінки.

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

Аналітика та будь-яка інтеграція зі сторонніми сервісами

Google Analytics

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

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

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

Враховуючи це, можна зрозуміти, чи варто навантажувати свій сайт складним функціоналом.

І на відміну від field data, що дає PSI, особистий кабінет GA дає достобіса інформації практично посторінково. Детальніше про те, як саме можна аналізувати цю статистику, розповів сам Google.

Поради щодо інтеграції сторонніх сервісів

В інтернеті є безліч допоміжних інструментів для сайтів, які можна інтегрувати, просто вставивши маленький скрипт у код сторінки. Після того він магічно підвантажить весь необхідний функціонал, використовуючи вебмагію. Мова йде про такі сервіси як Hotjar, Google Optimize, різноманітні support-чати тощо.

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

І це виливається у ситуацію, коли кожна інтеграція подібного сервісу це, як правило, мінус 5-10 балів до загальної оцінки PSI.

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

Якщо в інструкції для інтеграції не вказано, що скрипт має бути якомога вище в dom-дереві або напряму в head, то вставляти його потрібно аж наостанок, в самому низу footer. А в ідеалі — попросити розробника зробити відкладене завантаження, на 3-5 секунд (для прикладу, це типове рішення для support-чатів).

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

Для розробників

Слухаємо Web Vitals

Так, головна порада — це слідувати рекомендаціям LightHouse. Тут важливо балансувати, адже між тим, що вам рахує LH в PSI та що вам рахує LH вбудований в браузер, завжди буде відмінність.

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

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

Оптимізуємо front

Для Wordpress, у першу чергу, треба поприбирати всі дефолтні стилі та скрипти з head, якими ви не користуєтесь.

Тут на прикладі Emojis є детальна інструкція, як позбутися подібних речей. Також додатково хочу зазначити, що варто відключити дефолтний jQuery для незалогінених користувачів. А якщо ви його використовуєте в розробці, рекомендую теж від нього відмовитись, адже бібліотека доволі важка й вже давно існують легші та практичніші ліби для JS.

А в загальному, при оптимізації фронта можна виокремити наступні правила:

  • слідкуйте за рівнем вкладеності DOM;
  • мінімізуйте кількість невикористаного коду CSS і JS на типах сторінок;
  • користуйтеся різноманітними мініфікаторами;
  • робіть critical CSS та не підключайте в head взагалі нічого, окрім них;
  • оптимізовуйте картинки там, де можна, робіть CSS icons;
  • При розробці JS коду, що відпрацьовує при завантаженні, намагайтеся не блокувати процес громіздкими функціями чи довгими запитами на сторонні ресурси;
  • правильно підключайте шрифти;
  • якщо сайт на http/1.1, робіть бандли CSS і JS;
  • якщо сайт на http/2 чи http/3, розділяйте файли на логічні блоки та пріоритезуйте їх завантаження.

База даних

Якщо Wordpress має поганий показник видачі першого байту (ttfb), то проблема може ховатися в повільних запитах до БД. Стандартні WP_Query часто дуже неоптимізовані й мають роздуті SQL-запити, що довго обробляються.
Легко виявити цю проблему можна за допомогою плагіна Query Monitor. Виявивши проблемний запит, його можна прибрати або оптимізувати.

Окрім того, пришвидшити взаємодію Wordpress і бази даних можна за допомогою кешування запитів в Redis, або в Transients.

Профілювання

Потужностей на сервері вистачає, запити в БД всі швидкі, але перший байт все ще довго віддається?

Проблема може бути безпосередньо в бек-функціоналі сайту: довга обробка, сотні запитів, складні фільтри тощо. Знайти проблему можна спробувати, використовуючи XDebug, а саме його інструменти profiler і trace.

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

Сподіваюся, що ця стаття була для вас корисною. І нехай ваш Wordpress літає, а сайти посідають перші позиції в пошуковику!

👍ПодобаєтьсяСподобалось11
До обраногоВ обраному5
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Коментар порушує правила спільноти і видалений модераторами.

Коментар порушує правила спільноти і видалений модераторами.

Замість тисячі слів — WP + Oxygen + WP-Rocket = 4 зелені кружки.

А якшо не має бажання возитися, можна взяти професійний білдер для створення тем. Наприклад Bricks в не виносити собі мозги.

А якшо не має бажання возитися, можна взяти професійний білдер для створення тем. Наприклад Bricks в не виносити собі мозги.

Коментар порушує правила спільноти і видалений модераторами.

Добрий вечір, а ви регулярно пишете сайти на wordpress?

висновок: щоб оптимізувати вордпрес, треба вивчити статтю на 10 екранів. В той час як сайти на інших платформах (конструктори лендінгів і т д) вантажаться доволі швидко по дефолту.

Дякую за інформацію,якраз буду оптимізувати свій сайт на WordPress alio.com.ua

Litespeed сервер + litespeed cache і у вас все зелененьке і швидко працює бз зайвих платних плагінів і з дуже гнучкими налаштуваннями

Якщо мені б сказали який плагін являється причиною багів на сайті то це був би Lightspeed cache. Дуже чутливий до конфігурації і може щось не працювати а ви й не будете знати про це

дуже цікаво і корисно! Дякую :)

Додатково хочу сказати що Redis Object Cache + кроки звiдси spinupwp.com/...​page-cache-plugins-nginx творять чудо!

Підписатись на коментарі