How to Improve a WordPress Website Page Loading Speed?
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…
- Change hosting provider to someone that is NOT part of the EIG Corporation. I highly recommend Cloudways
- Set up a Content Delivery Network (CDN) – 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. Cloudflare offers a free plan that is more than enough in most cases. If not and you have a little budget for this, I highly recommend BunnyCDN.
- Use a lightweight and fast loading theme – My first choice would be GeneratePress
- Avoid page builders – 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. It does, however, 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 are a pretty decent selection of Gutemberg addons that will allow you to build beautiful sites.
- Avoid overbloated 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.
- Optimize Images – My personal process for image optimization is: a) Compress, b) Convert them to Webp format (next-gen 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), and f) Serve them from a CDN. My go to image optimization plugin is ShortPixel.
- Optimize 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 slow 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 a free plugin. But, if you have the budget and/or already using WP Rocket, you already have access to this feature since version 3.7.
- Fonts and 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 Optimization – 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.
How Does the WordPress Platform Process Images?
There are two ways to insert an image into a post or page. The first one is using the Media Uploader, and the second one is using a featured image. You can allow featured images by inserting the code into your theme’s functions.php file.
When you upload an image on the media library, WordPress will create additional three images with three different sizes and store them separately. After that, you can see the four options for an image whenever you upload them on your website. The four different options are thumbnail, medium, large as well as full-size options. In addition to this, the first three image options are the default WordPress image sizes, whilst the fourth one is the original image size that you upload to the media library.
“Luckily, the way WordPress regulates images makes things a lot more comfortable.”
Generally, WordPress generates these different options because sometimes, it requires different image sizes in different locations. For instance, the image resolution used in the slider may be different as compared to the image resolution in a blog post. WordPress does this automatically, so you do not have to keep resizing images manually and to make sure the most suitable image size is selected for distinct locations on your website.
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.