Web Performance is all about making website overall experience faster.
- How Browser works
- Browser is single threaded
- Webpage is downloaded in Chunks. Everytime a Chunk is downloaded it does following operations
- Interprets and creates DOM.
- Layouting - Layout of various elements with their dimensions is constructed by browser. This happens in memory.
- Rendering - Displaying of webpage in pixels.
- Async Queue
- This is responsible for Asyncronous requests
- Ajax calls, set time intervals, set timeout
- These are executed when browser has noting to do
- Website speed test
- tools.pingdom.com
- googles pagespeed
- webpagetest.org
- Bandwidth Optimization - Website network optimization
- Web Caching is very important for Bandwidth optimization. It is instructing browser to store files temporarily and use for a while. And not to download every time from internet. For more details refer to qnimate.com/all-about-web-caching
- CDN - Content delivery network makes the bandwidth of the website very very faster.
- Compression Resources decreases the size of resources. One can compress using checkgzipcompression.com. Browser uncompressess the compressed resources before using it.
- External JS and Css files mentioned in <head> of html are downloaded before proceeding with display of the page. So always move js & css references to the end of the file (after </body> tag).
- Also, it is a good practice to combine multiple CSS into single Css. Same with js as well. This is to reduce Connection initialization to server which is expensive. This reduces bandwidth of the network connection.
- Minifying resources
- Use of Cookies. Cookies are used to store information on users computer. Use session cookies rather than regular cookies so that the information is stored on server and only ID is transferred between user and server.
- Dealing with Images - How to make images load faster
- If website is not too much image oriented(nice to have only), decrease the quality of images. In this case the size decreases and so the network latency decreases.
- imageoptimizer.net
- Image Sprite is collection of images into a single Image. A webpage with many images can take a long time to load and generates multiple server requests. Images sprite reduces number of server requests and saves bandwidth
- Data URIs
- Responsive Images - Resize the image width according to the width of image container.
- Render Optimization
- Faster Animations
- Memory Optimization
- Less memory consumption, less primary memory consumption. Everyone has limited amount of RAM.
- HTML never supported multi threading. Programmers use setTimeout or setInterval to make the application behave like multithreaded applicaiton. HTML5 provides builtin API to support multi threading.
- HTML5 Web worker is a java script thread(or javascript file) that runs concurrently with the main thread.
- Do not create global variables. These are not destroyed by Garbage collector.
- Declare variables within functions, so that, the object will be collected when the function scope is ended.
- requestAnimationFrame - This is supported by modern browsers. Do not use setInterval and setTimeout.
- Timers callback rate is same even if browser is running in background state. But requestAnimationFrame slows down the rate when browser is in background state.
- CSS3 is preferred as it can be understood by cpu directly. Javascript should be interpreted by browser and then by cpu
- We can ask browser to preload resource during safe time using <link> element with prefetch relation
- <link rel="prefetch" href="qunimate.png">
- These resources are fetched asynchronously during safe time by the browser
- Same can be acheived with Link: http response header
- Link: <qnimate.png>; rel=prefetch
- Same can be acheived with meta tag
- <meta http-equiv="Link" content="<qnimate.png>; rel=prefetch">
- Load only when user is on that view port
