Page SpeedBryan McQuadeRichard 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 repository @ 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