With Google placing a greater emphasis on page speed as a factor for ranking, it’s in everyone’s best interests for their website to load as fast as possible. Initially, the rankings boost was restricted only to mobile devices, but now even desktop rankings are included. If you’re using WordPress, here are five speed optimization tips you can use to improve your page load times.
Defining “Speed”: Largest Contentful Paint (LCP)
The first thing to do is to define what exactly we mean by speed optimization for WordPress. Google measures something called the “Largest Contentful Paint” or LCP. This is the time it takes for the largest element on your page to become visible from the time the browser requests the page. Our goal here is to decrease this number to 2.5 seconds on average.
One of the largest components of the LCP is the “Time to First Byte” or TTFB. This is the time it takes for your server to send a response to the browser. This depends on the speed of your server and will be an important part of reducing your LCP times. The goal for TTFB is to get it below 500 ms or 0.5 seconds.
With these numbers in mind, here’s what you can do to reduce your LCP and TTFB times.
Bluehost WordPress Hosting Optimizes TTFB Times
Having a good web host is crucial to getting a low service response time. The Bluehost managed WordPress hosting is ideal for this, as it has advanced features such as server-caching, auto-scaling, and a worldwide CDN. The regular Bluehost WordPress plan is cheaper but doesn’t come with all these cool features. Here’s a complete comparison on WP-Tweaks.com between the various Bluehost for WordPress plans.
Bottom line: If you’re serious about reducing your page time speeds, there’s no substitute for managed WordPress packages, backed by the power and reliability of Bluehost.
Apart from having a great hosting provider, here are the things you can do to bring your page speed loading time down to the necessary target.
Proof that these Techniques Work
Just to show you that the following techniques work, here’s a screenshot of the core web vitals from my own website:
As you can see, the Core Web Vitals on my site are green for both mobile and desktop. My LCP times are less than 1.5 seconds. Here’s another screenshot from the Cloudflare analytics dashboard:
As you can see, over 80% of all the visits to my site are scoring “green” on all three core web vitals. If you follow my advice, you too can have fast page load speeds like mine.
Here are the 5 speed optimization tips for WordPress I want to share with you:
-
Implement Caching of Dynamic Content
The most important step you can take is to ensure that your server isn’t generating every page from scratch. A good caching system will ensure that once a page is generated, the HTML is saved on the server and sent to subsequent visitors. This not only improves your TTFB times but also allows your server to scale efficiently to thousands of requests.
There are two types of caching: server-side caching and plugin caching for WordPress. Server-side caching depends on your web host and is faster than plugin caching. The Bluehost managed WordPress plans have server-side caching built in by default. However, if you’re using regular WordPress hosting, or even shared hosting, then here are two plugins you can use to implement caching. It’s not as fast as server-based caching, but it’s a lot better than nothing.
If you don’t want to deal with complicated settings, another option is to use the “Simple Cache” plugin that doesn’t have any options and just works out of the box.
-
Use the Cloudflare DNS Servers
DNS lookup is an unavoidable part of any browser request that’s made for the first time. While your web host comes with its own DNS server, you should use the Cloudflare DNS service instead. For years, it’s consistently been rated as one of the fastest DNS servers in existence. And best of all, it’s free! Here’s the documentation on how to set up a domain on Cloudflare.
Bluehost already provides Cloudflare integration from cPanel, but to use Cloudflare’s DNS servers, you need full domain integration.
-
Defer JavaScript and CSS
While the first two steps on this list relate to how fast your server responds to a request, this step relates to how the browser renders your content. JavaScript and CSS are two aspects of a web page that can slow things down. By default, the browser waits for all the JavaScript files to be downloaded before it starts to render the HTML content.
You can obtain unbelievable improvements in your LCP times if you instruct the browser to defer JavaScript loading until the webpage has finished rendering completely. The same is true for CSS. While you might need a bare minimum amount of CSS to render the “above-the-fold” content, the rest of the CSS can be downloaded at leisure.
The best plugin to achieve this is hands down, Autoptimize. Nothing else comes close. The sheer power of this plugin is obvious once you enable the JavaScript and CSS sections as shown here:
Another great plugin by the same author is called Async JavaScript and you can use it to defer specific JavaScript files – most famously jQuery, which is a huge source of page load delays. Taken together, these two plugins will shave off the largest bulk of your page speed times.
-
Shrink your Images – Particularly Those Close to Headlines
Often, the largest element your visitors see on a page load will be an image. And if your images are large, they can take a lot of time to download – especially in areas where Internet connectivity isn’t as strong. In fact, a single large image can destroy your LCP times, regardless of how fast the rest of your page is. So, you need to make sure that you shrink all your images as much as possible.
The tool I like to use most is https://squoosh.app/. It’s approved for use by Google, and I’ve been personally using it for years. Try and convert all your images to the WebP image format using this tool, as it gives you the maximum size savings.
Some tools compress images automatically when you upload them, but I prefer to do it manually since I can also control the size and precise level of compression.
-
Change Inline JavaScript type to “Module”
This is a cool tweak I found that helps when you have inline JavaScript that can’t be deferred using traditional methods. The solution is to change the following line:
<script type=”text/javascript”>
Into this:
<script type=”module”>
When you make this change, the inline JavaScript starts to behave as if there were a “deferred” tag attached to it. This means that it will execute only after the entire page has loaded. Thus, it won’t slow down your page and will help you achieve those elusive benchmarks.
Final Thoughts: Every Website is Different
You will inevitably find that your website has some peculiarity that requires a custom solution to get fast page load speeds. However, the methods above work for everyone, and they’ll work for your WordPress website too.
Hope this helps!