Google Page Speed Insight Tutorial

Okay, maybe not a full blown tutorial just some lessons we have learned. We recently got asked evaluate a website. The site seemed very plain Jane; however, when running Google’s page speed insights we were blown away by the performance. It scored above 90% on everything. We tested a new version of our website and was crushed by the disappointing score. It was time to get to work and learn how to lower the load times, increase the accessibility and SEO scores.

Here are the first test results for mobile and desktop.

The performance scores were terrible. The SEO was so disappointing.

Keep your <h> tags in order

Digging in deep with the browser developer tools. We realized that a simple module we had at the top of the page as an attraction had the text was in wrapped in a “<h3>” tag. This seemed so simple but Google wants your page <h> tags to be in order starting with “<h1>” and working way through the higher / smaller <h2 – 6> tags. Simply moving this module below our “<h1>” tag greatly raised our SEO score. Oh yeah!

Make it link

The other small issue was the navigation bullets in front page slide show didn’t have a destination. The module’s code knew what to do, but the link wasn’t visible to the browser. Simply not having the destination url in the “<a href=””>” tag. We didn’t have a way to control this so we choose not to show the dot-navigation. We switched it to showing arrow on the hover for the user to jump ahead in the slideshow. Time to run another test in Google’s Page Speed Insights.

The results are in

These two small changes super charged our results. Here are the results we got.

We were so please with the results. We still have some work cut out for us, but is good to know we are not so far off. We dug in deeper. We really wanted “Accessibility” and “SEO” to reach 100. “Best Practices” we could work on, but is “Performance” based on the CMS platform? Is that why “Performance” isn’t reaching 100?

Going Deep

We followed the details in each section of the Page Speed Insights and eliminated a few small problems. One of the issues we had was “contrast“. It was pointing to a red button we had on the screen that had white text in it. We thought the contrast was strong, but we used this following link to check the contrast ratio between the background and the text. We needed to change our background color just a little.

https://dequeuniversity.com/rules/axe/4.9/color-contrast

We took some the images into Photoshop and got the resolution down. We also cropped the images to fit the space they occupy better. We lost a little quality but took it down to a quarter of their size. Not fantastic, but lets see how it could help.

The next run we are finally hitting the numbers were are happy with. We had to eliminate just a couple of small features, but we are not really sacrificing user experience. Take a look at the results.

Let us know if this helped you…