Performance Optimization Tips & Tricks
Note: I'm not a very familiar with
webpack, so I skipped most of the tips concering
In Performance, once you've recorded a profile, go to Timings too see which components were rendered and when (good for debugging) - unfortunately this will be removed from React link.
Component renders: Go to React DevTools settings and check "Highlight updates...". Now, whenever you do something, every component that re-renders will flash for a bit.
Another way to figure out why a component re-renders is to use
- Replace it with
react-domis the single largest dependency. Just by removing it, you can reduce your load time quite significantly).
Compress them using Cloudflare (\$20/month), use Polish option.
Optimize image sizes with
<img srcset>(don't serve gigantic images for tiny screens).
If you’re preloading fonts, make sure you use the
crossorigin="anonymous"attribute (without that attribute, preloaded fonts will be ignored).
A great way to speed up custom fonts is to use
For older websites add
&display=swap(or another value) parameter to get
Other DevTools Magic
- If your app is lagging, that might be due to "repainting too much on the screen": Dev tools → More tools → Rendering → Paint Flashing
To see how much of your CSS and JS has been used to render a page: DevTools → Ctrl/⌘+P → Coverage → "Start instrumenting...".
bundle buddy shows duplicated modules
also bundle wizard
Moments.js: day.js is similar but smaller.
lodash: babel-plugin-lodash transforms your Lodash imports to make sure you’re only bundling methods that you actually use (= 10-20 functions instead of 300).
lodash(to avoid lodash being bundled multiple times).
Check how much they are affecting your loading speed: Network → Sort by domain → Right-click each third-party → Select "Block request domain". Then run lighthouse audit to compare.
Defer 3rd parties:
- More details here, or just wrap your third party loading code with
-has-response-header: Content-Encodinginto the filter in the Network panel to see if resources are missing gzip/Brotli compression.
To check whether all requests use a single HTTP/2 connection, or something’s misconfigured, enable the "Connection ID" column in DevTools → Network.
Use polyfill.io to reduce the amount of polyfills.
If you have any
touch*listeners, make sure to pass
passive: trueto addEventListener, more here.