Saturday, January 23, 2021

This is How You make your WordPress Site Faster

stopwatch

In 2021, Google says they’ll favor faster websites in their rankings. How will your website fare?

Google offers a free tool called Page Speed Insights where you can see how you’re doing.

Unless you’ve focused on performance, your score is likely to be disappointing. If so, you’re not alone.

Let’s take a look at some websites. Keep in mind that “good” according to Google is a score of 90 or higher.

Websites Mobile/Desktop Scores

Random Websites

Forbes 21/65

McDonald’s 21/44

Gizmodo 32/50

Starbucks 47/94

High Performers

Marko Saric 100/100

WP Rocket 92/100

WP Beginner 88/97

Google 85/100

Why are Mobile Scores Lower?

Notice mobile scores are almost always lower than desktop scores. According to Ezoic, there are three main reasons mobile scores tend to be lower:
  • Mobile devices generally have slower processors
  • PageSpeed Insights simulates the cell network at a slower speed
  • Mobile devices have device-specific CSS rules (re-sizing images, viewport size, etc.)
Google has a “mobile-first” policy. That means your mobile score is more important than your desktop score.You should keep this priority in mind when making decisions. But no matter what, your mobile score will usually be lower.Some sites will say they can tell you how to achieve 100/100 but with few exceptions, that isn’t a practical goal.If you can achieve a mobile score of 70+ and a desktop score of 90+ pretty consistently, you’re doing well.

Poor Performance is Common

Notice most random sites fared poorly. High performers tend to be companies focused on Digital Marketing.

But with some effort, you can also enjoy higher scores. Let’s walk through the performance-tuning process, step-by-step

Step 1: Backup

If you haven’t already, you should backup your WordPress website. Make sure you have a recent backup before you start fine-tuning.

Performance tuning is largely a trial-and-error process. If something goes horribly wrong, you should be able to restore from backup.

Your hosting site should keep backups of your site. But it’s much better if you also backup your site using a plugin.

If you don’t already have a process in place, UpdraftPlus Backup and Restore is a good choice. Install and activate this plugin and make sure your backup process is working, then move on to Step 2.

Step 2: Initial Measurement

Measure your website’s starting performance scores. There are many free tools available for this purpose.

I recommend Google Page Speed Insights and GTMetrix. Run each test several times and take notes or screenshots so you can remember your scores.

If you’re already seeing scores of about 70 for mobile and 90 for desktop, your site is already performing well. You can aim even higher, but it’s safe to stop here if you prefer.

Step 3: Asset Cleanup

If you haven’t already settled on a WordPress theme, I recommend Astra with Elementor.

Some people complain that these tools layered together cause some bloat. This is the price you pay for an easy drag-and-drop interface, but you can mitigate this issue with a plugin.

Find, install, and activate the Asset CleanUp: Page Speed Booster plugin. It’s more user-friendly than it may appear at first.

If you’re not already familiar with this plugin, carefully read the instructions. The author explains in detail how the plugin works.

The basic concept is that you can unload, preload, or defer various assets (fonts, style sheets, Javascript, etc.), depending on your needs. This can give your site a huge performance boost.

Let’s take a look at some areas that may be ripe for improvement.

Be sure to take a look at the possible improvements your page testing tools recommend. Do this before you delve into the options in the Asset CleanUp plugin.

WARNING!

Do not completely disable XML-RPC using the settings in this plugin. WordPress depends on this process to perform tasks.

3.1 Images

There are three main ways you can improve the load time of your images.

  1. Correct sizing
  2. Compression
  3. Advanced image formats

For example, a blog post cover image should be 1200 pixels wide per Google’s specifications.

If you have a larger image, use Adobe Photoshop to resize the image to something like 1200 x 800. You can also use online tools such as Image Resizer or Lunapic for free.

Once you have your image resized, upload it to Squoosh for final compression. Squoosh converts your images to the most advanced formats, such as MozJPEG. Upload the final version to your media library.

A properly sized, compressed image will load fast and boost performance. For some websites, this change alone would be a major improvement.

3.2 Plugins

Plugins are snippets of code you can install to perform various tasks. Many are free with the option to upgrade to a pro or premium version for a fee.

Keep in mind that free plugins are not really free. They add to your overhead and can slow down your performance.

Be sure you install and activate only the plugins you really need.

For example, you may have a plugin specifically designed to handle forms. If you have Elementor, do you really need that plugin?

Elementor has everything you need to create forms, including reCAPTCHA. You might try recreating your forms in Elementor. Then you can delete the plugin.

Apply the same reasoning to Legal Pages and other elements you can create in Elementor. Also, look for redundancy between your plugins.

Let’s say you have Rank Math SEO, Monster Insights, and Google Site Kit plugins. You probably don’t need all three, but even if you want to keep them all, you don’t need to connect to Google Analytics three times.

Connect only once and combine the functionality you want into the fewest plugins. Ideally, narrow it down to one or two.

Deactivate and delete plugins until you have only the ones you really need.

After you remove plugins, run your test again in Page Speed Insights. You might have already significantly improved your site speed with these measures.

3.3 Fonts

Fonts can contribute mightily to poor performance. Much more than you might think.

Take a look at Google’s recommendations and see what font files are loading. Also, look at the Waterfall page on GTMetrix to see the order and timing of your page load.

Then go into your Home Page in Asset Cleanup and see how many font sets are loading there. You may see that Astra and Elementor have both loaded Google fonts.

On top of the Google fonts, you may also see Font Awesome icons and fonts loading. How many font sets do you need?

I started out trying to unload Font Awesome elements only to discover they’re bundled closely with Elementor. So I reversed course and prevented Google fonts from loading while preserving some of the Font Awesome .css and .js files.

I got a significant page speed increase just from this small change. I also switched my main font family to Helvetica, which is a system font.

Not all web designers will be happy with “boring” Helvetica when there are so many amazing Google fonts available. There is a performance trade-off to consider, and I chose speed over fancy fonts.

You can experiment with different options and formulate your own font strategy. What’s important to understand is that fonts matter when you’re performance tuning, and you should make sure you’ve optimized to your satisfaction.

3.4 Style Sheets & Scripts

If you look closely at the items that load on your page, you’ll see various .css files (style sheets) and .js files (JavaScript). Some of these files are vital to your website, but others are fat you can trim.

For example, a security plugin might install .css and .js files. Do you really need this style sheet? You can try unloading it on every page or only showing it to logged-in users.

You can test your CSS/JS files by unloading them one-by-one and seeing the results. I recommend leaving all or most of the Elementor files “as is.”

If Google says a file is “unused,” don’t take that at face value. Sometimes if you unload these files, you will find they had important functions you can’t do without!

After I examined my page load, I removed two plugins. I also preloaded a few essential fonts and scripts for faster loading and unloaded about a dozen unnecessary files site-wide.

These small changes gave my website a significant performance boost by trimming down the fat. With the free version of Asset Cleanup, you can minify (shrink and optimize) your files and clean up HTML.

If you spring for the Pro version, you can fine-tune your settings even more. Even if you stick to the free version, you will most likely see a substantial performance boost if you optimize and test your settings

3.5 Test Mode

If you’re concerned about doing all of this when people could be visiting your website, you can use Test Mode. That way you can preview changes before you commit to publishing them.

Visit this page to learn more about how Test Mode works.

To enable this feature, navigate to Asset CleanUp > Settings > Test Mode > Enable Test Mode.

IMPORTANT: Once you enable Test Mode, be sure to clear the cache. You can do this from the “Quick Actions” menu at the top of the plugin page:

asset cleanup cache

See the Cloudflare section below to learn how to sync the CDN cache with Asset CleanUp.

3.6 Wrap Up Asset Cleanup

You’ll know you’re finished with Asset CleanUp when you’ve squeezed out all the performance boosts you can. One clue will be when Google is out of suggestions for significant improvements.

At this point, take note of your performance numbers and move on to the next step.

Step 4: WP-Optimize

For this step, you could use a number of different plugins. One popular option is WP Rocket, but there is no free version.

I’ve tried most of the other well-known free versions, and the one that works the best for me is WP-Optimize.

This plugin has some issues and limitations, but I have stuck with it because the results are the ultimate test. Let’s take a look at key features.

4.1 Database Optimization

Use this plugin to keep your database clean and optimized.

Be sure to check the backup option before you run the optimizations or delete unused tables. UpdraftPlus acquired WP-Optimize somewhere along the way, so they coordinate well with one another.

The WP-Optimize plugin shines when it comes to keeping your database clean and optimized. It is among the best, so you may want to use it for this purpose even if you install another plugin for caching (storing data so future requests can be served faster).

4.2 Image Management

In the image settings, you can set up automatic compression for your images. You should compress your images before you upload them, but this is a nice feature to use anyway.

It will detect any images that are not compressed which can be helpful if multiple people are adding to your media library and you’re not sure they’re all meticulous about optimizing images.

If you have already compressed your image and WP-Optimize compresses it again, that’s okay. It may not optimize it any further but it won’t hurt anything either.

If you pay for the premium version, you can see and delete “unused” images. But be careful because not every image that makes the list is really “unused.” Review before you delete!

One of the best reasons to upgrade to premium is Lazy-Load Images. This feature delays loading images until a user scrolls down to them on the page, which boosts performance.

4.3 Caching

You can enable page caching and it’s supposed to work in concert with the Cloudflare Content Delivery Network (CDN). I don’t recommend this however because, in practice, this slowed down my website’s performance.

If you implement Cloudflare (and you should), let it handle page caching. 

4.4 Minify CSS/JS

You can also minify your CSS/JS files if you take the time to learn the settings. This might seem redundant if Asset Cleanup is already minifying your CSS/JS files, but you’ll probably get better performance if you let them overlap.

You can turn the minify feature on and off to see for yourself. WP-Optimize also monitors your WordPress scheduled tasks and may issue warnings on your minify page if there are problems.

Once you’ve got your settings fine-tuned in this plugin, check your performance again and move on to Step 5. 

WARNING!

If you use Asset CleanUp to disable XML-RPC, you may see this message in WP-Optimize: “WordPress has x number of scheduled tasks which are overdue.” Re-enable to fix this problem.

Step 5: Cloudflare CDN

Before we get into this, I disable my Cloudflare Content Delivery Network (CDN) when I first tweak the performance of a website. This removes one of the variables.

Once you have your performance tweaked as much as possible, enable the CDN for the final performance boost.

5.1 Why Use a CDN Service?

One of the most important benefits of a CDN is faster delivery in far-flung places. The great thing about the Internet is that you can reach people all over the planet.

But if your server is in Idaho, how fast can you deliver content to someone in Beijing? This is where a CDN helps by offering distributed servers that are much closer to users in places like London or Beijing.

A CDN can also help you protect and optimize your website. Even the free accounts on Cloudflare are feature-rich, and you can upgrade to unlock more options.

5.2 CDN providers

Cloudflare is a popular CDN that offers feature-rich free accounts. But there are a number of options you can explore.

Read FALL 2020! 8+ Best CDN Providers to Speed Up Your Website to compare providers. In the article, WP Forms compares the following providers:

  1. StackPath
  2. Sucuri
  3. Cloudflare
  4. KeyCDN
  5. Rackspace
  6. Google Cloud CDN
  7. CacheFly
  8. Amazon CloudFront

Cloudflare is the most popular choice and is one of the few with a free plan.

5.3 Hostinger + Cloudflare

One of the benefits SYMDIY offers to readers is a road map with recommendations for building your website from the ground up. The closer you follow the road map, the more helpful the tutorials here will be.

If you want to follow the road map, choose Hostinger with Cloudflare.

Hostinger has an easy setup tool you can use to setup Cloudflare even if you’re non-technical. I prefer to change Hostinger nameservers to Cloudflare, but either way is fine.

Cloudflare will send you a notification once your site is set up. Once you confirm your account is set up and working, you may want to tweak some settings.

5.4 Cloudflare Settings

In your Cloudflare account, click on the website you want to tweak. Navigate to Speed > Optimizations.

Make sure JavaScript, CSS, and HTML are checked in the “Auto Minify” section. Next, make sure the Brotli option is switched on.

Finally, scroll down to Rocket Loader and switch the setting to “On.” This will probably speed up the performance, but you can test with it “Off” and “On” and see what works best for you.

I recommend you leave the mobile settings unchanged. Avoid AMP and Mobile redirects. You shouldn’t play with these options at all unless you have a specific reason and know what you’re doing.

To purge the cache, navigate to the settings tab. You can avoid having to open Cloudflare to handle the cache if you install the WP Cloudflare plugin.

5.5 WP Cloudflare Super Page Cache

Once you set up your Cloudflare account, find and install the WP Cloudflare Super Page Cache plugin.

The plugin has instructions for connecting to your Cloudflare account. Once you have this set up, navigate to the “Third Party” tab.

Scroll down to “WP ASSET CLEAN UP SETTINGS.” Make sure the label reads “Active Plugin.”

Make sure the option to  “Automatically purge the cache when WP Asset Clean Up flushes its own cache” is set to “Yes.”

These settings ensure your Cloudflare cache will clear when you clear the Asset CleanUp cash mentioned previously.

Whenever you’ve made changes that are not appearing on your website, clear the cache. You can purge the cache for a particular post or page, or for the whole site.

You don’t necessarily need to manually clear the cache with every single change. Sometimes you will see your changes without this step.

If you’re testing, you may want to temporarily disable the page cache. That way you know your results reflect the change you’ve made.

IMPORTANT: If you’re in Test Mode in Asset Cleanup, tools like Page Speed Insights will not recognize your changes. Use Test Mode to preview how changes impact the look of your website. For speed tests, disable Test Mode and clear the cache.

5.6 Next Steps

Once you have Cloudflare set up and tweaked to your satisfaction, you’re all set.

If your score is not as high as you’d hoped, move on to Step 6. Otherwise, skip to Step 7.

Step 6: Additional measures

Are you satisfied with your improved performance scores? If not, you may want to hire an expert to help.

You may also want to talk to your hosting company and see if a service upgrade might do the trick. However, in most cases, popular hosting services such as Hostinger, BlueHost, and Siteground can deliver for a small business website, even with their basic plans.

Unless your traffic has grown considerably since you signed up for hosting, you should try optimizing before you turn to your host or CDN for help. Invest your resources in optimizations first, and then pay for expert help and upgraded services as a last resort.

Step 7: Create a Maintenance Plan

Once you are happy with your scores, you’ll want to keep it that way. It’s fairly easy to optimize a brand new site that has only a few pages and posts.

If you neglect performance tuning for months or years, it becomes much harder to diagnose and fix problems. Not to mention all the traffic and sales you’ve missed out on because your site was slow.

To avoid these problems create a plan for periodic audits.

Run tests with your favorite tools and make sure your plugins are still the best available options. Keep WordPress and your themes and plugins all up-to-date.

Troubleshoot and resolve issues before you close an audit, and keep your website humming along

Results

Now that you’re familiar with the process, I’ll share the results for SYMDIY.

Keep in mind that scores fluctuate, especially when you have shared hosting. Your score may be much higher the second time you run a test, just a minute later, even though you haven’t changed anything.

This can be frustrating, but you’re looking for trends over time. Not a single score.

Consider the highest scores you’re able to achieve. If you’re reached a point where Google has no more suggestions for significant changes except “server response time,” you’ve optimized successfully.

If your server response time is consistently slow, then it’s time to contact your host and see what upgrades are available. Switch plans or switch companies if you are convinced the problem is with your host or CDN.

I use Hostinger with Cloudflare, and I’m quite happy with both. Let me show you why.

Page Speed Insights

My highest scores on Page Speed Insights are 100 for desktop and 90 for mobile.

desktop score - pagespeed insights
pagespeed insights - mobile score

GTMetrix

You can use GTMetrix for free and unlock some extra features by signing up for a basic account (also free). You can upgrade for a fee and take advantage of premium features.

The scoring on GTMetrix is by percentage, and the highest this site ever achieved is 100% for performance and 99% for structure. 

This tool will also take a video of your site loading, so you can see the progression for yourself. Check out this video of the SYMDIY home page loading.

Keep in mind that this video would be more interesting if the page loaded slowly. Because it’s fast, you just see a loaded page after the first flash. You want your performance video to look similar.  

Other popular sites that offer free performance testing tools are Pingdom and WebpageTest. I rely on these less because I find some of the metrics misleading.

For example, Pingdom gives this site an “F” for not using gzip compression. But Brotli is enabled on Cloudflare, and it’s a superior option for performing the same function. This lowers my score on that tool but doesn’t reflect real-world performance.

Still, all of these page tests offer valuable insights. Use them in conjunction with the 7 Steps listed above, and you should see great results.

Conclusion

Hostinger, BlueHost, and Siteground can all handle small websites very well, even with their basic plans. Bootstrapping means you try everything else before you spend an extra dime.

Once you get the hang of it, performance tuning can be fun. Running tests is like pulling the lever on a slot machine, and sometimes you win with big improvements.

More often, it’s a combination of tiny tweaks that add up to major improvements through trial and error. Set aside a fair amount of time for your initial performance tuning and be patient.

Visitors love fast websites, and with a bit of effort, yours can be ahead of the pack.

Share this...

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest