Ви переконалися, що ваш сайт оптимізований для мобільних пристроїв?
Чи знаєте ви, що Google представив нову політику Mobile-First?
Все більше і більше користувачів Інтернету відходять від настільних комп’ютерів і замість цього переглядають і роблять покупки за допомогою своїх мобільних пристроїв.
Адаптивний веб-дизайн дає змогу створювати сайти, які однаково працюють на всіх платформах. Але навіть тоді адаптивний дизайн є лише частиною стратегій оптимізації UX для мобільних пристроїв.
Якщо ви хочете справжньої оптимізації продуктивності, вам також доведеться розглянути інші альтернативи.
Ось чому така сильна увага приділяється створенню вашого сайту мобільний досвід. Говорячи простою мовою, мобільні передусім означає, що ваш дизайн і вміст спочатку оптимізовано для мобільних користувачів.
З огляду на це, ця публікація не про розробку абсолютно нового сайту. Натомість ми розглянемо деякі фундаментальні принципи дизайну, орієнтовані на мобільні пристрої. І приділіть деякий час зосередженню на техніці для оптимізації взаємодії з вашими мобільними користувачами.
№1: розробляйте з урахуванням мобільних пристроїв
Мережа в основному побудована на принципі обслуговування користувачів комп’ютерів. Справжня мережа, справжній прогрес у технологіях найкраще відображаються на красивому повноекранному дисплеї. Але смартфони та інші мобільні пристрої — це річ, і настав час адаптуватися до концепції мобільного дизайну.
Які ще елементи дизайну слід застосувати у своїх мобільних веб-дизайнах, окрім здорового адаптивного дизайну?
- Розстановка пріоритетів. Мобільні екрани обмежені доступним простором для відображення. Крім того, мобільні екрани представляють вміст у вертикальній манері на відміну від значно ширшої — горизонтальної — структури для настільних комп’ютерів. Це означає, що ви повинні проектувати, використовуючи пріоритети. Які елементи є надзвичайно важливими для перегляду користувачами? Якщо є кнопки заклику до дії, наскільки легко їх побачити мобільному користувачеві?
- Зміст спочатку. Колір другий. Ви можете робити деякі цікаві речі з мобільним дизайном, але точно не в рамках дизайну робочого столу. Отже, спочатку поступіться змістом. Зробіть свою копію та інші частини вмісту легкими для читання та доступними. Екран мобільного телефону набагато менш терплячий до відволікаючих візуальних елементів.
- Зручна навігація. На мобільному пристрої ви не можете просто клацнути будь-де й повернутися на головну сторінку. Якщо, звичайно, ви не плануєте такий тип навігації заздалегідь. І ви повинні. Експериментуйте з віджетами Scroll-to-Top, а також безшовними липкими заголовками, коли це можливо.
Найкращий спосіб перевірити, чи правильно ви це робите, — скористатися телефоном (я роблю це постійно!) і відвідати ваш сайт. Проведіть ретельний аналіз того, як усе відчувається і тече разом.
Якщо ви сидите в кафе або чекаєте рейс в аеропорту, тицьніть когось за плече і ввічливо попросіть перевірити за вас сайт. Потім сядьте зручніше та почуйте їхні відгуки. У більшості випадків ви здивуєте себе тим, як люди сприймають ваш веб-сайт.
#2: Оптимізація ресурсів; зображення, значки тощо.
Як часто ви використовуєте візуальні засоби заради особистих уподобань, а не UX? Це трапляється, і якщо ви збираєтеся підійти до творчості, варто зрозуміти, як працює оптимізація медіа.
Візуальні елементи, такі як фотографії, ілюстрації, значки та відео, є найбільшими споживачами пропускної здатності на веб-сторінках.
Середній розмір веб-сторінки у 2018 році. Перераховано за галузями та різними країнами.
Хоча не існує встановленого розміру веб-сторінки, якому повинні відповідати всі, здоровий глузд вважає, що менший розмір веб-сторінки означає швидший час завантаження.
Отже, як ви можете обрізати деякі зайві КБ або навіть МБ зі свого візуального вмісту?
- Змініть розмір своїх зображень. Звучить просто, правда? Що ж, я не можу порахувати, скільки разів я переглядав мобільний сайт лише для того, щоб у фоновому режимі завантажувалися зображення 1980 x 1200. Натомість повнорозмірні фотографії слід надавати як альтернативні посилання, коли це доречно. Зміна розміру може зменшити до 80% загального розміру зображення, залежно від необхідних розмірів. Однак для мобільних пристроїв немає жодних причин перевищувати діапазон максимум 600-700 пікселів.
- Зменшіть розмір файлу за допомогою стиснення. Стиснення/оптимізація зображення — це процес використання програмного забезпечення сторонніх розробників для зменшення кількості кольорів, наявних у зображенні. Це можна зробити настільки, що ваші фотографії не втратять своєї вродженої якості, але можуть значно зменшити розмір файлу. Якщо вам потрібна допомога зі стисненням зображень, не шукайте далі, ніж наш повний огляд інструментів для стиснення зображень.
- Дослідіть альтернативні формати файлів. Усі чули про формати файлів PNG і JPEG. Зрештою, вони фактично є стандартами зображення в Інтернеті. Але ненадовго. Найновіші та найкращі технології доставки цифрових зображень обертаються навколо WebP і формати файлів SVG. SVG, наприклад, можуть автоматично масштабувати до розміру екраназменшуючи кількість ресурсів, необхідних для завантаження певних візуальних компонентів.
Оптимізація взаємодії з користувачем для мобільних пристроїв — це лише уважна річ. Імпульсне проектування означає, що ви не враховуєте довгострокові наслідки своїх рішень. Тоді як уважний підхід допоможе вам будувати з нуля з урахуванням користувачів мобільних пристроїв.
Проникливий: Дотримуючись концепції інтуїтивно зрозумілого мобільного дизайну, вам не потрібно повторно використовувати ті самі візуальні компоненти у своїх мобільних дизайнах. Видалення кількох фонових зображень і заміна їх кольоровими фонами — на мобільних пристроях — не зашкодить взаємодії з користувачем. Завжди шукайте способи зберегти навіть найменшу кількість пропускної здатності.
#3: Попереднє та відкладене завантаження
Чи потрібно завантажувати всі медіаресурси на сторінки, читання яких займає значну кількість часу? І чи може це допомогти відобразити зовнішні сторінки перед тим, як користувачі їх відвідають?
Давайте спочатку розглянемо програми попереднього завантаження, також відомі як підказки браузера.
Попередні завантажувачі – це способи сторінки повідомити браузеру про потенційні можливості навігації. Наприклад, користувач може перейти на сторінку B зі сторінки A.
За допомогою попереднього завантаження користувач може відобразити сторінку 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 Fonts або створіть спеціальний сценарій для попереднього завантаження ресурсів JavaScript у WordPress.
До речі, якщо ви використовуєте WordPress WP Ракета може допомогти вам у цьому, щоб перезарядити ваш сайт.
Тепер, коли ви знаєте більше про попередні завантажувачі, давайте поговоримо про іншу гарячу тему: відкладене завантаження.
Що таке відкладене завантаження?
Кожного разу, коли ви відвідуєте нову веб-сторінку, будь то публікація в блозі чи статичний сайт, браузер отримує весь вміст сторінки, а потім обслуговує цей вміст як власний досвід перегляду. У більшості випадків ви змушені завантажити всю сторінку, фактично не побачивши її далі, ніж верхню частину сторінки.
У той час як при відкладеному завантаженні веб-переглядач має завантажувати (рендерити) вміст, який знаходиться лише в області перегляду користувача. Отже, якщо на певну сторінку додано фотографії чи відео, які залежать від розміру, ці файли відображатимуться лише тоді, коли ваш браузер досягне цієї частини сайту.
І якщо вас турбують можливі проблеми з SEO, не турбуйтеся. Yoast це підтвердив Google відтворює сторінки, які використовують відкладене завантаженняі розглядає це як ще один сигнал покращення продуктивності.
Моя рекомендація щодо використання бібліотеки така Layzr.js — просте й ефективне відкладене завантаження ваших зображень! Сценарій також активовано на домашній сторінці проекту, тому ви можете спостерігати за його роботою в режимі реального часу. Користувачі WordPress можуть знайти десятки плагінів із відкладеним завантаженням у публічному сховищі плагінів.
№4: веб-кешування
Веб-кешування базується на концепції копіювання версії сторінки, яка потім може бути представлена користувачеві в будь-який час. Сторінки кешуються під час першого відвідування сторінки веб-сайту. Коли новий користувач спробує отримати доступ до цієї сторінки, замість того, щоб обслуговувати поточну версію, веб-сервер покаже кешовану версію.
Метою будь-якого виду кешування є покращення продуктивності веб-сайту та зменшення необхідних внутрішніх ресурсів. Залежно від вашого рішення кешування ви можете налаштувати спеціальні інтервали та інші події на основі тригерів.
Деякі з найпопулярніших імен веб-кешування — Varnish, Squid і Memcached. Але будьте впевнені, що на ринку є багато інших рішень, особливо якщо ви користувач WordPress.
Ви також можете розглянути можливість реєстрації в CDN.
Що таке CDN (Мережа доставки вмісту)?
Мережа доставки вмісту використовує глобальний кластер розподілених серверів, щоб забезпечити неймовірно швидку доставку вмісту. А CDN може швидко передавати всі популярні типи вмісту в Інтернеті: відео, фото, JavaScript тощо. Сьогодні більшість веб-трафіку проходить через певну форму CDN.
Єдине, про що слід пам’ятати про мережі доставки вмісту, це те, що вони найкраще працюють, коли використовуються на веб-сайті з високим попитом. Отже, якщо ви обслуговуєте лише кілька тисяч відвідувачів на місяць, побачити помітні покращення може виявитися важко. Тим не менш, CDN є чудовим рішенням для покращення часу завантаження веб-сайту, зменшення вартості пропускної здатності, підвищення доступності вмісту та посилення загальної безпеки.
Якщо у вас немає попереднього досвіду роботи з CDN, радимо спробувати Cloudflare — вони надають безкоштовний план назавжди, і це чудова платформа для початку навчання. І якщо Cloudflare не виправдає ваших очікувань, перегляньте нашу публікацію про найкращих безкоштовних постачальників CDN на ринку.
№5: AMP (Accelerated Mobile Pages)
Google Проект AMP це мобільна оптимізація на стероїдах! По суті, AMP скорочує ваші сторінки до найнеобхіднішого, щоб забезпечити надшвидке завантаження, а також зробити пріоритетом читабельність вмісту. Враховуючи, наскільки важливою є швидкість сторінки, чи можете ви набратися сміливості сказати «ні» майже миттєвому часу завантаження?
Гаразд, усі ці модні слова звучать чудово, але як працює AMP?
AMP – це проста HTML-сторінка з певними обмеженнями щодо того, який вміст можна відображати. Це призводить до значно швидшого часу завантаження та загальної продуктивності через обмеження на виконання сценаріїв тощо.
JavaScript, наприклад, не працює з AMP. Якщо, звичайно, ви не використовуєте Бібліотека AMP JS доступна на GitHub. Використання бібліотеки JS дає змогу досягти певних результатів, як-от уникнути блокувальників реклами, але якщо вам потрібна справжня продуктивність, то необроблений AMP — це ваш шлях.
Цікаві приклади для AMP:
№6: Тестуйте перед тим, як взяти участь
У наш час немає виправдання, щоб не мати окремого сценічного середовища для свого проекту. Більшість платформ хмарного хостингу пропонують проміжні середовища за замовчуванням, тому зверніться до свого постачальника, щоб дізнатися, чи є у вас доступ до нього.
Що таке постановочне середовище?
Ну, найшвидший спосіб пояснити це, подивившись на ваш поточний веб-сайт.
Цей сайт є тим, що ви називаєте робочим сайтом — версією в реальному часі всього коду, сценаріїв і вмісту, на якому базується ваш сайт. У цьому контексті проміжне середовище є копією вашого робочого сайту. Сайт-фіктив, якщо хочете. І в цьому проміжному середовищі ви можете вносити зміни або додавати нові функції, не порушуючи роботу сайту.
Я завжди згадую допис Ешлі Гарп, Не втрачайте часу – перевірте зміни, перш ніж вводити їх.
Її погляд на те, як ми «обманюємо» себе, щоб уникнути певних речей, є яскравим прикладом того, як ми не хочемо брати на себе відповідальність, коли робимо помилку. Тим не менш, публікація Ешлі також містить посилання на корисні інструменти для налаштування локального середовища проміжної обробки.
Тестування не таке страшне, як здається. Але, безперечно, страшно, коли ви випадково видаляєте всю свою базу даних на робочому сервері!
Заключне слово
Оптимізувати веб-сайт для безперебійної роботи на мобільних пристроях не так вже й складно. Все, що вам потрібно, це трохи рішучості та охоче застосувати методи, описані в цій публікації. Швидше за все, ви вже знайомі з такими речами, як кешування вмісту та відкладене завантаження, але як щодо проміжних середовищ чи програм попереднього завантаження?
Сподіваємось, ця публікація пролила трохи світла на поточний стан оптимізації мобільних веб-сайтів.