Руководящие принципы для пользовательского впечатления о быстрой загрузочной структуре UI

Question

Фактическое время загрузки веб-страницы и впечатление пользователя о времени загрузки могут быть совершенно разными. Например, вот три разных опыт пользователь может иметь во время загрузки страницы:

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

этих различные переживания UI становятся более распространенными, как фреймворк становятся все более распространенными, такими как Реагировать или угловые.

Пользовательский интерфейс пользователя может также измениться, если отдельные компоненты используют маркеры загрузки, чтобы указать, что что-то происходит, например Loading... или вращающееся колесо.

Каковы некоторые рекомендации по улучшению впечатления пользователя о странице быстрой загрузки? Если их нет, как вы относитесь к этой проблеме?

Answer 1

Всегда будет начальный хит, в то время как javascript будет разобран и выполнен. Однако, если вы после очень быстрых начальных нагрузках вы можете попробовать несколько методов, таких как:

• Доставка «критическую» полезную нагрузку первый, который будет быстро загрузить «первой необходимости» вашего веб-страницы, чтобы сделать его чувствовать себя намного более отзывчивым , Webpack имеет функцию разделения кода, которую можно использовать для этого эффекта.
• Использование рендеринга на стороне сервера (т. Е. Приложений универсального стиля), который будет выполнять серверную часть javascript и встраивать вывод в полезную нагрузку HTML. Вероятно, это дает наилучшие результаты за то, что вы делаете после того, как вы не получите «мигающие» части столько, сколько в противном случае. Это довольно крутая техника, но, вероятно, представляет больше технических проблем, поэтому вам придется решать свои собственные компромиссы.

Если вы после примера SSR вы можете посмотреть на шаблонный Недавно я поставил вместе React: https://github.com/ctrlplusb/react-universally

В этом шаблонного я на самом деле также использовать функцию кода разделения WebPack основан на маршрутах, определенных в приложении. документы Checkout WebPack по этому: https://webpack.github.io/docs/code-splitting.html

Если WebPack является совершенно новым для вас, я настоятельно рекомендую серию выжить ЯШ: https://survivejs.com/