Skip to content

Commit

Permalink
Generate Chapters (#818)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
github-actions[bot] authored May 13, 2020
1 parent 2dd8a54 commit 7a63b63
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/content/en/2019/mobile-web.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ discuss: 1767
results: https://docs.google.com/spreadsheets/d/1dPBDeHigqx9FVaqzfq7CYTz4KjllkMTkfq4DG4utE_g/
queries: 12_Mobile_Web
published: 2019-11-11T00:00:00.000Z
last_updated: 2020-03-01T00:00:00.000Z
last_updated: 2020-05-13T00:00:00.000Z
---

## Introduction
Expand Down
4 changes: 2 additions & 2 deletions src/templates/en/2019/chapters/mobile-web.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
- make changes to the markdown content directly (`src/content/<lang>/<year>/<chapter>.md`) because any changes to the chapter templates will be overwritten by the generation script
#}-->

{% set metadata = {"part_number":"II","chapter_number":12,"title":"Mobile Web","description":"Mobile Web chapter of the 2019 Web Almanac covering page loading, textual content, zooming and scaling, buttons and links, and ease of filling out forms.","authors":["obto"],"reviewers":["AymenLoukil","hyperpress"],"translators":null,"discuss":"1767","results":"https://docs.google.com/spreadsheets/d/1dPBDeHigqx9FVaqzfq7CYTz4KjllkMTkfq4DG4utE_g/","queries":"12_Mobile_Web","published":"2019-11-11T00:00:00.000Z","last_updated":"2020-03-01T00:00:00.000Z","chapter":"mobile-web"} %} {% block index %}
{% set metadata = {"part_number":"II","chapter_number":12,"title":"Mobile Web","description":"Mobile Web chapter of the 2019 Web Almanac covering page loading, textual content, zooming and scaling, buttons and links, and ease of filling out forms.","authors":["obto"],"reviewers":["AymenLoukil","hyperpress"],"translators":null,"discuss":"1767","results":"https://docs.google.com/spreadsheets/d/1dPBDeHigqx9FVaqzfq7CYTz4KjllkMTkfq4DG4utE_g/","queries":"12_Mobile_Web","published":"2019-11-11T00:00:00.000Z","last_updated":"2020-05-13T00:00:00.000Z","chapter":"mobile-web"} %} {% block index %}
<ul>
<li>
<a href="#introduction">Introduction</a>
Expand Down Expand Up @@ -141,7 +141,7 @@ <h2 id="the-page-loading-experience"><a href="#the-page-loading-experience" clas
<p>I imagine some of you are surprised by these results. They may be far worse conditions than you've ever tested your site with. But now that we're all on the same page with what a mobile user truly looks like, let's get started.</p>
<h3 id="pages-bloated-with-javascript"><a href="#pages-bloated-with-javascript" class="anchor-link">Pages bloated with JavaScript</a></h3>
<p>The state of JavaScript on the mobile web is terrifying. According to HTTP Archive's <a href="https://httparchive.org/reports/state-of-javascript?start=2016_05_15&amp;end=2019_07_01&amp;view=list#bytesJs">JavaScript report</a>, the median mobile site requires phones to download 375 KB of JavaScript. Assuming a 70% compression ratio, this means that phones have to parse, compile, and execute 1.25 MB of JavaScript at the median.</p>
<p>Why is this a problem? Because sites loading this much JS take upwards of <a href="https://httparchive.org/reports/loading-speed?start=earliest&amp;end=2019_07_01&amp;view=list#ttci">10 seconds</a> to become interactive. Or in other words, your page may appear fully loaded, but when a user clicks any of your buttons or menus, nothing happens because the JavaScript hasn't finished executing. Users are forced to keep clicking the button for upwards of 10 seconds, just waiting for that magical moment where something actually happens. Think about how confusing and frustrating that can be.</p>
<p>Why is this a problem? Because sites loading this much JS take upwards of <a href="https://httparchive.org/reports/loading-speed?start=earliest&amp;end=2019_07_01&amp;view=list#ttci">10 seconds</a> to become consistently interactive. Or in other words, your page may appear fully loaded, but when a user clicks any of your buttons or menus, the user may experience some slowdown because the JavaScript hasn't finished executing. In the worst case scenario, users may be forced to keep clicking the button for upwards of 10 seconds, just waiting for that magical moment where something actually happens. Think about how confusing and frustrating that can be.</p>
<figure id="fig-2">
<iframe class="fig-mobile fig-desktop" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
<figcaption><a href="#fig-2" class="anchor-link">Figure 2.</a> Example of how painful of an experience waiting for JS to load can be.</figcaption>
Expand Down
2 changes: 1 addition & 1 deletion src/templates/sitemap.xml
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@

<url>
<loc>https://almanac.httparchive.org/en/2019/mobile-web</loc>
<lastmod>2020-03-01</lastmod>
<lastmod>2020-05-13</lastmod>
</url>

<url>
Expand Down

0 comments on commit 7a63b63

Please sign in to comment.