DEV Community

Julie Cherner
Julie Cherner

Posted on • Edited on

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:

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
Enter fullscreen mode Exit fullscreen mode

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)