The overall ranking of a website in search engines is heavily dependant on its loading speed; let’s find out how to improve WordPress performance. Learn how to provide a seamless experience for the visitor and avoid losing conversions.
A short intro on how the browser works
You can skip this part if you need to go straight to the point. You might find it interesting yet if you are keen on learning how things work. Let’s dig in!
While, the loading of a page typically takes a few seconds or more, for “browser time” this is a heavily fragmented period. In fact, from the moment you request the page to completely load, a sequence of processes takes place. As this technology has evolved through the years, the steps from clicking on the link to the fully loaded page have vastly improved.
The first thing a browser does when you request a page is a simple DNS lookup. Next, it’s time for a handshake. Yet, not contagious as between humans, the TCP handshake introduces the two computers; the one that makes the call and the server. There may be more nodes between, but typically they will only transmit the data without further latency.
If the site is running on HTTPS, there is one more handshake to determine the type of encryption. After that, the road is clear for requesting the content of the page. This is the point where we can start affecting the site to improve WordPress performance.
Harder, better, faster, stronger
The loading starts with a Get Request (HTTP) which expects some kind of HTML. This is called the “Time To First Byte“. The first amount of data is of a very small quantity. The network bandwidth might affect the load, and in cases may as well duplicate that (small) amount.
While data have started loading, the browser is about to create the page. To do that it needs to turn the data received into the DOM and the CSSOM (the original APIs of any webpage). This process is known as “parsing”; it’s the initial analysis of the data to create the backbone of the page.
Rendering
After parsing, the browser can start rendering the page elements. It begins creating the DOM tree and loading the data. Some elements are loaded at once, while others (like MIME types) are requested as the rendering continues. At this point, the browser begins to request more resources from the computer. Older computers, slower networks, bloated pages will need more time to complete the rendering. This process takes 3 (and in some cases 4) steps to complete. Those include Style, Layout, Paint, and depending on the content, Compositing.
Style and Layout are instructions on how to display the contents and they will not produce an effect immediately. Yet, the Paint will sure do. The first thing that appears on screen is called “First Meaningful Paint“. It lasts only for a fraction of a second but, hopefully, this means the page has (finally) started showing something. Last but not least, another process called “compositing” might start when the page has multiple layers to show. That’s because the browser needs to ensure the layers will show up in the correct order.
Readiness
While the content starts appearing on the screen doesn’t mean the page is ready for interaction. As most of the sites nowadays require some kind of user interaction, the page should be ready to do so. This might not be possible if the page contains scripts (mostly Javascript) that require some objects to load first before allowing us to interact with them. The infamous “Time To Interact” is the last critical step of the loading process. To make this happen as soon as possible is the last point on the road to improve WordPress performance.
The 3 Levels of Improvement
While hosting is a major player in the performance run, WordPress and even the content play a significant role in achieving a great score.
Improve WordPress performance on the hosting level
Before reviewing our WordPress installation, we need to check a number of important things on the hosting panel. In fact, even if your site is optimized for quick response, if the hosting is not fine-tuned, you may still experience some unexpected latency. This is the reason why we need to review the settings of the server before we start deploying. Even the cheapest hosting plan has a few settings worth checking.
HTTPS
There is no actual reason to keep your site running under a non secured protocol. While the loading speed will not change if you are running on plain HTTP, things may become complicated if you choose to upgrade later. If after the transition you still have content loading from HTTP the browser will negotiate through “double channel”, affecting the loading speed.
To avoid this kind of issue, install an SSL certificate as soon as you get the hosting plan. Note that, you can purchase a certificate from an eligible service but you can also create a self-signed one. Although it’s safer to use a paid service, for small projects it’s usually ok to start with the open-source. And, switch to a better one later.
gZip (server-side data compression utility)
It is a small yet powerful tool that runs on every modern server. It allows for compressing files, hence it vastly increases the loading speed. Just make sure you activate gZip compression on the hosting panel and you have bypassed a great bottleneck. In some cases, the option might not be directly available on the hosting panel but you can still request it from your provider.
CDN (content distribution network)
If you are aiming for the international market, a CDN will allow for your site to load faster everywhere. It works like local storage for sites closer to the visitor’s area. You might as well call it “an internet buffer for long-distance traffic”. Typically, you can activate this service with a single click on the corresponding option on your hosting panel. Some services require registration first. Caching plugins may have this options too.
PHP version
While most providers give the option to upgrade the PHP version, many sites are still running on outdated versions. Moreover, WordPress, since last year, has started prompting for updating to the latest version, including a warning on the Site Health section.
Older versions are not only less safe to use but also much slower. When it comes to WordPress, it can still work with older versions but it recommends updating to the latest one. Unless you have an old plugin that’s hard to replace with another, it is better you upgrade as soon as possible. It will improve your experience a lot.
Bandwidth
The problem with exceeding the bandwidth limits is not only the downtime (which will happen) but the overall traffic being squeezed. Although most providers are now using SSD’s for storage, this medium has physical limitations as well. If the site is not loading as fast as you need because of the traffic, you can ask for specific details regarding the storage medium and the location of the server. Some providers are storing sites in several data centers. If your project has (luckily) grown more than initially expected, consider moving the site to a dedicated server. It costs more but it gives you a benefit.
Improve WordPress performance on the CMS level
Every hosting provider offers a plan which allows for a cluster to serve only your site. In most cases, this is beneficial for the loading speed. However, we still recommend reviewing the features of the plan before purchasing to ensure the offer covers your needs.
WordPress, plugins and theme updates
Core updates
WordPress frequently releases security updates for previous versions to keep all sites covered, in terms of safety. Unless you’ve chosen not to, security updates are automatically installed. Even though those updates harden the security of the site, it is always a good practice to use the latest available version, to ensure the site is ready for future improvements.
Plugin Updates
Outdated plugins, not only can become a security threat for the site but they also create additional latency. WordPress often adds or removes some tools from the javascript or PHP sets, to modernize its structure. Outdated or poorly written plugins may become another bottleneck.
Authors need to comply with these changes so they release new versions. Don’t miss these updates in order to maintain a fast, healthy, and robust site. In case they have abandoned or made the source code available to the public domain, we recommend replacing those plugins with newer and better ones.
Theme Updates
The same principle applies to the themes; always perform their updates the sooner they become available. WordPress themes contain a lot of code that authors maintain and improve. Since they are the backbone of your site, they matter a lot. On top of everything, it is important to select a good theme; but keeping it updated has a great impact on the overall performance.
Other practices
If you have managed to push the performance to the edge and your site is healthy site, there are a couple of steps you can do to further increase its speed.
Caching plugins
You can use a plugin that creates static copies of the pages. WordPress originally serves PHP files that contain HTML (the language the browser understands). A caching plugin like WP Super Cache or W3 Total Cache (among other features) can serve static pages rather than dynamic. This won’t affect the visitor’s experience (except it can make it a lot faster) Some hosting providers offer a caching mechanism on the hosting level. If this option is available it applies out of WordPress and you have less code to deal with. So, check it out before installing a plugin.
Minify Javascript
This is another popular category of plugins, which allows for compressing the content of the Javascript files. When untouched, the code may extend to several pages. After minification, it becomes compact and the browser will load it a bit faster. However, if you are still deploying, it might not be convenient as the code becomes practically unreadable. Note that, some caching plugins do have this option built-in, so make sure you review all settings before adding unnecessary plugins.
Clear past revision / limit revisions
The WordPress database can get bloated especially if you are working with all your drafts on it. Although modern infrastructures have great capacities, clearing the database can help your site respond faster. One method that helps a lot in limiting the revisions. It is quite reasonable if you think that all programs have a limited “undo” history. So, unless your texts are very sensitive, you can activate this option right after installing WordPress and keep the database in a great form. In case you have already published some articles, you can use a plugin like WP-Optimize to do that work for you.
Add and activate Jetpack
It works as a protective shield to the site and also increases speed a lot. With Jetpack, You may not need to add a Caching plugin at all.
Improve WordPress performance on the content level
Whilst the hosting and core tuning is essential for increasing the loading speed when it comes to the content of the site, you must follow a few more rules.
Media
Most sites present rich content because it engages visitors. Pictures, audio, and video can make the visitors hang around your site for some time. With the proper tools, you can convert this time into real money.
Images are often uploaded without being optimized. A great number of high-resolution images on a page can increase latency to a point where the visitor will choose another site. That’s why we recommend keeping the file sizes of the images as small as possible. Additionally, use an adequate size image depending on the position. For example, your site logo does not need to be 1920×1080. For better results, you can use an online tool like tinypng to optimize images before uploading them on the site.
Sound files are not very often used on sites. They can make a difference though if you can use it in a clever way. Sound compression technology has miraculously reduced the file size of audio files a lot. Yet, it is not a good idea to host audio files on your server as they will drain the bandwidth sooner or later. For a couple of small files it is ok; in any other case, upload them on a cloud service like Soundcloud and provide the visitor with a link or simply embed them on the post(s).
Videos are the most resource expensive. When it comes to hosting videos on your server, because of their size it can hardly become affordable even for middle-size businesses. That’s why we strongly recommend adding videos on Youtube or similar sites and then embed them on the post.
Excerpts
Whether you are writing short posts or long reads, excerpts can help visitors understand your content before actually visiting the pages. This will not only reduce the unnecessary traffic on the site but it will make visitors stay longer on the posts listing page. It might not sound like a way to improve WordPress performance, yet it helps not reducing it, especially if you are having an increasing number of visitors.
Comments
There are two kinds of people on the web: those who like comments and those who don’t. Whatever is your choice, we recommend keeping them under control. If you are not planning to have a discussion with the visitors, deactivate them. If you’d like a Q&A game of simple engage more people on your business by allowing them to communicate through your post, you can keep them activated. In that case, we recommend adding a spam protection to keep the bots away from your site. Spam messages can drain the bandwidth and also bloat your database.
How to check the performance
You will need one or more tools to measure the results of your efforts. You’ve done your best to improve WordPress performance, and you can see that your site is loading pretty fast now. Still, you need some hard data to show your clients. Here is a list of online services you can use to test your site. Note that, depending on the location of the data center your site is hosted, and the choice of the CDN service, results may vary.
Did you find this article interesting? Feel free to comment below.
Follow Plethora Themes on Facebook and Twitter.
Add Comment