Articles Library

How This Website Gets High Scores

Concept image, showing two profile side faces of a human with laser-like stars in brain area

To be clear, when our page title refers to 'high scores', we're referring to web design technical achievements, not visitors numbers, marketing, sales, etc. We believe that in today's demanding web environment, it makes sense to 'start off right': get the basics done, so you can then focus on the business of business building?

This web page explores and illustrates how getting the basics in place can help set your web business on a better path. Enjoy!

A note of gratitude: while we worked on getting the scores higher for website, using our current setup none of this would be possible without the superb website generator solutions from

So what are the basics? Well, free of cost to anyone and everyone, Google and Lighthouse provide a good starting point. Plus, several other superb testing and rating companies allow other tests to be made, as outlined below.

While high technical testing scores are not everything, if you get the right foundation in place, creating additional content is much easier, and you can focus on the business of making your website successful in a range of different ways.

Moreover, a website with high scores can hold well structured web advertisements and still allow your website to perform beautifully. When your website visitors are happy, your website is more likely to meet its goals.

Remember, getting high scores doesn't mean your website is perfect or cannot be improved upon. However, once achieved, better scores tend to suggest that your website design is on target, so you can focus on creating content pages and building better relationships with your visitors, customers, clients.

'Getting the basics in place' also means that when you create new additional content, if you follow just a few basic guidelines, the technical quality of your new website pages too can have the same high quality technical features as earlier, top-scoring web pages.

Note: for the purposes of this exercise, we only tested the home page. The home page and any special 'landing pages' are the most important to optimise.

To be clear, the more images, videos, 'heavy content code' that you add to a web page, will of course lower your test scores. But achieving high scores from the outset means if or when you add further assets, you have more scope to play with.

Why Website Accessibility Is Important

One measure of website accessibility ensures that anyone who is using a screen reader can interact with your website in a similar to anyone who may not have accessibility challenges. Accessibility is about treating people equally.

Governments in many countries already strive to promote equality off the web. Will equality on the web be coming?

For decades, it seems accessibility has taken a back seat on many websites. Yet the introduction and growth of privacy and data protection developments around the world such as the General Data Protection Regulation (GDPR), has been striking. So we wonder, in the coming months or years, will more and more legislators decide to make equality on the web -- via website accessibility changes -- also take a high priority too?

We simply don't know. However, if you decide to get your website accessible now or as soon as possible, you'll probably be glad you did. More importantly, building accessibility into your website demonstrates you're striving to consider all of your website visitors, not just some of them.

Google Lighthouse Website Test Results

Google Lighthouse website testing tool when used with a Google Chrome web browser offers a superb start to evaluating your website. Using Lighthouse, you can test four key areas:

  • Performance (website performance).
  • Accessibility (can people with physical difference use your website?).
  • Best Practices (does your website meet accepted modern coding standards?).
  • SEO (search engine optimisation. Does your website help search engines to find all they key data on your website?).

In addition, you can also test for Progressive Web App too, though we tend not to be so concerned with this one. The first four above are especially important. 

Handy Tip: Strive to get scores of over 90 out of 100 for all of them.

When you start your Google Chrome web browser, to get accurate results, remember, you'll need to test only while in incognito mode -- easily done simply by going to the File menu and choosing New Incognito Window.

Important note: if you don't test while in incognito mode, you'll probably get lower scores, less accurate results, especially if you have web browser extensions installed. Incognito mode helps bypass those barriers.

Google Lighthouse Mobile Page Test Results

On the day of testing, as you can verify from the Mobile screenshot graphic below, our scores were:

  • Performance = 97/100.
  • Accessibility = 100/100.
  • Best Practices = 100/100.
  • SEO = 100/100.
Google Lighthouse verification test scores screenshot for Mobile

Google Lighthouse Desktop Page Test Results

On the day of testing, as you can verify from the Desktop screenshot graphic below, our scores were:

  • Performance = 100/100.
  • Accessibility = 100/100.
  • Best Practices = 100/100.
  • SEO = 100/100.
Google Lighthouse verification test scores screenshot for Desktop

As illustrated in the screenshot above, when we achieve 100% testing scores in all four key areas, Google Lighthouse includes a nice fun touch of setting off digital fireworks.

Google Mobile Friendly Web Page Test Tool

At the time of writing, you can test whether your web pages are mobile friendly.

Mobile friendly test results shown in the screenshot below: test result score for mobile friendly

Pingdom Tools Performance Test For

Pingdom Tools is another useful tool to help you evaluate your website and find areas that need attention.

Screenshot of Pingdom Tools Performance Test For

At the time of testing, we were able to get a website download speed score of 93 -- Grade A for

Handy tip: you can probably boost your Pingdom Tools scores and other website-speed related results by using better or faster web hosting, or a better or faster Content Delivery Network (CDN) as part of your web hosting package. Website Carbon Calculator Test Results

The world wide web is now essential for modern life. Yet use of the web adds to climate change -- mainly due to the continual use of 'dirty energy'. More and more providers are switching to clean, sustainable energy generation sources. As website owners, we can also help by choosing web hosts that only power their systems using sustainable energy.

From Wholegrain Digital, the handy website carbon calculator below can show you how much or how little your website is affecting the environment.

Today, more than ever, doing all we can to make our websites more environmentally friendly is a superb act we can all do to help minimise our impact on planet Earth. website carbon calculator snapshot results screenshot

The full PDF of the test results is also available.

SSL Server Test for

A useful test result from Qualys SSL Labs can help you determine how well your website connects to your website hosting service, especially in relation to website security aspects. Strive to get at least a Grade A.

SSL server test from Qualys SSL Labs

Website Speed Report From GT Metrix

Yet another popular website speed testing tool from GT Metrix can also help you evaluate your website. At the time of testing, as the screenshot below shows, the score was Grade A.

Results may vary depending on the time of day you test and which testing server you choose. In the screenshot below we simply went with the defaults offered by GTmetrix. website speed performance report, Grade A

Security Headers Web site Testing Tool

Today, website security is perhaps more crucial than in previous years. It makes sense to do all we can to secure our websites. 

One way to run a basic security check is to use the Security Headers testing tool from A superb free tool from Scott Helme.

At the time of testing, was able to deliver a Grade A score.

Security headers report for

Additional Ways This Website Strives To Help Visitors

We've optimised further a neat feature that comes built in to the Publii theme we've chosen that essentially makes two website versions out of a single website. It seems multiple premium website themes from now come with this feature.  

Evaluated from one aspect, when is using this current theme design, it's a little like having four websites in one:

  • A light mode website version.
  • An equivalent dark mode website version.
  • A mobile-friendly website version.
  • A desktop screen size friendly version.

The remarkable design ensures that switching between all of those versions is fully automatic and depends on the device settings of our website visitors and whether they're in daylight or night time.

All modern websites today should at least be usable on both mobile devices and desktop devices.

Light Mode and Dark Mode Websites

How: we have a 'dark mode' website version and a 'light mode' website version. What's more, we've included some website code to ensure the mode that gets 'activated' depends on the setting each visitor has on their device.

During the evenings, when ambient light levels tend to be lower compared to daytime, a dark mode website version can help relieve glare stress on the eyes. Most importantly, giving users the choice of light mode or dark mode is perhaps the best benefit.

The following three scenarios illustrate how this dual light-dark mode website works:

  • If user A has dark mode permanently turned on in their PC, Apple Mac, tablet device, or smartphone, then they'll only interact with the dark mode version of this website (until or unless they change their mode setting). 
  • If user B has light mode permanently turned on in their PC, Apple Mac, tablet device, or smartphone, then they'll only interact with the light mode version of this website (likewise as above, until or unless our user changes their mode setting).
  • If user C has 'auto' mode permanently turned on in their PC, Apple Mac, tablet device, or smartphone, then they'll interact with the light mode during daytime hours and the dark mode version of this website once the sun sets. The switchover between light and dark modes is seamless and happens automatically. 

Even better, both light mode and dark mode website versions are tuned to provide good colour contrast especially helpful to improve accessibility scores. Making accessibility a standard website design feature, not as an extra add-on also helps make a website more usable for everyone, not just users who may have additional physical challenges or limitations.

While having a light and a dark mode website that automatically switches itself to the mode that a device user has chosen is nice, it doesn't usually mean your website scores will get a boost. Yet, who knows, search engines like Google, Bing, etc., may at some stage determine that serving users in this way improves 'usability', so perhaps some additional ranking benefits may add to your website story. Light Mode website version Dark Mode website version

The Key Factors That Help Make A Website More Secure, More Efficient, and More Environmentally Friendly

Consider the following tips to help you build a super fast, safe, secure website, that strives to minimise its impact on our global environment:

  • Images: one big area is to make sure the graphics we use are optimised for the web. Many 'source' images are huge in file size. As images for websites are designed to display on electronic screens, when web images are properly optimised, the file sizes don't need to be large. So definitely optimise your images for use on your websites.
  • Videos: ditto above for videos too. If you're using YouTube or Vimeo videos, they'll probably already be file size optimised. If you're using your own videos, make sure your video file sizes are not too large -- or use additional faster web hosting tuned especially for video streaming.
  • Website software: the type of website software you use to build and manage your website can also make a big difference. Use a smart, modern tool, ideally one that builds 'static' websites and which stores your database offline on your device, not within your web hosting.
  • Self-training time: learn how to use your website building software. Choose software that is easy to use and learn.
  • Limit or avoid using online MySQL databases: most hacked websites probably have a MySQL database that was not sufficiently protected. I can't help but wonder how many websites really do need an online MySQL database today. Probably a lot fewer than we might think. Times are indeed changing, newer, better options are becoming available. So whenever possible, strive to avoid using a website system that stores your website in an online database within your web hosting space. Why: unless you know how to protect online database websites, having an MySQL database can open your website to seemingly endless security risks. In addition, usually MySQL-based websites are slower than a static website system, as databases have to do more work, so require additional time to display your website assets every time a web page displays.
  • Ideally, choose a software tool that you have a licence to use as required, whenever you want.
  • Use testing tools like the ones outlined on this page, to help build 'greener' faster-loading websites.

While there are many more features I can share with you, let's leave it at that for now. I hope the information in this web page can help you to craft a better website.

This article was updated on

You may also like: