Importance of frontend performance optimization

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Clean code begins in your IDE with SonarLint
  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    Too many css and script links in HTML file - This may cause too many http requests being made in order to load necessary style sheets and JavaScript code. This can be handled by bundling multiple css files and js files into single ones. Doing it manually might take forever to do. This is why I started to get interested into JavaScript bundlers. The most popular ones are Webpack, Parcel, and my latest favorite pick - Vite.

  • vite

    Next generation frontend tooling. It's fast!

    Too many css and script links in HTML file - This may cause too many http requests being made in order to load necessary style sheets and JavaScript code. This can be handled by bundling multiple css files and js files into single ones. Doing it manually might take forever to do. This is why I started to get interested into JavaScript bundlers. The most popular ones are Webpack, Parcel, and my latest favorite pick - Vite.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • go-unsplash

    Go Client for the Unsplash API

    Too large image sizes - Pay attention on images sizes. Sometimes images downloaded from Unsplash or Pexels can be up to 6000px wide or even bigger. This is definitely too much even for a desktop or laptop screen. Reducing image width down (with a graphic editor of your choice) to 1920px will make huge difference in file size. Reducing picture size for mobile devices an using responsive picture tags will increase performance on mobile devices. Additionally it's worth compressing image file sizes without quality loss. TinyPNG will take care of it for you.

  • parcel

    The zero configuration build tool for the web. 📦🚀

    Too many css and script links in HTML file - This may cause too many http requests being made in order to load necessary style sheets and JavaScript code. This can be handled by bundling multiple css files and js files into single ones. Doing it manually might take forever to do. This is why I started to get interested into JavaScript bundlers. The most popular ones are Webpack, Parcel, and my latest favorite pick - Vite.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts