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.

HTTP/2 BrightonSEO 2018

7,109 views

Published on

HTTP/2 can help improve the performance of your site, and is a technology SEOs should have an understanding of. This deck gives you an accessible top level introduction as an SEO.

Published in: Internet
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Best site for flirting and sex in your area you can find there: https://bit.ly/2SlcOnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Our new dating startup, please rate it. We are sure that its the best site for dating. You can visit our site there: https://bit.ly/2SlcOnO
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTTP/2 BrightonSEO 2018

  1. 1. Tom Anthony Distilled An introduction to HTTP/2 for SEOs @TomAnthonySEO https://www.slideshare.net/tomanthony/
  2. 2. EMAILS RUNNING OUT OF POWER
  3. 3. 500 MILE EMAIL Connection timeout = 6 milliseconds Speed of light = 299 792 458 m/s Distance = 558 miles
  4. 4. HTTP1 HTTP2 TAKEAWAYS
  5. 5. WHY HTTP/2 MATTERS
  6. 6. HTTP/1.1
  7. 7. HTTP @TomAnthonySEO #brightonSEO
  8. 8. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 @TomAnthonySEO #brightonSEO
  9. 9. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com @TomAnthonySEO #brightonSEO
  10. 10. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com User-Agent: my-browser @TomAnthonySEO #brightonSEO
  11. 11. ANATOMY OF A RESPONSE HTTP/1.1 200 OK Content-Type: text/html HEADERS @TomAnthonySEO #brightonSEO
  12. 12. ANATOMY OF A RESPONSE HTTP/1.1 200 OK Content-Type: text/html <html> <head> <title>Ron’s Page</title> </head> <body> You stay classy, San Diego! </body> </html> HEADERS BODY @TomAnthonySEO #brightonSEO
  13. 13. 1 REQUEST IS FOR 1 FILE @TomAnthonySEO #brightonSEO
  14. 14. HTTP TRUCKS! Imagine an HTTP request is a truck, sent from your browser to a server to collect a web page. @TomAnthonySEO #brightonSEO
  15. 15. TCP/IP & HTTP TCP is the road; the transport layer for HTTP. @TomAnthonySEO #brightonSEO
  16. 16. HTTP REQUESTS Outbound trucks carry an HTTP request. Request @TomAnthonySEO #brightonSEO
  17. 17. HTTP RESPONSES Returning trucks carry an HTTP response. Response @TomAnthonySEO #brightonSEO
  18. 18. PROBLEM! ANYONE CAN LOOK INTO PASSING TRUCKS With HTTP, people could look into the trucks, and find out all your secrets!! @TomAnthonySEO #brightonSEO
  19. 19. HTTPS With HTTPS the road is the same, but we drive through a tunnel. @TomAnthonySEO #brightonSEO
  20. 20. HTTPS REQUESTS ARE IDENTICAL TO HTTP The trucks in the tunnel are still exactly the same. @TomAnthonySEO #brightonSEO
  21. 21. HTTP sounds great & HTTPS is secure. Why change? ?
  22. 22. PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME Even the fastest trucks can only go at the speed of light! @TomAnthonySEO #brightonSEO
  23. 23. LATENCY & ROUND TRIP TIMES Longer roads mean it takes longer for a response to come back. @TomAnthonySEO #brightonSEO
  24. 24. PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS) @TomAnthonySEO #brightonSEO
  25. 25. NUMBER OF ASSETS ON PAGES HAS INCREASED @TomAnthonySEO #brightonSEO
  26. 26. OFTEN 50-100 SEPARATE HTTP REQUESTS @TomAnthonySEO #brightonSEO
  27. 27. PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY @TomAnthonySEO #brightonSEO
  28. 28. What does all of this add up to? !
  29. 29. BROWSER COLLECTING A PAGE Imagine the browser wants to render a page. @TomAnthonySEO #brightonSEO
  30. 30. EVERY ROUND TRIP TAKES TIME 50ms to get to the server. @TomAnthonySEO #brightonSEO
  31. 31. EVERY ROUND TRIP TAKES TIME Server takes 50ms to make page. @TomAnthonySEO #brightonSEO
  32. 32. EVERY ROUND TRIP TAKES TIME 50ms to get back to the browser. @TomAnthonySEO #brightonSEO
  33. 33. HTML RESPONSE PROMPTS MORE ROUND TRIPS Once it has the HMTL the browser discovers it needs more files. @TomAnthonySEO #brightonSEO
  34. 34. 1 CONNECTION CAN HANDLE 1 REQUEST Every truck needs its own road. @TomAnthonySEO #brightonSEO
  35. 35. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS We can have more roads and more trucks. @TomAnthonySEO #brightonSEO
  36. 36. BUT CONNECTIONS TAKE TIME TO OPEN Think of it as a steamroller laying down the road. @TomAnthonySEO #brightonSEO
  37. 37. BUT CONNECTIONS TAKE TIME TO OPEN Opening a new connection requires a full round trip, before we can send a truck down it. @TomAnthonySEO #brightonSEO
  38. 38. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX Opening more has diminishing returns, and other issues. @TomAnthonySEO #brightonSEO
  39. 39. THIS MEANS SOME REQUESTS HAVE TO WAIT Trucks have to queue line up for a road. @TomAnthonySEO #brightonSEO
  40. 40. BLOCKED REQUESTS Only 6 requests being run at a time. @TomAnthonySEO #brightonSEO
  41. 41. DECREASING LATENCY IMPROVES THINGS A LOT Short roads reduce truck waiting times, and dramatically improve load times. source: https://hpbn.co/primer-on-web-performance/ @TomAnthonySEO #brightonSEO
  42. 42. THIS IS WHY PEOPLE MADE SPRITE SETS @TomAnthonySEO #brightonSEO
  43. 43. CDNS MOVE THINGS CLOSER & REDUCE LATENCY
  44. 44. HTTP/2 to the rescue!
  45. 45. MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION Now multiple trucks can be on the road at once! @TomAnthonySEO #brightonSEO
  46. 46. HTTP/1.1 WATERFALL - BLOCKED REQUESTS @TomAnthonySEO #brightonSEO
  47. 47. HTTP/2 WATERFALL - NO BLOCKING @TomAnthonySEO #brightonSEO
  48. 48. HTTP2 REQUESTS ARE STILL THE SAME The content of the trucks are still the same. Just a new road / traffic management system! @TomAnthonySEO #brightonSEO
  49. 49. HTTP/2 FORMAT IS THE SAME AS HTTP/1.1 GET /anchorman/ HTTP/2 host: www.ronburgundy.com user-agent: my-browser @TomAnthonySEO #brightonSEO
  50. 50. HEADER & BODY HTTP/2 200 content-type: text/html <html> <head> <title>Ron’s Page</title> </head> <body> You stay classy, San Diego! </body> </html> HEADERS BODY @TomAnthonySEO #brightonSEO
  51. 51. HTTP/2 RESPONSE CODES UNCHANGED 200 404301 @TomAnthonySEO #brightonSEO
  52. 52. HTTP2 ALLOWS ‘SERVER PUSH’ With Server Push, a single request is sent, but the server sends multiple responses. @TomAnthonySEO #brightonSEO
  53. 53. HTTP2 ALLOWS ‘SERVER PUSH’ If the server knows the HTML requires other assets, it can send them back with the HTML. @TomAnthonySEO #brightonSEO
  54. 54. HTTP2 REQUIRES HTTPS In order to get the better traffic management, you need a tunnel! @TomAnthonySEO #brightonSEO
  55. 55. How can I get HTTP/2? ?
  56. 56. Your devs don’t need to do anything! The server does all the work.
  57. 57. CDNS CAN DO IT FOR YOU! HTTP/2 between visitors and CDN HTTP/1.1 between CDN and Server
  58. 58. Does Google notice if I have HTTP/2? ?
  59. 59. GOOGLEBOT DOES NOT CRAWL https://moz.com/blog/challenging-googlebot-experiment @TomAnthonySEO #brightonSEO
  60. 60. THUS IT WON’T IMPROVE SCORES IN GSC Google’s WRS doesn’t use it at all, currently. @TomAnthonySEO #brightonSEO
  61. 61. BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED @TomAnthonySEO #brightonSEO
  62. 62. CHROME USER EXPERIENCE REPORTS
  63. 63. HTTP/2 TAKEAWAYS
  64. 64. It can be a quick performance win. CDNs can make deployment ‘easy’.
  65. 65. HTTP/2 requires HTTPS*. Likely to see last holds outs migrating to HTTPS. (* in all major browsers)
  66. 66. Enable the ‘Protocol’ column.
  67. 67. SPDY was HTTP/2’s predecessor. It is being retired.
  68. 68. Chrome Extension: https://dis.tl/showhttp2
  69. 69. HTTP/1.1 and HTTP/2 exist together. Browsers will fall back to HTTP/1.1.
  70. 70. Moving to HTTP/2 is not a migration.
  71. 71. Googlebot won’t benefit, but Google will notice.
  72. 72. Thank you! @TomAnthonySEO

×