Steps and approaches to web app optimization

juliecherner

Julie Cherner

Posted on August 28, 2023

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.

💖 💪 🙅 🚩
juliecherner
Julie Cherner

Posted on August 28, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024