In this WordPress tutorial, we have now learned how to install and use WordPress in order to create and manage your very own website. As your WordPress site grows, so does the amount of text, images, code and other media files. A bigger website means that it will take longer to load. To avoid slow response time in WordPress, you should also invest some time in optimization. It will ensure that your pages load quickly and efficiently, thus, leaving your visitors happy and wanting to come back for more. Everyone has encountered a slow website at least a few times and felt the frustration that comes while waiting endlessly for it to load. Taking that into account, spending some time to improve your WordPress speed is a really good idea. The best part about WordPress is that it’s really easy to optimize due to the number of plugins and other tools available. You can make your WordPress site lightning fast without even having any coding knowledge at all. To get you on the right track, we will cover a few WordPress optimization techniques that will provide a notable speed boost to your website.
Step 6.1 – Using WordPress Caching Plugins
The first step in optimizing your WordPress site is setting up a WordPress caching plugin. Is short, a cache is a temporary data storage. In most cases, active data is cached which results in reduced loading times. For example, when you access a frequently visited site, your browser will have a portion of the site’s static content located in its cache. As a result, the browser needs to request fewer files and information from the server which ultimately leads to quicker loading. WordPress caching plugins work by creating a static version of your website and delivering it, instead of loading all PHP scripts every time when someone refreshes or re-enters your site.
Most popular WordPress caching plugins are:
Step 6.2 – Optimizing WordPress Images
Image optimization is another crucial task that should be done in order to make your WordPress site fast. Generally, there are 2 main issues that cause images to load slowly:
- Using too large images. For example, you upload a 500 x 500 dimension picture but your site resizes it to 100 x 100. As a result, the visitor’s browser will have to download the larger file first, scale it down and only then display it. The proper way would be to simply upload a 100 x 100 dimension picture so that the excessive task of scaling down the image would be avoided. The image would also take up less space that way, resulting in an overall boost of speed.
- Images are not fully compressed. You can save lots of space and bandwidth by properly compressing your images. Luckily, WordPress has a really great plugin that can help you with that, it’s called WP Smush.
The more images your WordPress site has, the more beneficial this optimization task will be.
Step 6.3 – Enabling gzip Compression for WordPress
Enabling gzip compression for a WordPress website is a great way to increase speed and performance. In short, gzip compression works by finding similar strings in a text file and replacing it temporarily, resulting in a smaller file size. HTML and CSS files have a lot of repetitive text and spaces, making gzip compression very effective. On the whole, it can reduce the size of a WordPress page by up to 50-70%.
There are a few ways to enable gzip compression:
- Enabling gzip compression via .htaccess file (recommended).
- Enabling gzip compression via WordPress plugins, such as GZip Ninja Speed.
One thing that you should keep in mind is that gzip compression may slightly increase CPU usage. If CPU is not an issue, then gzip compression is a really great way to optimize your WordPress site.
Step 6.4 – Deferring parsing of JavaScript in WordPress
Most themes, plugins and social media add-ons use a lot of JavaScript which is by default loaded first when accessing a site. This will make the HTML and other visual contents appear only after the JS is loaded. You can defer parsing of JavaScript so that the visual elements appear faster, while various social media buttons and other content that uses JavaScript would be loaded afterwards. This is one of the techniques recommended by Google Developers that is often overlooked. In WordPress, you can easily do that by using plugins such as WP Deferred JavaScripts or Speed Booster Pack. A more detailed tutorial on how to implement these tools on your WP site can be found here.
Step 6.5 – Using a Content Delivery Network
Implementing a content delivery network (CDN for short) will speed up WordPress by caching content in multiple data centers around the world. After a visitor enters your site, the content will be delivered by the nearest datacenter available resulting in a better front-end experience. CDNs also work great with WordPress caching plugins and there are free solutions to get you started. For example, CloudFlare has a free plan which provides both benefits of a CDN while protecting your site from DDoS attacks.
Step 6.6 – Removing Query Strings from Static Resources
GTMetrix and other optimization tools suggest removing query strings from CSS and JS in order to improve caching of those elements. The previously mentioned WordPress plugin Speed Booster Pack is among a few others that can help you with this task.
Step 6.7 – Enabling Lazy Loading
Generally, when a web page is opened, all the content is loaded instantly, which is called eager loading. Alternatively, it is possible to delay the initialization of some objects (such as images) until they are needed, which is called lazy loading. The most common practice is displaying images only when they are visible from the visitor’s viewpoint or in the screen. All you need to do in order to take advantage of this technique is install and enable a plugin such as Lazy Load or Rocket Lazy Load.