A talk about TCP, UDP, IP, DNS, ISP, GET, URI, URN, URL, SSL, TLS, TTFB, HTTP/2, HTML and DOM, or, in translation, a talk about the internet, how requests travel through the network and how browsers handle the response. This has been originally presented during BrightonSEO - Summer 2021.

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

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

3. @roxanastingu | #brightonSE
WHY AM I DOING THIS
TALK?

4. @roxanastingu | #brightonSE
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
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
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
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
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
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
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

5. @roxanastingu | #brightonSE
HOW THE INTERNET
WORKS

6. @roxanastingu | #brightonSE
IT ALL STARTS WITH THE USER
user

7. @roxanastingu | #brightonSE
USER USES A BROWSER
user
browse
r

8. @roxanastingu | #brightonSE
THE BROWSER IS FOUND ON A
DEVICE
user
browse
r
device

9. @roxanastingu | #brightonSE
A DEVICE IS CONNECTED TO A
ROUTER
user
browse
r
device
Router

10. @roxanastingu | #brightonSE
ROUTER COMMUNICATES WITH
ISP
user
browse
r
device
I.S.P.
Router

11. @roxanastingu | #brightonSE
ISP ENABLES ACCESS TO THE
INTERNET
user
browse
r
device
I.S.P.
The
Internet
Router

12. @roxanastingu | #brightonSE
INTERNET CONNECTS TO WEB
SERVERS
user
browse
r
device
I.S.P.
The
Internet
Servers
Router

13. @roxanastingu | #brightonSE
WEBSERVER HOSTS WEBPAGES
user
browse
r
device
I.S.P.
The
Internet
Servers
Router
webpages

14. @roxanastingu | #brightonSE
INTERNET HARDWARE

15. @roxanastingu | #brightonSE
The
Internet

16. @roxanastingu | #brightonSE
BANDWIDTH AND LATENCY
WIFI CABLE ISP ISP ETHERNE
T
...
LATENCY (MS)
BANDWIDTH
(Mbps)

17. @roxanastingu | #brightonSE
INTERNET SOFTWARE

18. @roxanastingu | #brightonSE
THE TCP/IP MODEL
HTTP, TLS, DNS
APPLICATIO
N
INTERNET
IP (v4, v6)
TCP, UDP
TRANSPOR
T
ETHERNET,
WIRELESS LAN
PHYSICAL

19. @roxanastingu | #brightonSE
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

20. @roxanastingu | #brightonSE
HTTP PROTOCOL VERSION 1
3 TCP
Connections
HTTP 1.1

21. @roxanastingu | #brightonSE
HTTP PROTOCOL VERSION 2
1 TCP
Connection
HTTP/2

22. @roxanastingu | #brightonSE
CLIENT TO SERVER
COMMUNICATION

23. @roxanastingu | #brightonSE
browse
r
Servers
Networking
Reques
t
Respons
e

24. @roxanastingu | #brightonSE
WHAT IS A REQUEST?
browse
r
Servers
Hey there mister
WebServer, can I have
this resource, pretty
please?
Request
Line
Headers Body

25. @roxanastingu | #brightonSE
GET /software/htp/cics/index.html HTTP/1.1
METHOD PATH PROTOCO
L
VERSION

26. @roxanastingu | #brightonSE
DIFFERENT TYPES OF METHODS
GE
T
POS
T
PU
T
DELET
E
TRAC
E
OPTIONS CONNECT
PATC
H

27. @roxanastingu | #brightonSE
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

28. @roxanastingu | #brightonSE
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

29. @roxanastingu | #brightonSE
HTTP HEADERS:
CANONICALISATION
Link: <http://www.example.com/downloads/white-paper.pdf>;
rel="canonical"

30. @roxanastingu | #brightonSE
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"

31. @roxanastingu | #brightonSE
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

32. @roxanastingu | #brightonSE
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

33. @roxanastingu | #brightonSE
REQUEST TIMINGS

34. @roxanastingu | #brightonSE
DOMAIN NAME SYSTEM (DNS)
https://www.website.com/page.htm
l
172.217.14.206
DNS

35. @roxanastingu | #brightonSE
1
2
3
4
5
6
6
TLS 1.2

36. @roxanastingu | #brightonSE
1
2
3
4
5
6
6
TLS 1.3

37. @roxanastingu | #brightonSE
browse
r
Servers
Request
TCP
HANDSHAKE
SSL
HANDSHAKE
DATA
TRANSFER
APP
CACHE
DNS
Lookup

38. @roxanastingu | #brightonSE
REQUEST TIMINGS IN DEV TOOLS
Initial Connection
QUEUEING
STALLED
DNS Lookup
CONNECTION SETUP
SSL
Request/Response
Content Download
Request sent
Waiting TTFB

39. @roxanastingu | #brightonSE
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

40. @roxanastingu | #brightonSE
WHAT IS A BROWSER?
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKIN
G
JS
INTERPRETE
R
UI BACKEND
DATA
PERSISTENCE

41. @roxanastingu | #brightonSE
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

42. @roxanastingu | #brightonSE
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

43. @roxanastingu | #brightonSE
THE TREE BUILDER
Nodes
DOM
html body h1 Please wear a mask!!!
html
body
Please wear a mask!!
h1
h1

44. @roxanastingu | #brightonSE
THE CSSOM
html
body
h1
font-
size:12
color:red

45. @roxanastingu | #brightonSE
DOM + CSSOM = RENDER TREE
html
body
h1
font-
size:12
color:red
Please wear a
mask!!
head meta

46. @roxanastingu | #brightonSE
HTM
L
CSS
JS
Building DOM Building DOM
Blocked
Fetch CSS Build CSSOM
Script fetch Execution
THE JS INTERPRETER

47. @roxanastingu | #brightonSE
ASYNC JS LOADING
HTM
L
CSS
JS
Building DOM Building DOM
Blocked
Fetch CSS Build CSSOM
Script fetch Execution

48. @roxanastingu | #brightonSE
DEFERRED JS LOADING
HTM
L
CSS
JS
Building DOM
Fetch CSS Build CSSOM
Script fetch Execution

49. @roxanastingu | #brightonSE
LAYOUT

50. @roxanastingu | #brightonSE
PAINT
Wear a mask!!
H1{
z-index: 1;
position:
absolute;
}
Div{
z-index: 0;
}

51. @roxanastingu | #brightonSE
COMPOSITING

52. @roxanastingu | #brightonSE
DOM CSSOM
Render
Tree
Layout Paint COMPOSI
TING
THE CRITICAL RENDERING PATH

53. @roxanastingu | #brightonSE
CHROME DEV TOOLS -
PERFORMANCE TAB

54. @roxanastingu | #brightonSE
CHROME DEV TOOLS - MAIN
THREAD

55. @roxanastingu | #brightonSE
CHROME DEV TOOLS -
PERFORMANCE
FP and FCP LCP DCL

56. @roxanastingu | #brightonSE
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

57. @roxanastingu | #brightonSE
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN FIN
THANK YOU