Website Speed and Performance Optimization: Metrics & Tools

Updated on
•4 min read
•
#html
#css
#javascript

I like to give a little insight into the optimization techniques I have applied to my blog. The blog-post will consist of several parts, since it is hard to cover all in one post.

Lets start with a short introduction of the most important metrics that are used to measure the optimization of a website.

There is no basic recipe that can be applied to optimize a website. There are overall optimization goals that every website should achieve. The importance of these varies from website to website and sometimes solving one problem can have a negative impact on other aspects of the website. However, since the metrics used to measure, for example, the speed of a website are known and mostly the same, we can define criteria based on these metrics and evaluate their importance.

Since most of the metrics and tools come from Google itself, it's basically not about reinventing the wheel here, but about doing justice to those very metrics. The main goal of optimizations could be, for example, to achieve a 100% rating in Lighthouse.

Lighthouse rating jrson.me

The Speed Index shows how fast the contents of a page are visibly displayed.

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.

Time to Interactive (TTI) measures the time until the application is rendered and can respond to user input.

Total Blocking Time (TBT) is one of the metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.

Real time estimate of frames per second (FPS) as the page runs. My personal favourite and one of the biggest possible pitfalls.

A Content Security Policy (CSP) is a security feature used to help protect websites and web apps from malicious attacks. At first you might wonder if there is a connection between optimization and security headers. Yes there is.

The number of tools to test websites performance, seobility etc. has increased immeasurably in the recent years. Most of them are not free and overloaded with copies of other tools. Here is an overview of the most important tools I use frequently.

The nightly build of Chrome Canary has awesome features with its Chrome DevTools for developers. Here are some important features:

It also includes one of the most important tools, Lighthouse. As an alternative Google PageSpeeds Insights can be used.

Chrome Canary

One of the best free tools is the SEO Spider. It is a powerful and flexible site crawler, able to crawl both small and very large websites efficiently, while allowing you to analyse the results in real-time. It is great to check a websites health and find problems, not only related to SEO.

SEO Spider

Image optimization is one important aspect. The most efficient free tools are TinyPNG and vecta.io/nano. TinyPNG comes with a Developer API and Third-Party Solutions for various programming languages, including Node.js. It can be used to easily convert, resize or compress images.

Which method is the fastest? See Result.

document.getElementById("someId");

document.querySelector("#someId");

document.querySelector(".someClass");

We learned about important metrics and tools when measuring a websites performance.

If you want to read more about different optimization techniques, the website web.dev is a great place to start.

Thanks for reading!

Helpful Resources:

  • web.dev - Guidance to build modern web experiences that work on any browser
  • Chrome Canary - Nightly build for developers
  • SEO Spider - The industry leading website crawler for Windows, macOS and Linux