How I Optimize Websites To Reach GTMetrix Grade A Performance In Just 2 Hours | Day #3

Today I’m going to show you how I optimize my client’s website from GTmetrix Grade F to Grade A

Warning!!!

This is a practical step by step article so make sure you pay attention.

A client of mine reach out to me complaining about slow website and low conversion rate.

I said let’s take a look:

What’s the very first thing i do?

I opened his website to browse and check what’s wrong

But it was extremely slow and i couldn’t even go to services pages

So I head over to the GTMetrix website to check what’s causing the slow speed

Screenshot of GTMetrix Before Optimization Results

My Immediate reaction?

Oh shit

As you can see they had GTmetrix grade F score for those of you that knows GTmetrix scoring it means it’s worst.

Here’s why that’s a problem…

Your website speed directly affect your conversion rate

Take a look at this Graph below from Cloudflare

If your website takes more than 5 seconds to load the conversion rate will go down to 0.6%.

I’m not gonna let this happen to my client.

So I head over to the waterfall section to see what causing the problem.

I noticed that there were 6 videos directly embedded from the server.

To embed videos from the server it had to load the 6 videos first.

BEFORE LOADING THE HOME PAGE.

Also I noticed there were multiple non optimized images with big sizes.

So what do we do now?

Let’s quickly break it down:

Step #1

I always take backup before doing anywork on the clients project.

It’s part of my process.

Step #2

I started to removing the videos from the home page and asked the client to upload it to her YouTube channel.

And i only left 2 videos on the homepage and that also directly embedded from the Youtube.

And below that i created a Button (More Testimonials) and linked it with another page where i embedded all the other testimonials.

Step #3

I started downloading all the large images from the Home page and used image compressor to use to compress the images and then re-uploaded it to it’s original location.

Step #4

Now we needed to convert all the images to WebP format.

WebP images can help web pages load faster than other image formats such as JPEG or PNG.

And Guess what?

There is a plugin in WordPress called Coverter For Media by Matt plugins

I used it to convert all my images to WebP format

Not only that i also used the Conversion of New images option which will automatically convert uploading new images to WebP

With that said

I head over to the GTMetrix website again to see the result

Voila….

Our GTmetrix score went from Grade F with 24% Performance to Grade B 84% Performance.

Beautiful

But that’s not what I want

I REALLY had high hopes!

I need to be able to achieve Grade A score

So I’m not gonna stop here I’ve to dig deeper

With that said

Let’s continue

Step #5

I started looking into GTMetrix Waterfall again to see what causing the problem

And i noticed there were many JS and CSS scripts that were loading on the homepage.

I thought “Ain’t no way this gonna let me reach Grade A performance

So i copy and pasted every JS and CSS link to a spreadsheet

I wanted to find out the files that were not suppose to load on Home page.

And I did found a few of them

Next Step?

Step #6

I Installed another Debloat plugin and started excluding the JS and CSS links that were not suppose to load without use.

I also made sure to exclude the additional font packs that were loading without in use.

Once I was done

I opened up GTMetrix again

And guess what?

I concur!!!

I reached Grade A and performance score 97%. Which is considered to be top 1%.

That’s it for today!

If you found this helpful, give it a clap!

See you tomorrow,

Muhammad