Page Speed Bryan McQuade Richard Rabbat

Outline  What is Page Speed?  Inception of Page Speed  Cool features  Identify unused JavaScript and CSS  Pointing out inefficient CSS selectors  The activity panel  Demo

What is Page Speed  Firefox/Firebug add-on  Inspired by Yahoo’s YSlow  Open source, open code.google.com/p/page- speed  Optimizations done by the add-on when possible  Optimized images  Minified JavaScript  Page Speed tells you what JavaScript you should defer  Nice stats: 100k downloads in 10 days, 1000’s of tweets, 100’s of blog posts

Inception of Page Speed  Google teams developed their own optimizations independently  Best practices being relearned by new apps as we developed them  Scouring the Internet gave us great ideas  Implemented to make sure that as we developed our pages, we didn’t add regressions  Spent a lot of time carefully testing, crafting implementation  Proxies, browsers

Identifying unused JavaScript  x% of a site’s JavaScript loaded by a page that had not been invoked by the time the OnLoad handler completed  Why it’s good to fix  Scripts downloaded, parsed and executed before rendering a web page  When JavaScript is being processed, browser blocks all other resources from being downloaded  Complex web apps have sizeable latency impact when JavaScript not properly modularized

Pointing out Inefficient Selectors  Universal selectors are inefficient  Rules with descendant selectors such as body * {...}  Rules with child or adjacent selectors such as body > * {...}  Best to  avoid universal key selector  Make rules specific when possible  Get rid of redundant qualifiers, and others…  Refer to Hyatt’s excellent documentation “Writing efficient CSS…”

The Activity Panel  Records a timeline of network and local events  DNS, connection wait, connect, request wait, connected  Cache hit, data available, JavaScript parse and JavaScript execute  Coming soon  Paint events  Screen snapshots over time  Developers can do before/after analysis to see how their changes affect the activity stream

Activity Panel Screenshots  Shows where time is spent during page load.  Page load serialized on JavaScript download, parse, execution.  DNS lookups for JS add significant latency. news.bbc.co.uk gmail.com