Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web performance

327 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web performance

  1. 1. Web performance By @islamzatary
  2. 2. Definition of Web performance: speed in which web pages are downloaded and displayed on the user's web browser.
  3. 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. 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. 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. 6. Webpage Rendering #3
  7. 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. 8. DOM Tree
  9. 9. How do browsers render a web page(browser actions)
  10. 10. Elements Affect on Web Performance 1.HTML. 2.CSS. 3.JS. 4.Images. 5.Network.
  11. 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. 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. 13. Case Study 1. http://www.whatisblik.com/ 2.http://www.craigslist.org
  14. 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. 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. 16. The End By @islamzatary

×