Skip to content

Commit

Permalink
Voiceover percentiles for English chapters (#1256)
Browse files Browse the repository at this point in the history 
* Update percentile wording

* Add colgroup scope

* Better wway of handling percentile headers

* Missed one
  • Loading branch information
@tunetheweb
tunetheweb authored Sep 1, 2020
1 parent 73eb104 commit d21770f
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 38 deletions.
38 changes: 19 additions & 19 deletions src/content/en/2019/cdn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,11 +486,11 @@ In contrast, the median TLS negotiation for the majority of CDN providers is bet
<thead>
<tr>
<td></td>
<th scope="col">p10</th>
<th scope="col">p25</th>
<th scope="col">p50</th>
<th scope="col">p75</th>
<th scope="col">p90</th>
<th scope="col"><span class="visually-hidden">10th percentile</span><span aria-hidden="true">p10</span></th>
<th scope="col"><span class="visually-hidden">25th percentile</span><span aria-hidden="true">p25</span></th>
<th scope="col"><span class="visually-hidden">50th percentile</span><span aria-hidden="true">p50</span></th>
<th scope="col"><span class="visually-hidden">75th percentile</span><span aria-hidden="true">p75</span></th>
<th scope="col"><span class="visually-hidden">90th percentile</span><span aria-hidden="true">p90</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -649,7 +649,7 @@ For resource requests (including same-domain and third-party), the TLS negotiati
<a href="/static/images/2019/cdn/resource_tls_negotiation_time.png">
<img alt="Distribution of TLS negotiation time for site resources broken down by CDN" aria-labelledby="fig10-caption" aria-describedby="fig10-description" src="/static/images/2019/cdn/resource_tls_negotiation_time.png" width="600" height="371">
</a>
<div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotiation time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the p50 percentile.</div>
<div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotiation time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the 50th percentile.</div>
<figcaption id="fig10-caption">Figure 10. Resource TLS negotiation time.</figcaption>
</figure>

Expand Down Expand Up @@ -683,11 +683,11 @@ Most CDNs balance the need for shared certificates and performance. Most cap the
<thead>
<tr>
<td></td>
<th scope="col">p10</th>
<th scope="col">p25</th>
<th scope="col">p50</th>
<th scope="col">p75</th>
<th scope="col">p90</th>
<th scope="col"><span class="visually-hidden">10th percentile</span><span aria-hidden="true">p10</span></th>
<th scope="col"><span class="visually-hidden">25th percentile</span><span aria-hidden="true">p25</span></th>
<th scope="col"><span class="visually-hidden">50th percentile</span><span aria-hidden="true">p50</span></th>
<th scope="col"><span class="visually-hidden">75th percentile</span><span aria-hidden="true">p75</span></th>
<th scope="col"><span class="visually-hidden">90th percentile</span><span aria-hidden="true">p90</span></th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -842,22 +842,22 @@ Most CDNs balance the need for shared certificates and performance. Most cap the

<figure>
<a href="/static/images/2019/cdn/fig13.png">
<img src="/static/images/2019/cdn/fig13.png" alt="Figure 13. Resource SAN count (p50)." aria-labelledby="fig13-caption" aria-describedby="fig13-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vRzPn-1SGVa3rNCT0U9QeQNODE97fsmXyaJX1ZOoBNR8nPpclhC6fg8R_UpoodeiX6HkdHrp50WBQ5Q/pubchart?oid=528008536&format=interactive">
<img src="/static/images/2019/cdn/fig13.png" alt="Figure 13. Resource SAN count (50th percentile)." aria-labelledby="fig13-caption" aria-describedby="fig13-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vRzPn-1SGVa3rNCT0U9QeQNODE97fsmXyaJX1ZOoBNR8nPpclhC6fg8R_UpoodeiX6HkdHrp50WBQ5Q/pubchart?oid=528008536&format=interactive">
</a>
<div id="fig13-description" class="visually-hidden">Bar chart showing the data from Table 14 for the p50 percentile.</div>
<figcaption id="fig13-caption">Figure 13. Resource SAN count (p50).</figcaption>
<div id="fig13-description" class="visually-hidden">Bar chart showing the data from Table 14 for the 50th percentile.</div>
<figcaption id="fig13-caption">Figure 13. Resource SAN count (50th percentile).</figcaption>
</figure>

<figure>
<table>
<thead>
<tr>
<td></td>
<th scope="col">p10</th>
<th scope="col">p25</th>
<th scope="col">p50</th>
<th scope="col">p75</th>
<th scope="col">p90</th>
<th scope="col"><span class="visually-hidden">10th percentile</span><span aria-hidden="true">p10</span></th>
<th scope="col"><span class="visually-hidden">25th percentile</span><span aria-hidden="true">p25</span></th>
<th scope="col"><span class="visually-hidden">50th percentile</span><span aria-hidden="true">p50</span></th>
<th scope="col"><span class="visually-hidden">75th percentile</span><span aria-hidden="true">p75</span></th>
<th scope="col"><span class="visually-hidden">90th percentile</span><span aria-hidden="true">p90</span></th>
</tr>
</thead>
<tbody>
Expand Down
16 changes: 8 additions & 8 deletions src/content/en/2019/javascript.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Sending smaller JavaScript bundles to the browser is the best way to reduce down
<a href="/static/images/2019/javascript/fig1.png">
<img src="/static/images/2019/javascript/fig1.png" alt="Figure 1. Distribution of JavaScript bytes per page." aria-labelledby="fig1-caption" aria-describedby="fig1-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=1974602890&format=interactive">
</a>
<div id="fig1-description" class="visually-hidden">Bar chart showing 70 bytes of JavaScript are used in the p10 percentile, 174 bytes for p25, 373 bytes for p50, 693 bytes for p75, and 1,093 bytes for p90</div>
<div id="fig1-description" class="visually-hidden">Bar chart showing 70 bytes of JavaScript are used in the 10th percentile, 174 bytes for 25th percentile, 373 bytes for 50th percentile, 693 bytes for 75th percentile, and 1,093 bytes for 90th percentile</div>
<figcaption id="fig1-caption">Figure 1. Distribution of JavaScript bytes per page.</figcaption>
</figure>

Expand All @@ -43,7 +43,7 @@ Looking at these numbers, it's only natural to wonder if this is too much JavaSc
<a href="/static/images/2019/javascript/fig2.png">
<img src="/static/images/2019/javascript/fig2.png" alt="Figure 2. Distribution of JavaScript per page by device." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=1914565673&format=interactive">
</a>
<div id="fig2-description" class="visually-hidden">Bar chart showing 76 bytes/65 bytes of JavaScript are used in the p10 percentile on desktop and mobile respectively, 186/164 bytes for p25, 391/359 bytes for p50, 721/668 bytes for p75, and 1,131/1,060 bytes for p90.</div>
<div id="fig2-description" class="visually-hidden">Bar chart showing 76 bytes/65 bytes of JavaScript are used in the 10th percentile on desktop and mobile respectively, 186/164 bytes for 25th percentile, 391/359 bytes for 50th percentile, 721/668 bytes for 75th percentile, and 1,131/1,060 bytes for 90th percentile.</div>
<figcaption id="fig2-caption">Figure 2. Distribution of JavaScript per page by device.</figcaption>
</figure>

Expand All @@ -59,7 +59,7 @@ We can get an idea by analyzing main thread processing times for V8 at different
<a href="/static/images/2019/javascript/fig3.png">
<img src="/static/images/2019/javascript/fig3.png" alt="Figure 3. V8 Main thread processing times by device." aria-labelledby="fig3-caption" aria-describedby="fig3-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=924000517&format=interactive">
</a>
<div id="fig3-description" class="visually-hidden">Bar chart showing 141 ms/377 ms of processing time is used in the p10 percentile on desktop and mobile respectively, 352/988 ms for p25, 849/2,437 ms for p50, 1,850/5,518 ms for p75, and 3,543/10,735 ms for p90.</div>
<div id="fig3-description" class="visually-hidden">Bar chart showing 141 ms/377 ms of processing time is used in the 10th percentile on desktop and mobile respectively, 352/988 ms for 25th percentile, 849/2,437 ms for 50th percentile, 1,850/5,518 ms for 75th percentile, and 3,543/10,735 ms for 90th percentile.</div>
<figcaption id="fig3-caption">Figure 3. V8 Main thread processing times by device.</figcaption>
</figure>

Expand All @@ -83,7 +83,7 @@ One avenue worth exploring when trying to analyze the amount of JavaScript used
<a href="/static/images/2019/javascript/fig5.png">
<img src="/static/images/2019/javascript/fig5.png" alt="Figure 5. Distribution of total JavaScript requests." aria-labelledby="fig5-caption" aria-describedby="fig5-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=1632335480&format=interactive">
</a>
<div id="fig5-description" class="visually-hidden">Bar chart showing 4/4 requests for desktop and mobile respectively are used in the p10 percentile, 10/9 in p25, 19/18 in p50, 33/32 in p75 and 53/52 in p90.</div>
<div id="fig5-description" class="visually-hidden">Bar chart showing 4/4 requests for desktop and mobile respectively are used in the 10th percentile, 10/9 in 25th percentile, 19/18 in 50th percentile, 33/32 in 75th percentile and 53/52 in 90th percentile.</div>
<figcaption id="fig5-caption">Figure 5. Distribution of total JavaScript requests.</figcaption>
</figure>

Expand All @@ -99,15 +99,15 @@ Third-party JavaScript can come from any external, third-party source. Ads, anal
<a href="/static/images/2019/javascript/fig6.png">
<img src="/static/images/2019/javascript/fig6.png" alt="Figure 6. Distribution of first and third-party scripts on desktop." aria-labelledby="fig6-caption" aria-describedby="fig6-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=1108490&format=interactive">
</a>
<div id="fig6-description" class="visually-hidden">Bar chart showing 0/1 request on desktop are first-party and third-party respectively in p10 percentile, 2/4 in p25, 6/10 in p50, 13/21 in p75, and 24/38 in p90.</div>
<div id="fig6-description" class="visually-hidden">Bar chart showing 0/1 request on desktop are first-party and third-party respectively in 10th percentile, 2/4 in 25th percentile, 6/10 in 50th percentile, 13/21 in 75th percentile, and 24/38 in 90th percentile.</div>
<figcaption id="fig6-caption">Figure 6. Distribution of first and third-party scripts on desktop.</figcaption>
</figure>

<figure>
<a href="/static/images/2019/javascript/fig7.png">
<img src="/static/images/2019/javascript/fig7.png" alt="Figure 7. Distribution of first and third party scripts on mobile." aria-labelledby="fig7-caption" aria-describedby="fig7-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=998640509&format=interactive">
</a>
<div id="fig7-description" class="visually-hidden">Bar chart showing 0/1 request on mobile are first-party and third-party respectively in p10 percentile, 2/3 in p25, 5/9 in p50, 13/20 in p75, and 23/36 in p90.</div>
<div id="fig7-description" class="visually-hidden">Bar chart showing 0/1 request on mobile are first-party and third-party respectively in 10th percentile, 2/3 in 25th percentile, 5/9 in 50th percentile, 13/20 in 75th percentile, and 23/36 in 90th percentile.</div>
<figcaption id="fig7-caption">Figure 7. Distribution of first and third party scripts on mobile.</figcaption>
</figure>

Expand All @@ -117,15 +117,15 @@ For both mobile and desktop clients, more third-party requests are sent than fir
<a href="/static/images/2019/javascript/fig8.png">
<img src="/static/images/2019/javascript/fig8.png" alt="Figure 8. Distribution of total JavaScript downloaded on desktop." aria-labelledby="fig8-caption" aria-describedby="fig8-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=633945705&format=interactive">
</a>
<div id="fig8-description" class="visually-hidden">Bar chart showing 0/17 bytes of JavaScript are downloaded on desktop for first-party and third-party requests respectively in the p10 percentile, 11/62 in p25, 89/232 in p50, 200/525 in p75, and 404/900 in p90.</div>
<div id="fig8-description" class="visually-hidden">Bar chart showing 0/17 bytes of JavaScript are downloaded on desktop for first-party and third-party requests respectively in the 10th percentile, 11/62 in 25th percentile, 89/232 in 50th percentile, 200/525 in 75th percentile, and 404/900 in 90th percentile.</div>
<figcaption id="fig8-caption">Figure 8. Distribution of total JavaScript downloaded on desktop.</figcaption>
</figure>

<figure>
<a href="/static/images/2019/javascript/fig9.png">
<img src="/static/images/2019/javascript/fig9.png" alt="Figure 9. Distribution of total JavaScript downloaded on mobile." aria-labelledby="fig9-caption" aria-describedby="fig9-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vTpzDb9HGbdVvin6YPTOmw11qBVGGysltxmH545fUfnqIThAq878F_b-KxUo65IuXaeFVSnlmJ5K1Dm/pubchart?oid=1611383649&format=interactive">
</a>
<div id="fig9-description" class="visually-hidden">Bar chart showing 0/17 bytes of JavaScript are downloaded on mobile for first-party and third-party requests respectively in the p10 percentile, 6/54 in p25, 83/217 in p50, 189/477 in p75, and 380/827 in p90.</div>
<div id="fig9-description" class="visually-hidden">Bar chart showing 0/17 bytes of JavaScript are downloaded on mobile for first-party and third-party requests respectively in the 10th percentile, 6/54 in 25th percentile, 83/217 in 50th percentile, 189/477 in 75th percentile, and 380/827 in 90th percentile.</div>
<figcaption id="fig9-caption">Figure 9. Distribution of total JavaScript downloaded on mobile.</figcaption>
</figure>

Expand Down
Loading

0 comments on commit d21770f

Please sign in to comment.