6 Rules To Help Improve The End User Experience Of Your Web Development Projects

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

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.

In this case, the browser cache was empty because it was the first time visiting the site, so all content had to be downloaded. The browser downloaded about 749.19KB. About 3% of time was used to get the HTML document so the user spends most of his time waiting for the pages components to download, like the Cascading Style Sheets and JavaScript files and the gaps are the time an element took to be parsed.

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!

A good company to help you with that is CloudFlare and MaxCDN.

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

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.

Deflate is another option but you are way better off just using gzipped content. Keep in mind that gzipping is a server side job and that can steal precious CPU cycles from the server but you're safe if you choose the right content to gzip, like your JavaScript and CSS, actually any text file should be gzipped like JSON and XML if you use those.

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.

Well, I guess there are so many other things that can be done like externalising your JavaScript and CSS but I believe using the tips I pointed above will help your front end performance by a huge percentage.

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

Comments