Блог » Розробка » Як прискорити сайт на WordPress: перевірені рекомендації щодо оптимізації WP
Вордпресс разработка сайта

Як прискорити сайт на WordPress: перевірені рекомендації щодо оптимізації WP

Уявити наше життя без технологій зараз неможливо. З їх допомогою ми витрачаємо менше часу на здійснення нашої повсякденної діяльності. І ця гонка щороку тільки набирає обертів. Більш потужні ПК і смартфони, швидкісний інтернет і миттєвий доступ до інформації – все це робить нас перебірливими й вимогливими до web-джерел, якими ми користуємося щодня. Якщо раніше всі чекали завантаження сторінки по 5 і більше секунд, і не скаржилися, то зараз мало хто вичікує і рекомендовані Гуглом 2,5 сек. Якщо сторінка не подала “ознаки життя” протягом першої секунди взаємодії користувача з нею, він просто покине веб-ресурс і відправиться до конкурентів.

На жаль, від цього нікуди не дітися, і веб-майстрам потрібно підлаштовуватися під реалії буття, розробляючи онлайн-ресурси належної якості. І в нашій новій статті ми розповімо про те, як прискорити сайт на WordPress. Чому для огляду вибрали саме цю CMS, – запитаєте ви. Тут все просто. По-перше, наше digital-агентство займається WordPress розробкою, по-друге – більше 65% всіх світових веб-ресурсів, зроблених на CMS, використовують цей движок. Та й який рік WP займає ТОП-1 в рейтингах популярності систем контент-менеджменту.

Створити сайт на Вордпресс зазвичай бажають блогери – заїжджений стереотип, всі вони давно підкорюють Інстаграм, Тік Тік, Фейсбук та інші соцмережі. Тоді як на WP зараз розробляють комерційні проекти: веб-візитки, каталоги, новинні, корпоративні, інформаційні ресурси, і навіть інтернет-магазини. З огляду на вихід нового апдейта Core Web Vitals влітку цього року, всім онлайн-платформ, зробленим на WP, і не тільки на ньому, потрібна швидкість. Чому? Розглянемо далі.

Створення сайту на Вордпресс з акцентом на швидке завантаження

Уявіть, ви витратили багато сил і грошей на створення класного веб-ресурсу, з детально пропрацьованими UX / UI, цікавим блогом, інтерактивними картками товарів, анімацією та іншими красотами. Але забули про page speed. Сторінка завантажується повільно, і користувач, на жаль, ніколи не дізнається про виконану вами роботу. Він покине ваш web-ресурс раніше, ніж побачить контент. Якщо подібних сигналів від відвідувачів надійде багато, пошуковик ще й знизить позиції у видачі, що негативно вплине на ранжування сайту, створення на WordPress якого ви замовили, і вклали в це свої фінанси з розрахунком на прибуток в майбутньому, чи не так?

Core Web Vitals для сайта на вордпрессЗнову ж повторимося, рано чи пізно Гугл запровадить анонсований Core Web Vitals, хоча він вже і пару разів переносився, але отриманий в результаті перенесення час можна же витрачати з користю, і підготуватися до майбутнього апдейту, який ґрунтується на трьох компонентах:

  • LCP — первинне відображення контенту,

  • FID — час реагування елементів сторінки,

  • CLS — стабільність верстки макету.

Детальніше про них ми вже писали в нашій статті про новий алгоритм.

Для вимірювання швидкості рекомендується використовувати PageSpeed Insights, Pingdom, GTmetrix, розширення Lighthouse для Chrome. Дані інструменти за результатами сканування сторінки формують звіт, інформація в якому допоможе вам зрозуміти, як прискорити завантаження сайту на WordPress. Правда, хоч гугловські, хоч сторонні сервіси, дають рекомендації, ґрунтуючись на помилках, які вони знайшли. Звичайно, отримані поради потрібно враховувати, але слід пам’ятати, що вони не є вичерпними, і спиратися в роботі тільки на них – не найкраще рішення.

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

Як прискорити сайт на Вордпресс: універсальні рішення

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

Зробити сайт на WordPress і вибрати якісний хостинг

 

Перший крок в оптимізації веб-ресурсів на WP – розміщення на швидкісному сервері. Саме на хостингу зберігаються всі файли вашого онлайн-ресурсу. Тому рекомендована швидкість відповіді сервера не повинна перевищувати 200 мс, а складатися він повинен з більш швидких SSD-накопичувачів.

Кешування як спосіб прискорити WordPress

 

Налаштувати кеш даних можна як локально, в браузері, так і з боку сервера. У першому випадку при завантаженні сторінки клієнтові не доведеться кожного разу звертатися до сервера. Після першого сеансу всі дані залишаться в пам’яті комп’ютера користувача, в результаті чого кожне наступне завантаження зажадає менше часу. Браузерне кешування підключається в файлі .htaccess через код Expires Header Caching.

Що стосується включення серверного кеша – це, мабуть, перше, і найголовніше, що потрібно зробити, опрацьовуючи варіанти, як прискорити роботу сайту на WordPress. Кеш на сервері потрібен, щоб при кожному повторному зверненні не завантажувалися заново скрипти і дані, використовувані ресурсом. Справа в тому, що великовагові запити до MySQL є слабкістю багатьох web-сайтів. У WP вони генеруються плагінами. І якщо раніше проблема вирішувалася за допомогою кеша запитів MySQL, то в останній версії бази даних кешування відсутнє. Прибрали його через проблеми з масштабуванням.

как ускорить WordPress Одне з рішень в такому випадку – установка дебаггера Query Monitor. Він допоможе виявити плагіни, які генерують великовагові запити. Після виявлення потрібно або відключити їх, або замінити кращими аналогами. Якщо необхідність в підключенні кеша відповідей MySQL залишилася, радимо застосовувати для цього ProxySQL – open source інструмент проксінгу запитів.

Другий аспект – кеш PHP. Починаючи з версії 5.5 він включений за замовчуванням через розширення OPcache. Завдяки цьому в пам’яті сервера автоматично зберігається скомпільований код сторінки.

В результаті коректної роботи запитів бази MySQL і скриптів PHP генерується HTML-файл, що видається користувачеві як готова веб-сторінка. Якщо отриманий HTML зберігається на сервері, і віддається відвідувачам без повторного звернення до MySQL і PHP – швидкість завантаження буде максимально швидкою. Даний метод прискорення сайту на Вордпресс закладений в основу роботи більшості плагінів кеша. Згенерована сторінка зберігається як файл, і при необхідності віддається користувачеві за частки секунди.

Для серверного кешування найчастіше використовують плагіни:

  • WP Super Cache,

  • W3 Total Cache,

  • WP Rocket.

Як альтернативне рішення – кеш в Nginx. Принцип його роботи аналогічний. Але, вибираючи кращий метод, як збільшити швидкість завантаження сайту WordPress, пам’ятайте, що не рекомендується використовувати одночасно Nginx і кеш-плагіни. Хоча це може здатися вигідною ідеєю, на практиці вебмайстри плутаються в багаторівневому кеші, що негативно позначається на функціонуванні онлайн ресурсу.

CDN — ефективний метод прискорення WP

 

Сайт — це не тільки MySQL запити і PHP скрипти. Це ще й безліч статичних файлів:

  • стилів,

  • шрифтів,

  • зображень,

  • java-скриптів.

Швидкість їх завантаження на Вордпресс залежить від розміру, і географічної дальності між користувачем і сервером.

І якщо в першому випадку досить просто стежити за розмірами файлів, і не чекати від картинки в 10 МБ швидкого завантаження, особливо на мобільному інтернеті, то друга проблема вирішується за допомогою CDN – мереж доставки контенту. Content Delivery Network представляє собою кластер з декількох серверів, що знаходяться в різних точках світу. На кожному з них в кеші зберігаються копії всіх файлів, і клієнт при відвідуванні веб-ресурсу отримує ту, що розташована на найближчому до нього сервері.

Варто відзначити, що не кожному web-сайту потрібно формування CDN, і в деяких випадках витрачати фінанси на цю справу недоцільно. Задуматися про налаштування Content Delivery Network має сенс для прискорення онлайн-ресурсів великих міжнародних корпорацій, клієнти і дистриб’ютори яких розташовуються в країнах, далеких одна від одної.

Втім, є і бюджетне рішення для компаній з обмеженими фінансами і сайтом на Вордпресс – тандем W3 Total Cache + Cloudflare допоможе налаштувати CDN безкоштовно.

Оптимізація коду і контенту – запорука прискорення WordPress

 

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

ускорение WordPress оптимизация кодаЩе одна проблема, яка часто зустрічається – підключення всіх бібліотек JS, а використання за фактом пари штук. Тому, підключайте тільки те, що дійсно потрібно для онлайн-ресурсу. При цьому рекомендуємо зробити асинхронне завантаження JS, і відстрочити завантаження скриптів сторонніх сервісів, наприклад, web-аналітики.

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

  • Autoptimize,

  • WP Super Minify,

  • WP Fastest Cache.

Крім цього, на швидкість завантаження позитивно вплине розміщення CSS-файлів на початку сторінки, а JS-файлів – в кінці. Браузер в цьому випадку приступить до обробки скриптів після завантаження вмісту сторінки.

Що стосується контенту, то, в першу чергу, треба приділити увагу зображенням. У більшості випадків сайт на WordPress, замовити який ви можете у нас, гальмують важкі зображення, вагою понад 1 МБ. Тому наповнювати контентом веб-ресурс потрібно, використовуючи оптимізовані картинки, стиснуті до відповідного розміру. Бажано дотримуватися діапазону 200-600 КБ. Не рекомендується розміщувати зображення обсягом понад 1 МБ. На жаль, не завжди ці норми вдається витримувати. Звичайно, пара великих картинок в цілому не зроблять такого негативного впливу, проте сторінки, де вони розташовані, можуть вантажиться гірше інших.

Важливим є і дотримання вимог до форматів зображень. Зокрема, рекомендується використовувати:

  • JPEG — для фотознімків,

  • PNG — для ілюстрацій,

  • SVG — для іконок.

У звітах тестів на швидкість від Гугла часто трапляються рекомендації замінити поточні картинки на зображення WebP. Це новий формат, який, як показали дослідження Google, при аналогічному розмірі не поступається за якістю JPEG і PNG, але важить менше на 34% і 26% відповідно.

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

  • Optimus – WordPress Image Optimizer,

  • WP-Optimize,

  • TinyPNG,

  • Optimizilla,

  • Image Optimizer,

  • WP Smush,

  • Imagify Image Optimizer,

  • Clearfy,

  • Easy Fast Optimization,

  • EWWW Image Optimizer.

Оптимізація картинок є одним з ефективних способів, як прискорити мобільну версію сайту WordPress. Адже великі зображення на mobile девайсах, особливо при підключенні до 3G, 4G інтернету, а не до Wi-Fi, завантажуються повільно і поглинають трафік користувача.

Як прискорити сайт на Вордпресс: рішення, про які часто забувають

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

Оптимізація бази даних

 

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

Вирішити проблему можна плагіном, наприклад, WP-Optimize, WP-Sweep і будь-яким аналогічним. Або обмежити число версій вручну через файл wp-config.php. Досить прописати в ньому рядок define (‘WP_POST_REVISIONS’, 4). Де 4 – кількість збережених версій постів. Буває так, що зберігати історію змін не потрібно. Тоді рядком false: define (‘WP_POST_REVISIONS’, false) можна відключити цю опцію.

Захист від хотлінкінга і відключення повідомлень про нові посилання

 

У першому випадку на сторонніх ресурсах розміщуються прямі посилання на файли вашого сайту на Вордпресс. Найчастіше від цього страждають зображення, відео або PDF-документи. Навантаження на ваш сервер створюється за рахунок запитів, що виникають у стороннього ресурсу при його завантаженні. Він звертається до вашого хосту, запитуючи контент, посилання на який розміщене на сторінці, що завантажується. Запобігти подібним сценаріям допоможуть захисні плагіни, All in One WP Security and Firewall чи інші аналогічні.

Повідомлення про посилання, розміщені на сторонніх ресурсах, – ще один аспект роботи движка WP. Дану опцію рекомендується відключати в настройках CMS, особливо якщо ви здійснюєте SEO-просування в інтернеті. Повідомлення про кожне нове посиланням створять зайве навантаження на базу даних.

Коментарі та відгуки до постів на WP

 

User Generated Content, безсумнівно, вітається пошуковими системами, даючи їм зрозуміти, що сторінка цікава читачам, а web-ресурс користується в інтернеті популярністю. Однак, велика кількість відгуків і коментарів на сторінці значно знижує швидкість її завантаження, сповільнюючи базу даних. У такому випадку рекомендується розбивати їх на сторінки пагінації. В налаштуваннях движка можна вказати, скільки коментарів або відгуків відображати на сторінці. Таким чином, користувачам продемонструються найсвіжіші з них.

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

Якщо викорінити проблеми повністю не вдалося, пропонуємо ще кілька лайфхаків, як прискорити сайт на Вордпресс:

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

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

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

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

ukукр