Performance & dev tools

Editor's Notes

• #2: At this talk, we’re going to talk about webapps performance how it impact the product/business. How to detect such issues Quick overview of some audit tools Mainly focus on Chrome devtools performance recording.
• #3: My name is Guy Yogev. I’m a web developer in the past 5 years, with experience at many frameworks (phoenix, rails, Node, angular react...)
• #4: So, why performance even matter? In short - performance is time, and time is money. Now a days, people have very low tolerance to bugs and little patience. They expect webapps to work well and fast. Studies shows that a frustrated user will abandon our app. On the flip side, good performance & UX attracts users, increasing app usage time. A lost user will get its content/service from your competitor. GA can show high level metrics and averages. Avg session duration Bounce rate We’ll focus on Profiling reports, which show a lower level metric User action response time
• #5: Profiling moves the discussion from a qualitative field to a quantitative one. You can't optimize what you can't measure Page loads takes too long... we can reduce it by X% if we do Y, Allow comparing before/after change Set goals
• #6: So what should we look at when analyzing webapps performance? UX has 2 major categorizes we can measure First impression - How long it took the page to load (all assets loaded and evaluated) To contain meaningful content (for example see top stories on Ynet) To start responding to user interactions (I want to immediately scroll to the sport section) To stop changing (page layout is fixed) Issues at this state usually comes from in efficient network usage, and render blocking assets (loading things that are not needed)
• #7: The second category is Action response time - How long it the page to react to user interaction. 100ms - User start noticing the lag 1s - User still feel his action is the cause of the change (the lag may feel reasonable) 1s-5s - should add a spinner +5s - progress bar 10s - User forget his action triggered the change. Bad code is the main suspect (unoptimized)
• #8: Now that we know what to look at, we can talk about the tools at hand. Audits are great & easy (on click) for high-level issues detection (configs). Just enter your site url, and let the audit run. Assets caching Image compression Blocking assets Lighthouse is designed for SPA profiling (PWA - now supported by google play) Webpagetest is for webpages (great for round-trip, may be inaccurate for heavy SPA) Audits can help profiling first impressions.
• #9: When auditing, we should think of the condition of our end user Our low-end network. Low end devices. Supported browsers. For example, does the network speed usage at the audit matches the end user’s? Bottom image shows an output of an audit. Lighthouse score (includes many many sub categories, some overlap with other audit score) Very low FBT score (meaning it took a long time till the server sent data to the client) Images can be compressed Some assets are not cached (missing headers data at the HTTP response)
• #10: Devtools are great for low-level (micro) issues detection (code). It shows how the browser runs our code and renders the page (More about it in a sec). We all faced at some point a cross browser issue - i.e something works well on Chrome, but not on Safari. Not a trivial task. In the past, it was nearly impossible to track how code run on different browsers. dev tools were enabled by extensions / plugins such as FF firebug. The reason IE is so hated, is it poor dev-tools. It's really hard to debug issues on IE (even on 11). For example on google Trends we had an issue that crashed the app. In order to debug it we needed to Disable IE security features completely. Devtools itself crashed when inspecting the page. We had to pin point the moment before Devtools crashed, but after the the bug at our app. Now all major browsers now include devtools out of the box.
• #11: In order to debug rendering issues, we need to understand how rendering works from the browser POV. When a change happens, it doesn’t always trigger all steps. Changing a layout property (i.e width) will trigger all steps. Changing a div color, doesn’t require re-layout. Some styles does not affect layout nor paint (i.e. cursor) Force Reflow - JS that forces the browser to recalculate layout (i.e elem.offsetWidth). Deadly when used in a loop
• #12: Were not going to cover all of the dev tools features. I’ll mainly focus on Performance tab.
• #13: Verbose mode shows warning (including performance bad practices). Every new Chrome version adds more violation checks to the pool. Performance global variable stores page timing.
• #14: Size: Top - uncompressed size (size on disk) Bottom - download size Time: Top - request time e2e Bottom - Latency (mainly Time Till First Byte)
• #15: The performance tab allow use to config the metrics recording.
• #16: Sources tab allow IDE like usage. It even allows static file serving.
• #17: Lets see a simple performance recording. When recording, use incognito. Disable features of devtools unless needed for the test. Demo: Goto to geektime Show FPS Monitor Paint rectangles Reduce CPU to x6 Record hovering over a card Add `will-change: transform` to overlay (.large-featured-entry span.overlay) Show FPS improvement. Will-change hits the browser the element is expected to change, Browsers may set up optimizations before an element is actually changed.
• #18: Change CPU to X1 https://drive.google.com/open?id=18wm8uBEyRTOx2hXEC3GJ-HIQsFIgjsu- https://drive.google.com/open?id=1X4OhkRkEAUauEI9kdpw3EUfhuCb-jxO7 https://drive.google.com/open?id=12Mai0RDZ57yEf0NN9Wv1x2LUvtOBfOEA https://drive.google.com/open?id=1vqxMAcRpZYEhm8Mf4ae20RpXk8rec5qo Blocking domain demo: Record page load Remember scripting duration Show pubads_imp causes paint-reflow violation. Block pubads_imp domain Record Coverage demo Show jquery coverage Block jquery from googleapis record Override demo - reset network blocking and CPU to default. Show page banner height change on load Add styles.css to overrides Find top-banner class Set height to 87px record