Перевірка мобільної версії сайту онлайн: безкоштовний тест адаптивності
Коли ви відкриваєте сайт на телефоні і бачите, що текст розповзається за край екрана, а кнопка «Купити» поруч із «Видалити» і ви щоразу тицяєте не туди, проблема майже завжди не в дизайнері. Вона в налаштуваннях сторінки, які видно лише коду та правильно побудованому тесту. Саме тут і працює перевірка адаптивності сайту: інструмент завантажує сторінку так, як її запитує смартфон, і показує, що саме заважає на вузькому екрані. Для керівника, маркетолога чи власника невеликого магазину це питання не естетики, а грошей, адже сторінка, яку неможливо зручно прочитати й натиснути з телефона, тихо втрачає відвідувачів до того, як вони щось купили.
Google давно індексує сайти мобільним Googlebot, тобто в пошуковий індекс потрапляє саме та версія сторінки, яку бачить телефон. Якщо на мобільній версії зникли блоки з описом товару, урізано навігацію або сховано посилання, для пошуку їх фактично не існує. Тому перевірка мобільної версії сайту онлайн — це спосіб подивитися на власний продукт очима найбільшого сегмента трафіку, а не очима розробника на широкому моніторі.
Що саме перевіряють інструменти
Під словом «адаптивність» ховається кілька окремих технічних речей, і їх варто розрізняти. Перша — тег viewport. Це рядок у розділі head, який каже браузеру телефона, що ширину екрана треба брати від пристрою, а не малювати сторінку як десктопну шириною близько 980 пікселів і потім зменшувати. Без нього навіть ідеально написаний CSS не спрацює, бо браузер просто не отримає сигналу, що сторінка розрахована на малий екран. Коректне значення зазвичай виглядає як ширина пристрою з початковим масштабом 1, і інструмент перевіряє саме наявність цього тегу та його розумні параметри.
Друга група — медіазапити в CSS. Вони визначають, за якої ширини екрана застосовуються інші правила розкладки: скажімо, при ширині менше 768 пікселів колонки ставатимуть одна під одною. Важливо, що брейкпоінти краще прив’язувати до реального вмісту, а не до списку популярних моделей телефонів. Модель пристрою змінюється щороку, а ширина контенту, при якій текст починає ламатися, залишається тією самою. Інструмент шукає наявність медіазапитів і оцінює, чи є вони взагалі, бо сайт без жодного медіазапиту майже напевно розрахований лише на настільний екран.
Третя — фіксована ширина елементів. Тут і з’являється найбільше проблем. Контейнер із жорстким значенням у пікселях, наприклад 1200 пікселів, на екрані 375 пікселів дає горизонтальну прокрутку, і ніякий медіазапит у більшості випадків не допоможе, якщо сам блок не переписано на відносні одиниці. Інструмент фіксує блоки, ширші за 480 пікселів, як потенційне джерело переповнення, і це розумний поріг: усе, що перевищує його, на типовому смартфоні вже доведеться прокручувати вбік.
Далі йдуть елементи, які безпосередньо впливають на зручність. Дрібний шрифт змушує користувача розтуляти пальці, щоб щось прочитати, а цей жест багато хто ненавидить швидше за будь-яку іншу незручність. Крихітні кнопки й посилання створюють ризик випадкових натискань, особливо там, де поряд стоять дві дії з різними наслідками. Широкі таблиці, вбудовані iframe, застарілі плагіни типу Flash і фрейми ламають сторінку або взагалі не відображаються. Кожен із цих пунктів має свою вагу, і саме з них складається підсумкова оцінка.
Як читати оцінку і чому їй не варто сліпо довіряти
Оцінка від 0 до 100 — це сума восьми перевірок із відкритими вагами. Вище 85 балів сторінка виглядає адаптованою, від 60 до 84 — має проблеми, нижче 60 — ймовірно незручна. Водночас є важлива деталь: без meta viewport вердикт завжди звучить як «незручна на телефоні», незалежно від того, скільки балів набрано за решту пунктів. Спливаючі вікна й вага сторінки показуються лише як підказки і до суми не входять, бо вони стосуються швидше зручності й продуктивності, ніж структури адаптивної верстки.
Треба чесно визнати межі будь-якого онлайн-аналізу. Інструмент не виконує JavaScript, тож стилі й розмітка, які додає скрипт після завантаження, для нього не існують. Якщо сайт збирається на клієнті, як це буває в односторінкових застосунках, HTML, який віддає сервер, може бути майже порожнім, і оцінка вийде хибно низькою або неповною. Зовнішні стилі з чужих доменів, зокрема з CDN, теж можуть не враховуватися повністю. Тому тест треба сприймати як швидкий і зрозумілий розбір коду, а не як вердикт пошукової системи.
Знімок екрана важливіший за цифру: якщо на картинці видно обрізаний текст або смугу прокрутки внизу, довіряйте картинці, а не балам.
Саме тому практичний підхід полягає в поєднанні двох поглядів. Оцінка показує, що саме не так у коді, а знімок показує, як це виглядає насправді. Розбіжність між ними майже завжди вказує на динамічну частину сторінки, яку інструмент не побачив, і це вже сигнал перевірити її окремо в інструментах розробника.
Google Mobile-Friendly Test закрито: чим перевіряти тепер
У грудні 2023 року Google вимкнув власний Mobile-Friendly Test, його API та звіт про зручність для мобільних пристроїв у Search Console. Старе посилання тепер веде на документацію Lighthouse, і багато хто досі шукає «перевірка мобільної версії сайту» у пошуку саме за цим старим інструментом. Варто знати, що є кілька цілком робочих заміни, і вони відповідають на різні запитання.
- Lighthouse у Chrome DevTools відтворює сторінку в емуляції телефона і дає детальний аудит із пунктами про viewport, розмір шрифту й розміри елементів для натискання.
- PageSpeed Insights запускає той самий Lighthouse у хмарі та додає реальні дані користувачів Chrome про швидкість завантаження й стабільність сторінки, якщо сайт достатньо відвідуваний для їх накопичення.
- Режим пристрою в Chrome DevTools дозволяє подивитися сторінку очима вузького екрана, наприклад шириною від 360 до 430 пікселів, і швидко знайти елементи, що виходять за край.
- Онлайн-інструмент із балами та знімком iPhone дає швидку відповідь без реєстрації й без встановлення чогось на комп’ютер.
Кожен із цих варіантів має сенс у свій момент. Для швидкого розбору перед запуском підійде онлайн-тест, для глибокого аналізу причин — Lighthouse, а для розуміння, як поводиться сторінка під реальним навантаженням і з реальними людьми, — дані PageSpeed Insights. Здорового глузду тут достатньо: не шукайте одну кнопку, яка скаже все за вас, а використовуйте кілька інструментів на різних етапах роботи.
Типові помилки, через які сайт не адаптується
Найпоширеніша помилка — відсутній або хибний viewport. Буває, що тег дублюється в шаблоні теми й у плагіні, і браузер отримує два суперечливі значення. Інша типова ситуація — фіксовані пікселі в сітці замість відносних одиниць, коли верстка на широкому екрані виглядає бездоганно, а на телефоні розповзається. Третя — ігнорування того, що відбувається після завантаження скриптів, які змінюють розмітку, додають банери або розширюють меню. Сторінка, яка на першому кадрі виглядає нормально, через секунду може отримати блок, що виштовхує все вбік. Щоб швидко дізнатися, чи коректно працює тег viewport і чи адаптується сторінка під екран телефона, можна скористатися безкоштовним перевіркою адаптивності сайту онлайн, яка показує, як ресурс виглядає на мобільних пристроях різної ширини.
Є й помилки інтерпретації. Одна з них — довіра лише до загальної оцінки без перегляду конкретних елементів. Бал 78 нічого не скаже, якщо не відомо, що саме його знизило. Інша — перевірка лише головної сторінки, хоча проблеми часто ховаються в глибших шаблонах: сторінці товару, кошику, формі оформлення. Тому ключові сторінки варто перевіряти окремо, а не одну й вважати, що весь сайт однаковий.
Окремо стоїть плутанина між адаптивністю і швидкістю. Сторінка може бути ідеально верстана і при цьому повільно вантажитися на мобільному інтернеті, а може швидко відкриватися і мати зламану розкладку. Це два різних питання, і вирішуються вони різними інструментами. Коли їх змішують, виправлення йдуть не туди: людина оптимізує зображення, хоча проблема в ширині блоку, або переписує CSS, хоча справа в тяжкому скрипті.
Як зробити перевірку частиною роботи, а не разовою акцією
Перевірити сайт один раз перед запуском — недостатньо, бо будь-яке оновлення теми, новий плагін або нова рекламна сторінка можуть знову зламати розкладку. Розумний процес починається зі списку ключових сторінок: головна, каталог, картка товару, форма замовлення, сторінка оплати. Для кожної фіксуються результат, знімок екрана і список проблем. Після змін перевірка повторюється тільки для тих сторінок, які зачепила зміна, а раз на місяць проходить повний огляд.
Важливо також подивитися не лише на тест, а й на сценарій. Людина заходить із телефона, шукає товар, додає його в кошик, вводить адресу і оплачує. Кожен із цих кроків може мати свою незручність, якої немає в статичній перевірці: поле вводу, яке ховається за клавіатурою, або кнопка, що зникає під панеллю браузера. Тому після автоматичного аналізу варто пройти цей шлях самостійно на реальному телефоні, а також спробувати альбомну орієнтацію і збільшений розмір тексту в налаштуваннях пристрою.
Пріоритети теж потрібно визначити заздалегідь. Проблеми, які блокують покупку або реєстрацію, йдуть першими. Дрібні косметичні недоліки можна відкласти. Кожне виправлення варто фіксувати з поясненням, що зламалося і як це перевірили, інакше через півроку ніхто не згадає, чому в коді з’явилися дивні відступи.
Як пов’язати результати з поведінкою людей
Перевірка адаптивності має сенс лише тоді, коли її результати можна зіставити з тим, що роблять відвідувачі. Найпростіший спосіб — розділити аналітику за типом пристрою і подивитися, як поводяться користувачі телефонів: скільки з них йде одразу, скільки доходить до кошика, скільки завершують покупку. Якщо мобільний сегмент помітно гірший за десктопний, це сигнал дивитися на адаптивність і зручність, а не на рекламу чи ціну.
Є й другий бік — видимість у пошуку. Оскільки індексація орієнтована на мобільну версію, те, що приховано або урізано на телефоні, для пошукової системи стає невидимим. Тому перевірка адаптивності вписується не лише в дизайн, а й у загальну здатність сайту бути знайденим. Коли текст і посилання доступні на мобільній версії в повному обсязі, сторінка має більше шансів відповідати запитам, з якими на неї приходять.
Підсумок простий, хоч і не завжди легко реалізується. Адаптивний сайт — це не той, що «виглядає нормально» на вашому ноутбуці, а той, на якому людина з телефоном може прочитати, натиснути і купити без зайвих рухів. Онлайн-перевірка дає швидку відповідь, Lighthouse і PageSpeed Insights дають глибину, а знімок екрана показує правду. Регулярне повернення до цих інструментів після кожної зміни коштує значно менше, ніж втрачені клієнти, які пішли з телефона і не повернулися.