HTTPArchive · tunetheweb · May 20, 2020 · May 20, 2020
diff --git a/src/content/en/2019/mobile-web.md b/src/content/en/2019/mobile-web.md
@@ -60,7 +60,7 @@ Why is this a problem? Because sites loading this much JS take upwards of [10 se
 <figure>
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen aria-labelledby="fig2-caption" aria-describedby="fig2-description"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343">
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy">
   </a>
   <div id="fig2-description" class="visually-hidden">Video showing two web pages loading and each page has a figure tapping repeatedly on a button throughout the video, to no effect. There is a clock ticking up from 0 seconds at the top, and an initial happy emoji face for each website, that starts to turn less happy as clock passes 6 seconds, wide-eyed at 8 seconds, angry at 10 seconds, really angry at 13 seconds and crying at 19 seconds shortly after which the video ends.</div>
   <figcaption id="fig2-caption">Figure 2. Example of how painful of an experience waiting for JS to load can be.</figcaption>

diff --git a/src/content/fr/2019/mobile-web.md b/src/content/fr/2019/mobile-web.md
@@ -60,7 +60,7 @@ Pourquoi est-ce un problème&nbsp;? Parce que les sites qui chargent autant de J
 <figure>
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen aria-labelledby="fig2-caption" aria-describedby="fig2-description"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Exemple d’une expérience pénible où l’on attend que JS se charge." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343">
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Exemple d’une expérience pénible où l’on attend que JS se charge." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy">
   </a>
   <div id="fig2-description" class="visually-hidden">Vidéo montrant deux pages web en train de se charger. Sur chaque page, un doigt tape à plusieurs reprises sur un bouton tout au long de la vidéo, sans effet. Il y a une horloge qui fait tic-tac à partir de 0 seconde en haut, et un premier visage d'emoji heureux pour chaque site web, qui commence à devenir moins heureux lorsque l'horloge passe 6 secondes, les yeux écarquillés à 8 secondes, en colère à 10 secondes, vraiment en colère à 13 secondes et pleurant à 19 secondes, peu de temps après que la vidéo se soit terminée.</div>
   <figcaption id="fig2-caption">Figure 2. Exemple d’une expérience pénible où l’on attend que JS se charge.</figcaption>

diff --git a/src/content/ja/2019/mobile-web.md b/src/content/ja/2019/mobile-web.md
@@ -60,7 +60,7 @@ last_updated: 2020-05-20T00:00:00.000Z
 <figure>
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen aria-labelledby="fig2-caption" aria-describedby="fig2-description"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343">
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy">
   </a>
   <div id="fig2-description" class="visually-hidden">2つのWebページのロードを示すビデオ。各ページには、ビデオ全体でボタンを繰り返したたく図がありますが、効果はありません。上部には0秒から刻々と刻む時計があり、各Webサイトの最初の幸せな絵文字の顔は、時計が6秒を過ぎるにつれて幸せになり始め、8秒で目が大きく、10秒で怒り、 13秒、19秒で泣いてすぐにビデオが終了</div>
   <figcaption id="fig2-caption">図2. JS がロードされるのを待つのがいかに苦痛であるかの例。</figcaption>

diff --git a/src/static/images/2019/mobile-web/fig2.png b/src/static/images/2019/mobile-web/fig2.png
diff --git a/src/static/pdfs/web_almanac_2019_en.pdf b/src/static/pdfs/web_almanac_2019_en.pdf
diff --git a/src/static/pdfs/web_almanac_2019_ja.pdf b/src/static/pdfs/web_almanac_2019_ja.pdf
diff --git a/src/templates/en/2019/chapters/mobile-web.html b/src/templates/en/2019/chapters/mobile-web.html
@@ -145,7 +145,7 @@ <h3 id="pages-bloated-with-javascript"><a href="#pages-bloated-with-javascript"
 <figure id="fig-2">
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" aria-labelledby="fig2-caption" aria-describedby="fig2-description" loading="lazy"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343" loading="lazy" />
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy" />
   </a>
   <div id="fig2-description" class="visually-hidden">Video showing two web pages loading and each page has a figure tapping repeatedly on a button throughout the video, to no effect. There is a clock ticking up from 0 seconds at the top, and an initial happy emoji face for each website, that starts to turn less happy as clock passes 6 seconds, wide-eyed at 8 seconds, angry at 10 seconds, really angry at 13 seconds and crying at 19 seconds shortly after which the video ends.</div>
   <figcaption id="fig2-caption"><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>

diff --git a/src/templates/en/2019/ebook.html b/src/templates/en/2019/ebook.html
@@ -5520,7 +5520,7 @@ <h3 id="mobile-web-pages-bloated-with-javascript"><a href="#mobile-web-pages-blo
     <figure id="mobile-web-fig-2">
       <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description"></iframe>
       <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-        <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description" width="600" height="343" />
+        <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Example of how painful of an experience waiting for JS to load can be." aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description" width="610" height="343" />
       </a>
       <div id="mobile-web-fig2-description" class="visually-hidden">Video showing two web pages loading and each page has a figure tapping repeatedly on a button throughout the video, to no effect. There is a clock ticking up from 0 seconds at the top, and an initial happy emoji face for each website, that starts to turn less happy as clock passes 6 seconds, wide-eyed at 8 seconds, angry at 10 seconds, really angry at 13 seconds and crying at 19 seconds shortly after which the video ends.</div>
       <figcaption id="mobile-web-fig2-caption"><a href="#mobile-web-fig-2" class="anchor-link">Figure 2.</a> Example of how painful of an experience waiting for JS to load can be.</figcaption>

diff --git a/src/templates/fr/2019/chapters/mobile-web.html b/src/templates/fr/2019/chapters/mobile-web.html
@@ -145,7 +145,7 @@ <h3 id="des-pages-surchargées-de-javascript"><a href="#des-pages-surchargées-d
 <figure id="fig-2">
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" aria-labelledby="fig2-caption" aria-describedby="fig2-description" loading="lazy"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Exemple d’une expérience pénible où l’on attend que JS se charge." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343" loading="lazy" />
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="Figure 2. Exemple d’une expérience pénible où l’on attend que JS se charge." aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy" />
   </a>
   <div id="fig2-description" class="visually-hidden">Vidéo montrant deux pages web en train de se charger. Sur chaque page, un doigt tape à plusieurs reprises sur un bouton tout au long de la vidéo, sans effet. Il y a une horloge qui fait tic-tac à partir de 0 seconde en haut, et un premier visage d'emoji heureux pour chaque site web, qui commence à devenir moins heureux lorsque l'horloge passe 6 secondes, les yeux écarquillés à 8 secondes, en colère à 10 secondes, vraiment en colère à 13 secondes et pleurant à 19 secondes, peu de temps après que la vidéo se soit terminée.</div>
   <figcaption id="fig2-caption"><a href="#fig-2" class="anchor-link">Figure 2.</a> Exemple d’une expérience pénible où l’on attend que JS se charge.</figcaption>

diff --git a/src/templates/ja/2019/chapters/mobile-web.html b/src/templates/ja/2019/chapters/mobile-web.html
@@ -145,7 +145,7 @@ <h3 id="javascriptで肥大化したページ"><a href="#javascriptで肥大化
 <figure id="fig-2">
   <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" aria-labelledby="fig2-caption" aria-describedby="fig2-description" loading="lazy"></iframe>
   <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-    <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="600" height="343" loading="lazy" />
+    <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="fig2-caption" aria-describedby="fig2-description" width="610" height="343" loading="lazy" />
   </a>
   <div id="fig2-description" class="visually-hidden">2つのWebページのロードを示すビデオ。各ページには、ビデオ全体でボタンを繰り返したたく図がありますが、効果はありません。上部には0秒から刻々と刻む時計があり、各Webサイトの最初の幸せな絵文字の顔は、時計が6秒を過ぎるにつれて幸せになり始め、8秒で目が大きく、10秒で怒り、 13秒、19秒で泣いてすぐにビデオが終了</div>
   <figcaption id="fig2-caption"><a href="#fig-2" class="anchor-link">図 2.</a> JS がロードされるのを待つのがいかに苦痛であるかの例。</figcaption>

diff --git a/src/templates/ja/2019/ebook.html b/src/templates/ja/2019/ebook.html
@@ -5661,7 +5661,7 @@ <h3 id="mobile-web-javascriptで肥大化したページ"><a href="#mobile-web-j
     <figure id="mobile-web-fig-2">
       <iframe class="fig-mobile fig-desktop video-embed" width="560" height="315" src="https://www.youtube.com/embed/Lx1cYJAVnzA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description"></iframe>
       <a class="video-fallback-image" href="https://www.youtube.com/embed/Lx1cYJAVnzA">
-        <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description" width="600" height="343" />
+        <img src="/static/images/2019/mobile-web/fig2.png" alt="図2. JS がロードされるのを待つのがいかに苦痛であるかの例。" aria-labelledby="mobile-web-fig2-caption" aria-describedby="mobile-web-fig2-description" width="610" height="343" />
       </a>
       <div id="mobile-web-fig2-description" class="visually-hidden">2つのWebページのロードを示すビデオ。各ページには、ビデオ全体でボタンを繰り返したたく図がありますが、効果はありません。上部には0秒から刻々と刻む時計があり、各Webサイトの最初の幸せな絵文字の顔は、時計が6秒を過ぎるにつれて幸せになり始め、8秒で目が大きく、10秒で怒り、 13秒、19秒で泣いてすぐにビデオが終了</div>
       <figcaption id="mobile-web-fig2-caption"><a href="#mobile-web-fig-2" class="anchor-link">図 2.</a> JS がロードされるのを待つのがいかに苦痛であるかの例。</figcaption>