От автора: неважно, насколько хорош ваш сайт; если загрузка занимает слишком много времени, никто не будет ждать, чтобы увидеть его. Если ваш сайт загружается более 3 секунд, велика вероятность, что вы потеряете почти половину посетителей.
Но знаете ли вы, что вы можете значительно улучшить время загрузки страницы своего веб-приложения, используя прогрессивный рендеринг?
Прогрессивный рендеринг не только увеличил скорость загрузки страницы, но также решил некоторые серьезные проблемы в методах рендеринга на стороне клиента и на стороне сервера. Чтобы лучше понять прогрессивный рендеринг, давайте посмотрим, как работает рендеринг на стороне клиента и на стороне сервера.
Рендеринг на стороне клиента
Рендеринг на стороне клиента или CSR — это метод, при котором контент отображается в браузере с использованием JavaScript. Вместо того, чтобы получать все содержимое из самого файла HTML, сервер отправляет HTML с пустыми тегами body и тегами скриптов, включая пакеты JavaScript в head, через которые браузер может отображать содержимое.
Теперь давайте посмотрим, как происходит рендеринг страницы на стороне клиента:
Когда пользователь переходит на веб-страницу, запускается первоначальный запрос на получение 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-код.
Сервер делает запросы 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.