SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service Workers for SEOs

An introduction to HTTP/2 &
Service Workers for SEOs
@TomAnthonySEO

500 MILE EMAIL
Connection timeout = 3 milliseconds
Speed of light = 299 792 458 m/s
Distance = 558 miles

HAD MY OWN 500 MILE EMAIL RECENTLY…
… TURNS OUT BROWSERS DON’T WORK LIKE I THOUGHT.

VIEW SOURCE VS INSPECT ELEMENT

VIEW SOURCE VS INSPECT ELEMENT
HTML FROM
THE SERVER
HTML AFTER
JS RENDERS

WRONG!
JS CAN ALTER
THIS TOO!
HTML AFTER
JS RENDERS

ANATOMY OF AN HTTP/1.1 REQUEST
GET /anchorman/ HTTP/1.1

Host: www.ronburgundy.com

Host: www.ronburgundy.com
User-Agent: my-browser

ANATOMY OF A RESPONSE
HTTP/1.1 200 OK
Content-Type: text/html HEADERS

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

HTTP TRUCKS!
Imagine an HTTP request is a truck, sent from your
browser to a server to collect a web page.

TCP/IP & HTTP
TCP is the road; the transport layer for HTTP.

HTTP REQUESTS
Outbound trucks carry an HTTP request.
Request

HTTP RESPONSES
Returning trucks carry an HTTP response.
Response

PROBLEM! ANYONE CAN LOOK INTO PASSING TRUCKS
With HTTP, people could look into the trucks,
and find out all your secrets!!

HTTPS
With HTTPS the road is the same, but we drive through a tunnel.

HTTPS REQUESTS ARE IDENTICAL TO HTTP
The trucks in the tunnel are still exactly the same.

HTTP sounds great &
HTTPS is secure.
Why change?
?

PROBLEM #1: SMALL REQUESTS/RESPONSES STILL TAKE TIME
Even the fastest trucks can only
go at the speed of light!

LATENCY & ROUND TRIP TIMES
Longer roads mean it takes longer
for a response to come back.

PROBLEM #2: PAGES MADE OF MANY FILES (MANY REQUESTS)

NUMBER OF ASSETS ON PAGES HAS INCREASED

OFTEN 50-100 SEPARATE HTTP REQUESTS

PROBLEM #3) MOBILE CONNECTIONS INCREASE LATENCY

What does all of
this add up to?
!

BROWSER COLLECTING A PAGE
Imagine the browser wants to render a page.

EVERY ROUND TRIP TAKES TIME
50ms to get to the server.

Server takes 50ms
to make page.

50ms to get back to the browser.

HTML RESPONSE PROMPTS MORE ROUND TRIPS
Once it has the HMTL the browser
discovers it needs more files.

1 CONNECTION CAN HANDLE 1 REQUEST
Every truck needs its own road.

LUCKILY BROWSERS CAN HANDLE MULTIPLE CONNECTIONS
We can have more roads and more trucks.

BUT CONNECTIONS TAKE TIME TO OPEN
Think of it as a steamroller laying down the road.

BUT CONNECTIONS TAKE TIME TO OPEN
Opening a new connection requires a full round trip,
before we can send a truck down it.

BROWSERS TYPICALLY OPEN ABOUT 6 CONNECTIONS MAX
Opening more has diminishing returns,
and other issues.

THIS MEANS SOME REQUESTS HAVE TO WAIT
Trucks have to queue line up for a road.

BLOCKED REQUESTS
Only 6 requests being run at a time.

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/

THIS IS WHY PEOPLE MADE SPRITE SETS

CDNS MOVE THINGS CLOSER & REDUCE LATENCY

MULTIPLEXING ALLOWS MANY REQUESTS PER CONNECTION
Now multiple trucks can be on the road at once!

HTTP/1.1 WATERFALL - BLOCKED REQUESTS

HTTP/2 WATERFALL - NO BLOCKING

HTTP2 REQUESTS ARE STILL THE SAME
The content of the trucks are still the same.
Just a new road / traffic management system!

HTTP/2 FORMAT IS THE SAME AS HTTP/1.1
GET /anchorman/ HTTP/2
host: www.ronburgundy.com
user-agent: my-browser

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

HTTP/2 RESPONSE CODES UNCHANGED
200 404301

HTTP2 ALLOWS ‘SERVER PUSH’
With Server Push, a single request is sent,
but the server sends multiple responses.

HTTP2 ALLOWS ‘SERVER PUSH’
If the server knows the HTML requires other assets,
it can send them back with the HTML.

HTTP2 REQUIRES HTTPS
In order to get the better traffic management, you need a tunnel!

Your devs don’t need to do anything!
The server does all the work.

CDNS CAN DO IT FOR YOU!
HTTP/2 between
visitors and CDN
HTTP/1.1 between
CDN and Server

Does Google notice
if I have HTTP/2?
?

GOOGLEBOT DOES NOT CRAWL
https://moz.com/blog/challenging-googlebot-experiment

THUS IT WON’T IMPROVE SCORES IN GSC
Google’s WRS doesn’t use it at all, currently.

BUT THAT ISN’T HOW GOOGLE EVALUATE SPEED

CHROME USER EXPERIENCE REPORTS

It can be a quick performance win.
CDNs can make deployment ‘easy’.

HTTP/2 requires HTTPS*.
Likely to see last holds outs migrating to HTTPS.
(* in all major browsers)

Enable the ‘Protocol’ column.

SPDY was HTTP/2’s predecessor.
It is being retired.

Chrome Extension:
https://dis.tl/showhttp2

HTTP/1.1 and HTTP/2 exist together.
Browsers will fall back to HTTP/1.1.

Moving to HTTP/2 is
not a migration.

WEBSITE: ’TRADITIONAL’ MODEL

Server generates
HTML
SERVER

Server generates
HTML
CSS controls
layout
SERVER

Server generates
HTML
Javascript adds
behaviour
CSS controls
layout
SERVER

SINGLE PAGE APPLICATION MODEL
Frameworks like React and Angular.

Server supplies
stub HTML
SERVER

Server supplies
stub HTML
CSS controls
layout
SERVER

Server supplies
stub HTML
Main logic
in Javascript
CSS controls
layout
SERVER

HTML built
in browser
Javascript code
manages everything
CSS controls
layout
SERVER

2 THINGS TURN AN SPA INTO A PWA
SERVICE
WORKER
MANIFEST

MANIFEST
Essentially “Settings” for your app (theme colour etc.)

“A service worker is a script that your
browser runs in the background,
separate from a web page.”
“

SERVICE WORKERS ENABLE…
Background Sync
Push Notifications
Offline Functionality
Intelligent Caching

CLIENT SIDE JAVASCRIPT ALREADY AN SEO PAIN POINT
I ♥ SEO

Service Workers can exist outside of a PWA too.
(which I think we will see more of)
So today, focusing just on them.

Where do
Service Workers live?
?

BROWSER & SERVER COMMUNICATION
GET / HTTP/1.1
<html></html>
BROWSER SERVER

IN REALITY, BROWSER IS MORE COMPLEX
GET / HTTP/1.1
BROWSER
SERVER
CORE CACHE

CACHE IS CHECKED BEFORE REQUEST SENT TO SERVER
GET / HTTP/1.1
BROWSER
SERVER
CORE CACHE
GET / HTTP/1.1

CACHE IS CHECKED BEFORE REQUEST SENT TO SERVER
GET / HTTP/1.1
BROWSER
SERVER
<html></html>
CORE CACHE
GET / HTTP/1.1
<html></html>

SUBSEQUENT REQUESTS MAY BE HANDLED BY CACHE
GET / HTTP/1.1
BROWSER
SERVER
<html></html>
CORE CACHE

CTRL-REFRESH (F5) REFRESHES THE CACHE
BROWSER
SERVER
CORE CACHE
GET / HTTP/1.1
<html></html> <html></html>

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

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

CACHED RESPONSE IN NETWORK TAB
It came from the
cache, but still we
see a ‘response’

CORE
WHERE SERVICE WORKERS FIT IN
CACHE
BROWSER
SERVICE
WORKER
SERVER

CORE
YOUR JAVASCRIPT CODE EMBEDS THE BROWSER
CACHE
BROWSER
SERVICE
WORKER Code doesn’t run
‘on a page’, but in
the browser
SERVER

CORE
SERVICE WORKERS CAN INTERCEPT REQUESTS
CACHE
BROWSER
SERVICE
WORKER
GET / HTTP/1.1 SERVER

CORE
IT MAY JUST PASS IT ON
CACHE
BROWSER
SERVICE
WORKER
GET / HTTP/1.1 GET / HTTP/1.1
SERVER

CORE
CACHE
BROWSER
SERVER
SERVICE
WORKER
GET / HTTP/1.1
GET / HTTP/1.1
<html></html>
GET / HTTP/1.1

CORE
CACHE
BROWSER
SERVICE
WORKER
SERVER
GET / HTTP/1.1
<html></html>

CORE
JAVASCRIPT CAN RUN AT THIS POINT…
CACHE
BROWSER
SERVICE
WORKER

CORE
FOR EXAMPLE…
CACHE
BROWSER
SERVICE
WORKER
I recognise this page,
I’m going to prefetch
some things!

CORE
OR…
CACHE
BROWSER
SERVICE
WORKER
I can see I have
the CSS, so I’ll use that,
but will update it for
next time.

CORE
JAVASCRIPT CAN ALSO RUN AT THIS POINT
CACHE
BROWSER
SERVICE
WORKER
<html></html>
SERVER
GET / HTTP/1.1
<html></html>

CORE
FOR EXAMPLE…
CACHE
BROWSER
SERVICE
WORKER
<html></html>
SERVER
GET / HTTP/1.1
<html></html>I am going to customise
this page for the user.

CORE
SERVICE WORKERS CAN EDIT WHAT YOU SEE
CACHE
BROWSER
SERVICE
WORKER
View Source &
Network Tab
show this
SERVER
GET / HTTP/1.1
<html></html>

THUS VIEW SOURCE
JS ENABLED JS DISABLED

BUT THE NETWORK TAB WILL BE ‘TRUE’, RIGHT?!
JS ENABLED JS DISABLED

SERVICE WORKERS REQUIRE HTTPS
Service Workers are very powerful.
With great power comes great responsibility.

COG IN NETWORK PANEL = SERVICE WORKER

chrome://serviceworker-internals/

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)

Googlebot (and WRS) doesn’t
use Service Workers
Not directly visible to Google,
but affects Chrome User Experience Reports data.

Spot HTTP/2:
Turn on ‘Protocol’ column in Chrome,
and/or install the Chrome extension.

Be wary of cutting edge advice:
e.g HTTP/2 Server Push

Be wary of outdated advice:
HTTP/2 makes some old school
performance tricks redundant.

Spot Service Workers:
Look for the cog in Network panel.

Detect Service Worker Changes:
View source with JS-disabled

HTTP/2 & Service Workers provide
speed improvements for users.
Googlebot won’t benefit,
but Google will notice.

SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service Workers for SEOs

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service Workers for SEOs

Semelhante a SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service Workers for SEOs (20)

Mais de Distilled

Mais de Distilled (20)

Último

Último (20)

SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service Workers for SEOs