Despite high speed internet, low loading web page speed nowadays is not a rare issue.
Main reasons of low speed may be:
- Video and images size
- Too large bundle size
- Slow response from 3rd party
- Unnessible dependencies and files
Steps to solve these problems may be:
- Using CDN
- Optimizing image size
- Gziping files
- Using external optimized video players
- Minifiers
- Lazy loading
- Writing reusable code and removing unused imports, variables, packages
- Using Browser caching or storage connected Browser API.
- Implementing SSR or SSG
Tools for checking:
- Google Speed Test | https://pagespeed.web.dev/
- Lighthouse (available in Chrome DevTools as well) | https://developer.chrome.com/docs/lighthouse/
The next step may be analyzing the bundle by the size of each file and getting its diagram with a percentage per file.
This can point to the specific file and its possible performance problems.
A tool for Javascript libraries/frameworks may be source-map-explorer package. Check docs on npm.
For projects using Webpack, we can get statistics from its CLI:
webpack --json --config webpack.config.js > stats.json
Or get visualized version with webpack-bundle-analyzer package npm docs.
Another approach may be analyzing dependencies and their bundle size (minified and gzipped/not) and download time on Bundlephobia.
Top comments (0)