Monday Masterclass: How to Speed up Your WordPress Website — Part 1

This week we’re off to a flying start with a two-part masterclass on page load time, how it affects our site performance, and how we can accelerate it to get ahead of the competition.

No matter whether we’re selling products, services, ideas, or generating awareness, the speed of our website is the speed of our business.

Speed is something that is always on our minds, no matter what our level of experience is. Whether we’re designing and building sites, or maintaining and managing our sites, speed concerns each and every one of us. Which is why we are dedicating this and our next Masterclass to understanding the journey that our site data takes, on route to the user.

We’ll examine the points along this route that can potentially slow down our load time, and the solutions we can adopt, in order to avoid these pitfalls and accelerate our load speed. Of course, we’ll also look at the best ways to test our site speed.

This week we’ll be examining a breakdown of the journey, focusing on the information’s point of origin, and explore ways to speed up our load time, server-side. 

Server to System: How Site Data Travels

Because, as individuals, we don’t normally have the capacity needed to serve data to countless users simultaneously and keep it all safe and secure, we usually entrust our website data to a host. This host allocates a server for our needs. 

The reason we call it a “server” is because, in a way, it works like a server in a restaurant.

A user, wanting to see our site, will use a browser, sometimes referred to as the “client” in this sense, to contact our server. The moment this happens, the whole process kicks into action.

What the user sends, through their client, is a request, technically known as an HTTP request. In return, our faithful server replies with a responding message that contains HTML, the information telling the client how to organize and display the content of our site. This response message may also include instructions for the client to issue further requests for content assets that also belong to the website the client didn’t previously know about. 

Hence we get a series of rapid requests and responses, going back and forth, like a super-fast game of ping pong. 

Page Load Time: How Do We Measure Site Speed?

The amount of time that it takes from the moment a client sends an instance of data as a “ping,” till the moment a “pong” is received back, is the way we measure speed.

As web builders, we are responsible for the return journey, and the time that it takes for a user to receive their reply.

Along this return journey we have a couple of stations:

Having received and processed the request from the client, our data sets out from the Server, via the Platform, which in our case is WordPress and all the plugins installed on it, before it continues to the system where the client is operating, being rendered into the content that our user is curious to see.

Google and their counterparts measure the time it takes from that very first ping, until that very last piece of data is rendered, to complete the page, on the client side, where the user can see it, as Page Load Time.

Page load time is an important criterion for search engines, as their users look to them, to provide a list of sites with the best user experience possible. 

We don’t have to be Google to know how impatient a user can get just waiting for a page to load. So it shouldn’t surprise us to learn that the faster a page loads, the higher the ranking of that page will be in search results –the higher the potential we’ll have for traffic to come flowing to our site.

So how do we make this happen?

Let’s look at the things that can slow our site down, and how to fix them, starting with our first station along our journey, the Server. 

How to Speed Up Our Site, Server Side

1. Location, Location, Location

The first thing we need to address is the location of the server. As a rule: “keep your users close and your data closer.”

If I want to start a fast-food business, and my clients are predominantly from New York, establishing my restaurant in LA will not be a good business plan. Instead, I will move it as close as possible to where our client base is located. 

The big hosting companies have servers located on every continent. It’s up to us to ask our host to be located as close to our users as possible.

2. Using Content Delivery Networks (CDNs)

Another way to cut the travel distance is by using Content Delivery Networks, or CDNs. These are caches situated along the road between the server and the client that store static content assets, such as text, graphics, etc. that we have no reason to change so that the client doesn’t have to wait too long to receive the data that we’re shipping.

Again, this is something that we need to ask from our hosting service.

3. Upgrade Server Software

Once our server receives a request for data, it processes it. 

Think of our server placing an order with the short-order cook in the back kitchen of a diner. If we want our order to be out fast and with no hiccups, we need fast, reliable kitchen staff. In our case, what we need is effective and efficient server software.

Many host services still run on software stacks that include Apache, MySQL, and PHP

Without going into technical detail, what we want to do is make sure that the host service we work with is, or can, upgrade our server stack software:

  • From Apache to Nginx
  • From MySQL to MariaDB
  • Make sure that the PHP version is at least PHP 7.

In some cases, this alone can reduce our page load time by up to 50%.

4. Shared Servers vs. Virtual Private Server (VPS)

Generally speaking, hosting services keep our data on shared servers. 

In other words, we’re sharing the storage space and some of the service with other websites residing in the same storage system as we are.

Some experts maintain that this, too, is something that can impair our page load time, and recommend opting for a Virtual Private Server (VPS). The thing about using a VPS is that it also means a lot more work for us, the moderators.

Worse, if we’re not experts in such things, we’ll be putting our site and our business at unnecessary risk. 

Yes, you could improve your page load time using a VPS. Still, as many experts will tell you, there are several premium hosting services that are WordPress dedicated, like SiteGround, WP Engine, and FlyWheel, already providing great service so that we don’t have to deal with the headache and hassle.

Ready and Set up at the Starting Line

Having grasped how users get our data, how the client communicates with our server, and the ways that we can improve and speed up this communication, we’re ready and set at the starting line, already at an advantage over the competition.

Next Masterclass, we’ll be pushing the pedal to the metal and see how we can speed up the flow of data even more by modifying our WordPress platform and our content footprint. 

We’ll also be taking a site that we’ll audit to show how all of these tips and advice work in practice.

As we pointed out earlier, the subject of this two-part masterclass is vast, and admittedly there are several things that we haven’t included in this Masterclass. We feel that it would be better to set aside what we consider to be genuine expert material, for a separate future masterclass, for expert-level developers and web builders.

However, if you have any further advice, tips, or insight that could help other users speed up their websites, please share it in the comments below.

If you have any criticisms, we are equally interested in your thoughts. After all, our goal is to be the best at helping others excel at their craft.

About the Author

Simon Shocket
Simon Shocket
With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that’s a lot to live up to.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,384,778 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

16 Responses

  1. Very interesting.

    May I offer a recommendation for a future post about site’s speed?

    Elementor, like any page builder, contains a lot of functions, which not everyone uses for their sites (for example animations). These functions are contained within CSS and JS files. The best way to optimize a site built with Elementor is to turn off some of the unused CSS and JS files using plugins such as Asset Cleaner.

    The probelm is that this process of trial and error takes a lot of time and could break your site when an important JS or CSS file is disabled. Therefore it would be great if you could publish a post, whcih will tell the programmers what each of the Elementor CSS an JS files is responsible for. This would save us a lot of tests and help us to optimize the site speed. Feel free to check out the speed of my site (https://www.francophilesanonymes.com/) to see how much could be achieved by shutting down unecessary JS and CSS files.

  2. This is a great article and thank you for demystifying quite a bit of the technical stuff. I would also like to remind everyone that as important as speed is, bounce-rate is another strong measure for good ranking. Writing great and “sticky” content keeps users longer, helps you better convert, lowers your bounce rate thus bumps up your organic position.
    Cheers from Boston! – Filip https://guru.digital808.com

  3. One key thing to think about for the Elementor dev team is how the site ranks on Google’s Page Insights. https://developers.google.com/speed/pagespeed/insights/

    The key factor to getting a higher score is to limit the number of HTTP requests for js, css, and images. As you stated above, the latency of these requests is key and multiple requests can slow things down. It would be great if Elementor could do more inlining of the js and css, even with the header and footer designers. But, if they could also do more lazy loading of the images as this plugin produces: http://jquery.eisbehr.de/lazy/, then that would give it a great page insight score out of the box.

    1. Hi Brian,
      I just read this and thought to myself “Arrgh! I wish I could tell you more!!”
      But I’m afraid that all I can say at this moment is that the guys in our Dev department have got a couple of things in the pipeline to solve these issues.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,384,778 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.