New look site

Blog

Creating a ‘New look site‘ for a website creator was never going to be easy. Design alterations while optimising for speed and accessibility along the way, is not easy. When creating a site for yourself, it’s all too easy to be overfly fussy.

As a creator of WordPress websites, I can honestly say that working on my own site, is the hardest to work on.

When working on client projects, we have a clear plan. And unless something unforeseen happens, rarely would the plan alter. But with my own site, it’s all too easy to move the goal-posts and alter the requirements.

Initially I started working on the site, I had planned to build a FSE (full site editing) or block theme. But frustrations with certain elements made me decide a different approach was needed for this build.

The build, and look of the site has changed a lot over the previous build versions. Along the way, I decided to add a ‘dark-mode’ option, to make reading the content easier. The more I customised it, the less I liked the original ‘light-mode’. In the end, I started the development again, only this time only working only on the ‘dark-mode’ version.

Setting aside the FSE approach, I reverted to using the popular ‘GeneratePress Pro‘ theme, along with the pro version of ‘GenerateBlocks‘.
Originally I half expected to run into restrictions, and speed issues when using GeneratePress & GenerateBlocks, but that wasn’t the case.

Performance & Accessibility Targets

When building any site, it is always vitally important to make it the best it can be. Not only with page load times, but also with accessibility. Each page, post and section of the site was tested for accessibility to ensure the site was useable for everyone on the web.

As well as scoring the highest it can using the Chrome Lighthouse tests, the site also scores high where it counts.

Core Web Vitals scored it as follows:

  • LCP (Largest Contentful Paint) = 0.77 seconds.
  • CLS (Cumulative Layout Shift) = 0.001 seconds.
  • TBT (Total Blocking Time) = 0.00 seconds.
Chrome lighthouse testing results

How?

Any experienced coders looking at this will easily be able to see how the site has been optimised.

For everyone else, here’s some free tips:

  1. Only include code (plugins & other scripts) that are vital for the site to operate.
  2. Ensure that all plugins used on the site originate from the correct sources (no pirated copies with bad code).
  3. Ensure all plugins used are well maintained and supported.
  4. All images on the site are mostly WebP or SVG, with the odd PNG where needed.
  5. Be ruthless! If a plugin or feature causes issues with accessibility or speed, bin it. It’s probably not that important.
  6. Select a good host.
  7. Only once you are 250% sure nothing needs to change on the site, setup a CDN (Content Delivery Network) and caching on the site.

Getting the site to perform as well as it does, takes time and a lot of testing. Don’t expect to be able to get your site to run as slick without putting in the time & effort to address anything and everything that gets flagged in tests.