Чи ви впевнені, що ваш веб-ресурс належним чином адаптований для мобільних пристроїв?
Чи відомо вам, що Google запровадив нову політику, де пріоритет віддається мобільній версії сайту?
Дедалі більше користувачів відмовляються від стаціонарних комп’ютерів, віддаючи перевагу перегляду веб-сторінок та здійсненню покупок через свої смартфони та інші мобільні гаджети.
Адаптивний веб-дизайн дозволяє створювати сайти, які бездоганно функціонують на будь-яких платформах. Проте, навіть наявність адаптивного дизайну є лише частиною комплексної стратегії оптимізації досвіду користувача (UX) на мобільних пристроях.
Для досягнення справжньої продуктивності потрібно звернути увагу на інші методи.
Саме тому створення сайту, орієнтованого на зручність мобільного використання, має таке важливе значення. Простіше кажучи, “мобільний передусім” означає, що ваш дизайн та контент спочатку розробляються з урахуванням потреб користувачів мобільних пристроїв.
У цій статті ми не будемо говорити про розробку абсолютно нового сайту. Натомість, ми розглянемо ключові принципи дизайну, що орієнтовані на мобільні пристрої, і зосередимося на технічних аспектах для оптимізації взаємодії з вашими мобільними відвідувачами.
№1: Проектування з орієнтацією на мобільні пристрої
Інтернет спочатку створювався для користувачів настільних комп’ютерів. Справжня краса та можливості технологій найкраще відображалися на великих екранах. Але ера смартфонів та інших мобільних пристроїв вимагає адаптації до концепції мобільного дизайну.
Які елементи дизайну, окрім адаптивності, слід використовувати при розробці мобільної версії сайту?
- Встановлення пріоритетів. Мобільні екрани мають обмежений простір для відображення інформації. Крім того, контент на мобільних пристроях відображається вертикально, на відміну від горизонтальної структури настільних комп’ютерів. Тому вам слід проектувати, враховуючи пріоритети. Які елементи є найбільш важливими для перегляду користувачем? Чи легко мобільному користувачеві знайти кнопки із закликом до дії?
- Контент передусім. Колір – потім. Ви можете втілювати цікаві ідеї в мобільному дизайні, але це не повинно повторювати дизайн для настільних комп’ютерів. Тому, спочатку зосередьтеся на контенті. Зробіть текст та інші елементи контенту легкими для читання та доступними. Екрани мобільних телефонів не сприймають відволікаючі візуальні елементи.
- Зручна навігація. На мобільному пристрої неможливо просто клікнути в будь-яке місце, щоб повернутися на головну сторінку. Якщо ви, звичайно, не передбачите таку навігацію. І ви повинні це зробити. Розгляньте можливість використання віджетів “Прокрутка вгору” та безшовних липких заголовків.
Найкращий спосіб перевірити, чи правильно ви все робите – це відкрити ваш сайт на мобільному телефоні (я так роблю постійно!) та проаналізувати, як все виглядає та працює.
Якщо ви сидите в кафе або очікуєте на рейс в аеропорту, попросіть когось переглянути ваш сайт. Потім сядьте та вислухайте їхні відгуки. Ви будете здивовані тим, як інші люди сприймають ваш веб-ресурс.
#2: Оптимізація ресурсів: зображення, іконки тощо
Як часто ви використовуєте візуальні елементи, виходячи з власних вподобань, а не з міркувань зручності користувача? Це трапляється, тому важливо розуміти, як працює оптимізація медіа.
Зображення, ілюстрації, іконки та відео є найбільшими споживачами пропускної здатності на веб-сторінках.
Середній розмір веб-сторінки у 2018 році в залежності від галузі та країни.
Хоча немає встановленого стандарту для розміру веб-сторінки, загальноприйнято, що менший розмір сторінки сприяє швидшому завантаженню.
Тож, як можна зменшити обсяг візуального контенту?
- Змініть розмір зображень. Звучить просто, правда? Я часто бачив на мобільних сайтах зображення 1980 x 1200 пікселів, які завантажувались у фоновому режимі. Замість цього, повнорозмірні фотографії слід використовувати як альтернативні посилання, коли це доречно. Зміна розміру може зменшити загальний розмір зображення до 80%, залежно від потрібних розмірів. Для мобільних пристроїв немає потреби використовувати зображення більше 600-700 пікселів.
- Зменште розмір файлу за допомогою стиснення. Стиснення зображень — це процес зменшення кількості кольорів, присутніх у зображенні, за допомогою спеціального програмного забезпечення. Це можна зробити таким чином, щоб ваші фотографії не втратили своєї якості, але значно зменшився розмір файлу. Якщо вам потрібна допомога зі стисненням зображень, ознайомтеся з нашим оглядом інструментів для стиснення зображень.
- Вивчіть альтернативні формати файлів. Всі знають про формати PNG та JPEG, які стали фактичними стандартами в Інтернеті. Але з’являються нові формати. Найсучасніші технології для відображення зображень включають WebP та SVG. SVG, наприклад, можуть автоматично масштабуватися до розміру екрана, зменшуючи ресурси, необхідні для завантаження деяких візуальних компонентів.
Оптимізація досвіду користувача для мобільних пристроїв вимагає уваги до деталей. Стихійний підхід може призвести до негативних довгострокових наслідків. Зважений же підхід дозволить вам будувати з урахуванням потреб мобільних користувачів.
Порада: Дотримуючись принципів інтуїтивно зрозумілого мобільного дизайну, вам не потрібно використовувати одні й ті ж візуальні компоненти, що і в десктопній версії. Заміна фонових зображень кольоровими фонами на мобільних пристроях не зашкодить досвіду користувача. Завжди шукайте способи заощадити пропускну здатність, навіть якщо це здається незначним.
#3: Попереднє та відкладене завантаження
Чи потрібно завантажувати всі медіаресурси на сторінки, на читання яких йде значний час? Чи можна пришвидшити відображення сторінок, які користувачі збираються відвідати?
Спершу поговоримо про попереднє завантаження, або про так звані підказки браузера.
Попереднє завантаження дозволяє сторінці повідомити браузеру про потенційні шляхи навігації. Наприклад, користувач може перейти зі сторінки A на сторінку B.
За допомогою попереднього завантаження користувач може розпочати відображення сторінки B ще до того, як натисне на посилання на сторінці A.
Зауважте, що попереднє завантаження не завжди спрацьовує, і остаточне рішення приймає браузер. При цьому враховуються такі фактори, як тип пристрою та пропускна здатність.
Які найпоширеніші типи попереднього завантаження?
- Попередня вибірка. Вказує на те, що певна URL-адреса, швидше за все, буде наступним пунктом навігації. Якщо браузер задовольнить запит, то він автоматично кешує важливі ресурси сторінки, що, у свою чергу, пришвидшить завантаження наступної сторінки.
- Попередній рендеринг. На відміну від попереднього типу, який отримує лише окремі ресурси, попередній рендеринг кешує всю сторінку. Весь відтворений контент зберігається в пам’яті пристрою користувача.
- DNS-попередня вибірка. Попередня вибірка DNS лише розв’язує вказаний DNS, і нічого більше. В результаті, якщо користувач робить певний “хід” на вашому сайті, ви скорочуєте час, необхідний для навігації.
- Попереднє підключення. Схоже на попередній тип, але також встановлює з’єднання та рукостискання за допомогою з’єднань TCP і TLS.
Які приклади коду для попереднього завантаження?
<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com"> <link rel="prefetch" href="folder/script.js" as="script"> <link rel="prerender" href="customURL.com/preview.html">
Оскільки попереднє завантаження використовує динамічні HTML-теги, ви можете попередньо завантажувати такі ресурси, як шрифти Google або створити спеціальний сценарій для попереднього завантаження ресурсів JavaScript у WordPress.
До речі, якщо ви користуєтеся WordPress, плагін WP Rocket може вам з цим допомогти.
Тепер, коли ви знаєте більше про попереднє завантаження, поговоримо про іншу важливу тему: відкладене завантаження.
Що таке відкладене завантаження?
Коли ви відвідуєте нову веб-сторінку, будь то публікація в блозі або статичний сайт, браузер отримує весь вміст сторінки та відображає його для вас. У більшості випадків вам доводиться завантажувати всю сторінку, навіть якщо ви не переглядаєте її нижню частину.
При відкладеному завантаженні браузер завантажує лише той контент, що знаходиться у видимій частині екрана. Наприклад, якщо на сторінці є великі фотографії чи відео, вони завантажаться лише тоді, коли ви прокрутите сторінку до відповідної області.
Якщо ви турбуєтесь про SEO, то не хвилюйтеся. Yoast підтверджує, що Google обробляє сторінки з відкладеним завантаженням і вважає це позитивним фактором, що впливає на продуктивність.
Я рекомендую використовувати бібліотеку Layzr.js – це просте та ефективне рішення для відкладеного завантаження зображень. Цей скрипт також використовується на головній сторінці проекту, тому ви можете побачити його в роботі. Користувачі WordPress можуть знайти безліч плагінів з відкладеним завантаженням у репозиторії плагінів.
№4: Веб-кешування
Веб-кешування базується на створенні копії сторінки, яка може бути показана користувачеві у будь-який момент. Сторінки кешуються під час першого відвідування. Коли новий користувач намагається відкрити сторінку, веб-сервер відображає кешовану версію, а не поточну.
Метою кешування є підвищення продуктивності веб-сайту та зменшення навантаження на внутрішні ресурси. Ви можете налаштувати інтервали та інші події для оновлення кешу залежно від ваших потреб.
Найпопулярніші рішення для веб-кешування: Varnish, Squid та Memcached. На ринку є багато інших рішень, особливо для користувачів WordPress.
Ви також можете розглянути можливість використання CDN.
Що таке CDN (Мережа доставки контенту)?
Мережа доставки контенту використовує глобальну мережу розподілених серверів для забезпечення швидкої доставки контенту. CDN дозволяє швидко передавати різні типи контенту: відео, зображення, JavaScript тощо. Сьогодні більшість веб-трафіку проходить через CDN.
Слід пам’ятати, що CDN найкраще підходить для веб-сайтів з великим обсягом трафіку. Якщо ви маєте лише кілька тисяч відвідувачів на місяць, то ви, можливо, не побачите значного покращення. Тим не менш, CDN – це чудове рішення для покращення швидкості завантаження сайту, зменшення витрат на пропускну здатність, підвищення доступності контенту та посилення безпеки.
Якщо у вас немає досвіду роботи з CDN, рекомендуємо спробувати Cloudflare, що пропонує безкоштовний план. Якщо Cloudflare не виправдає ваших очікувань, ознайомтеся з нашою статтею про найкращих безкоштовних постачальників CDN.
№5: AMP (Accelerated Mobile Pages)
Проект Google AMP – це мобільна оптимізація на максималках! По суті, AMP спрощує ваші сторінки до найнеобхіднішого, забезпечуючи швидке завантаження та надаючи пріоритет читанню контенту. Зважаючи на важливість швидкості сторінки, чи можете ви відмовитися від миттєвого завантаження?
Як працює AMP?
AMP – це звичайна HTML-сторінка з обмеженнями щодо того, який контент може бути відображений. Це призводить до швидшого завантаження та загальної продуктивності за рахунок обмеження виконання скриптів.
JavaScript не працює з AMP, якщо ви не використовуєте бібліотеку AMP JS з GitHub. Використання цієї бібліотеки дає змогу досягти певних результатів, наприклад уникнути блокувальників реклами. Але якщо вам потрібна максимальна продуктивність, то вибирайте необроблений AMP.
Цікаві приклади AMP:
№6: Тестування перед впровадженням
Сьогодні немає жодних виправдань для відсутності окремого середовища розробки для вашого проекту. Більшість хмарних платформ пропонують такі середовища за замовчуванням, тому зверніться до свого провайдера, щоб дізнатися про їх наявність.
Що таке середовище розробки?
Найпростіший спосіб пояснити це – подивитися на ваш поточний веб-сайт.
Цей сайт є тим, що називається робочим сайтом – це реальна версія вашого коду, скриптів і контенту. Середовище розробки є копією вашого робочого сайту. Тут ви можете вносити зміни або додавати нові функції, не впливаючи на роботу робочого сайту.
Я завжди згадую статтю Ешлі Гарп “Не витрачайте час – перевіряйте зміни перед впровадженням”.
Її роздуми про те, як ми “обманюємо” себе, щоб уникнути відповідальності за помилки, є яскравим прикладом того, чому ми не хочемо брати на себе відповідальність за помилки. У статті Ешлі також є посилання на корисні інструменти для налаштування локального середовища розробки.
Тестування не таке страшне, як може здатися. Але, безсумнівно, страшно випадково видалити всю базу даних на робочому сервері!
Підсумки
Оптимізувати веб-сайт для безперебійної роботи на мобільних пристроях не так складно. Потрібно лише трохи наполегливості та готовність застосовувати методи, описані в цій статті. Скоріш за все, ви вже знайомі з такими речами, як кешування та відкладене завантаження, але що ви знаєте про проміжні середовища розробки чи попереднє завантаження?
Сподіваємося, ця стаття пролила трохи світла на поточний стан оптимізації мобільних веб-сайтів.