Прогрессивный рендеринг для повышения производительности веб-приложений

Прогрессивный рендеринг для повышения производительности веб-приложений

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

Но знаете ли вы, что вы можете значительно улучшить время загрузки страницы своего веб-приложения, используя прогрессивный рендеринг?

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

Рендеринг на стороне клиента

Рендеринг на стороне клиента или CSR — это метод, при котором контент отображается в браузере с использованием JavaScript. Вместо того, чтобы получать все содержимое из самого файла HTML, сервер отправляет HTML с пустыми тегами body и тегами скриптов, включая пакеты JavaScript в head, через которые браузер может отображать содержимое.

Теперь давайте посмотрим, как происходит рендеринг страницы на стороне клиента:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Сервер отправляет HTML-код с тегами сценария для загрузки пакета JS с пустым телом.

Браузер анализирует HTML и делает HTTP-запросы для получения пакета JS. Пользователь видит только частичное содержимое оболочки HTML, либо пустую страницу, либо индикатор загрузки.

Только после того, как основной пакет JS получен и визуализирован, пользователь видит реальный, значимый контент.

В CSR после загрузки начального JS содержимое может загружаться асинхронно. Мы можем сначала загрузить критический контент, а потом некритический.

Прогрессивный рендеринг для повышения производительности веб-приложений

Рендеринг на стороне клиента

CSR может принести пользу пользователям, кэшируя первоначально загруженные пакеты JS и статический HTML-код в браузере, поэтому навигация между страницами становится очень быстрой.

Однако в CSR содержимое начинает загружаться только после завершения выполнения всего пакета JavaScript. А до тех пор пользователи должны сидеть утомившись, просто смотреть на пустой экран без обновлений о том, что происходит.

По мере увеличения размера пакета пользователям придется ждать все больше и больше, прежде чем они увидят что-нибудь значимое или начнут использовать страницу.

Что, если мы сможем отображать контент в браузере независимо от пакета JS? Здесь на помощь приходит рендеринг на стороне сервера!

Рендеринг на стороне сервера

При рендеринге на стороне сервера полный HTML-код отображается на сервере и отправляется клиенту. Контент, который нам нужно отображать на экране, становится доступен сразу после анализа HTML; следовательно, первая отрисовка контента загружается быстрее, чем CSR.

Теперь разберемся, как работает SSR:

Браузер запрашивает HTML с сервера.

Сервер делает запросы API и отображает HTML-контент.

Скомпилированный HTML-код затем отправляется в браузер.

Как только браузер загружает и анализирует HTML, веб-приложение становится доступным для конечного пользователя, не дожидаясь загрузки пакетов JS.

Затем браузер загружает и запускает пакеты JS, чтобы сделать страницу интерактивной.

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

Прогрессивный рендеринг для повышения производительности веб-приложений

Серверный рендеринг

В SSR, хотя мы получаем быструю первую отрисовку содержимого, страница не является интерактивной, пока мы не загрузим пакеты JS и не выполним их в браузере.

Мы действительно можем преодолеть недостатки CSR с помощью SSR. Но все же, есть некоторые серьезные недостатки, такие как рендеринг как критического, так и некритического контента перед его отправкой клиенту.

Я знаю, о чем вы сейчас думаете. Как здорово, если есть подход, в котором мы можем смешать обе упомянутые выше техники, верно? У меня есть хорошие новости для вас! Используя прогрессивный рендеринг, вы можете объединить преимущества как CSR, так и SSR.

Теперь давайте рассмотрим, как мы можем улучшить взаимодействие с пользователем, используя технику прогрессивного рендеринга.

Прогрессивный рендеринг на стороне сервера

«Прогрессивный рендеринг на стороне сервера — ключом к ускорению веб-страницы является метод последовательного рендеринга частей веб-страницы на стороне сервера и отправки их клиенту по частям, не дожидаясь, пока будет отрисована вся страница».

Прогрессивный рендеринг на стороне сервера (PSSR) основан на концепции HTML streaming. PSSR разбивает страницы на значимые компоненты с помощью разделения кода. Эти части страницы управляются отдельным скриптом, и теперь у нас есть возможность гидратировать их независимо на основе некоторого приоритета, который мы определили ранее.

Давайте быстро посмотрим, как работает PSSR:

Браузер запрашивает у сервера HTML-код.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Сервер делает запросы API и сначала обрабатывает критический контент, а затем отправляет его клиенту.

Браузер анализирует HTML и рисует его на экране.

Сервер отображает некритический контент и передает его браузеру.

Затем браузер анализирует и отрисовывает некритичный контент.

Между тем, пакеты JS загружаются и выполняются в фоновом режиме, а браузер передает интерактивность элементам DOM.

PSSR повышает производительность вашего веб-приложения за счет параллельной выборки и рендеринга компонентов страницы. Этот подход известен как метод прогрессивной гидратации. Этот метод прогрессивной гидратации приводит к:

Задержке гидратации компонента до тех пор, пока он не появится в поле зрения или не понадобится для взаимодействия с пользователем.

Загрузке контента при взаимодействии с пользователем (прокрутка) — намного быстрее, чем CSR и SSR

Улучшению TTI, как показывает тестирование.

Лучшему пользовательскому опыту даже в медленных сетях.

В дополнение к этому вы можете использовать подход критического пути рендеринга с PSSR, чтобы еще больше оптимизировать производительность вашего приложения.

Критический путь рендеринга

Оптимизация критического пути рендеринга относится к приоритизации дисплеев контента, которые связаны с текущей деятельностью пользователя. Браузер выполняет много негласной работы, чтобы предоставить пользователю быстрый доступ в Интернет. Критический рендеринг — это непосредственные шаги между получением байтов HTML, CSS и JS и обработкой, необходимой для их преобразования в визуализированные пиксели.

Прогрессивный рендеринг для повышения производительности веб-приложений

Оптимизация критического пути рендеринга

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

Поскольку теперь у вас есть хорошее представление о клиентском, серверном и прогрессивном рендеринге, вы должны думать, что есть способ оценить эти характеристики рендеринга. Ответ ДА!

Chrome DevTools предоставляет отдельную вкладку для мониторинга и оценки производительности рендеринга, и давайте посмотрим, как мы можем ее использовать.

Анализ производительности с помощью Chrome DevTools

Даже в небольшом приложении под капотом выполняется множество действий, связанных с рендерингом. Вкладку «Рендеринг» в Chrome DevTools можно использовать для выявления проблем, связанных с рендерингом, в приложениях JavaScript.

По мере того как интерфейс становится более многофункциональным и сложным, жизненно важно рассмотреть способы оптимизации взаимодействия с пользователем за счет уменьшения времени загрузки и оптимизации критического пути компонентов. Отрисовка пикселей на экране — один из самых дорогостоящих процессов. Вы можете использовать Paint Flashing, удобный инструмент, доступный во вкладке Rendering Chrome DevTools, чтобы визуализировать его.

Прогрессивный рендеринг для повышения производительности веб-приложений

Параметр «Paint flashing» на вкладке «Визуализация»

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

Прогрессивный рендеринг для повышения производительности веб-приложений

Paint Flashing на домашней странице Medium

Проблемы с производительностью прокрутки в DevTools — еще один удобный инструмент, который можно использовать для выявления любых проблем, связанных с производительностью прокрутки. Когда этот параметр выбран, отображается метка «Перерисовывает при прокрутке» и выделяется зеленым цветом то, что отображается при прокрутке.

Прогрессивный рендеринг для повышения производительности веб-приложений

Проблема с производительностью прокрутки на главной странице Dribble

Отслеживая подобные проблемы с производительностью, вы можете быть уверены, что ваше веб-приложение предоставляет пользователям наилучшие возможности.

Заключение

При разработке веб-приложения понимание основных концепций того, как работает его отрисовка, поможет вам оптимизировать производительность веб-страницы.

Согласно статистике, задержка загрузки страницы в одну секунду снизит коэффициент конверсии на 7%. С другой стороны, длительное время загрузки может иметь разрушительное влияние на коэффициент конверсии приложения.

В этой статье я упомянула три метода рендеринга и объяснила, почему прогрессивный рендеринг на стороне сервера имеет больше преимуществ по сравнению с двумя другими методами и как он помогает повысить производительность вашего веб-приложения. Спасибо за внимание!

Автор: Nethmi Wijesinghe

Источник: blog.bitsrc.io

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Освойте востребованные навыки дизайн и верстки

Комплексный процесс дизайна и верстки на примере лендинга!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.