After YSlow "A"

58 %
42 %
Information about After YSlow "A"

Published on June 27, 2008

Author: stubbornella

Source: slideshare.net

Description

YDN Tech talk given on 6/26/2008

After YSlow “A”: 20 more ideas for improving the user experience Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance

The sluggish Web 500 ms slower = 20% drop in traffic (Google) 400ms slower = 5-9% drop in full-page traffic (Yahoo!) * 100 ms slower = 1% drop in sales (Amazon) * Users leaving before the page finishes loading

500 ms slower = 20% drop in traffic (Google)

400ms slower = 5-9% drop in full-page traffic (Yahoo!) *

100 ms slower = 1% drop in sales (Amazon)

* Users leaving before the page finishes loading

Exceptional Performance at Yahoo! Quantify and improve the performance of all Yahoo! products worldwide Center of expertise Build tools, analyze data Gather, research, and evangelize best practices - internally and externally YSlow

Quantify and improve the performance of all Yahoo! products worldwide

Center of expertise

Build tools, analyze data

Gather, research, and evangelize best practices - internally and externally

YSlow

 

The Performance Golden Rule 80-90% of the end-user response time is spent on the front-end. Start there. Greater potential for improvement Simpler Proven to work

80-90% of the end-user response time is spent on the front-end. Start there.

Greater potential for improvement

Simpler

Proven to work

List of 14 best practices (updated) Make Fewer HTTP Requests Use a Content Delivery Network Add Expires header (or Cache-control) Gzip Components Put CSS at the Top Move Scripts to the Bottom (inline too) Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Minify JavaScript and CSS (inline too) Avoid Redirects Remove Duplicate Scripts Configure ETags Make AJAX Cacheable http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content

Make Fewer HTTP Requests

Use a Content Delivery Network

Add Expires header (or Cache-control)

Gzip Components

Put CSS at the Top

Move Scripts to the Bottom (inline too)

Avoid CSS Expressions

Make JavaScript and CSS External

Reduce DNS Lookups

Minify JavaScript and CSS (inline too)

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make AJAX Cacheable

After YSlow “A”: 20 more best practices

After YSlow "A"?

After YSlow "A"?

tag: server

Flush the buffer early Let the browser start fetching components while your backend is busy PHP function <?php flush(); ?> Best for busy backends / light frontends Case Study: Yahoo! Search Components download in parallel with HTML

Let the browser start fetching components while your backend is busy

PHP function <?php flush(); ?>

Best for busy backends / light frontends

Case Study: Yahoo! Search

tag: content

Post-load components Ask yourself: what's absolutely required in order to render the page initially? The rest can wait (drag and drop, animations, hidden content, images below the fold) JavaScript is ideal candidate for splitting YUI Image Loader YUI Get Utility

Ask yourself: what's absolutely required in order to render the page initially?

The rest can wait (drag and drop, animations, hidden content, images below the fold)

JavaScript is ideal candidate for splitting

YUI Image Loader

YUI Get Utility

Post-load components onload.js and onload.css Progressive enhancement Case study: yahoo.com

onload.js and onload.css

Progressive enhancement

Case study: yahoo.com

Preload components Preload items you'll need in the future: Unconditional preload (google.com loads a sprite onload) Conditional preload (search.yahoo.com after you type in the input box) Anticipated preload – preload in advance before launching a redesign

Preload items you'll need in the future:

Unconditional preload (google.com loads a sprite onload)

Conditional preload (search.yahoo.com after you type in the input box)

Anticipated preload – preload in advance before launching a redesign

Preload - Unconditional Example:

Example:

Preload - Conditional Example: search.yahoo.com

Example: search.yahoo.com

Preload - Anticipated “ The redesign is cool , but it’s so slow!” Of course it’s slow: 100% of page views are with an empty cache. New Feature or full redesign? Preload components before launch; users will already have a primed cache when you go live.

“ The redesign is cool , but it’s so slow!”

Of course it’s slow:

100% of page views are with an empty cache.

New Feature or full redesign?

Preload components before launch;

users will already have a primed cache when you go live.

Reduce DOM elements World's fastest page? about:blank ! Risks: More bytes to download Slower DOM access in JavaScript Semantically incorrect markup (like nested tables or abusing <div> s)

World's fastest page? about:blank !

Risks:

More bytes to download

Slower DOM access in JavaScript

Semantically incorrect markup (like nested tables or abusing <div> s)

Reduce DOM elements Recommendations: Use semantic markup Use YUI's reset.css, fonts.css, grids.css Easy to test, just type in Firebug’s console: document.getElementsByTagName('*').length yahoo.com is a busy page and still under 700 HTML elements

Recommendations:

Use semantic markup

Use YUI's reset.css, fonts.css, grids.css

Easy to test, just type in Firebug’s console:

document.getElementsByTagName('*').length

yahoo.com is a busy page and still under 700 HTML elements

tag: javascript

Develop smart event handlers

tag: css

Avoid filters – AlphaImageLoader Why is the AlphaImageLoader used? IE6 and earlier don’t natively support alpha transparency. This filter forces that support. Problems: Blocks rendering, freezes the browser Increased memory consumption Per element, not per image!

Why is the AlphaImageLoader used?

IE6 and earlier don’t natively support alpha transparency. This filter forces that support.

Problems:

Blocks rendering, freezes the browser

Increased memory consumption

Per element, not per image!

Avoid AlphaImageLoader Best Solution: Avoid completely, use gracefully degrading PNG8. Fallback: use underscore hack so as not to penalize IE7+ users. _filter

Best Solution: Avoid completely, use gracefully degrading PNG8.

Fallback: use underscore hack so as not to penalize IE7+ users.

_filter

Avoid filters Yahoo! Search saved 50-100ms for users of IE5&6

Yahoo! Search saved 50-100ms for users of IE5&6

tag: images

Hmm, images? Q: Is this really important? A: Let’s survey the global top 10 sites.

Q: Is this really important?

A: Let’s survey the

global top 10 sites.

What % of page weight is images? Average 45.6% 1 Yahoo! 29% 2 Google 75% 3 YouTube 62% 4 Live.com 64% 5 MSN 41% 6 MySpace 48% 7 Wikipedia 39% 8 Facebook 35% 9 Blogger 27% 10 Yahoo! JP 36%

GIF-to-PNG Average 20.42% savings LOSSLESS!

Crush PNG Average 16.05% savings LOSSLESS!

Strip JPEG metadata Average 11.85% savings LOSSLESS!

Optimize images Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png Crush all PNGs > pngcrush image.png –rem alla –reduce result.png Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Convert all GIFs to PNGs (and check if there’s a saving) > convert image.gif image.png

Crush all PNGs > pngcrush image.png –rem alla –reduce result.png

Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Case study: Google charts API 1 2 3

Case study: Google charts API 1 2 3 Original (707 colors)

Case study: Google charts API Original (1408 colors) Crushed (1408 colors) PNG8 (256 colors) 25% saving 55% saving (1000+ colors are lost but who can tell?)

Optimize images All sites can optimize images Which (former) presidential candidate had over 200K of useless image information sent over the wire for a single page?!

All sites can optimize images

Which (former) presidential candidate had over 200K of useless image information sent over the wire for a single page?!

Optimize CSS sprites Combine similar colors Keep color count low (<256) to fit in a PNG8 “ Be mobile-friendly” – don’t leave big gaps

Combine similar colors

Keep color count low (<256) to fit in a PNG8

“ Be mobile-friendly” – don’t leave big gaps

Optimize sprites Horizontal may be smaller

To sprite or not to sprite? 1. How many pages does your property have? 2. Is your site modular ? (hint: it should be!) 3. How much time can your team spend on site maintenance?

1. How many pages does your property have?

2. Is your site modular ? (hint: it should be!)

3. How much time can your team spend on site maintenance?

tag: mobile

Mobile Performance Research Reduce the size of each component to 25 Kb or less. http://yuiblog.com/blog/2008/02/06/iphone-cacheability/ iPhone

URLs – Exceptional Performance YUI blog http://yuiblog.com/blog/category/performance/ YDN (Yahoo Developer Network) http://developer.yahoo.com/performance/ YDN blog http://developer.yahoo.net/blog/archives/performance/ Mailing list (Yahoo! Group) http://tech.groups.yahoo.com/group/exceptional-performance/ Feedback http://developer.yahoo.com/yslow/feedback.html

YUI blog

http://yuiblog.com/blog/category/performance/

YDN (Yahoo Developer Network)

http://developer.yahoo.com/performance/

YDN blog

http://developer.yahoo.net/blog/archives/performance/

Mailing list (Yahoo! Group)

http://tech.groups.yahoo.com/group/exceptional-performance/

Feedback

http://developer.yahoo.com/yslow/feedback.html

URLs (contd.) &quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ &quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ YUI Image Loader ( http://developer.yahoo.com/yui/imageloader/ ) YUI Get ( http://developer.yahoo.com/yui/get/ ) YUI Compressor ( http://developer.yahoo.com/yui/compressor/ contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ ) JSMin ( http://www.crockford.com/javascript/jsmin.html ) &quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/ Yahoo! engineer Michael J. Radwin talk back in 2004 http://www.radwin.org/michael/talks/

&quot;When the Cookie Crumbles&quot; Tenni Theurer, Steve Souders

http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

&quot;Maximizing Parallel Downloads in the Carpool Lane&quot;, Tenni Theurer, Patty Chi

http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

YUI Image Loader ( http://developer.yahoo.com/yui/imageloader/ )

YUI Get ( http://developer.yahoo.com/yui/get/ )

YUI Compressor ( http://developer.yahoo.com/yui/compressor/ contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/ )

JSMin ( http://www.crockford.com/javascript/jsmin.html )

&quot;High-performance AJAX applications&quot; Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/

Yahoo! engineer Michael J. Radwin talk back in 2004

http://www.radwin.org/michael/talks/

Credits – thank you!

Take-home Focus on the front-end Optimize images Be relentlessly user focused Every feature has a cost Start early!

Focus on the front-end

Optimize images

Be relentlessly user focused

Every feature has a cost

Start early!

Thank you! Nicole Sullivan nicolesl@yahoo-inc.com http://www.stubbornella.org Stoyan Stefanov stoyan@yahoo-inc.com http://www.phpied.com http://developer.yahoo.com/performance

Add a comment

Related presentations

Related pages

Yahoo! Performance Presents: After YSlow “A ...

Already getting a YSlow "A"? Looking for more ways to make your pages faster and improve Roundtrip scores? This talk is for you! The latest Exceptional ...
Read more

Frequently Asked Questions | GTmetrix

Frequently Asked Questions. ... Why are my PageSpeed and YSlow ... Saving a URL means that the report and its history is kept from being purged after 30 ...
Read more

YSlow - Official Open Source Project Website

Official YSlow Open Source Project Website. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high ...
Read more

YSlow is broken after update to Firefox 36. · Issue #142 ...

The YSlow tab is selectable in Firebug and loads the YSlow application, but none of the buttons or links are responsive on the YSlow app itself.
Read more

YSlow tutorial Speed Up your website - Udinra

YSlow is an excellent tool.Fixing the issue reported by YSlow is the best method to improve your website performance.This step by step tutorial helps
Read more

Improving Site Performance with YSlow - New Relic blog

Improving Site Performance with YSlow. ... say social sharing widgets, until after your page loads then this rule becomes less of a concern.
Read more

YSlow :: Add-ons for Firefox

YSlow is available for Firefox as an add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ...
Read more

GTmetrix | Website Speed and Performance Optimization

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers ...
Read more

Yslow | LinkedIn

View 1603 Yslow posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

Best Practices for Speeding Up Your Web Site - Yahoo ...

Best Practices for Speeding Up Your Web Site. The Exceptional Performance team has identified a number of best practices for making web pages fast.
Read more