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.

An introduction to HTTP/2 & Service Workers for SEOs

4,992 views

Published on

SEOs need to have a base understanding of how the web works, which should include an understanding of HTTP2 and Service Workers. In this session Tom outlines the main things that SEOs need to understand.

Published in: Internet
  • Will it benefit if I keep serving assets through a cdn and still enable http2 for html pages? I.e. If I don't use server push? Is it a requirement for server push that domain serving html and assets has to be same?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

An introduction to HTTP/2 & Service Workers for SEOs

  1. 1. An introduction to HTTP/2 & Service Workers for SEOs @TomAnthonySEO
  2. 2. EMAILS RUNNING OUT OF POWER
  3. 3. 500 MILE EMAIL Connection timeout = 3 milliseconds Speed of light = 299 792 458 m/s Distance = 558 miles
  4. 4. HAD MY OWN 500 MILE EMAIL RECENTLY… … TURNS OUT BROWSERS DON’T WORK LIKE I THOUGHT.
  5. 5. VIEW SOURCE VS INSPECT ELEMENT
  6. 6. VIEW SOURCE VS INSPECT ELEMENT HTML FROM THE SERVER HTML AFTER JS RENDERS
  7. 7. WRONG! JS CAN ALTER THIS TOO! HTML AFTER JS RENDERS
  8. 8. HTTP2 SERVICE WORKERS
  9. 9. HTTP2 1
  10. 10. HTTP
  11. 11. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1
  12. 12. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com
  13. 13. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com User-Agent: my-browser
  14. 14. ANATOMY OF A RESPONSE HTTP/1.1 200 OK Content-Type: text/html HEADERS
  15. 15. 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
  16. 16. 1 REQUEST IS FOR 1 FILE
  17. 17. HTTP TRUCKS! Imagine an HTTP request is a truck, sent from your browser to a server to collect a web page.
  18. 18. TCP/IP & HTTP TCP is the road; the transport layer for HTTP.
  19. 19. HTTP REQUESTS Outbound trucks carry an HTTP request. Request
  20. 20. HTTP RESPONSES Returning trucks carry an HTTP response. Response
  21. 21. PROBLEM! ANYONE CAN LOOK INTO PASSING TRUCKS With HTTP, people could look into the trucks, and find out all your secrets!!
  22. 22. HTTPS With HTTPS the road is the same, but we drive through a tunnel.
  23. 23. HTTPS REQUESTS ARE IDENTICAL TO HTTP The trucks in the tunnel are still exactly the same.
  24. 24. HTTP sounds great & HTTPS is secure. Why change? ?
  25. 25. PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME Even the fastest trucks can only go at the speed of light!
  26. 26. LATENCY & ROUND TRIP TIMES Longer roads mean it takes longer for a response to come back.
  27. 27. PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS)
  28. 28. NUMBER OF ASSETS ON PAGES HAS INCREASED
  29. 29. OFTEN 50-100 SEPARATE HTTP REQUESTS
  30. 30. PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY
  31. 31. What does all of this add up to? !
  32. 32. BROWSER COLLECTING A PAGE Imagine the browser wants to render a page.
  33. 33. EVERY ROUND TRIP TAKES TIME 50ms to get to the server.
  34. 34. EVERY ROUND TRIP TAKES TIME Server takes 50ms to make page.
  35. 35. EVERY ROUND TRIP TAKES TIME 50ms to get back to the browser.
  36. 36. HTML RESPONSE PROMPTS MORE ROUND TRIPS Once it has the HMTL the browser discovers it needs more files.
  37. 37. 1 CONNECTION CAN HANDLE 1 REQUEST Every truck needs its own road.
  38. 38. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS We can have more roads and more trucks.
  39. 39. BUT CONNECTIONS TAKE TIME TO OPEN Think of it as a steamroller laying down the road.
  40. 40. BUT CONNECTIONS TAKE TIME TO OPEN Opening a new connection requires a full round trip, before we can send a truck down it.
  41. 41. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX Opening more has diminishing returns, and other issues.
  42. 42. THIS MEANS SOME REQUESTS HAVE TO WAIT Trucks have to queue line up for a road.
  43. 43. BLOCKED REQUESTS Only 6 requests being run at a time.
  44. 44. 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/
  45. 45. THIS IS WHY PEOPLE MADE SPRITE SETS
  46. 46. CDNS MOVE THINGS CLOSER & REDUCE LATENCY
  47. 47. HTTP/2 to the rescue!
  48. 48. MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION Now multiple trucks can be on the road at once!
  49. 49. HTTP/1.1 WATERFALL - BLOCKED REQUESTS
  50. 50. HTTP/2 WATERFALL - NO BLOCKING
  51. 51. HTTP2 REQUESTS ARE STILL THE SAME The content of the trucks are still the same. Just a new road / traffic management system!
  52. 52. HTTP/2 FORMAT IS THE SAME AS HTTP/1.1 GET /anchorman/ HTTP/2 host: www.ronburgundy.com user-agent: my-browser
  53. 53. 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
  54. 54. HTTP/2 RESPONSE CODES UNCHANGED 200 404301
  55. 55. HTTP2 ALLOWS ‘SERVER PUSH’ With Server Push, a single request is sent, but the server sends multiple responses.
  56. 56. HTTP2 ALLOWS ‘SERVER PUSH’ If the server knows the HTML requires other assets, it can send them back with the HTML.
  57. 57. HTTP2 REQUIRES HTTPS In order to get the better traffic management, you need a tunnel!
  58. 58. How can I get HTTP/2? ?
  59. 59. Your devs don’t need to do anything! The server does all the work.
  60. 60. CDNS CAN DO IT FOR YOU! HTTP/2 between visitors and CDN HTTP/1.1 between CDN and Server
  61. 61. Does Google notice if I have HTTP/2? ?
  62. 62. GOOGLEBOT DOES NOT CRAWL https://moz.com/blog/challenging-googlebot-experiment
  63. 63. THUS IT WON’T IMPROVE SCORES IN GSC Google’s WRS doesn’t use it at all, currently.
  64. 64. BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED
  65. 65. CHROME USER EXPERIENCE REPORTS
  66. 66. HTTP/2 TAKEAWAYS
  67. 67. It can be a quick performance win. CDNs can make deployment ‘easy’.
  68. 68. HTTP/2 requires HTTPS*. Likely to see last holds outs migrating to HTTPS. (* in all major browsers)
  69. 69. Enable the ‘Protocol’ column.
  70. 70. SPDY was HTTP/2’s predecessor. It is being retired.
  71. 71. Chrome Extension: https://dis.tl/showhttp2
  72. 72. HTTP/1.1 and HTTP/2 exist together. Browsers will fall back to HTTP/1.1.
  73. 73. Moving to HTTP/2 is not a migration.
  74. 74. 2 SERVICE WORKERS
  75. 75. WEBSITE: ’TRADITIONAL’ MODEL
  76. 76. WEBSITE: ’TRADITIONAL’ MODEL Server generates HTML SERVER
  77. 77. WEBSITE: ’TRADITIONAL’ MODEL Server generates HTML CSS controls layout SERVER
  78. 78. WEBSITE: ’TRADITIONAL’ MODEL Server generates HTML Javascript adds behaviour CSS controls layout SERVER
  79. 79. SINGLE PAGE APPLICATION MODEL Frameworks like React and Angular.
  80. 80. SINGLE PAGE APPLICATION MODEL Server supplies stub HTML SERVER
  81. 81. SINGLE PAGE APPLICATION MODEL Server supplies stub HTML CSS controls layout SERVER
  82. 82. SINGLE PAGE APPLICATION MODEL Server supplies stub HTML Main logic in Javascript CSS controls layout SERVER
  83. 83. SINGLE PAGE APPLICATION MODEL HTML built in browser Javascript code manages everything CSS controls layout SERVER
  84. 84. 2 THINGS TURN AN SPA INTO A PWA SERVICE WORKER MANIFEST
  85. 85. MANIFEST Essentially “Settings” for your app (theme colour etc.)
  86. 86. “A service worker is a script that your browser runs in the background, separate from a web page.” “
  87. 87. SERVICE WORKERS ENABLE… Background Sync Push Notifications Offline Functionality Intelligent Caching
  88. 88. CLIENT SIDE JAVASCRIPT ALREADY AN SEO PAIN POINT I ♥ SEO
  89. 89. Service Workers can exist outside of a PWA too. (which I think we will see more of) So today, focusing just on them.
  90. 90. Where do Service Workers live? ?
  91. 91. BROWSER & SERVER COMMUNICATION GET / HTTP/1.1 <html></html> BROWSER SERVER
  92. 92. IN REALITY, BROWSER IS MORE COMPLEX GET / HTTP/1.1 BROWSER SERVER CORE CACHE
  93. 93. CACHE IS CHECKED BEFORE REQUEST SENT TO SERVER GET / HTTP/1.1 BROWSER SERVER CORE CACHE GET / HTTP/1.1
  94. 94. CACHE IS CHECKED BEFORE REQUEST SENT TO SERVER GET / HTTP/1.1 BROWSER SERVER <html></html> CORE CACHE GET / HTTP/1.1 <html></html>
  95. 95. SUBSEQUENT REQUESTS MAY BE HANDLED BY CACHE GET / HTTP/1.1 BROWSER SERVER <html></html> CORE CACHE
  96. 96. CTRL-REFRESH (F5) REFRESHES THE CACHE BROWSER SERVER CORE CACHE GET / HTTP/1.1 <html></html> <html></html>
  97. 97. CORE NETWORK TAB IS NOT SAME AS ACTUAL NETWORK! GET / HTTP/1.1 CACHE GET / HTTP/1.1 BROWSER SERVER <html></html><html></html> View Source & Network Tab show this
  98. 98. CORE NETWORK TAB IS NOT SAME AS ACTUAL NETWORK! GET / HTTP/1.1 CACHE BROWSER SERVER <html></html> View Source & Network Tab show this Even if nothing went over the actual network
  99. 99. CACHED RESPONSE IN NETWORK TAB It came from the cache, but still we see a ‘response’
  100. 100. CORE WHERE SERVICE WORKERS FIT IN CACHE BROWSER SERVICE WORKER SERVER
  101. 101. CORE YOUR JAVASCRIPT CODE EMBEDS THE BROWSER CACHE BROWSER SERVICE WORKER Code doesn’t run ‘on a page’, but in the browser SERVER
  102. 102. CORE SERVICE WORKERS CAN INTERCEPT REQUESTS CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 SERVER
  103. 103. CORE IT MAY JUST PASS IT ON CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 SERVER
  104. 104. CORE IT MAY JUST PASS IT ON CACHE BROWSER SERVER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 <html></html> GET / HTTP/1.1
  105. 105. CORE IT MAY JUST PASS IT ON CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 <html></html><html></html> SERVER GET / HTTP/1.1 <html></html>
  106. 106. CORE JAVASCRIPT CAN RUN AT THIS POINT… CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 SERVER
  107. 107. CORE FOR EXAMPLE… CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 SERVER I recognise this page, I’m going to prefetch some things!
  108. 108. CORE OR… CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 SERVER I can see I have the CSS, so I’ll use that, but will update it for next time.
  109. 109. CORE JAVASCRIPT CAN ALSO RUN AT THIS POINT CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 <html></html> SERVER GET / HTTP/1.1 <html></html>
  110. 110. CORE FOR EXAMPLE… CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 <html></html> SERVER GET / HTTP/1.1 <html></html>I am going to customise this page for the user.
  111. 111. CORE SERVICE WORKERS CAN EDIT WHAT YOU SEE CACHE BROWSER SERVICE WORKER GET / HTTP/1.1 GET / HTTP/1.1 <html></html><html></html> View Source & Network Tab show this SERVER GET / HTTP/1.1 <html></html>
  112. 112. THUS VIEW SOURCE JS ENABLED JS DISABLED
  113. 113. BUT THE NETWORK TAB WILL BE ‘TRUE’, RIGHT?! JS ENABLED JS DISABLED
  114. 114. BUT THE NETWORK TAB WILL BE ‘TRUE’, RIGHT?! JS ENABLED JS DISABLED
  115. 115. How to spot Service Workers
  116. 116. SERVICE WORKERS REQUIRE HTTPS Service Workers are very powerful. With great power comes great responsibility.
  117. 117. REGISTERING A SERVICE WORKER
  118. 118. COG IN NETWORK PANEL = SERVICE WORKER
  119. 119. APPLICATION TAB
  120. 120. CAN CLEAR THEM HERE TOO
  121. 121. chrome://serviceworker-internals/ 
  122. 122. CTRL-REFRESH (F5) BYPASSES SERVICE WORKERS* GET / HTTP/1.1 BROWSER <html></html> CORE CACHE SERVICE WORKER <html></html> SERVER (* but not in View Source)
  123. 123. Googlebot (and WRS) doesn’t use Service Workers Not directly visible to Google, but affects Chrome User Experience Reports data.
  124. 124. 3 TAKE AWAYS
  125. 125. Spot HTTP/2: Turn on ‘Protocol’ column in Chrome, and/or install the Chrome extension.
  126. 126. Be wary of cutting edge advice: e.g HTTP/2 Server Push
  127. 127. Be wary of outdated advice: HTTP/2 makes some old school performance tricks redundant.
  128. 128. Spot Service Workers: Look for the cog in Network panel.
  129. 129. Detect Service Worker Changes: View source with JS-disabled
  130. 130. HTTP/2 & Service Workers provide speed improvements for users. Googlebot won’t benefit, but Google will notice.
  131. 131. Thank you! @TomAnthonySEO

×