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.

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.

https://github.com/gantry/gantry5/issues/2119

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

Let us know if this helped you…

Joomla 5 & Gantry Mobile Menu

We are upgrading a Joomla 3 website to Joomla 5 and keeping a Gantry template, and when testing the mobile view we noticed the mobile menu wasn’t showing up. This drove a bit crazy, but we were able to get it resolved. Once resolved we needed to work with the “custom.scss” file to use Media Queries to make it perfect

The secret here is in the layout section of the template click on the gear or options of the Menu Particle. At the bottom of the options you will see “Mobile Target“. This will make this menu the mobile menu. Here is a link to the instructions from Gantry.

https://docs.gantry.org/gantry5/particles/mobile-menu

Let us know if this helped you…

Using Media Queries in Gantry Joomla

We were upgrading some Joomla 3 sites to Joomla 5, and fortunately Gantry 5 is ready for Joomla 5. We needed to use a Media Query, but just putting it our CSS override files wasn’t working. These Media Queries were working in our Joomla3 / Gantry 5. Gantry has great documentation and we found our answer here.

https://docs.gantry.org/gantry5/tutorials/media-queries

Gantry has funky methods for overrides, and that you will need to work with the file structure. You will need a “custom.scss” file put into your theme. The path is: “your site root/templates/g5_hydrogen/custom/scss“. We mainly had an issue with the mobile menu icon not showing up in mobile mode. We started with the following lines in our “custom.scss” file:

// import breakpoints
@import “dependencies”;

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {

Your CSS Classes go here

}

@import “nucleus/mixins/breakpoints”;

From here it was normal CSS. The secret is to put it in the “custom.scss” file, and to follow the syntax that Gantry provides. We provided a link above to their instructions.

Let us know if this helped you …

Fontawesome In Gantry Joomla

We like using Joomla over WordPress when it comes to portals, so while working on a site we ran into an issue where some Fontawesome 5 Free fonts were not showing up. The template framework Gantry has the capability for Fontawesome built-in. This comes up periodically and here are some tips you can try if you run into this issue.

  • Choose “Font Awesome 5 Free (Webfont / CSS)” in the settings.
  • In your CSS class use the font family “font-family: ‘Font Awesome\ 5 Free’;
  • In your CSS class right after the font family set the font weight to: “font-weight: 900;

We moved to “Font Awesome 5 Free (SVG / JS)“, but we lost our CSS styling. We had buttons with a red background and that was lost. When we switched it back to “Font Awesome 5 Free (Webfont / CSS)” we were able to style the way we pleased.

The next issue we had was only the code was showing over the symbol. We had the correct font-family, but we had the font-weight set to “normal”. You must set the font weight to be: “font-weight: 900;“; otherwise, you will see the following.

Let us know if this helped you….

Blocked Website Comcast Securityedge

Our IT Network staff recently did a network upgrade for a new customer who was getting a new ISP, and when we finished the customer couldn’t get to their website. Seems like a DNS issue, but it wasn’t. We could use just the Comcast router and go to the website, but when we added our Firewall with no rules set the site was blocked.

The issue turned out to be a Security feature in the Comcast router. A featured called “Securityedge”. Once we determined it could be this feature we were unable to turn it off via the router. The only way to turn off this feature was to ask Comcast to turn it off.

Let us know if this helped you….

Phone Number “Spam Likely” Fix

One of our employees called one our partners, but didn’t reach them. When they called them from their cell phone the person told them they didn’t answer the call because it came across labeled “Spam Likely”. We reached out to our VOIP provider.

The VOIP provider said there was nothing they could do and that the number was reported as spam. They said we would need to go the website Free Caller Registry and submit our number.

https://freecallerregistry.com

We had to fill out the form and verify our email address. We received an email stating their team will investigate it and we will be hearing back when they have finish the investigation.

Let us know if this helped you….

Outlook “An unexpected error has occurred.”

We got a call from a customer who was getting an error in Outlook saying “An unexpected error has occurred.” We Google’d for some advice, but all the suggestions were regarding a corrupt Outlook profile. Well being Windows 11 these settings were a bit tougher to find.

We realized the user was pulling their contacts from their migrated Office 365 account. This was a newer computer and we discovered when they typed in the “Board Members” it populated the Bcc field they wanted but the email wouldn’t send. This is because the group “Board Members” no longer existed in the new Outlook profile.

We went to the ribbon at the top of their Outlook and clicked on the address book icon.

Once the address book opened we went to the top menu item “Tools“, and selected “Options“. Here you need change “Address Book:” to “Contacts“. Now their group was listed and the email sent.

Let us know if this helped you ….

Firefox Disable Website Notifications

We had a customer who suddenly started getting notifications from a website and didn’t want them any more. The customer was using Firefox browser. Here are the steps to removing or blocking these notifications.

  • Find the settings button. On this machine a new tab gave us a gear icon to click on. There is also the hamburger menu which you click on to expand and select “Settings“.

  • Click on the “Privacy and Security” menu item on the left. Scroll down to “Permissions“. Locate “Notifications” and click on it’s “Settings” button.

  • Select the website’s notification and either “Block” it or “Remove Website”. Then click “Save Changes”.

Let’s know if this helped you…

Translate »