Dus0n Whi6le dus0nwhi6le.com @dus0nwhi6le San Francisco, California, USA AppDynamics, Kwarter, SensioLabs, Yahoo!, … Technologist, Traveler, Pilot, Skier, Diver, Sailor, Golfer
Modern Performance Best Prac0ces Join this session for a prac$cal introduc$on to modern performance best prac$ces for web apps. We wil dive into the latest tools and best prac$ces for launching an ideal end-user experience. Find out how you can leverage Chrome Developer Tools, Google PageSpeed, and WebPageTest to get started author twitter handle improving your applica$ons.
Modern Performance Best Prac0ces § Why web performance ma*ers § Common performance best prac$ces – Dive into PageSpeed Rules + look at SiteSpeed.io § A refactoring example – We wil have an interac$ve refactoring session of an exis$ng app to reach an ideal pagespeed score § Discuss common tools that automate these techniques (ngx_pagespeed, yo*aa, cloudﬂare, etc) § Dive into WebPageTest to show how to test web performance from any browser § Recap best prac$ces and fol ow up with resources
This talk is heavily inspired from: Google PageSpeed Rules Google Web Fundamentals Ryan Tomayko’s “Things Caches Do” Addy Osmani’s “Automa$ng Workﬂow” Ilya Grigorik “High Performance Browser Networking”
Application complexity is exploding Agile SOA Login Mobile Cloud Flight Status Search Flight Purchase Web NOSQL Big data
Why performance ma*ers
Performance directly impacts the bo*om line
How fast is fast enough? §Performance is key to a great user experience - Under 100ms is perceived as reac$ng instantaneously - A 100ms to 300ms delay is percep$ble - 1 second is about the limit for the user's ﬂow of thought to stay uninterrupted - Users expect a site to load in 2 seconds - ATer 3 seconds, 40% will abandon your site. - 10 seconds is about the limit for keeping the user's a*en$on §Modern applica0ons spend more 0me in the browser than on the server-side
Performance Ma*ers • Treat performance as a feature • Implement performance best prac$ces on server-side and client-side • Use the 14kb rule and op$mize cri$cal path for instant loading • Implement a responsive design + responsive image strategy • Implemen$ng a touch-ﬁrst strategy • Using task runners to build and deploy code for produc$on
Leverage HTTP Caching • For sta$c components: implement "never expire" policy by sekng far future expires header • For dynamic components: use an appropriate Cache-Control header to help the browser with condi$onal requests
Expires or Invalida0on
Expira0on and Invalida0on
Queueing • Any process that is slow and not important for the h6p response should be queued • Sending emails/sms/push no0ﬁca0ons + pos0ng to social accounts • Upda0ng proﬁles and discovering friends from social accounts • Analy0cs + Instrumenta0on • …
In modern web applica$ons more latency comes from the client-side than the server-side.
Common Performance Best Prac$ces • Reduce DNS lookups • Reduce network latency with Content Delivery Networks
Google Chrome Developer Tools
Google Performance Tips • Avoid landing page redirects • Avoid plugins • Conﬁgure the viewport • Enable compression • Improve server response $me • Inline CSS • Leverage browser caching
Op$mizing Content Eﬃciency • Elimina$ng unnecessary downloads • Op$mizing encoding and transfer size of text-based assets • Prefetch resources based on user ac$ons • Image op$miza$on • Web font op$miza$on • HTTP caching
CSS Performance • Avoid universal rules • Don’t qualify ID rules with tag names or classes • Use the most speciﬁc category possible • Avoid the descendant selector • Ques$on all usages of the child selector • Rely on inheritance • Avoid vendor-speciﬁc features unless necessary • Remove unused css (uncss)
Eﬃciency of CSS selectors • id (#myid) • class (.myclass) • tag (div, h1, p) • adjacent sibling (h1 + p) • child (ul > li) • descendent (li a) • universal (*) • a*ribute (a[rel="external"]) • pseudo-class and pseudo element (a:hover, li:ﬁrst)
Steve Souders examined the performance impact of CSS selectors and determined that the delta between the best case and the worst case was 50ms. Don’t waste too much $me on it.
Image Op$miza$on • Prefer vector formats: vector images are resolu$on and scale independent, which makes them a perfect ﬁt for the mul$- device and high-resolu$on world. • Minify and compress SVG assets: XML markup produced by most drawing applica$ons omen contains unnecessary metadata which can be removed; ensure that your servers are conﬁgured to apply GZIP compression for SVG assets. • Pick best raster image format: determine your func$onal requirements and select the one that suits each par$cular asset. • Experiment with op$mal quality sekngs for raster formats: don’t be afraid to dial down the “quality” sekngs, the results are omen very good and byte savings are signiﬁcant. • Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo informa$on, camera informa$on, and so on. Use appropriate tools to strip this data. • Serve scaled images: resize images on the server and ensure that the “display” size is as close as possible to the “natural” size of the image. Pay close to a*en$on to large images in par$cular, as they account for largest overhead when resized! • Automate, automate, automate: invest into automated tools and infrastructure that wil ensure that all of your image assets are always op$mized.
Web Font Performance • There are four primary levers that determine the performance impact of web fonts on the page: • The total number of fonts and font-weights used on the page. • The total byte size of fonts used on the page. • The transfer latency of the font resource. • The $me when the font downloads are ini$ated.
Op$mize Cri$cal Rendering Path • Analyze and characterize your cri$cal path: number of resources, bytes, length. • Minimize number of cri$cal resources: eliminate them, defer their download, mark them as async, etc. • Op$mize the order in which the remaining cri$cal resources are loaded: you want to download all cri$cal assets as early as possible to shorten the cri$cal path length. • Op$mize the number of cri$cal bytes to reduce the download $me (number of roundtrips).
Monitor performance on the server-side and client-side
Monitor your end user latency with Episodes.js or Google Analy$cs SiteSpeed
W3C Naviga$on Timing API
W3C Resource Timing API
W3C User Timing API (dram)
Monitor the end user experience with applica$on performance management tools (that use naviga$on + resource $ming apis)
Recommended Velocity Sessions § HTTP/2 vs. HTTP/1.1: A performance analysis § Op$mizing images and type on the Web § The performance and usability of web fonts § Design + performance § Measuring the performance of single page web applica$ons
Most of this content comes directly from: Google PageSpeed Rules Google Web Fundamentals Ryan Tomayko’s “Things Caches Do” Addy Osmani’s “Automa$ng Workﬂow” Ilya Grigorik “High Performance Browser Networking”