asset-optimization
Assets optimization#
Images
- Compression
- progressive enhancement (avif > webp > jpeg/png)
- DPR (device pixel ratio - window.devicePixelRatio and tehn make informed decision what image to load)
- blur effect (create a small part of the image beforehand, and use that as a zoomed fallback of the img until its loaded completely)
- adaptive images (based on the nextwork speed of user, take a decision)
- solid primary color (same as blur effect, use a solid primary color based on the original image until its loaded)
- lazy loading
- client http hint
- responsive images
- css sprites (clubbing small imaghes in one and using css show the image)
- using picture tag
Videos
- progressive enhancement (webm > mp4)
- replace gifs with videos (gifs dont support audio, has higher file size for long video, has lower image quality; so use html5 video like webm and mp4 for video preview)
- videos with no audio (for a video supporting multiple language audios, separate the video and audio and download separately)
- responsive poster image for video
- streaming
- preload
- platform based video dimensions (baes on the videport width and device, load the size of video)
Fonts
- font display decorator
- flout with class
- data uri
- preload
- progressive enhancement
- async load css
- font face observer
Css
- lazy loading
- critical css rendering
Javascript
- defer vs async
- web worker