Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/en/2019/fonts.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Recommendations to mitigate the performance costs of loading web fonts from anot

(Graph Title: Third-party hosted versus self-hosted (local); Source: 06.01)

The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss [below](#what-are-the-most-popular-third-party-hosts). Note that `preload` is not yet available with Google Fonts, as they generate unique URLs for their fonts [which are liable to change](https://github.com/google/fonts/issues/1067), and even [serve different fonts for different browsers](https://github.com/google/fonts/issues/234). Google serves fonts by getting websites to include a CSS link to a stylesheet. This will be in the main HTML (more on which below), so will already be connected to quickly. However, the fonts themselves are hosted on another domain (https://fonts.gstatic.com) so `preconnect` is a great option here as that will not be discovered until the CSS is downloaded.
The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss [below](#what-are-the-most-popular-third-party-hosts). Note that `preload` is not yet available with Google Fonts, as they generate unique URLs for their fonts [which are liable to change](https://github.com/google/fonts/issues/1067), and even [serve different fonts for different browsers](https://github.com/google/fonts/issues/234). Google serves fonts by getting websites to include a CSS link to a stylesheet. This will be in the main HTML (more on which below), so will already be connected to quickly. However, the fonts themselves are hosted on another domain (`https://fonts.gstatic.com`) so `preconnect` is a great option here as that will not be discovered until the CSS is downloaded.

### What are the most popular third-party hosts?

Expand Down
2 changes: 1 addition & 1 deletion src/content/en/2019/resource-hints.md
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ Resource hints are most effective when they're used selectively (_"when everythi

## The `crossorigin` attribute

Most "traditional" resources fetched on the web ([images](./media), [stylesheets](./css), and [scripts](./javascript)) are fetched without opting in to Cross-Origin Resource Sharing ([CORS](](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS))). That means that if those resources are fetched from a cross-origin server, by default their contents cannot be read back by the page, due to the same-origin policy.
Most "traditional" resources fetched on the web ([images](./media), [stylesheets](./css), and [scripts](./javascript)) are fetched without opting in to Cross-Origin Resource Sharing ([CORS]((https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)). That means that if those resources are fetched from a cross-origin server, by default their contents cannot be read back by the page, due to the same-origin policy.

In some cases, the page can opt-in to fetch the resource using CORS if it needs to read its content. CORS enables the browser to "ask permission" and get access to those cross-origin resources.

Expand Down
28 changes: 14 additions & 14 deletions src/content/en/2019/security.md

Large diffs are not rendered by default.

Binary file added src/static/images/2019/08_Security/fig1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/static/images/2019/08_Security/fig2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/static/images/2019/08_Security/fig3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/static/images/2019/08_Security/fig8.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/templates/en/2019/chapters/fonts.html
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ <h3 id="are-fonts-being-hosted-on-the-same-host-or-by-a-different-host">Are font
>, and <a href="https://www.w3.org/TR/preload/"><code>preload</code></a> <a href="./resource-hints">resource hints</a> but high priority web fonts should be same-host requests to minimize the performance impact of web fonts. This is especially important for fonts used by very visually prominent content or body copy occupying the majority of a page.
</p>
<p>(Graph Title: Third-party hosted versus self-hosted (local); Source: 06.01)</p>
<p>The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss <a href="#what-are-the-most-popular-third-party-hosts">below</a>. Note that <code>preload</code> is not yet available with Google Fonts, as they generate unique URLs for their fonts <a href="https://github.com/google/fonts/issues/1067">which are liable to change</a>, and even <a href="https://github.com/google/fonts/issues/234">serve different fonts for different browsers</a>. Google serves fonts by getting websites to include a CSS link to a stylesheet. This will be in the main HTML (more on which below), so will already be connected to quickly. However, the fonts themselves are hosted on another domain (<a href="https://fonts.gstatic.com">https://fonts.gstatic.com</a>) so <code>preconnect</code> is a great option here as that will not be discovered until the CSS is downloaded.</p>
<p>The fact that three quarters are hosted is perhaps unsurprising given Google Fonts dominance that we will discuss <a href="#what-are-the-most-popular-third-party-hosts">below</a>. Note that <code>preload</code> is not yet available with Google Fonts, as they generate unique URLs for their fonts <a href="https://github.com/google/fonts/issues/1067">which are liable to change</a>, and even <a href="https://github.com/google/fonts/issues/234">serve different fonts for different browsers</a>. Google serves fonts by getting websites to include a CSS link to a stylesheet. This will be in the main HTML (more on which below), so will already be connected to quickly. However, the fonts themselves are hosted on another domain (<code>https://fonts.gstatic.com</code>) so <code>preconnect</code> is a great option here as that will not be discovered until the CSS is downloaded.</p>
<h3 id="what-are-the-most-popular-third-party-hosts">What are the most popular third-party hosts?</h3>
<p>(Graph Title: Popular Web Font Hosts by Request, Source: 06.02)</p>
<p>The dominance of Google Fonts here was simultaneously surprising and unsurprising at the same time. It was unsurprising in that I expected the service to be the most popular and surprising in the sheer dominance of its popularity. 75% of requests (55–57% of fonts) is astounding. TypeKit was a distant single-digit second place, with the Bootstrap library accounting for an even more distant third place.</p>
Expand Down
2 changes: 1 addition & 1 deletion src/templates/en/2019/chapters/resource-hints.html
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ <h2 id="resource-hints">Resource hints</h2>
</figure>
<p>Resource hints are most effective when they're used selectively (<em>"when everything is important, nothing is"</em>). Figure 2 above shows the number of resource hints per page for pages using at least one resource hint. Although there is no clear cut rule for defining what an appropriate number of resource hints is, it appears that most sites are using resource hints appropriately.</p>
<h2 id="the-crossorigin-attribute">The <code>crossorigin</code> attribute</h2>
<p>Most "traditional" resources fetched on the web (<a href="./media">images</a>, <a href="./css">stylesheets</a>, and <a href="./javascript">scripts</a>) are fetched without opting in to Cross-Origin Resource Sharing (<a href="](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)">CORS</a>). That means that if those resources are fetched from a cross-origin server, by default their contents cannot be read back by the page, due to the same-origin policy.</p>
<p>Most "traditional" resources fetched on the web (<a href="./media">images</a>, <a href="./css">stylesheets</a>, and <a href="./javascript">scripts</a>) are fetched without opting in to Cross-Origin Resource Sharing (<a href="(https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>). That means that if those resources are fetched from a cross-origin server, by default their contents cannot be read back by the page, due to the same-origin policy.</p>
<p>In some cases, the page can opt-in to fetch the resource using CORS if it needs to read its content. CORS enables the browser to "ask permission" and get access to those cross-origin resources.</p>
<p>For newer resource types (e.g. fonts, <code>fetch()</code> requests, ES modules), the browser defaults to requesting those resources using CORS, failing the requests entirely if the server does not grant it permission to access them.</p>
<figure id="fig-3">
Expand Down
Loading