How to Speed Up Your WordPress Website in 20 Minutes

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.

After optimization.

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., 123.123.12.1).

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’re using WPRocket, click the boxes in the options to minify CSS and JavaScript.

If you are not using WPRocket, install and activate Autoptimize and repeat the process.

Just remember to always test how this impacts your website before going live. When it comes to Javascript, minifying can frequently result in faulty code.

Step 5. Combine CSS and JavaScript files

The majority of WordPress websites include a number of CSS and JavaScript files. Others are for themes, some for plugins, and you may have some bespoke ones as well.

Combining these files may improve performance, however, it is dependent on your server configuration.

CSS and JavaScript files are loaded sequentially using HTTP/1.1. That is, one file must complete load before the next may begin to load.

Files load simultaneously using HTTP/2. This implies that numerous CSS and JavaScript files can begin loading simultaneously.

If HTTP/2 isn’t supported, you might consider merging CSS and JavaScript files.

To do this with WPRocket, click the “Combine JavaScript files” and “Combine CSS files” items in the options.

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.

You may do this by delaying the loading of non-critical CSS and JavaScript files required for content below the fold until later. Check the boxes for “Load JavaScript deferred” and “Optimize CSS delivery” in WPRocket to do this.

You’ll need two plugins if you’re not using WPRocket: Autoptimize and Async JavaScript.

Check the “Inline and Defer CSS” box in the Autoptimize options. Then, under the Async JavaScript options, select “Enable Async JavaScript.”

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.

Because of the structure, the JavaScript file would need to load first, according to this code. This isn’t ideal because the CSS file is almost probably more important than the JavaScript code.

This instructs browsers to give precedence to the CSS file above the JavaScript file, regardless of hierarchy.

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.

The results

Let’s have a look at how these changes affected our page speed as measured by a handful of prominent metrics.

Final thoughts

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.

1 Comment

Leave a Reply