Rebuilding Siteimp.com for Far Better Performance Scores

Earlier this week, I ran my first SiteImp report on siteimp.com so that I could start writing documentation. My scores, particularly my cumulative layout shift scores were absolutely horrible and I ended up with average performance scores of 88.2 and 86 (mobile and desktop)! Even worse, my average cumulative layout shift scores were 41.6 and 27 (mobile and desktop). That’s absolutely horrible but I knew exactly what I did wrong.

At first, I was just going to make the changes and improve my performance but then I took an honest look at how I designed the information and found some serious problems. The first was that it was obvious that this is a product if you entered on the home page. But if you entered on my blog, it left the impression that I was a web performance blogger who shared detailed metrics on my website. That’s bad because this is a product and I need everyone to understand that as soon as they enter my site.

So, I decided upon a partial redesign while making changes to improve my scores in cumulative layout shift.

The rebuild

It’s funny to call it a rebuild because I only changed a couple of things.

The first change (5 minutes) involved getting rid of that extremely bright green colour I had in the big title section at the top of every page. The colour had absolutely nothing to do with web performance, but the green was so bright that I was likely damaging my eyes by staring at it. The current orangey-yellowy (it’s technically called ‘Goldenrod’) gets the point across with fewer headaches.

After pain was permanently cast out of the brand, I wanted to fix the little thing that caused the big problem. My h1 heading in the title area had a UI Kit class applied that changed character size and spacing dramatically after the UI kit was finished being downloaded and processed. Whenever I’m doing performance optimization, my first test is to just remove whatever caused the problem and see what happens (1 minute).

In this case, a simple h1 tag looked fine against the orangey-yellowy (I mean ‘Goldenrod’) title area. The class looked good but it was fine without.

Afterwards, I did some manual testing and clicked around the page (10 minutes). While clicking around, I noticed that the orangey-yellowy title areas were composed of two classes applied across the pages. Some pages had uk-section-small applied to the section. Others had uk-section-medium. Since my home page is most important, I decided to standardize around -medium on the home page and -small on all other pages (4 minutes).

Twenty minutes in so I ran a SiteImp report to check my results while I went to get coffee. When I got back, my average performance scores were 94.1 and 93.9 (mobile and desktop). CLS improved to average scores of 95.6 and 95.5 (mobile and desktop). That was pretty good, but I discovered that I was still getting a bit of layout shifting out of my menu in both desktop and mobile. In desktop, my logo style caused the problem - it changed the height of the entire main menu div just enough to create a little bit of shift. In mobile, my problem was still the mobile menu - in this case, the hamburger thing caused a little bit of layout shift when the styles finished loading.

I got an idea while looking at the report, grabbed a notebook (the paper kind) and started sketching (10 minutes). The end result looks like something a very uncoordinated child drew with a pen but it gave me enough to start changing stuff. I took the logo, made it bigger and added a tag line explaining exactly what SiteImp is directly underneath (15 minutes). In the mobile version, I centered the menu toggle and replaced the hamburger thingy with the words “Main Menu” (15 minutes).

Fifty minutes in and I was fairly happy with how things looked, but I obsessively tinkered (40 minutes) with margins, paddings and borders. In 90 minutes, I was happy enough to deploy.

The results

After those changes, I got busy building a blog template and writing more content. But I ran a SiteImp report today and the results were very good. My new average performance scores are 97.1 and 97 (mobile and desktop) across 27 pages. My average cumulative layout shift across all 27 pages is 100 - I’m very happy with that score. At this point, there’s really little use in optimizing further.

Average First Input Delay and Largest Contentful Paint are both very good. But ironically, the lowest scores in the column are highlighted:

Really what are the odds?