Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Checks for a Performant Website

Checking for a Performant Website

Published:

Reading Time: (approx) 3 min

Tags that this post has been filed under.

The main content about Checks for a Performant Website

As someone who builds websites for clients, I feel it’s always best to be showcasing my skills by ensuring the clients websites are performant.

A performant website has high speed and low latency. It loads fast and doesn’t crash or freeze.

What checks can be used for a performant website?

I use a selection of tools to check different areas of a website build, checks include pagespeed, security, html and accessibilty for all.

HTML checks

I usually start out by checking that the HTML code is correct and valid, for this I use this online validator Nu HTML Checker. This will make sure that I have closed all ‘div and ul elements’ etc. as it’s all to easy to miss one.

Json checks

As I use json-ld in my website head section I need to check that the JSON is formatted correctly, to do this I use this online tool Json Syntax Validator.
Very simple to use and when formatted correctly this will pass tests from the Google Search Console.

SEO checks

Next up I use two SEO tools, the first is the SEO Spider Tool from Screaming Frog for checking that I have the correct length page titles and descriptions etc. SEO Spider Tool is a great tool as it also checks for many other issues. Including :-

This allows me to refine the meta data and ‘H’ elements in my finished website pages amongst other things.

I have downloaded the latest version of SEO Spider Tool and run this too complete the site crawl, once the site is crawled you are presented with your results and given possible solutions, you can then implement the recommendations and run the crawl again.

The second SEO tool I use is Ahrefs which provides a suite of tools for testing your websites SEO.
These include checking backlinks and keyword rankings. You can also find content ideas and link prospects. These are important aspects to improve your search ranking.

This is a simple case of creating an account and then adding your website URL for the checks to take place.

Custom HTTP headers checks

As I host most of my websites on Netlify the next step is another relatively simple but important step, this is checking that I have the correct headers for my website that control site security, although custom http headers can be used for other purposes including cookies, compressiona and redirects.

For this I use this online tool Check Headers.

Custom HTTP headers can be added to a netlify.toml file (this needs to be in the build directory of your project) if you are hosting on Netlify. Below is the section of my toml file which relates to headers. This will need modifying to suit your individual needs but it’s a reasonable starting point.

Netlify.toml

[[headers]]
    for = "/*"
    [headers.values]
        Cache-Control = '''
        max-age=300,
        must-revalidate'''
        Content-Security-Policy = "default-src 'self' 'unsafe-inline'; connect-src 'self' 'unsafe-inline' https://region1.analytics.google.com; font-src 'self' fonts.gstatic.com; frame-src 'self' https://platform.twitter.com https://www.youtube.com/ https://vimeo.com; img-src 'self' 'unsafe-inline' data: *.cloudfront.net; media-src 'self' https://www.youtube.com; script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://www.googletagmanager.com https://www.google-analytics.com https://platform.twitter.com https://unpkg.com; script-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://www.googletagmanager.com https://www.google-analytics.com https://platform.twitter.com  https://unpkg.com https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; style-src-elem 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://unpkg.com; frame-ancestors 'self'; form-action 'self'"
        Permissions-Policy = "geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(), payment=()"
        Referrer-Policy = "strict-origin-when-cross-origin"
        X-Content-Type-Options = "nosniff"
        X-XSS-Protection = "1; mode=block"
        X-Frame-Options = "SAMEORIGIN"

If you don’t host on Netlify then you can create a _headers file in the build directory of your project and add your headers to that.

Accessibility Checks

It’s important to check that any website is as accessible to all people as possible, for my checks I use the free online checker at Experte.

This is a great tool that scans all pages of a website and gives a mark for each page out of 100, highlighting any errors and giving good feedback on how to correct the issue. I found two errors on this website which I have easily been able to correct using Experte

Experte offer a great range of free checkers for other areas of website building including readability and security checkers.

Speed Checks

Lastly I use the Lighthouse plugin (making sure I am in cognito mode) to check any major blocking elements.

If I find that I have some images with a large file size I will take measures to reduce the file size by compressing the image with Riot (https://riot-optimizer.com/).

Lighthouse is also great for highlighting any javascript or css files that are bloated and have a possibility to be reduced in size, every reduction in file size means faster page loading speed and potentially more browsers staying on the page and not moving on.

image of Lighthouse results

Conclusion

I always try to give my clients a website that meets their needs but also performs as well as I can make it with the budget, to do this the tools mentioned above provide a simple way to easily find and implement fixes that can turn an ordinary website into a great website.

Journal Index

Previous Article: AI Is Changing The Way We Write

Next Article: Emails when hosting on Netlify