At the early stages of building this website, I was keen on building pages faster so I installed many plugins as needed to get the job done. You can probably guess what happened next.
Because of all the additional plugins, my site took a huge performance hit and it was becoming very slow to load.
While I had a general understanding of what impacts the performance of a website and had already taken some steps to mitigate performance issues, this time around there were too many issues and I didn’t have the technical expertise to tackle them.
Hosting is usually the critical factor in the overall performance of the website. I have been with MDDHosting for a number of years and hadn’t encountered any performance issues. In fact, I tested this site early on (before adding all the plugins) and it was performing well.
A well-made theme shouldn’t hinder the website’s performance. Unfortunately, many of the themes with advanced features such as page builders, animations, and other effects are responsible for sluggish performance. That’s why I’m using GeneratePress, a lightweight theme built for performance.
Whether it’s a free plugin or a premium plugin, code quality makes a difference. I installed Download Manager, Elementor, and a few others that I thought were well-made plugins but turns out not to be the case. I had to go through each plugin and determine if it was causing a performance issue
I generally tend to stick with SVG where possible due to its low file size and ability to scale to any size screen without losing resolution. If SVG isn’t an option, then I make sure the image size (JGP or PNG formats) remains fairly small (200 – 400 KB).
I was using ‘Inter’ for the body font from Google Fonts and ‘Proxima Nova’ for the header which is served from Adobe Fonts. Using web fonts generally adds weight and tends to slow down a website. I was making it worse by using two different web font service providers and multiple font weights.
While Font Awesome and Eicons are great services, they add the entire library of icons across your entire site, which ends up slowing down the entire website. Though I do not use them on this site, they were automatically loaded into my site via Elementor.
CSS and JS files used by Google Analytics, Google Ads, Facebook Comments, and others considerably slowed down the website. I was guilty of not considering the negative impacts of these files on the load time.
Not sure how to resolve the performance issue, I turned to the GeneratePress support team for advice. And as always, they came through to give a lending hand.
They broke down what was causing the performance issues and pointed to Perfmatters plugin to help improve the site performance. Much as I didn’t want to add another plugin to solve the performance problem, I gave it a chance since it was recommended by the GeneratePress support team.
I want to take a moment to point out the GeneratePress support team went out of their way to provide support for performance issues which was not caused by their theme or plugin. That’s a level of support I haven’t experienced with any other theme developer.
Perfmatters was a plugin that I have not come across before and after browsing their website, I got the impression it was just another caching plugin (it’s not) with a promise of improving the speed of your website.
On top of that, I was partly hesitant to give the plugin a chance because it was a premium plugin and a free version wasn’t available to test drive.
After giving it some thought, I paid $24.95 for the plugin with the hope the author would honour the 30-day money-back guarantee if the plugin didn’t perform as advertised. Realistically, if I were to hire someone to solve the performance issue(s), I would probably end up paying hundreds of dollars (if not more) and there would be no guarantee I would see positive results.
Toggle On, Toggle Off
Once installed, the first thing I noticed was the simplicity of the plugin. Almost everything had a toggle button to enable or disable a function.
Well Thought-Out Documentation
Every single toggle option came with technical documentation that fully described the function and recommendations on whether to enable or disable it (depending on use cases).
The way documentation was integrated with the toggle option was very well thought-out. I just needed to click on the question mark and a new tab would open up with full details about the function. This was great! Saved a lot of time having to flip back and forth between documentation and the plugin.
Note, there is the small drawback of having too many tabs open if you click on many question marks at once, but that’s not worth making a fuss over.
For someone who isn’t fully knowledgeable about the technical ins and outs of WordPress, it made it very easy to understand what is being enabled/disabled while gaining significant performance improvements with just a few clicks.
I followed their easy-to-follow guide on what to enable and what to disable, and not too long after my site was performing much better.
Script Manager for Additional Control
One important item to note about the plugin is that there is a secondary area called the Script Manager, which allows you to disable scripts on a per post/page basis or across your entire site.
To access it, you have to enable Script Manager and then go to the toolbar at the top of a post or a page. I found it confusing as to why it wasn’t accessible right through the admin panel.
This feature is incredibly useful for turning off CSS or JS files that load on every site. For example, if you are using Font Awesome or Elementor on specific pages only, then you can disable it from loading on the entire site and just load on specific site(s).
Clearing Out Unnecessary Plugins
Perfmatters gave a huge boost in performance but there was still room for improvement. Some of the plugins were still causing the site to slow down.
I had to go through each and every plugin, deactivating and activating, to identify which plugins were causing the performance issues. Once the plugins were identified, I had to make the decision on whether to keep them, because they were critical to the site, or delete them.
Much as I enjoyed Elementor and the ability to create pages visually, the plugin was negatively impacting the performance of the website. More importantly, the main reason I invested time and money into the plugin was to speed up building pages for the site. Unfortunately, I couldn’t build and launch pages quickly as I would have liked, even using pre-made templates.
This isn’t the fault Elementor, rather it’s on me. I didn’t save much time because I was obsessively tweaking every aspect of an element (typography, spacing, size, etc) until the page looked exactly the way I wanted it.
Not only was it slowing down my site but it was no longer serving its original purpose of building pages faster, due to my shortcomings. I made the difficult choice of abandoning Elementor after all the time and money I invested into it.
Download Manager – Issues With Updates
As for Download Manager, it was a good plugin but with each update, minor issues kept arising. The admin menu would appear all wonky or the layout would not function as intended.
Having read through their support forum, I wasn’t the only one experiencing these issues as many others were making similar complaints. In a couple of posts, the people just sounded completely fed up dealing with new issues with each update.
Did I really need this plugin? The answer was ‘no’. There were other options out there and I could find an alternate solution.
Remove or Deactivate Plugins
I had to go through the list of plugins I had installed and had to decide if they were critical to the website’s functionality. If not, I deleted or deactivated those plugins (in case I needed them in the future).
Using Elements Instead of Plugins
Google Fonts, Google Ads, and others can be connected to the website through GeneratePress Elements and a separate plugin is not required.
Now, I look at using Elements to add features or functions, rather than adding more plugins.
Before & After Comparison
Let’s take look at the actual difference Perfmatters made on my site.
This was my site before installing Perfmatters. It produced a PageSpeed score of 43 with a loading time of 10.7 seconds.
Improved the overall score to 68 and reduced the loading time to 5.9 seconds by performing the following:
Disabling components that didn’t add value
Limiting post revisions and Autosave intervals
Enabling local fonts instead of going through Google Fonts
After making further adjustments (see below), the site earned a respectable score of 95 with a loading time of 2.3 seconds.
Further disabling components that didn’t add value
Google Analytics connected through Perfmatters
Removing Adobe Fonts
Adjusting Heartbeat frequency
Deleting Elementor plugin
Deleting Download Manager plugin
Removing or disabling plugins that’s weren’t critical
Perfmatters has made a world of difference in optimizing this website to load fast. For anyone running a site on WordPress, I would highly recommend trying it out as it is a must-have plugin.
When it comes to WordPress, we are spoiled with a number of free plugins that provide much-needed features and functionalities. So, there’s always hesitation to pay out of pocket for a plugin when it’s easier to look for a free alternative.
With Perfmatters however, an alternative plugin (free or a premium) can’t compete with its user-friendly interface, highly detailed documentation, and continuous updates to provide more advanced features.
For $24.95, it’s hard to find anything that can produce outstanding performance results so quickly.
To put this into perspective, a good web developer would charge at least $80/hour (probably more). Even if you outsource, you will still pay around $20-25/hour for a half-decent developer to inspect the site, identify all the issues, and work out a solution. For a fraction of the cost, you can resolve many of the performance issues by just toggling buttons.
If your website is running on WordPress, definitely give Perfmatters a chance and see what kind of difference it makes on your website.
Bootstrap Icons – Multiple SVG Icons