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.

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…

Google My Business Ownership Request

We received an email from Google Business Profile for an ownership request. This was a good customer and we wondering if they might be leaving us. We reached out to the customer to verify the request, and found out the customer didn’t request it. Good for us, but very troubling had the request been granted.

Your Google Business Profile is very important to businesses. In the past we have seen customer loose almost all new business when their profile gets suspended. Getting Google to remove the suspension can be next to impossible. As a business owner you need to have this tool under your control.

Our advise for anyone is to respect and appreciate your Google Business Profile and make sure you have ownership over it. We have spent a lot of time with customers who have gotten into trouble and lost their listing or got it suspended. If you get in over your head and need some help feel free to reach out to us for help.

Let us know if this helped you…

WordPress Post h1 Title Tag Gantry

We used Gantry template on our blog since we built the main website using this template as well. It saved us a bunch of time because we were able to use alot of the same CSS. We mainly audit our main site for SEO, but when examining AHREFs full data we noticed all the blog post titles were h2 tags, so the h1 tag was never created for the page.

We ended up having to do an override in the template. Not something we like doing; however, Gantry does make it easy-ish. We did need to edit some template files directly. We used the following forum post to help us.

In the theme directory we edited the following files: views/partials/content(-page, -single).html.twig.

Let us know if this helped you…

Translate »