Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Practical intro to web performance
Riviera Dev 2019
Jakub Gieryluk
Agenda
2
Network performance
❖ Latency
❖ Waterfall
❖ Visual comparison tools
Runtime performance / JavaScript
❖ Bundle ana...
Why performance matters, for users
3
Money
• 💲 Users with limited data plans
• 🚆Users commuting
• ✈ Users in roaming
• Dig...
Why performance matters, for CEOs
4
https://wpostats.com
QUICK START
5
PageSpeed Insights:
Lighthouse Online
+ CrUX
https://www.webpagetest.org/
https://developers.google.com/spee...
Network
performance
6
7
Bandwidth =
diameter
of the pipe
Latency = length of the pipe
Latency
NETWORK PERF / LATENCY
9
Check
latency
around
the world
https://tools.keycdn.com/performance
Example:
Not geo-distributed ...
10
NETWORK PERF / LATENCY
11
Check
latency
around
the world
https://tools.keycdn.com/performance
Example:
Geo-distributed sta...
12
NETWORK PERFORMANCE / LATENCY
Mobile latency
https://twitter.com/katiehempenius/status/1040434962472873984
WebPageTest
13
NETWORK PERFORMANCE
14
WebPageTest
https://www.webpagetest.org/
SWISS-ARMY KNIFE TOOLS
15
WebPageTest: resources review
The waterfall: basics
16
using WebPageTest
NETWORK PERFORMANCE / WATERFALL BASICS
17
The waterfall
HTTP
requests
Time
NETWORK PERFORMANCE / WATERFALL BASICS
18
Waterfall anti-patterns: (unused) massive
subresource
https://twitter.com/dougsi...
NETWORK PERFORMANCE / WATERFALL BASICS
19
Waterfall anti-patterns: a lot of red
https://calendar.perfplanet.com/2013/web-p...
NETWORK PERFORMANCE / WATERFALL BASICS
20
Waterfall anti-patterns: a lot of yellow
https://calendar.perfplanet.com/2013/we...
The waterfall in depth
21
yBryanGoffonUnsplash
using WebPageTest
WATERFALL
22
Life of a single HTTP request
https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
WATERFALL
23
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
24
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
25
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
26
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
27
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
28
Connection View
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run...
WATERFALL
29
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WATERFALL
30
RivieraDEV
waterfall
analysis
https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af87...
WebPageTest:
visual tools
31
WATERFALL
32
Waterfall anti-patterns: blocking resources
https://calendar.perfplanet.com/2013/web-performance-waterfalls-f...
VISUAL TOOLS / SPOF
33
Third-party
blocking
resources
Let’s try to put in place
some chaos…
SPOF = Single Point of
Failure...
VISUAL TOOLS / SPOF
34
Third-party blocking resources: filmstrip
• It takes the browser
30seconds to
abandon the
blackhole...
VISUAL TOOLS / SPOF
35
Third-party blocking resources: summary
• Prefer async third parties than synchronous ones; load th...
VISUAL TOOLS / COMPARING TESTS
36
Filmstrip comparison
Tip: always run as a logged-in user, to not lose the test ID
VISUAL TOOLS / COMPARING TESTS
37
Video view comparison
https://www.webpagetest.org/video/view.php?id=150512_a1702c187f12d...
Agenda
38
Network performance
❖ Latency
❖ Waterfall
❖ Visual comparison tools
Runtime performance / JavaScript
❖ Bundle an...
Runtime
performance
39
PhotobyGarettMizunakaonUnsplash
Bundle
analysis &
code splitting
40
Webpack bundle tools
BUNDLE ANALYSIS
41https://webpack.github.io/analyse/
webpack-bundle-analyzer
https://chrisbateman.git...
Bundle tools: Bundle Buddy
BUNDLE ANALYSIS
42
https://github.com/samccone/bundle-buddy
Find duplicated code across the chu...
Dependencies
43
Bundlephobia – check size of npm packages
DEPENDENCIES
44
https://bundlephobia.com/
Bundlephobia
DEPENDENCIES
45
• Check for regressions before
updating a dependency
• Contrary, maybe there’s a new,
smaller...
Import Cost – vscode extension
DEPENDENCIES
46
Third-parties
47https://requestmap.herokuapp.com/render/190418_PQ_4b776cc76ed8388b44883c5ee3147a23/
requestmap.herokuapp.c...
THIRD-PARTIES
48
Dealing with third parties
• Visualize:
• http://requestmap.herokuapp.com/
• Compare impact of different ...
Chrome
DevTools
performance
panel
49
CHROME DEVTOOLS
50
Performance panel
https://www.webpagetest.org/
CHROME DEVTOOLS
51
Performance panel
https://www.webpagetest.org/
CHROME DEVTOOLS / PERFORMANCE PANEL
52
User Timing API
performance.mark("startMark")
performance.mark("endMark")
performan...
CHROME DEVTOOLS
53
Performance panel
What do the colors mean?
Golden = JS
Dark violet = layout
Dark green = render
All els...
CHROME DEVTOOLS / PERFORMANCE PANEL
54
JavaScript flame chart
Zoom in and look for repeated patterns
Mr. Obvious Tip:
Disa...
CHROME DEVTOOLS / PERFORMANCE PANEL
55
JavaScript flame chart
https://www.webpagetest.org/Reading the same cookie over and...
CHROME DEVTOOLS / PERFORMANCE PANEL
56
Forced layout recalculation (reflow)
https://gist.github.com/paulirish/5d52fb081b35...
Experimental
features
57
EXPERIMENTAL FEATURES
58
Feature policy:
browser as a linter
• Feature-Policy
• Enforce rules in staging environment
• No ...
Web
debugging
proxies
59
https://www.flickr.com/photos/kecko/37272629160CCBY2.0
SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES
60
Fiddler
https://www.webpagetest.org/
SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES
61
Charles Proxy
https://www.webpagetest.org/
Advanced throttling options
T...
SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES
62
Caveats
https://www.webpagetest.org/
Some proxies downgrade HTTP/2 to HT...
The ultimate tools
63
THE ULTIMATE TOOLS
64
View source (CTRL-U)
Watch out for:
- random "no one knows why we have this stuff”
- massive inline ...
THE ULTIMATE TOOLS
65
Difftool
Beautify and diff your bundles before shipping to production
Find unexpected issues, like:
...
Summary
66
Network performance
❖ Latency
❖ Waterfall
❖ Visual comparison tools
Runtime performance / JavaScript
❖ Bundle a...
LEARN MORE
67
Understanding the building blocks
• High Performance Browser Networking
• Read for free at https://hpbn.co
•...
Thank you!
__jakub_g
https://jakub.gieryluk.net/slides/rivieradev
Slides available at
Find me on Twitter
Bonus content
69
THE ULTIMATE TOOL
70
Test in production
Some insights can only be drawn
from A/B testing in production.
You can never simu...
Aspects of front-end performance
71
Scrolling & animations
performance
⌚Initial load time Responding to
user input
💲Cost
R...
CHROME DEVTOOLS
72
Runtime code coverage tool
• Can give idea about code splitting opportunities
• May find some dead files
WATERFALL
73
Waterfall anti-patterns: network silence
• Network silence =
opportunity for an
early fetch
https://hpbn.co/m...
SWISS-ARMY KNIFE TOOLS
74
WebPageTest: killer features
• Testing from all over the world
• “the site is slow in Brazil” (m...
SWISS-ARMY KNIFE TOOLS
75
WebPageTest: more strong points
• Can gather lots of low-level data
• tcpdump, advanced HTTP/2 i...
SWISS-ARMY KNIFE TOOLS
76
WebPageTest: caveats
• Public instance = test only public websites (production)
• Although you c...
WEBPAGETEST: EVEN MORE FEATURES
77
Hidden features
• CPU throttling via URL param
• CPU throttling via mobile emulation
• ...
WATERFALL
78
Waterfall good patterns: preconnect “gaps”
…but since connection
was initiated before
with <link rel=preconne...
WATERFALL BASICS
79
Bonus: keep your favicons at bay
Put a small 16x16 favicon.ico in the root of the domain
Make sure you...
WATERFALL
80
More waterfall analyses
https://jakearchibald.com/2019/f1-perf/
WEBPAGETEST: COMPARING TESTS
81
Visual comparison
• Useful for “before / after” comparisons after shipping code changes
• ...
Compare CDNs
CONTENT DELIVERY NETWORKS
82
https://www.cdnperf.com/cdn-compare
http://cdncomparison.com/
COMPRESSION
83
Consider brotli
for static content
• Supported by all modern browsers
(~90%), fall back to gzip
• Decompres...
Images
84Image credit: Tobias Baldauf
Compression is not everything
IMAGES
85
• Modern JPEG encoders and decoders are very good and highly optimized
• WEBP does...
Manual image optimization tools
IMAGES
86
Raster: https://squoosh.app/ SVG: https://jakearchibald.github.io/svgomg/
See al...
Automatic image optimization
IMAGES
87
Commit / build time
• https://jamiemason.github.io/ImageOptim-CLI/
• https://github...
SWISS-ARMY KNIFE TOOLS
88
Fiddler: features (perf and beyond)
• Inspecting traffic
• Rewriting traffic (AutoResponder)
• S...
SWISS-ARMY KNIFE TOOLS
89
Fiddler: strong points
• Works for traffic from all web browsers 👍 with same UI
• Configure once...
SWISS-ARMY KNIFE TOOLS
90
Fiddler: caveats
• Windows-only
• See Charles Proxy for a cross-platform alternative
• Downgrade...
SWISS-ARMY KNIFE TOOLS
91
Fiddler in action:
changing response via FiddlerScript
SWISS-ARMY KNIFE TOOLS
92
Fiddler in action:
changing response
via AutoResponder
• Select a session; strip gzip encoding i...
EXPERIMENTAL FEATURES
93
Feature policy:
browser as a
runtime linter
• Find out about perf / privacy
issues
• Disable feat...
Measuring & Browser APIs
94
MEASURING
95
Navigation Timing & Resource Timing
https://www.w3.org/TR/navigation-timing-2/ performance.getEntriesByType('...
MEASURING
96
Navigation Timing & Resource Timing
https://www.w3.org/TR/navigation-timing-2/
(note that many things can be ...
MEASURING
97
Navigation Timing & Resource Timing
• Other APIs
• Use performance.now() instead of Date.now()
• performance....
EXPERIMENTAL FEATURES
98
Use dev
versions of
browsers
• DevTools evolve fast, add new
features, console warnings
etc. Use ...
Usage
• Checks HTTP responses for validity
according to HTTP specs
• Finds invalid / contradictory / useless
response head...
• Response headers with syntax errors are ignored
• Some headers have non-intuitive syntax.
Easy to make a typo, or forget...
• Improperly configured caching -> browsers
defaulting to heuristics to decide about
cacheability
• If you’re behind a cac...
Final words
FIN
106
• Tools have bugs
• Browsers have bugs and “features” and magic behaviors
• Often indistinguishable
• ...
 Practical intro to web performance - RivieraDEV 2019
 Practical intro to web performance - RivieraDEV 2019
 Practical intro to web performance - RivieraDEV 2019
 Practical intro to web performance - RivieraDEV 2019
 Practical intro to web performance - RivieraDEV 2019
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Practical intro to web performance - RivieraDEV 2019

Download to read offline

Practical intro to web performance - RivieraDEV 2019

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Practical intro to web performance - RivieraDEV 2019

  1. 1. Practical intro to web performance Riviera Dev 2019 Jakub Gieryluk
  2. 2. Agenda 2 Network performance ❖ Latency ❖ Waterfall ❖ Visual comparison tools Runtime performance / JavaScript ❖ Bundle analysis & Code splitting ❖ Dependencies & 3rd parties ❖ DevTools perf panel
  3. 3. Why performance matters, for users 3 Money • 💲 Users with limited data plans • 🚆Users commuting • ✈ Users in roaming • Digital exclusion • poor connectivity areas • developing markets https://www.slideshare.net/Ericsson/ericsson-mobility-report-the-stress-of-streaming-delays Stress https://whatdoesmysitecost.com
  4. 4. Why performance matters, for CEOs 4 https://wpostats.com
  5. 5. QUICK START 5 PageSpeed Insights: Lighthouse Online + CrUX https://www.webpagetest.org/ https://developers.google.com/speed/pagespeed/insights/ Real-world analytics Key metrics Actionable items
  6. 6. Network performance 6
  7. 7. 7 Bandwidth = diameter of the pipe Latency = length of the pipe Latency
  8. 8. NETWORK PERF / LATENCY 9 Check latency around the world https://tools.keycdn.com/performance Example: Not geo-distributed (yet) backend
  9. 9. 10
  10. 10. NETWORK PERF / LATENCY 11 Check latency around the world https://tools.keycdn.com/performance Example: Geo-distributed static content (via CDN)
  11. 11. 12 NETWORK PERFORMANCE / LATENCY Mobile latency https://twitter.com/katiehempenius/status/1040434962472873984
  12. 12. WebPageTest 13
  13. 13. NETWORK PERFORMANCE 14 WebPageTest https://www.webpagetest.org/
  14. 14. SWISS-ARMY KNIFE TOOLS 15 WebPageTest: resources review
  15. 15. The waterfall: basics 16 using WebPageTest
  16. 16. NETWORK PERFORMANCE / WATERFALL BASICS 17 The waterfall HTTP requests Time
  17. 17. NETWORK PERFORMANCE / WATERFALL BASICS 18 Waterfall anti-patterns: (unused) massive subresource https://twitter.com/dougsillars/status/1114244509360062466
  18. 18. NETWORK PERFORMANCE / WATERFALL BASICS 19 Waterfall anti-patterns: a lot of red https://calendar.perfplanet.com/2013/web-performance-waterfalls-from-10000-feet/ Red lines = HTTP 4xx responses (404 not found etc…)
  19. 19. NETWORK PERFORMANCE / WATERFALL BASICS 20 Waterfall anti-patterns: a lot of yellow https://calendar.perfplanet.com/2013/web-performance-waterfalls-from-10000-feet/ Yellow lines = HTTP 3xx responses Particularly bad if: - At beginning - Multiple - Cross-origin RedirectsConditional responses (resource revalidation)
  20. 20. The waterfall in depth 21 yBryanGoffonUnsplash using WebPageTest
  21. 21. WATERFALL 22 Life of a single HTTP request https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
  22. 22. WATERFALL 23 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 What we can read from this waterfall? (tests done from Strasbourg, Chrome, using “3G Fast” network throttling) Test results overview page: https://www.webpagetest.org/result/190409_JH_e24cc615c65463aaa9af8755dbbda34e/
  23. 23. WATERFALL 24 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 Page interactive almost all the time 👍 Some very good things: Main thread not too busy 👍 (reasonable amount of JS) High bandwidth utilization
  24. 24. WATERFALL 25 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 Massive fontawesome download. Perhaps could be replaced with a custom build? Many big frameworks & libs provide custom build option Some things that could be better:
  25. 25. WATERFALL 26 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 All requests issued at the same time, over a single HTTP connection (generally good for performance) HTTP/2 pattern
  26. 26. WATERFALL 27 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=12.5&width=1000&cpu=1&requests=17-56&ut=1 • Browser creates max. 6 parallel connections per domain… • …and sends requests only when there’s an unused connection Not possible to have more than 6 in-flight requests for a given domain HTTP/1.1 pattern: “stairs”
  27. 27. WATERFALL 28 Connection View https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&width=930&type=connection Each HTTP/1.1 connection: • starts slow, • does separate congestion control HTTP/1.1 connections “fight” with each other Lots of static assets requests -> primary use case for HTTP/2
  28. 28. WATERFALL 29 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 Back to webfonts - looking closer… CSS and actual fonts (WOFF2) are hosted on different servers. Hence DNS+TCP+TLS set up is needed before fetching them. We could do that upfront with <link rel=preconnect> in top of HTML response
  29. 29. WATERFALL 30 RivieraDEV waterfall analysis https://www.webpagetest.org/waterfall.png?test=190409_JH_e24cc615c65463aaa9af8755dbbda34e&run=1&max=8.5&width=1000&cpu=1&requests=1-30&ut=1 …but if we did it ourselves, it could start even before CSS request Google Fonts actually does preconnect via response header… 👍
  30. 30. WebPageTest: visual tools 31
  31. 31. WATERFALL 32 Waterfall anti-patterns: blocking resources https://calendar.perfplanet.com/2013/web-performance-waterfalls-from-10000-feet/ In particular, beware of third-party, blocking JS (and CSS)
  32. 32. VISUAL TOOLS / SPOF 33 Third-party blocking resources Let’s try to put in place some chaos… SPOF = Single Point of Failure ℹ works best in Firefox; ℹ Chrome doesn’t show failed requests; ℹ iOS agent doesn’t support feature
  33. 33. VISUAL TOOLS / SPOF 34 Third-party blocking resources: filmstrip • It takes the browser 30seconds to abandon the blackholed request https://www.webpagetest.org/video/compare.php?tests=190418_KY_1a8895d28357b7620193d8b99145493c%2C190418_2C_19ed78c24c5a106745227111c731a6a2&thumbSize=150&ival=8000 • <script defer> is deferred, but still blocking the load event
  34. 34. VISUAL TOOLS / SPOF 35 Third-party blocking resources: summary • Prefer async third parties than synchronous ones; load them after `load` event • Analytics, A/B testing providers, libraries, social widgets… • Calculate the risk. Does a third party provide SLA or historical uptime data? • Good sign if the lib is hosted by a reputable CDN provider • Self-host (if possible) when unsure • Perhaps have a server-side switch to start serving your own copy instead of 3rd-party • You don’t want a social widget to take down your website • When dealing with social widgets: perhaps load on demand (also good for user privacy)
  35. 35. VISUAL TOOLS / COMPARING TESTS 36 Filmstrip comparison Tip: always run as a logged-in user, to not lose the test ID
  36. 36. VISUAL TOOLS / COMPARING TESTS 37 Video view comparison https://www.webpagetest.org/video/view.php?id=150512_a1702c187f12d2582548c5e9be8d0b6dd308ab67
  37. 37. Agenda 38 Network performance ❖ Latency ❖ Waterfall ❖ Visual comparison tools Runtime performance / JavaScript ❖ Bundle analysis & Code splitting ❖ Dependencies & 3rd parties ❖ DevTools perf panel
  38. 38. Runtime performance 39 PhotobyGarettMizunakaonUnsplash
  39. 39. Bundle analysis & code splitting 40
  40. 40. Webpack bundle tools BUNDLE ANALYSIS 41https://webpack.github.io/analyse/ webpack-bundle-analyzer https://chrisbateman.github.io/webpack-visualizer/ Tip: disable module concatenation when analyzing the bundle {config: {optimization: {concatenateModules: false}}}
  41. 41. Bundle tools: Bundle Buddy BUNDLE ANALYSIS 42 https://github.com/samccone/bundle-buddy Find duplicated code across the chunks
  42. 42. Dependencies 43
  43. 43. Bundlephobia – check size of npm packages DEPENDENCIES 44 https://bundlephobia.com/
  44. 44. Bundlephobia DEPENDENCIES 45 • Check for regressions before updating a dependency • Contrary, maybe there’s a new, smaller version available • Import `package.json` to analyze all your deps
  45. 45. Import Cost – vscode extension DEPENDENCIES 46
  46. 46. Third-parties 47https://requestmap.herokuapp.com/render/190418_PQ_4b776cc76ed8388b44883c5ee3147a23/ requestmap.herokuapp.com
  47. 47. THIRD-PARTIES 48 Dealing with third parties • Visualize: • http://requestmap.herokuapp.com/ • Compare impact of different 3rd-party providers: • https://github.com/patrickhulce/third-party-web • https://www.thirdpartyweb.today • How to deal with 3rd parties: • Harry Roberts @ performance.now: https://youtu.be/bmIUYBNKja4 • Put process on adding new tags: • https://medium.com/the-telegraph-engineering/improving- third-party-web-performance-at-the-telegraph-a0a1000be5
  48. 48. Chrome DevTools performance panel 49
  49. 49. CHROME DEVTOOLS 50 Performance panel https://www.webpagetest.org/
  50. 50. CHROME DEVTOOLS 51 Performance panel https://www.webpagetest.org/
  51. 51. CHROME DEVTOOLS / PERFORMANCE PANEL 52 User Timing API performance.mark("startMark") performance.mark("endMark") performance.measure("myDiff", "startMark", "endMark") Useful to correlate network & JS activity with what the code is doing
  52. 52. CHROME DEVTOOLS 53 Performance panel What do the colors mean? Golden = JS Dark violet = layout Dark green = render All else = random colors, fixed color per file https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/ Time JavaScript call stack
  53. 53. CHROME DEVTOOLS / PERFORMANCE PANEL 54 JavaScript flame chart Zoom in and look for repeated patterns Mr. Obvious Tip: Disable minification
  54. 54. CHROME DEVTOOLS / PERFORMANCE PANEL 55 JavaScript flame chart https://www.webpagetest.org/Reading the same cookie over and over. Expensive!
  55. 55. CHROME DEVTOOLS / PERFORMANCE PANEL 56 Forced layout recalculation (reflow) https://gist.github.com/paulirish/5d52fb081b3570c81e3a More docs: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference If part of JS call stack, multiple times = bad sign Red triangle over purple square = forced reflow Typical issues: - Reading layout props in arbitrary JS functions - Reading layout props after writing Solutions: - Read layout in requestAnimationFrame() callbacks (it’s free) - Batch DOM reads and writes, in correct order (first reads, then writes)
  56. 56. Experimental features 57
  57. 57. EXPERIMENTAL FEATURES 58 Feature policy: browser as a linter • Feature-Policy • Enforce rules in staging environment • No need to run any tools – immediate feedback Feature-Policy: oversized-images 'none' • Feature-Policy-Report-Only • Deploy to production to gather real-world data, without enforcing https://featurepolicy.info/
  58. 58. Web debugging proxies 59 https://www.flickr.com/photos/kecko/37272629160CCBY2.0
  59. 59. SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES 60 Fiddler https://www.webpagetest.org/
  60. 60. SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES 61 Charles Proxy https://www.webpagetest.org/ Advanced throttling options Throttling also possible in Fiddler, although: • no dedicated UI (via FiddlerScript) • less sophisticated
  61. 61. SWISS-ARMY KNIFE TOOLS / WEB DEBUGGING PROXIES 62 Caveats https://www.webpagetest.org/ Some proxies downgrade HTTP/2 to HTTP/1.1 which may notably affect how resources are loaded: • Fiddler • BrowserStack • … Be careful when benchmarking / comparing. ⚠
  62. 62. The ultimate tools 63
  63. 63. THE ULTIMATE TOOLS 64 View source (CTRL-U) Watch out for: - random "no one knows why we have this stuff” - massive inline base64 content - whitespace and comments not stripped out - duplicated code or markup etc.
  64. 64. THE ULTIMATE TOOLS 65 Difftool Beautify and diff your bundles before shipping to production Find unexpected issues, like: - Non-deterministic build which affects client-side cache reuse - Regressions when updating tools or dependencies
  65. 65. Summary 66 Network performance ❖ Latency ❖ Waterfall ❖ Visual comparison tools Runtime performance / JavaScript ❖ Bundle analysis & Code splitting ❖ Dependencies & 3rd parties ❖ DevTools perf panel
  66. 66. LEARN MORE 67 Understanding the building blocks • High Performance Browser Networking • Read for free at https://hpbn.co • High Performance Networking in Chrome • https://www.aosabook.org/en/posa/high-performance-networking-in-chrome.html • Check my blog article • https://calendar.perfplanet.com/2018/getting-started-with-web-performance- 2019-beginners-guide/ • More perf-oriented articles, books, slides, videos: • https://calendar.perfplanet.com • https://www.perf-tooling.today/
  67. 67. Thank you! __jakub_g https://jakub.gieryluk.net/slides/rivieradev Slides available at Find me on Twitter
  68. 68. Bonus content 69
  69. 69. THE ULTIMATE TOOL 70 Test in production Some insights can only be drawn from A/B testing in production. You can never simulate all real- world traffic patterns in the lab. ➢ Push to prod ➢ gather RUM data ➢ iterate
  70. 70. Aspects of front-end performance 71 Scrolling & animations performance ⌚Initial load time Responding to user input 💲Cost RuntimeLoading Indirect 🔋Battery life
  71. 71. CHROME DEVTOOLS 72 Runtime code coverage tool • Can give idea about code splitting opportunities • May find some dead files
  72. 72. WATERFALL 73 Waterfall anti-patterns: network silence • Network silence = opportunity for an early fetch https://hpbn.co/mobile-networks/ https://hpbn.co/optimizing-for-mobile-networks/ “[In Pandora music streaming application], analyticsbeacons [sent every 60 seconds] accounted for 0.2% bytes and 46% power consumption” • Also, grouped requests are more battery-efficient
  73. 73. SWISS-ARMY KNIFE TOOLS 74 WebPageTest: killer features • Testing from all over the world • “the site is slow in Brazil” (maybe slow local ad?) • “the site is down in Indonesia” • Can capture response bodies • All kinds of browsers and devices • Same UI regardless of browser tested • Permanent, shareable test results • WPT URL = proof of bug / problem
  74. 74. SWISS-ARMY KNIFE TOOLS 75 WebPageTest: more strong points • Can gather lots of low-level data • tcpdump, advanced HTTP/2 info, Chrome timeline, Chrome tracing data… • Data can be exported in HAR format • Automation possible • REST API, npm package (https://www.npmjs.com/package/webpagetest) • Free, open source, not for profit (PHP, https://github.com/WPO-Foundation/webpagetest)
  75. 75. SWISS-ARMY KNIFE TOOLS 76 WebPageTest: caveats • Public instance = test only public websites (production) • Although you can set up a private instance • Small differences in detail level between browsers • Most notably: some data can’t be gathered on iOS
  76. 76. WEBPAGETEST: EVEN MORE FEATURES 77 Hidden features • CPU throttling via URL param • CPU throttling via mobile emulation • Custom waterfall URL params: • &width=2000 (width of waterfall in pixels) • &max=30 (width of waterfall in seconds) • &ut=1 (show User Timing marks) • … • Several more “hidden features” via URL params (check up docs): high quality images, experimental timings etc. • Just click around any links on WebPageTest.org to discover features • See also: • https://deanhume.com/ten-things-you-didnt-know- about-webpagetest-org/ (https://github.com/WPO-Foundation/webpagetest/blob/master/www/settings/mobile_devices.ini)
  77. 77. WATERFALL 78 Waterfall good patterns: preconnect “gaps” …but since connection was initiated before with <link rel=preconnect>, it avoids 400ms penalty Browser starts sending actual requests for subresources here… https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/
  78. 78. WATERFALL BASICS 79 Bonus: keep your favicons at bay Put a small 16x16 favicon.ico in the root of the domain Make sure your 404/500 pages are small and self-contained https://twitter.com/dougsillars/status/1123460280581853186
  79. 79. WATERFALL 80 More waterfall analyses https://jakearchibald.com/2019/f1-perf/
  80. 80. WEBPAGETEST: COMPARING TESTS 81 Visual comparison • Useful for “before / after” comparisons after shipping code changes • Re-run the tests multiple times, compare graphs with the waterfall, to not draw accidental conclusions
  81. 81. Compare CDNs CONTENT DELIVERY NETWORKS 82 https://www.cdnperf.com/cdn-compare http://cdncomparison.com/
  82. 82. COMPRESSION 83 Consider brotli for static content • Supported by all modern browsers (~90%), fall back to gzip • Decompression speed on par with gzip • Compression speed: slow on level 10/11 (not suitable for dynamic content) • Supported by some CDNs (but not all of them yet) • Some CDNs can recompress to brotli even if your server does not serve brotli • You can build static brotli assets at build time https://tools.paulcalvano.com/compression.php https://paulcalvano.com/index.php/2018/07/25/brotli-compression-how-much-will-it-reduce-your-content/
  83. 83. Images 84Image credit: Tobias Baldauf
  84. 84. Compression is not everything IMAGES 85 • Modern JPEG encoders and decoders are very good and highly optimized • WEBP does not support progressive rendering, contrary to JPEG • JPEG-XR: uses much more CPU than JPEG, and is IE/EdgeHTML-only • WEBP: still not supported in Safari, and (reluctantly) just landed in Firefox • Verdict: • stick to JPEG, compress better (upgrade your encoder), use progressive JPEG • use lossless WEBP instead of PNG if not afraid of complexity • Kornel Lesiński | Image Optimization | performance.now() 2018 (https://youtu.be/jTXhYj2aCDU) • Tobias Baldauf: • https://calendar.perfplanet.com/2016/even-faster-images-using-http2-and-progressive-jpegs/ • https://calendar.perfplanet.com/2018/dont-use-jpeg-xr-on-the-web/
  85. 85. Manual image optimization tools IMAGES 86 Raster: https://squoosh.app/ SVG: https://jakearchibald.github.io/svgomg/ See also: https://imageoptim.com/mac - https://imageoptim.com/versions - https://www.sarasoueidan.com/blog/svgo-tools/
  86. 86. Automatic image optimization IMAGES 87 Commit / build time • https://jamiemason.github.io/ImageOptim-CLI/ • https://github.com/sindresorhus/gulp-imagemin Through CDN • Cloudinary: specialized CDN • optimizes images on-the-fly • serves the most suitable file type, depending on the browser support • Test tool: https://webspeedtest.cloudinary.com/ • Finds poorly compressed images • Finds images that are scaled down by the browser
  87. 87. SWISS-ARMY KNIFE TOOLS 88 Fiddler: features (perf and beyond) • Inspecting traffic • Rewriting traffic (AutoResponder) • Supports adding latencies to single responses • Ad-hoc changes in production without deploying • Allows customization with FiddlerScript and extensions • Custom arbitrary traffic manipulations • Including general or per-domain traffic throttling • Redirect production traffic from Android/iOS to localhost for debugging
  88. 88. SWISS-ARMY KNIFE TOOLS 89 Fiddler: strong points • Works for traffic from all web browsers 👍 with same UI • Configure once, have same behavior in all clients • Allows being configured as a proxy for external devices (Android, iOS) 👍 • Import/export sessions (including HAR format) • Including importing sessions into AutoResponder • Ask a user for HAR/SAZ file (or get it from WebPageTest), reproduce exact experience on your machine (except dynamic JS-generated requests)
  89. 89. SWISS-ARMY KNIFE TOOLS 90 Fiddler: caveats • Windows-only • See Charles Proxy for a cross-platform alternative • Downgrades traffic to HTTP/1.1 • Keep in mind when enabled, as this can lead to false discoveries • Traffic throttling is easier with Charles • Like each MITM proxy, requires some setup for HTTPS decryption • Particularly onerous on recent iOS, Android and a bit in desktop Firefox • FiddlerScript is JScript.NET(kind of like a mix of JavaScript and C#) and not modular
  90. 90. SWISS-ARMY KNIFE TOOLS 91 Fiddler in action: changing response via FiddlerScript
  91. 91. SWISS-ARMY KNIFE TOOLS 92 Fiddler in action: changing response via AutoResponder • Select a session; strip gzip encoding in Inspectors tab • Drag’n’drop the session to AutoResponder tab > right click > Generate File • Pro-tip: Remove `Content-Length` header when changing response body • You can remove all headers from response if they are not important
  92. 92. EXPERIMENTAL FEATURES 93 Feature policy: browser as a runtime linter • Find out about perf / privacy issues • Disable features for 3rd-parties • Disable unused features to prevent future regressions (new developer in the team etc.) https://featurepolicy.info/
  93. 93. Measuring & Browser APIs 94
  94. 94. MEASURING 95 Navigation Timing & Resource Timing https://www.w3.org/TR/navigation-timing-2/ performance.getEntriesByType('navigation')[0]
  95. 95. MEASURING 96 Navigation Timing & Resource Timing https://www.w3.org/TR/navigation-timing-2/ (note that many things can be happening here already, including JS execution – thanks to streaming HTML parsers)
  96. 96. MEASURING 97 Navigation Timing & Resource Timing • Other APIs • Use performance.now() instead of Date.now() • performance.getEntries() / performance.getEntriesByType() • Gotchas • Wrong values due to taking measurements before available • Unexpected negative values or diffs (browser bugs) • User Timing L2 has some limitations that L3 will fix • Observer effect • Consider using a library like https://github.com/akamai/boomerang
  97. 97. EXPERIMENTAL FEATURES 98 Use dev versions of browsers • DevTools evolve fast, add new features, console warnings etc. Use Chrome Beta/Canary, Firefox Dev/Nightly • Tip: Press `F1` in Chrome/Firefox DevTools to enable many features
  98. 98. Usage • Checks HTTP responses for validity according to HTTP specs • Finds invalid / contradictory / useless response headers • Analyzes caching, revalidation, content negotiation etc. Constraints • Checks `robots.txt`, needs permission for `RED` User-Agent • Reads HTML, but doesn’t execute JS Redbot – online HTTP linter HTTP 99
  99. 99. • Response headers with syntax errors are ignored • Some headers have non-intuitive syntax. Easy to make a typo, or forget to escape a special character • Some response headers were useful a decade ago or two, but now are implied or ignored and just waste bandwidth • Contradictory rules make debugging much harder Redbot – problems it solves HTTP 104
  100. 100. • Improperly configured caching -> browsers defaulting to heuristics to decide about cacheability • If you’re behind a cache (load balancer / CDN etc.), wrong config can have serious consequences • Non-HTTPS assets might be improperly processed by intermediaries (ISP caches etc.) Redbot – problems it solves HTTP 105 See also • https://github.com/vfaronov/httpolice – a similar offline command line tool which analyzes HAR files Caching resources • https://csswizardry.com/2019/03/cache-control-for-civilians/ • https://www.mnot.net/cache_docs/
  101. 101. Final words FIN 106 • Tools have bugs • Browsers have bugs and “features” and magic behaviors • Often indistinguishable • Your tools also have bugs or are lying to you • Chrome: incognito = no preconnect • Chrome automatically preconnects to top domains [heuristics] • Firefox 66 preconnect broken

Practical intro to web performance - RivieraDEV 2019

Views

Total views

131

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×