Most of my time developing I had to focus on saving memory and making sure the algorithm I used was finely tuned for performance. This usually meant that even if I had to sit for hours scribbling things and trying to find a faster solution to what I started with, I would have to save time and memory because that’s what we as programmers really work with.
I started to learn how to program using C and as soon as I got familiarized with C data types, I found simple ways to efficiency like using
short int instead of
a int (as long as I was sure I would never need to put anything larger than it could hold ) because you save so much more memory and as I made the transition to web development I brought the same type of thinking with me.
Lets face it most of us try and tweak performance on the server side or try and enhance database performance but in reality less than 10 — 20 % of time is spent on getting the HTML document from the server to your browser.
So, if you want to improve the performance of your website you have to think of the other 80 — 90% of the end user experience.
What is that 80 — 90 % spent on?
How can it be reduced?
Well, let's find out!
Page load time of DuckDuckGo.com
In order to find out what we can improve, we have to figure out what the user actually spends his/ her time waiting for.
In the image above, the initial request was for the HTML page and as soon it is parsed we can see that the browser goes for the components of the page.
Rule 0x001: Make Fewer HTTP Requests
A really simple way to improve response time is to reduce the number of components that are being downloaded like scripts, Cascading Style Sheets (CSS) and, images.
Instead of downloading multiple images for icons and such, use CSS sprites to put them all together and use one
GET request to pull them all at once.
Rule 0x002: Use A CDN
Use a CDN (Content Delivery Network) to bring content closer geographically to your users.
A CDN is a network of servers geographically dispersed that store your website's content so whenever a user requests something from your page the browser gets the content from the server closest geographically to them, cutting response times by a huge amount!
Rule 0x003: Add An Expires Header
Browsers (and proxies) use a cache to reduce the number of HTTP requests and decrease the size of HTTP responses, thus making web pages load faster.
A web server uses the Expires header to tell the web client that it can use the current copy of a component until the specified time.
The HTTP specification summarizes this header as “the date/time after which the response is considered stale.”
It is sent in the HTTP response.
Rule 0x004: gzip Components
Since HTTP 1.1, web browsers send an Accept-Encoding header in the HTTP request which is basically the browser telling the server
“Hey! I can handle gzip and deflate compression so if you can please do send me compressed contents!”
Response and Request headers
gzip is currently and possibly the best for compression. It was developed by the GNU guys and standardized by the RFC 1952.
What Kind of saving will you have from gzipping your content?
You’ll save up to 70% of your users waiting time by using this method and that is not something you should deny your users.
Rule 0x005: Stylesheets At The Top
Save yourself from the flash of unstyled content and the flashing light of doomsday and always add your CSS as the first thing after the
<title> tag. Doing this saves you so many possible problems.
Rule 0x006: Scripts At The Bottom
The best place to put scripts is at the bottom of the page.
The page contents aren’t blocked from rendering, and the viewable components in the page are downloaded as early as possible making it appear to the user that everything is A Okay.
If you do want even more performance you could spend weeks redesigning your database or app infrastructure but using these really simple rules, will make your end users happier.
Random Thoughts | Aaron Tait