If you are reading this, then you are most likely a developer tasked with improving the performance of a website (probably by your boss or client.)

If you are just starting to learn about website performance, prepare yourself for uncertainty and frustration.

The field of website performance is still in a nascent stage. Key performance indicators change from time to time, the audit list seems to perpetually expand, testing is not as straight forward as it first seems, and by the time you begin to understand how it all ties together, your knowledge is already outdated (#developerlife am I right burnouts?)

Should you, therefore, give up before you begin? No. The Pareto Principle is here to motivate us. It states that 80% of the consequences result from 20% of the causes.

So focus on Measuring, Optimizing, and Monitoring. Don’t fret too much about the details. Be patient. As the field matures, it will become clearer what 20% causes 80% of the consequences (that’s the lie I tell myself).

But what is real is that improving performance is a way of adding value to a website.

So without further ado, here is how to measure, optimize and monitor your website and/or landing pages.

Measuring

Begin by getting a feel for what needs to be done. Then prioritize what needs to be done and begin making improvements.

Begin by running an audit at web.dev/measure. This is a free tool powered by Lighthouse that shows performance scores and provides you with a simple timeline of your process.

You should start by auditing your home page because it is usually the one getting the most traffic and also the heaviest page. Fixing issue with the home page can also carry over to other pages.

Next, you’ll want to audit your Landing Pages since this may be costing you money if you are advertising.

Now you can determine which pages to begin optimizing.

Optimizing

Now that you determined which pages to optimize, it’s time to get all the details of what needs to be fixed, suggestions on how to fix them, and ways of measure immediate progress.

I mentioned that the measuring tool above is powered by Lighthouse. Well, now we are going to use Lighthouse to get all this information.

Lighthouse measures web performance using the Core Web Vitals metrics. These are metrics that Google deems one should measure in order to improve the user experience of web pages.

I use Lighthouse in two ways: Via Chrome DevTools Via https://developers.google.com/speed/pagespeed/insights/

I use Chrome DevTools to test when I am developing locally (aka hosting the code on my computer.) My workflow here involves making changes to the code and running Audits in Chrome DevTools.

I use PageSpeed Insights to test the website on the staging and production environments.

The reason I use PageSpeed Insights is that it provides me with a way for anyone to reproduce the audit and get similar scores. Whereas with Chrome DevTools, I may get scores depending on my computer and how many things happened to be running on my computer at the moment. That way it eliminates the old “It’s fast on my computer.”

What I measure and optimize

As of this writing, I measure Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Usually, First Input Delay (FID) is great so I don’t have to do anything about it.

How I Optimize LCP

Here is a list of things I do to improve the LCP score:

Reduce the use of Javascript as much as possible Use Javascript defer/async attributes in script tags Lazyload Images I make sure the largest content block “above the fold” loads as fast as possible I use a CDN like Cloudflare on staging and production to reduce the Time To First Byte (TTFB)

How I Optimize CLS

And here is a list of things I do to improve the CLS score: Preload Fonts Generate CriticalCSS to prevent Flash of Unstyled Content (FOUC)

The details of this process vary depending on whether the website is based on WordPress or uses a JAMSTACK framework or I am using Vue or React components. I’ll leave those details for other articles.

Monitoring

Tracking your progress over time is a good start. Matter of fact, once you optimize a small website well enough, you probably won’t look at performance for a while.

So using web.dev/measure may be enough. But what if web.dev is discontinued as it happens with many free services? Once again, for a small website, it may still not be an issue.

But if you are doing this professionally, being able to show progress get notifications when there are significant changes to the performance of the website are a must.

There are many products popping out offering ways of monitoring Web Vitals, I signed up for a few trials. Like pagespeedplus.com. Looks good, but did not keep it past the trial period because I want to keep looking.

In the article [Measure, Optimize, and Monitor], by nonother than Addy Osmani who works at Google and leads the Web Performance and tools teams, he includes a diagram that shows some monitoring tools.

I took a look a Calibre. And just look at the list of features. It’s pretty exciting.

I signed up and tested my website’s Lighthouse Performance Score in Chrome Desktop (20ms latency, 40/40Mbps) and MotoG4 3G (300ms latency, 768Kbps down, 256 Kbps up). My Performance Budget Threshold for Lighthouse Performance Scores are >90 for desktop and >80 for Mobile.

Took a snapshot and… WHAT! 43 desktop, 70 mobile! Oh, hell’s nah.

Running an audit on web.dev shows 87 mobile. Running an audit on pagespeedinsights shows 97 on desktop, 83 on mobile. Running an audit in DevTools in my M1 Macbook Pro shows 99 on desktop, 98 on mobile.

Ugh. Here we go again folks.

But I got the notifications. So yay 🙃.

Anyway, if anyone wants to discuss Web Vitals monitoring tools, hit me on LinkedIn or Twitter.

Update: Chatted with support from Calibre and they explain it in this article about Calibre and PageSpeed Insights differences