Чим швидше завантажується ваш веб-сайт, тим краще — користувачам він подобається, і Google його любить. Якщо ви вже деякий час покращуєте швидкість свого веб-сайту за допомогою Google PageSpeed Insights і досі не бачили див, причина лише одна. Можливо, ви неправильно інтерпретували звіт.
Інструмент перевірки Google PageSpeed Insights надає звіти на основі реальних та «штучних» даних. Тому важливо знати, на яких метриках зосередитися, щоб покращити не лише технічну сторону, а й користувацький досвід.
У цьому посібнику ви знайдете все необхідне, щоб досягти успіху в GooglePageSpeed Insights і нарешті вивести свій веб-сайт у «зелену зону».
Примітка: якщо ви керуєте своїм магазином на Magento, знайдіть готове рішення для пришвидшити Magento , як ми продовжимо.
Що таке Google PageSpeed Insights?
Google PageSpeed Insights (PSI) – це безкоштовний інструмент, який аналізує продуктивність вашого веб-сайту з точки зору часу завантаження, швидкості реагування та взаємодії з користувачем на мобільних пристроях та настільних комп’ютерах. Він використовує шкалу магазину від 0 до 100, щоб надати відгук про те, як працює ваш веб-застосунок:
- Зелений — 90 і вище — хороша продуктивність
- Жовтий — 50-89 — потребує покращення
- Червоний — нижче 50 — погана продуктивність
Порада професіонала: немає потреби зациклюватися на 100 балах, оскільки їх майже неможливо досягти для всіх сторінок. Найкраще зосередитися на кращому взаємодії з користувачем та релевантності, якщо ви хочете, щоб ваші відвідувачі залишалися на сайті та здійснювали конверсії.
Google PageSpeed Insights використовує безкоштовні аудити швидкості для оцінки продуктивності та якості вашого веб-сайту. Таким чином, він надає звіти на основі різних типів даних:
- Лабораторні дані — зібрані в контрольованому середовищі Lighthouse. Вони показують, як штучно визначені або «підроблені» користувачі можуть взаємодіяти з вашим веб-сайтом. Хоча ці дані корисні для налагодження, вони не відображають реальний досвід користувачів.
- Польові дані — отримані зі звіту Chrome User Experience та показують, як реальні користувачі взаємодіють з вашим веб-сайтом. Однак вони містять менше показників.
Примітка: Оскільки PSI показує дані лише з одного сеансу користувача та включає сукупні дані, він не повинен бути єдиним інструментом тестування продуктивності, який слід використовувати.
Чи впливає магазин Google Pages Speed Insights на SEO?
Хоча швидкість веб-сайту є відомим фактором ранжування, Google не керує вашим веб-сайтом через PSI для ранжування. Найбільше значення має досвід користувача.
Якщо ваш веб-сайт погано працює, люди його покидають. А якщо люди йдуть, це сигналізує Google про те, що ваш веб-сайт недостатньо релевантний, щоб бути на верхніх позиціях у результатах пошуку. Не кажучи вже про втрати доходів та низькі показники переглядів сторінок, до яких це може призвести.
Отже, покращення швидкості веб-сайту безумовно позитивно впливає на ефективність вашої SEO-оптимізації. Однак важливо знати, що потрібно покращити, щоб досягти цього результату.
Метрики Google PageSpeed Insight
Google зробив тест PageSpeed Insights дуже простим. Все, що вам потрібно зробити, це перейти до Google PageSpeed Insights, ввести свою URL-адресу та натиснути Аналізувати. Потім зачекайте кілька секунд або хвилин, залежно від складності сторінки або інтернет-з’єднання, та перегляньте звіти.
Мобільні пристрої проти комп’ютерів
Щойно звіт буде готовий, ви спочатку потрапите у мобільну версію (якщо у вас мобільна версія веб-сайту). Однак ви можете легко перейти на комп’ютер, щоб побачити ті самі показники.
Примітка: Мобільні пристрої мають специфічні для пристрою правила CSS та повільніші процесори. Тому цілком нормально, якщо ваш рейтинг на мобільних пристроях нижчий, ніж на комп’ютері.
Основні показники веб-сайту
Основні показники веб-сайту (CWV) – це показники, які вимірюють, наскільки зручним є ваш веб-сайт для користувача, на основі візуальної стабільності, часу завантаження та інтерактивності (за останні 28 днів). Ви можете або пройти (схвалено), або не пройти (не схвалено) цю оцінку, на основі розподілу порогових значень кожного показника у відсотках (%).
Показники в цьому розділі включають:
- Найбільше відображення контенту (LCP) — вимірює час, необхідний для того, щоб найбільший елемент контенту на сторінці став видимим для користувача
- Взаємодія до наступного відображення (INP) — вимірює, як швидко сторінка реагує на взаємодії користувача
- Кумулятивне зміщення макета (CLS) — вимірює, скільки контенту на сторінці переміщується під час завантаження
- Перше відображення контенту (FCP) — вимірює час, необхідний для того, щоб перший елемент контенту на сторінці став видимим для користувача
- Час до першого байта (TTFB) — вимірює час, необхідний браузеру користувача для отримання першого байта інформації від сервера
Порада професіонала: CWV — це єдині метрики, засновані на польових даних, даних про те, як реальні користувачі сприймають ваш веб-сайт. Зосередьтеся на покращенні всіх показників тут.
Можливості та діагностика
— показує, як ваша сторінка працює з точки зору швидкості та оптимізації (це середньозважене значення або CVW, індекс швидкості та загальний час блокування)
— показує, наскільки доступна ваша сторінка незалежно від порушень або операційної різноманітності (наприклад, альтернативний текст для зображень, контрастність кольорів тощо)
— показує, як ваша сторінка відповідає найкращим практикам довіри та безпеки (наприклад, безпечні з’єднання, метатеги, оптимізація Javascript, карти вихідного коду тощо)
— показує, чи ваша сторінка відповідає Basic практикам пошукової оптимізації (наприклад, метатеги, зручність для мобільних пристроїв тощо)
Примітка: Розділ SEO не аналізує всі фактори, які можуть вплинути на ваші рейтинги SEO. Не покладайтеся лише на цей звіт під час покращення SEO.
Нарешті, є звіт про діагностику, під оцінкою продуктивності. Він показує аудити продуктивності, які ваш веб-сайт не пройшов. Ви можете перемикатися між аудитами, що стосуються FCP, TBT, CLS або LCP, і переглядати пропозиції Google щодо їх виправлення. Ми повернемося до цього за хвилину.
Виправлення проблем Google PageSpeed Insights
Вам не потрібно наймати розробника для читання звітів Google PageSpeed, оскільки Google надає пропозиції щодо того, що потрібно покращити. Але все не так просто, коли справа доходить до внесення цих змін.
Деякі з них відносно прості, а деякі можуть вимагати технічного експерта. Ми спробуємо розбити кожну пропозицію, щоб дати вам фору.
1. Зменшення початкового часу відповіді сервера
Коли користувач намагається отримати доступ до веб-сторінки, браузер надсилає запит на сервер для отримання вмісту. Сервер отримує цей запит і повертає вміст. Чим довше відповідає сервер, тим довша затримка завантаження. Google позначить цю проблему, якщо час відповіді сервера перевищує 600 мілісекунд.
Щоб зменшити початковий час відповіді сервера:
- Збільште обсяг оперативної пам’яті та оновіть процесори до швидших
- Правильно індексуйте таблиці бази даних
- Використовуйте мережу доставки контенту (CDN)
Якщо ви оберете надійного хостинг-провайдера, він виконає всі ці дії за вас. Або ви можете найняти розробника, щоб виправити це.
2. Виключіть ресурси, що блокують рендеринг
Ресурси, що блокують рендеринг, як випливає з назви, – це ресурси, які блокують швидший рендеринг сторінок. Зазвичай це файли JavaScript, CSS та шрифтів, які браузер має завантажити перед відображенням сторінки кінцевому користувачеві.
Щоб виправити цю проблему з Google PageSpeed Insights, розгорніть пропозицію та перегляньте ресурси, які блокують рендеринг. Потім визначте, які з них не є критичними для веб-сайту, та видаліть або відкладіть їх.
3. Мінімізуйте JavaScript
Файли Javascript є критично важливими для функціонування вашого веб-сайту. Однак вони не завжди належним чином оптимізовані, що уповільнює завантаження. «Неналежним чином оптимізовані» в цьому випадку означає, що ці файли JavaScript містять багато непотрібних символів, пробілів та роздільників.
Процес видалення цих непотрібних символів називається мініфікацією. Використовуйте будь-який з онлайн-інструментів для мінімізації файлів JavaScript, перелічених у звіті PSI, або перейдіть на легкі фреймворки та бібліотеки JavaScript.
4. Зменште кількість невикористаного JavaScript
Ця проблема Google PageSpeed Insights є надто очевидною. Якщо JS блокує рендеринг, як обговорювалося вище, браузеру потрібно буде завантажити, проаналізувати та скомпілювати скрипт перед обробкою інших ресурсів.
А якщо невикористаний JS не блокує жодних ресурсів, він все одно конкурує за пропускну здатність з іншими ресурсами, поки браузер завантажує його.
Відповідно, немає потреби зберігати невикористаний JavaScript. Просто перегляньте список у пропозиціях PSI та видаліть усі JS-файли, які ви не використовуєте.
5. Зменшити невикористаний CSS
Так само, як і у випадку з JS-файлами, браузер повинен завантажити всі зовнішні таблиці стилів, перш ніж він зможе відобразити сторінку користувачеві. Чому? Тому що ці таблиці стилів можуть містити правила, які впливають на стилі сторінки.
Таким чином, браузери не можуть відображати жодного контенту, перш ніж скомпілювати всі необхідні таблиці стилів.
Помилка "зменшити невикористаний CSS" у Google PageSpeed Insights з'являється, коли веб-сайт завантажує стилі CSS, які не використовуються на сторінці. Це призводить до непотрібного споживання даних та тривалішого завантаження.
Щоб виправити цю проблему, вам слід вбудувати критичний CSS в тег
6. Уникайте надмірного розміру DOM
Об'єктна модель документа – це деревоподібне представлення HTML-структури веб-сторінки. Чим більший розмір DOM, тим гірша швидкість завантаження.
Щоб зменшити розмір DOM:
- Використовуйте рендеринг на сервері для рендерингу сторінок на сервері, а потім повертайте їх користувачеві
- Уникайте використання візуального конструктора сторінок, оскільки вони генерують завищений HTML
- Використовуйте теми та розширення з чистим кодом
- Попросіть розробників видалити непотрібні атрибути та елементи з HTML-коду
7. Уникайте ланцюгового створення критичних ресурсів
Ви вже знаєте, що багато JS, CSS, файлів зображень та шрифтів тощо завантажуються до рендерингу сторінки. Деякі є критичними, а деякі ні. Але коли ви кажете, що завантаження різних файлів залежить один від одного, ви створюєте ланцюг критичних ресурсів.
Наприклад, ви кажете, що текст на вашій цільовій сторінці має завантажуватися лише після завантаження зображень. А для завантаження зображень спочатку потрібно завантажити деякі JS та CSS файли.
Браузер не відтворюватиме сторінку, якщо не завантажено всі елементи ланцюжка. Це створює значні затримки.
Щоб виправити цю проблему, вам слід просто додати ці атрибути до коду веб-сайту:
- "async" — повідомляє браузеру про необхідність продовжувати завантаження сторінки, поки файл завантажується у фоновому режимі
- "defer" — повідомляє браузеру про необхідність завантаження файлу після того, як сторінка стане доступною для користувачів
8. Зменшення часу виконання JavaScript
Час виконання JavaScript визначає час, необхідний для виконання JavaScript від початку до кінця. Це залежить від різних факторів і спричиняє багато проблем, коли йдеться про завантаження та користувацький досвід:
- Блокує основний потік. Браузери завантажують контент, реагують на кліки користувачів та відображають сторінку в основному потоці. Вони просто не можуть нічого з цього зробити, якщо JavaScript не виконано.
- Затримує відображення сторінки. Якщо браузер виявляє тег скрипта, він зупиняє всі інші операції для запуску скрипта, залишаючи користувачів дивитися на порожній екран.
- Затримує перше введення, коли зайнято. Браузери просто не можуть реагувати на взаємодію користувача, коли JavaScript зайнятий.
- Споживає пам'ять під час виконання. Якщо код погано оптимізований, він використовує багато пам'яті, що призводить до затримок та збоїв (у деяких випадках).
Виправлення цієї помилки вимагає видалення невикористаного коду з JS-файлів, розділення JS-файлів на керовані фрагменти за допомогою розділення коду, відкладення некритичних файлів та кешування коду за допомогою шаблону PRPL.
9. Мінімізація роботи основного потоку
Коли браузер відтворює сторінку, це означає, що його рендерер перетворює ваш код на веб-сторінку, з якою користувачі можуть взаємодіяти.
Більшість коду обробляється в головному потоці процесу рендерера. Він аналізує файли HTML та CSS, будує DOM, аналізує, оцінює та компілює JS-файли.
Коли головний потік зайнятий чимось іншим, він не може реагувати на взаємодію користувача. Це поганий користувацький досвід, якого слід уникати.
Тест Google PageSpeed Insights надає розбивку того, де витрачалося навантаження на процесор під час завантаження сторінки браузером. Щоб виправити це, слід видалити невикористовувані файли, зменшити складність обчислень стилів, відкласти некритичні файли тощо.
Тому ми рекомендуємо звернути увагу на інші позначені проблеми. Ви можете виправити цю, поки займаєтесь іншими.
10. Зображення правильного розміру
Якщо на вашому веб-сайті багато зображень, вони можуть значно затримати завантаження сторінки, особливо якщо вони неправильного розміру. Звіт про тест швидкості Google містить список усіх цих зображень разом із можливою економією в кібібайтах.
Цю помилку відносно легко виправити, оскільки все, що вам потрібно, це змінити розмір зображень. Ви можете зробити це такими способами:
- Стиснути зображення за допомогою онлайн-інструментів перед завантаженням їх на ваш веб-сайт.
- Відкладено завантажувати зображення поза екраном.
- Використовуйте відповідні формати зображень для кожного зображення, щоб підтримувати найкращу швидкість та якість завантаження.
- Використовуйте атрибут «srcset» для відображення зображень правильного розміру залежно від пристрою користувача.
11. Попереднє завантаження ключових запитів
На цьому етапі ви повинні знати, що під час рендерингу сторінки завантажується багато ресурсів. Однак, оскільки не всі вони є критичними, завантаження затримується.
Попереднє завантаження ключових ресурсів означає повідомлення браузерам, які ресурси завантажувати та відображати в першу чергу. Ключові ресурси – це все, що потрібно вашій сторінці на ранньому етапі завантаження. Зазвичай вони включають шрифти, але також можуть бути включені файли CSS, JS та HTML.
Попросіть розробника визначити критичні ресурси та позначити їх атрибутом «preload», щоб виправити цю помилку PSI.
12. Відкладення закадрових зображень
Завантаження всіх зображень на сторінці одночасно не дасть жодної користі, особливо якщо їх багато на сторінці. Браузер завантажує їх усі під час рендерингу сторінки. Це займає деякий час, залежно від кількості зображень, які у вас є.
Набагато кращий підхід – відкладати закадрові зображення – зображення, невидимі на екрані, за допомогою відкладеного завантаження. Це дозволяє вам пріоритезувати зображення, видимі в області перегляду користувача, та завантажувати решту за потреби.
Це зменшує час, необхідний для завантаження сторінки, та покращує взаємодію з користувачем.
13. Зменшення впливу стороннього коду
Сторонній код корисний, коли йдеться про моніторинг поведінки користувачів за допомогою інструментів аналітики та рекламодавців (наприклад, Facebook Pixel, Google Tag Manager тощо). Але, швидше за все, у вас є непотрібний код з інструментів та платформ, які ви більше не використовуєте.
Саме це спричиняє проблеми із завантаженням. Скрипти завантажуються, навіть якщо вони вам не потрібні.
Google PageSpeed Insights позначає сторонній код, який спричиняє затримку, та класифікує його для вашої зручності.
Однак вам слід постійно стежити за своїм веб-сайтом на наявність невикористаних сторонніх інструментів та видаляти весь код, пов’язаний з ними.
Використовуйте PageSpeed Insights у Magento
Якщо ви керуєте своїм магазином на Magento, намагаючись підвищити свій рейтинг, швидкість веб-сайту може бути найбільшою перешкодою. Але це не обов’язково має бути так, коли є тест Google PageSpeed Insights. Ви отримуєте всі дані, необхідні для досягнення «зеленого» балу, з детальною інформацією про те, що і де потрібно покращити.
Завдання полягає в тому, щоб впровадити всі ці пропозиції, особливо без технічної освіти.
Саме для цього існує . Він вирішує всі поширені проблеми PSI, оптимізує зображення та покращує коучинг. Все це для того, щоб ви могли досягти найвищих результатів з мінімальними зусиллями або взагалі без них.
Оскільки інструмент повністю автоматичний, вам просто потрібно налаштуйте це один раз та стежити за змінами.
