React Faster- React Webapp Performance

Course Overview

The web has evolved. Today’s web applications are more powerful than ever and do a lot more than just show some content. The users of the web have also evolved. They know there are alternatives and they expect an excellent experience from the services they are using.

A large part of the user experience comes from how fast a web app is. Research has shown that the performance of a web app has a direct effect over user engagement and thus over the business aspects. This is the reason most companies today take performance seriously and employ a range of techniques to keep it in shape.

In this course, we will learn what we mean when we say performance, why it’s important, and how we can keep it under control. We will learn many tools, techniques, and best practices, which are available for us as web developers to optimize performance in React apps, and in general.

  • Who should attend

    Front end developers.

  • Prerequisites

    • Basic familiarity with JS.
    • Basic familiarity with the WEB world including HTTP, CSS, HTML.
    • Some React experience is recommended.

Course Content

  • Intro
    • What we mean by performance.
    • Why it’s important.
    • Perceived vs real performance.
    • How fast is fast enough?
    • The RAIL model.
    • Browser rendering pipeline.
    • Performance budget.
    • Milestones.
    • The importance of measuring.
    • The three aspects of web app performance.

     

    Tools
    • Performance audit.
    • Performance in devtools.
    • External services.

     

    Delivery
    • Anatomy of web page loading.
    • Server-Side Rendering.
    • SSR frameworks.
    • Static site.
    • Classic vs SPA.
    • Bundle size.
    • Code splitting.
    • Assets optimization.
    • Using sprites.
    • Understanding cache headers.
    • Service worker cache.
    • Using a CDN.
    • Above the fold rendering.
    • Prefetching.
  • Runtime
    • React components.
    • React profiling tools.
    • Virtual dom.
    • Reconciliation.
    • Wasteful renders.
    • Wasteful DOM updates.
    • Memoization.
    • Virtualization.
    • Using placeholders.
    • Dealing with hotspots.
    • Webworkers.
    • Webassembly.
    • Timing calculations.
    • Request an animation frame.
    • Request idle callback.

     

    Development
    • Webpack plugins.
    • Webpack performance.
    • Hot module reload.
    • Using TypeScript.
    • Prettier.

Want to learn how to improve your webapp?