«Основы веб-производительности» посвящена ключевым аспектам повышения скорости и отзывчивости веб-приложений в контексте React-разработки - но при этом это вовсе не книга о самом React-коде. Напротив, она рассматривает всё, что окружает React-приложение и влияет на его производительность:
Метрики и инструменты: вы узнаете, зачем вообще замерять скорость, как работать с отчётами CrUX, Chrome DevTools (панели Performance и Lighthouse), а также что значат такие показатели, как FCP, LCP и INP.
Первичная загрузка: разберёте влияние сетевых условий, CDN и управления кэшем (Cache-Control) на время первой отрисовки страницы.
Флэйм-графы и CSR: научитесь записывать и правильно интерпретировать цветные “монстры“ производительности, поймёте клиентский рендеринг (CSR) и переход к SPA.
Серверный рендеринг (SSR): реализуете собственную стратегию предварительного рендеринга, оцените его издержки и преимущества, узнаете про гидрацию и её влияние на метрики.
Размер бандла: исследуете, насколько объём JavaScript-файлов влияет на загрузку, освоите анализ бандлов, сжатие, отличия HTTP/1, HTTP/2 и HTTP/3, предзагрузку, tree-shaking, code splitting и управление зависимостями.
Lazy Loading и Suspense: шаг за шагом разберёте методы «ленивой» загрузки модулей, поймёте нюансы реализации в разных фреймворках (Next.js, React Router, Tanstack).
Работа с данными: сравните клиентские и серверные стратегии Получения данных, познакомитесь с React Server Components и стримингом, протестируете практические примеры на Next.js и Tanstack.
Интерактивность: изучите Long Tasks, оптимизацию работы основного потока, инструменты React DevTools для борьбы с лишними повторными рендерами, а также экспериментальный React Compiler.
Пошаговые примеры, наглядные исследования производительности и «погружение» в инструменты помогут вам глубоко понять, как всё «за кулисами» влияет на скорость приложения - и научат самостоятельно находить и устранять узкие места.
Привет, меня зовут Надя! Я фронтенд архитектор, программист, писатель и образовательный работник. Ранее я работала в компании Atlassian, где мне довелось познакомиться с разными аспектами фронтенд-разработки в разных командах, включая Atlaskit, команду навигации Jira, команду Jira Ops и команду Jira Frontend Platform. Последняя была ответственна за архитектуру, сборки, развертывание и лучшие практики всего фронтенда Jira (миллионы строк кода!).
frontendmasters
Создавайте более быстрые веб-сайты и приложения, изучив актуальные метрики и техники для улучшения веб-производительности. Мы рассмотрим психологию восприятия производительности и то, как пользователи воспринимают время ожидания на вашем сайте. Затем вы познакомитесь с новыми Core Web Vitals, которые Google использует для оценки вашей страницы, такими как Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и Interaction to Next Paint (I
В этом семинаре вы погрузитесь в передовые техники оптимизации производительности веб-приложений вместе с Максимилиано Фиртманом. Вы узнаете о последних метриках веб-показателей, которые имеют значение для производительности веб-приложений, научитесь идентифицировать и устранять проблемы производительности в своих приложениях, реализовывать best практики и улучшать скорость загрузки и опыт пользователя. Вы также изучите различные инструменты и ре
frontendmasters
У вас есть веб-приложение или веб-сайт. Он отлично выглядит и делает то, что нужно. Но достаточно ли он быстр для пользователя? Что вообще значит «быстро»? А сколько хватит? Мы обсудим, как установить цели производительности, соответствующие вашим бизнес-целям, какие показатели важны для вас и тактику повышения производительности вашего сайта.
Узнайте о влиянии CSS на производительность сайта. Производительность является очень важным аспектом каждого веб-приложения. Веб-страница должна быть загружена как можно быстрее, а анимация должна работать плавно. Люди очень чувствительны к любому виду движения. Для любого вида визуальных изменений на экране, таких как прокрутка, эффект наведения, открытие боковой панели и т.д., браузер будет отображать новый кадр на экране. Когда рендеринг кадра
frontendmasters
Научитесь решать наиболее распространенные проблемы производительности веб-сайта, c основным разработчиком Webpack 4! Вы научитесь создавать сайты с мгновенной загрузкой путем ленивой загрузки JavaScript с разбиением кода, удаления неиспользуемого кода и предварительной выборки активов с помощью магических комментариев. Webpack был создан специально для веб-производительности, и этот курс Шон научит вас использовать все мощные функции оптимизации
