Steps and approaches to web app optimization

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.