1 / 8

Page Speed

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

yael
Télécharger la présentation

Page Speed

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Page Speed Bryan McQuade Richard Rabbat

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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…”

  7. 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

  8. 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

More Related