Переходы страниц не блокируются в сети.

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

Рекомендации

Чтобы обнаружить медленные переходы страниц, перемещайтесь по веб-приложению, используя имитацию медленной сети. Чтобы сделать это в Chrome:

[комментарий]: <> (Первые два элемента списка взяты из короткого кода с сайта web.dev, но он не был переведен с английского ни на один язык.) 1. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac). ), чтобы открыть DevTools. 2. Откройте вкладку Сеть . 3. В раскрывающемся списке «Регулирование» выберите «Медленный 3G» .

Каждый раз, когда вы нажимаете ссылку или кнопку в приложении, проверяйте, чтобы страница немедленно реагировала одним из двух способов:

  • Страница немедленно переходит к следующему экрану и отображает экран загрузки во время ожидания контента из сети.
  • На странице отображается индикатор загрузки, пока приложение ожидает ответа от сети.

Если вы работаете над одностраничным приложением, визуализируемым клиентом, немедленно переведите пользователя на следующую страницу и покажите скелетный экран . Обязательно немедленно отобразите весь уже доступный контент, например заголовок или миниатюру страницы, пока загружается остальной контент.

Ресурсы

,

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

Рекомендации

Чтобы обнаружить медленные переходы страниц, перемещайтесь по веб-приложению, используя имитацию медленной сети. Чтобы сделать это в Chrome:

[комментарий]: <> (Первые два элемента списка взяты из короткого кода с сайта web.dev, но он не был переведен с английского ни на один язык.) 1. Нажмите Control + Shift + J (или Command + Option + J на ​​Mac). ), чтобы открыть DevTools. 2. Откройте вкладку Сеть . 3. В раскрывающемся списке «Регулирование» выберите «Медленный 3G» .

Каждый раз, когда вы нажимаете ссылку или кнопку в приложении, проверяйте, что страница немедленно реагирует одним из двух способов:

  • Страница немедленно переходит к следующему экрану и отображает экран загрузки во время ожидания контента из сети.
  • На странице отображается индикатор загрузки, пока приложение ожидает ответа от сети.

Если вы работаете над одностраничным приложением, визуализируемым клиентом, немедленно переведите пользователя на следующую страницу и покажите скелетный экран . Обязательно немедленно отобразите весь уже доступный контент, например заголовок или миниатюру страницы, пока загружается остальной контент.

Ресурсы