DEV Community: Tanzeel Ur Rehman

Optimizing Images In Next.js For SEO-friendly Media

Tanzeel Ur Rehman — Thu, 24 Aug 2023 05:52:19 +0000

In the visually-driven world of the internet, images play a pivotal role in engaging users and conveying information. However, optimizing images for Next.js applications goes beyond just aesthetics—it significantly impacts your site's performance and SEO. In this comprehensive guide, we'll delve into the art of optimizing images for Next.js, ensuring that your media not only looks great but also boosts your website's search engine rankings.In today's fast-paced digital world, users expect websites to load quickly and smoothly. If a website takes too long to load due to unoptimized images, visitors are more likely to abandon it and seek alternatives. This high bounce rate can signal to search engines that your content isn't meeting user expectations, which might result in diminished search engine rankings.

Let's dive in

1. Choosing the Right Image Format
When optimizing images, choosing the right format is crucial. Next.js supports various formats such as JPEG, PNG, and WebP. For instance, let's say you have a product image named "product.jpg"

import Image from 'next/image';

<Image src="/images/product.jpg" 
alt="Product Image" width={600} height={400} />

2. Resizing and Scaling Techniques

Responsive images are a cornerstone of modern web design. With the rise in mobile device usage, creating a seamless experience for mobile users is crucial. Optimized images play a vital role in ensuring that your website is mobile-friendly and loads quickly on smartphones and tablets. Google's mobile-first indexing also considers mobile user experience when ranking websites. Next.js's Image component handles resizing for you, but you can enhance it using breakpoints:

<Image
  src="/images/product.jpg"
  alt="Product Image"
  layout="responsive"
  width={1200}
  height={800}
  sizes="(max-width: 600px) 100vw,(max-width: 1200px) 50vw, 800px"
/>

3. Image Compression Strategies

Reducing image file sizes is key to faster load times. You can use tools like imagemin or next-optimized-images to compress images during build:

npm install imagemin

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['images/*.{jpg,png}'], {
    destination: 'public/images',
    plugins: [imageminWebp({ quality: 75 })],
  });
  console.log('Images optimized');
})();

4. SEO-friendly Image Filenames and Alt Text

Choose descriptive filenames and provide meaningful alt text for accessibility and SEO:

<Image src="/images/product.jpg" alt="Blue Sneakers for Running" width={600} height={400} />

5. Implementing Lazy Loading for Improved Performance

Search engines rely on web crawlers to index the content of websites. Slow-loading or unoptimized images can hinder the crawling process, making it harder for search engines to understand and index your content accurately. Properly optimized images ensure that search engine crawlers can efficiently process your site's content.Lazy loading defers offscreen image loading, enhancing performance. Next.js's Image component supports lazy loading out of the box:

<Image src="/images/product.jpg" alt="Product Image" width={600} height={400} loading="lazy" />

So, optimizing images for Next.js goes beyond aesthetics, it's about improving page speed, user experience, and SEO. By applying these strategies and utilizing Next.js's features, you'll create visually appealing, SEO-friendly images that elevate your site's performance and drive organic traffic. Remember, the careful balance of image quality and performance is the key to success in the digital era.

React 18: Automatic Batching

Tanzeel Ur Rehman — Fri, 20 Jan 2023 09:28:00 +0000

Batching is when React groups multiple state updates into a single re-render for better performance.

For example, if you have two state updates inside of the same click event, React has always batched these into one re-render. If you run the following code, you’ll see that every time you click, React only performs a single render although you set the state twice:

function App() {
  const [count, setCount] = useState(0);
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
      fetchData().then(() => {
      // React 17 or earlier does NOT batch these updates 
      // These will be two different updates
      setCount(c => c + 1); // 1st update and re-render
      setLoading(l => !l); // 2nd update and re-render
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: loading ? "blue" : "black" }}> 
       {count} 
      </h1>
    </div>
  );
}

In React 18, all updates will be automatically batched, no matter where they originate from.

This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events. We expect this to result in less work rendering, and therefore better performance in your applications by avoiding unnecessary re-renders and thus improve the performance.

How to opt out of batching?

flushSync is a method in React that allows you to force a synchronous update to a component. It can be used in cases where you need to update a component immediately, rather than waiting for the next render cycle. This can be useful for cases such as updating a component's state in response to a user interaction, or for doing some other type of imperative update.

Additionally, flushSync is not recommended to use in most cases, it's better to rely on React's built-in mechanism to handle updates. It's only recommended to use in cases where you need to update a component immediately, and the regular way of updating component is not working.

import { flushSync } from 'react-dom';

const handleClick = () => {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // 1st update and re-render
  flushSync(() => {
    setLoader(l => !l);
  });
  // 2nd update and re-render
}

React Suspense for data fetching

Tanzeel Ur Rehman — Mon, 24 Oct 2022 05:37:32 +0000

In React 18 there is a new feature called Suspense that lets you declaratively wait for anything including data. Suspense is not a state management system like Redux. It merely enables declarative fallback rendering while a component waits for an asynchronous operation (such as a network request) to be finished. It allows us to synchronize loading states across different components which allows for a better user experience.

How To Use Suspense

Let's compare the implementation of the conventional conditional rendering method against Suspense to see how it works.

import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [city,setCity] = useState(null)
   const [search,setSearch] = useState("karachi")

    useEffect( () => {
       axios(`http://api.openweathermap.org/data/2.5/weather?q=${search}&appid=cf7b1a203b58aa52e37fb606f1650331`)
     .then((r) => {
       console.log(r);
       setCity(r.data);
       setIsLoaded(true);
     })
     .catch((e) => {
       setIsLoaded(false);
       console.log(e);
     });
    },[search])
return (
     <div>
         {!isLoaded && <p>loading...</p>}
         {isLoaded && (
          <input
            type="search"
            className="inputfield"
            onChange={(event) => {
              setSearch(event.target.value);
            }}
          />

          <div>
              <h1>
                <i className="fas fa-street-view"></i>
                {search}
              </h1>

              <h2>{city.temp}</h2>
              <h3>Min : 5.25 cel | Max : 5.25 cel</h3>
          </div>
        )}
      </div>
  );
};

export default App;

This method is generally called “fetch-on-render” because fetching doesn’t start until the component has been rendered.
Now let’s see how this example would be rewritten using React Suspense.

import React, { Suspense } from "react";
import "./App.css";

const Weather = React.lazy(() => import("./components/Weather"));

function App() {
 return (
   <div className="App">
     <Suspense fallback={<p>loading...</p>}>
       <Weather />
     </Suspense>
   </div>
 );
}

In the code block above, the Weather component is wrapped with a Suspense component which contains a fallback prop. This means that when the component Weather is waiting for an asynchronous operation,React will render "loading..." to the DOM instead.The Weather component is then rendered only after the promises and APIs are resolved.