Performance on a website is often left to last and at times ignored by developers. This is mainly because it's surprisingly not a simple or straightforward task. There needs to be extra work done that has no real visual impact on the website, and thus, it may or may not get ranked high in terms of importance to a company.
But it's increasingly more vital these days as search engines are starting to take site performance as a ranking metric. And in fact, they have been doing so for some time now. And it is safe to assume that this will be an ongoing trend in the years to come and that not keeping up will inevitably yield lower organic search traffic.
In this article I will cover 5 things that you can do right now in order to improve your overall site performance and speed. These are all things that I am personally doing on this blog and that I have implemented for some time now. I will offer some suggestions as to how you can go about doing these yourself on your web applications, whether you are using WordPress or your own self-hosted website.
Starting with the simplest to implement.
5. Decrease image sizes
This is the quickest way to see instant results. If you are serving image files that are rendering as 200 x 200, but their true size is 4000 x 4000, then you have a problem. Resizing your image files in CSS won't help you here. You need true image file resizing in this case.
If your news feed is taking up 100MB of a users bandwidth, you can rest assured that they are not having the most optimized web surfing experience. And with mobile-first being the pattern of choice these days, you might be costing your users money as well in terms of data costs.
So how do you decrease image sizes? Well, there are a few ways. There is always the tried and true method of you manually doing it on your machine with whatever photo editor you have available.
I tend to use mspaint personally, as it has a resize feature right out of the box. For one-off file uploads, this is no problem.
For large scale resizing however, you are going to need a technical solution. If you are using WordPress as your site platform, then you're in luck as there is already a plugin that can handle this for you.
If you are hosting your website on a Node.js environment however, you are still in luck as there are a variety of npm libraries specifically designed for file size optimization.
One of those libraries is sharp, which not only offers image resizing, but also the ability to change the file format to something less resource heavy.
4. Minimize css and js
This won't make your website a state of the art lighting quick application, but depending on the size of your CSS and JavaScript, it can save you a number of kilobytes per page load.
There are a number of ways of doing this, and the one that you choose will mainly depend on the language your application is written in and on the framework that it is running in.
If you are working on Visual Studio for example, you can use the built-in resource bundler in order to combine multiple resource files into one minified file. This is the approach that I tend to use as often times I am working with dozens of resource files.
For those running their apps in a Node.js environment however, there are plenty of plugins available to handle this step for you.
One of those libraries is minify.
3. Reduce resource files
Most browsers have a limit as to how many files they can download at any one time. Typically, this number hovers at around 6, though it varies from vendor to vendor.
This means that if you are loading 100 resources files, the most that you can download concurrently at any one time is 6.
Resource files can be any of the following:
- CSS files
- JavaScript files
- Images
- Font files
- Audio files
The solution in this regard isn't as clear cut or as obvious as the previous 2. But there are a few methods that you can use to make a slight dent.
The simplest and most obvious step that you can take is to simply inline your CSS and JavaScript directly to the page. While increasing the overall size of the page request, you avoid any issues with concurrency.
While this goes against many traditional teachings, even Google recommends that we do this on occasion.
Another method of file reduction is to use a web bundler as a preprocessor. What is a bundler? Well, a bundler essentially takes multiple files, such as css files, and merges them together into one file.
Parcel is one of the more popular versions out there today, which you can install from npm or yarn.
And as mentioned above, if you are running your applications in Visual Studio using .NET, you can use the built in resource bundler to automatically take care of this before publishing.
And lastly, and perhaps the easiest thing that you can do right now, is a relatively new addition to the HTML standard.
Most browsers now support native lazy-loading of image files.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>
Which means that you can flag resource files to not load until they are required. Typically that means until a user has scrolled to a certain location on the page.
2. Optimize your database queries
Your website won't even begin to render until your database has completed crunching your queries and sending you the desired data back. At least on a server-side codebase.
If you are mainly relying on Ajax calls in order to render content, then your webpage will render, but it will mainly be blank until the database has completed it's process.
It ends at the database essentially. This one might not apply to most websites that are still relatively new, as the number of records more than likely will be on the low end.
But if you've had your website for a few years now, with a few hundred, or even thousand pages, analytics tables, diagnostic records, etc, odds are you might be putting a hefty amount of load on your database.
This entirely will depend on the type of database that you are using however. If you are storing your data in a NoSQL environment for example, then you might not have to worry as these type of storage mediums tend to perform relatively well.
If you are on a shared relational database server with 200 other websites though, then optimizing your queries might become incredibly important long term.
1. Use a CDN
This might be the most important method on this list as it potentially could yield you the biggest results. At least it did for me.
First off, what is a CDN? A CDN (Content Delivery Network) is essentially a network of computers typically around the world that each host your website. Typically, each of these computers will sync with the others to ensure that every server has the same files.
When a user then visits your website, the CDN will determine where the user is located in the world, and it will serve them files from the closest data center, thus ensuring faster loading times.
One of the biggest benefits of having your website hosted through a CDN however, is the potential pre-processing that most offer.
Take the minify step mentioned above for example. Most CDN's, like CloudFlare, can automatically perform this on your website with a simple configuration change.
And the same is true for caching as well. Most CDN's have custom caching policies that serve users pre-rendered content again improving overall page load times.
And this is why I mentioned that this step could potentially yield the biggest results for your overall performance. Because it takes much of the work out of your hands and puts it into an environment that is essentially designed for performance and optimization.
While I don't have any personal recommendations for a CDN, CloudFlare is a good place to start as they do offer a free-tier to get you started.
And lastly...
If there is one thing to take away from this article, it's essentially with what I began with. Performance is often ignored because it is not a simple task.
I mentioned 5 out of potentially dozens of other things that you can (and should) be doing on your websites. And each involves their own learning curve and implementation.
If you can get these 5 down though, then you are headed towards a good direction.