HTML and Performance

As much as we'd like to use every possible element and make our sites super advanced with media and scripts, it's ultimately about performance. If your site takes more than a moment to load, the user will get bored and move on.

Very importantly Google has announced that "the page experience ranking change will go live on Google Search this year, in what we're calling the "page experience update". (opens in a new tab). Thanks to the author of An In-Depth Guide To Measuring Core Web Vitals (opens in a new tab) for pointing that out.

PageSpeed Insights

Google has made a tool that's free to use and can also be used offline (Lighthouse, more on that later).

It's found at https://developers.google.com/speed/pagespeed/insights/ (opens in a new tab).

Once you open it, you're presented with a input field where you can provide the link to your website and it will provide the overall score, both for PCs and mobile devices, and a detailed breakdown of each potential improvement.

It also provides a "Learn More" link under each of them.

You can also read more about their approach to scoring performance here (opens in a new tab).

Lighthouse

The offline version (opens in a new tab), in case your website is not hosted online, is included with each Chrome browser installation. It's found in the Chrome Dev Tools, that you can access by pressing F12 or right clicking and selecting "Inspect".

It is under one of the tabs at the top, called just "Lighthouse".

Then just choose which metrics you want to audit and click "Generate Report".

WebPageTest

You shouldn't rely only on one source of data for how well your website is performing, so here's another tool: WebPageTest (opens in a new tab). You use it the exactly same way, by just providing your website URL and running the audit.

It then provides graphs and indicators to vulnerabilities in addition to performance metrics.

W3 Nu Checker

W3 Nu Checker (opens in a new tab) allows you to quickly check how W3 Standard Compliant is your website. This is important for search engines, because it's one thing to write code that other people can read, you have to take all of the crawlers that constantly explore the web into account too.

It also provides the problem descriptions and the line of code in question.

Accessibility

Also a very important factor is to have your website accessible to people with disabilities.

The folks at WebAccessibility.com (opens in a new tab) have done a great job in providing a tool that works exactly like all of the previous ones. You provide a link and it returns violations and overall compliance. As well as descriptions, severity and it's location.

Throttling

Using Chrome Dev tools you can also simulate a slower internet connection, for example to see how your site would get loaded from a wireless connection instead.

It's under the "Network" tab at the top, then once you select it, it's the dropdown that's by default set to "No throttling".