I 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.
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.
HOSTING
I 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...
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...
DISCLAIMER: THESE ARE NOT AFFILIATE LINKS
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...
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...
- Bluehost
- DomainHost
- eHost
- FatCow
- HostGator
- iPage
- PureHost
- SEO Hosting
Here´s a very complete list for you to browse...
en.wikipedia.org
Endurance International Group - Wikipedia
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...
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...
THEME
Using 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...
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...
- GeneratePress - Now more than ever I believe this is the best WP theme on the market
- Astra
- Neve
- Blocksy
- Kadence
- OceanWP
PAGE BUILDERS
Avoid 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.
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...
PLUGINS
Avoid 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.
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.
IMAGES
My 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.
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 JAVASCRIPT
This 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...
jonassebastianohlsson.com
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 SCRIPTS
We 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.
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.
MEDIA
The 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!
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!
Last edited:
