Best practices for optimizing website loading times

Optimizing images -

Compress Images: Optimizing images by compressing them can significantly reduce their file size and help improve website loading times. Tools like TinyPNG, JPEGmini, and ImageOptim can help compress images without losing quality.
Resize Images: Resizing images to their correct display size can help reduce the file size of the image and improve website loading times. You can use tools like Photoshop, and GIMP, or online tools like PicResize and ResizeImage.net to resize images.
Use Appropriate Image Formats: Using the appropriate image format for each image can help reduce the file size of the image and improve website loading times. For example, use JPEGs for photographs and PNGs for graphics with transparent backgrounds.

Use Responsive Images: Using responsive images ensures that the appropriate image size is served to the user's device based on the device screen size. This helps improve website loading times by reducing the amount of data that needs to be transferred.

 <picture>
   <source srcset="small-image.jpg" media="(max-width: 768px)">
   <source srcset="medium-image.jpg" media="(max-width: 992px)">
   <source srcset="large-image.jpg">
   <img src="large-image.jpg" alt="Example Image">
 </picture>

Use Lazy Loading: Lazy loading can help improve website loading times by deferring the loading of images until they are needed. This can be implemented using JavaScript libraries like Lazy Load or Intersection Observer API.
```
 <img src="placeholder-image.jpg" data-src="actual-image.jpg" alt="Example Image" loading="lazy">
```

Use Content Delivery Networks (CDNs): Using a Content Delivery Network (CDN) can help improve website loading times by caching images and other assets closer to the user's device. This can reduce the amount of time it takes for the user's browser to retrieve the images.

// Define the image URL
const imageUrl = "https://examplecdn.com/images/example.jpg";
// Create a new Image object
const img = new Image();
// Set the source of the image to the CDN URL
img.src = imageUrl;
// Add an onload event listener to the image
img.onload = () => {
  // Once the image has loaded, add it to the DOM
  document.body.appendChild(img);
};

HTTP requests -

Each HTTP request made by the browser can impact website loading times, so reducing the number of requests can help improve performance. Techniques include combining CSS and JavaScript files, reducing the number of images and other assets, and using inline styles instead of external stylesheets.

useSWR hook: SWR is a React Hooks library that provides a way to cache data fetched from an API so that subsequent requests for the same data can be served from the cache instead of making another network request.

 import useSWR from 'swr';
 function MyComponent() {
   // Define the fetch function to be used by SWR
   const fetcher = (url) => fetch(url).then((res) => res.json());
   // Use SWR to fetch the data and cache the result
   const { data, error } = useSWR('https://api.example.com/data', fetcher);
   // Render the data or an error message
   if (error) return <div>Error loading data</div>;
   if (!data) return <div>Loading data...</div>;
   return <div>{data.message}</div>;
 }

node-cache module: node-cache is a popular Node.js module that can be used to cache HTTP requests.

 const NodeCache = require('node-cache');
 const axios = require('axios');
 // Create a new NodeCache instance
 const cache = new NodeCache({ stdTTL: 300, checkperiod: 120 });
 // Define a function to fetch data from the API
 async function fetchData() {
   const response = await axios.get('https://api.example.com/data');
   return response.data;
 }
 // Define a function to fetch data, either from the cache or the API
 async function getData() {
   const cacheKey = 'exampleData';
   const cachedData = cache.get(cacheKey);
   if (cachedData) {
     console.log('Data found in cache');
     return cachedData;
   } else {
     console.log('Data not found in cache');
     const data = await fetchData();
     cache.set(cacheKey, data);
     return data;
   }
 }
 // Call the getData function to fetch data
 getData().then((data) => {
   console.log(data);
 });

In this example, we create a new NodeCache instance with a TTL (time-to-live) of 300 seconds and a check period of 120 seconds. We then define a fetchData function that makes an HTTP request to https://api.example.com/data and returns the response data.

We then define a getData function that first checks if the data is available in the cache using the cache.get method. If the data is found in the cache, it is returned immediately. If not, the fetchData function is called to fetch the data from the API, and the data is stored in the cache using the cache.set method before being returned.

Finally, we call the getData function to fetch the data, which will either return the cached data or fetch the data from the API and store it in the cache before returning it.

Other modules and services are also there which can be used depending upon the framework you are using

Minimize Server Response Time:

Reducing server response time can help improve website loading times. Techniques include optimizing database queries, reducing server load, and using caching plugins to improve server response times.

Optimize Code:

Optimizing code can help reduce the size of files downloaded by the browser, which can help improve website loading times. Techniques include minimizing the use of redirects, minimizing DOM elements, and using GZIP compression to optimize code and improve loading times.

Suggestion -

I would recommend you guys to watch this video on youtube if you are a beginner. I found this guy's content helpful.

https://youtu.be/6m31FmsqXAo

Follow -

Comment below for suggestions and improvement :) Follow me for more such content 😀