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 9 - Reduce DNS Lookups
- 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.
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.
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/
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)