What You Should Know About Optimizing Your Website for Performance
By Denis Gao on October 08, 2018
Imagine this: You just received a great looking website from a developer; it is loaded with fancy animations and functioning just the way you imagined it to. You are feeling good about the work and you think the job is officially done. Not so fast! There are a lot of things that are happening underneath the hood that can actually slow down you website if it is not tuned correctly.
By now, you should know how detrimental it is to have a website that is slow to respond, or even worse, does not respond at all. This article will educate you on what it is that slows down your site, and you’ll learn what to look out for and what questions you should ask your developer. This list of checkpoints will allow a non-tech person to ensure that their website is the best product possible.
The framework of your website can be broken down into three parts, and these are where you can make essential improvements. The three areas on your site are: the front-end (client browser site), the back-end (database and servers), and in the data exchange process between the two destinations.
The next place for optimization is in the back-end. These methods usually have simpler implementations. Gzipping is a really powerful method of reducing file size, yet it is very easy to implement on the server side. On popular stacks like node.js/express, it’s a single line of code used to enable that compression. Gzipping essentially replaces repeated words or phrases with a shorter representation of the word, a pointer. Think of how many repeated words like “the” and “there” are throughout this article alone, even more so with code.
Another simple and powerful method to implement in the back-end is leveraging browser caching. Instead of having to make server calls for assets on every page revisit, a simple modification to your server file can enable access to the memory in browsers to use a temporary storage; it persists until a user clears their cache or cookies. This can greatly increase the speed of page revisits for your customers. Using files that are stored over Content Data Networks (CDNs) is another efficient way to increase file speeds, as your site will load the files from a closer physical location versus somewhere that may be very far away. As your site gets bigger, other steps can be taken, like enabling load balancing on your server. This splits the task of running your site to different servers, moving the task around if one center ever gets too busy. You can also increase the properties of your physical server, upgrading the RAM and amount of CPUs for faster performance.
Data Exchange Process
The other form of data to optimize is images. There are many sites out there that can optimize your images for free, dropping down a massive 1MB file to maybe a few hundred KBs. As a reference, an average feature packed mobile app is around 25MBs. Depending on how many pictures you have, you could be sending more data in pictures alone if you are not optimizing those images. Especially harmful for users that may not have unlimited mobile-data. If you really want to get fancy and improve mobile experience, attributes like srcset and picture element will allow you to choose what image you want to load depending on device and screen size.
It is important that at the start of optimization, and throughout the entire optimization process, you are auditing your site regularly and monitoring the performance gains and losses. Being able to quantify your website’s improvements will allow you to have a stronger argument as to why optimization is important and worth it for your website. The best sites for measurement are Google Speed Test or webpagetest.org. You are now armed with some topics to bring up the next time you are handed a “finished” website, so make sure that website is as performant as you need it to be.