1. Definition of Web performance. 2. Why Important. 3. Webpage Rendering. 4. Browsers render. 5. Web Performance Rules. 6. Web Performance Tools. 7. Research

1. Web performance
By @islamzatary

2. Definition of Web
performance:
speed in which web pages are downloaded and
displayed on the user's web browser.

3. 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.
8. Good for SEO.

4. 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).

5. Webpage Rendering #2
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.

6. Webpage Rendering #3

7. 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.

8. DOM Tree

9. How do browsers render a
web page(browser actions)

10. Elements Affect on Web
Performance
1.HTML.
2.CSS.
3.JS.
4.Images.
5.Network.

11. Web Performance Rules
1.Yahoo Rules.
https://developer.yahoo.com/performance/rules.
2.Google Rules.
https://developers.google.com/speed/docs/insights/rules

12. Web Performance Tools
1.Extensions:
a. ySlow (Firefox).
b. PageSpeed (Firefox).
c. Firebug (Firefox).
d. HTTPWatch (Firefox & IE).
e. Developer tool (Chrome)
2.WebSite:
a. PageSpeed
b. Webpage Test

13. Case Study
1. http://www.whatisblik.com/
2.http://www.craigslist.org

14. Research
1 second delay in page load time equals 11% fewer
page views, a 16% decrease in customer
Satisfaction and 7% loss in conversions.

15. References
● http://blog.agilitycms.com/content-managers/what-s-more-important-page-
views-or-unique-visitors
● http://www.brickmarketing.com/define-conversion-rate.htm
● https://www.sitepoint.com/complete-guide-reducing-page-weight/
● http://www.dtelepathy.com/blog/inspiration/14-beautiful-content-heavy-
websites-for-inspiration
● http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
● http://yslow.org/user-guide/
● http://www.slideshare.net/sthair/web-performance-101-ldn-webperf-steve-
thair

16. The End
By @islamzatary