More Related Content Similar to High Performance Web Pages - 20 new best practices (20) More from Stoyan Stefanov (20) High Performance Web Pages - 20 new best practices6. The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88% 11. The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult 15. CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/ 32. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 35. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 46. No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page 47. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 50. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 53. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 56. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 65. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile 68. Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile