Drop Your Website Load Times Down A Waterfall
@zoompf
@cosjef
(In No Way) Certified Experts
Billy Hoffman
Founder, CTO @ Zoompf
billy@zoompf.com
@zoompf
Jeff Costa
Sales Engineer @ Akamai
jecosta@akamai.com
@cosjef
What is a Waterfall?
• How to read one?
• How to create
one?
Audience Waterfalls
• Fields to use
• Advanced options
• Video
Well-Known
Waterfalls
• Review Pizza Hut
waterfall diagram
Wicked Waterfalls
• Waterfall anti-
patterns
• Don’t do these
things.
Agenda
The Plan
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Breaking Down A Web Request
What’s the Front End?
Back-end
Time to generate and send HTML
Front-end
Everything that follows
Important Timers
Start Render OnLoad Event
Avoid data theft and downtime by extending the
security perimeter outside the data-center and
protect from increasing frequency, scale and
sophistication of web attacks.
Problems
Latency: every request/response
round trip incurs a latency penalty.
Payload: page size increasing;
last mile bandwidth varies wildly.
Rendering: browser rendering and
parsing takes time.
Reduce Page Weight
Make Fewer Round Trips
“The fastest request is the one you don't have to
make.”
-Steve Souders
“Every HTTP request you make should be well
justified, and not taken lightly.”
-Jeff Costa
Speed Browser Rendering
What Happens to the Waterfall?
SSL Latency
Errors Hurt You Twice
THANK YOU! Q?
@zoompf
@cosjef
Billy Hoffman
billy@zoompf.com
Jeff Costa
costa.jeff@akamai.com

Drop Your Website Load Times Down a Waterfall

  • 1.
    Drop Your WebsiteLoad Times Down A Waterfall @zoompf @cosjef
  • 2.
    (In No Way)Certified Experts Billy Hoffman Founder, CTO @ Zoompf billy@zoompf.com @zoompf Jeff Costa Sales Engineer @ Akamai jecosta@akamai.com @cosjef
  • 6.
    What is aWaterfall? • How to read one? • How to create one? Audience Waterfalls • Fields to use • Advanced options • Video Well-Known Waterfalls • Review Pizza Hut waterfall diagram Wicked Waterfalls • Waterfall anti- patterns • Don’t do these things. Agenda The Plan
  • 7.
    Avoid data theftand downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Breaking Down A Web Request
  • 8.
    What’s the FrontEnd? Back-end Time to generate and send HTML Front-end Everything that follows
  • 9.
  • 10.
    Avoid data theftand downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Problems Latency: every request/response round trip incurs a latency penalty. Payload: page size increasing; last mile bandwidth varies wildly. Rendering: browser rendering and parsing takes time.
  • 11.
  • 12.
  • 13.
    “The fastest requestis the one you don't have to make.” -Steve Souders “Every HTTP request you make should be well justified, and not taken lightly.” -Jeff Costa
  • 14.
  • 15.
    What Happens tothe Waterfall?
  • 16.
  • 17.
  • 19.
    THANK YOU! Q? @zoompf @cosjef BillyHoffman billy@zoompf.com Jeff Costa costa.jeff@akamai.com

Editor's Notes

  • #4 Igauzu Falls - Brazil
  • #5 Niagara Falls
  • #6 Niagara Falls
  • #8 Made up of the socket connection time, the time taken to send the HTTP request, and the time taken to get the first byte of the page. TTFB is everything after the HTTP request - the duration from the user making an HTTP request to the first byte of the page being received by the browser.
  • #10 Start Render: point of time when the browser starts to render and display the content - browser has enough info to start drawing the page.OnLoad Event: user perceives page is ready and can begin interacting with itDocument Complete:point of time when the browser finishes loading all content except objects that are triggered by Javascript execution
  • #11 Page size is increasing due to images, analytics, ads, social sharing.Delivering static content to the browser consumes >85% of page load time. Staticcontent is the biggest cause of poor performance in modern web applications.
  • #12 FEO techniques are designed to reduce page weight without changing visual quality or site functionality. Smaller stuff
  • #13 “Less Stuff”
  • #15 “Build It Faster”