Worcester web dev team

We hope you enjoy this post.​

If you want to learn more about us and our services, click here.

How we speed up our clients WordPress websites (Ultimate Guide)

Laptop loading a video and a gauge showing stress from loading

In light of our last blog, which discussed the critical areas related to website load time, we thought it would be helpful to create an in-depth tutorial on how we set up all of our and our client’s WordPress sites for lightning-fast load times. 

Table of Contents

Cloudways Hosting Website Homepage

Hosting: Cloudways

Having a fast working web host can dramatically change your website load times. Furthermore, a poor web host can often have your website inaccessible with bad uptimes or too much server load.

We had this issue when we used to host our website with Godaddy; we would constantly find our website was down or took forever to load. Moving to Cloudways, our load time dropped by over 1 second, and we have never had an issue with our website going down since.

Wp Rocket Website Homepage

Caching: WP Rocket

WP Rocket is rated as one of the top WordPress caching plugins. Packed with tones of features and coming in at such a small cost per year, it’s a no brainer for anyone who wants a lightning-fast website without all the headache. Ultimately there are free tools that can do most of the heavy work WP Rocket can do; however, more plugins mean more problems, and so we believe keeping to just one plugin that is super easy to use is a must.

Caching

wp rocket caching settings

What is caching – Caching for a website is when a device saves copies of select files to its local drive to improve load times when the user next visits the website. 

Mobile Caching – Leave this disabled unless your website uses a plugin for creating a separate mobile website.

User Caching – Leave this disabled unless you have multiple users on your website with user-specific content. 

Caching Lifespan – This is dependant on how often you plan on publishing and updating your website. If you don’t regularly update, choosing a high-value means caching refreshes less frequently, saving server resources. However, suppose you are intending on updating your site regularly. In that case, you may want to choose a lower value resulting in more regular caching updates but also using more of your server’s resources. 

File Optimisation

wp rocket file optimisation settings

Minify CSS/JS Files – Minification removes whitespace from the code. You want this enables to reduce files size. 

Combine CSS/JS Files – Websites with CSS and js file sizes of 10kb or more should keep this disabled. However, sites with less than 10kb can have this enabled. To find out if you can enable this run your site through GT Metrix and check out your file sizes on the waterfall chart. 

Exclude CSS/JS Files – if any minification breaks your website, you can paste the problematic file here to fix the issue. Check out WP Rockets tutorial on locating and resolving minification issues.

Optimisation CSS/JS Files – This helps with the way CSS loads on the page. However, on some occasions, it can cause cumulative layout shifts (CLS). This isn’t something we want. To prevent CLS, we can set fallback critical CSS. You can get this by going to:  https://www.sitelocity.com/critical-path-css-generator, pasting your website URL, and then copying and pasting the generated CSS into the fallback field WP Rocket. If it is still causing issues, disable this feature. 

Remove Unused CSS – Quite often, page builders and plugins on your site add unnecessary CSS and JS to your pages. This plugin removes some of the unused CSS cutting down load time.

Load JavaScript Deferred – Loading JS after the page has finished parsing should eliminate most render-blocking resources. 

Delay JavaScript Execution – Delay loading JavaScript until user interaction (i.e. scrolling or touching the screen on mobile) can help tremendously when it comes to plugins or tools found further down your website page. 

Media

wp rocket media settings

Lazy Load – Delays the loading of images, Iframes and videos until they become visible. Always lazy load videos and Iframes and replace them with a preview image to reduce load. 

Add Missing Image Dimensions – Enable this to allow WP Rocket to add width and height attributes to images with missing values. Thus, ensuring images are served correctly. 

Disable WordPress Embeds – This stops other websites from embedding your site’s content on their site, causing a loss in bandwidth and extra strain on the server. You want this enabled. 

WebP Caching – Unless you use a plugin that provides images in WebP format, this does not apply to you. Furthermore, almost all WebP plugins provide caching too.

Preload

wp rocket preload settings

What is preloading – Preloading simply tells the browser to start collecting resources as or before the page has loaded that will be needed soon. 

Preload Caching – You want to enable preloading, including for your website sitemap. If you have a plugin like Rank Math or Yoast, allow the additional option to use their generated sitemap. If not, provide your sitemap in the given field. 

Preload Links – Enable this. Preloading links starts the fetching of resources on-page links you hover over or touch. 

Prefetch DNS Requests – You can prefetch data from external tools to start the loading faster. To find these third-party resources on your Page Speed Insights report, scroll down to Minimise Third-Party Usage, grab all of the URLs within this list and paste them in the field provided on WP Rocket. 

Preload Fonts – To find your font files used on your site, check your waterfall report on GTmetrix and paste them in the WP Rocket fonts field.

Advanced Rules

wp rocket advanced rules settings

Never Cache URLs – Put in the URLs of your checkout pages, customer dashboards or other pages that shouldn’t be cached for visitors. 

Never Cache Cookies – Some user-specific content is served through cookies. Therefore you don’t want those pages and their content cached by blocking these cookie ids. 

Never Cache User Agents – This stops cached versions of pages from being served on specific browsers or devices. 

Always Purge URLs – When new content is added to your website WP Rocket purges the caching on the homepage, categories and tags. So if, for instance, you host your blog posts on a specific page, you may also want this page caching purged when new content is released. If so, you can add this page here. 

Query Strings – Query strings is a URL that contains a question mark followed by a parameter and value:  example.com/page/?country=england

In this case, the country is the parameter, and England is the value. WP Rocket doesn’t typically cache these pages; however, if you add the parameters to this field, it will. 

Database

qp rocket database settings

This is a scheduled database clean up, where WP Rocket will delete all excess content, including old drafts and revisions, spam comments, and more. So you shouldn’t need to worry about any of this information being dumped unless you wish to hold deleted posts or drafts of pages.

Schedule your database to clean up once every one to two weeks.

CDN

wp rocket CDN settings

CDN or content delivery network provides a network of servers worldwide so users who are further away from your original server can receive cached versions, ultimately cutting download times.
We use Cloudflare for our CDN, so we will cover how to set this up later on.

Heartbeat

wp rocket heartbeat api settings

heartbeat tells backend users when others are editing posts, pages and provides real-time notifications on plugins. You want to disable this to reduce server load or reduce how often it updates if you wish to receive updates on this information.

Add-Ons

wp rocket add-ons settings

Varnish – Many hosting provides now offer varnish. However, we recommend having it turned off as it tends to end up loading down a site more than speeding it up. 

Cloudflare – Enable as we will be using Cloudflare as our CDN. 

Sucuri – This is a WordPress security plugin. If you have this plugin on your site, then enable this and WP Rocket will clear its caching when the rest of the site caching purges, keeping all of the content in sync.

OptiMole website Homepage

Image storage and compression: OptiMole

Optimising your images will improve your site’s speed dramatically since images make up 50% of the weight of a typical web page.

With OptiMole, you can both lossy and loosely compress images. Every image in your Media Library and every image you upload will be automatically optimised by OptiMole. It runs silently in the background, so you can continue to blog and customise your website. We use this plugin and think it’s awesome.

General Settings

OptiMole general settings

Enable Image Replacement – All image URLs will be replaced by those that lead to OptiMole’s servers. The advantage of this is that the images will load more quickly, so we recommend leaving this setting turned on.

Scale Images & Lazy Load – Optimole can serve scaled down images so that a smaller version is displayed on mobile devices. This setting should be kept on, as lazy-loading reduces the initial page payload and loading time.

Advanced Settings: Compression

optimole compression settings

Network Based Optimisations – Suppose your website is accessed by many mobile devices or from areas with poor network connections; Optimole will automatically decrease image quality to improve load times. You want to enable this. 

Serve CSS/JS Through Optimole – Some sites have images embedded in their CSS and Js files. Opimole can serve these CSS/JS files that contain images through its CDN, which can decrease the load time. However, we recommend keeping this turned off to avoid conflicts with other plugins. 

GIF To Video Conversions – If your website includes large or long GIFs, you may want to auto-convert them into videos. Since GIFs cannot be optimised very well, videos will load much faster. We don’t have any GIFs on our site, but we recommend having this feature enabled if yours does.

Image Quality – OptiMole lets you adjust the degree of optimisation applied by the image quality slider. Most websites should be set to Medium quality. Your site will load quicker, and you will barely notice a difference in your images. This setting should only be left on high if you’re a professional photographer who is concerned with image quality.

Advanced Settings: Resize

optimole resize settings

Smart Cropping – Though smart cropping is interesting, I’m not comfortable relying on an algorithm to crop my photos. Therefore, my opinion is that leaving this off is best since it should be decided by the designer.

Retina Images – You can enable retina images if you want to see high-definition images on 4K screens. For most websites, you can keep this off.

Resize Large Images Original Source – This is a good safety net to avoid massive images on your server. However, you should always resize your images before uploading them.

Advanced Settings: Lazyload

optimole lazy load settings

OptiMole lets you control how lazy loading images are handled through the Lazyload menu.

Generic Lazyload Placeholder – Placeholder images can be enabled to appear before they’re fully loaded, but we leave this off. Instead of displaying blank space, OptiMole displays a blurred version of the image before it loads, which looks more convincing and is only slightly slower than loading a blank image.

Scale Images – Optimole delivers scaled images depending on the visitor’s screen size and device and then displays them using lazy loading. I recommend turning this feature on.

Lazy Loading For Background Images – My recommendation is to let Optimole load background images lazy on your site, unless it causes a bad user experience.

Advanced Settings: Exculsions

Optimole exclusion settings

OptiMole’s Exclusions menu can be used to prevent specific images on your site from being optimised or lazy-loaded. We personally prefer all our images to be optimised, however, you may wish to not lazy load images that are above-the-fold to avoid delays. 

CDN, Cloudflare:

  • First, sign up for Cloudflare, just search cloudflare.com or click the title above and then click “sign up”; after signing up you will come to a page where they give you your two nameservers.
cloudflare nameserver settings
  • Then, log in to your domain registrar (in our case Godaddy) and under DNS settings, change the two nameservers to the two you were given by Cloudflare.

Adding your Cloudflare information to WP Rocket

  • To do this, you’ll need the Global API key, the zone ID and your account email (the same email you used to sign up for Cloudflare). To find the zone ID, scroll down on the overview page, on the right you should see the heading “API” and under, you’ll see “zone ID”. 
cloudflare overview page
  • Then to find your Global API key, click on “Get your API token”, located underneath “account ID”.
cloudflare Get your API token page
  • Once you have this information, log on to the WordPress backend of your website
  • Click the “WordPress” plugin on the top navbar
  • Click “Add ons”, then activate Cloudflare
  • Once on this page, enter in your Global API key, Zone ID and account email 
  • Finally check, “Optimal settings”. This will activate WP Rocket’s optimal Cloudflare settings. Such as minifying, aggressive caching, and deactivating Rocket loader for better compatibility. It also turns on email decoding which may hurt your Lighthouse report since it loads an extra request.
  • Once this is done, click “save changes” and then click “clear all Cloudflare cache files”
Wp Rocket Cloudflare Optimal Settings

Configuring your three free Cloudflare Page Rules

  • Back on Cloudflare, click “Page rules” under the “Active Subscriptions” section on the right-hand side of the overview page.
  • Click “create page plan”
  • Make sure to click “Save and Deploy” after each Page Rule is completed
Page Rule 1:
http://*yourwebsite.co.uk/*
cloudflare enforce https page rule
Page Rule 2:
yourwebsite.co.uk/wp-admin*
cloudflare wp admin page rules
Page Rule 3:
yourwebsite.co.uk/wp-content/uploads*
cloudflare uploads cache settings
Here are a few extra settings we recommend you configure on Cloudflare to help maximise your site speed for optimum results.
  • Enable Brotli (in the Speed Settings)
  • Enable and test Railgun (in the Speed Settings)
  • Test Rocket Loader (in the Speed Settings), this can be beneficial for speed but can potentially cause problems within sites, if so just turn it off and leave it.
  • Enable hotlink protection (in the Scrape Shield Settings)
Once all this is completed you have now successfully integrated a CDN with your WordPress site and configured some basic but important settings that will help your website run smooth and fast.

We hope this helped!

If you have any questions regarding site speed or anything mentioned in this blog, feel free to reach out and one of our team will be sure to help you or your business with any of your Web Design or SEO queries. You can reach us on any of our socials below or email us at [email protected]

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Related Posts

Want to optimise Your Google Maps Listing?

Download and follow our free GMB checklist to get your listing to the top of the map pack! 

About Worcester Web Dev

Built by a small team of design crazy marketing enthusiasts with a goal to help local businesses build and grow their online presence. Worcester Web Dev prides itself on being at the forefront of high-converting innovative web design.

Want to optimise Your Google Maps Listing?

Download and follow our free GMB checklist to get your listing to the top of the map pack!