-
You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.
Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"
[GUIDE] How to Improve Page Loading Speed on WordPress
- Thread starter RogerM
- Start date
just use Perfmatters plugin...Single plugin with almost all these functions in it. Its a paid plugin though.
- Delay JavaScript execution – Flying Scripts
- Host Google Analytics locally – Flying Analytics
- Heartbeat control – Heartbeat Control / manual code
add_action( ‘init’, ‘stop_heartbeat’, 1 );
function stop_heartbeat() {
wp_deregister_script(‘heartbeat’);
}
- Lazy load images/videos – Optimole / WP YouTube Lyte
<img src=”example.png” loading=”lazy” alt=”example”>
If you don´t have a site that is image-heavy you can do this manually bit, if you have a lot of images this can be a very time-consuming task.
- Preload links/instant page – Flying Pages
- Prefetch/preload – Pre* Party Resource Hints / manual code
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
} add_action('wp_head', 'dns_prefetch', 0);
Just add the external resource FULL URL to this section of the code snippet....
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
Alternatively, you can use Pre* Party Resource Hints free plugin to add all these attributes to your site´s resources.
- Font-display:swap – Swap Google Fonts Display
This is a common issue, especially with Google fonts and, you can also address this manually by editing the stylesheet where the font is located and add to the font-display property the swap attribute like this...
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
If, on the other hand, your fonts are being hosted locally, you need to edit the stylesheet where the font is located and add the "swap" attribute like this...
@font-face {
font-family: "Open Sans Regular";
font-weight: 400;
font-style: normal;
src: url("fonts/OpenSans-Regular.woff2") format("woff2");
font-display: swap;
}
If I am going to use a paid plugin I prefer Swift Performance Pro.
Last edited:
Good guide. We use Oxygen all day every to build accessible sites. Have you tried Bricks? Seems to be the new themebuilder in town after OxygenI know each theme is built differently and we need to adjust to each situation properly but, that doesn´t mean we can lay out the top, most critical, and important factors that affect page loading speed and how to address them.
Also, since we´re on BABIATO and we can get pretty much any premium plugin or theme for free, I am going to assume the access to these premium/paid resources are covered.
HOSTINGI am going to risk sounding annoying and repetitive by saying this but, this is perhaps one of the most undervalued factors when trying to optimized a site´s page loading speed.
Getting your site hosted on a robust and fast server can make a whole lot of difference between having a fast loading site or a slow one.
Don´t get me wrong, there are pretty decent and affordable hosting plans out there that will offer you the chance to have a well all-around performance website but, you need to do your part as well by not abusing its resources and build the most light-weight and responsive website you can possibly can.
Ok...So, what hosting provider should I pick?
Well, it highly depends on your needs and budget but, these are my top choices...
As a side note, regardless of what hosting provider you end up choosing, I will advise you to stay away from any hosting company that is part of the Endurance International Group (EIG).
These companies are known for their bad performance, customer support, and reliability.
I am NOT saying this would be the case with YOU in particular, as I´ve heard good reviews from people hosting with them but, in the brutal majority of cases, this won´t be the case.
The main reason why you heard them a lot is that many marketers are actively promoting them due to their very lucrative affiliate programs.
Some of the hosting providers that are part of EIG are...
Endurance International Group - Wikipedia
en.wikipedia.org
CONTENT DELIVERY NETWORK (CDN)Setting up a Content Delivery Network (CDN) service nowadays is becoming mandatory. Unless your hosting provider´s servers are located in the same geo or region as your target audience. In this case, there´s no need for a CDN but, still, you can always try and test for yourself.
On this note, Cloudflare offers a free plan that is more than enough in most cases and, If not and you have a little budget for this, I highly recommend BunnyCDN or Amazon Cloudfront.
Amazon CloudFront is quickly gaining ground as one of the best CDN providers on the market. Nor just regarding overall performance but, also, regarding its cost.
On this front, it has a very similar pricing structure as BunnyCDN and that is "pay-as-you-go". So, you will only be billed for the data transferred you end up using instead of a monthly flat rate.
And, right now, they are offering the first 50 GB of data transferred FREE OF CHARGE!
From that point on, the prices look really affordable...
So, regardless of whether or not you have the budget for this, don´t take it as an excuse to NOT set up a CDN. As stated above, Cloudflare offers a free plan and it´s robust enough to further improve your site´s page loading speed.
If you have never used Cloudflare before, there are plenty of tutorials out there on the internet but, here´s one of my favorites...
THEMEUsing a lightweight and fast loading theme in order to get the best possible loading times kind of sounds obvious, right?
But, you´ll be surprised to know how many people out there choose to use overbloated and featured rich themes not considering the impact it will have on the site´s performance nor in the nightmare, this will become when trying to optimize it.
So, if you´re launching a simple blog, a local service website, or a landing page, there´s no reason to pick a multi-purpose theme.
Sure, they are great as an all-in-one solution but that usually comes with a price and its performance.
Having said that, my recommendation is to pick a lightweight and fast loading site and customize it however you want. Take the time to learn how to work on the design. There are literally hundreds, if not, thousands of tutorials on YouTube that will guide you step-by-step on how to build a beautiful, fully functional, and optimized website from scratch.
Trust me, in the long run, this is the best approach.
My top recommendations for the best lightweight and fast loading theme with all the customization capabilities and functionalities you´ll need to build pretty much any site you want are these...
PAGE BUILDERSAvoid page builders!!
I know they make the building and designing process a hell lot easier for non-web developers like ourselves but, their usage also comes with a very expensive price. And, if on top of everything else, you´re using a crappy hosting provider with an overbloated and slow loading theme, that price will be very expensive.
I highly recommend you take the time to learn how to properly use Oxygen Builder. I know this might sound contradictory but, trust me, it´s not.
Oxygen is NOT a page builder it´s a THEME builder!!!
This would be the closest you´ll ever be to build a custom theme from scratch without having to write thousands of lines of code.
However, it does require you to know some basic CSS but that's something you can learn in a few days. Lastly, if you don´t want to give Oxygen a try, you can always try Gutemberg. Nowadays, there is a pretty decent selection of Gutemberg addons that will allow you to build beautiful sites.
If, you insist on using a page builder, I highly recommend Elementor.
I recently posted a series of videos on how to make the best usage of Elementor in order to build fast-loading websites and avoid coding overbloat as much as possible.
Make sure to check it out...
PLUGINSAvoid overbloated or high CPU usage plugins!!!
People often get carried away by functionalities and features and don´t take the time to evaluate the impact certain plugins have on performance or whether or not they can replace that plugin with a much lighter alternative. Clear examples of this are Contact Form 7 and RevSlider. Take a look at this list of plugins you need to avoid.
Keep plugins to a minimum, unless you know what you´re doing.
More often than not, it really isn´t worth sacrificing performance to add functionality.
IMAGESMy personal process for image optimization is...
a) Compress
b) Convert them to Webp or SVG format
c) Resize them properly (take into account image mobile devices image containers)
d) Lazy load them (only the ones below the fold)
e) Make sure to add the width and height to the HTML (it will help with CLS)
f) Serve them from a CDN.
My go-to image optimization plugin is ShortPixel but, this doesn´t mean you MUST use this one. There are other options out there so, make sure to run tests and stay with the one you get the best results.
CSS AND JAVASCRIPTThis is another pretty common issue I see on WordPress sites. Especially those who are build through a pagebuilder or abused the usage of poorly coded and overbloated plugins.
Regarding CSS, we can generate the Critical Path CSS (CPCSS) and defer the rest for the footer.
Thankfully, we can use WP Rocket for this or, if you want a free alternative, you have Asset Cleanup and/or Autoptimize to unload these unnecessary resources from even loading in the first place. These two plugins work great together.
Another great option is Swift Performance Lite but, bear in mind, there are no free options out there that will generate the CPCSS for you. This is usually a premium feature.
There are free tools that can generate the CPCSS for you and you can input it on plugins like Autoptimize. Tools like...
Critical Path CSS Generator - by Jonas Ohlsson
Production ready Critical Path CSS Generator. Specify web page and CSS and let this tool generate your Critical Path CSS for you, in seconds.jonassebastianohlsson.com
EXTERNAL SCRIPTSWe tend to load a lot of external scripts to our site like Google Fonts, Font Awesome, Tracking codes, Chat widgets (Facebook for example), etc., and this is something that slows sites down a lot.
Nowadays, we can delay these scripts from executing until there´s user interaction. I highly recommend Flying Scripts for this. This is an amazing plugin available for free on your WP repository.
But, if you have the budget and/or already using WP Rocket, you already have access to this feature since version 3.7.
FONTS & ICONS
It´s unbelievable how many people load these resources from external sources where they can just host them locally and avoid those DNS lookups and improve their site´s performance.
MEDIAThe best thing we can do with these resources is to host them externally (YouTube, Vimeo, etc) and just embed them on our site. When doing this, I highly recommend enabling a placeholder for the video thumbnail and lazy load the image. This will greatly reduce the load impact of these resources.
And that´s pretty much what I do whenever I am working on optimizing my client's site page loading speed.
I think this is a short but very comprehensive list of the most common and critical issues any WordPress website face regarding slow performance.
Let me know if you have any more questions.
Cheers and stay safe!
Bricks is like a more user-friendly Oxygen. Still, it has a long way to go but Bricks is kind of like if Elementor and Oxygen had a son!
Closte is pay as you go. Even the DNS if used they charge for. If you are not good at optimizing websites, I do not recommend it Gijo of wpspeedmatters.com has a closte review
Last edited:
If Oxygen and Elementor had a son, it’ll be Breakdance builder.
Bricks in my humble opinion is already on par with Oxygen.
Faster backend, uses theme not a plugin meaning switching from gutenberg to bricks for content editing requires no plugin like Oxygen.
Better repeater system
Faster bug fixes and transparent roadmap
Oxygen is more mature with robust third party plugins but still uses angular which is legacy code.
Bricks lacks conditions for now but in about 6 months, Oxygen will have nothing on Bricks.
Hi, thank you for sharing!
Recently, I started working on SEO microniche sites with the Astra theme and Spectra. However, after making a few changes and updates, I noticed that the same page was starting to get really slow.
At this point, I decided to create a backup and work locally with Laragon. Unfortunately, I encountered the same issue. Whenever I created blocks on Gutenberg, duplicated them, or edited them, WordPress would become extremely slow - almost as if it were running on a system with low RAM or an old hard drive, which is not the case.
The only solution I've found when it starts to slow down is to update the page, close it, open a new tab, and then reopen the page. I've tried using both Chrome and Edge, but the problem persists.
Have any of you experienced this issue before?
PS: I created a subdomain for a project and gave my client access, but she also encountered the same issue when attempting to create a layout with Spectra wireframe blocks.
Recently, I started working on SEO microniche sites with the Astra theme and Spectra. However, after making a few changes and updates, I noticed that the same page was starting to get really slow.
At this point, I decided to create a backup and work locally with Laragon. Unfortunately, I encountered the same issue. Whenever I created blocks on Gutenberg, duplicated them, or edited them, WordPress would become extremely slow - almost as if it were running on a system with low RAM or an old hard drive, which is not the case.
The only solution I've found when it starts to slow down is to update the page, close it, open a new tab, and then reopen the page. I've tried using both Chrome and Edge, but the problem persists.
Have any of you experienced this issue before?
PS: I created a subdomain for a project and gave my client access, but she also encountered the same issue when attempting to create a layout with Spectra wireframe blocks.
Great suggestions. Even better than Oxygen is Bricks Builder Theme. I would put Bricks Builder on the top of the list.
Similar threads
