Advanced React Meetup

More than 3 seconds to load - will lose visitors

How to optimise react app and measure it

Contentful paint Bad lcp = bad seo

How to optimise:

Reduce size of images

Use cdn links

Block javascript heavy calls

Server side rendering

Preload strategy

First input delay

Reduce js execution

Use web workers and tools

Lazy load

How often layout shift takes place

Reduce expensive animations

Web vitals google chrome extension or google lighthouse

Can get metrics, write it down, make edits and then see difference after edit. Can put this in readme / portfolio - improved speed by this much.

Unlighthouse - like Google lighthouse but does every page on website.

See the million library - Million.dev : can make react 70% faster

Astro talk By David Kesi Cloudflare

Used for content heavy websites

Traditional frameworks return js for all items, when not everything needs js

Islands Contain dynamic content Bring your own framework There are different client directives

In chrome dev tools - can click sources to see the files

Can be used when nextjs is overkill

Can mix different frameworks - have one within another

Astro db View transition Optimised images Mdx support

Hyperdrive speedometer