Результат Lighthouse SEO: 100 на сторінці категорії електронної комерції
Отримати результат Lighthouse SEO 100 на крихітній статичній сторінці легко. Набагато складніше зробити це на реальній сторінці категорії електронної комерції з картками товарів, зображеннями, цінами, статусом наявності, фільтрами, канонічними посиланнями, структурованими даними та бекендом, який все ще має надавати актуальні комерційні дані.
Я запустив Lighthouse 17 червня 2026 року для `https://www.cigge.se/e-cigaretter/engangs-vape`. Результат для десктопів був ідеальним у всіх категоріях: 100 Продуктивність, 100 Доступність, 100 Найкращі практики та 100 SEO. Результат для мобільних пристроїв також виявився високим: 97 Продуктивність, 100 Доступність, 100 Найкращі практики та 100 SEO.
Це не означає, що зі сторінкою «все готово» в плані SEO. Це означає, що технічна база достатньо міцна, щоб робота з SEO могла зосередитися на контенті, намірах користувачів, внутрішніх посиланнях, комерційних даних та авторитеті, а не на боротьбі з пошкодженою розміткою, повільним рендерингом або заплутаними сигналами сканування.
Результат
| Аудит Lighthouse | Десктоп | Мобільний |
|---|---|---|
| --- | ---: | ---: |
| Продуктивність | 100 | 97 |
| Доступність | 100 | 100 |
| Найкращі практики | 100 | 100 |
| SEO | 100 | 100 |
Тестована URL-адреса була реальною діючою сторінкою категорії електронної комерції, а не спрощеним демо-маршрутом. Це має значення. Сторінки категорій зазвичай є тим місцем, де headless електронна комерція вперше стає заплутаною.
Серед шведських сайтів електронної комерції з продажу вейпів, з якими я працював або які тестував, я не бачив швидшого результату для сторінки категорії. Я назвав би його найшвидшим вейп-сайтом у Швеції лише після контрольної порівняльної оцінки конкурентів, але ця сторінка є серйозним претендентом: ідеальні результати Lighthouse на десктопі, 97 продуктивності на мобільних пристроях та реальні комерційні дані на сторінці.
Сторінка деталей продукту має один головний товар. Сторінка категорії має багато товарів, багато зображень, сортування, фільтри, пагінацію, наявність товару, зміни цін, маркетинговий текст та внутрішнє посилання. Сторінка має одночасно обслуговувати покупців, пошукові системи та команду CMS.
Що доводить результат Lighthouse SEO
Lighthouse — це інструмент автоматизованого аудиту від команди Google Chrome. Він перевіряє продуктивність, доступність, найкращі практики, SEO та інші сигнали якості веб-сайтів. Google PageSpeed Insights також використовує Lighthouse для лабораторної діагностики.
Зелений результат не є гарантією високого рейтингу. Власна документація Google вважає показник 90 і вище хорошим, а ідеальні 100 — важко підтримуваними, коли сторінка містить реальні дані про продукти та продакшн-скрипти.
Тому я сприймаю цей результат Lighthouse SEO як технічний доказ, а не як привід для святкування. Сторінка проходить базові перевірки, які часто блокують SEO для електронної комерції: HTML, доступний для сканування, належні метадані, доступна структура, стабільна продуктивність та відсутність очевидних помилок браузера або безпеки.
Чому електронна комерція ускладнює це завдання
Сторінки електронної комерції створюють режими збою SEO, які не проявляються на простих маркетингових сторінках.
Сітки продуктів можуть містити занадто багато JavaScript. Зображення продуктів можуть знищити продуктивність, якщо вони не мають правильного розміру та пріоритету. Фільтри можуть створювати пастки для сканування. Пагінація може розділяти сигнали. Описи CMS можуть порушувати структуру заголовків. URL-адреси варіантів можуть створювати дублікати сторінок. Оновлення наявності можуть змушувати до масового очищення кешу. URL-адреси зображень бекенду можуть витікати локальні або приватні шляхи. Структуровані дані можуть відходити від того, що бачить покупець.
Один слабкий шар може затягнути вниз усю сторінку.
Цей результат було досягнуто завдяки розгляду сторінки категорії як системи, а не як шаблону з кількома мета-тегами. Той самий системний погляд лежить в основі моєї роботи над масштабуванням електронної комерції з Next.js→.
Робота з SEO, що стоїть за результатом
Важлива робота була виконана до запуску Lighthouse.
Ми очистили канонічні посилання категорій, щоб перша сторінка та маршрути пагінованих категорій мали узгоджену основу. Це зменшує плутанину щодо дублювання сторінок і не дозволяє пагінації конфліктувати з основною URL-адресою категорії.
Ми відновили резервний шаблон H1, коли редагований опис категорії не надає його. Це звучить незначно, але відсутність H1 була одним із найочевидніших технічних дефектів SEO в даних сканування.
Ми виправили обробку походження карти сайту, щоб публічні URL-адреси вирішувалися з правильного походження вітрини, а не витікали припущення бекенду. Карта сайту має бути нудною. Якщо вона містить неправильні хости, URL-адреси, що не індексуються, або заблоковані URL-адреси, вона марнує увагу сканування.
Ми посилили локалізовані канонічні посилання та зворотні посилання hreflang. Багатомовне SEO для електронної комерції зазнає невдачі, коли кожна мова вказує назовні, але не отримує відповідного зворотного шляху.
Ми також зміцнили структуровані дані про продукти та продавців. Схема електронної комерції має відповідати реальності: продукт, пропозиція, наявність, деталі продавця та деталі доставки мають узгоджуватися зі сторінкою та станом бекенду.
Очищення сканування було важливішим за один результат
Скріншот Lighthouse є чистим артефактом, але глибша цінність SEO прийшла з виправлень сканування навколо нього.
Подальший технічний аудит чітко показав напрямок:
| Тип проблеми | До | Після |
|---|---|---|
| --- | ---: | ---: |
| URL-адреси, заблоковані Robots | 1,612 | 7 |
| Відсутні H1 | 999 | 67 |
| URL-адреси, що не індексуються, у карті сайту | 1,185 | 14 |
| Відсутні зворотні посилання hreflang | 102 | 4 |
| Множинні H1 | 245 | 2 |
| Непослідовна структура H1 | 2,529 | 2 |
Це числа, які хвилюють мене більше, ніж зелені кола. Lighthouse каже мені, що сторінка проходить високоякісну лабораторну перевірку. Дані сканування кажуть мені, що сайт стає легшим для розуміння пошуковими системами в масштабі.
Продуктивність вимагала дисципліни кешування
Результат продуктивності з'явився не завдяки одному налаштуванню зображення.
Вітрина використовує фронтенд Next.js поверх бекенду PrestaShop. Така настройка забезпечує швидкість, коли межі кешу чіткі, і біль, коли анулювання занадто широке.
Ми перейшли до Scoped invalidation замість очищення всього сайту. Події продуктів, події наявності, зміни категорій, оновлення виробників, зміни зображень, редагування CMS та події блогу/завантаження не потребують однакового радіусу дії. Коли подія наявності очищає всю вітрину, користувачі платять за це повільнішими сторінками та холоднішими кешами.
Краща модель проста: анулюйте найменший корисний набір тегів кешу, а потім дозвольте фронтенду продовжувати швидко обслуговувати стабільні сторінки категорій та продуктів. Той самий інженерний шаблон проявляється в моїй роботі над користувацькою CRM CMS з Next.js→: надайте редакторам можливості, не дозволяючи динамічним даним пошкодити фронтенд.
Саме тому сторінка категорії може містити реальні дані електронної комерції і все ж досягати 100 продуктивності на десктопі та 97 на мобільних пристроях.
Чистий HTML все ще має значення
Сучасні команди електронної комерції часто розглядають SEO як метадані плюс схема. Це занадто вузько.
Сторінка все ще потребує семантичного HTML. Їй потрібен один логічний H1. Їй потрібен текст категорії, який можна редагувати, не порушуючи документ. Їй потрібні посилання на продукти, які рендеряться як посилання. Їй потрібні зображення з правильними розмірами та альтернативним текстом. Їй потрібні канонічні URL-адреси, які не змінюються через те, що стан фільтра або пагінації потрапив у неправильний шар.
Саме тут має значення робота з PageBuilder та форматованого тексту. Редактор CMS має полегшувати створення контенту, а не створювати неправильно сформований HTML категорії. Робота з редактором Tiptap React→ допомогла зробити редаговані блоки практичними, водночас поважаючи правила HTML та безпеки вітрини.
Те саме правило застосовувалося, коли я перебудовував старі системи контенту під час міграції headless WordPress→: зберігайте гнучкість редагування, але робіть публічний HTML передбачуваним.
Чого я не стверджую на основі цього
Я не стверджую, що результат Lighthouse SEO 100 означає, що сторінка посіде перше місце в рейтингу.
Пошукові рейтинги все ще залежать від наміру запиту, асортименту продуктів, цін, довіри до бренду, внутрішніх посилань, зворотних посилань, якості контенту, поведінки користувачів та того, як Google інтерпретує весь сайт.
Я також не використовував би Lighthouse як єдине джерело даних про продуктивність. Лабораторні результати корисні, тому що вони відтворювані. Польові дані мають значення, тому що вони походять від реальних користувачів на реальних пристроях і в реальних мережах.
Чесне твердження є вужчим і сильнішим: ця сторінка категорії електронної комерції пройшла суворий технічний контроль якості, залишаючись при цьому комерційною сторінкою.
Практичний висновок
Для SEO електронної комерції я хочу, щоб технічна платформа не заважала.
Це означає, що сторінки категорій рендерять корисний HTML. Канонічні посилання та карти сайту розповідають одну історію. Hreflang є взаємним. Дані про продукти та структуровані дані збігаються. Кеші залишаються теплими після невеликих змін у бекенді. Редактори можуть додавати контент, не пошкоджуючи структуру сторінки. Зображення завантажуються швидко, не приховуючи продукт.
Коли ці частини узгоджуються, стає можливим отримати такий результат Lighthouse SEO. Що важливіше, команда SEO може витрачати час на роботу, яка дійсно дає累积ний ефект: контент, охоплення продуктів, внутрішні посилання, конверсія та авторитет.
Я розглядаю результат Lighthouse як доказ якості інженерії. Результат — це видима частина. Цінність — це система, що стоїть за ним.