DEV Community

Julie Cherner
Julie Cherner

Posted on • Edited on

1

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.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay