introduc$on to modern performance best prac$ces for web apps. We will 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 improving your applica$ons. author twitter handle
Common performance best prac$ces – Dive into PageSpeed Rules + look at SiteSpeed.io § A refactoring example – We will 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 follow up with resources
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 -ASer 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 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
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)
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 olen 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 sejngs for raster formats: don’t be afraid to dial down the “quality” sejngs, the results are olen 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 will ensure that all of your image assets are always op$mized.
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.
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).
- Aditya Punjabi § High Performance Browser Networking - Ilya Grigorik § Scaling Front-End Performance - Patrick Meehan § Experiences of HTTP/2 in the real world - Michael Gooding § Outages, ownership, and cralsmanship: A devops story - Adam Cath