🌐 Justin's Blog

I recently released a new logo and web design for GapScout. It’s not perfect, nor will it win any awards, but I’m happy with it as a first version.

The main tool used to build the design was Elementor. I insisted on this because it’s a plugin I am very comfortable in using, which meant I could make future design modifications myself once the designer was done.

The problem, however, is that Elementor can lead to some pretty crappy performance scores, in particular for mobile. In fact, I ran a Google PageSpeed Insights report for Elementor’s own homepage, and their mobile score is pretty… uh…bad.

Mobile Performance is Vital

I didn’t believe this until I saw it first hand.

The old GapScout site had a pretty bad mobile score, and when I boosted it to ~90/100, I noticed an uptick in the number of visitors. Seeing as a slight majority of visitors to GapScout are using mobile compared to laptop/desktop, this was a big win.

So, while the new GapScout homepage has a perfect desktop performance (100/100), the mobile score originally sat at a pretty depressing 50/100.

But not for long!

With just a few adjustments and was able to get it up to 99/100.

Note: PageSpeed Insights fluctuates at any given time the test is run. GapScout’s mobile score usually lands between 94-99.

Being a good internet citizen, I tweeted at Elementor to let them know that improving their mobile score is definitely possible with just a few tweaks, and this tweet elicited a few responses:

I need a list of those tweaks cuz I'm always fighting to get mobile scores over 50 on mobile ?

— Robert DeVore (@deviorobert) February 10, 2023

Yeah tell us the secrets!!

— Ross Johnson (@3pointross) February 10, 2023

Thanks to Robert and Ross, their replies to my tweet were the inspiration for this blog post. So, I’m writing it for them, but you as well, because this probably helps anyone who is using Elementor and WordPress.

How I Increased Mobile Speed

Okay, onto the good stuff. I’ll keep it short because:

1. You don’t care about backstories, just what works.

2. I’m not very technical, and can’t explain a ton of detail anyway.

STEP 1: Use a host that doesn’t suck.

I’ll start with the often overstated, but most critical part to any website performance metric: use a good webhost!!!!!!!!@*&($@*

You’re not going to get great results on some $10/mo hosting plan. Sorry.

I’m using Rocket.net, and holy crap, it’s fast. Like amazing.

I think I’m currently on the $30/mo plan, but maybe I paid yearly, so that dropped to $25/mo. I dunno, I’m too lazy to go look.

They will migrate you for free, so just switch. Also, I’m not affiliated with them nor do I get any kickback for referrals. I just take comfort in knowing that you will like me because my recommendation is a good one. 😉

STEP 2: Buy the Perfmatters plugin.

This is the other critical component, especially for mobile. Perfmatters was actually recommended to me by Rocket.net. The plugin is $29/year (there is no free version).

Okay, so now I am going to share with you my settings, but first things first:

Disclaimer: My settings probably won’t work 100% for your site because it depends on which plugins you have installed. I also can’t help you troubleshoot anything.

With that out of the way, these are the settings I have in place in Perfmatters on the GapScout website:

• Under Assets, the follow settings are turned on:
  Defer Javascript
  Include JQuery
  Delay Javascript
  Delay All Scripts (for Delay Behavior setting)
  Delay Timeout
  Remove Unused CSS
• Under Lazy Loading, the following settings are turned on:
  Images
  Add Missing Image Dimensions
• Under Lazy Loading, in the “Exclude from Lazy Loading” field:
  Filename of the website’s logo
• Under Fonts, the following settings are turned on:
  Disable Google Fonts

That last setting is because I am not using Google fonts, but have instead uploaded a custom font through Elementor. If you are using Google fonts, you will not want to turn on that setting. Instead, turn on these two:

1. Display Swap

2. Local Google Fonts

STEP 3: Add support for custom fonts in Elementor. (Optional)

If you are like me and have uploaded your own custom font to Elementor, then there is one more step to take for optimizing font display. Do not worry about this step if you are not using custom fonts or Elementor.

First, you need to preload your fonts in Perfmatters.

1. Navigate to Preloading.

2. Paste the URL where you uploaded your font in WordPress.

3. Under Select Type, choose “Font”.

4. Select the CrossOrigin checkbox.

5. Repeat for font variations as needed and save.

Now that the custom fonts are specified in the preloading menu, the last thing you need to follow this support article to add the following filter:

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) { return 'swap'; }, 10, 3 );

Once you have added that (I recommend using the code snippets plugin), you have to do the following steps:

1. Head over to the Custom fonts screen at Elementor > Custom Fonts.

2. Edit the custom font you want to regenerate (simple edit and update, no changes are needed).

3. Repeat step 2 for each font you want to regenerate.

4. Head over to Elementor > Tools > click on the Regenerate Files.

And you’re done!

Most of this process took me only 15 or 20 minutes. I did run into a snag at one point and simply reached out to Perfmatter’s support (you’re in good hands, they were incredibly helpful).

In the end, I skyrocketed the GapScout homepage mobile score from a pathetic 50/100 to a consistent 94-99/100.

Want to Dig Deeper?

As always, whenever you make changes like this, it’s a good idea to use an incognito window to visit your website to make sure it still looks (and performs) the way that you expect. If something goes wrong, simply turn off the settings you activated so that you can troubleshoot effectively.

If you are interested in optimizing your WordPress site, then Perfmatters has a more comprehensive guide that I can recommend. I like that they also include references to individuals who can help you in the event that you need a little assistance.

And remember: chasing high mobile scores can be fun, but the most important thing is that your website is a pleasant user experience for your visitors.

#WordPress