PageSpeed Insights: як підтримувати високу швидкість сайту

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

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

Чому швидкість сайту така важлива?

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

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

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

Розуміння показників PageSpeed Insights

Коли ви вводите URL-адресу в PageSpeed Insights, це дає вам два типи даних: лабораторні та польові.

Дані поля показують, як реальні користувачі відчувають ваш сайт. Він збирається протягом 28 днів за допомогою звіту про взаємодію з користувачем Chrome (CrUX). Це те, що дійсно важливо для вашого SE Лабораторні дані збираються в контрольованому середовищі, щоб допомогти вам налагодити проблеми.

Основними показниками, які слід спостерігати, є

• Перша змістовна фарба (FCP): час, необхідний браузеру для відтворення першого фрагмента тексту або зображення.
• Найбільша змістовна фарба (LCP): час, необхідний для того, щоб найбільший блок контенту став видимим.
• Сукупний зсув макета (CLS): вимірює, наскільки макет вашої сторінки зміщується під час завантаження.
• Взаємодія з наступною фарбою (INP): як швидко ваша сторінка відповідає після того, як користувач клацає або торкається чогось.

Поширені проблеми, які псують ваш рахунок

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

1. Рендер-блокуючі ресурси

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

2. Неоптимізовані величезні зображення

Зображення зазвичай складають найбільшу частину загальної ваги веб-сторінки. Завантаження зображення на 5 МБ для невеликого логотипу - це гарантований спосіб уповільнити все.Як виправити: завжди стискайте свої зображення за допомогою сучасних форматів, таких як WebP. Ви також повинні використовуватиloading="lazy"атрибут, тому зображення під складкою завантажуються лише тоді, коли користувач прокручує до них вниз. Завжди встановлюйте явну ширину та висоту на тегах зображень, щоб запобігти зміщенню макета.

3. Занадто багато невикористаного javascript

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

4. Повільний час відповіді сервера

Час до першого байта (TTFB) вимірює, скільки часу потрібно вашому хостинг-серверу, щоб повернути початковий HTML. Якщо ваш сервер працює повільно, всі інші оптимізації не матимуть великого значення.Як виправити: використовуйте швидкий веб-хост. Реалізуйте кешування на стороні сервера та використовуйте мережу доставки вмісту (CDN), щоб обслуговувати свій сайт із серверів, фізично ближчих до ваших користувачів.

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

Він запропонував конвертувати pg в ebp зображення для нашого веб-сайту, наприклад.

Алене засмучуйтеся, якщо ви не можете досягти 100%, насправді це дуже важко зробити. Якщо ваш веб-сайт складний, потрібно багато зображень, деякі конкретні бібліотеки js, ви можете подумати, що – більше немає чого оптимізувати, чому мій бал все ще становить 80-90%? Це абсолютно нормально. Якщо ваш веб-сайт знаходиться в “зеленій зоні”, це вже хороший знак. Крім того, результати можуть навіть відрізнятися на кілька процентних пунктів – без будь-яких змін –, якщо ви перевіряєте швидкість в інший час.
Однак ви все одно повинні намагатися максимізувати свою продуктивність, пройшовши та виправляючи кожну помилку в списку.

Чому наш сценарій перекладу підтримує вашу швидкість на високому рівні

Додаючи нові віджети на свій веб-сайт, ви повинні бути дуже обережними щодо продуктивності. Дуже часто плагіни перекладу знищують ваш рахунок PageSpeed. Вони часто завантажують масивні мовні бази даних на стороні клієнта, запускають великі затримки javascript і блокують рендеринг, поки вони з'ясовують, яку мову відображати.

Ми створили наш сценарій перекладу суворо з урахуванням продуктивності. Ось чому наше рішення полегшене та має мінімальний вплив на швидкість продуктивності:

• Крихітна межа корисного навантаження: наш основний сценарій неймовірно малий. Ми не об’єднуємо великі сторонні бібліотеки. Він додає лише кілька кілобайт до розміру вашої сторінки.
• Асинхронне завантаження: сценарій призначений для асинхронного запуску. Він ніколи не блокує ваш основний вміст від рендерингу.
• Глобальна доставка CDN: ми доставляємо сценарій і перекладений текст із глобальної мережі. Це означає, що дані проходять найкоротшу відстань до вашого відвідувача.
• Нативний DOM ін'єкції: замість того, щоб приховувати сторінку або створювати зміни макета, наш сценарій нативно вводить перекладені рядки без проблем. Він виконується за мілісекунди, тому ваш кумулятивний зсув макета ідеально залишається на нульовому рівні.

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