mythbusting web performancefiles.informatandm.com/uploads/2018/10/mythbusting_web_performance... ·...
TRANSCRIPT
![Page 1: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/1.jpg)
MYTHBUSTING WEB PERFORMANCE
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
Christian WenzCEO
Actition GmbH
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
![Page 2: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/2.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Donald E. Knuth: "premature optimization is the root of all evil (or at least most of it) in programming"
•Do not optimize before it is necessary
•Find out as early as possible whether it is necessary
![Page 3: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/3.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Steve Souders: 14 Rules for Faster-Loading Web Sites (2007)
•Steve Souders et al.: Even Faster Web Sites (2009)
•Some advice is still valid
•Some advice does not hold anymore
•Some advice will be outdated soon
![Page 4: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/4.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Make fewer HTTP Requests"
• The less HTTP requests, the better• Combine files•Use CSS sprites
http://httparchive.org/interesting.php (Dec 2, 2016)
![Page 5: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/5.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•As of now, the less HTTP requests, the better
•This will change with HTTP/2, though.
• „Remove unnecessary HTTP/1.x workarounds […] such as concatenated files, image sprites“ (http://chimera.labs.oreilly.com/books/1230000000545/ch12.html)
![Page 6: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/6.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Use a Content Delivery Network"
•CDN = Computer network to distribute the load
•Microsoft, Google etc. also provide a CDN for some libraries
![Page 7: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/7.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•CDN are still a very effective way to speed up an application
•Nowadays we use RUM (Real User Monitoring) to pick the CDN with the best performance
![Page 8: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/8.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Old train of thought: use cookieless domain for staticcontent
•With modern browsers: Consider serving CSS from theroot domain
• Use a CDN for the root domain (allowing caching)
• Even better with HTTP/2 (header compression)
• http://www.jonathanklein.net/2014/02/revisiting-cookieless-domain.html
![Page 9: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/9.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Add an Expires or a Cache-Control Header"
•Expires header: expiry date•For static content, set to a date in the distant
future• Less data sent over the wire if files are in the
cache
•Cache-Control header: Cache or not to cache, depending on content
![Page 10: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/10.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Use Caching.
![Page 11: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/11.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Gzip Components"
• If a client sends "Accept-Encoding: gzip, deflate", the server may send gzipped content
•Compress anything that is not compressed•Almost anything but images and PDF files
•HTTP Content Negotiation ensures that onlycompatible browsers are supported
![Page 12: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/12.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Even better than dynamic gzipping: compressdata as part of building/CI
•When using nginx: use gzip_static
![Page 13: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/13.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Average page has 1.6MB image data(http://httparchive.org/interesting.php) – ~2/3 ofpage
•Try to optimize load size (https://tinypng.com/, https://tinyjpg.com/, https://github.com/rflynn/imgmin, …)
•Evaluate new formats like WebP – which GPUs are not optimized for, though
![Page 14: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/14.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Resize images for devices(https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015)
• From a user experience point of view, do not useprogressive image rendering(http://www.webperformancetoday.com/2014/09/17/progressive-image-rendering-good-evil/). Considerusing Chroma subsampling.
• Lazy-load images below the fold
![Page 15: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/15.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Put Stylesheets at the Top"
• If there are style sheets in the <head> section ofthe page, rendering is faster
•Browser (usually) wait with rendering until CSS files are loaded
![Page 16: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/16.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Still true
•Use flushing (not just for CSS)
![Page 17: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/17.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Put Scripts at the Bottom"
•Depending on browser/OS, clients limit thenumber of concurrent connections per HTTP host
•Some browsers do not load additional resourceswhile JavaScript code is loaded
•Mind potential side effects with JavaScript code!
![Page 18: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/18.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Categorize JavaScript code: what you need now, and what youneed later
• Important JavaScript code goes into the <head>
• Other JavaScript code is loaded asynchronously (<script async>, <script defer>)
• http://peter.sh/wp-content/uploads/2010/09/execution2.jpg
• This will eventually change with HTTP/2
![Page 19: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/19.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Avoid CSS Expressions"
•Only works in IE.
•Next!
![Page 20: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/20.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Make JavaScript and CSS External"
•External resources may be cached
•Possible exception: homepages that are onlyloaded once•Here: consider integrating JS/CSS• Load external files later to cache them
![Page 21: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/21.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Google homepage is avoiding externalJavaScript
•That‘s basically the only major page to do so
•Still true!
![Page 22: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/22.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Reduce DNS Lookups"
•Some numbers:• Internet Explorer caches DNS lookups for
30 minutes•Firefox caches DNS lookups for one
minute
•Use multiple domain names (but not toomany)•Mind limitations for concurrent
connections
![Page 23: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/23.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Lookup time vs better throughput due to parallel connections
• Rule of thump: shard on two domains, not four aspreviously recommended (YMMV)
• Better bandwith does not guarantee better performance– „Increasing bandwith up to 1233% makes pages just 55% faster“ (https://www.soasta.com/blog/more-bandwidth-isnt-a-magic-bullet-for-web-performance/)
•With HTTP/2, no need to shard domains anymore
![Page 24: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/24.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Preload ressources• <link rel="preload" href="/Content/styles.css" as="style">
• http://w3c.github.io/preload/
• Provide ressource hints• <link rel="dns-prefetch">
• <link rel="preconnect">
• <link rel="prerender">
• https://w3c.github.io/resource-hints/
![Page 25: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/25.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Minify JavaScript and CSS"
•Minify files by removing whitespace andcomments•Microsoft Ajax Minifier•Google Closure Compiler•Yahoo! YUI Compressor•…
•Both for external and internal code
![Page 26: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/26.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Absolutely.
•UglifyJS seems to give the best results(YMMV)
•Comparison of a few other tools: http://compressorrater.thruhere.net/ (ifyou want to upload your code there)
![Page 27: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/27.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Avoid Redirects"
• Including redirects that are easy to overlook
•http://www.xy.tld/dir -> http://www.xy.tld/dir/
![Page 28: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/28.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Remove Duplicate Scripts"
•Two of the Top 10 US sites load at least onescript twice
•Firefox is caching automatically, Internet Explorer is not
•Both browsers execute duplicate scripts twice, though
![Page 29: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/29.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Configure ETags"
•ETag HTTP header contains a kind of fingerprintfor a ressource•ETag: "abcd123-456-789abcde"
•On subsequent requests the browserdetermines with an ETag whether the resourcehas been changed
•Different ETags when using multiple web servers!
![Page 30: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/30.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Do not use Last-Modified
•Do not use ETags
•Avoid zombie 304 requests
![Page 31: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/31.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• "Make Ajax Cacheable"
•Use the preceding rules for Ajax, as well• "Gzip Components"• "Reduce DNS Lookups"• "Minify JavaScript"• "Avoid Redirects"• "Configure Etags"
![Page 32: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/32.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
•Optimize JavaScript• Specifically declare local variables with var• Cache variables• Cache functions• Amend string concatenations (not always
recommended!)•Minimize DOM layout operations (first read, then
batch-write)
•Newer browsers require updated strategies
![Page 33: MYTHBUSTING WEB PERFORMANCEfiles.informatandm.com/uploads/2018/10/Mythbusting_Web_Performance... · MYTHBUSTING WEB PERFORMANCE #ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM Christian](https://reader033.vdocuments.mx/reader033/viewer/2022042306/5ed182be4aceee121c1053cc/html5/thumbnails/33.jpg)
#ITDEVCONNECTIONS | ITDEVCONNECTIONS.COM
• Thank you!
• @chwenz