Як вашому сайту отримати оцінку 100 зі 100 від Google. Три кроки, інструменти та кейс AmoMama

Коротко про трафік та Core Web Vitals

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

• соціальних мереж; 
• органічного пошуку; 
• реферального джерела;
• просто вписавши назву сайту в адресний рядок (прямий трафік);
• інших незначних джерел.

Ідеальні пропорції трафіку — розподілення по 25% на перші чотири джерела. Така диверсифікація зменшує залежність порталу від проблем з осередками трафіку та захищає від сильних просідань. Проте подібна ситуація складається дуже рідко. 

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

У травні 2020 року в Google анонсували введення групи метрик, за якими вони оцінюють якість сайтів з технічної точки зору, — так звані Core Web Vitals. Ці показники дають змогу зрозуміти, наскільки сайт швидкий, комфортний для користування і стійкий до навантажень. Вони, в першу чергу, оцінюють досвід користувача при завантаженні сторінки, а саме: 

• LCP (Largest Contentful Paint) — швидкість завантаження «найважчого» контенту сторінки;
• CLS (Cumulative Layout Shift) — зсув елементів сторінки протягом усього перебування користувача на ній;
• FID (First Input Delay)  — як швидко сторінка може реагувати на певну взаємодію з користувачем. 

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

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

Тому відповідність стандартам Core Web Vitals стало першочерговим завданням. Наразі в Amomama ці показники досягли позначок 98 пунктів для мобільної версії зі 100 можливих, а також 100 зі 100 для веб. Швидкість завантаження сторінок перебуває у проміжку від 0 до 0,6 секунди. 

Перші підходи та нові сайти

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

• створити найкращий з можливих досвід для читачів;
• донести наші історії до ще більшої аудиторії. 

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

Ми відпрацювали декілька підходів у спробах налаштувати сайти щодо Core Web Vitals. Спочатку намагалися оптимізувати стару версію сайту. Раніше за цим принципом ми готувалися до будь-яких core-апдейтів Google. Тоді підхід себе виправдовував, бо локальні роботи з сайтом дозволяли пристосуватися до зміни алгоритму видачі. Ми не втрачали в трафіку, а деколи навіть нарощували його.

Проте у цьому разі стало очевидним, що, попри всі старання, ми не зможемо стабільно перебувати у зеленій зоні Google. Тому вирішили створити повністю нові сайти:

1. Це дало нам змогу застосувати найновіші технології у написанні сайтів. 
2. Одразу враховувати вимоги Google та технічно їм відповідати. 

Щоб перенести всі мовні версії на нову архітектуру без ризику для роботи знадобилося близько півроку. Варто зазначити, що вдосконалення в цьому напрямі ведуться постійно. Повсякчас з’являються нові метрики, як-от INP Interaction to Next Paint Метрика, яка вимірює швидкість відгуку сторінки. та TTFB Time to First Byte Час між запитом сторінки браузером і отриманням першого байта інформації від сервера. .

Всього у Amomama чотири мовні версії: англійська (основна), французька, іспанська та німецька. Імплементація нової архітектури відповідно йшла чотири тижні. Ми почали з німецької, бо у неї на той момент була найменша аудиторія. У разі виявлення багів репутаційні наслідки були б найменші. Після переїзду на нову версію сайту його тиждень тестували та виправляли всі помилки. Поступово перехід відбувся на всіх сайтах. Останньою була американська версія. При імплементації на неї вже всі баги були виправлені. 

Етапи оптимізації

Щоб оптимізувати сайт та почати виглядати конкурентоспроможним в очах Google, спершу варто визначити, для чого саме він потрібен бізнесу: 

1. Швидкість та безперебійність сайту для якоїсь однієї цільової дії, наприклад, покупки. Це можуть бути сайти онлайн-магазинів або інших сервісних установ.
2. Відповідати усім ключовим метрикам Google, щоб вебсайт був зручним у використанні для користувача. Тобто, стати ресурсом, який повністю фокусується на відвідувачі сайту. Це частіше медіаресурси, стримінги, інформаційні портали.

Ми обрали для себе другий варіант. Цілком і повністю відповідати Core Web Vitals, щоб задовольняти користувачів. 

Наступний пункт — фокус на цінність, яку може принести високий перформанс сайту. Перш за все, це орієнтованість на користувача. Що зручніше у вас на сайті, тим більша ймовірність повернення. 

Коли потреби і цінність визначені, можна переходити до наступного етапу — аудиту поточного стану сайту. Далі — розробка та втілення рішень, щоб ліквідувати знайдені проблеми. Тут ми проаналізували залежність проєкту від різних javascript-пакетів, що не застосовувались. Плюс перевірили інші технічні залежності, що підключаються при завантаженні сторінок. Якщо використовуєте Webpack Webpack Пакувальник з відкритим кодом статичних модулів для сучасних додатків JavaScript. , то для цього є чудовий плагін — Webpack Bundle Analyzer. Після білда проєкту він покаже, з яких скриптів складається ваш бандл. 

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

Плюс виявили випадки, коли з бібліотеки, що підключається, використовувалася тільки невелика частина. Наприклад, з humps ми використовували лише одну функцію в одному місці в проєкті. При цьому щоразу в бандл потрапляло зайвих 2 КБ усієї бібліотеки. Тому ми:

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

Не виключено, що на третьому етапі вам знадобиться креативна технічна команда, бо вирішення огріхів у роботі сайтів буває неочевидним. Зверніть увагу, що швидкість завантаження не завжди залежить від ваги зображень, які додані на сторінку, або кількості графічних елементів, з яких складається дизайн. Деякі метрики досить підступні. Вони потребують глибокого розуміння технічної взаємодії між зовнішнім виглядом сайту, його функціональністю та внутрішньою архітектурою «движка».

Постійна пильність

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

Якщо ви одного разу ввійшли у «зелену зону» Google, це не означає, що ці значення метрик з вами назавжди:

1. У роботі сайтів постійно виникають помилки та щось ламається. 
2. Рекомендації технічної команди не завжди виконуються. 
3. Вимоги Google постійно змінюються. 

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

Реклама у Vector

Знайшли помилку? Виділіть її і натисніть Ctrl+Enter