Optimising your website’s speed

You are here:
Estimated reading time: 8 min

Because context matter most, there’s no clear definition or specific set of instructions that just makes it blazing fast. In most cases bigger and smaller changes, such as the ones below, will help you achieve a better performance for your site.

LinkThe big guns

These below are suggestions that will make the biggest impact on your website’s speed.

LinkIs your hosting good enough?

This is a controversial topic and that’s why i don’t want to share too much of my opinions, and instead i suggest to research on your own if your hosting is the best solution for your website. What i can say for sure is that if it’s really cheap, then cheap you get. There’s a reason why some hostings cost $3 and others $99 and more. I’m not saying get the most expensive, i’m just saying don’t get the cheapest.

I’m personally a fan of SiteGround , NexcessKinsta and CloudWays (no affiliation) and they have affordable solutions as well as variety of services. I highly suggest dropping a visit.

Also, LiteSpeed based hosting is also recommended. I can’t share any specific platform because i don’t know, however i’ll be sure to add here as soon as i’m aware of any.

A great video about Hosting by Darrel Wilson can be found here https://www.youtube.com/watch?v=AaohKvUpXxc .

LinkUse a CDN

CDNs can help your users load your website faster by serving your static resources in nodes all around the world. More in this article https://gtmetrix.com/why-use-a-cdn.html .

My personal favorite CDN is BunnyCDN (no affiliation), has very affordable prices and its own WordPress plugin , but most caching plugins have a way of inserting the CDN url. Be sure to research.

LinkDisable unused plugins

It’s probably the most common and obvious suggestion there is. It’s simple, the more plugins you use, the more code runs, the slower the WordPress instance should become. Make sure to enable plugins that are actually in use, are high quality and positively rated.

LinkUse a caching plugin

There are lots of caching plugins out there. I won’t write about any of them and encourage instead to research on your own.

As a free solution, my personal favorite is WP Super Cache in combination with Autoptimize but there are plenty others too. Autoptimize plugin is a companion plugin to handle assets minification and concatenation (as well as other features too). This reduces CSS and JS filesizes and also the number of requests made. Another feature of it is lazy loading images and i suggest using it as well. Here’s a video tutorial i suggest if you’re not sure how to handle this plugins.

A premium solution i suggest is WP Rocket. Has pretty much all features included and it’s running on Rey’s demos. Has an easy interface and Rey plays well with it. Here’s a quick recording of a walkthrough WPRocket’s settings https://d.pr/v/Tz4oPo .

These are personal preferences, but there are lots of comparison articles out there and i’m sure there are plenty other great performance improvement plugins, but i just haven’t had the chance to test them.

LinkWhen using a caching plugin, make sure to enable Combine & Minify assets

In 2.0 Rey’s update, all CSS and JS has been split in smaller pieces that are only called on demand. Technically speaking, there’s less code loaded for each page.

Rey will also combine these assets into a single file, however this only works when there’s no caching plugin installed (because weird stuff would happen and it’s a precaution that was needed in order for everything to be working fine).

So if there’s a caching plugin enabled, Rey’s assets will stop being combined and instead will load separately – resulting in multiple file requests. That’s because it passes the minification & concatenation job to the caching plugin. Therefore make sure to keep them enabled.

Please remember, the code must be read by machines, so unless you’re in development mode, there’s no reason not to minify your code.

LinkMake sure to optimize images, or keep decent sizing

This one is very, very important. Make sure to optimize your images for web, and ideally served in a modern web format – webp.

If you don’t want to manually optimize images, there’s a few plugins out there that will automatically resize and optimize images. Here’s some: ShortPixelImagify , OptimoleSmush.

An unoptimized image can weight as much as the page’s entire CSS or JS scripts combined. Be sure to optimize them!

LinkUse Redis or Memcached

By definition, Redis and Memcached are both in-memory data storage systems. Memcached is a high-performance distributed memory cache service, and Redis is an open-source key-value store.

It’s probably best to ask your hosting support team if any of them is supported on your server.

LinkSmaller but important improvements

Even though they’re smaller tweaks, these improvements can make a difference.

LinkAdd Logo’s width and height dimensions

Make sure to add a fixed PX (not percent) width and height for the Logo image eg: https://d.pr/i/IahhRQ . This will make sure to avoid layout shifts, especially if the logo is lazy loaded.

LinkAvoid using Font Awesome icons

Stop using Font awesome and instead use SVG icons. That’s because even though you might use a single icon from a library, the entire library will load.

FontAwesome’s icons can be found in svg format and also there’s www.iconfinder.com where there are tens of thousands of free icons.

LinkMake use of Rey’s Font preloader

Try making use of the Rey’s font preloader to avoid loading duplicates. In Elementor, either in the Global Fonts settings or throughout pages, make sure to pick the preloaded fonts from the preloaded items eg: https://d.pr/i/7yc56T , not from the general list. Doing this will result in avoiding an extra requests .

LinkDeselect Elementor’s global fonts if you’re not using them

By default Elementor selects Roboto as default global font. If you’re not using it, it’s best to deselect it in Elementor mode > Page Settings (bottom left gear icon) > Site Settings > Global Fonts eg: https://d.pr/i/6N9Hz4 . It’s an important request that can be reduced.

LinkUnload Gutenberg blocks styles

If you’re not using blocks at all, try disabling some unnecessary stylesheets that are loaded eg: https://d.pr/i/KloTXH , in Customizer > General > Performance .

LinkCleanup CSS/JS Assets

Most plugins that have a frontend output will likely load some styling or scripting. If you know for sure that a plugin’s assets shouldn’t load some assets in a specific page, then it’s best to use a tool such as Asset CleanUp to unload those assets for that page.

LinkDisable embeds

When WordPress 4.4 was released, oEmbed was merged into the core. You have probably seen or used this before. This allows users to embed YouTube videos, tweets and many other resources on their sites simply by pasting a URL, which WordPress automatically converts into an embed and provides a live preview in the visual editor.

If you don’t plan on using it, make sure to remove it. Here’s an interesting article showing how to disable them.

If you do have a caching plugin installed though, it’s likely it could have this option built-in.

LinkDisable emojis

Emojis are little icons used to express ideas or emotions. If they’re not really necessary for your WordPress site, than it’s recommended to be disabled, because some scripting is loaded. Here’s an interesting article showing how to disable them.

If you do have a caching plugin installed though, it’s likely it could have this option built-in.

Note: Rey 2.4.0+ has this built-in and enabled by default.

LinkAvoid using Inner Sections or unnecessary Columns

Columns & Inner Sections add a lot of extra markup so where you can, try to avoid using them and instead rely on each element’s Inline positioning. Follow this video https://www.youtube.com/watch?v=vBAKGupM0co to see how you can optimise the layout using best practices.

Also, Rey adds an option on Section elements to transform columns into rows eg: https://d.pr/i/N0D7Gg .

LinkEnable Elementor’s Asset Loading

Elementor 3.x brought various improvements, amongst them being an “Optimized DOM Output” and “Improved Asset Loading” eg: https://d.pr/i/02phyo . Even they’re market as Beta, they seem to behave well enough to be enabled.

LinkAvoid loading missing or failed resources

When such resources (images, styles, scripts, 3rd party resources etc.) are missing or failed, the browser is trying to solve them, but in many situations it timeouts late. Here’s an example https://d.pr/i/9PYJGX of a missing image that takes 17s to be finally solved as 404 by the browser.

To check the Network activity in Chrome Developer Tools, and verify your site’s slowest points, here’s a step by step guide https://developer.chrome.com/docs/devtools/network/#open .

LinkEnsure you’re not having server/frontend errors

In some cases, there might actually be some PHP errors that are behind the slowness. Here’s a quick and easy video tutorial to help out in debugging WordPress .

Since we’re onto errors, there might actually be JavaScript errors too. So you could try to right click in the page, click on Inspect and after Chrome dev. tools opened, click on the Console tab. Make sure there aren’t any errors.

You can also install Query Monitor and get reports for the number of queries, duration and overall DB performance. I highly advice to try it.

You might want to check this article to debug TTFB issues.

LinkLoad Column background images as img tags

If you’re going to attach background images to Column elements, it could be a good choice to load them as image tag, instead of just background image eg: https://d.pr/i/fHg5Mu . This will make the images to lazy load and not being downloaded when the site loads. Please note though that it’s not needed when the column is in the “above the fold” area of the site.

LinkDisable Animations, if unused

If you’re not planning on using Rey’s animations (Reveal etc.) it’s probably best to access Theme settings in the backend and disable the option that loads the module eg: https://d.pr/i/7gFhLE .

LinkDon’t over-use Product grids

Unless you’re running an efficient database caching system (Redis/Memcached) having lots of product items in a single page could result in large DB queries.

LinkDisable unused elements & modules

Rey has over 60 internal modules and 50 Elementor widgets. Many of them are not in use in the site, so why not disable them completely?

Simply access Rey > Modules Manager & Rey > Elements manager and click on the top right “Scan unused” button eg: https://d.pr/i/nm4cVG . After scanning, click on the Disable button.

Please note that Rey’s modules are efficiently built and they don’t run, however they’re still loaded and some bits of code still run (which determines if the particular feature/module is enabled).

If in the future you;ll seek a specific feature, try checking in Rey’s modules if that functionality is already included. I’ve seen many cases where functionalities that already exist in Rey are added through other plugins.

LinkUse Product grid’s lazy loading

You can offload product grids by enabling the lazy load option inside eg: https://d.pr/i/bQ8njh . This will make the element to load only when the user has scrolled to its position in the page.

LinkWPRocket users: Mobile Improvements

There’s an option in Customizer > General > Performance, called “Mobile improvements”. This option is exclusive to WPRocket because it has the ability to cache the site separately on mobile.

Wrote an article here what it’s about and how to use it.

LinkPreload assets

Inside Customizer > General > Performance you will find a control to create entries for one or more assets to be preloaded eg: https://d.pr/i/ZrQma2 .

By definition: The preload value of the element’s rel attribute lets you declare fetch requests in the HTML’s , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance. More about preloading at Mozilla docs – Preloading content.

Basically each entry added hints the browser to preload it. It’s only useful for assets rendered above the fold (top area) to load them faster in the pages load cycle.

Make sure not to add more than 1-2 items or be careful or otherwise it would make more harm then good.

LinkShould i stress too much about PageSpeed Insights?

Yes and no. I’ll explain.

PageSpeed Insights is a great tool for getting all sorts of reports about the speed, site performance and accessibility, the important metrics being Core Web Vitals (LCP, FID, CLS).

Recently Google announced that Core Web Vitals will count as a measurement when determining the ranking of a site.

What was failed to be properly communicated is that the Core Vitals will only be a single signal from hundreds of signals that determine the ranking factors of your site in Google’s search results.

So basically everything about these Google updates is to highlight the best experiences and ensure that users can find the information they’re looking for.

Content is and will always be king, but a fast website will tremendously improve the site’s user experience. This is what it’s all about, because after all Google is a search engine and needs to serve the most relevant result, not the fastest one.

Here’s a video from Google’s Webmaster SEO channel https://www.youtube.com/watch?v=XUOD6pcvnso , where they explain what this tool actually does. Basically it’s all about the user’s experience (as they mentioned in the video, you can just put a single text in your site and you maybe get a 90+ scoring).

So should you stress too much? In my opinion not that much. Even billion dollar companies like Apple, Walmart, Asos or Target, barely get a +30 grade. Ironic knowing there are teams of hundreds behind them.

So again, trying to get a 100 score is a waste of time, unless you actually have that time and resources, and most importantly complete control over the code. But if you don’t, score as much as possible and also focus on great content, getting your brand known and offering the best overall great site experience.

As for Rey, i will continuously release new updates with performance improvements. The 2.0 update was quite big and the main feature was loading the assets (css/js) on demand only which greatly improved the page weight. This is and will be one of the most important priority.

Was this article helpful?
Dislike 0
Views: 5165

6 Replies to “Optimising your website’s speed”

  1. Jens

    Hi there, when reading your section on database queries and the Query Monitor plugin, could you recommend specific sections/media/content which should be omitted when using the demos (Milano)?

    When looking at the Query Monitor I see lots of queries … “many small streams make a great river”. So I would hope you have the overview what would gain most speed.


    1. mariushoria[ Post Author ]

      Hi Jens,

      It’s a tough question because pretty much everything that’s rendered into the page has a query behind it. Most consumers are term queries (menu items, categories, tags, attributes etc). For example a slow query process is when trying to render variations into the product catalog page (for example colors of the product items, under the thumbnails). I did cached them into transients, but it still requires a first render to establish the cache.

      Unfortunately i don’t know for sure what to recommend as it depends entirely on the context of what’s inside the page, but i wouldn’t stress too much on general queries but only on long ones. Usually caching the site with a plugin such as WP Super Cache or WP Rocket, dramatically speeds the frontend (mainly logged out).

      Can you make me a screenshot with the Overview eg: https://d.pr/i/IQcjjX ?


      1. Jens

        Appreciate your response Marius. Starting with a clean install and demo I was just curious if the demo was compromising speed with design and I should avoid anything particular.

        I havn’t finished my setup so I may return if the finished result is too slow including cache.

        Have a very nice day.

  2. Todor Chakarov

    Just stopping here to say thanks for all the hints and directions given in this article. It is rare to see insight from the theme’s creator about what is the best (in his opinion) combination of tools and optimization the user is suggested to put in place. Once more I am truly impressed by the volume and the quality of the provided documentation, I only regret I have not found your theme earlier.
    Keep you the good work!
    Best regards,

  3. faizan

    My website is not working properly (photos are not showing) in only IPHONE device but it is working fine in other devices like desktop and android etc. Please tell me what is the problem?

    photos are not showing

  4. Lê Thanh

    Thank you, one of the best woocommerce theme I have used both in terms of loading speed and built-in functionality to develop a commerce website

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!