HTTP/2 BrightonSEO 2018
HTTP/2 BrightonSEO 2018
1. Tom Anthony Distilled An introduction to HTTP/2 for SEOs @TomAnthonySEO https://www.slideshare.net/tomanthony/
2. EMAILS RUNNING OUT OF POWER
3. 500 MILE EMAIL Connection timeout = 6 milliseconds Speed of light = 299 792 458 m/s Distance = 558 miles
4. HTTP1 HTTP2 TAKEAWAYS
5. WHY HTTP/2 MATTERS
6. HTTP/1.1
7. HTTP @TomAnthonySEO #brightonSEO
8. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 @TomAnthonySEO #brightonSEO
9. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com @TomAnthonySEO #brightonSEO
10. ANATOMY OF AN HTTP/1.1 REQUEST GET /anchorman/ HTTP/1.1 Host: www.ronburgundy.com User-Agent: my-browser @TomAnthonySEO #brightonSEO
11. ANATOMY OF A RESPONSE HTTP/1.1 200 OK Content-Type: text/html HEADERS @TomAnthonySEO #brightonSEO
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. 1 REQUEST IS FOR 1 FILE @TomAnthonySEO #brightonSEO
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. TCP/IP & HTTP TCP is the road; the transport layer for HTTP. @TomAnthonySEO #brightonSEO
16. HTTP REQUESTS Outbound trucks carry an HTTP request. Request @TomAnthonySEO #brightonSEO
17. HTTP RESPONSES Returning trucks carry an HTTP response. Response @TomAnthonySEO #brightonSEO
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. HTTPS With HTTPS the road is the same, but we drive through a tunnel. @TomAnthonySEO #brightonSEO
20. HTTPS REQUESTS ARE IDENTICAL TO HTTP The trucks in the tunnel are still exactly the same. @TomAnthonySEO #brightonSEO
21. HTTP sounds great & HTTPS is secure. Why change? ?
22. PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME Even the fastest trucks can only go at the speed of light! @TomAnthonySEO #brightonSEO
23. LATENCY & ROUND TRIP TIMES Longer roads mean it takes longer for a response to come back. @TomAnthonySEO #brightonSEO
24. PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS) @TomAnthonySEO #brightonSEO
25. NUMBER OF ASSETS ON PAGES HAS INCREASED @TomAnthonySEO #brightonSEO
26. OFTEN 50-100 SEPARATE HTTP REQUESTS @TomAnthonySEO #brightonSEO
27. PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY @TomAnthonySEO #brightonSEO
28. What does all of this add up to? !
29. BROWSER COLLECTING A PAGE Imagine the browser wants to render a page. @TomAnthonySEO #brightonSEO
30. EVERY ROUND TRIP TAKES TIME 50ms to get to the server. @TomAnthonySEO #brightonSEO
31. EVERY ROUND TRIP TAKES TIME Server takes 50ms to make page. @TomAnthonySEO #brightonSEO
32. EVERY ROUND TRIP TAKES TIME 50ms to get back to the browser. @TomAnthonySEO #brightonSEO
33. HTML RESPONSE PROMPTS MORE ROUND TRIPS Once it has the HMTL the browser discovers it needs more files. @TomAnthonySEO #brightonSEO
34. 1 CONNECTION CAN HANDLE 1 REQUEST Every truck needs its own road. @TomAnthonySEO #brightonSEO
35. LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS We can have more roads and more trucks. @TomAnthonySEO #brightonSEO
36. BUT CONNECTIONS TAKE TIME TO OPEN Think of it as a steamroller laying down the road. @TomAnthonySEO #brightonSEO
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. BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX Opening more has diminishing returns, and other issues. @TomAnthonySEO #brightonSEO
39. THIS MEANS SOME REQUESTS HAVE TO WAIT Trucks have to queue line up for a road. @TomAnthonySEO #brightonSEO
40. BLOCKED REQUESTS Only 6 requests being run at a time. @TomAnthonySEO #brightonSEO
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. THIS IS WHY PEOPLE MADE SPRITE SETS @TomAnthonySEO #brightonSEO
43. CDNS MOVE THINGS CLOSER & REDUCE LATENCY
44. HTTP/2 to the rescue!
45. MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION Now multiple trucks can be on the road at once! @TomAnthonySEO #brightonSEO
46. HTTP/1.1 WATERFALL - BLOCKED REQUESTS @TomAnthonySEO #brightonSEO
47. HTTP/2 WATERFALL - NO BLOCKING @TomAnthonySEO #brightonSEO
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. 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. 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. HTTP/2 RESPONSE CODES UNCHANGED 200 404301 @TomAnthonySEO #brightonSEO
52. HTTP2 ALLOWS ‘SERVER PUSH’ With Server Push, a single request is sent, but the server sends multiple responses. @TomAnthonySEO #brightonSEO
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. HTTP2 REQUIRES HTTPS In order to get the better traffic management, you need a tunnel! @TomAnthonySEO #brightonSEO
55. How can I get HTTP/2? ?
56. Your devs don’t need to do anything! The server does all the work.
57. CDNS CAN DO IT FOR YOU! HTTP/2 between visitors and CDN HTTP/1.1 between CDN and Server
58. Does Google notice if I have HTTP/2? ?
59. GOOGLEBOT DOES NOT CRAWL https://moz.com/blog/challenging-googlebot-experiment @TomAnthonySEO #brightonSEO
60. THUS IT WON’T IMPROVE SCORES IN GSC Google’s WRS doesn’t use it at all, currently. @TomAnthonySEO #brightonSEO
61. BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED @TomAnthonySEO #brightonSEO
62. CHROME USER EXPERIENCE REPORTS
63. HTTP/2 TAKEAWAYS
64. It can be a quick performance win. CDNs can make deployment ‘easy’.
65. HTTP/2 requires HTTPS*. Likely to see last holds outs migrating to HTTPS. (* in all major browsers)
66. Enable the ‘Protocol’ column.
67. SPDY was HTTP/2’s predecessor. It is being retired.
68. Chrome Extension: https://dis.tl/showhttp2
69. HTTP/1.1 and HTTP/2 exist together. Browsers will fall back to HTTP/1.1.
70. Moving to HTTP/2 is not a migration.
71. Googlebot won’t benefit, but Google will notice.
72. Thank you! @TomAnthonySEO
반응형
'정보공유' 카테고리의 다른 글
| Super speed around the globe - SearchLeeds 2018 (0) | 2018.11.14 |
|---|---|
| Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017 (0) | 2018.11.14 |
| Next Era of SEO: A Guide to SEO Split-Testing (0) | 2018.11.14 |
| 랩탑으로 tensorflow 도전하기 - tutorial (0) | 2018.11.14 |
| A Beginner's guide to understanding Autoencoder (0) | 2018.11.14 |
| CNN 초보자가 만드는 초보자 가이드 (0) | 2018.11.14 |