Imagine you are done building your website, everything looks great and works as expected, but it feels a little slow, some optimization is in order.
It is pretty obvious why site performance is important, but let’s try to summarize it a bit. Site loading speeds affect all aspects of your site, increased loading speeds can negatively impact ranking, increase the bounce rate (that’s bad, it means that people stay less on your site), and decrease the conversion rate (less people do things you want them to do).
Now that we have your attention, let’s look at some potential weaknesses and try to improve upon them.
What causes slow website loading speeds?
Three key elements negatively affect your site’s performance, bloated themes and plugins, and sub-par hosting, let’s break them down a bit.
Theme and plugin developers tend to bundle a lot of functionality to make their product more appealing to you, but that can be a double edged sword. If they are not properly built and load all their assets whether you need them or not, or if they burden your database with redundant queries, all that prettiness is no good. Is there really a benefit to having a “build anything” theme that you then have to spend hours slimming down in order to make your site a little faster? We’d say no.
On to hosting now. There are a few different types of WordPress hosting and surely you’ve heard of all of them, shared hosting, VPS, dedicated servers and managed hosting, each one aims to cover a specific hosting need. First you will need to identify what your need is, are you expecting a lot of incoming traffic from the start? Then don’t host your site on cheap shared hosting. Are you building a personal blog that you plan to grow bigger as time passes? Start low and upgrade down the line. Whatever you do though, don’t let the price point and the advertised hosting package characteristics be your only deciding factors. Read reviews, ask people, search forums and then factor in price and features. Cheap is rarely good.
The takeaway is, choose your tools carefully, purpose built ones are always better than multitools.
Now I know, but what can I do?
Things on the Internet have been communicating between them mainly using HTTP for almost 30 years now. The process is pretty straight forward, the client connects to the server and requests a resource, the server responds with that resource. The problem is that we can request one resource from each connection, this greatly impacts the loading times of modern sites which are regularly comprised from dozens of individual resources, scripts, styles, images etc. Imagine you are having a party and want to order some pizzas, however you can only order and have delivered one pizza at a time, it won’t be a great party, right? Enter HTTP/2 with something called multiplexing, which can send multiple resources over one connection! Multiple pizzas with one phone call? Amazing!
HTTP/2 support is something you can look for from your hosting provider because it has more benefits apart from multiplexing. If you want to learn more about it, have a look at this article.
Upload images responsibly.
Very large images are the bain of most modern websites, they can take your page from a few hundred KBs to a dozen or more MBs before you say “A couple of photos from last night’s dinner”. Stop taking pictures with your phone and uploading them straight to your site. Resize them to a more reasonable resolution and compress them to your liking before posting them, no one wants to see a 4MB 4000x3000px photo of an omelette, really. If you can’t be bothered there are plugins like Imsanity which resizes and compresses images as they are uploaded, it literally does all the work for you! Other interesting image compression services and plugins are TinyPNG, Optimizilla, Smush and ShortPixel.
Asset minification and concatenation
Minification is the process where we remove unnecessary or redundant data from a file without affecting how it is processed by the browser. For example a browser does not care for code comments, formatting, and anything else that just makes the file easier to read by humans. This could end up reducing the size of the file significantly thus making the transfer process faster.
Concatenation is the process where we merge multiple files of the same type to one, for example combining all smaller stylesheets to a bigger one. This can have a positive effect when sending data through HTTP, because using this workaround we send multiple assets through one connection, however it might not be that beneficial if our server supports HTTP/2 because sending multiple smaller files through multiple connections might be faster than sending a large one through a single connection, so test and verify before you use concatenation over HTTP/2.
Lazy loading and GZIP compression
Using the lazy loading technique we only load images that are above-the-fold for the initial site load and, upon scrolling, only images that come into view, if the user does not see it, we won’t load it yet. This significantly speeds up the initial load time of the site.
GZIP is very similar to other compression types you might be more familiar with, like zip, rar etc. Essentially files are compressed on the server and then sent to the client, the reduced bandwidth required results in faster site load times. GZIP might already be activated on your host, if not you can pick one of the popular caching plugins that provide GZIP functionality, or manually enable it by editing the .htaccess file.
You undoubtedly hear the word caching a lot and you find caching plugins on almost all of the essential plugin lists, but what does it do? When your browser makes a request to a site, the server receives the request and compiles the page to send it back to you, when using cache a copy of that compiled page is stored on the server, if the same request comes to the server, for example someone else views the same post, the package is ready and is sent to the browser immediately without the need to be processed by the server again, this saves both time and server resources.
There are two main types of caching, client-side and server-side caching. These are further split into subcategories, we’ll take a look at the most popular ones.
Browser Caching: This is the most widely known client-side caching mechanism. Each time you visit a site your browser stores a static version of the page you visited, so next time you visit that same page, it loads from your hard drive and doesn’t have to be downloaded again.
Page Caching: This is a server-side mechanism. It stores the entire HTML of a given page, content, files, queries etc, so the next time someone requests it, it’s ready to be sent without WordPress having to built it again.
Object Caching: Another server-side caching mechanism. Here, database query results are stored in the cache, so the next time the same result is needed it can be served from the cache without having to query the database. This takes load of the database and helps serve queries faster.
Utilize a content delivery network (CDN)
When you visit a site that’s hosted relatively close by, the information has less hops to traverse, making the connection faster. That’s why sites that are hosted far away from our location are perceivably slower. Enter CDNs, strategically placed servers around the globe which host static content of websites that use them. This way when you visit a site which uses a CDN, the request is routed to the server closest to you cutting down on the time needed for the content to reach you.
All generated content on your WordPress site is stored in the database. Posts, pages, comments, custom post types, post revisions and site settings are some of the things stored in it. Databases tend to grow over time, especially if you are actively updating your site with content. A larger unmaintained database might mean slower query times, larger space needed for backups and trickier restoration. You should periodically clean up orphaned data from your database and optimize its tables to ensure optimal performance.
Is that all?
Yes, that’s all you need to get you started, optimization is an uphill battle, start with the basics and as you learn more and progress focus your efforts on places your site needs the most help, don’t try to do it all at once.