No-one enjoys a sluggish website. A page that is slow to load or render can annoy users and lead to an overall poor user experience. Research have shown not only that page load time has a clear, observable impact on page views, bounce rate and conversions. According to Akamai and Gomez.com surveys, 47 per cent of users plan to load a page in 2 seconds or less. A platform that takes longer than 3 seconds to load is actually abandoned by 40 percent of users.
All this means you ‘re not only losing visitors because your site is sluggish, you ‘re losing sales, and you’re also losing future customers if your current users have had a bad experience.
We’ll look at the best ways you can improve WordPress and help create a better experience for your users, which will hopefully lead to more page views and higher conversion rates!.
Many websites take about 2-5 minutes to load, in this tutorial we’ll look at how to increase the page speed of your website within your own code and some other frameworks.
If you want to increase your pagespeed, there are two things you can worry about, how to avoid memory leaks and how to avoid the same requests over and over again.
A aspect that is strong when looking at frameworks is WordPress. Frameworks are a wheel to escape slow loading time, if you add more code(Plugins) to increase page speed, often this will work, but it won’t increase the speed by 95%.
Pages can be increased by 95 percent on any website. When you are coding the website you avoid using JQuery yourself, if you just use it for two tasks. Stop using a single command kit, and stop loading it on every site or order.
Test Your WordPress Site Speed and Performance
It could be a good idea to test a few things before you start just throwing changes at your site and decide how sluggish your site is.
Some primary measurements include;
WordPress Page load time:
This is basically the total load-and-render time for an interactive website. There are a few ways to calculate, and all offer slightly different results, so doing a few tests is a good idea.
You can measure it using Gtmetrics or Pageinsights: Pingdom is My personal favorite page speed testing website. Enter your site address, select the location from which to test, and execute the test.
WordPress Server response time:
This is the time that it takes for the server to respond to the requests by browsers.
You can measure WordPress Server response time using Bitcatcha, its a useful tool which measures your server’s response time from a handful of locations around the globe. Note that the most important result is that which is nearest to your server (geographically).
Host your WordPress site on VPSs, Cloud hosting and managed hosting
No one ever wants to hear it, but one of a slower site’s biggest factors is inexpensive shared WordPress hosting, and it’s one of the fastest ways to accelerate WordPress. When we design WordPress pages, we see this all the time. A platform that is hosted somewhere on a cheap shared server almost always has poor response times. It may not sound like an enormous issue, but consider it; let ‘s say a user directly types your domain into their browser address bar, and they never visited your site before (absolutely worst case). This is the series of events that will occur roughly: (We will be using https://keithrainz.me/ as the example here).
I think by now you get the picture, the worst case scenario here might be several seconds for a first page load before a client can even start downloading something. We saw cases where only the DNS lookup and redirect chain was over 4 seconds, and then the server begins to create the article!
Slow hosting solution?
You know that, Yep. Switch to host more. Some research by Amazon , Google and others have found that conversions can have a reduction of only 1 second in load time up to 7 per cent! But the cost of switching to better hosting really isn’t a cost at all.
Moving to a Virtual Private Server or VPS is the perfect option for the cheap shared WordPress hosting. A VPS is a virtual portion of a physical server that is completely dedicated to your use. That means you will always receive the resource allocation you need (RAM, CPU etc.).
If you don’t feel confident doing any command line setup etc, you probably want to look for cPanel VPS or the like. These packages appear to start for a simple VPS with cPanel around the $35 / month mark, and go up from there.
Try anything like the one-click WordPress on Ubuntu 18 or OpenLightSpeed WordPress droplets by Digital Ocean if you’re a bit relaxed tinkering. These are still easy to set up, and compared to a cPanel / WHM server can work very well.
Avoid using WordPress Poorly Optimized Images
Another of the best ways to speed up WordPress bang-for-buck is to deliver better images to your users. We see a lot of places where one gigantic image is distributed to all clients, usually at maximum display standard, irrespective of screen size, link speed etc.
Let ‘s start with the easy one here; images should be optimized for the web at the very least and only delivered to the maximum size that might actually be required. Most of the time it’s probably not going to be important to deliver an 8000px wide image. They are run via a service like ShortPixel, an simple way to customize your photos for the web. ShortPixel also comes with a WordPress plugin allowing you to do all the job. When you upload them, it will ship your images off to ShortPixel, compress them and return them to your media library. They have a free tier that allows you to optimize 100 images a month, but in order to use the plugin you need to create an account. Pro tip: For most situations we recommend using gloss compression.
Added bonus: ShortPixel can be configured to deliver images from WEBP which can significantly speed up loading of images on modern devices.
Lazy load images in WordPress site
Lazy picture loading is a very simple way to speed your WordPress blog. Lazy loading involved deferring the loading of images until it is within the viewport of the browser. To understand what and why this works, it’s important to understand that as soon as possible a browser should seek to load the source of all img tags in a webpage. Whether the image is 2000px out of viewport, or visually hidden, it doesn’t matter, the browser will start loading it as soon as it can reach it.
When can we get away with this? Well there are many ways to implement a lazy loading technique, but it basically includes the following (at a very simple level);
Replace the image src with a placeholder image (they often use a 1×1 px PNG transparent). That stops the browser from immediately loading the image.
Add a data- attribute to the actual source of the image. That allows a javascript to locate the source.
A javascript to load into the appropriate source, preferably once the picture is in the viewport or close it.
All of this we could do manually, but luckily there are quite a few solutions out there that will do the job for us. My top recommendation would be A3 Lazy Load if you are using WordPress. It is a free plugin available in the repository of WordPress, and it loads images, photos, iframes, etc. quite quickly. It has some configuration settings but the defaults should only work for most instances.
Remove Unnecessary and Out of Date WordPress Plugins to speed up your site
One of the best things about WordPress is its ability to add extra features easily and quickly through plugins. Sadly, not all plugins are written particularly well and can sometimes result in sluggish page load times.
Recently, I improved a poorly performing ecommerce site and found an increase in page load of about one second by disabling 3 bad plugins. Many plugins of course provide key or essential features, so plugins can be difficult to uninstall. The best thing to do is to go through all of your plugins and decide how important they are, and whether they are up to date. Any out of date plugins will definitely be patched!. And you use light weight alternative plugins.
Compress & Combine Assets like CSS and JavaScript in WordPress
A common explanation for slow loading of websites is the installation of a large number of external assets (often due to plugins). The user’s browser has to download each of these assets that can slow down page loads, particularly for assets that block rendering (note that this is less of a problem theoretically if both server and client support HTTP/2).
You can also compact and minify the stylesheets and scripts to that scale. To make the styles and scripts as tiny as possible, compressing and minifying eliminates all the unneeded white space, renames variables, etc.. We ‘re not going to even get into the nitty gritty here on how to do it, because luckily there are plugins for us to do so! If you didn’t use W3 Full Cache before we’ve got a tutorial coming early.
Configuring minification in W3TC should be as straightforward as installing the plugin, allowing mining under General Settings, Minify. Naturally things don’t always go to plan, so use with care and check! You can further change the settings under the same Minify settings if you need to.
Enable Caching on your WordPress site
While we’re on the W3 Total Cache issue, there are a whole host of other options that we can allow to speed up WordPress further. In the previous phase, if you installed W3TC, some other options you can easily allow are;
WordPress page caching
When we are talking about caching, caching page is generally what we’re talking about. There are lots of examples of caching around the internet, but in a nutshell; any time a page on your website is requested without caching, WordPress has to do a bunch of stuff to create the article, such as getting the post material, getting the title, etc. The stuff is theoretically dynamic but it doesn’t alter unless you update your page or article. So what caching does is create the page once, store the built-in HTML and then simply submit the cached HTML instead of re-creating the page on subsequent requests. There is a small tradeoff here, the page load would be slightly slower on the first page load (when the cached version is being set up). However it should be a lot faster on subsequent loads.
Turning on in W3TC should be as easy as allowing ticking in the General Settings. Note something; with allowed caching, changes to the content do not appear on the front end until those changes are removed from the cache. W3TC will automatically clear up post information, etc., when you hit update.
WordPress Database Caching
Database caching can also be easily activated on W3TC ‘s General Settings page. Database caching essentially stores repeated queries about databases so that the data can be retrieved automatically without ever accessing the database.
WordPress Object Caching
Object caching is a little close to caching the database. Where caching of database caches requests and tests from the raw database, caching of objects caches the WordPress query that uses those tests. For repeated queries this can dramatically speed up dynamic efficiency. Again, just clicking that on in the settings should be enough.
WordPress Browser Cache
The W3 Full Cache web cache setting allows your WordPress site to compress static assets sent to the web, and adds headers that tell the browser how long it will store those assets. If you haven’t known; most browsers can cache assets and even whole pages to speed up repeat visits to the web.
Do not use page builders on WordPress for speed
Page builder themes / plugins (Divi, WP Bakery Page Builder, Beaver Builder etc) are an easy way to build and manage a website for people with no development skills. Unfortunately, I have never met a well-performing page builder. There’s always a tradeoff between creating something that’s very performant, and something that can be easily modified via a user interface. Unfortunately, the sacrifice as versatile as this is a major performance hit for page builders. If this is often combined with less than ideal coding, the result is a truly slow page. You can try all the other tips in this post, of course, and I’m sure you’ll see some performance, but I would be almost ready to bet it’s still not great.
Instead; using a well-constructed theme. Start with a good theme and customize from there to get the desired result if you don’t feel up to creating one from scratch. Or a good developer to recruit!.
Use a content delivery network on WordPress for speed
A CDN will significantly affect your static asset delivery. A CDN provides the content from a geographically dispersed cloud network (images, stylesheets, scripts, etc.) that is designed to support static content.
Use the latest PHP version on WordPress for speed
This one doesn’t sound like a specific tip for WordPress, (and I guess it isn’t really …) but it’s actually a very easy way to speed up your WordPress site. Many cPanel hosts and others also run on or before php 5.6. In December 2018, PHP 5.6 and 7.0 were discontinued so continuing to use them could actually become a security vulnerability. Most notably, there is a significant difference in speed and efficiency from PHP 5.6 to PHP 7.x
There are plenty of similarities around, but tests showed a reduction in time of up to 50 percent to create a website, and even greater reductions in the number of requests using PHP 7.
