Mark Serrano Photography

Photographer. Retoucher. Storyteller

Optimizing My Website

August 10, 2020

Speed by Marc-Olivier Jodoin

Photo by Marc-Olivier Jodoin on Unsplash

Everyone agrees content is king and a speedy website is a must. However, a slow website will make any content useless if your visitors decide to leave the site anyway because your website is too slow.

In Google Analytics, it's called the "bounce rate". If your landing page is the bridge towards your other pages, you want this page to load really fast, so that your bounce rate will be low. See this article for more info about bounce rate.

Identify the Problem

My photography website is full of images, obviously. If I wanna speed up my site, I need to lower the size of my images but I don't want to sacrifice the image quality either. But how much? In any kind of optimization, it's important to measure first, so we can figure out where the problem is.

Measuring Tools

To identify the problems I used the following tools:

These tools are straightforward to use. You basically just have to enter your website's url.

Initial Test Results

Based on the following results, the problematic parts of my website are image sizes and security. I've done some code optimizations earlier, and that's why some of my scores are already good:

WebPagetest

Overall my scores are ok except for security and caching.

08-06-2020-webpagetest.png

Website Speed Test

I failed this test because my image sizes aren't optimized.

08-07-2020-webspeedtest-c.png

Lighthouse

I passed with flying colors. As I've mentioned earlier I have done some code optimizations already prior to these tests.

08-07-2020-lighthouse-desktop.png

Problems

As I read the tests results, I need to address the following:

  • Use smaller image sizes on my landing page
  • Use webp format instead of png or jpg
  • Add security headers
  • Add caching headers

Solutions

I use Gatsby to generate my site, which by default already provides outstanding performance out of the box. I use Netlify for my hosting which provides a lot of goodies for free.

To set the ideal the image sizes and format on my landing page, I deferred the work to Gatsby's excellent image plugin:

childImageSharp {
  fluid(maxHeight: 480, maxWidth: 320) {
    ...GatsbyImageSharpFluid_withWebp
  }
}

That's it. Problem solved! I realize my readers might be using another tool like Wix or SquareSpace. Please consult your provider, or do the conversions yourself in Photoshop.

To address the issue on caching and security headers, I followed this article.

Final Tests

I'm proud to say I got everything right. This wouldn't be possible if I didn't measure first.

WebPagetest

08-08-2020-v1.0.7-webspeedtest.png

Website Speed Test

08-08-2020-v1.0.9-webpagetest.png

© Mark Serrano