14 секретів мобільної оптимізації, які вивезуть ваш сайт на вершину

14 найкращих практик мобільної оптимізації, які вам потрібно знати

Google SEO UA

Оптимізація мобільного сайту: 14 найкращих практик, які не можна ігнорувати

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

Минуло вже кілька років відтоді, як Google запустив свій мобільний перший індекс. Тоді спеціалісти SEO почали активно працювати над тим, щоб їхні сайти відповідали основним веб- показникам Google (Core Web Vitals) та рекомендаціям щодо розробки мобільних сайтів.

Оптимізація для мобільного інтернету - це ціла окрема підгалузь SEO, яка потребує спеціальних знань та власних рекомендацій для досягнення успіху.

Настільки, що багато галузей вимагають повноцінної та якісної реалізації свого веб-сайту на мобільних пристроях. І далеко не всі справляються з цим завданням.

У багатьох випадках більшість сайтів не досягають своєї мети бути повністю оптимізованими.

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

96% американців віком від 18 до 29 років володіють смартфоном.
Станом на 2020 рік у світі налічувалося понад 3,6 мільярда користувачів смартфонів. До 2023 року їх кількість зросте до 4,3 мільярда.
У 2020 році мобільні користувачі проводили 90% свого часу в додатках, а не в мобільних браузерах.
У 2021 році частка ринку мобільного пошуку Google у США становила 93,22%.
Перший результат мобільного пошуку в Google, як правило, має показник CTR (коефіцієнт кліків) 26,9%.

В Україні:

85% українців віком від 18 до 30 років володіють смартфоном.
Станом на 2021 рік в Україні користується мобільним інтернетом 25,7 мільйона людей.
70% українців користуються інтернетом щодня, з них 60% - за допомогою мобільних пристроїв.
91% українських власників сенсорних смартфонів користуються мобільними додатками.
Мобільні користувачі в Україні проводять в середньому 3,5 години на день, користуючись своїми пристроями.

Для того, щоб мати найкращу онлайн-присутність, ви повинні оптимізувати свій сайт для різних типів пристроїв та дозволів екранів, а не лише для десктопів.

Хоча нещодавно Google запустило оновлення щодо враження від сторінок на десктопах, ця тема виходить за рамки цієї статті, хоча вона й впливає на загальне враження від сторінки.

Щоб досягти найкращої реалізації мобільного сайту, важливо створити його відповідно до цих рекомендацій, а також шукати можливості покращити показники Core Web Vitals.

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

Саме так ваш мобільний сайт досягне успіху.

1. Обов'язкова ідентичність контенту для мобільних і десктопних версій

Ця порада спрямована на запобігання дублюванню контенту та звинуваченням у приховуванні інформації.

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

Одним із найкращих способів досягти цього є використання адаптивного дизайну.

Адаптивний дизайн, для тих хто не знайомий з цим терміном, передбачає створення стильового аркуша, який використовує "медіа-запити" для автоматичного налаштування дизайну під різні платформи та пристрої.

Якщо ви прагнете максимально підвищити швидкість завантаження та зробити дизайн легким і швидким, розгляньте використання CSS-спрайтів для зменшення кількості запитів до сервера.

2. Перший екран залишається важливим

Попри те, що в мобільній версії сторінка прокручується безперервно, верхня частина екрана (first screen або “above the fold”) все ж таки зберігає свою вагу.

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

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

3. Розробка "зверху вниз"

Підхід до розробки "зверху вниз" означає, що ви враховуєте всі потенційні наслідки кожного рішення, прийнятого під час проектування, від початку до кінця.

Ви розробляєте сайт спочатку для мобільних пристроїв, а потім для десктопів, а не навпаки – спочатку створюєте десктопну версію, а потім додаєте до неї мобільну.

Такий підхід до розробки є ідеальним, оскільки ви уникаєте появи проблем у фінальному дизайні.

Ось приклад:

Ви створюєте веб-сайт для десктопів. Приблизно на три чверті шляху роботи ви вирішуєте створити додатково мобільний сайт. Ви створюєте макет. Але після кодування макета та переходу між різними станами ви виявляєте помилки (баги) в різних місцях.

Це відбувається тому, що підхід "знизу вверх" не працює і призводить до розширення обсягу робіт (scope creep).

Scope creep – це явище, коли на останній стадії виникають непередбачені проблеми, які стають причиною неочікуваних помилок та додаткових годин роботи, не врахованих при первинному плануванні проекту.

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

4. Користувачі – в центрі уваги, незалежно від пристрою

Хоча мобільні та десктопні пристрої стають дедалі схожішими, цілі та бажання користувачів цих платформ також зближуються.

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

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

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

5. Використовуйте методики адаптивного дизайну

Час окремих веб-сайтів m-dot (m.example.com) минув.

У добу мобільного першочергового підходу немає жодної вагомої причини використовувати таку реалізацію.

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

Існує багато методів, які дозволяють забезпечити ефективний перехід, але в іншому випадку реалізації m-dot з появою нових технологій спіткала доля динозаврів.

Сьогодні ідеальною реалізацією є адаптивний дизайн. Ці методики використовують так звані медіа-запити для визначення дозволів екрана, які підтримуватиме дизайн.

Кожна окрема роздільна здатність – це так звана "точка зламу" в дизайні, або точка, в якій адаптивний дизайн переходить від однієї роздільної здатності до іншої.

Перевага використання такої структури полягає в тому, що ви не зіштовхнетеся з проблемами дублювання контенту, як це було б у разі реалізації m-dot.

Крім того, ваша мобільна версія працюватиме на основі найновіших технологій.

6. Оптимізація швидкості: код замість зображень

Замисліться, чи справді потрібен той двокольоровий фон, що повторюється, шириною 2 пікселі та висотою 1200 пікселів?

Якщо ні, і ви можете реалізувати це за допомогою коду, зробіть саме так.

Хоча така невелика деталь не сильно вплине на швидкість завантаження сайту, оптимізація навіть таких елементів в сумі дає суттєвий результат.

Наступного разу, проводячи аудит сайту або створюючи новий, запитайте себе: "Чи справді потрібне тут це зображення, чи я можу просто реалізувати це за допомогою коду?"

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

7. Мобільна оптимізація WordPress

Для WordPress існує безліч плагінів.

Деякі з них можуть покращити сумісність вашого сайту з мобільними пристроями.

Найкорисливішими плагінами для цієї мети є Duda Mobile, W3 Total Cache, а також плагіни для мініфікації HTML та CSS-коду.

8. Відмовтеся від нав'язливих рекламних вставок

Так, ми знаємо. Ваш продукт – найкращий і найкрутіший на цій планеті. Саме тому ми, ймовірно, відвідуємо ваш сайт і досліджуємо його перед покупкою.

Але нам не потрібна нав'язлива реклама, яка блокує нашу активність на сайті та змушує нас купувати.

Наскільки можливо, мінімізуйте використання набридливих вставок і розміщуйте рекламу внизу сторінки або збоку з можливістю її закриття.

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

9. Перевірка сайту на різних операційних системах та пристроях

Будь-який SEO-фахівець повинен вміти виявляти слабкі місця у реалізації веб-сайту, зокрема знаходити проблеми на різних дисплеях та пристроях.

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

Але що робити, якщо ви не можете дозволити собі тисячу пристроїв для тестування?

На допомогу приходять спеціальні програми. Так, перевірити ці проблеми можна за допомогою кількох інструментів.

Розширення Google Web Developer Chrome

Якщо у вас обмежений бюджет, розширення Google Web Developer Chrome допоможе вам перевірити, як виглядає ваш сайт на різних розмірах та роздільностях екранів. Воно також дозволяє побачити, як виглядає ваш сайт при різних орієнтаціях пристрою, як взаємодіють дотики з екраном (через симуляцію) та багато іншого. Крім того, за допомогою інструмента відладки можна перевірити код сайту на наявність проблем.

BrowserStack.com

BrowserStack.com – чудовий інструмент для тестування на багатьох різних браузерах, операційних системах та роздільностях екранів. Вони також пропонують розширення для Google Chrome, яке можна використовувати для цієї мети. Ви можете протестувати будь-який сайт на понад 2000 реальних пристроях, браузерах та операційних системах. Оплачений обліковий запис надає необмежений доступ до їхнього розширення для браузера для тестування.

Cross Browser Testing

CrossBrowserTesting.com – альтернатива BrowserStack, яку можна використовувати для тестування браузерів та пристроїв. Вони пропонують понад 1500 браузерів та платформ для тестування, що дозволяє виконувати широкий спектр завдань. Цей інструмент дозволяє робити порівняння скріншотів, а також імітувати роботу вашого веб-сайту на реальних пристроях.

10. Оптимізація мобільного відео для SEO

Так, існує таке поняття, як SEO-оптимізація мобільного відео!

Пошуковій системі Google потрібні певні сигнали, розміщені на сторінці, щоб краще зрозуміти відео, яке на ній розміщено.

Важливими є такі елементи, як текст на сторінці, посилання, структуровані дані та файли відео.

Під час створення відео також слід звернути увагу на деякі моменти.

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

Для структурованих даних рекомендується використовувати тип даних VideoObject на Schema.org.

Google рекомендує такі методики оптимізації мобільного відео для бездоганної реалізації:

Використання власних елементів керування з кореневим елементом div, разом із мультимедійним елементом відео та дочірнім елементом div, призначеним для керування відео.
Використання кнопки відтворення/паузи відео.
Забезпечення можливості перемотування користувачем відео вперед і назад.

Вони пропонують детальний покроковий посібник із технічної реалізації мобільного відео.

Як каже Google:

"Якщо основна причина, чому користувач заходить на сайт, – це відео, цей користувальницький досвід повинен стати захоплюючим і знову привабливим."

Ось інші важливі поради щодо SEO-оптимізації мобільного відео, крім очевидних:

Максимально полегшити Google пошук ваших відео. Це означає:
- Використання карти сайту для відео: якщо ви не надсилаєте карту сайту для відео, Google може не знайти їх безпосередньо. Карта сайту для відео дозволяє ще легше надсилати її в Google Search Console, що полегшує Google індексацію та потенційне індексування ваших відео.
- Не використовуйте складні дії користувачів або фрагменти URL : якщо вони використовуються для завантаження ваших відео, можливо, Google взагалі не знайде їх, оскільки ці елементи на вашій сторінці занадто складні для розуміння Google.
- Використовуйте легкоідентифікований тег HTML : деякі з дійсних включають video, iframe, object або embed. Google легше знаходить відео, коли вони вбудовані в загальні теги.
Переконайтеся, що ваші відео можна індексувати . Іноді хтось може внести зміни до файлу robots.txt, який блокує сканування файлів відео (без вашої вини, сподіваємось). Якщо ваші відео індексувалися, а тепер раптом перестали, варто переглянути ваш файл robots.txt, щоб переконатися, що вони не заблоковані.
Використовуйте формати мініатюр, які підтримуються Google : у наведеній вище документації для веб-розробників Google також є рекомендації щодо мініатюр.

Оптимізація мобільного відео для SEO не завжди така легка, як може здатися.

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

11. Використовуйте структуровані дані Schema.org

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

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

Але, в будь-якому випадку, автор вважає, що структуровані дані Schema.org слід використовувати навіть на десктопних версіях сайтів, оскільки вони можуть допомогти вам з'явитися в результатах із розширеними фрагментами на основі ваших цільових ключових слів. Це може підвищити видимість вашого сайту за умови правильної реалізації.

12. Не блокуйте допоміжні скрипти

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

Важливо переконатися, що допоміжні скрипти для вашого мобільного дизайну не заблоковані, оскільки це може призвести до проблем, таких як помилки "soft 404" на мобільних пристроях у майбутньому. Це також може призвести до помилок "404" на десктопах.

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

13. Оптимізація зображень для мобільного веб-сайту

Для мобільного сайту оптимізація зображень – це критичний компонент, який потрібно зробити правильно. Це означає, що ви повинні переконатися, що зображення правильно оптимізовані для всіх розмірів зображень на всіх можливих роздільностях.

Неможливо створити одне зображення та гарантувати, що воно буде доступне для перегляду де завгодно. Ну, можна. Але воно буде спотворено на роздільностях, для яких воно не було створено.

Натомість рекомендується використовувати комплексні SEO-практики та створювати зображення, які мають високу якість на кожній роздільності, але й швидко завантажуються.

Ось кілька кращих практик адаптивного дизайну, які Google рекомендує використовувати для оптимізації зображень для мобільної платформи:

Використовуйте відносні розміри зображень. Якщо ви використовуєте відносні розміри зображень, ви заважаєте їм переповнювати тег контейнера, який містить зображення.
Використовуйте вбудовані зображення. Можна зменшити швидкість завантаження сторінки, переконавшись, що використовуються вбудовані зображення, щоб зменшити кількість запитів до файлів. Їх слід використовувати на сторінках, які не використовуються деінде на вашому сайті.
Для пристроїв з високою роздільною здатністю використовуйте атрибут srcset для зображень. Це дозволяє вам додавати більше одного файлу зображення для різних пристроїв.
Якщо ви займаєтеся SEO в електронній комерції, ви можете зробити зображення ваших продуктів розширюваними. Користувачі, які ймовірно збираються придбати товар на своєму пристрої, можуть захотіти збільшити його зображення, щоб краще розглянути. Таким чином, надання цієї опції є цілком доцільним.

Секрет інтеграції зображень у ваші мобільні оптимізації – це знайти баланс між розміром зображення, його завантаженням на мобільному пристрої та забезпеченням правильної швидкості завантаження сторінки без зниження якості зображення на будь-якому основному пристрої, на якому шукає ваша аудиторія.

14. Оптимізація загального розміру сторінки

Для мобільного сайту швидкість завантаження сторінки є критично важливою. Щоб досягти цього, необхідно оптимізувати загальний розмір DOM (Document Object Model – модель об'єктної документної структури).

Для ефективної оптимізації, крім рекомендацій з попереднього посилання, слід звернути увагу на таке:

Відмовтеся від зайвих власних шрифтів

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

Це призводить до збільшення часу завантаження та може погіршити показники Core Web Vitals (основних веб- показників). За можливості використовуйте системні шрифти, щоб звести вплив цього фактора до мінімуму.

Оптимізуйте зображення

Обов'язково оптимізуйте зображення, зберігаючи при цьому їхню якість. Розмите зображення через надмірну компресію – це непрофесійний результат.

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

Зменшіть кількість ресурсів, необхідних для DOM та критичного шляху рендерингу

Чим більше ресурсів потрібно вашій сторінці для відображення, тим довше вона завантажуватиметься. Для обробки веб-сторінки ніколи не повинно знадобитися понад 10 плагінів (максимум) та 3-4 файлів скриптів.

Автор зустрічав випадки, коли завантажувалося 160 плагінів, а розмір файлу сторінки становив 10 МБ. Це абсолютно неприпустимо.

Для досягнення найкращого результату, на думку автора, сторінки на сайті WordPress в середньому не повинні перевищувати 150-250 КБ і не повинні містити понад 5-7 ресурсів (CSS, зовнішній шрифт (за потреби), файл реклами, файл JavaScript та три плагіни).

Якщо вам потрібно більше – можливо, оптимізація не така ефективна, як ви думаєте. Також не варто недооцінювати економію ресурсів, яку ви отримаєте, використовуючи системні шрифти замість зовнішніх веб-шрифтів.

Мінімізуйте ваші сторінки

Мінімізація – це процес стиснення ваших файлів для економії місця та, як наслідок, зменшення часу завантаження сторінки.

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

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

Якщо у вас вже багато плагінів, додавати ще один для мінімізації – погана ідея. У таких випадках для досягнення найкращого результату слід звернутися до професійного розробника.

Якщо у вас мінімум плагінів, залучення професійного розробника для цього завдання допоможе вам досягти ще кращої швидкості завантаження сторінки та показників Core Web Vitals.

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