How to Optimize WordPress | Complete Guide
Optimizing the loading speed of your site is very important, not only for your visitor but also for search engines such as Google.
Why is speed so important?
Optimize your site:
- Reduce the bounce rate.
- Increases the time spent on your site.
- Increases the number of pages views.
- Improve your position in the search engines.
Regarding the improvement of your position, search engines measure the speed of your website in their algorithm. When they recommend a site, they want to make sure that users will find what they are looking for quickly.
Tools to test the loading speed
WebPageTest: Probably the most complete service available on the market. Often shunned by beginners because it is more difficult to approach, it is nevertheless the tool of predilection to test the real performance of your site. Feel free to run multiple tests on different servers and with different connection speeds.
This tool is also the only one to give you the speed index of your site. The speed index is undoubtedly the most important data in web performance.
PageSpeed Insights: come directly from the late Google labs. It will provide you with technical advice classified by priority of importance to optimize the performance of your site. I therefore strongly recommend you to solve the problems of high and medium importance first.
Be careful, it’s not because you get a bad rating that your site is necessarily slow and the opposite is also true.
Pingdom Tool: This tool will help you to speed up the speed of your website. You will be able to choose the origin of the request as well as to record or not the results to follow your progress during your optimizations.
The spring cleaning
Limit the number of extensions
In fact, this is not the number, but the quality of the extensions used is important. However, the more extensions you have, the more difficult it becomes to control the quality. It is therefore good to take an inventory of your extensions regularly and make sure they are still relevant.
If you have the opportunity, replace some extensions with equivalent code.
It is also possible to ensure the quality of your extensions by installing Plugin Performance Profiler. This tool will help you target extensions that slow down your site.
Limit / Disable WordPress Revisions
WordPress natively offers revision control on pages and articles. This allows you to go back and view the changes made to your page. While this may seem like a good thing, over time this can lead to performance issues.
For example, say you create a page and work on it seven times. Each time you change a word or two. Although the change in the database is minor, you would now have eight copies of your original page, the main and seven other revisions. This can quickly escalate and slow down WordPress in the long run.
To correct this problem, insert one of the codes below into the wp-config.php file, located at the root of your site.
Disable revisions completely:
define ('WP_POST_REVISIONS', false);
Limit the number of revisions:
define ('WP_POST_REVISIONS', 3); // limit to 3 revisions
Clean the database
I could write a complete article on cleaning the WordPress database. What I will surely do one day for that matter. You already know the WordPress revisions and you know how to limit them. But be aware that you must also remove revisions already in your database.
For that, there is nothing better than the WP-Optimize extension. This extension will allow you to not only remove problematic revisions but also clean up the entire WordPress database. It is also possible to schedule the cleaning so that it is automatically executed at your convenience.
Limit external resources
This point is one of the most important for optimizing your site. Why? Just because external resources can hardly be optimized!
What do you mean by external resource?
An external resource is simply a script, a style sheet, a Font where all other resources that are not hosted on your server. Even Google Analytics is an external resource!
It is difficult to remove Google Analytics, but for the rest, it is quite possible.
Google fonts or other providers
Difficult to remove the Font from your site, however, it is possible to restrict the weight and the number of requests necessary.
For example, Google Font allows you to choose from the styles really used on your site.
Widget and sharing tools
Sharing tools such as Facebook and Twitter can be the slowest elements in your site.
Indeed, sharing tools can be detrimental in the following ways:
- Downloading external resources.
External resources cannot be optimized and they add a DNS query.
- Adds additional HTTP requests.
- Increase the weight of the page.
That is why it is advisable to remove these sharing tools and replace them with simple buttons.
Advertisements and affiliated products
Since it is not possible to optimize external resources. Advertisements and affiliate products are no exception. If your site displays advertising, be sure not to abuse it and, if possible, use a single ad network. So, if you use Google Adsense and Viglink, why not cut the pear in half and leave only one of them?
Affiliate products are often in the form of images hosted on the server of the company.
Why not host the images yourself? This would allow you to optimize them and remove a DNS query.
Image optimization is a crucial issue for web performance.
Indeed, images often represent the majority of bytes downloaded on a page. As a result, image optimization often provides the largest savings in bytes and performance improvements for your website: the less the browser has to download bytes, the less competition there is for the client’s bandwidth, and the faster the browser can download and display useful content on the screen.
My goal is not to have you install several extensions that will give you the illusion that your images are optimized. But to help you understand how to optimize your images. Web performance is never “one size fit all” and you need to understand this process in order to adapt it to your situation.
Eliminate and replace images
The very first question you need to ask yourself is: is this image really essential? Good design should be simple, and also offer the best performance. That being said, a well-placed image can also convey more information than a thousand words. It is up to you to find the right balance.
Then, if you’re a developer, you have to ask yourself if there is another way to embed the images in your site.
- Base64 – This technique is old as the Web. It will allow you to reduce the number of requests to the server and to be displayed instantly. Be careful not to overuse Base64 and use it on small images. Since this can affect the weight of your page and harm more than anything else.
- SVG inline – SVG inline will bring you the same benefits as base64 encoding, without the disadvantages. Be careful though, because inline SVGs are not supported on versions prior to IE9.
- Sprites – CSS Sprite is also a very old technique to optimize the display of your images. When developing your WordPress theme, it may be beneficial to group most of your small images into one.
It is true that Base64 images, inline SVGs and Sprites will reduce the number of queries. However, if your site is in HTTP / 2, using the above techniques can do more harm than anything else.
Select the right type of image
Indeed, the right type of image can make the difference.
- JPG – Use JPG for photos, high-resolution images and the one with a lot of details.
- PNG – Use PNG for icons, logos, artwork and images with little detail.
- GIF – GIFs are not so bad for small images, but my experience, they are very rarely superior to PNG. So, only use GIFs when you want an animation;)
Select the right dimensions
Be careful not to upload larger than necessary images to your site. Resize it manually or use an extension such as Imsanity to automatically resize the images to acceptable dimensions. Imsanity does not optimize images, it only limits their size.
Then make sure to use the correct image format when editing a page.
Compression of images
Compression of images is an important step. Of course, you could do it manually in Photoshop, but in addition to being tedious, you will get better results with a specialized extension.
This is where I normally balance you with a dozen WordPress extensions to optimize your images.
That’s exactly what I would not do because it’s counterproductive and I really want to help you.
I tried most of the extensions to optimize the images and I came to the same conclusion as Matt. Either the Compress JPEG & PNG images extension offered the best performance in addition to being very easy to set up for beginners. To configure the extension, you only need to get an API key on their website.
The extension is free up to 500 images per month. This is ample for most sites.
Your images are now compressed, it’s excellent! When is there visitors on the smart phone? An image of 1200px is not really appropriate for them. That’s why some developers such as Cris Croyer from CSS-Tricks have created the Ricg responsive images extension that will display the right image size based on the screen width.
The Ricg project is now included in the core of WordPress since version 4.4.
Deferring the rest (Lazy-load)
What is faster than an optimized image?
The answer: no picture!
Indeed, it is possible to load only the images when the reader needs it. Delayed loading is my favorite technique because it allows you to load only the images visible to the user.
Be careful, as I write these lines, most Lazy-Load extensions do not work with the Ricg responsive images extension. You will then have to make a choice between the two, responsive image or Lazy-Load.
I personally choose Lazy-Load because it’s the best decision for my blog.
Although accommodation is important, it is not the most important. Indeed, the responsibility of the server in the performance of your site is between 10% and 20%. It’s up to you to invest your time and money wisely.
It is best to choose an accommodation that offers the following:
- Make sure it is possible to choose from several places of accommodation. It is important to choose the server closest to your audience. This will positively change the response time of your server.
- Make sure the chosen package is on SSD. The price difference is now negligible, so there is no reason to choose a hosting without SSD.
Shared servers are an economical hosting solution. As the name implies, this server is shared. You will have to share server resources with hundreds, or thousands of other sites. If one of the sites on your server uses more resources, your site’s performance will be affected.
Shared servers very often come with an administrative console such as Cpanel to facilitate the creation of emails, FTP, etc.
If you have the budget and the performance of your site is important, I advise you to completely avoid shared servers.
The Virtual Private Server (VPS) is as flexible as a shared server since it is often accompanied by a management console such as Cpanel. Unlike the shared server, the VPS reserves resources (RAM, CPU) for your exclusive use.
Administered VPS can sometimes be very expensive. Do not forget to shop around so you do not pay too much.
VPS not administered
Unmanaged VPS is the best price and performance ratio. This category of accommodation is not recommended for beginners. This site is hosted on an unmanaged VPS.
WordPress Specialty Accommodations
If you do not want to spend too much time configuring your server for good performance, specialized hosting for WordPress is a very interesting option.
Most of the time, they include solutions such as caching directly on the server. So there is nothing to configure.
The server cache and browser
A WordPress cache extension is an easiest and fastest way to optimize your site.
As with the image optimization section, I’m not going to show you several caching extensions, only there better, in my opinion.
WP Rocket is honestly difficult to override in terms of performance and ease of configuration. This is also the finding of Philip Blomsterberg who compared cache extensions. The more complex an extension to configure, the more likely it is to make configuration errors. It is not very pleasant to never be sure that you have correctly configured the performance of our site. With WP Rocket, you buy the certainty of having the best performance.
Why recommend only this extension?
I do not receive any commissions with this recommendation. I just want to share, in my opinion, the best caching extension. It is of course possible to obtain good performance with a free extension such as W3 Total Cache.
The Server Cache
For a rough summary, WordPress is dynamic and you have to make it static. Otherwise, every time a page on your site is visited, your server must perform calculations and operations. Then the server generates the HTML and returns it to your browser. This process should normally be repeated at each visit.
If your site has a caching solution, the server must simply return the HTML. Which is much more efficient. The server cache is automatically enabled with WP Rocket.
The Browser Cache
The best known compression is undoubtedly the Gzip compression.
As you can see, compression greatly reduces the weight of static resources. The analytics.js file goes from 25.9KB to 11.7KB, which is not insignificant. Compression is automatically enabled with WP Rocket.
To see if compression is enabled on your site, use this tool.
There are several techniques for optimizing CSS resources , but I will keep this section as simple as possible.
Just keep the goal of minimizing the number of style sheets.
The browser must wait for all stylesheets to load before displaying anything to the user. By reducing the number of stylesheets, you can significantly speed up your site.
It’s fine to reduce the number of style sheets, but with WordPress it’s almost impossible. The themes are very often focused “features” and there is of course a style sheet by features. One for the theme, one for the carousel, one for the Google font, one for your form extension, etc.
If you are not a developer who can use GRUNT to concatenate CSS files and you do not know how to disable a style sheet loaded by an extension. Your goal of reducing the number of style sheets may seem difficult to achieve.
However, it is possible, several extensions like WP Rocket and W3 Total Cache can help you with the concatenation without any line of code. Be careful, concatenation is a delicate operation! It is not uncommon for this operation to break your site. It is therefore to be tested with caution.
Unlike style sheets, it is possible to make “ASYNC” scripts to no longer block the display and thus accelerate the loading. Be careful, concatenation and change of loading type can also break your site. The more scripts you have, the harder it will be to optimize them.
Yes you read correctly, the visual is an aspect to consider. The good performance always starts with a good design. This is what Brad Frost preaches in an article that has become an apology for performance.
Ultimately performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience. Good performance is good design. It’s time we treat it as such.
Does the home page of your theme start with a huge carousel? Are you aware that carousels are practically useless ? Does your site load a video in the background, or an HD image? Does your site display all social widgets? If so, remember that to speed up your site you will have to make significant compromises in terms of the visual and nothing to neglect.
Note that nothing prevents you from integrating the above items. I just want to mention that if performance is a priority, you will have to make a choice!
Content delivery network (CDN)
Contrary to what you may have read, the CDN is not always necessary. In fact, it can even in some cases hinder the loading of your site if it is used without reason. Indeed, a CDN will add a DNS query to the loading of the page. It is therefore wise to set up a CDN when your visitors come from the international.
There are always exceptions, for example, I sometimes use the CloudFlare CDN, even if the CDN is irrelevant.
Because it allows me to configure the SPDY module on sites that need it. It’s a little technical, but in addition to allowing better compression, SPDY allows multiple requests, simultaneously multiplexing on a single connection. This saves on round trips between the client and the server. SPDY allows, in theory, to accelerate your site even if there is an additional DNS request.
CloudFlare is now switched to HTTP / 2. Which offers the same benefits as the SPDY module and much more !
Automation of performance
I could not finish a web performance guide without talking to you about Google PageSpeed which literally lets some miracles work on some sites.
It is sometimes difficult to optimize a site and it is even more true for WordPress sites that allow so easily to add extensions that negatively affect performance.
PageSpeed for developer
PageSpeed for beginners
Your site should be on accommodation with PageSpeed like SiteGround example.
Attention, from my past experiences, it is useless to use PageSpeed on sites already well optimized. Since there is a cost in server resources and on the response time of your site.