Guide To Async Components

JavaScript 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.

See also: Redux modules and code-splitting, lazy loading guidance

Solutions

• react-loadable
• loadable-components
• react-async-component
• react-code-splitting
• react-loadable-visibility

Strategies

• 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

Placeholders

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

See also:

• A Bone to Pick with Skeleton Screens

Media: images, video

Strategies

• 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:

• <img lazyload>

Placeholders

• 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:

• Overview of different types of placeholders

Responsive (resize) strategies

• 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:

• The anatomy of responsive images
• responsiveimages.org
• picturefill

Solutions

• react-ideal-image

Resizing images on the fly

Examples from real world

• Real-time Resizing of Flickr Images Using GPUs
• How Discord Resizes 150 Million Images Every Day with Go and C++

AWS Lambda + S3

• Resize Images on the Fly with Amazon S3, AWS Lambda, and Amazon API Gateway

Golang + FaaS

Go is the perfect fit for this kind of task. AWS Lambda now supports Go. Also you can use Go with Google Cloud functions.

• Fast, simple, scalable, efficient HTTP microservice for high-level image processing with first-class support for Docker
• Fast and secure standalone server for resizing and converting remote images
• Golang graphics
• Go Bindings for Vips (a super fast image processor)
• caire content aware image resize library

Infinite scroll

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