[Перевод] Ускоряем фронтенд. Когда много запросов к серверу — это хорошо


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

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

Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:

Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то

Сократить запросы, блокирующие рендеринг

Избегать последовательных цепочек

Повторно использовать соединения с сервером

Сервис-воркеры для мгновенного рендеринга

Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение

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

Проверить, что хэши частей пакета не меняются без необходимости

Запрашивать данные для страницы до загрузки всего приложения

Не блокировать рендеринг загрузкой второстепенных данных

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

Следующая страница: сколько времени требуется для перехода на следующую страницу

Запрашивать дополнительный код до того, как он понадобится

Кэшировать и повторно использовать данные на клиенте

Читать дальше →


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

[Перевод] 7 советов по оптимизации CSS для ускорения загрузки страниц

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

Блог им. linuxxspb / HttpHandler для сжатия и компрессии *.js и *.css файлов

Всем известно, что «большая часть времени уходит на загрузку компонентов страницы: картинок, таблиц стилей, скриптов, flash… Уменьшение количества этих компонентов уменьшает количество запросов к... читать далее

Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными

Как CSS-сетка, так и CSS-переменные представляют собой мощные инструменты для frontend-разработчиков. Первое позволяет значительно упростить создание макетов веб-сайта, в то время как второе дает всю... читать далее

Основы разработки веб-приложений

Всех с понедельником. На прошлой неделе у нас вышел перевод книги «Learning Web App Development». Книга доступна в печатном виде и электронном (pdf+epub). Аннотация: Благодаря этой книге вы усвоите... читать далее

[Перевод] Медиа-запросы в адаптивном дизайне 2018

В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень... читать далее

«Быстрорастворимый» фронтенд. Лекция в Яндексе

Ускорить доставку элементов фронтенда на устройство пользователя можно несколькими способами. Разработчик Артём Белов из самарского офиса норвежской компании Cxense попробовал самые многообещающие:... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте