Workshop - Optimizing and Debugging Web Sites

Dave Methvin
Dave Methvin
Sold Out!

This workshop will cover a variety of tools and techniques that you can use to optimize the performance of web sites and debug problems that arise, both during your own testing and ones reported by users. During the workshop there will be time for you to use the tools on web sites of your choosing, so come prepared with a computer and a list of sites that you would like to inspect. They don't need to be your own sites, you can tear apart a popular web site if you would like.

 
1 favorite thumb_down thumb_up 0 comments visibility_off  Remove from Watchlist visibility  Add to Watchlist
 

Outline/structure of the Session

Two major types of visible performance issues

  • Load time slowness (Blank page syndrome)
  • Jumpy behavior after load (Jank)
    • Jank from JavaScript
    • Jank from the browser
    • Jank topic is going to be covered in another talk at the conference
  • LIAR principle
  • Load
  • Idle
  • Animate
  • Response

The Myths (or perhaps Sad Truths) of Web Performance

  • "I can just follow these rules and it will be fast"
  • "Nice to have but we can't afford the developer time!"
  • "We'll have to rewrite the whole thing!"
  • "We already get our files from a CDN"
  • "I figured out the fastest way using jsperf.com"
  • "Can't really make that faster"
  • "There's no information about this stuff!"

Using online tools for analysis

  • Presentation
    • Deep dive - Use presentation
    • ESlint/JSHint
    • W3C HTML validator
    • WebPageTest
  • Exercise: Use WebPageTest to analyze a web page of your choice
  • Review and discussion of interesting group findings

Using browser dev tools

  • Presentation - Demonstration of tools in Chrome, IE, Firefox
  • Exercise: Find better way to do a simple example on jsbin
  • Exercise: Find performance or logic problems on a web site of your choice
  • Review and discussion of interesting group findings

Using browser APIs for real-time telemetry

  • Presentation - monitoring APIs such as navigationTiming and resourceTiming
  • window.onerror
  • proxying window.console methods
  • Commercial products
  • Exercise: Pull example from Github and explore
  • Review and discussion

Learning Outcome

At the end of the workshop, you will be able to use several tools to investigate and fix site performance and bugs. The workshop notes will contain links to additional material for deeper understanding.

Target Audience

web developers, quality assurance, test

schedule Submitted 2 years ago

Comments Subscribe to Comments

comment Comment on this Proposal