WebRTC

Joshua Marantz jmarantz@google.comGoogle Make the Web Fast team

10 Web Performance Optimization DisastersDon't let this happen to you!

Reverse ProxyAkamai, Limelight, Edgecast, Cloudflare, Torbit, YottaGoogle PageSpeed ServiceLinkedIn.com's ATS/pagespeed

Forward ProxyChrome bandwidth reductionOpera Mini, Amazon Silk

AppliancesRadware (Strangeloop)Riverbed (Aptimize)

Server PluginGoogle mod_pagespeed, ngx_pagespeed

WE-Amp IISpeed

Web Performance Optimization (WPO) Landscape aka FEO, WCO

● Chirp Internet S.R.L. Duncan Crombie● Akamai (Blaze I/O): Guy Podjarny● Limelight (Acceloweb): Jason Hofmann● Riverbed (Aptimize): Ed Robinson● Cloudflare: Matthew Prince● Yottaa: Coach Wei● Radware (Strangeloop): Kent Alstad● Google: Ilya Grigorik, Jan-Willem Maessen, Pat Meenan,

Matt Welsh, Shawn Ligocki, Matt Atterbury

Thank you!

Contributions & Acknowledgements

WPO's best days lie ahead

2.1 - 5.5+% of top 100k sites currently have WPO installed○ source: http://builtwith.com○ range depends on percent of Akamai & Limelight users with WPO enabled○ not all WPO solutions tracked by builtwith.com

3.6+% of all page views per month are WPO-accelerated○ source: WPO-organization-provided data○ not all organizations share their page-view data

WPO adoption is significant, but penetration is still low

Why use Web Performance Automation?

EASE OF MAINTENANCESimple development & deployment flowAbility to rapidly deploy changes to usersSupport all browsersFocus on content

Use automated tools!

SPEEDOptimize / Inline resources

Long cache lifetimesExploit features in modern browsers

Track latest WPO techniques

If it can be automated, it should be. Performance optimization is no different. By removing the burden from the team, you also enable a wider range of dynamic optimization.

What Can Possibly Go Wrong?

Avoid constructs that will break sites on optimization

Avoid patterns that make your site slow in ways WPO cannot (currently) help

Inform the WPO about your siteAuthorized DomainsWhitelist/Blacklist pathsConfigure System

Don't defeat your WPO Tool

Page Load Time is built into the browser, but not well-correlated with UX

WPT is the Tool Of The Gods but...Repeat 10x; check scatter plotsLook at Speed Index, bandwidthrepeat-view optimism, 1st-view pessimism

RUM data tells you the TruthCorrelate with business metrics

Google Analytics, etc

Disaster #10: Measuring what's easy to measure

Align Metrics with Business Goals & Optimize for them.When in Doubt, follow the Best Practices: [web best practices]

Optimizing for First View can penalize repeat-view & navigationCombining vs NavigationInlining vs Repeat View: the best of both worlds

Inline resources, insert into local_storage, drop cookieSkip inlined resources based on cookie

Disaster #9: Optimizing for First View Only

Align Metrics with Business Goals & Optimize for them.When in Doubt, follow the Best Practices: [web best practices]

The Root Of All Evil

Disaster #8: Premature/Misplaced Optimization

Use a WPO Tool to do things that WPO tools are good at

The Battle Of the Lazy Loaders

Before: <img src="1.gif" data-lazy-src="real_image.jpg"/>After: <img src="/mod_pagespeed_static/1.gif" data-lazy-src="real_image.jpg" pagespeed_lazy_src="1.gif" />

Disaster #8: Premature/Misplaced Optimization

Use a WPO Tool to do things that WPO tools are good at

Manually inserting base64 images???Exploit local storage on compatible browsers to avoid harming repeat-view/navigationFuture-Proof: SPDY/HTTP-2.0 server-push

Disaster #8: Premature/Misplaced Optimization

Use a WPO Tool to do things that WPO tools are good at

Manual Inlining

Excessive sharding harmful in HTTP, oversaturates the browser's connection to ISPAny sharding is harmful to SPDYUse WPO to do your sharding -- it can take into account SPDY, etc.

Disaster #8: Premature/Misplaced Optimization

Use a WPO Tool to do things that WPO tools are good at

Over Sharding

Intentional syntax errors to provoke browser-specific handling

Disaster #8: Premature/Misplaced Optimization

Use a WPO Tool to do things that WPO tools are good at

Stupid CSS

Tricks

WPO Solutions Want To Rewrite URLs. Why?http://modpagespeed.com/images/256x192wPuzzle.jpg.pagespeed.ic.axCBDOdaS8.webpSizing Images To Context, Cache Extension, Transcoding Images

JavaScript can Inspect and Mutate URLs. Do you Feel Lucky?For each img tag { img.src = replace_substring(img.src, ".jpg", "_hover.jpg"); }http://modpagespeed.com/images/256x192wPuzzle_hover.jpg.pagespeed.ic.axCBDOdaS8.webp

--> functionally correct(*)For each img tag { img.src = replace_tail(img.src, 4, "_hover.jpg"); }http://modpagespeed.com/images/256x192wPuzzle.jpg.pagespeed.ic.axCBDOdaS8._hover.jpg

--> 404 File Not Found

Disaster #7: Whose URL Is It Anyway?

Use 'id' or another attribute to help resynthesize image src

WPO Solutions Must Not Break HTTP WPO Solutions Must Not Retain Private Data WPO Should Not re-fetch & re-optimize

resources on every request

A Cache-Control of between 10 minutes and 1 hour is reasonable

If you set Cache-Control:private don't expect WPO tools to do anything

If you set Cache-Control:max-age=1 then don't expect much either

Disaster #6: The Tyranny of Cache-Control

Disaster #5: The Mendacity Of The Web

Disaster #5: The Mendacity Of The Web

Content-TypeMake it match your contentUse the correct extension if possible

Ensure that your content is labeled correctly

Disaster #5: The Mendacity Of The Web

Content-EncodingDon't say your content is gzipped if it isn't,or that it isn't if it is.

Ensure that your content is labeled correctly

Disaster #5: The Mendacity Of The Web

XHTMLMuch XHTML on the web isn'tConflicting/confusing sources: DOCTYPE, Content-Encoding, meta-tagsBeware of templating systems

Ensure that your content is labeled correctly

Disaster #4: JS Frameworks vs Vanilla JS

Try Vanilla JS first and resort to Frameworks only when they add significant value

Source: http://vanilla-js.com/

Disaster #4: JS Frameworks vs Vanilla JS

Try Vanilla JS first and resort to Frameworks only when they add significant value

Source: http://vanilla-js.com/

Disaster #3: Deferring Time To First Useful Paintwpt link

Disaster #3: Deferring Time To First Useful Paintwpt link

Disaster #3: Deferring Time To First Useful Paintwpt link

Disaster #3: Deferring Time To First Useful Paint

When Deferring JavaScript, review Ads and other critical JS-rendered content

PageSpeed: add attribute "pagespeed_no_defer"Limelight: add "Javascript Postponing Ignore"Akamai: async JS control-panel exclusionsCloudFlare: add attribute "data-cfasync=false"Radware: configuration / whitelist drivenRiverbed: Explicit/wildcarded exclusionYottaa: add Exception / QuickTune

wpt link

Disaster #2: External Resources before First ViewGoal: Display above-the-fold content in less than 1 second

wpt link

Disaster #2: External Resources before First ViewGoal: Display above-the-fold content in less than 1 second

Render Initial Page View in HTML markup. Add dynamics after onload with JS.

You cannot achieve 1 second renders with blocking round tripsJavaScript FrameworkWebFontsWeb Components (proposed standard)

wpt link

WPO is not (yet) one size fits allMPS "Core" defaults are safe but advanced filters offer much more speedup

defer_js, lazyload, critical_css, webp, lossy imagesPay attention to Domain Authorization, Cache Sizing, Fetching

What did you get out of the WPO tool?YSlow / PageSpeed Insights before/afterwww.webpagetest.orgRUM

Track WPO statistics & charts via vendor consoles

Keep site running fast & well as it evolves

Disaster #1: Install And Forget

Measure, Monitor, Repeat

SPDY --> HTTP 2.0Automatic Selection, WPO-initiated server-push

Better MetricsSpeed Index measured by browser in real time

Continue to push forward on WPT and RUM techniquesExtermination of Obsolete Browsers

If (client_is_old_browser) { leave_the_page_alone(); }Bring A Performance Perspective into Emerging Web Standards

WebFonts, Responsive Web Design, Web Components

WPO in the future

WPO will evolve (eventually) into a fully automated experience

10 Measuring only what's easy to measure 9 Optimizing for First View Only 8 Premature / Misplaced Optimization 7 Who's URL is it anyway? 6 The Tyranny of Cache-Control 5 The Mendacity of the Web 4 JavaScript Frameworks vs Vanilla JS 3 External Resources Before First View 2 Deferring Time To First Useful Paint 1 Install And Forget

10 WPO Disasters: Don't Let This Happen To You!