How We Went from 46 to 99 Performance Score to Improve Our Website Speed

• import-cost

  4 1,354 0.0 JavaScript

  displays the import size of the package you are importing inside the code editor

  

  There are some handy tools for identifying and addressing problematic bundles. One of them, Bundlephobia, gives insights into how much an NPM package contributes to bundle size, helping avoid too large collections of files. Import Cost, a VSCode Extension, calculates the 'cost' of imported packages, helping to make informed decisions. As part of our optimization strategy, we've swapped out hefty JS libraries, such as replacing the widely-used 'classnames' package with the more efficient 'clsx', a faster and smaller drop-in replacement tailored to our website needs.

• InfluxDB

  www.influxdata.com featured

  Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

  

• Gatsby

  365 55,193 8.9 JavaScript

  The best React-based framework with performance, scalability and security built in.

  

  Another thing we had to care about for the new website was the API backend. Our choice fell on @Strapi, an open-source content management system. Not only did it allow us to customize our data schemas and extend API functionality to manage different types of content like text, images, and videos, but also save us a great amount of time and money – with its user-friendly admin panel and additional features we didn't have to build it all from scratch.

• clsx

  20 8,078 5.8 JavaScript

  A tiny (239B) utility for constructing `className` strings conditionally.

  There are some handy tools for identifying and addressing problematic bundles. One of them, Bundlephobia, gives insights into how much an NPM package contributes to bundle size, helping avoid too large collections of files. Import Cost, a VSCode Extension, calculates the 'cost' of imported packages, helping to make informed decisions. As part of our optimization strategy, we've swapped out hefty JS libraries, such as replacing the widely-used 'classnames' package with the more efficient 'clsx', a faster and smaller drop-in replacement tailored to our website needs.

• webpack-bundle-analyzer

  24 12,560 4.5 JavaScript

  Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

  

  Then, with the Webpack Bundle Analyzer plugin, we discovered problematic areas in bundles. Bundle Analyzer highlighted our biggest bundles – client-location and map-with-flashing-dots

Suggest a related project