Everyone understands the significance of page speed. It is a proven Google ranking element on desktop and mobile, has an impact on user experience, and may have a direct influence on your bottom line.
The distinction is like night and day. PageSpeed Insights gives you a near-perfect score, and every page loads quickly.
I’ll show you precisely how I achieved it in a few simple and straightforward stages in this article.
Step 1. Remove unused plugins
Unless you have a brand new WordPress website, chances are you’ve installed a slew of plugins you’ve never used. Some of them can have an influence on page performance, so as a starting point, deactivate and delete everything you don’t need.
Just be cautious when doing so. If you’re unsure whether anything is required, leave it alone.
Step 2. Switch DNS providers to Cloudflare
Websites are files stored on hard drives (servers) that are linked to the internet. And every internet-connected gadget has an IP address (e.g., 18.104.22.168).
Domain names are mapped to IP addresses using DNS, which stands for Domain Name System because IP addresses are difficult to remember. You may think of it like the web’s phonebook. When you enter a domain name into your browser, a DNS query is performed to determine the server’s IP address.
But here’s the thing: most consumers utilize their domain registrar’s free DNS providers, which are generally sluggish.
If this describes you, consider switching to a quicker DNS provider, such as Cloudflare.
Sign up for a free Cloudflare account to get started. Click the “Add a site” button, input your domain name, and then click the button.
Choose the free plan and then click “Confirm plan.”
Cloudflare will now prompt you to review your DNS settings before proceeding. It is normally safe to proceed if there are no cautions.
All that remains is to change your nameservers with your domain registrar. The manner you do this differs amongst registrars, so if you’re unsure, don’t be afraid to ask for help.
If you’re using Google Domains, follow these steps:
Step 3. Install a caching plugin
Caching is a procedure that temporarily saves files in order to more effectively provide them to visitors.
There are two major kinds:
Browser caching: Saves ‘common’ assets like logos on the user’s hard disc so they don’t have to download them again on subsequent visits.
Server caching: Saves a fully-constructed,’ static’ version of a page on the server so that it does not have to be rebuilt each time a new visitor requests it.
Caching is straightforward to activate with WP Rocket. Simply purchase, install, and activate it. By default, basic caching (server and browser) is enabled. If your site is responsive, go to the cache settings and allow caching for mobile devices as well.
Step 4. Minify your code
To minimize file sizes, minification eliminates whitespace and comments from code. Furthermore, smaller files result in faster loading times.
If you are not using WPRocket, install and activate Autoptimize and repeat the process.
Combining these files may improve performance, however, it is dependent on your server configuration.
There are two checkboxes in Autoptimize to “aggregate” files. Just keep in mind that they might occasionally ‘break’ things on your site, so double-check that everything still appears and operates the same after you allow them. Remember to delete the cache and check for changes in an incognito window first. If you don’t, the changes may not be reflected in what you see.
Step 6. Eliminate render-blocking resources
The process of converting code into a visible web page is known as rendering.
The essential term here is ‘visible,’ because a web page does not necessarily need to fully load before it can be viewed.
As a result, it makes sense to prioritize loading resources for content that appears above the fold.
If you previously encountered the “eliminate render-blocking resources” issue in PageSpeed Insights, this should resolve it.
Step 7. Lazy-load images and videos
By deferring the loading of pictures and videos until they are displayed on the screen, lazy-loading increases page performance. Image lazy-loading is enabled by default in WordPress 5.5+, but not for video.
If you’re using WPRocket, simply check the “Enable for iframes and videos” box in the LazyLoad options.
Lazy-loading improves page performance by postponing the loading of images and videos until they are displayed on the screen. Lazy-loading for images is enabled by default in WordPress 5.5+, but not for videos.
Simply tick the “Enable for iframes and videos” box in the LazyLoad settings if you’re using WPRocket.
If you’re not using WPRocket, the free Lazy Load for Videos plugin does much the same thing.
Step 8. Optimize Google Fonts
Many themes make use of Google Fonts, which must be downloaded from Google’s server each time someone visits your website. Because your server must perform HTTP queries, download a CSS file, and then download the font from the address specified in the stylesheet, this can be a time-consuming procedure. This must be done for each typeface on the page.
If you’re using WPRocket, Google Fonts queries are automatically optimized. Alternately, Swap Google Fonts Display is a nice place to start.
Step 9. Enable preloading
Preloading allows you to specify key resources so that browsers know which files to load first.
You can manually add preload properties by altering the code, but this may get complicated and complicated if you don’t know what you’re doing. It is MUCH more convenient to simply install a WPRocket, which performs this immediately out of the box.
Step 10. Use a CDN
Content delivery networks (CDNs) are networks of computers spread around the globe. Each of them keeps a duplicate of your website so that people may connect faster when requesting web pages.
Assume your web host’s server is in the United Kingdom. If a visitor from the United States visits your site and you do not use a CDN, the connection between their device and your server will be delayed. If a visitor from the United States visits your site and you utilize a CDN, their device will connect to the nearest server, allowing things to connect quicker.
There are several CNS providers available; all you have to do is select one, activate it in WPRocket, and input the CNAME.
Step 11. Optimize your images
Lazy loading helps many image-related problems, but it does little to aid pictures that load above the fold. The larger they are, the more they slow down loading times.
To address this, use a plugin like Shortpixel to compress your photos. Simply install it, activate it, navigate to the settings, add your API key, click “Save and Go to Bulk Process,” and then click “Restart Optimize.”
If you find that the quality is too low, go to the options and adjust the compression type to glossy or lossless.
Let’s have a look at how these changes affected our page speed as measured by a handful of prominent metrics.
Everything said here worked great for my site, and it has also worked successfully for other sites. It is vital to note, however, that each WordPress setup is unique. You may have more plugins, a slower theme, slower hosting, or more third-party tracking programs, all of which slow down your website.
If your page performance still needs to be improved after you’ve made these changes, it’s probable that you’ll need bespoke work done on your site. So it’s worth hiring a developer or page speed specialist to take a closer look at things.