• Главная
  • uCoz
  • Ускорение загрузки сайта с помощью Web App Manifest
Ускорение загрузки сайта с помощью Web App Manifest

Ускорение загрузки сайта с помощью Web App Manifest

 Web App Manifest (Манифест ) — это специальный файл (Web App Manifest с дополнительными полями для JS API), который сообщает браузерам, какие файлы следует сохранять, а какие следует заменять другим содержимым. В манифесте описывается информация, необходимая для работы NativeCache.

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

Манифест / Manifest

Основные требования что от нас требует Яндекс

  1. Создайте манифест в формате JSON и опубликуйте в виде файла. Вы можете дополнить уже существующий Web App Manifest сайта необходимыми для JS API полями — в таком случае создавать отдельный манифест не обязательно.

  2. Добавьте на каждую страницу сайта, внутрь тега head, абсолютную или относительную ссылку на созданный манифест. Это нужно, чтобы на устройстве пользователя сохранились необходимые ресурсы для работы приложения. Пример:
    <head>
     <link rel="manifest" href="yandex-manifest.json">
    </head>

Пример манифеста

{
 "name": "Тестовое приложение",
 "lang": "ru",
 "icons": [
 {
 "src": "icons/icon.png",
 "sizes": "576x576",
 "type": "image/png"
 }
 ],
 "start_url": "https://yoursite.ru/turboapp/index.html",
 "scope": "https://yoursite.ru/",
 "yandex": {
 "manifest_version": 1,
 "app_version": "1.0.0",
 "cache": {
 "resources": [
 "/static/css/index.css",
 "/static/js/index.js",
 "/static/images/icon.png",
 ...
 ],
 "ignored_query_params": [
 "param_1",
 "param2"
 ]
 }
 }
}

Расшифровка параметров манифеста

  1. name - Название сайта.
  2. lang - Основной язык.
  3. icons * -  Иконки в формате PNG. Примеры иконок см. в Figma.
  4. src - Абсолютный или относительный путь к иконке. Если вы используете относительный путь, указывайте значение относительно расположения манифеста.
  5. sizes - Размер иконки. Допустимые размеры: 192 × 192 px и 512 × 512 px. Иконки других размеров будут созданы автоматически.
  6. type - MIME-тип иконки. Рекомендуемый тип — image/png.
  7. start_url * - Ссылка на главную страницу. Если значение некорректно, используется URL документа, в котором указан URL манифеста. Подробнее о start_url.
  8. scope * - Область навигаций внутри сайта (базовый адрес). При навигациях на страницы внутри этой области будет применяться Native Cache. Область навигаций должна быть задана на том же домене, на котором располагается страница сайта, содержащая в верстке <linkrel="manifest" href="...">Подробнее о scope.
  9. yandex - Специальная секция Web App Manifest с дополнительными полями для JS API.
  10. manifest_version * - Версия формата манифеста (Integer). Текущая версия: 1.
  11. app_version * - Версия приложения (Int32). Можно использовать любой удобный формат версий.
  12. cache - Раздел манифеста, описывающий ресурсы для NativeCache.
  13. resources * - Массив ссылок на статические ресурсы сайта. Необходим для ускорения времени загрузки сайта и работы в офлайн-режиме.

Какие виды ссылок принимаются в манифесте

  • Со схемой https://yoursite.ru/path/to/resource.
  • Без схемы //yoursite.ru/path/to/resource — будет использована схема, по которой был загружен манифест.
  • Начинающиеся с / — абсолютные ссылки относительно хоста со схемой, откуда был загружен манифест.
  • Относительные ссылки (относительно URL манифеста).

Ссылки могут вести как на ресурсы с этого сайта, так и на внешние ресурсы.

  • ignored_query_params - Массив GET-параметров, которые нужно игнорировать при кэширование ресурсов по ссылкам.
  • * Обязательный параметр

Какой Web App Manifest можно использовать в uCoz ?

Пример содержимого моего файла:

{
  "name": "ABCLinux.org",
  "lang": "ru",
  "icons": [
    {
       "src": "/blog-json.png",
       "sizes": "512x512",
       "type": "image/png"
    }
  ],
  "start_url": "https://abclinux.org/pda",
  "scope": "https://abclinux.org/",
  "yandex": {
    "manifest_version": 1,
    "app_version": "1.0.0",
    "cache": {
      "resources": [
        "/_st/pda.css",
        "/fpda/css/font-awesome.min.css",
        "/.s/src/base.min.css",
        "/.s/src/layer1.min.css",
        "/.s/src/jquery-1.12.4.min.js",
        "/.s/src/uwnd.min.js",
        "/.s/src/ulightbox/ulightbox.min.css",
        "/.s/src/ulightbox/ulightbox.min.js",
        "/.s/src/social.css",
        "/fpda/js/slideout.js",
        "/fpda/js/scripts.js",
        "/.s/src/socCom.css",
        "/.s/src/socCom.js",
        "/fpda/js/scripts.js"
      ]
    }
  }
}

Описание используемых параметров в манифесте uCoz

С примера выше мы наблюдаем, что нужно прописать:

  1. В поле name название для вашего сайта;
  2. В поле lang основной язык;
  3. В поле src размер картинки для вашего сайта. Допустимые размеры: 192 × 192 px и 512 × 512 px;
  4. В поле sizes прописать размер картинки которую вы сформировали. Обратите внимание на допустимые размеры;
  5. Поле type неизменно, формат картинки должен быть png;
  6. В поле start_url должна быть ссылка на стартовую страницу. Например у меня активна пда версия, я прописал ссылку на pda версию, чтобы к примеру если мобильный пользователь зайдет на сайт, он сразу же попадет на мобильную версию сайта. Если у вас PDA не активна, прописывайте ссылку на главную сайта.
  7. В поле scope прописать ссылку на ваш сайт.
  8. Далее в блоке resources прописать ссылки на статические файлы стилей и скриптов которые используются у вас в шаблоне. Нужно прописать относительные ссылки как у меня в примере выше, но на свои файлы. Эти файлы яндекс в дальнейшем будет кешировать на устройствах посетителей и сайт ваш будет грузиться значительно быстрей.

Важно! У каждого сайта блок resources с ссылками на файлы скриптов и стилей отличается. Будьте внимательны и пропишите свои файлы которые у вас используются. Если не понимаете как это правильно сделать и какие файлы прописать, оставьте комментарий с ссылкой на сайт, посмотрим вместе как правильно составить манифест.

Загрузка и установка манифеста на сайт

Важно! После как все настройки выполните и пропишите, сохраняем это содержимое в файл с названием yandex-manifest.json ( как видно с примера, файл должен быть в формате json это обязательно ).

После нужно загрузить наш файл в корень фтп ( файловый менеджер ) сайта, в блоке хеад во всех страницах шаблонах активных модулей прописать строку для подключения манифеста:

<link rel="manifest" href="/yandex-manifest.json">

вот и все, готово.

Инструменты для проверки ошибок в манифесте

Для проверки манифеста, корректно ли вы его составили и нет ли ошибок, можно использовать форму которая доступа по адресу: https://turboapps.yandex.ru/console/check-manifest . Если ошибок нет, вы увидите примерно следующее:

там же можно проверить корректность файла манифеста как по прямой ссылке так и готовому коду который вы составили:

Страница ( панель управления ) новым функционалом для ускорения ( и не только ) сайта: https://turboapps.yandex.ru/console/applications

Тестирование установки манифеста

Работу манифеста можно проверить в приложениях Яндекс и Яндекс.Браузер.

  1. Введите в поисковую строку следующий адрес: browser://turboapp-internals .
  2. Нажмите кнопку Перейти.
  3. В поле URL введите адрес манифеста.
  4. Нажмите кнопку Add.
  5. Проверьте статус манифеста и загрузки ресурсов:
    • Корректный статус манифеста — Ready and actual. В противном случае манифест имеет некорректный формат, см. рекомендации по заполнению. Если статус Filling cache/Filling cache error — проверьте состояние загрузки ресурсов в поле View resource list.
    • Корректный статус загрузки ресурсов — Loaded.

Пример тестирования моего манифеста на изображении немного выше.

Будут вопросы, пишите в комментариях.

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Цитата: "Вы можете дополнить уже существующий Web App Manifest".
Вопрос: Где на сайтах Ucoz находится Web App Manifest?
И есть ли параметры этого манифеста, которые надо заполнять и для других (Google. Mail, и другие системы)?
Манифест, я так понимаю, хорош для пользователей пришедших на сайт повторно. Для впервые пришедших это не ускорит загрузку сайта.
avatar
  • Уникального для всех и вся нет, нужно пополнять скриптами которые есть у вас на сайте.
  • На сайтах Юкоз его нет, его нужно создать как текстовый документ заполнить как положено, далее сохранить в формате json и загрузить в корень фтп сайта.
  • Для того кто впервые зайдет на сайт, да сразу же не ускорит, нужно хоть 1 посещение сайта чтобы скрипты закешировались и файлы стилей.
avatar
Цитата: Уникального для всех и вся нет, нужно пополнять скриптами которые есть у вас на сайте.

То есть надо вносить адреса всех существующих появляющихся впоследствии скриптов в Web App Manifest? Таким образом как бы обновляя его?
И меня смущает, что в этой статье создан манифест с названием yandex-manifest.json. А что другие браузеры не будут его воспринимать? Как тут поступить? Надо ли создать ещё файл с названием просто: manifest.json?
avatar
  • Правильно понимаете, полнить файл скриптами которые используются и по мере появления новых, так же нужно будет добавить.
  • На данный момент с данным манифестом работает лишь яндекс, это яндекс придумал эту технологию ускорения, соответственно она не работает в других браузерах.
В
Если сайт на битриксе, то манифест заполняется стандартно или есть особенности?
avatar
Нужно изучать сам Битрикс, возможно там есть готовый модуль который делает эту работу автоматически. Если модуля или плагина нет, тогда вручную свои скрипты и стили, пути к ним прописать.
В
вот мой сайт https://velo150.ru/ подскажите какие скрипты и стили мне нужно прописать?