To build inclusive websites, developers have to consider accessibility, performance and user flows. Crafted source code forms the foundation for thought-through UIs, but it’s not only about the code. Let’s have a look at HTTP, and to be specific, its headers that can have a direct impact on user experience.

1. @stefanjudis
HTTP headers for the
responsible developer

2. My journey
on the web

3. freenet.de

4. uboot.com

5. 1999

6. The web
connects people

7. 2010

8. The web
connects people

9. We connect people!

10. We connect people!
We enable people!

11. We connect people!
We enable people!
We help people!

12. @stefanjudis
www.stefanjudis.com
Heyo,
I'm Stefan!

13. ... and I want to be
a responsible developer

15. 1999

16. 2019

17. 2019
We should be building
for everybody

18. "We don't have
users in/that ..."

19. "We don't have users in/that ..."

20. The challenge
of building
a "good" website

21. Design PerformanceContent Accessibility
DevicesNetworkFrameworks

22. Design PerformanceContent Accessibility
NetworkFrameworks Devices

23. Let's talk HTTP

24. https://the-responsible.dev/
Accept: text/html,application/xhtml+xml,application/xml
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,de;q=0.7
...
Connection: keep-alive
Content-Type: text/html; charset=utf-8
Date: Mon, 11 Mar 2019 12:59:38 GMT
...
Response Body

25. Accept: text/html,application/xhtml+xml,application/xml
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,de;q=0.7
...
https://the-responsible.dev/
Connection: keep-alive
Content-Type: text/html; charset=utf-8
Date: Mon, 11 Mar 2019 12:59:38 GMT
...
Response Body

26. the-responsible.dev

27. How can we use headers
to make this site better?

28. The web is
a scary place

29. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/

30. shoptalkshow.com/episodes/special-one-one-hacker/

31. blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident

32. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers

33. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
We always
rely on others

34. The web
has to be safe!

35. HTTPS

36. HTTP/2 ServiceWorker
getUserMedia() ...

37. whynohttps.com

38. requestmap.webperf.tools

39. Ensure encryption

40. Strict-Transport-Security:
max-age=1000

41. Strict-Transport-Security:
max-age=1000;
includeSubDomains

42. Strict-Transport-Security:
max-age=1000;
includeSubDomains;
preload

43. chromium.googlesource.com/chromium/src/net/+/master/http/
transport_security_state_static.json

44. chromium.googlesource.com/chromium/src/net/+/master/http/
transport_security_state_static.json

46. caniuse.com/#feat=stricttransportsecurity

47. Upgrade
HTTP requests

48. Content-Security-Policy:
upgrade-insecure-requests

49. Limit what's allowed

50. base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-src
manifest-src
media-src
navigate-to
object-src
plugin-types
report-sample
report-to
require-sri-for
sandbox
script-src
strict-dynamic
style-src
upgrade-insecure-requests
worker-src
developer.mozilla.org/en-US/docs/Web/HTTP/CSP

51. base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-src
manifest-src
media-src
navigate-to
object-src
plugin-types
report-sample
report-to
require-sri-for
sandbox
script-src
strict-dynamic
style-src
upgrade-insecure-requests
worker-src
developer.mozilla.org/en-US/docs/Web/HTTP/CSP

52. base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-src
manifest-src
media-src
navigate-to
object-src
plugin-types
report-sample
report-to
require-sri-for
sandbox
script-src
strict-dynamic
style-src
upgrade-insecure-requests
worker-src
developer.mozilla.org/en-US/docs/Web/HTTP/CSP

53. the-responsible.dev

54. <a href="https://..." target="_blank">
Link
</a>

55. <a href="https://..." target="_blank" rel="noopener">
Link
</a>

56. base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-src
manifest-src
media-src
navigate-to
object-src
plugin-types
report-sample
report-to
require-sri-for
sandbox
script-src
strict-dynamic
style-src
upgrade-insecure-requests
worker-src
developer.mozilla.org/en-US/docs/Web/HTTP/CSP

57. <meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://*;">

58. Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-
inline' 'unsafe-eval' just-comments.com www.google-analytics.com
production-assets.codepen.io storage.googleapis.com; style-src 'self'
'unsafe-inline'; img-src 'self' data: images.contentful.com
images.ctfassets.net www.gravatar.com www.google-analytics.com just-
comments.com; font-src 'self' data:; connect-src 'self'
cdn.contentful.com images.contentful.com videos.contentful.com
images.ctfassets.net videos.ctfassets.net service.just-comments.com
www.google-analytics.com; media-src 'self' videos.contentful.com
videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
stefanjudis.report-uri.com/r/d/csp/reportOnly

59. Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google-
analytics.com production-assets.codepen.io storage.googleapis.com;
style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com
images.ctfassets.net www.gravatar.com www.google-analytics.com just-
comments.com; font-src 'self' data:; connect-src 'self'
cdn.contentful.com images.contentful.com videos.contentful.com
images.ctfassets.net videos.ctfassets.net service.just-comments.com
www.google-analytics.com; media-src 'self' videos.contentful.com
videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
stefanjudis.report-uri.com/r/d/csp/reportOnly

60. Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google-
analytics.com production-assets.codepen.io storage.googleapis.com;
style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com
images.ctfassets.net www.gravatar.com www.google-analytics.com just-
comments.com; font-src 'self' data:; connect-src 'self'
cdn.contentful.com images.contentful.com videos.contentful.com
images.ctfassets.net videos.ctfassets.net service.just-comments.com
www.google-analytics.com; media-src 'self' videos.contentful.com
videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
stefanjudis.report-uri.com/r/d/csp/reportOnly

61. Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com www.google-
analytics.com production-assets.codepen.io storage.googleapis.com;
style-src 'self' 'unsafe-inline'; img-src 'self' data: images.contentful.com
images.ctfassets.net www.gravatar.com www.google-analytics.com just-
comments.com; font-src 'self' data:; connect-src 'self'
cdn.contentful.com images.contentful.com videos.contentful.com
images.ctfassets.net videos.ctfassets.net service.just-comments.com
www.google-analytics.com; media-src 'self' videos.contentful.com
videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame-
ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src
'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https://
stefanjudis.report-uri.com/r/d/csp/reportOnly

62. Content-Security-Policy:
default-src 'self';
script-src 'sha256-blL...'
<script>
console.log('Inline script executing ...');
</script>

63. Content-Security-Policy:
default-src 'self';
script-src 'nonce-abc...'
<script nonce="abcdef">
console.log('Inline script executing ...');
</script>

64. caniuse.com/#feat=contentsecuritypolicy

65. *
caniuse.com/#feat=contentsecuritypolicy2
*
* some stuff missing or "misbehaving"

66. httparchive.org

67. How many pages
use CSP?

68. USE CSP DON'T USE CSP
94%
6%

69. USE CSP DON'T USE CSP
94%
6%
You should use it!

70. ALWAYS MONITOR YOUR CSP
REPORTS AND "TEST IN
PRODUCTION" WITH REPORT-
ONLY BEFORE ENFORCING THEM!
Troy Hunt

71. the-responsible.dev/safe/

72. The web is crucial
for people.

73. Your sh** doesn't
work in Africa.
William Imoh

75. You get 6MB for 2Euros
but you have only 24h to
use them! Right...

76. whatdoesmysitecost.com

77. The web
has to be affordable!

78. Don't request
the same content
over and over again

79. Cache-Control:
max-age=31536000, public

80. Cache-Control:
max-age=31536000, public, immutable

81. immutable
developer.mozilla.org/en-US/docs/Web/HTTP/
Headers/Cache-Control

82. csswizardry.com/2019/03/cache-control-for-civilians/

83. Send the right data

84. Accept-Encoding:
gzip, deflate, br

86. But Brotli compression
is so slow!

87. GZIP Brotlivs

88. GZIP Brotlivs
Default
Mode6
11

89. GZIP Brotli
Default
Mode
vs
6
11

90. GZIP Brotli
Optimal
middle
ground
vs
6
4

91. GZIP Brotli
Optimal
middle
ground
vs
6
4
Brotli tends to
compress better
with the same speed

92. GZIP Brotli
Optimal
middle
ground
vs
6
4
You don't have
to do it on the fly...

93. blogs.akamai.com/2016/02/understanding-brotlis-potential.html

94. caniuse.com/#feat=brotli

95. Serve tailored media

96. <picture>
<!-- serve WebP to Chrome and Opera -->
<source
media="(min-width: 50em)"
sizes="50vw"
srcset="/image/thing-200.webp 200w, /image/thing-400.webp 400w,
/image/thing-800.webp 800w, /image/thing-1200.webp 1200w,
/image/thing-1600.webp 1600w, /image/thing-2000.webp 2000w"
type="image/webp">
<source
sizes="(min-width: 30em) 100vw"
srcset="/image/thing-crop-200.webp 200w, /image/thing-crop-400.webp 400w,
/image/thing-crop-800.webp 800w, /image/thing-crop-1200.webp 1200w,
/image/thing-crop-1600.webp 1600w, /image/thing-crop-2000.webp 2000w"
type="image/webp">
<!-- serve JPEG to others -->
<source
media="(min-width: 50em)"
sizes="50vw"
srcset="/image/thing-200.jpg 200w, /image/thing-400.jpg 400w,
/image/thing-800.jpg 800w, /image/thing-1200.jpg 1200w,
/image/thing-1600.jpg 1600w, /image/thing-2000.jpg 2000w">
<source
sizes="(min-width: 30em) 100vw"

97. Accept:
image/webp,
image/apng,
image/*,*/*;q=0.8

98. Accept-CH: Width, Viewport-Width
Accept-CH-Lifetime: 100
Request URL: https://.../header.jpg
Viewport-Width: 980
Width: 1064

99. <img src="/header.jpg" alt="" sizes="100vw" />
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Request URL: https://.../header.jpg
Viewport-Width: 980
Width: 1064

100. <img src="/header.jpg" alt="" sizes="100vw" />
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Request URL: https://.../header.jpg
Viewport-Width: 980
Width: 1064
Serve a tailored version
via server/service worker

101. speaking.jeremy.codes/yD4dKY/take-a-client-hint

102. Save data

103. save-data: on
if ("connection" in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}

105. Let's use the platform
and make these
features more visible

106. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html

107. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
I'm not sure
how I feel about that...

108. timkadlec.com/remembers/2019-03-14-making-sense-of-chrome-lite-pages/

109. Cache-Control:
max-age=31536000, public, no-transform

110. Be aware of CDNs and
proxies – use vary

111. the-responsible.dev/affordable/

112. The web is
with us every day

113. 2018.bloomca.me

114. It has to be respectful!

115. Get stuff "down" as
quickly as possible

116. Link:
</fwdays.svg>; rel=preload; as=image
<link rel="preload" href="/fwdays.svg" as="image">

117. Link:
</fwdays.svg>; rel=preload; as=image; no-push
<link rel="preload" href="/fwdays.svg" as="image">

118. Link:
</fwdays.svg>; rel=preload; as=image; no-push
<link rel="preload" href="/fwdays.svg" as="image">
This is great to speed
up critical resources

119. caniuse.com/#feat=link-rel-preload
* link element but no headers
***
** behind a flag

120. Don't annoy the user
(aka. the AMP reaction)

121. speakerdeck.com/stefanjudis/amp-tries-to-fix-the-web-what-can-we-learn-from-it?slide=112

122. Feature-Policy:
vibrate 'none'; geolocation 'none'

123. accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout-animations
legacy-image-formats
magnetometer
microphone
midi
oversized-images
payment
picture-in-picture
speaker
sync-xhr
unoptimized-images
unsized-media
usb
vibrate
vr
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

124. accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout-animations
legacy-image-formats
magnetometer
microphone
midi
oversized-images
payment
picture-in-picture
speaker
sync-xhr
unoptimized-images
unsized-media
usb
vibrate
vr
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

125. accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout-animations
legacy-image-formats
magnetometer
microphone
midi
oversized-images
payment
picture-in-picture
speaker
sync-xhr
unoptimized-images
unsized-media
usb
vibrate
vr
developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

126. <iframe allow="camera 'none'; microphone 'none'">
document.policy.allowedFeatures();
// → ["geolocation", "midi", ...]
document.policy.allowsFeature('geolocation');
// → true
document.policy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

127. <iframe allow="camera 'none'; microphone 'none'">
document.policy.allowedFeatures();
// → ["geolocation", "midi", ...]
document.policy.allowsFeature('geolocation');
// → true
document.policy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]
JS API is still
under discussion...

128. What happened to the
most annoying one?

129. https://github.com/w3c/webappsec-feature-policy/issues/243

130. caniuse.com/#feat=feature-policy
* support only for allow on iframes
*

131. Respect privacy

133. caniuse.com/#feat=do-not-track

134. webkit.org/blog/8594/release-notes-for-safari-technology-preview-75/

135. caniuse.com/#feat=do-not-track

136. caniuse.com/#feat=do-not-track
It was a nice try,
but I don't really see
that happening...

137. blog.mozilla.org/futurereleases/2018/10/23/the-path-to-enhanced-tracking-protection/

138. www.xanjero.com/news/samsung-internet-beta-version-9-2-now-includes-oneui-design-smart-
anti-tracking-and-more-features/

139. the-responsible.dev/respectful/

140. Building for
the web is very hard
Me

141. Design PerformanceContent Accessibility
DevicesNetworkFrameworks

142. Lighthouse

143. webhint.io

144. If you want to get a more
complete overview...

145. schepp.github.io/HTTP-headers

146. The web has to be
safe...

147. The web has to be
safe, affordable...

148. The web has to be
safe, affordable and
respectful...

149. ... so that it really is
for everybody!

150. @stefanjudis
www.stefanjudis.com
Thanks.
my-links.online/the-responsible-dev