Core6: професійна оптимізація. Високі результати в Google PageSpeed Insights

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

Перше, що ми зробили, це аудит і тестування сайту за допомогою Google Pagespeed Insights і GTMetrix. Подивімося результати тесту та проаналізуймо проблеми.

Як бачимо, за даними GTMetrix продуктивність досягає лише 59 відсотків, що дуже мало. Ключовою проблемою був сервер. Навантаження було надто великим тягарем для нього. Подивіться, що показав Google PageSpeed:

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

На ПК Pagespeed трохи кращий, але 53 — це все одно мало. Така продуктивність є неприйнятною, особливо для компанії, що займається дизайном і маркетингом веб-сайтів. Далі розглянемо, як наша компанія-розробник WordPress підійшла до оптимізації та що ми зробили для пришвидшення цієї веб-сторінки.

Після аудиту та аналізу ми виявили таку кількість проблем:

• невикористаний функціонал WordPress;
• брудний код;
• проблеми з кешуванням.

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

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

Perfmatters — це преміальний плагін WordPress, який забезпечує високопродуктивні веб-сайти. Ми використали його, щоб вимкнути непотрібні функції, наприклад:

• Emojis;
• Dashicons;
• Embeds;
• XML-RPC;
• Remove jQuery Migrate;
• Hide WP Version;
• Remove wlwmanifest Link;
• Remove RSD Link;
• Remove Shortlink;
• Disable RSS Feeds;
• Remove RSS Feed Links;
• Disable Self Pingbacks.

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

Завантаження занадто великої кількості сторонніх шрифтів може уповільнити ваш сайт. Відвідувачам із повільним Інтернет-з’єднанням буде легше користуватися вашим сайтом, якщо ви використовуєте лише кілька системних шрифтів. Крім того, використання Google Fonts може зробити ваш веб-сайт несумісним із загальним регламентом захисту даних, чого ніхто не хоче. Ми відключили шрифти Google, які трохи зіпсували дизайн і сповільнили роботу сайту.

На продуктивність і швидкість завантаження впливає код, який використовується як основа. Наші розробники дотримуються WordPress Codex і загальноприйнятих стандартів, тому ми гарантуємо високу швидкість сторінки після розробки та забезпечуємо оптимізацію на всіх етапах розробки. У цьому проєкті ми працювали над оптимізацією JS і CSS. Що зробили наші розробники WordPress:

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

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

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

Після проведення вищезазначених заходів з оптимізації веб-сайту WordPress ми ще раз перевірили його за допомогою сервісів GTMetrix і Google Pagespeed Insights. Подивімося, чого ми змогли досягти.

Продуктивність під час відкриття сайту на комп’ютері зросла з 53 балів до 93. Основна веб-продуктивність значно покращилася, а це означає, що сайт став зручним для користувача та SEO.

Speed when loading from mobile devices increased from 26 to 75 points. This is an excellent result because, before mobile optimization, users had to wait a very long time for the first content to load. For a visual comparison of the results, we prepared a table:

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

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