Minify :
Caching :
- Efficient Caching policy to ensure that we don’t send resources twice if unnecessary.
- Ideally you should aim at caching as many resources as securely possible for the longest possible period of time and provide validation tokens for efficient
Remove unused code :
- Use chrome code coverage tool to check unused code
Avoid enormous network payloads :
- Make an inventory of all assets
- Measure value & impact of assets
- Audit using
webpack analyzer & bundlephobia
Lower JavaScript boot-up time with code splitting
- Why Js boot-up take time ?
- Download JS -> parse -> compile -> execute
- Code-splitting
- split routes
- split components
- split vendor bundles
- Tree shaking
- Serve modern, small JS bundles
Optimize images
- Image optimization
- Tool : imageOptim
- npm Package : imagemin
- Animation
- FFmpeg tool to convert our animation GIF into the mp4 file.
- Lazy-load off-screen images
- Lazysizes library to only load image as per viewport
Help browser deliver critical resources early
- Hey, browser! Here’s a resource you’re going to need later on, so start loading it now.
- Use link
preconnect, orpreload or prefetch <link rel="preload" href="late_discovered_thing.js" as="script">- preconnect
- Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server.
- This includes DNS lookups, TLS negotiations, TCP handshakes.
- This in turn eliminates roundtrip latency and saves time for users.
- preload:
- Use for fonts, image, js, css
- Preload key web fonts requests
- The preload keyword is being added to the Link HTTP header and link HTML element.
- This keyword provides a declarative fetch primitive that initiates an early fetch and separates fetching from resource execution.
- The preload link element provides async-like semantics for non-script elements.
- prefetch:
- fetch resources, store them in cache for future use
- prerender
- Prerendering is very similar to prefetching in that it gathers resources that the user may navigate to next.
- The difference is that prerendering actually renders the entire page in the background, all the assets of a document.
Experimental: Priority Hints
<img src="/", importance="high">fetch( 'url', {importance: 'low'})
Reduce render-blocking scripts
cricical : NPM module called Critical to inline our critical content in index.html- Inline first paint styles in our HTML, the browser is able to render them straight away without waiting for the external stylesheets to arrive.
Use Base64 wisely : Check bottom for notes
On Webpage things to avoid
- Repaint
- browser just repaints the element again with the new styles applied
- Reflow
- changes affect document contents or structure, or element position, a reflow (or relayout) happens
- DOM manipulation (element addition, deletion, altering, or changing element order);
- Contents changes, including text changes in form fields;
- Calculation or altering of CSS properties;
- Adding or removing style sheets;
- Changing the "class" attribute;
- Browser window manipulation (resizing, scrolling);
- Pseudo-class activation (:hover).
- Animate only absolute/fixed positioned elements if you can.
- disable complicated :hover animations while scrolling (e.g. by adding an extra "no-hover" class to body)