10 Web Performance Optimization Disasters. WebRTC. Don't let this happen to you! Google Make the Web Fast team

Transcription

1 10 Web Performance Optimization Disasters WebRTC Don't let this happen to you! Joshua Marantz Google Make the Web Fast team

2 Web Performance Optimization (WPO) Landscape aka FEO, WCO Reverse Proxy Akamai, Limelight, Edgecast, Cloudflare, Torbit, Yotta Google PageSpeed Service LinkedIn.com's ATS/pagespeed Forward Proxy Chrome bandwidth reduction Opera Mini, Amazon Silk Appliances Radware (Strangeloop) Riverbed (Aptimize) Server Plugin Google mod_pagespeed, ngx_pagespeed WE-Amp IISpeed

3 Contributions & Acknowledgements Chirp Internet S.R.L. Akamai (Blaze I/O): Limelight (Acceloweb): Riverbed (Aptimize): Cloudflare: Yottaa: Radware (Strangeloop): Google: Thank you! Duncan Crombie Guy Podjarny Jason Hofmann Ed Robinson Matthew Prince Coach Wei Kent Alstad Ilya Grigorik, Jan-Willem Maessen, Pat Meenan, Matt Welsh, Shawn Ligocki, Matt Atterbury

4 WPO's best days lie ahead % of top 100k sites currently have WPO installed source: 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

5 Why use Web Performance Automation? SPEED Optimize / Inline resources Long cache lifetimes Exploit features in modern browsers Track latest WPO techniques EASE OF MAINTENANCE Simple development & deployment flow Ability to rapidly deploy changes to users Support all browsers Focus on content What Can Possibly Go Wrong? Use automated tools! 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.

6 Don't defeat your WPO Tool 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 site Authorized Domains Whitelist/Blacklist paths Configure System

7 Disaster #10: Measuring what's easy to measure 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 plots Look at Speed Index, bandwidth repeat-view optimism, 1st-view pessimism RUM data tells you the Truth Correlate with business metrics Google Analytics, etc Align Metrics with Business Goals & Optimize for them. When in Doubt, follow the Best Practices: [web best practices]

8 Disaster #9: Optimizing for First View Only Optimizing for First View can penalize repeat-view & navigation Combining vs Navigation Inlining vs Repeat View: the best of both worlds Inline resources, insert into local_storage, drop cookie Skip inlined resources based on cookie Align Metrics with Business Goals & Optimize for them. When in Doubt, follow the Best Practices: [web best practices]

9 Disaster #8: Premature/Misplaced Optimization The Root Of All Evil Use a WPO Tool to do things that WPO tools are good at

10 Disaster #8: Premature/Misplaced Optimization 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" /> Use a WPO Tool to do things that WPO tools are good at

11 Disaster #8: Premature/Misplaced Optimization Manual Inlining Manually inserting base64 images??? Exploit local storage on compatible browsers to avoid harming repeat-view/navigation Future-Proof: SPDY/HTTP-2.0 server-push Use a WPO Tool to do things that WPO tools are good at

12 Disaster #8: Premature/Misplaced Optimization Over Sharding Excessive sharding harmful in HTTP, oversaturates the browser's connection to ISP Any sharding is harmful to SPDY Use WPO to do your sharding -- it can take into account SPDY, etc. Use a WPO Tool to do things that WPO tools are good at

13 Disaster #8: Premature/Misplaced Optimization Stupid CSS Tricks Intentional syntax errors to provoke browserspecific handling Use a WPO Tool to do things that WPO tools are good at

14 Disaster #7: Whose URL Is It Anyway? WPO Solutions Want To Rewrite URLs. Why? Sizing 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"); } --> functionally correct(*) For each img tag { img.src = replace_tail(img.src, 4, "_hover.jpg"); } --> 404 File Not Found Use 'id' or another attribute to help resynthesize image src

15 Disaster #6: The Tyranny of Cache-Control WPO Solutions Must Not Break HTTP WPO Solutions Must Not Retain Private Data WPO Should Not re-fetch & re-optimize resources on every request 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 A Cache-Control of between 10 minutes and 1 hour is reasonable

16 Disaster #5: The Mendacity Of The Web

17 Disaster #5: The Mendacity Of The Web Content-Type Make it match your content Use the correct extension if possible Ensure that your content is labeled correctly

18 Disaster #5: The Mendacity Of The Web Content-Encoding Don'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

19 Disaster #5: The Mendacity Of The Web XHTML Much XHTML on the web isn't Conflicting/confusing sources: DOCTYPE, Content-Encoding, meta-tags Beware of templating systems Ensure that your content is labeled correctly

20 Disaster #4: JS Frameworks vs Vanilla JS Source: Try Vanilla JS first and resort to Frameworks only when they add significant value

21 Disaster #4: JS Frameworks vs Vanilla JS Source: Try Vanilla JS first and resort to Frameworks only when they add significant value

22 wpt link Disaster #3: Deferring Time To First Useful Paint

23 wpt link Disaster #3: Deferring Time To First Useful Paint

24 wpt link Disaster #3: Deferring Time To First Useful Paint

25 wpt link Disaster #3: Deferring Time To First Useful Paint PageSpeed: Limelight: Akamai: CloudFlare: Radware: Riverbed: Yottaa: add attribute "pagespeed_no_defer" add "Javascript Postponing Ignore" async JS control-panel exclusions add attribute "data-cfasync=false" configuration / whitelist driven Explicit/wildcarded exclusion add Exception / QuickTune When Deferring JavaScript, review Ads and other critical JS-rendered content

26 Disaster #2: External Resources before First View Goal: Display above-the-fold content in less than 1 second wpt link

27 Disaster #2: External Resources before First View wpt link Goal: Display above-the-fold content in less than 1 second You cannot achieve 1 second renders with blocking round trips JavaScript Framework WebFonts Web Components (proposed standard) Render Initial Page View in HTML markup. Add dynamics after onload with JS.

28 Disaster #1: Install And Forget WPO is not (yet) one size fits all MPS "Core" defaults are safe but advanced filters offer much more speedup defer_js, lazyload, critical_css, webp, lossy images Pay attention to Domain Authorization, Cache Sizing, Fetching What did you get out of the WPO tool? YSlow / PageSpeed Insights before/after RUM Track WPO statistics & charts via vendor consoles Keep site running fast & well as it evolves Measure, Monitor, Repeat

29 WPO in the future SPDY --> HTTP 2.0 Automatic Selection, WPO-initiated server-push Better Metrics Speed Index measured by browser in real time Continue to push forward on WPT and RUM techniques Extermination 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 will evolve (eventually) into a fully automated experience

30 10 WPO Disasters: Don't Let This Happen To You! Measuring only what's easy to measure Optimizing for First View Only Premature / Misplaced Optimization Who's URL is it anyway? The Tyranny of Cache-Control The Mendacity of the Web JavaScript Frameworks vs Vanilla JS External Resources Before First View Deferring Time To First Useful Paint Install And Forget