Усі статті
3 хв читання#performance#instagram#tiktok

Посилання в біо відкривається всередині Instagram, а не в Chrome

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

Що таке браузер усередині застосунку

Коли людина тисне посилання в профілі Instagram, iOS та Android віддають застосунку WebView — рушій браузера, вбудований в іншу програму. Рушій рендерингу в нього спільний із Safari чи Chrome, але на цьому схожість і закінчується. У нього власне сховище, власні куки, власний життєвий цикл, і його можуть убити тієї ж миті, коли користувач свайпне назад у стрічку.

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

Чотири речі, які ламаються

1. JavaScript приходить пізно або не приходить узагалі

Сторінка, яка малює себе в браузері, мусить завантажити фреймворк, розібрати його, виконати й лише потім щось показати. На холодному WebView зі слабким з’єднанням це секунди порожнього екрана. Деякі браузери всередині застосунків до того ж блокують або затримують сторонні скрипти, а на iOS блокувальники контенту працюють і всередині WebView. Якщо ваші посилання з’являються лише після того, як відпрацює JavaScript, частина відвідувачів не побачить їх ніколи.

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

2. Сховище ізольоване й живе недовго

Куки та local storage, виставлені всередині WebView застосунку, часто не зберігаються й не діляться із системним браузером. Усе, що спирається на впізнавання відвідувача наступного разу, тут працює ненадійно. Це одна з причин, чому аналітика на клієнтських куках недораховує трафік із застосунків: відвідувач щоразу виглядає новим.

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

3. Картинки з’їдають усе завантаження

Фонова фотографія просто з камери телефона зазвичай важить від трьох до шести мегабайтів. На доброму з’єднанні це пауза, на перевантаженій соті — вихід зі сторінки. А оскільки фонова картинка майже завжди найбільший елемент на екрані, саме її вимірює метрика Largest Contentful Paint.

  • Зменшуйте до ширини, яку телефон справді показує: близько 1080px більш ніж достатньо.
  • Перекодовуйте в AVIF або WebP, а не віддавайте вихідний JPEG.
  • Трохи розмивайте фон перед стисненням. Файл стає меншим, а текст поверх — читабельнішим.
  • Задайте жорсткий бюджет у байтах і знижуйте якість кроками, доки файл у нього не влізе, а не пропускайте стиснення, коли не вліз.
  • Вирізайте EXIF. У телефонних фото лежать координати GPS, і публічна сторінка — не місце для них.

4. Власні URL-схеми не відкриваються

Посилання на кшталт tg:// чи whatsapp:// усередині WebView поводяться непередбачувано, а часом мовчки ігноруються. Використовуйте форми на https — t.me і wa.me: вони відкриваються в браузері й уже звідти передають керування застосунку, якщо він встановлений.

Як перевірити чесно

  1. Відкрийте власну сторінку зсередини застосунку Instagram, а не з десктопа.
  2. Зробіть це на мобільному інтернеті, вимкнувши Wi-Fi.
  3. Вимкніть JavaScript у мобільному браузері й завантажте сторінку ще раз. Усі посилання мають лишитися на місці та працювати.
  4. Подивіться загальний обсяг завантаження. Сторінці з посиланнями в біо нічим виправдати більше ніж пару сотень кілобайтів.

Чому це обмеження дизайну, а не технічна дрібниця

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

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

Читати далі