Optimising your website’s speed

You are here:
Estimated reading time: 7 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.

The big guns

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

Is 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.

Use 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.

Disable 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.

Use 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.

When 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.

Make 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!

Use 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.


Smaller but important improvements

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

Add 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.

Avoid 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.

Make 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 .

Deselect 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.

Unload 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 .

Cleanup 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.

Disable 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.

Disable 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.

Enable Elementor’s Asset Loading

Elementor 3.x brought various improvements, amongst them being an “Optimized DOM Output” and “Improved Asset Loading” . Even they’re market as Beta, they seem to behave well enough to be enabled.

Ensure 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.

Load 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.

Disable 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 .

Don’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.

Should 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 . Just doing most of the suggestions mentioned in this page will increase the scoring a lot.

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: 1051

3 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.

    Thanks.

    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 ?

      Marius

      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.

Join the conversation