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.

Your mobile performance score is vital for rankings.

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 get a great mobile performance for the GapScout website.

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 a little 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

👋 Did you like this?

Get an article like this emailed to you once a month.

RSS feed

I don’t write much about WordPress anymore now that I’m working on GapScout. That said, I enjoy the industry, but now merely as a user of the software rather than a product creator.

Still, I can’t help but always have my business mind turned-on as I witness the emerging trends.

There is a lot of chatter about blocks, and the theme space dying (as it has traditionally been defined). Some folks seem excited, as the feeling resembles the early days of plugins.

I don’t think blocks will become the “new” plugins. Not initially, anyhow. Some maturity needs to happen first. Specifically, with how these solutions are marketed on a wider scale to the average user.

More on that shortly, but for the moment, let’s look at how we got here.

2012-2016: Plugins emerge as viable money-makers.

My entrepreneurial stint in WordPress was from 2012-2021, in what I would say was the golden era of WordPress plugins. Prior to these years, it was all about themes. But developers started to get creative with the introduction of custom post types.

The WordPress plugin landscape in 2012 was a different beast altogether. It was young, innovative, and very grassroots. There were very few “big players” at the time. Off the top of my mind, we had WooThemes, iThemes, GravityForms, and Easy Digital Downloads.

The years of 2012-2016 marked the emergence and maturation of WordPress plugins as a business endeavor. Plugins transitioned from being donation-based, to one-time payment, to recurring license fees.

In my mind, WooThemes was the biggest proponent in pushing the industry in this direction. I have them to thank for giving me the confidence to start charging yearly for LearnDash. WooThemes normalized this business model, and it was further validated when they were bought out by Automattic in 2015.

Shortly after the acquisition of WooThemes, the plugin market exploded in growth.

Whether it was Automattic validating the plugin approach, or the overall growth of WordPress as a CMS via hosting companies doubling-down on WordPress, 2016 marked the beginning of the upswing in the plugin market.

Each vertical became flooded again with a new wave of players. From memberships, to forms, to learning management systems, and more – there were always five or six viable options available to users.

With more options in the space across the board, we saw a larger range of pricing. From the “buy me a coffee” donation schemes, to hundreds of dollars, and everything in between. WordPress plugins started to compete directly with popular SaaS solutions.

Some people didn’t like this. They felt that the WordPress industry was getting too greedy and losing touch of its original intent. The reality though was WordPress was growing up. Big players, and big money, were now entering the ecosystem.

This expansion continued through the next four years, until…

The pandemic over-accelerates growth, exits begin to occur.

The pandemic resulted in a surge of revenue for LearnDash. Like, in a very significant way, and my company wasn’t the only one. Everyone who I talked to in my network experienced the same.

I can’t recall the exact number, but I’m pretty sure I hired roughly 12-15 more people in about three months. It was a crazy, stressful, and extremely profitable time.

For reasons that I have already discussed, selling became the best way forward – and I wasn’t the only one. A record number of WordPress companies sold, particularly in 2021.

These weren’t small “Flippa”-style sales, either. By way of example, I hired investment bankers to manage the sale of LearnDash and I learned quickly that WordPress was a legitimate investment space for many large VC firms. This was big-time stuff, and I knew that I needed top-tier professionals involved in the process.

The market normalizes, with more competition than ever before.

What no one knew at the time of the pandemic was when (or even if) there would be an end to this “COVID bump”. Today, the consensus is that things have definitely calmed down.

Many established WordPress plugin providers came out the other side of the pandemic with better processes, bigger teams, and bigger pocketbooks. The popular segments (online courses, for example) have seen a surge in competition as everyone tried to get a piece of the pie.

More players, more money, more at stake. No matter which niche you choose today, breaking into the WordPress plugin space is more difficult than ever. The bigger players are part of larger VC portfolios, resulting in more resources and reach. Your best chance is to already have a following (YouTube channel, popular website, etc.) and to sell to your audience.

This has the entrepreneurial-minded folks looking outwards to other opportunities, which brings us to Gutenberg Blocks.

Blocks today are what plugins were in 2010-2012.

There is a lot of hype around blocks, and rightfully so, though I am not yet convinced that we have found the commercial way forward.

People don’t search for blocks, they search for solutions, and currently the market is very “block-focused” with the marketing and terminology. Not only is that boring, it only appeals to the indoctrinated of WordPress.

It reminds me of when everyone was talking about “custom post types”, and describing their plugins in this way, instead of the end-result that they allowed you to accomplish.

Innovation is coming to WordPress in the form of blocks, not plugins. This will lead some to discover some new, profitable segments. Will it be as big of a gold rush as the plugin boom we saw? Maybe – but that hinges on something important.

To be successful, the WordPress community shouldn’t look to Automattic to define the Gutenberg block market.

Plugins grew in popularity because of the third-party players in the space. Full stop. In fact, Automattic’s success with plugins (WooCommerce) was the result of an acquisition, not anything they did. Any other plugin they’ve released is usually a fourth or fifth tier option at best.

This being the case, the community should resist the temptation to look to Automattic for “the path forward”. Objectively, they don’t have a great track record for inherent innovation.

I believe we are seeing community innovation happen, and this is encouraging. From block patterns and frameworks, the transition of themes, and block-powered functionality in popular plugins. The market is starting to innovate and define not only how to use blocks commercially, but why blocks are a good way forward.

So, is this the new gold rush in WordPress? I think it very well could be. It is still in the very early days, which is fun and confusing at the same time. We don’t know how things will play out quite yet because, well, everything is still in flux.

But if you are an entrepreneur and are looking for opportunities in the WordPress space, then you will do well to keep blocks at the top of mind.

#WordPress

👋 Did you like this?

Get an article like this emailed to you once a month.

RSS feed