Як вдало пройти Google PageSpeed в погоні за оптимізацією сайту eCommerce?

Про автора: Вячеслав Андрощук, бекенд-розробник зі стажем роботи 10+ років. На його рахунку безліч сайтів eCommerce й тисячі годин технічної підтримки складних рішень, після чого навантаженні сайти працюють чітко, як швейцарські годинники. 

Перед розробниками часто постає задача — зробити час завантаження сторінки якомога меншим. Власники веб-ресурсів, інтернет-маркетологи в якості еталонної метрики, зазвичай, ставлять в приклад оцінку від інструмента Google — PageSpeed Insights, а саме, так звану “зелену зону” з оцінкою 90+. Давайте ж детальніше розберемося, що ж являє собою цей інструмент, на які показники звертає увагу та як їх можна покращити.

Про швидкість завантаження

Нагадаю, що швидкість завантаження сторінки сайту — це час, що потрібно для повного завантаження вмісту сторінки у браузері користувача. Цей показник визначається рядом факторів і може мати значний вплив на досвід користувача, Швидкість завантаження веб-сторінки вимірюється мілісекундах і зрозуміло: чим цей показник менший, тим краще. Популярними інструментами для вимірювання швидкості завантаження є Google PageSpeed Insights, GTmetrix, Pingdom та інші.

Швидкість завантаження сторінки сайту може бути вплинута різноманітними чинниками, включаючи розмір файлів, оптимізацію коду, швидкість сервера та інші. Погана швидкість завантаження може призвести до погіршення користувацького досвіду, збільшення відсотку відмов (відвідувачі, які виходять без дослідження інших сторінок сайту) та зниження конверсії. Google та інші пошукові системи враховують швидкість завантаження сторінок сайту як один з факторів ранжирування. Швидкість завантаження може вплинути на позиції вашого сайту в пошукових результатах, особливо на мобільних пристроях. Покращення швидкості завантаження може позитивно вплинути на SEO вашого сайту та забезпечити кращий трафік. Компанія Авіві багато років займається розробкою ефективних рішень інтернет-магазинів, де швидкість відіграє ключове значення. Використання платформи Magento 2 частково полегшує роботу з оптимізації. Однак залишати питання швидкості напризволяще неприпустимо для будь-якого інтернет-сату, тому в технічної підтримки завжди є пов’язані з цим завдання. 

Про PageSpeed Insights

PageSpeed Insights — інструмент, що надає оцінку взаємодії користувача з веб-сторінкою на десктоп та мобільних пристроях, а також надає рекомендацію по покращенню сторінки. 

Показники, що враховує PageSpeed Insights:

Largest Contentful Paint (LCP) — показник, який демонструє час рендерингу найбільшого зображення, або текстового блоку, видимих в області перегляду сторінки.

Cumulative Layout Shift (CLS) — показник найбільшої кількості зміни макету, за період формування сторінки. Чим менший показник, тим краще.

Time To First Byte (TTFB) — час отримання першого байту даних браузером від сервера. Чим менший показник, тим краще.

First Contentful Paint (FCP) — час від переходу користувача на сторінку до перших відображуваних даних (текст, зображення).

Interaction to Next Paint (INP) — час реагування браузером на інтерактивні дії користувача (кліки по лінках, кнопках і тд).

Дії для оптимізації швидкості сайту

Саму ж оптимізацію, як всю веб-розробку, можна розбити на 2 частини:

• бек-енд — робота на стороні сервера);

• фронт-енд — (робота на стороні клієнта). 

В першу чергу, нам потрібно налаштувати серверну частину, для PageSpeed Insights — це показник TTFB. 

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

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

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

HTML

• по можливості скоротити розмір html коду, та уникати глибокої вложеності об’єктів, для того, щоб браузер витрачав менше часу на рендер сторінки. Особливу увагу потрібно звертати на глибину вкладеності HTML коду. Дуже важливий показник для оцінки моб версії.

Javascript.

• підключати js потрібно у мініфікованому вигляді; 

• по можливості, винести весь JS у футер або використовувати відкладене завантаження;

• на сторінках підключати лише той js, який використовується. 

Зображення

• використовувати lazyload для усіх зображень, які знаходяться у попапах та у невидимій зоні сторінки;

• зображення повинні бути оптимізовані стиснені;

• у тега img повинні бути проставлені атрибути width та height, для того, щоб браузер додатково не розраховував їх.

CSS

• підключати мініфіковані css файли;

• чистити CSS від лишнього коду, а саме код під старі версії браузерів та прибрати префікси -webkit-, -moz-, -o-, -ms-;

• на сторінках підключати лише той css, який використовується безпосередньо на сторінці.

Підсумовуючи усе вище сказане, хочеться звернути увагу на те, що до оцінки від Google PageSpeed холодною головою, і не гнатися 100% за будь-яку ціну. Для просування сайту сама оцінка є далеко не ключовим фактором в просуванні ресурсу. Тому жертвувати функціональністю заради оцінки не варто. А ті рекомендації з оптимізації, про які я писав вище, дозволять якщо і не 100% отримати, то достойна оцінка буде — тут все залежить від самого ресурсу та його функціональності.