За останніми даними, близько 60-70% світового веб-трафіку припадає на мобільні пристрої. В епоху Mobile-First Indexing від Google вже важко уявити сайт, який не має адаптивного дизайну. Тим не менш, більшість веб-ресурсів містять помилки та недоліки, які знижують зручність використання (UX) та конверсію. У цій статті ми розглянемо найбільш поширені проблеми мобільної оптимізації, які можуть бути присутні і на вашому сайті.
Але для початку важливо розуміти, що цілі мобільної оптимізації лежать у двох площинах. В першу чергу, ваш сайт повинен бути максимально зручним і зрозумілим для кінцевих користувачів, оскільки їхній комфорт напряму впливає на конверсію та прибуток. У другу чергу, якщо ви розраховуєте на трафік з Google, необхідно суворо дотримуватись його вимог до адаптивності, які також напряму пов'язані зі зручністю використання, щоб забезпечити високий рейтинг у пошуковій видачі.
Для повної ясності зазначимо: у цій статті ми не будемо детально розбирати загальні проблеми продуктивності, характерні для обох версій сайту (наприклад, надмірне підключення файлів стилів та скриптів). Такі глобальні технічні проблеми на мобільних пристроях, звісно, посилюються через обмеження у швидкості та потужності.
Горизонтальна прокрутка
Горизонтальна прокрутка може мати два прояви:
Горизонтальна прокрутка всієї сторінки
Це неприпустима і серйозна проблема. Вона виникає або в результаті помилки верстки, або якщо ширина якогось контенту сторінки (наприклад, таблиці) ширша, ніж ширина екрана.
Це проблема не лише зручності для людей. Google не просто "може вважати" такий сайт неадаптивним, він гарантовано знизить його у видачі, оскільки це пряме порушення базових принципів Mobile-First Indexing.
Горизонтальна прокрутка контенту.
Горизонтальна прокрутка контенту — це не обов'язково проблема, а іноді — єдине розумне рішення для відображення контенту, перевантаженого даними. Найчастіше ми зустрічаємо горизонтальну прокрутку контенту у слайдерах зображень (де це є частиною навігації) або на сторінках порівняння товарів (де необхідно показати багато стовпців)
Але бувають і проблемні приклади, де прокрутка використовується як "милиця". Наприклад, таблиця списку товарів на сторінці оформлення замовлення часто має непотрібну горизонтальну прокрутку. Замість цього, для мобільних пристроїв такі таблиці мають бути перебудовані.
Також це стосується й інших інтерфейсів, які подаються у вигляді таблиць, так само як і таблиці, вставлені в контенті.
Якщо у вас на сайті є горизонтальна прокрутка, переконайтеся, що це викликано необхідністю і немає хорошої можливості подати цей контент у зміненому вигляді під мобільні пристрої.
Некоректне відображення елементів сторінки
Часом елементи сайту на деяких роздільних здатностях екрана відображаються неправильно, негарно і незручно. Найчастіше ми бачимо це у шапці сайту, де щільність елементів (логотип, навігація, кнопки, контакти) максимальна. Наприклад, пункти меню можуть відображатися в кілька рядків, або елементи починають наїжджати один на одного, роблячи сторінку непридатною для використання
Найбільш поширена причина цього — слабке опрацювання адаптивності. Часто, для економії, верстка обмежується лише парою ключових роздільних здатностей (наприклад, 1920px для десктопа та 360px для мобільного), повністю ігноруючи проміжні точки. В результаті, якщо користувач відкриває сайт на "нестандартній" роздільній здатності (наприклад, на невеликому ноутбуці або якщо відкрити браузер не на всю ширину екрана, або ж відкрити у браузері бічну колонку закладок), макет ламається. Адаптивний дизайн повинен бути плавним і виглядати коректно на всіх роздільних здатностях екрана.
Другою причиною некоректного вигляду може бути зміна контенту на непередбачений версткою. Якщо розробник передбачив коректне відображення меню з п'яти коротких пунктів, але згодом адміністратор додав ще три пункти з довгими назвами, навігація гарантовано "попливе". Це підкреслює необхідність регулярного тестування адаптивності після кожного оновлення контенту.
Проблемою може бути не лише нестача місця. Часто сайту не задають максимальну ширину. В результаті, якщо відкрити сайт на широкоформатному моніторі його контент починає розповзатися і також виглядати некоректно.
Оптимізація зображень
Зображення — це, як правило, найбільш "важкі" файли сайту, які можуть радикально уповільнити його завантаження, особливо в умовах нестабільного або повільного мобільного інтернету. Коли на смартфон завантажуються ті ж файли, що й на десктоп, ми витрачаємо ресурси користувача на завантаження зайвих пікселів, які все одно не будуть видні на маленькому екрані. Але у випадку із зображеннями, у нас є можливість завантажувати на смартфон інші файли.
Для цього ми можемо використовувати властивість css background і тег html <picture>. На жаль, в обох випадках виникає необхідність працювати з кодом, оскільки ні текстові редактори, ні функціонал cms все ще не надає можливості працювати з цим.
Тим не менш, ігнорувати це не потрібно. Особливо у випадку з великими банерами та фоновими зображеннями. Завантаження спеціально адаптованого (або повністю альтернативного) зображення на смартфон дозволяє не лише прискорити завантаження LCP (Largest Contentful Paint), але й подати контент у зручному та читабельному вигляді. Наприклад, на мобільному можна використовувати банер з вертикальною орієнтацією та більш великим текстом.
Реалізація адаптивності за допомогою JavaScript
Реалізація адаптивності за допомогою JavaScript має ряд недоліків. Тим не менш, така реалізація не є рідкістю.
Не справжня адаптивність.
Адаптивність за допомогою JavaScript орієнтується не на ширину вікна браузера, а на підпис (ім'я) мобільного браузера. Через це, вона не спрацює, якщо сайт відкрити на десктопному пристрої і зменшити розмір вікна браузера.
Погіршення SEO.
Хоча Googlebot вміє виконувати JavaScript, це відбувається пізніше і більш ресурсозатратно, ніж обробка чистого HTML/CSS. Якщо JS-файл занадто великий або виконується довго, Google може проіндексувати сторінку не повністю або некоректно оцінити її адаптивність.
Якщо важливий контент або структура сторінки генеруються виключно JS (що часто буває у випадку JS-адаптації), є ризик, що Googlebot його пропустить, що призведе до втрати трафіку.
Додаткове навантаження.
JavaScript — це мова програмування, яка обробляється браузером. Якщо на пристрої користувача недостатньо вільних обчислювальних ресурсів, то крім завантаження файлів сайту, користувач може ще чекати виконання скриптів.
Проблеми навігації сайту
Реалізація зручної та зрозумілої навігації великого сайту може бути складним завданням навіть для десктопної версії. Зручна навігація для мобільної версії — це виклик, з яким не завжди справляється навіть досвідчена команда.
Меню
Серед найбільш поширених проблем мобільного меню ми відзначимо наступні:
- Неповна структура мобільного меню
- Незрозуміле відображення дерева каталогу
- Занадто дрібний шрифт і надто близьке розташування пунктів, що викликають помилки натискання
Хлібні крихти
Хлібні крихти можуть взагалі бути відсутні або ж бути занадто довгими, внаслідок чого вони можуть не поміщатися в один рядок і розташовувати клікабельні елементи занадто близько при розташуванні в кілька рядків.
Пошук
Базовий функціонал пошуку від CMS часто буває недостатнім і вимагає доопрацювання. Як мінімум, слід передбачити "Живий пошук" з пропозиціями шукати за назвою товару або назвою категорії.
В ідеалі ж, над пошуком можна працювати дуже довго і глибоко. Можна збирати історію пошуку і на її основі робити підказки, вчити пошук працювати з синонімами, розуміти помилки введення, працювати зі швидкістю пошуку та сортуванням результатів. Або ж можна підключати до сайту сторонній пошук, з таким функціоналом.
Розташування навігаційних елементів
Нелогічне розташування навігаційних елементів і часто необхідних розділів меню може сильно ускладнити використання сайту.
Фільтр
Логіка роботи фільтра на десктопних і мобільних пристроях повинна відрізнятися.
На десктопних пристроях правильно буде запускати фільтрацію одразу при виборі опції. На мобільних пристроях через те, що процес фільтрації може тривати довше і викликати оновлення сторінки із закриттям вікна фільтрів, більш правильним буде вибирати всі необхідні опції, а процес фільтрації запускати при підтвердженні користувачем.
Core Web Vitals
І звичайно потрібно враховувати метрики Core Web Vitals, які є факторами ранжування Google.
Largest Contentful Paint (LCP) - час відображення найбільшого контенту.
LCP вимірює час, необхідний для відображення найбільшого елемента (зображення, відео або великий текстовий блок) на першому екрані. Це головний показник швидкості завантаження, оскільки він визначає, коли користувач бачить, що сторінка дійсно почала працювати.
Для того, щоб знизити LCP, найбільш важливо зробити наступне:
- Оптимізувати Час відповіді сервера (TTFB)
Поки сервер не відповість та не відправить браузеру HTML-документ, завантаження елементів сторінки та рендеринг не почнеться.
Детальніше про це тут - Оптимізувати найбільший контент першого екрана.
Зазвичай це зображення або відео. Про оптимізацію зображень ми вже писали вище. Якщо ж у вас на сторінці завантажується відео, то краще не завантажувати його разом зі сторінкою. Ви можете завантажити зображення-заглушку, а при кліку на неї вже завантажиться відео. - Налаштувати попереднє завантаження
Можна налаштувати попереднє завантаження медіа-контенту, шрифтів або інших файлів.
Interaction to Next Paint (INP) - затримка до наступного відображення після взаємодії.
INP вимірює час від початку взаємодії користувача (клік, натискання) до моменту, коли браузер візуально оновив сторінку, відобразивши результат цієї дії. INP оцінює загальну швидкість реакції (відгуку) сторінки протягом усього сеансу роботи користувача.
Іншими словами, INP — це час, протягом якого після вашого кліка нічого не відбувається.
Зустрічається таке не часто і є результатом використання занадто складних і довго оброблюваних скриптів. Хоча, на сайтах з надмірним використанням JS-фреймворків, INP може бути суттєвим.
Cumulative Layout Shift (CLS) - сукупне зміщення макета
CLS вимірює суму всіх несподіваних зрушень (стрибків) видимих елементів сторінки під час завантаження. Це показник візуальної стабільності сторінки
Такі зміщення спостерігаються, коли розміри блоків задаються контентом, наприклад, зображеннями, а розмір самих зображень не вказаний. В результаті, браузер не може зарезервувати місце під зображення, а коли зображення вже завантажиться, все, що нижче нього, зміщується вниз.
Ще це часто спостерігається при розміщенні на сайті банерної реклами, якщо банери завантажуються вже після завантаження сторінки, а місце під них макетом не зарезервовано.
Рішенням цієї проблеми буде вказання розмірів для медіа-контенту і для блоків, розміри яких при завантаженні можуть відрізнятися від фінальних.
Мобільна оптимізація — це не витрати, а інвестиції. Усунувши ці недоліки, ви не просто покращуєте показники Core Web Vitals, але й забезпечуєте користувачам комфорт, який конвертується у зростання продажів та лояльність.
Звертайтеся до нас за комплексною доробкою та оптимізацією Доопрацювання сайтів