Оптимізація сайту під мобільні пристрої

1. Способи оптимізації сайтів для мобільних пристроїв.
2. Рекомендації по створенню сторінок, орієнтованих під мобільні пристрої.
3. Оптимізація швидкості завантаження мобільної версії сайту.
4. Кешування.
5. Висновок.

в рубриці: Енциклопедія SEO

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

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

Способи оптимізації сайтів для мобільних пристроїв.

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

• Створення адаптивного дизайну. Ідея полягає в тому, щоб використовувати один і той же html-код, але засобами CSS визначати як відображати сторінку на різних типах пристрою. Спосіб хороший тим, що він практично не вимагає вкладень. Однак, в цьому випадку користувач мобільного інтернету отримує сторінку тих же розмірів і з тим же об'ємом тексту, в результаті чого вона легко перетвориться в довгу "онучу".
• Динамічна зміна html і CSS. Хороший спосіб, так як він має на увазі зміна безпосередньо змісту сторінки в залежності від типу використовуваного пристрою, при цьому URL-адресу сторінки залишається колишнім. Але такий метод також може бути невірно інтерпретований пошуковим алгоритмом, наприклад, як клоакинг, що загрожує певними санкціями.
• Створення мобільних URL-сторінок. Цей спосіб полягає в створенні окремих дубль-версій сторінок, адаптованих під мобільні пристрої. При переході користувача на сайт визначається тип його пристрою і відбувається відповідне перенаправлення на потрібний URL-адресу сторінки. Ви отримуєте море можливостей по оптимізації контента, при цьому нічим не ризикуєте.

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

Рекомендації по створенню сторінок, орієнтованих під мобільні пристрої.

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

Зокрема,

• Не рекомендується використовувати горизонтальний скролінг, тобто розмір сторінки повинен бути оптимізований так, щоб по ширині вона містилася в вікно мобільного браузера. Користувачі мобільного інтернету терпимо ставляться до вертикального прокручування, а ось горизонтальну не люблять, і це може стати проблемою конверсії.
• Звичайні текстові посилання в мобільній версії будуть виглядати ще менше, ніж в web-версії. Так як основний інструмент користувача при роботі з навігацією по сайту - це тачскрін, їх слід замінити на видимі і привертають увагу кнопки. Вони зручніше і викликатимуть більше бажання перейти на відповідні сторінки.
• Слід приділити увагу оптимізації структури сайту. Немає ніякого сенсу плодити купу непотрібного контенту. Мобільна версія сайту повинна відображати тільки дійсно важливу і корисну інформацію. Вона повинна бути короткою, як якщо б вас попросили за пару хвилин розповісти про те, що ви пропонуєте.
• Не буде зайвим додавати до початку сторінок слайд-посилання, за якими користувач зможе швидко переміщатися між фрагментами контенту. Це дозволить підвищити швидкість і зручність отримання інформації, що безсумнівно позначиться на конверсії мобільної версії.

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

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

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

• У мобільній версії ні в якому разі не використовуйте Flash - це сильно уповільнить його роботу, а в iOS для iPhone і iPad Flash-елементи взагалі не відображаються. Також слід уникати застосування об'ємних зображень і банерів, так як вони крім великої площі займаного простору на екрані також мають чималий обсяг навіть після стиснення.
• Багато мобільні браузери обмежені в кількості переданих з'єднань не більше 4-6. Тобто в разі оптимізації швидкості завантаження мобільної версії розподіл передачі даних може лише нашкодити швидкості сайту. Хоча той же Android підтримує передачу відразу 3 з'єднань на сервер завдяки конвеєрної обробці HTTP-запитів. Переконайтеся в тому, що ваш сервер підтримує таку обробку.
• При підвантаження зображень рекомендується визначати дозвіл екрана браузера користувача, і віддавати зображення необхідного розміру. Це дозволить як мінімум не створювати навантаження в процесі стиснення зображення в відповідний дозвіл. Прийом, кардинально знижує час завантаження сторінок. Фонові картинки найкраще заміняти на CSS-градієнти.
• Оптимізуйте Javascript по-максимуму. Процесори мобільних пристроїв набагато слабкіше стаціонарних комп'ютерів, тому і обробка сценаріїв буде відбуватися довше. Як мінімум слід використовувати стиснення і обфускація коду скриптів, а також їх об'єднання в 1 файл. Намагайтеся використовувати Javascript в призначених для користувача формах тільки в крайньому випадку. Можливості HTML5 цілком дозволяють обходитися і без них в більшості стандартних задач.

Кешування.

Тут справи йдуть таким чином - мобільні браузери мають обмежений простір для кешування даних, тому при оптимізації сайту під мобільні пристрої на масштабне використання кешу розраховувати не варто. В першу чергу слід кешувати Ajax, так як він використовує для роботи достатньо "важкі" бібліотеки jQuery, а також замінити cookies на використання LocalStorage - технологія HTML5, яка на відміну від cookies не має малого обмеження за обсягом переданих даних, а також не провокує запит до сервера, що погодьтеся, суттєво прискорить завантаження сторінки при повторному запиті.

Висновок.

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

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

Оцініть статтю: