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.

SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers

3,895 views

Published on

We all know that site speed matters not only for users but also for search rankings. As marketers, how can we measure and improve the impact of site speed? Mat will cover a range of topics and tools, from the basic quick wins to some of the more surprising and cutting-edge techniques used by the largest websites in the world.

  • Be the first to comment

SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers

  1. 1. Site Speed for Digital Marketers @matclayton
  2. 2. Why should you care about Site Speed?
  3. 3. mixcloud.com mat@mixcloud.com3 2010: Google confirm Site Speed effects rankings
  4. 4. mixcloud.com mat@mixcloud.com4 2018: Google confirm Site Speed also impacts mobile rankings
  5. 5. Site Speed directly impacts conversion rates and your bottom line Read more: https://skilled.co/resources/speed-affects-website-infographic
  6. 6. GoogleBot will crawl more pages Read more: https://mitchfournier.com/2011/08/03/reducing-page-load-times-dramatically-increased-my-googlebot-crawl-ra This is due to Page Speed, which is a component of Site Speed. We’ve seen shifts in indexing based on Site speed as well but often less pronounced.
  7. 7. It is just a better user experience
  8. 8. What are Page Speed and Site Speed?
  9. 9. Page Speed: Time To First Byte Essentially how fast can you get the HTML to the browser
  10. 10. Read more: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics Site Speed: Can mean many things to different people State Purpose Metric Is it happening? Did the navigation start successfully? Has the server responded? First Paint Is it useful? Has enough content rendered that users can engage with it? First Meaningful Paint Is it usable? Can users interact with the page, or is it still busy loading? Time To Interaction
  11. 11. What makes up a website?
  12. 12. Loading Waterfalls - https://www.webpagetest.org/
  13. 13. What makes up a website?
  14. 14. Waterfall View: https://www.webpagetest.org/
  15. 15. Waterfall View: https://www.mixcloud.com
  16. 16. Comparisons and loading videos
  17. 17. How to measure Site Speed
  18. 18. JavaScript: Navigation Timing API
  19. 19. JavaScript: Navigation Timing API
  20. 20. Google Analytics
  21. 21. Pingdom
  22. 22. YSlow: Browser Extension
  23. 23. YSlow: Browser Extension
  24. 24. Google PageSpeed: Site + Chrome Extension
  25. 25. Google LightHouse: Site and Inbuilt in Chrome
  26. 26. Google LightHouse: Overall Performance
  27. 27. Google LightHouse: Opportunities
  28. 28. Connections and Requests
  29. 29. - Anycast DNS - A round trip from San Diego to London ~160mS - Anycast send traffic to a local datacenter ~20ms - A few Anycast Providers - AWS Route53 - CloudFlare - EasyDNS Domain Name Service (DNS) How customers find where your web servers are.
  30. 30. HTTP2 http://www.http2demo.io/
  31. 31. HTTP 1.1 HTTP 2 Why HTTP2 speeds up your site
  32. 32. Head of blocking HTTP 2.0HTTP 1.1
  33. 33. Checking HTTP version
  34. 34. - HTTP Header Compression (HPACK) This will just work, and shaves off a good 1-2k depending on your use of cookies - Request Priorities Allows the browser to set request priorities and ensure that it get the most important ones first - Server Push: WARNING this is very very hard to get right, and you’ll make it worse if you get it wrong Other benefits of HTTP2
  35. 35. Domain sharing HTTP2: Yesterday’s performance best-practices are today’s anti-pa Read more: https://docs.google.com/presentation/d/1_SMrVmiMxW2X1QZ1EcCnLKSosiD0PppP70Q3bw-l5Lg/present?slide=id.g40fbe Sprites
  36. 36. (Things which don’t change)
  37. 37. Invest in Javascript/CSS tooling, specifically bundling
  38. 38. CSS + JS: Concatenate and Minify Read more: https://github.com/mishoo/UglifyJS2
  39. 39. Tree shaking less code == less data to transfer == faster site
  40. 40. Split up your CSS + Javascript into multiple small files (Advanced) This allows you to download more files in parallel and helps with caching You can also Lazy Load Javascript when its required.
  41. 41. Enable GZIP/Deflate
  42. 42. Enable GZIP/Deflate ompression will work well on text based assets: HTML / Javascript / CSS / JSON / XM Usually 2-3x saving
  43. 43. Caching is super important
  44. 44. Caching Requests
  45. 45. Caching Requests: Ensure they have a unique URL
  46. 46. Caching Requests: Headers
  47. 47. Caching Requests Caching works for static assets which never change: Images / CSS / Javascript / Static HTM
  48. 48. Use a Content Delivery Network (CDN) Advantages • Reduce request latency - A round trip from San Diego to London ~160mS - Anycast routes to a local datacenter ~20ms • Caching, reduces server load • SSL Termination done right • DDoS protection • HTTP2 support • Compression / Minify static assets Disadvantages • Cost (free plans available) • Provider dependency • Not all content is cacheable
  49. 49. The more elements in the HTML: • The more bytes there are to download • The slower the Javascript interactions will be • The slower scrolling will be Be especially careful with any parts of the HTML which involve loops Reduce the number of HTML elements Bad Good <div id=“my-list-item“> <li>My Content</li> </div> <li id=“my-list-item“>My Content</li>
  50. 50. Lazy load sections of the page Read more: https://developers.google.com/web/fundamentals/performance/critical-rendering-path Lazy Load in parts of the page which aren’t immediately required, or content critical.
  51. 51. Images are still the number one cause of bloat on the web.”
  52. 52. Fixing Images: BIG BIG WIN
  53. 53. Choose the right image format for the job Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimizatio Vector Simple shapes represented by lines shapes and points. e.g. icons Raster Each pixel has individual colour values. e.g. photos
  54. 54. Vector Images: Use SVG • Prefer vector to raster images when possible • SVG are just simple XML files, exportable by all major image editors • Compress very well using gzip • Its also possible to build images using CSS3 or fonts
  55. 55. Choose the right image format Always check the file size after converting the image, this isn’t a hard and fast set of rules
  56. 56. WebP (Advanced) Read more: https://developers.google.com/speed/webp/gallery1 Typically a 30% saving for users with support for WebP (Chrome only)
  57. 57. Ensure raster images are the correct size: BIG BIG BIG WIN Responsive images can cause a lot of additional bloat Read more: https://internetingishard.com/html-and-css/responsive-images
  58. 58. Retina images Ship multiple variants, without downloading the large image for all devices
  59. 59. Perception of speed: Progressive JPEG’s Read more: https://optimus.keycdn.com/support/progressive-jpeg/
  60. 60. Perception of speed: Loading states
  61. 61. Perception of speed: Loading states Read more: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos
  62. 62. Caching is super important
  63. 63. <html> <head> <title>My Page</title> <link rel=“stylesheet" href=“my-css.css”> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> </html> Ensure all CSS files required for rendering the page are included in the <head> Optimize CSS includes
  64. 64. Remove any unused CSS (hard to get correct) Read more: https://cscheng.info/2016/05/06/quick-way-to-find-unused-css-with-chrome-devtools.htm UnCSS: https://github.com/uncss/uncss PurifyCSS: https://github.com/purifycss/purifycss
  65. 65. Minimal CSS rendering (Super Advanced) (styled components, this is hard and needs a complete rethink of your design to achieve)
  66. 66. Caching is super important
  67. 67. Optimize <script> positions <html> <head> <title>My Page</title> <script type="text/javascript" src=“my-script.js"></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> </html> Bad This will block rendering, causing the page to stall whilst it parses the Javascrip
  68. 68. Read more: https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup Solution 1: Moved to just above </body><html> <head> <title>My Page</title> </head> <body> <div id="user-greeting">Welcome back, user</div> <script type="text/javascript" src=“my-script.js"></script> </body> </html> <html> <head> <title>My Page</title> <script type="text/javascript" src=“my-script.js" async></script> </head> <body> <div id="user-greeting">Welcome back, user</div> </body> Solution 2: Make the scripts async
  69. 69. Remove all the bloat (aka tracking pixels and 3rd party scripts) At least ensure they are embedded using async, so they don’t block page render I would recommend you setup a regular review and remove session.
  70. 70. In Summary Everything comes down to one of 4 techniques 1. Reduce the number of assets 2. Reduce the size of assets 3. Make the assets load faster (DNS / Caching / CDN’s) 4. Prioritise the order of assets 5. Use HTTP2 ;) It might not be your job, but hopefully you can now point your development team in the right direction
  71. 71. Thank you for listening Any Questions?
  72. 72. Mat Clayton Co-Founder mat@mixcloud.com +44 (0) 7872007851

×