The internet for SEOs by Roxana Stingu

@roxanastingu | #brightonSE
The internet for SEOs
Roxana Stingu | Alamy
slideshare.net/RoxanaStingu
@ROXANASTINGU

– Eric Schmidt, Some guy working at
GOOGLE
“The internet is the first
thing that humanity has
built that humanity
doesn't understand.”

WHY AM I DOING THIS
TALK?

CDN TCP IP HTTP UDP URL URI DNS TLS CDN TCP IP HTTP UDP URL URI DNS TLS CDN TCP IP
HTTP UDP URL URI DNS TLS CDN TCP IP HTTP UDP URL URI DNS TLS CDN TCP IP HTTP UDP URL
URI DNS TLS CDN TCP IP HTTP UDP URL URI DNS TLS CDN TCP IP HTTP UDP URL URI DNS TLS
NETWORKING

HOW THE INTERNET
WORKS

IT ALL STARTS WITH THE USER
user

USER USES A BROWSER
user
browse
r

THE BROWSER IS FOUND ON A
DEVICE
user
browse
r
device

A DEVICE IS CONNECTED TO A
ROUTER
user
browse
r
device
Router

ROUTER COMMUNICATES WITH
ISP
user
browse
r
device
I.S.P.
Router

ISP ENABLES ACCESS TO THE
INTERNET
user
browse
r
device
I.S.P.
The
Internet
Router

INTERNET CONNECTS TO WEB
SERVERS
user
browse
r
device
I.S.P.
The
Internet
Servers
Router

WEBSERVER HOSTS WEBPAGES
user
browse
r
device
I.S.P.
The
Internet
Servers
Router
webpages

INTERNET HARDWARE

The
Internet

BANDWIDTH AND LATENCY
WIFI CABLE ISP ISP ETHERNE
T
...
LATENCY (MS)
BANDWIDTH
(Mbps)

INTERNET SOFTWARE

THE TCP/IP MODEL
HTTP, TLS, DNS
APPLICATIO
N
INTERNET
IP (v4, v6)
TCP, UDP
TRANSPOR
T
ETHERNET,
WIRELESS LAN
PHYSICAL

GET layout.css
THE HTTP PROTOCOL
GET image.png
GET page.html
GET video.mp4
GET ads.jpg
The
Internet
webserver
Video server
Ad server

HTTP PROTOCOL VERSION 1
3 TCP
Connections
HTTP 1.1

HTTP PROTOCOL VERSION 2
1 TCP
Connection
HTTP/2

CLIENT TO SERVER
COMMUNICATION

browse
r
Servers
Networking
Reques
t
Respons
e

WHAT IS A REQUEST?
browse
r
Servers
Hey there mister
WebServer, can I have
this resource, pretty
please?
Request
Line
Headers Body

GET /software/htp/cics/index.html HTTP/1.1
METHOD PATH PROTOCO
L
VERSION

DIFFERENT TYPES OF METHODS
GE
T
POS
T
PU
T
DELET
E
TRAC
E
OPTIONS CONNECT
PATC
H

GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101
Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

THE RESPONSE HEADERS
200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-
Age=31449600;
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com

HTTP HEADERS:
CANONICALISATION
Link: <http://www.example.com/downloads/white-paper.pdf>;
rel="canonical"

HTTP HEADERS: HREFLANG
Link:
<http://example.com/file.pdf>; rel="alternate"; hreflang="en",
<http://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-
ch",
<http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"

HTTP HEADERS: ROBOTS
X-Robots-Tag: noarchive
X-Robots-Tag: unavailable_after: 25 Jun 2021 15:00:00 PST
X-Robots-Tag: googlebot: nofollow
X-Robots-Tag: otherbot: noindex, nofollow

HTTP HEADERS: CACHING
Cache-Control: no-cache
Cache-Control: max-age=0, must-revalidate
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

REQUEST TIMINGS

DOMAIN NAME SYSTEM (DNS)
https://www.website.com/page.htm
l
172.217.14.206
DNS

1
2
3
4
5
6
6
TLS 1.2

1
2
3
4
5
6
6
TLS 1.3

browse
r
Servers
Request
TCP
HANDSHAKE
SSL
HANDSHAKE
DATA
TRANSFER
APP
CACHE
DNS
Lookup

REQUEST TIMINGS IN DEV TOOLS
Initial Connection
QUEUEING
STALLED
DNS Lookup
CONNECTION SETUP
SSL
Request/Response
Content Download
Request sent
Waiting TTFB

UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT
CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI
TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID
TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP
FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP
LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP
FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS
CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM
JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM
CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI
DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS
UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT
CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI
TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID
TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP
FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP
LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP
FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS
CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM
JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM
CSSOM JS CRP FCP LCP FID TTI TBT CLS UI DOM CSSOM JS CRP FCP LCP FID TTI TBT CLS UI
BROWSERS

WHAT IS A BROWSER?
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKIN
G
JS
INTERPRETE
R
UI BACKEND
DATA
PERSISTENCE

THE RENDERING ENGINE
browser Server
3c 68 65 61 64 3e 3c
74 69 74 6c 65 3e 50
6c 65 61 73 65 20 77
65 61 72 20 61 20 6d
61 73 6b 21 21 21 3c
2f 74 69 74 6c 65 3e
3c 2f 68 65 61 64 3e

FROM BYTES OF HTML TO DOM
3c 68 74 6d 6c 3e 3c
62 6f 64 79 3e 3c 68
31 3e 50 6c 65 61 73
65 20 77 65 61 72 20
61 20 6d 61 73 6b 21
21 3c 2f 68 31 3e 0a
<html><body><h1>Plea
se wear a
mask!!</h1>
StartTag: html
StartTag: body
StartTag: h1
Please wear a mask!!
EndTag: h1
Bytes Characters Tokens

THE TREE BUILDER
Nodes
DOM
html body h1 Please wear a mask!!!
html
body
Please wear a mask!!
h1
h1

THE CSSOM
html
body
h1
font-
size:12
color:red

DOM + CSSOM = RENDER TREE
html
body
h1
font-
size:12
color:red
Please wear a
mask!!
head meta

HTM
L
CSS
JS
Building DOM Building DOM
Blocked
Fetch CSS Build CSSOM
Script fetch Execution
THE JS INTERPRETER

ASYNC JS LOADING
HTM
L
CSS
JS
Building DOM Building DOM
Blocked

DEFERRED JS LOADING
HTM
L
CSS
JS
Building DOM

LAYOUT

PAINT
Wear a mask!!
H1{
z-index: 1;
position:
absolute;
}
Div{
z-index: 0;
}

COMPOSITING

DOM CSSOM
Render
Tree
Layout Paint COMPOSI
TING
THE CRITICAL RENDERING PATH

CHROME DEV TOOLS -
PERFORMANCE TAB

CHROME DEV TOOLS - MAIN
THREAD

CHROME DEV TOOLS -
PERFORMANCE
FP and FCP LCP DCL

RESOURCES
Developer.mozilla.org
Web Performance
Developers.google.com
Inside look at modern
web browser
Web.dev
Measuring performance
and user experience
High performance
browser networking
by Ilya Grigorik

FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
THANK YOU

The internet for SEOs by Roxana Stingu

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie The internet for SEOs by Roxana Stingu

Ähnlich wie The internet for SEOs by Roxana Stingu (20)

Mehr von Roxana Stingu

Mehr von Roxana Stingu (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The internet for SEOs by Roxana Stingu