Быстрые переходы между страницами являются ключом к тому, как пользователи воспринимают производительность вашего прогрессивного веб-приложения (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» .
Каждый раз, когда вы нажимаете ссылку или кнопку в приложении, проверяйте, что страница немедленно реагирует одним из двух способов:
- Страница немедленно переходит к следующему экрану и отображает экран загрузки во время ожидания контента из сети.
- На странице отображается индикатор загрузки, пока приложение ожидает ответа от сети.
Если вы работаете над одностраничным приложением, визуализируемым клиентом, немедленно переведите пользователя на следующую страницу и покажите скелетный экран . Обязательно немедленно отобразите весь уже доступный контент, например заголовок или миниатюру страницы, пока загружается остальной контент.