Slow loading speed of a website is not only penalized by Google and other search engines, but it has an unfair disadvantage in regard to your visitors. When a website consumes even a little bit of time in loading, users bounce off the and conversion rates take a huge hit. According to a research in 2017, one full second can decrease conversion rates by 70%!

Solution

Now that we know how important it is to provide users with a fast website loading experience, let's see what we can do to improve ours.

Gatsby JS - All Gatsby sites are fast by design. Gatsby loads only critical parts of the page, so your site loads as quickly as possible. Once loaded, Gatsby prefetches resources for other pages so that browsing through the site is smooth.

But that's not all. To understand this better, let's know about Perceived performance.

Perceived performance is a subjective measure of how fast a website seems to a user based on load time. In terms of conversion rates, perceived performance is more important than the actual load and response times.

Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

One way of increasing the perceived performance of a website is through loading indicators, i.e. loading "above the fold" contents first. Right now, we are going to talk about image loading and placeholders.

As images are usually the heaviest bits and hence take more time to load, improving their perceived loading speed can have a drastic effect.

Take a look at how Gatsby's home page loads.

https://www.gatsbyjs.com/

Implementation

First, you need to install gatsby-image and other dependencies if not installed already.

yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

Update installed plugins in your gatsby-config.js.

module.exports = {
  plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],
}

Also, you need to have a source plugin so that you can query images using graphql, so if your images are in your local filesystem you would setup gatsby-source-filesystem in gatsby-config.js like this:

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Now, you just need to import Img component and mention image processing specifications in the query itself like this:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fluid={data.images.edges[1].node.childImageSharp.fluid} />
  </div>
)

export const imageData = graphql`
  query {
    images: allFile(
      filter: { relativePath: { glob: "portfolio/fullsize/*.png" } }
      sort: { fields: name }
    ) {
      edges {
        node {
          childImageSharp {
            fluid(traceSVG: { color: "#57bc88" }) {
              ...GatsbyImageSharpFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`

You can even specify color for traced SVG like I have, #57bc88. If you don't, it's grey by default.

There you have it! I applied this to my personal site and here's the result:

gatsby-image provides many more amazing options, alongside great docs you can look at here: https://using-gatsby-image.gatsbyjs.org/

Conclusion

Perceived performance of a website can make or break your user's experience, and henceforth, your website's growth. I hope this post aids in improving your web projects. I'll soon be posting about improving perceived performance and UX, so stay tuned by subscribing to XenoX. 👍