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.

International Site Speed Tweaks - ISS 2017 Barcelona

4,305 views

Published on

Talking international site speed optimization at International Search Summit 2017 in Barcelona, London as well as in Munich covering a broad variety of performance optimization strategies.

Published in: Technology

International Site Speed Tweaks - ISS 2017 Barcelona

  1. 1. Bastian Grimm, Peak Ace AG | @basgr A Complete Guide To Super-Speed Around The World Speed is absolutely everything!
  2. 2. 2 @peakaceag pa.ag You don‘t want to take notes all the time? https://pa.ag/iss17speed
  3. 3. 3 pa.ag@peakaceag Revisited: Pagespeed (Load Time) is a ranking factor Source: http://pa.ag/2iAmA4Y & http://pa.ag/2w9mbv3
  4. 4. 4 @peakaceag pa.ag Google is obsessed with site speed and always pushes for faster sites: Source: http://pa.ag/1cWFCtY
  5. 5. 5 @peakaceag pa.ag Yada-Yada
  6. 6. 6 @peakaceag pa.ag Don‘t get fooled by GSCs „Time spent Downloading“ The data is sh*t and doesn‘t reflect how page load feels at all! Source: http://pa.ag/2xo20YH ▪ Time spent Downloading simply measures the time to complete a HTTP request. ▪ It‘s an average on files such as CSS, JS and others – thus the number is heavily flawed. ▪ The only valid use case seems to be monitoring “the trend”. ▪ The over all numbers does not reflect “PageSpeed”!
  7. 7. 7 @peakaceag pa.ag Lets get this straight - this is what your users expect: Obviously, slow page loading time is a major factor in page abandonment. According to a Nielsen report, 47 % of people expect a website to load within two seconds, and 40 % will leave a website if it does not load fully within three seconds.” „
  8. 8. 8 @peakaceag pa.ag 100 ms can already make a huge difference! A one second delay in page response = -11 % page views and -7 % conversions Mozilla: 2.2 seconds faster to load = +15,4 % download conversions Amazon: 100ms faster = +1% in revenue
  9. 9. 9 @peakaceag pa.ag Yada-Yada
  10. 10. 10 pa.ag@peakaceag Cognitive Load with Stressful Situations Source: Ericsson ConsumerLab, Neurons Inc. 2015 Solving a math problem Experiencing mobile delays Watching a horror movie Standing at the edge of a virtual cliff Watching a melodramatic TV show Waiting in line at retail store Level of stress caused by delays on mobile is comparable to watching a horror movie!
  11. 11. 11 @peakaceag pa.ag Here is what I really do care about: Engagement! Better user engagement all over the board (baseline: MoM before & after roll-out) Source: Google Analytics KPI / MEASUREMENT Bounce Rate (BR) Time-on-Site (ToS) Views per Session (VpS) BEFORE 42.60 % 4:30 min 3.7 pages AFTER 35.95 % 5:14 min 4.8 pages
  12. 12. Fast loading time plays an important role in overall user experience! Performance = User Experience!
  13. 13. Measuring responsiveness of a web server: The amount of time between creating a connection & downloading the contents of a web page. #1 Time to First Byte (TTFB)
  14. 14. 14 @peakaceag pa.ag Free, global TTFB testing with keycdn.com DNS, TTFB & TLS times from 14 different locations at-a-glance Source: https://tools.keycdn.com/performance
  15. 15. 15 @peakaceag pa.ag Should I worry about my TTFB? And what‘s an acceptable result to aim for? More: http://pa.ag/2lKCIRH & http://pa.ag/2mkJTMY
  16. 16. Number of requests, blocking vs. non-blocking, asynchronous requests etc. #2 Optimise HTTP requests
  17. 17. 17 @peakaceag pa.ag Strong increase: # of requests & file-size Average: 304 KB of JS code and 6.4 CSS files per page http://pa.ag/18o6WyO
  18. 18. 18 @peakaceag pa.ag Having to load 23 CSS and JavaScript files sucks! Deichmann (AT) wastes 3 seconds using blocking-resources...
  19. 19. 19 @peakaceag pa.ag Whenever you see this: Reduce the amount of requests! Combine multiple CSS & JavaScripts files to one (per type)
  20. 20. 20 @peakaceag pa.ag For CSS, try: ▪ http://www.phpied.com/cssmin-js/ ▪ http://developer.yahoo.com/yui/compressor/ ▪ http://www.minifycss.com/css-compressor/ For JS, go with: ▪ http://jscompress.com/ ▪ https://github.com/mishoo/UglifyJS ▪ http://www.crockford.com/javascript/jsmin.html ▪ https://developers.google.com/closure/compiler Don‘t forget: Minify CSS & JavaScript files Remove white-spaces, line-brakes, comments & shortens variables/functions
  21. 21. 21 @peakaceag pa.ag For all other images: Put ‘em on a diet! tinyPNG & tinyJPG for smart (lossy) compression & removal of meta-data et al. http://tinypng.com | http://tinyjpg.com
  22. 22. 22 @peakaceag pa.ag For everything else: asynchronous requests where possible Use HTML 5 async, JavaScript workarounds and/or loader: Further information: http://pa.ag/18o8War
  23. 23. Pretty, varied, colourful and ... slow! #3 Custom Webfonts
  24. 24. 24 @peakaceag pa.ag 68% of all websites use at least one non-standard font! Result: 114 KB additional data and on average 2.9 HTTP requests Source: http://pa.ag/1BRUnbe
  25. 25. 25 @peakaceag pa.ag Classic scenario: using external CSS Easy to use … but one big disadvantage: CSS is render-blocking!
  26. 26. 26 @peakaceag pa.ag Load custom fonts with Fontloader Google's asynchronous solution: webfont.js (JavaScript loads first, then CSS)
  27. 27. 27 @peakaceag pa.ag Not very successful and also problematic: FOUT (Flash of unstyled Text) = super annoying flickering Fighting the FOUT: http://pa.ag/1BRWMmu
  28. 28. 28 @peakaceag pa.ag How I usually tackle this: Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
  29. 29. 29 @peakaceag pa.ag Some new stuff to play with: „font-display“ strategies More: http://pa.ag/2eUwVob
  30. 30. pre-fetching of specific DNS, resources and whole pages #4 Pre-Fetching & -Rendering
  31. 31. 31 @peakaceag pa.ag Breakdown of requests for Netdoktor.de (waterfall view) DNS lookup for the asset server (static.netdoktor.de) takes ~300 ms
  32. 32. 32 @peakaceag pa.ag DNS pre-fetching in <head>: 81 ms = 75 % time saved Very useful for other hosts' resources, that you want to use at a later stage.
  33. 33. 33 @peakaceag pa.ag One step further: pre-connecting HTTPS Don't just pre-resolve DNS names, also allow for TLS-handshake.
  34. 34. The next image in a gallery or a larger version of an image (zoom) Critical HTML fragments like boxes or layers (Sign Up/Sign in) What else could I pre-fetch?
  35. 35. Shopping basket (Checkout), as soon as an article is placed inside The next page of a multipage article Also, what could I pre-render?
  36. 36. Another (new) element in mobile SERPs #5 Accelerated mobile pages (AMP)
  37. 37. 37 @peakaceag pa.ag What is not allowed: ▪ external CSS ▪ JavaScript (except async JS) ▪ Flash, Java & Co. AMP: stripped down HTML for maximum performance Google values speed much more than (HTML) features Maximum mobile performance: ▪ less CPU and memory ▪ less bandwidth ▪ less battery usage ▪ Better user experience Keep in mind: ▪ text and images only, everything else is limited ▪ CSS only inline (non-blocking) ▪ CSS with limitation in size ▪ Requires width and height values (i.e. images)
  38. 38. 38 pa.ag@peakaceag Without a doubt, AMP is extremely fast… But totally different UX and only 3 % of AMP visitors actually transition to non-AMP URL Source: http://pa.ag/2fkyXLJ 6231 929 Regular AMP Mobile page load time 0 2000 4000 6000 8000 (ms) Real-world data: mobile load times 5.7x faster
  39. 39. 39 pa.ag@peakaceag … And it gained quite a bit of momentum: Source: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN
  40. 40. 40 @peakaceag pa.ag Multiple publishers said an AMP page view currently generates around half as much revenue as a page view on their full mobile websites.” Via WSJ: publishers still not 100 % happy AMP page views only generate half as much revenue as “real“ mobile sites… Source: http://pa.ag/2fzOWK3 „
  41. 41. 41 @peakaceag pa.ag But… isn‘t AMP only for publishers? AMP for products will be available very soon in a SERP near you! More: https://ampbyexample.com/samples_templates/product/
  42. 42. There is no reason anymore, to not deliver content directly via HTTP/2, which is super fast. #6 Go HTTPS & HTTP/2
  43. 43. 43 @peakaceag pa.ag Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3
  44. 44. 44 @peakaceag pa.ag Top 3 for high volume queries: >60 % HTTPS results! Source: SEMrush Ranking Factors 2017 - https://semrush.com/ranking-factors
  45. 45. 45 @peakaceag pa.ag This is what I think is going to happen: We’ll be seeing more than 90 % of all top 10 results on HTTPS by the end of 2017!” „
  46. 46. 46 @peakaceag pa.ag HTTPS ranking “boost“? Well… maybe… maybe not! Source: http://pa.ag/2ekj4Gi & http://pa.ag/2pRq0PS
  47. 47. 47 @peakaceag pa.ag Soon: HTTPS will be required for AMP?! Source: http://pa.ag/2fuOdYq
  48. 48. 48 @peakaceag pa.ag Even if you don't believe in a “boost” … Since January ‘17 login/credit card fields on HTTP are flagged as “not secure” Source: http://pa.ag/2eh2Trk
  49. 49. 49 @peakaceag pa.ag This is just the beginning: more warnings from Oct. ‘17! Chrome 62 is going to flag every single HTTP URL in incognito mode! Source: http://pa.ag/2rmIAjg
  50. 50. 50 @peakaceag pa.ag Some tools to get you started with HTTP/2: Download and test: https://tools.keycdn.com/http2-test & http://pa.ag/2cG7R3k & https://www.ssllabs.com/ssltest/
  51. 51. So yes, you need HTTPS!
  52. 52. 52 @peakaceag pa.ag Let me make this very, very clear: If you are using HTTPS without HTTP/2 (SPDY) you are doing it all wrong!” „
  53. 53. A bit of everything, for everyone…! #7 More Tools
  54. 54. 54 @peakaceag pa.ag Googles‘ PageSpeed Insights I am really not the biggest fan…!
  55. 55. 55 @peakaceag pa.ag Pingdoms’ waterfall chart is a good starting point: It’s free, easy to use and the data feels simple to consume…
  56. 56. 56 @peakaceag pa.ag Try webpagetest.org – they have it all: A lot of info at-a-glance: TTFB, Keep-Alive, Compression & Caching, Image Usage, CDN & waterfall diagrams
  57. 57. 57 @peakaceag pa.ag WordPress & Site Speed Plug-ins Plugin-Download: ▪ https://wordpress.org/plugins/w3-total-cache/ ▪ https://wordpress.org/plugins/bwp-minify/ ▪ https://wordpress.org/plugins/wp-smushit/ ▪ https://wp-rocket.me/
  58. 58. 58 @peakaceag pa.ag You need to monitor your site continuously over-time! https://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/
  59. 59. Time for some crazy stuff!?
  60. 60. The code and resources required to render the initial view of a web page. #8 Critical Rendering Path
  61. 61. 61 pa.ag@peakaceag Critical Rendering Path Optimisation Initial view (Critical) Below the fold (Not critical)
  62. 62. 62 pa.ag@peakaceag Critical Rendering Path Optimisation Understanding how HTML, CSS & JS will be turned into rendered output Source: http://pa.ag/2vhOt7W Optimizing for performance is all about under- standing what happens between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that's the critical rendering path. „
  63. 63. 63 pa.ag@peakaceag CSSOM: The CSS Object Model body font-size:16px; h1 font-size:22px; p font-size:16px; p font-size:12px; a font-size:12px; img font-size:16px; ▪ The CSSOM is basically a "map" of the CSS styles found on a web page. ▪ It is much like the DOM (Document Object Model), but for the CSS rather than the HTML. ▪ The CSSOM combined with the DOM are used by browsers to display web pages.
  64. 64. 64 pa.ag@peakaceag Web browsers use the CSSOM to render a page To display your webpage, a web browser must take a few steps. For the moment we will simplify it a little and talk about four main steps that will illustrate the importance of the CSSOM:
  65. 65. 65 pa.ag@peakaceag Google doesn‘t do a single GET request for their CSS!
  66. 66. 66 pa.ag@peakaceag How to know what CSS is critically required? Minimum: A snapshot of CSS rules to render a default desktop resolution (e.g. 1280x1024). Better: Various snapshots for mobile phones, pad/s & desktop/s - so lot‘s of work! Source: http://pa.ag/2o4x0uE
  67. 67. 67 @peakaceag pa.ag My current favourite: „Critical“ (using Node / Phantom JS) Renders a site in multiple resolutions & builds a combined and compressed CRP CSS: Critical & criticalCSS on GitHub: http://pa.ag/2wJTZAu & http://pa.ag/2wT1ST9
  68. 68. 68 @peakaceag pa.ag If you just want to play around: criticalcss.com Give it a try: https://criticalcss.com/
  69. 69. 69 @peakaceag pa.ag Putting it all together: Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 KB round trip! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="widght=device-width"> <tittle>CRP loading demo </titltle> <!-- critical CSS goes here --> <style> h1 { color: green; } </style> <!-- use async preload // no IE, Edge & some other uninportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <noscript><link rel="stylesheet" href="non-critical.css"></noscript> <!-- include polyfill for shitty browsers --> <script> *! loadCSS. [c]2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); /*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); </script> </head> <body> </body> </html> inline your critical CSS 1 Loading non-critical CSS async using rel=“preload“ 2 Apply the CSS once it has finished loading via “onload“ 3 Fallback for non-JS requests 4 Implement loadCSS script for older browsers 5 <!-- critical CSS goes here --> <style> h1 { color: green; } </style> <!-- use async preload // no IE, Edge & some other uninportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!-- use async preload // no IE, Edge & some other uninportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <noscript><link rel="stylesheet" href="non-critical.css"></noscript> *! loadCSS. [c]2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); /*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */ (function(){ ... } ());
  70. 70. (A dirty way to prove it probably is…) Is it really worth the effort?
  71. 71. 71 @peakaceag pa.ag Before vs. after comparison: A fresh WordPress setup #1 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, Custom Fonts) No caching & no other performance optimizations
  72. 72. 72 @peakaceag pa.ag Before vs. after comparison: A fresh WordPress setup #2 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, Custom Fonts) W3Total (CSS, JS, HTML minify, caching, compression)
  73. 73. 73 @peakaceag pa.ag Before vs. after comparison: A fresh WordPress setup #3 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, Custom Fonts) W3Total (CSS, JS, HTML minify, caching, compression) + CRP CSS inlined!
  74. 74. 74 @peakaceag pa.ag Performance metrics comparison at-a-glance Rendering starts significantly earlier; this also allows for faster interaction with the site! KPI / MEASUREMENT Load Time Time to first byte (TTFB) Start Render Time to Interactive (TTI) DEFAULT WP 1.357 sec 0.454 sec 1.000 sec 0.956 sec BASIC PERFORMANCE 0.791 sec 0.159 sec 0.600 sec 0.931 sec FULLY OPTIMIZED 0.789 sec 0.157 sec 0.410 sec 0.563 sec (+32%) (+41%)
  75. 75. Highest quality, (more) efficient data compression, smaller files. It hasn’t fully caught on yet, but is very exciting: #9 New image formats
  76. 76. 76 @peakaceag pa.ag 62 % of all web traffic is made up of images... … and 51 % of all URLs load more than 40 images per request. Source: http://pa.ag/1SGDOEo
  77. 77. 77 @peakaceag pa.ag WebP: Google‘s alternative to JPEG, PNG and GIF Lossy and lossless compression, transparency, metadata, colour profiles, animation and much smaller files (30 % vs. JPEG, 80 % vs. PNG) Everything about WebP: http://pa.ag/1EpFWeN
  78. 78. 78 @peakaceag pa.ag We‘re not quite there yet.... Currently only supported by Chrome, Opera and Android Source: http://caniuse.com/#feat=webp
  79. 79. 79 @peakaceag pa.ag You can still use WebP with on-the-fly replacement Swap PNG and JPEG images per re-write (i.e. using .htaccess)
  80. 80. 80 @peakaceag pa.ag You can still use WebP with on-the-fly replacement Swap PNG and JPEG images per re-write (i.e. using .htaccess) VS.
  81. 81. 81 @peakaceag pa.ag Using HTML5 and <picture> with newer templates Browsers, that don‘t support <picture>, will ignore this. <Source> browsers, who don't support WebP, will use <img> as a fallback. More Information: http://responsiveimages.org/
  82. 82. 82 @peakaceag pa.ag This is not the end of the story just yet: FLIF, BPG etc. Left: image size compared to original PNG size Further reading: http://pa.ag/1S5OQmX
  83. 83. Talking about image file-types…
  84. 84. 84 @peakaceag pa.ag Guetzli: -35% smaller JPEGs due to better encoding No new “filetype” needed at all; operating systems and browsers don’t need to adopt! Source: https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
  85. 85. Has anyone heard of this? #10 Brotli
  86. 86. 86 @peakaceag pa.ag
  87. 87. 87 @peakaceag pa.ag 20–25 % higher compression rate (vs. Zopfli/Deflate) A completely new data format: currently only for Firefox and nginx Try it out: http://pa.ag/1XdM1RV & http://pa.ag/1XdMK5w
  88. 88. 88 @peakaceag pa.ag http://pa.ag/iss17speed Always looking for talent! Check out jobs.pa.ag Bastian Grimm bg@pa.ag twitter.com/peakaceag facebook.com/peakaceag www.pa.ag Interested? Here you go:

×