<< Back to the blog

Web Performance




By @islamzatary

Web Performance

Web Performance optimization (WPO): Increasing the speed in which web pages are downloaded and displayed on the user's web browser.

Web Performance

Bounce rate & Page View
Bounce rate: It represents the percentage of visitors who enter the site and leave the site rather than continue viewing other pages within the same site.

Bounce rate is a measure of the performance or the effectiveness of a website in encouraging visitors to continue with their visit.

Web Performance

Why Important:
1. Decrease Bounce rate.
2. Increase Page View.
3. Reduce your costs (Bandwidth, storage usage).
4. Its direct effect on revenues(especially for eCommecrce site).
5. Search engines like Google take site speed into account when determining search rankings.
6. Mobile devices will soon out number desktop traffic.
7. It all comes down to better user experience.

Web Performance


80% Front end
20% Backend

Web Performance

Webpage Rendering
1. enter the url to the address bar.
2. a request will be sent to the DNS server.
3. DNS will route you to the real IP of the domain name (The DNS layer can help direct clients to different servers based on geographical location).
4. a request(with complete Http header) will be sent to the server.
5. nginx/apatche will try to match the url to its configuration and serve as an static page or get dynamic content (php,asp,db).

Web Performance

Webpage Rendering
6. a html will be sent back to browser with a complete Http response header.
7. browser will parse the DOM of html using its parser.
8. external resources(JS/CSS/images/flash/videos..) will be requested in sequence.
9. JS, it will be executed by JS engine and CSS, it will be rendered by CSS engine and HTML's display will be adjusted based on the CSS.
10. if there's an iframe in the DOM, then a separate same process will be executed.
11. if response cacheable, response is stored in cache.

Web Performance

How do browsers render a web page(browser actions)
1. The DOM (Document Object Model) is formed.
2. Styles are loaded and parsed (CSSOM ).
3. a rendering tree is created. a set of object to be renderer (webkit => renderer, gecko => frame), Render tree reflects the DOM structure except for invisible elements(head and display none element), Each text string is represented in the rendering tree as a separate renderer, so the render tree describes the visual representation of a DOM.

Web Performance

4. For each render tree element, its coordinates are calculated, which is called "layout".
5. paining.

Web Performance

Repaint: changing element styles(color,border,visibility), so the browser just repaints the element again with the new styles without affect the position.
Reflow(relayout): changes affect document contents or structure, or element position.
Reflow triggered by:
1. DOM manipulation (element addition, deletion, altering, or changing element order);
2. Contents changes, including text changes in form fields;

Web Performance

3. Calculation or altering of CSS properties;
4. Adding or removing style sheets;
5. Changing the "class" attribute;
6. Browser window manipulation (resizing, scrolling);
7. Pseudo-class activation (:hover).
Example

Web Performance

Practical advice on optimization:
1. Create valid HTML and CSS, Styles should be included into head, and scripts appended to the end of the body tag.
2. Try to simplify and optimize CSS selectors.
3. In your scripts, minimize DOM manipulation whenever possible. Cache everything, including properties and object.

Web Performance

CSS selectors rank according to their performance:
1. Identificator: #id
2. Class: .class
3. Tag: div
4. Adjacent sibling selector: a + i
5. Parent selector: ul > li
6. Universal selector: *
7. Attribute selector: input[type="text"]
8. Pseudoclasses and pseudoelements: a:hover

Web Performance

Yahoo Rules and Google Rules:
1. Minimize HTTP Requests.
2. Use a Content Delivery Network.
3. Add an Expires or a Cache-Control Header.
4. Gzip Components.
5. Put Stylesheets at the Top.
6. Put Scripts at the Bottom.
7. Avoid CSS Expressions.
8. Make JavaScript and CSS External(Yahoo).
9. Reduce DNS Lookups.

Web Performance

Yahoo Rules and Google Rules:
10. Minify JavaScript and CSS.
11. Make Ajax Cacheable.
12. Reduce the Number of DOM Elements.
13. Split Components Across Domains.
14. Minimize the Number of iframes.
15. Reduce Cookie Size.
16. Choose link over @import.
17. Optimize Images.
18. Optimize CSS Sprites.

Web Performance

Yahoo Rules and Google Rules:
19. Don't Scale Images in HTML.
20. Use asynchronous scripts.

Web Performance

Ready VS Load
$(document).ready(function() {});
it runs when the DOM is ready.

$(window).load(function() {});
executing code when a page is rendered or whole content is loaded(calculated image dimension).

Web Performance

Tools
1. Web Page Test
2. Google Insight
3. Yahoo Rules from Firebug extension.

Web Performance

References:
1. http://www.nngroup.com/articles/website-response-times/
2. http://www.stevesouders.com/
3. http://taligarsiel.com/Projects/howbrowserswork1.htm
4. http://frontendbabel.info/articles/webpage-rendering-101/
5. http://learn.jquery.com/performance/optimize-selectors/
6. https://developer.yahoo.com/performance/rules.html
7. https://developers.google.com/speed/docs/insights/rules

Web Performance




Practical



Wrapping up







<< Back to the blog

by @islamzatary