There's a lot to consider when building websites, and one of the key factors to consider is performance. 

According to the Google performance team at the Chrome I/O 2019 conference, there was a survey conducted that measured the impact on user experience, and speed was the highest factor. 

Surprisingly, speed was three times more important than the design of the website.

So, how do you keep on top of website performance?  I would like to point out a really handy tool that is part of the Google Chrome Dev Tools kit, it's called Lighthouse.

Lighthouse let's you generate a report and scores the page on keys metrics like "Performance", "Accessibility", "Best Practise" and "SEO".

The report let's you drill down and see exactly what needs to change.

Seeing that we are a dev shop and not a design house, we often work with purchased templates/themes which speed up the whole website build as most of the design, HTML, CSS and front-end JavaScript are already built.

The typical process for us it to then customise the theme to deliver all the layout requirements and bring them into the CMS templates.

What lighthouse is handy at, is identifying some of the flaws in the template.  A classic one is the use of heading tags.  They are used to style up headings in panels and widgets, but are often out of sequential order.  Lighthouse has the following to say about this:

"Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies."

So here's how we would fix this one:

  • Copy & paste the style block from the style sheet and give the new class a meaningful name
  • Then update the HTML by changing the heading element to a div and apply the new class to it
  • And voila! It looks the same and passes the Lighthouse test.

There's so much more to it, so I recommend checking it out yourself.  Launch Chrome dev tools, browse a page you want to run a report on.  Go to the Lighthouse menu section and click on "Generate report".  Make sure to test the page for both desktop and mobile separately.

For more info, go to the Google Chrome Lighthouse page and if you have time, check out the video: https://developers.google.com/web/tools/lighthouse