Write a Website that is Faster than 99% of Others
I have worked as a web developer for other 5 years now and I have seen all kinds of websites. So many have been poorly written, cobbled together messes that clearly have been put together by people who either didn’t care — or didn’t really know any better. It is shocking to think that some of these websites unpin businesses and have actual people with actual lives that depend on them as a source of income.
I want to talk a bit today about what it takes to write a website that is really quick, that stands out from the rest. In particular I am going to talk about the frontend, as this is where I feel a lot of websites are fall behind. Backend functionality can be really slow, but in general these are CRUD operations. And a lot of websites are smaller in scale, so they don’t really experience many issues with scaling — therefore backend response time is at least fine.
The thing with frontend development (and probably all development), it is like a lot of things in life. If you skimp on the smaller details, look past things and take shortcuts. Well, it all adds up. You might think adding that 1MB JavaScript library is worth it and won’t cause too many issues. But add 100 of them and you’ll be in trouble. Similarly you might think that an !important tag here, or some duplicate CSS there won’t cause you issues. But that kind of mindset causes problems in the long term.
So why is this an issue. Why are so many websites poorly put together. Well I think its a combination of things. It’s quite easy to be a web developer, to call yourself one at least. And it’s quite easy to make money doing so. A lot of companies also don’t see the value in having dedicated frontends. It’s just work that backends devs could also do — if you call them full stack.
Full stack developers do exist, but they are few and far between. Most of them are backend devs with bare-minimum frontend skills. My point is, if you own an agency or similar, invest in specialists. It will pay off.
So my first point is very general and can be held in mind throughout the development process:
1 — Focus on the details, be picky and take care in everything you do.
I know right, this is super vague. But keep this in mind with every other point I mention. Treat everything you create as an extension of yourself. What would you like it say about you? Take pride in your work. If you don’t do this, well what can you expect to create? It certainly won’t be good, and if its passable right now. In a year or so’s time of you working on it with that mindset, it won’t be.
2 — Use images carefully
Images can have huge file sizes. So make sure any images you use are resized to the sizes you need then. You can use srcset to serve size appropriate images based on resolution / pixel density. Also make sure to optimize your images. Sites like compressor.io can shrink image file sizes well over 50% in a lot of cases. I would also uses images only when it makes sense to do so. I don’t think a website needs to be like a magazine, with graphics everywhere. Go for a clean minimalist design. This will ironically also cause less need for other code such as styling.
3 — Be mindful when adding third part libraries
Libraries are extremely useful. They can save days or weeks and provide us with functionality out of the box. But they often come at a cost. Only use libraries when you absolutely have to. And when you do, check the file sizes of everything you include. A lot of what you are doing you could probably do yourself with a few lines of code. If you do need a library, just make sure to only include parts of it that you need — if at all possible.
I also tend to only use things that are popular. Check GitHub stars and ensure what you are using is of good quality and that others are happy with it. This is a good way to help avoid adding something malicious to your website also.
4 — Avoid writing highly nested rules
This is a pet hate of any experienced frontend developer. Seeing rules that are highly nested (i.e long with multiple levels of selectors) just makes the code difficult to read and really makes it a pain for anyone who wants to write a rule that gains precedence. This is a reason a lot of the time you see people using the infamous !important tag.
Remember for anything you write, the browser needs to figure out whether or not the rule should be applied and what exactly to apply it to.
5 — Avoid repeating yourself in CSS
Nothing is more frustrating for your future self or another dev when they need to uncheck 5 or so rules that are seemingly unnecessary in the dev console just to test the removal of a line of CSS.
Again, this is also causing more work for the browser than is really necessary. Not to mention the fact that it adds additional weight to the overall size of the page when downloading it.
6 — Avoid uses of !important unless you absolutely need it
This is a bit of a niche one but the use of !important tags usually means the code you are writing is poor. You see it used all the time just to get something working and really it shouldn’t be. Once it is used once, it is used again and again — in order to override the previous. Really by using this you are quite likely breaking the previous rule I mentioned above, writing code that you don’t really need to write.
A lot of websites I have seen you could literally strip back the CSS bit by bit and see very minimal changes to the site. What does this tell us? Well, that there’s a lot there that isn’t really needed. But the browser still needs to look at that styling and spend some of the users CPU compute time working out all of that pointlessness.
7 — Avoid overly complex HTML
High level of nesting in HTML is unlikely to have two much of a performance impact on most PCs / Smartphones but we should bear in mind like with anything. There is a limit and we can surely overstep the mark here. I would say a good rule is to just keep to what is absolutely necessary. Not just for performance reasons but for your own sanity going forward. Working out a CSS bug is a lot more difficult if you have unnecessary tags all over the place.
8 — Minify and merge
Where appropriate merge files to reduce the number of HTTP requests and minify files to reduce the overall page load. This can make quite a big difference on sites that contain a lot of CSS and JavaScript.
So there we have it. 8 Rules that can really set your website apart from the rest if you follow them religiously. Please add a comment if you have any other tips. I am sure there are plenty of others.
