What You Should Know About Optimizing Your Website for Performance
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.
Front-End
In the front-end, you should be aware of the critical render path and optimizing your code structure. To get a better understanding of this, it helps to think of the three languages of the web as components of a building, with your website being the building. HTML is the wooden frame, the floors, and the foundational components, while CSS is the paint, tiles, lights, and other visual aesthetics. It's crucial for these two components to be unobstructed when first loading since they build what the site visitor sees in unison. This allows for visuals to be visibly faster, a quick “initial paint.” Unfortunately, Javascript code obstructs this build process.
Returning to the house analogy, Javascript is basically the behavior to the house– your lighting, running water, internet, etc. Whenever a browser is reading your website’s code and going through HTML and CSS, it will come to a dead halt as soon as it runs into any Javascript. The browser must first breakdown and execute the Javascript before it can continue building the visual features. A visible symptom of this issue is when the page takes longer than the average site to show any content on the screen. The solve would be calling the Javascript towards the bottom of the page or getting fancy with special tags like “async” and “defer.”
Another issue with code optimization is not being mindful of the code you are packing in. It’s easy to get carried away with pulling every cool library you find to add something new to your site, but in turn, that will increase the weight of your site. A fantastic article on understanding the cost of what you’re packing into your site is “The Cost of Javascript,” written by Addy Osmani. When your site is has too much code, it will lead to longer load times because of the size to download and parse by the browser engine. It will also take longer for the site to be interactive due to Javascript being single thread (interactions like opening a menu, hover effects, sliding images etc). There is no easy fix for this, as you must find a good balance of what is crucial to your experience and what are just unnecessary toppings on your pizza. Another way to avoid this problem is to advise your developer on code splitting. This is when the developer will determine what code is absolutely vital for the initial load. Therefore, you can load the essentials as a small file first, while the rest of the non-crucial content loads in the background.
Back-End
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
Finally, improving your website performance can be done within the data transfer process that is happening between your site and server. As mentioned before, gzipping files will allow servers to compress the files that are being sent. Another method similar to this process is minification of your asset files, such as Javascript and CSS files. If you’ve ever seen a file, you’ll see it can be filled with many line breaks, comments, and easily identifiable variable names. However, your browser does not need any of that to process it. Minification will compress all of the code into the one line, removing all of the extra fillers like space, comments, indents etc. This will greatly reduce the file size.
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.
Conclusion
Just to recap: On the front-end, optimization can be done by reducing the possibility of render blocking Javascript code, writing less code, and splitting how it’s delivered. Back-end improvements can be made by enabling gzipping, browser caching, improving server specs, using CDNs, and adding load balancers. Finally, the data exchange process can be improved by decreasing overall file size with minification and optimization.
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.
Sources
https://sweetpricing.com/blog/2017/02/average-app-file-size/
https://nystudio107.com/blog/a-pretty-website-isnt-enough
https://www.udemy.com/the-complete-junior-to-senior-web-developer-roadmap/learn/v4/content
