Awesome

Guide To Async Components

Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments".

Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic import.

Routes to chunks - separate into "chunks" based on routes, possible to do automatically. Example: Next.js.
Components to chunks - separate components as "chunks". Example: react-loadable.
🦄 UI tip (components to chunks): show spinner if content not loaded, but do not start spinner earlier then 200ms
🦄 UI tip (routes to chunks): do not show spinner in the center of your page between the content switch, use progress line in the top, like YouTube does. Example: PACE.
⚡ Speed tip: prefer component placeholder over spinner if possible
⚡ Speed tip (routes to chunks): you can preload chunk (e.g. next page) on link hover
💣 Caveat (components to chunks): make sure you wait till all components loaded in case of prerendered pages (SSR or snapshots)
🎱 Trick (components to chunks): some components can be skipped in case of SSR, for example, Mapbox map

Component placeholder, also called skeleton screens. Use react-content-loader, react-loading-skeleton
Spinner. Use CSS3, like spinkit, loaders, css-loaders

See also:

Lazy load - load images only when they appear on the screen. Use Intersection Observer API or react-waypoint
Load on demand. Useful for slow networks or big files, like video or gif.
🦄 UI tip (load on demand): Use download ⬇️ icon for images and play ▶️ icon for animations.
🦄 UI tip: Show error state when image load failed, so the user can click to retry load. Use error ⚠️ or repeat 🔁 icons
🦄 UI tip: Do not try to download the image if the device is offline and image not in the cache. Use cloud off 🚫 icon
💣 UI caveat: make sure that icon and background are in good contrast, especially if you use not constant placeholders. For example, in case of solid color placeholder, you can make sure you pickup contrast color (this what Twitter does) or use a semitransparent gray overlay for bright backgrounds.
⚡ Speed tip: always use width and height. Use image-size, probe-image-size
⚡ Speed tip: use small placeholders (plus width and height)
⚡ Speed tip: optimize images. See essential image optimization
⚡ Speed tip: use MP4 without sound instead of GIF images
⚡ Speed tip: provide WebP images instead of JPG images

See also:

Constant placeholder - do not use it
Solid color or dominant color - fastest and simplest placeholders. Use color-thief to get color info. Used by Twitter, Google, Pinterest
LQIP or Low Quality Image Placeholder or Progressive image loading or "Blur-up" - better for perceptual speed than dominant color, but also have a bigger weight. Use lqip or sqip. Used by Facebook and Medium.
SVG traced images. There is plugin for Gatsby.

See also:

Fit to column width, preserves ratio. Easy for images, for other media use something like responsive-embed
Fit to vertical grid, preserves ratio. Example: Gutenberg
Intelligent cropping (doesn't preserve ratio) - crop to required size taking into account focal point. Example: focal-point, focal point intelligent cropping.
Choose size based on viewport, can change or preserve ratio. Examples: <img> with srcset, <picture> with srcset and sizes attributes, CSS @media queries and background-image
Choose type of media based on viewport or capabilities, can change or preserve ratio. Example: Foundation interchange, <Media render/>, <source type>.

See also:

A special case of async components. Example: react-virtualized