Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@stefanjudis
HTTP headers for the
responsible developer
My journey
on the web
freenet.de
uboot.com
1999
The web
connects people
2010
The web
connects people
We connect people!
We connect people!
We enable people!
We connect people!
We enable people!
We help people!
@stefanjudis
www.stefanjudis.com
Heyo,
I'm Stefan!
... and I want to be
a responsible developer
1999
2019
2019
We should be building
for everybody
"We don't have
users in/that ..."
"We don't have users in/that ..."
The challenge
of building
a "good" website
Design PerformanceContent Accessibility
DevicesNetworkFrameworks
Design PerformanceContent Accessibility
NetworkFrameworks Devices
Let's talk HTTP
https://the-responsible.dev/
Accept: text/html,application/xhtml+xml,application/xml

Accept-Encoding: gzip, deflate, br

...
Accept: text/html,application/xhtml+xml,application/xml

Accept-Encoding: gzip, deflate, br

Accept-Language: en-GB,en-US;...
the-responsible.dev
How can we use headers
to make this site better?
The web is
a scary place
thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/
shoptalkshow.com/episodes/special-one-one-hacker/
blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident
www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
We always
rely on others
The web
has to be safe!
HTTPS
HTTP/2 ServiceWorker
getUserMedia() ...
whynohttps.com
requestmap.webperf.tools
Ensure encryption
Strict-Transport-Security:
max-age=1000
Strict-Transport-Security:
max-age=1000;
includeSubDomains
Strict-Transport-Security:
max-age=1000;
includeSubDomains;
preload
chromium.googlesource.com/chromium/src/net/+/master/http/
transport_security_state_static.json
chromium.googlesource.com/chromium/src/net/+/master/http/
transport_security_state_static.json
caniuse.com/#feat=stricttransportsecurity
Upgrade
HTTP requests
Content-Security-Policy:
upgrade-insecure-requests
Limit what's allowed
base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-...
base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-...
base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-...
the-responsible.dev
<a href="https://..." target="_blank">
Link
</a>
<a href="https://..." target="_blank" rel="noopener">
Link
</a>
base-uri
block-all-mixed-content
connect-src
default-src
disown-opener
font-src
form-action
frame-ancestors
frame-src
img-...
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://*;">
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-
inline' 'unsafe-eval' just-comments.com www.google...
Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com...
Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com...
Content-Security-Policy-Report-Only: default-src 'self'; script-src
'self' 'unsafe-inline' 'unsafe-eval' just-comments.com...
Content-Security-Policy:
default-src 'self';
script-src 'sha256-blL...'
<script>
console.log('Inline script executing ...'...
Content-Security-Policy:
default-src 'self';
script-src 'nonce-abc...'
<script nonce="abcdef">
console.log('Inline script ...
caniuse.com/#feat=contentsecuritypolicy
*
caniuse.com/#feat=contentsecuritypolicy2
*
* some stuff missing or "misbehaving"
httparchive.org
How many pages
use CSP?
USE CSP DON'T USE CSP
94%
6%
USE CSP DON'T USE CSP
94%
6%
You should use it!
ALWAYS MONITOR YOUR CSP
REPORTS AND "TEST IN
PRODUCTION" WITH REPORT-
ONLY BEFORE ENFORCING THEM!
Troy Hunt
the-responsible.dev/safe/
The web is crucial
for people.
Your sh** doesn't
work in Africa.
William Imoh
You get 6MB for 2Euros
but you have only 24h to
use them! Right...
whatdoesmysitecost.com
The web
has to be affordable!
Don't request
the same content
over and over again
Cache-Control:
max-age=31536000, public
Cache-Control:
max-age=31536000, public, immutable
immutable
developer.mozilla.org/en-US/docs/Web/HTTP/
Headers/Cache-Control
csswizardry.com/2019/03/cache-control-for-civilians/
Send the right data
Accept-Encoding:
gzip, deflate, br
But Brotli compression
is so slow!
GZIP Brotlivs
GZIP Brotlivs
Default
Mode6
11
GZIP Brotli
Default
Mode
vs
6
11
GZIP Brotli
Optimal
middle
ground
vs
6
4
GZIP Brotli
Optimal
middle
ground
vs
6
4
Brotli tends to
compress better
with the same speed
GZIP Brotli
Optimal
middle
ground
vs
6
4
You don't have
to do it on the fly...
blogs.akamai.com/2016/02/understanding-brotlis-potential.html
caniuse.com/#feat=brotli
Serve tailored media
<picture>
<!-- serve WebP to Chrome and Opera -->
<source
media="(min-width: 50em)"
sizes="50vw"
srcset="/image/thing-200....
Accept:
image/webp,
image/apng,
image/*,*/*;q=0.8
Accept-CH: Width, Viewport-Width
Accept-CH-Lifetime: 100
Request URL: https://.../header.jpg

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

Request URL: https://.../h...
<img src="/header.jpg" alt="" sizes="100vw" />
Accept: image/webp,image/apng,image/*,*/*;q=0.8

Request URL: https://.../h...
speaking.jeremy.codes/yD4dKY/take-a-client-hint
Save data
save-data: on
if ("connection" in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving oper...
Let's use the platform
and make these
features more visible
blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
I'm not sure
how I feel about that...
timkadlec.com/remembers/2019-03-14-making-sense-of-chrome-lite-pages/
Cache-Control:
max-age=31536000, public, no-transform
Be aware of CDNs and
proxies – use vary
the-responsible.dev/affordable/
The web is
with us every day
2018.bloomca.me
It has to be respectful!
Get stuff "down" as
quickly as possible
Link:
</fwdays.svg>; rel=preload; as=image
<link rel="preload" href="/fwdays.svg" as="image">
Link:
</fwdays.svg>; rel=preload; as=image; no-push
<link rel="preload" href="/fwdays.svg" as="image">
Link:
</fwdays.svg>; rel=preload; as=image; no-push
<link rel="preload" href="/fwdays.svg" as="image">
This is great to sp...
caniuse.com/#feat=link-rel-preload
* link element but no headers
***
** behind a flag
Don't annoy the user
(aka. the AMP reaction)
speakerdeck.com/stefanjudis/amp-tries-to-fix-the-web-what-can-we-learn-from-it?slide=112
Feature-Policy:
vibrate 'none'; geolocation 'none'
accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout...
accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout...
accelerometer
ambient-light-sensor
autoplay
camera
document-domain
encrypted-media
fullscreen
geolocation
gyroscope
layout...
<iframe allow="camera 'none'; microphone 'none'">
document.policy.allowedFeatures();
// → ["geolocation", "midi", ...]
doc...
<iframe allow="camera 'none'; microphone 'none'">
document.policy.allowedFeatures();
// → ["geolocation", "midi", ...]
doc...
What happened to the
most annoying one?
https://github.com/w3c/webappsec-feature-policy/issues/243
caniuse.com/#feat=feature-policy
* support only for allow on iframes
*
Respect privacy
caniuse.com/#feat=do-not-track
webkit.org/blog/8594/release-notes-for-safari-technology-preview-75/
caniuse.com/#feat=do-not-track
caniuse.com/#feat=do-not-track
It was a nice try,
but I don't really see
that happening...
blog.mozilla.org/futurereleases/2018/10/23/the-path-to-enhanced-tracking-protection/
www.xanjero.com/news/samsung-internet-beta-version-9-2-now-includes-oneui-design-smart-
anti-tracking-and-more-features/
the-responsible.dev/respectful/
Building for
the web is very hard
Me
Design PerformanceContent Accessibility
DevicesNetworkFrameworks
Lighthouse
webhint.io
If you want to get a more
complete overview...
schepp.github.io/HTTP-headers
The web has to be
safe...
The web has to be
safe, affordable...
The web has to be
safe, affordable and
respectful...
... so that it really is

for everybody!
@stefanjudis
www.stefanjudis.com
Thanks.
my-links.online/the-responsible-dev
Stefan Judis "HTTP headers for the responsible developer"
Stefan Judis "HTTP headers for the responsible developer"
Stefan Judis "HTTP headers for the responsible developer"
Stefan Judis "HTTP headers for the responsible developer"
Stefan Judis "HTTP headers for the responsible developer"
Stefan Judis "HTTP headers for the responsible developer"
Upcoming SlideShare
Loading in …5
×

Stefan Judis "HTTP headers for the responsible developer"

253 views

Published on

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.

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Stefan Judis "HTTP headers for the responsible developer"

  1. 1. @stefanjudis HTTP headers for the responsible developer
  2. 2. My journey on the web
  3. 3. freenet.de
  4. 4. uboot.com
  5. 5. 1999
  6. 6. The web connects people
  7. 7. 2010
  8. 8. The web connects people
  9. 9. We connect people!
  10. 10. We connect people! We enable people!
  11. 11. We connect people! We enable people! We help people!
  12. 12. @stefanjudis www.stefanjudis.com Heyo, I'm Stefan!
  13. 13. ... and I want to be a responsible developer
  14. 14. 1999
  15. 15. 2019
  16. 16. 2019 We should be building for everybody
  17. 17. "We don't have users in/that ..."
  18. 18. "We don't have users in/that ..."
  19. 19. The challenge of building a "good" website
  20. 20. Design PerformanceContent Accessibility DevicesNetworkFrameworks
  21. 21. Design PerformanceContent Accessibility NetworkFrameworks Devices
  22. 22. Let's talk HTTP
  23. 23. 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
  24. 24. 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
  25. 25. the-responsible.dev
  26. 26. How can we use headers to make this site better?
  27. 27. The web is a scary place
  28. 28. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/
  29. 29. shoptalkshow.com/episodes/special-one-one-hacker/
  30. 30. blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident
  31. 31. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers
  32. 32. www.twilio.com/blog/learned-about-security-from-calling-35-contact-centers We always rely on others
  33. 33. The web has to be safe!
  34. 34. HTTPS
  35. 35. HTTP/2 ServiceWorker getUserMedia() ...
  36. 36. whynohttps.com
  37. 37. requestmap.webperf.tools
  38. 38. Ensure encryption
  39. 39. Strict-Transport-Security: max-age=1000
  40. 40. Strict-Transport-Security: max-age=1000; includeSubDomains
  41. 41. Strict-Transport-Security: max-age=1000; includeSubDomains; preload
  42. 42. chromium.googlesource.com/chromium/src/net/+/master/http/ transport_security_state_static.json
  43. 43. chromium.googlesource.com/chromium/src/net/+/master/http/ transport_security_state_static.json
  44. 44. caniuse.com/#feat=stricttransportsecurity
  45. 45. Upgrade HTTP requests
  46. 46. Content-Security-Policy: upgrade-insecure-requests
  47. 47. Limit what's allowed
  48. 48. 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
  49. 49. 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
  50. 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. 51. the-responsible.dev
  52. 52. <a href="https://..." target="_blank"> Link </a>
  53. 53. <a href="https://..." target="_blank" rel="noopener"> Link </a>
  54. 54. 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
  55. 55. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*;">
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 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. 60. Content-Security-Policy: default-src 'self'; script-src 'sha256-blL...' <script> console.log('Inline script executing ...'); </script>
  61. 61. Content-Security-Policy: default-src 'self'; script-src 'nonce-abc...' <script nonce="abcdef"> console.log('Inline script executing ...'); </script>
  62. 62. caniuse.com/#feat=contentsecuritypolicy
  63. 63. * caniuse.com/#feat=contentsecuritypolicy2 * * some stuff missing or "misbehaving"
  64. 64. httparchive.org
  65. 65. How many pages use CSP?
  66. 66. USE CSP DON'T USE CSP 94% 6%
  67. 67. USE CSP DON'T USE CSP 94% 6% You should use it!
  68. 68. ALWAYS MONITOR YOUR CSP REPORTS AND "TEST IN PRODUCTION" WITH REPORT- ONLY BEFORE ENFORCING THEM! Troy Hunt
  69. 69. the-responsible.dev/safe/
  70. 70. The web is crucial for people.
  71. 71. Your sh** doesn't work in Africa. William Imoh
  72. 72. You get 6MB for 2Euros but you have only 24h to use them! Right...
  73. 73. whatdoesmysitecost.com
  74. 74. The web has to be affordable!
  75. 75. Don't request the same content over and over again
  76. 76. Cache-Control: max-age=31536000, public
  77. 77. Cache-Control: max-age=31536000, public, immutable
  78. 78. immutable developer.mozilla.org/en-US/docs/Web/HTTP/ Headers/Cache-Control
  79. 79. csswizardry.com/2019/03/cache-control-for-civilians/
  80. 80. Send the right data
  81. 81. Accept-Encoding: gzip, deflate, br
  82. 82. But Brotli compression is so slow!
  83. 83. GZIP Brotlivs
  84. 84. GZIP Brotlivs Default Mode6 11
  85. 85. GZIP Brotli Default Mode vs 6 11
  86. 86. GZIP Brotli Optimal middle ground vs 6 4
  87. 87. GZIP Brotli Optimal middle ground vs 6 4 Brotli tends to compress better with the same speed
  88. 88. GZIP Brotli Optimal middle ground vs 6 4 You don't have to do it on the fly...
  89. 89. blogs.akamai.com/2016/02/understanding-brotlis-potential.html
  90. 90. caniuse.com/#feat=brotli
  91. 91. Serve tailored media
  92. 92. <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"
  93. 93. Accept: image/webp, image/apng, image/*,*/*;q=0.8
  94. 94. Accept-CH: Width, Viewport-Width Accept-CH-Lifetime: 100 Request URL: https://.../header.jpg
 Viewport-Width: 980 Width: 1064
  95. 95. <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
  96. 96. <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
  97. 97. speaking.jeremy.codes/yD4dKY/take-a-client-hint
  98. 98. Save data
  99. 99. save-data: on if ("connection" in navigator) { if (navigator.connection.saveData === true) { // Implement data saving operations here. } }
  100. 100. Let's use the platform and make these features more visible
  101. 101. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html
  102. 102. blog.chromium.org/2019/03/chrome-lite-pages-for-faster-leaner.html I'm not sure how I feel about that...
  103. 103. timkadlec.com/remembers/2019-03-14-making-sense-of-chrome-lite-pages/
  104. 104. Cache-Control: max-age=31536000, public, no-transform
  105. 105. Be aware of CDNs and proxies – use vary
  106. 106. the-responsible.dev/affordable/
  107. 107. The web is with us every day
  108. 108. 2018.bloomca.me
  109. 109. It has to be respectful!
  110. 110. Get stuff "down" as quickly as possible
  111. 111. Link: </fwdays.svg>; rel=preload; as=image <link rel="preload" href="/fwdays.svg" as="image">
  112. 112. Link: </fwdays.svg>; rel=preload; as=image; no-push <link rel="preload" href="/fwdays.svg" as="image">
  113. 113. 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
  114. 114. caniuse.com/#feat=link-rel-preload * link element but no headers *** ** behind a flag
  115. 115. Don't annoy the user (aka. the AMP reaction)
  116. 116. speakerdeck.com/stefanjudis/amp-tries-to-fix-the-web-what-can-we-learn-from-it?slide=112
  117. 117. Feature-Policy: vibrate 'none'; geolocation 'none'
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. <iframe allow="camera 'none'; microphone 'none'"> document.policy.allowedFeatures(); // → ["geolocation", "midi", ...] document.policy.allowsFeature('geolocation'); // → true document.policy.getAllowlistForFeature('geolocation'); // → ["https://example.com"]
  122. 122. <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...
  123. 123. What happened to the most annoying one?
  124. 124. https://github.com/w3c/webappsec-feature-policy/issues/243
  125. 125. caniuse.com/#feat=feature-policy * support only for allow on iframes *
  126. 126. Respect privacy
  127. 127. caniuse.com/#feat=do-not-track
  128. 128. webkit.org/blog/8594/release-notes-for-safari-technology-preview-75/
  129. 129. caniuse.com/#feat=do-not-track
  130. 130. caniuse.com/#feat=do-not-track It was a nice try, but I don't really see that happening...
  131. 131. blog.mozilla.org/futurereleases/2018/10/23/the-path-to-enhanced-tracking-protection/
  132. 132. www.xanjero.com/news/samsung-internet-beta-version-9-2-now-includes-oneui-design-smart- anti-tracking-and-more-features/
  133. 133. the-responsible.dev/respectful/
  134. 134. Building for the web is very hard Me
  135. 135. Design PerformanceContent Accessibility DevicesNetworkFrameworks
  136. 136. Lighthouse
  137. 137. webhint.io
  138. 138. If you want to get a more complete overview...
  139. 139. schepp.github.io/HTTP-headers
  140. 140. The web has to be safe...
  141. 141. The web has to be safe, affordable...
  142. 142. The web has to be safe, affordable and respectful...
  143. 143. ... so that it really is
 for everybody!
  144. 144. @stefanjudis www.stefanjudis.com Thanks. my-links.online/the-responsible-dev

×