High Performance Websites

Question: How do you make a website fast? That loads faster, responds faster, and that makes the user feel like the application is fast and responsive. Especially one with lots of dynamically generated content and rich interactions.

Answer

To make a website fast, one has to follow good practices in the frontend and ensure simultaneously that the backend is fast and robust and doesn't take much time to prepare your html document and send back when an Http request comes to the server.

Let's talk first about the frontend. The following rules are directly taken from the bookHigh Performance Web Sites.

• Rule 1 - Make Fewer HTTP Requests
• Rule 2 - Use a Content Delivery Network
• Rule 3 - Add an Expires Header
• Rule 4 - Gzip Components
• Rule 5 - Put Stylesheets at the Top
• Rule 6 - Put Scripts at the Bottom
• Rule 7 - Avoid CSS Expressions
• Rule 8 - Make JavaScript and CSS External
• Rule 9 - Reduce DNS Lookups
• Rule 10 - Minify JavaScript
• Rule 11 - Avoid Redirects
• Rule 12 - Remove Duplicate Scripts
• Rule 13 - Configure ETags
• Rule 14 - Make AJAX Cacheable

You should definitely read the two books High Performance Web Sites and 
Even Faster Web Sites by Steve Souders to know how things can be optimized at the browser level and significantly speed up.

Needless to say there are lots of Javascript and AJAX code thrown in to make the user feel like everything is happening very fast.

For example, suppose you have a page which shows comments on a post. There can be hundreds of comment and if you send them at once from the server, it is definitely going to take a lot of time. Why not fetch 10 comments in the beginning, and then fetch next 10 when the user scrolls down and so on. This is what every fast and good website does today. This technique is called Lazy Scrolling.

Now suppose the webpage is composed of two main parts - right and left. In right you show ads or suggested contents which is not very important. And in the left you show the main content for which the user is looking forward to load. Now you don't want that all the parts of the page are sent in one batch from the server and are loaded simultaneously - because that will obviously mean more time spent in computation at the server and more time in transferring the data over the network, and that means more time the browser is idle waiting for the Http response. The solution is to divide your page into units and load only the important ones at first, and then load the remaining parts asynchronously via Javascript.

Facebook, Quora and many others do the same. Read this post to understand how facebook has done pipelining of pages for high performace  -https://www.facebook.com/note.ph.... AFAIK, Quora has it's own implementation of similar technology. You can observe that the contents in the right panel load after the main content in the left panel on Quora.

There are many such good tricks and techniques and some are described in the two books I have mentioned above.


Now what we can do in the backend to speed up. 

The first and most important thing is to use Memcached - http://memcached.org/. The idea is to store as much data in memory as possible and reduce the number of database calls. It's integration is super smooth in any application. And it improves the speed a lot!

Design the database intelligently. If you feel something is throttling down and can be improved, don't hesitate to change the architecture. Over time as an application/product evolves, it is often required to do so. Importing the data to the new structure is seldom a big hassle with python/perl scripts.

The other points are often centered around writing robust code and using C/C++ where we need to operate very fast on large data sets. Some hard algorithms may also need to be implemented in the way, for example when searching for relevant feeds/stories and showing them to the user.

The things get even more complicated as we move to real time updates, live streaming, etc. Then the frontend and backend are both very robust and work coherently to give an awesome result. That said you might also want to take a look at node.js - http://nodejs.org/ and Meteor - http://meteor.com/.

Undoubtedly, the technology never stops evolving and the smart people are always there trying to improve the speed by cutting off just 100ms more. We need to keep a watch on the new tools and learn the best from them.

P.S. Originally posted on Quora(Link)