From 729ca05b34706ed7d1ba09cbc5be5df2d85af985 Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Mon, 11 Nov 2024 22:14:25 +0000 Subject: [PATCH 1/7] Apply missing edits (#3871) --- src/config/contributors.json | 16 +++------- src/content/en/2024/cms.md | 28 ++++-------------- .../images/2024/cms/cms-adoption-share.png | Bin 31717 -> 0 bytes 3 files changed, 9 insertions(+), 35 deletions(-) delete mode 100644 src/static/images/2024/cms/cms-adoption-share.png diff --git a/src/config/contributors.json b/src/config/contributors.json index 0f13ad932c5..c117c6f7aa5 100644 --- a/src/config/contributors.json +++ b/src/config/contributors.json @@ -1138,6 +1138,9 @@ "2022": [ "editors", "reviewers" + ], + "2024": [ + "reviewers" ] }, "website": "https://newlocalmedia.com" @@ -3661,6 +3664,7 @@ "name": "Raelene Morey", "teams": { "2024": [ + "editors", "reviewers" ] } @@ -4298,18 +4302,6 @@ "twitter": "tpiros", "website": "https://tamas.io" }, - "karmatosed": { - "avatar_url": "253067", - "github": "karmatosed", - "name": "Tammie Lister", - "teams": { - "2024": [ - "reviewers" - ] - }, - "twitter": "karmatosed", - "website": "https://tammielister.com/" - }, "tammyeverts": { "avatar_url": "15661032", "github": "tammyeverts", diff --git a/src/content/en/2024/cms.md b/src/content/en/2024/cms.md index 0739e85979a..2758b302cc0 100644 --- a/src/content/en/2024/cms.md +++ b/src/content/en/2024/cms.md @@ -3,11 +3,11 @@ title: CMS description: CMS chapter of the 2024 Web Almanac covering CMS adoption, user experience of websites running on CMS platforms, and CMS resource weights. authors: [sirjonathan, LoraRaykova, niko-kaleev] -reviewers: [raewrites, karmatosed] -editors: [tunetheweb] -analysts: [sirjonathan, nrllh] +reviewers: [raewrites, dknauss] +editors: [tunetheweb, raewrites] +analysts: [nrllh, sirjonathan] translators: [] -sirjonathan_bio: Jonathan Wold is an Open Web advocate with more than 18 years focused on the WordPress ecosystem. Beyond his love for WordPress, he enjoys reading widely, playing strategy games, acting, rock climbing, and occasionally writing in third-person. +sirjonathan_bio: Jonathan Wold is an Open Web advocate with more than 20 years focused on the WordPress ecosystem. Beyond his love for WordPress and the Open Web, he enjoys reading widely, strategy games, acting, rock climbing, and occasionally writing in third-person. LoraRaykova_bio: Lora is a Content Manager at NitroPack with 8+ years of experience developing in-depth, specialized content for SaaS companies in the CEE region. niko-kaleev_bio: Niko is a Content Writer at NitroPack with 5+ years of experience in dissecting nuanced topics like hosting, Core Web Vitals, web performance metrics and optimizations. results: https://docs.google.com/spreadsheets/d/118lwQV_GwFYqIxXvsm57oeadJdjAJEOMCRq1PsTqhfs/ @@ -71,7 +71,7 @@ As of June 2024, CMS adoption worldwide has grown steadily, matching our dataset {{ figure_markup( image="cms-adoption-by-geo.png", - caption="CMS adoption by geo.", + caption="CMS adoption by geography.", description="A barchart showing United States of America CMS's are used on 40% of desktop and 44% of mobile sites. For India it's 30% and 33% respectively, For Japan 39% and 39%, Germany 33% and 43%, Brazil 31% and 32%, United Kingdom of Great Britain and Northern Ireland 36% and 42%, France 36% and 40%, Russian Federation 37% and 39%, Indonesia 27% and 24% and finally for Italy it's 41% on desktop and 46% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQYh0RHAqp768faimbvZpvS71yJwCaOAFR0AzgotkEphtxphBKR1kt-pqgxA8Uxj4FSii1RQWwgG6rk/pubchart?oid=2018893523&format=interactive", sheets_gid="708001576", @@ -157,24 +157,6 @@ Among all websites that use an identifiable CMS, WordPress sites account for the Comparing YoY, Drupal and Joomla continue to decline in market share while Squarespace and Wix grow (0.5% and 0.8%, respectively). WordPress continues its ascent, increasing 0.6% on mobile over 2023-2024 This represents a slower pace of growth than in previous years. -### CMS adoption share - -This year's chapter includes a new addition where we analyze CMS market share. - -{{ figure_markup( - image="cms-adoption-share.png", - caption="CMS adoption share.", - description="A bar chart showing WordPress is 71.9% of the CMS market on mobile, Wix is 5.7%, Squarespace 3.1%, Joomla 3.0%, Drupal 2.3%, Duda 1.2%, 1C-Bitrix 1.1%, Tilda 1.1%, and following those there is a proliferation of smaller segments.", - chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQYh0RHAqp768faimbvZpvS71yJwCaOAFR0AzgotkEphtxphBKR1kt-pqgxA8Uxj4FSii1RQWwgG6rk/pubchart?oid=538227468&format=interactive", - sheets_gid="738765206", - sql_file="cms_adoption.sql" - ) -}} - -Staying consistent with existing trends and reports, WordPress remains the most popular CMS in the world, with as much as 71.9% of mobile websites leveraging the open-source platform. Next come the proprietary drag-and-drop CMSs Wix and Squarespace (5.7% and 3.1%, respectively), followed by Joomla at 3%. - -While the flexibility, community-driven development, and extensive ecosystem of an open-source CMS such as WordPress contribute to its popularity, it will be interesting to see how proprietary platforms influence adoption numbers in the future—especially given the slower pace of WordPress adoption observed over the past two years. - ## CMS user experience With the introduction of Core Web Vitals four years ago, user experience has become a priority. That said, while users were mainly comparing CMS platforms based on ease of use, number of plugins/extensions, and themes available, they added one additional criterion—the default user experience offered by a particular platform. diff --git a/src/static/images/2024/cms/cms-adoption-share.png b/src/static/images/2024/cms/cms-adoption-share.png deleted file mode 100644 index 1a4b06362a36b2509cf7a31cf1bd72c2018ad757..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 31717 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 verRL0O8gHIhKBwhupKnb From adc98d638323d3b9b0779ace2a60150272fe9332 Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Mon, 11 Nov 2024 22:38:28 +0000 Subject: [PATCH 2/7] Misc edits (#3872) * Misc edits * Fix fonts --- src/content/en/2019/accessibility.md | 2 +- src/content/en/2019/mobile-web.md | 6 +- src/content/en/2019/page-weight.md | 2 +- src/content/en/2019/security.md | 2 +- src/content/en/2020/cms.md | 2 +- src/content/en/2020/compression.md | 2 +- src/content/en/2020/css.md | 6 +- src/content/en/2020/ecommerce.md | 32 +++++------ src/content/en/2020/http.md | 10 ++-- src/content/en/2020/jamstack.md | 2 +- src/content/en/2020/mobile-web.md | 6 +- src/content/en/2020/privacy.md | 22 ++++---- src/content/en/2020/security.md | 18 +++--- src/content/en/2020/third-parties.md | 6 +- src/content/en/2021/accessibility.md | 22 ++++---- src/content/en/2021/caching.md | 6 +- src/content/en/2021/compression.md | 2 +- src/content/en/2021/css.md | 2 +- src/content/en/2021/ecommerce.md | 52 ++++++++--------- src/content/en/2021/http.md | 6 +- src/content/en/2021/media.md | 8 +-- src/content/en/2021/mobile-web.md | 4 +- src/content/en/2021/performance.md | 58 +++++++++---------- src/content/en/2021/privacy.md | 2 +- src/content/en/2021/pwa.md | 10 ++-- src/content/en/2021/resource-hints.md | 4 +- src/content/en/2021/structured-data.md | 22 ++++---- src/content/en/2022/accessibility.md | 26 ++++----- src/content/en/2022/cdn.md | 6 +- src/content/en/2022/javascript.md | 10 ++-- src/content/en/2022/page-weight.md | 6 +- src/content/en/2022/performance.md | 8 +-- src/content/en/2022/pwa.md | 4 +- src/content/en/2022/structured-data.md | 60 ++++++++++---------- src/content/en/2022/sustainability.md | 56 +++++++++--------- src/content/en/2022/third-parties.md | 20 +++---- src/content/en/2024/accessibility.md | 18 +++--- src/content/en/2024/cdn.md | 8 +-- src/content/en/2024/cms.md | 2 +- src/content/en/2024/cookies.md | 2 +- src/content/en/2024/fonts.md | 2 +- src/content/en/2024/jamstack.md | 16 +++--- src/content/en/2024/markup.md | 52 ++++++++--------- src/content/en/2024/performance.md | 14 ++--- src/content/en/2024/security.md | 40 ++++++------- src/content/en/2024/structured-data.md | 38 ++++++------- src/content/en/2024/sustainability.md | 78 +++++++++++++------------- src/content/ja/2022/capabilities.md | 2 +- src/content/ja/2022/media.md | 2 +- 49 files changed, 393 insertions(+), 393 deletions(-) diff --git a/src/content/en/2019/accessibility.md b/src/content/en/2019/accessibility.md index 7c580c142d0..16c3be43171 100644 --- a/src/content/en/2019/accessibility.md +++ b/src/content/en/2019/accessibility.md @@ -47,7 +47,7 @@ In order to make sure your website is readable under these conditions, making su {{ figure_markup( image="example-of-good-and-bad-color-contrast-lookzook.svg", - caption="Example of what text with insufficient color contrast looks like. Courtesy of LookZook", + caption="Example of what text with insufficient color contrast looks like. Courtesy of LookZook.", description="Four colored boxes of brown and gray shades with white text overlaid inside creating two columns. The left column says Too lightly colored and has the brown background color written as #FCA469. The right column says Recommended and the brown background color is written as #BD5B0E. The top box in each column has an brown background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grayscale equivalents are #B8B8B8 and #707070 respectively. Courtesy of LookZook", width=568, height=300 diff --git a/src/content/en/2019/mobile-web.md b/src/content/en/2019/mobile-web.md index a43a9b47dc5..11e9d9758a9 100644 --- a/src/content/en/2019/mobile-web.md +++ b/src/content/en/2019/mobile-web.md @@ -101,7 +101,7 @@ One of the most beautiful parts of the web is how web pages load progressively b {{ figure_markup( image="example-of-a-site-shifting-content-while-it-loads-lookzook.gif", - caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook", + caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook.", description="A video showing a website progressively load. The text is displayed quickly, but as images continue to load the text gets shifted further and further down the page each time—making it very frustrating to read. The calculated CLS of this example is 42.59%. Image courtesy of LookZook", width=360, height=640 @@ -207,7 +207,7 @@ Designing tap targets appropriately to mitigate this issue can be difficult beca {{ figure_markup( image="example-of-easy-to-hit-tap-targets-lookzook.png", - caption="Standards for sizing and spacing tap targets. Image courtesy of LookZook", + caption="Standards for sizing and spacing tap targets. Image courtesy of LookZook.", description="A diagram displaying two examples of difficult to tap buttons. The first example shows two buttons with no spacing between them; An example below it shows the same buttons but with the recommended amount of spacing between them (8px or 1-2mm). The second example shows a button far too small to tap; An example below it shows the same button enlarged to the recommended size of 40-48px (around 8mm). Image courtesy of LookZook", width=800, height=430 @@ -255,7 +255,7 @@ When analyzing sites containing an email input, 56.42% use `type="email"`. Simil 833 -

{{ figure_link(caption="Most commonly used invalid input types") }}
+
{{ figure_link(caption="Most commonly used invalid input types.") }}
Make sure to educate yourself and others on the large amount of input types available and double-check that you don't have any typos like the most common ones in Figure 12.7 above. diff --git a/src/content/en/2019/page-weight.md b/src/content/en/2019/page-weight.md index e439eb45a1b..6d4e5dd7534 100644 --- a/src/content/en/2019/page-weight.md +++ b/src/content/en/2019/page-weight.md @@ -219,7 +219,7 @@ Roughly speaking, mobile sites are about 10% smaller than their desktop counterp 4 -
{{ figure_link(caption="Page weight on desktop broken down by resource type") }}
+
{{ figure_link(caption="Page weight on desktop broken down by resource type.") }}
### Page weight over time diff --git a/src/content/en/2019/security.md b/src/content/en/2019/security.md index 35b7348b01e..f7545419c09 100644 --- a/src/content/en/2019/security.md +++ b/src/content/en/2019/security.md @@ -273,7 +273,7 @@ Many new and recent features for site operators to better protect their users ha {{ figure_markup( image="fig8.png", - caption="Usage of Security Headers", + caption="Usage of Security Headers.", description="A vertical bar graph showing increasing usage of security headers list for both desktop and mobile listing from left to right: cross-origin-resource-policy (0 sites on both), feature policy (approx 8k desktop and mobile) report-to (74k desktop and 83k mobile), nel (74k desktop and 83k mobile), referrer-policy (142k desktop, 156k mobile), content-security-policy (240k desktop, 252k mobile), strict-transport-security (648k desktop, 679k mobile), x-xss-protection (642k desktop, 805k mobile), x-frame-options (743k desktop, 782k mobile) and finally x-content-type-options (770k desktop, 932k mobile).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRCG3clMcnkVPrnZSCWFi3qG-EU00Qr8X3XaRFQPWHEXQmYWMxnS_kfmmyMQsPZe2P6ECjzCjG0dVFg/pubchart?oid=2029255231&format=interactive", width=760, diff --git a/src/content/en/2020/cms.md b/src/content/en/2020/cms.md index 7167dd3a032..8e663ae1015 100644 --- a/src/content/en/2020/cms.md +++ b/src/content/en/2020/cms.md @@ -278,7 +278,7 @@ The 0.1 to 1% adoption share category sees significantly more movement. These ac -
{{ figure_link(caption="Relative % adoption of smaller CMSs (0.1% - 1% adoption share)", sheets_gid="1594044364", sql_file="top_cmss_yoy_all_clients.sql") }}
+
{{ figure_link(caption="Relative % adoption of smaller CMSs (0.1% - 1% adoption share).", sheets_gid="1594044364", sql_file="top_cmss_yoy_all_clients.sql") }}
We see three new entrants here: Duda, GoDaddy Website Builder, and MyWebsite. Two, Tilda and Kentico CMS, have seen an adoption share change of over 100% in the last year. This "long tail" of CMSs cover a mix of open source and proprietary platforms and include everything from consumer-friendly to industry-specific. An incredible strength of the CMS platforms as a whole is one can get specialized software which powers every conceivable type of website. diff --git a/src/content/en/2020/compression.md b/src/content/en/2020/compression.md index 15ee684a027..9cfaf4e5b48 100644 --- a/src/content/en/2020/compression.md +++ b/src/content/en/2020/compression.md @@ -34,7 +34,7 @@ For most text-based assets, such as [HTML](./markup), [CSS](./css), [JavaScript] {{ figure_markup( image="compession-methods-by-content-type.png", - caption="Compression methods for different content types", + caption="Compression methods for different content types.", description="A stacked bar chart showing the usage rate of different compression algorithms broken down by the content type. The stacked bars divide up the use of Brotli, Gzip, and no compression. `text/html` is the only content type that is compressed less than 50% of the time. `application/json` and `image/svg+xml` are each approximately 64% compressed. `text/css` and `application/javascript` are each approximately 85% compressed. `application/x-javascript` and `text/javascript` are greater than 90% compressed.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTxUj8-0vKTqPAblIXqekSbiRh1D1lEuA3gVD9w23qwGPtJRE8FbgrURfPAgfFZX2l0t84Wy5ZAGqzR/pubchart?oid=1658254159&format=interactive", sheets_gid="107138856", diff --git a/src/content/en/2020/css.md b/src/content/en/2020/css.md index d5b78f1115e..e1ebab4faea 100644 --- a/src/content/en/2020/css.md +++ b/src/content/en/2020/css.md @@ -140,7 +140,7 @@ IDs can also be used to intentionally reduce or increase specificity. The well-known drawbacks. The median page uses `!important` in nearly 2% of its declarations, or 1 in 50. {{ figure_markup( - caption="Mobile pages using `!important` in every single declaration!", + caption="Mobile pages using `!important` in every single declaration!.", content="2,138", classes="big-number", sheets_gid="1743048352", @@ -440,7 +440,7 @@ Similarly, despite the much touted advantages of `rem` vs `em` for many use case {{ figure_markup( image="font-units.png", - caption="Relative share of font-relative units", + caption="Relative share of font-relative units.", description="Bar chart showing the relative popularity of different font-based units. `em` is used overwhelmingly on 87.3% of instances, followed by `rem` at 12.2, `ch` at 0.4%, and `ex` at 0.2% of instances on mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRpe_HsNGpekn6YZV9k6QGmcZPxalqnDrL7DrDY-7X65RZEf_-aGfWuEvhk-yWV83ctIceE1bppCLpj/pubchart?oid=166603845&format=interactive", sheets_gid="1221511608", @@ -1442,7 +1442,7 @@ It is no secret that Chrome and Safari have been way more prefix-happy, but it i Nearly all usage of prefixed functions (98%) is to specify gradients, even though this has not been necessary since 2014. The most popular of these is `-webkit-linear-gradient()` used in over a quarter of pages examined. The remaining <2% is primarily for calc, for which a prefix has not been necessary since 2013. {{ figure_markup( - caption="Percent of gradient functions across all occurrences of vendor-prefixed functions in mobile pages", + caption="Percent of gradient functions across all occurrences of vendor-prefixed functions in mobile pages.", content="98.22%", classes="big-number", sheets_gid="1586213539", diff --git a/src/content/en/2020/ecommerce.md b/src/content/en/2020/ecommerce.md index 1f70f9735f9..a3f99f71300 100644 --- a/src/content/en/2020/ecommerce.md +++ b/src/content/en/2020/ecommerce.md @@ -101,7 +101,7 @@ Lastly, Oracle Commerce Cloud unfortunately lost a bit of traction between 2019 {{ figure_markup( image="enterprise-ecommerce-platforms-2019.png", - caption="Enterprise ecommerce platforms - 2019 desktop", + caption="Enterprise ecommerce platforms - 2019 desktop.", description="A pie chart showing Salesforce Commerce Cloud was used by 33.2% of the enterprise ecommerce market in 2019, HCL WebSphere Commerce by 28.4%, SAP Commerce Cloud by 24.8%, and Oracle Commerce Cloud by 13.7%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1864431795&format=interactive", sheets_gid="1789086753", @@ -110,7 +110,7 @@ Lastly, Oracle Commerce Cloud unfortunately lost a bit of traction between 2019 {{ figure_markup( image="enterprise-ecommerce-platforms-2020.png", - caption="Enterprise ecommerce platforms - 2020 desktop", + caption="Enterprise ecommerce platforms - 2020 desktop.", description="A pie chart showing Salesforce Commerce Cloud was used by 36.8% of the enterprise ecommerce market in 2020, HCL WebSphere Commerce by 27.9%, SAP Commerce Cloud by 25.4%, and Oracle Commerce Cloud by 9.8%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1013485197&format=interactive", sheets_gid="1789086753", @@ -125,7 +125,7 @@ COVID-19 has had a huge impact on the world and necessitated an even bigger move {{ figure_markup( image="ecommerce-vendor-growth-covid-19-impact.png", - caption="Ecommerce platform growth Covid-19 impact", + caption="Ecommerce platform growth Covid-19 impact.", description="A line chart showing the growth of five popular ecommerce platforms: WooCommerce, Shopify, Wix, Magento, and PrestaShop. WooCommerce shows a steady growth with a noticeable bump in February 2020 and again in June and July. Shopify shows similar but for a smaller percentage and the other three show less of such an impact.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1475961371&format=interactive", sheets_gid="535254570", @@ -192,7 +192,7 @@ Video, despite accounting for a small number of requests, is by far largest reso {{ figure_markup( image="distribution-of-html-bytes-per-ecommerce-page.png", - caption="Distribution of HTML bytes per ecommerce page", + caption="Distribution of HTML bytes per ecommerce page.", description="A bar chart showing the number of HTML kilobytes, with the 10th percentile having 12 KB on desktop and 13 KB on mobile, the 25th percentile having 20 and 21 respectively, 50th having 35 and 36, 75th having 76 and 74, and 90th percentile having 133 KB on desktop and 134 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1956748774&format=interactive", sheets_gid="1032303587", @@ -209,7 +209,7 @@ Next, let's look at how images are used on ecommerce sites. Note that because ou {{ figure_markup( image="distribution-of-image-requests-for-ecommerce.png", - caption="Distribution of image requests for ecommerce", + caption="Distribution of image requests for ecommerce.", description="A bar chart showing the number of image requests, with the 10th percentile having 14 requests on desktop and 12 on mobile, the 25th percentile having 22 and 20 respectively, 50th having 37 and 34, 75th having 60 and 56, and 90th percentile having 101 requests on desktop and 91 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=286315936&format=interactive", sheets_gid="898563708", @@ -218,7 +218,7 @@ Next, let's look at how images are used on ecommerce sites. Note that because ou {{ figure_markup( image="distribution-of-image-bytes-for-ecommerce.png", - caption="Distribution of image bytes for ecommerce", + caption="Distribution of image bytes for ecommerce.", description="A bar chart showing the number of image kilobytes, with the 10th percentile having 242 KB on desktop and 189 KB on mobile, the 25th percentile having 546 and 486 respectively, 50th having 1,271 and 1,208, 75th having 2,835 and 2,737, and 90th percentile having 5,819 KB on desktop and 5,459 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=416820889&format=interactive", sheets_gid="898563708", @@ -233,7 +233,7 @@ The figures above show that the median ecommerce page has 34 images and an image {{ figure_markup( image="popular-image-formats-on-ecommerce-sites.png", - caption="Popular image formats on ecommerce sites", + caption="Popular image formats on ecommerce sites.", description="A bar chart showing image formats in descending order of popularity with mobile numbers showing jpg at 50.19%, png on 26.54%, gif at 17.35%, svg at 2.61%, webp at 1.17% and no format at 0.07%. Desktop usage looks to be near identical.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=753462591&format=interactive", sheets_gid="943479146", @@ -258,7 +258,7 @@ Ecommerce platforms and sites often make use of [third-party](./third-party) con {{ figure_markup( image="distribution-of-third-party-requests.png", - caption="Distribution of third-party requests", + caption="Distribution of third-party requests.", description="A bar chart showing the number of third-party requests for ecommerce sites, with the 10th percentile having 8 requests on desktop and 7 on mobile, the 25th percentile having 16 and 15 respectively, 50th having 32 and 30, 75th having 60 and 58, and 90th percentile having 103 third-party requests on desktop and 98 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1577985571&format=interactive", sheets_gid="1199548164", @@ -267,7 +267,7 @@ Ecommerce platforms and sites often make use of [third-party](./third-party) con {{ figure_markup( image="distribution-of-third-party-bytes.png", - caption="Distribution of third-party bytes", + caption="Distribution of third-party bytes.", description="A bar chart showing the number of third-party kilobytes for ecommerce sites, with the 10th percentile having 88 KB on desktop and 67 KB on mobile, the 25th percentile having 242 and 208 respectively, 50th having 547 and 489, 75th having 1,179 and 1,098, and 90th percentile having 2,367 KB on desktop and 2,155 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1165664044&format=interactive", sheets_gid="1199548164", @@ -300,7 +300,7 @@ In the context of ecommerce, this metric provides very good indication of most u {{ figure_markup( image="ecommerce-real-user-largest-contentful-paint-experiences.png", - caption="Real-user Largest Contentful Paint experiences", + caption="Real-user Largest Contentful Paint experiences.", description="A bar chart showing the number of sites with a good LCP score for the top 5 most popular ecommerce platforms. WooCommerce has 21.73% for desktop and 14.27% for mobile, Shopify has 64% and 47.47% respectively, Magento has 39.45% and 28.17%, Wix has 7.46% and 7.40%, and PrestaShop has 53.03% on desktop and 38.08% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1881724605&format=interactive", sheets_gid="768760354", @@ -315,7 +315,7 @@ First Input Delay (FID) attempts to measure interactivity, or more importantly a {{ figure_markup( image="ecommerce-real-user-first-input-delay-experiences.png", - caption="Real-user First Input Delay experiences", + caption="Real-user First Input Delay experiences.", description="A bar chart showing the number of sites with a good LCP score for the top 5 most popular ecommerce platforms. WooCommerce has 99.95% for desktop and 92.36% for mobile, Shopify has 99.96% and 96.49% respectively, Magento has 99.99% and 89.02%, Wix has 88.30% and 37.95%, and PrestaShop has 99.93% on desktop and 92.96% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=490091603&format=interactive", sheets_gid="768760354", @@ -330,7 +330,7 @@ Cumulative Layout Shift (CLS) measures how much the page "jumps about" as new co {{ figure_markup( image="ecommerce-real-user-cumulative-layout-shift-experiences.png", - caption="Real-user Cumulative Layout Shift experiences", + caption="Real-user Cumulative Layout Shift experiences.", description="A bar chart showing the number of sites with a good LCP score for the top 5 most popular ecommerce platforms. WooCommerce has 37.98% for desktop and 51.40% for mobile, Shopify has 40.72% and 40.55% respectively, Magento has 38.11% and 38.28%, Wix has 58.15% and 57.47%, and PrestaShop has 51.56% on desktop and 49.83% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=1137826141&format=interactive", sheets_gid="768760354", @@ -345,7 +345,7 @@ Looking at Core Web Vitals overall, for which sites pass all three core metrics {{ figure_markup( image="ecommerce-real-user-core-web-vitals-exeriences.png", - caption="Real-user Core Web Vitals experiences", + caption="Real-user Core Web Vitals experiences.", description="A bar chart showing the number of sites with a good LCP score for the top 5 most popular ecommerce platforms. WooCommerce has 10.72% for desktop and 8.63% for mobile, Shopify has 28.78% and 21.24% respectively, Magento has 18.33% and 11.14%, Wix has 5.23% and 3.30%, and PrestaShop has 30.43% on desktop and 19.10% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=733851599&format=interactive", sheets_gid="768760354", @@ -362,7 +362,7 @@ How are ecommerce sites using common tools like Analytics, Tag Managers, Consent {{ figure_markup( image="top-analytics-solutions-on-ecommerce-sites.png", - caption="Top analytics solutions on ecommerce sites", + caption="Top analytics solutions on ecommerce sites.", description="A bar chart showing the top Analytics providers for ecommerce platforms in descending order. For mobile Google Analytics has 77% usage, GA Enhanced eCommerce has 22%, Hotjar has 6%, New Relic has 4%, TrackJs has 3%, Yandex.Metrika has 3%, Matomo Analytics has 2%, BugSnag has 2%, Liveinternet has 2%, comScore has 1%, and Quantcast Measure has 1%. Desktop usage looks near identical.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=431305389&format=interactive", sheets_gid="618573782", @@ -444,7 +444,7 @@ This year's [Privacy](./privacy) chapter covered the adoption of Consent Managem {{ figure_markup( image="ecommerce-consent-management-platform-adoption.png", - caption="Consent Management Platform adoption", + caption="Consent Management Platform adoption.", description="A bar chart showing that 4.4% of all desktop websites and 4.0% of mobile sites use a Consent Management Platform, compared to 4.6% and 4.2% respectively for ecommerce sites. So ecommerce sites have slightly higher usage of CMPs.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ65OxpVGpTJVuFhG6EIO55Z_itqFtGnoYLm7W7SEBaRL-YGDUJsBMVrlDjLa-fNdeyNdqXxJt4a-xc/pubchart?oid=285357141&format=interactive", sheets_gid="1374272999", @@ -486,7 +486,7 @@ PJ Mclachlan (Product Manager, Google) has talked about -
{{ figure_link(caption="Relative % adoption of Jamstack frameworks", sheets_gid="1474840498", sql_file="ssg_compared_to_2019.sql") }}
+
{{ figure_link(caption="Relative % adoption of Jamstack frameworks.", sheets_gid="1474840498", sql_file="ssg_compared_to_2019.sql") }}
And concentrating on the top 5 Jamstacks further shows Next.js's lead: diff --git a/src/content/en/2020/mobile-web.md b/src/content/en/2020/mobile-web.md index ce26ecd4edb..bf8e090a518 100644 --- a/src/content/en/2020/mobile-web.md +++ b/src/content/en/2020/mobile-web.md @@ -165,7 +165,7 @@ A good LCP score is 2.5s at p75. We found that the median LCP at p75 is 2.6s on {{ figure_markup( image="median-p75-lcp-score.png", - caption="Median p75 LCP score", + caption="Median p75 LCP score.", description="A chart showing that the median LCP at p75 is 2.6s on mobile and 2.3s on desktop", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQNyVui4x9yanLKpp8Zz92IJ9c2NKCN_2g7SH-vRoelqT3nABB_uTQnXXScCUo6D-Uis1_wDzwcdGzx/pubchart?oid=964425991&format=interactive", sheets_gid="872081120" @@ -182,7 +182,7 @@ Improperly sized and unoptimized images are frequent sources for image performan {{ figure_markup( image="pages-with-properly-sized-images.png", - caption="Pages with properly sized images", + caption="Pages with properly sized images.", description="A chart showing that 41.20% of mobile pages have improperly sized images.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQNyVui4x9yanLKpp8Zz92IJ9c2NKCN_2g7SH-vRoelqT3nABB_uTQnXXScCUo6D-Uis1_wDzwcdGzx/pubchart?oid=1030767824&format=interactive", sheets_gid="699494809" @@ -202,7 +202,7 @@ This is especially important for mobile web, as shifting content is more noticea {{ figure_markup( image="example-of-a-site-shifting-content-while-it-loads-lookzook.gif", - caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook", + caption="Example of shifting content distracting a reader. CLS total of 42.59%. Image courtesy of LookZook.", description="A video showing a website progressively load. The text is displayed quickly, but as images continue to load the text gets shifted further and further down the page each time—making it very frustrating to read. The calculated CLS of this example is 42.59%. Image courtesy of LookZook", width=360, height=640 diff --git a/src/content/en/2020/privacy.md b/src/content/en/2020/privacy.md index ff3105b3d8e..a831da2ccfd 100644 --- a/src/content/en/2020/privacy.md +++ b/src/content/en/2020/privacy.md @@ -35,7 +35,7 @@ We use WhoTracksMe's tracker l {{ figure_markup( image="privacy-websites-that-load-trackers.png", - caption="Websites including at least one potential tracker", + caption="Websites including at least one potential tracker.", description="Bar chart showing that 92.94% of desktop websites and 92.97% of mobile websites load trackers.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=1325818112&format=interactive", sheets_gid="1591448294" @@ -46,7 +46,7 @@ We examined the most widely used trackers and plot the prevalence of the 10 most {{ figure_markup( image="privacy-biggest-third-party-potential-trackers.png", - caption="Top 10 Potential Trackers", + caption="Top 10 Potential Trackers.", description="Bar chart showing the prevalence of the 10 most popular potential trackers used on mobile and desktop clients. There is little difference between desktop and mobile and mobile has 65.5% for google_analytics, 65.9% for googleapis.com, 63.3% for gstatic, 58.3% for google_fonts, 50.0% for doubleclick, 47.6% for google, 42.4% for google_tag_manager, 30.9% for facebook, 19.2% for google_adservices, and 12.7% for cloudflare.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=850649042&format=interactive", sheets_gid="1677398038" @@ -59,7 +59,7 @@ WhoTracksMe's tracker list also defines categories that the trackers belong to. {{ figure_markup( image="privacy-biggest-third-party-trackers.png", - caption="Top 10 Trackers", + caption="Top 10 Trackers.", description="Bar chart showing the prevalence of the 10 most popular trackers used on mobile and desktop clients. There is little difference between desktop and mobile and mobile has 65.5% for google_analytics, 50.0% for doubleclick, 47.6% for google, 42.4% for google_tag_manager, 30.9% for facebook, 19.2% for google_adservices, 12.7% for youtube, 19.2% for google_syndication, and 6.5% for both twitter and wordpress_stats.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=1831606887&format=interactive", sheets_gid="1677398038" @@ -70,7 +70,7 @@ Here Google still makes up seven out of the top 10 domains. The following figure {{ figure_markup( image="privacy-tracker-categories.png", - caption="Categories of the 100 most popular potential trackers", + caption="Categories of the 100 most popular potential trackers.", description="Bar chart showing distribution of the top 100 potential trackers on the web with 56 for advertising, 11 for cdn, 9 for site_analytics, 6 for both social media and misc, 3 for both essential and customer_help, 2 for both audio and video and 1 for both comments and undefined.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=1117413918&format=interactive", sheets_gid="1431872451", @@ -145,7 +145,7 @@ We looked into the most popular cookies being set on websites in HTTP's response -
{{ figure_link(caption="Top cookies on desktop sites", sheets_gid="732942035", sql_file="top100_cookies_set_from_header.sql") }}
+
{{ figure_link(caption="Top cookies on desktop sites.", sheets_gid="732942035", sql_file="top100_cookies_set_from_header.sql") }}
@@ -210,7 +210,7 @@ We looked into the most popular cookies being set on websites in HTTP's response -
{{ figure_link(caption="Top cookies on mobile sites", sheets_gid="732942035", sql_file="top100_cookies_set_from_header.sql") }}
+
{{ figure_link(caption="Top cookies on mobile sites.", sheets_gid="732942035", sql_file="top100_cookies_set_from_header.sql") }}
As you can see, Google's tracking domain "doubleclick.net" sets cookies on roughly a quarter of websites on a mobile client and a third of all websites on a desktop client. Again, nine out of the ten most popular cookies on desktop client and seven out of ten on mobile are set by a Google domain. This is a lower bound for the number of websites the cookie is set on, since we are only counting cookies set via an HTTP header–a large number of tracking cookies are set by using third-party scripts. @@ -221,7 +221,7 @@ Another widely-used tracking technique is fingerprinting. This consists of colle {{ figure_markup( image="privacy-websites-with-fingerprintjs-library.png", - caption="Websites using FingerprintJS", + caption="Websites using FingerprintJS.", description="Barchart showing 0.17% of desktop sites and 0.18% of mobile sites use FingerprintJS.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=1556252953&format=interactive", sheets_gid="222110824", @@ -237,7 +237,7 @@ Cookie consent banners have become common now. They increase transparency toward {{ figure_markup( image="privacy-websites-with-consent-management-platform.png", - caption="Websites using a consent management platform", + caption="Websites using a consent management platform.", description="Bar chart showing 4.4% of desktop sites and 4.0% of mobile sites use a Consent Management Platform.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=2025542332&format=interactive", sheets_gid="1910033502", @@ -247,7 +247,7 @@ Cookie consent banners have become common now. They increase transparency toward {{ figure_markup( image="privacy-consent-management-platform-popularity.png", - caption="Popularity of consent management platform", + caption="Popularity of consent management platform.", description="Bar chart showing popular consent management platforms from Osano at 1.6%, Quantcast Choice at 1.0%, Cookiebot and OneTrust at 0.4%, Iubenda at 0.3%, Crownpeak, Didomi, and TrustArc all at 0.1%, CIVIC, Cookie Script, CookieHub, Termly, Uniconsent, CookieYes, eucookie.eu, Seers, and Metomic all at approximately 0.0%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=341496718&format=interactive", sheets_gid="1104760876", @@ -263,7 +263,7 @@ IAB Europe, the Interactive Advertising Bureau, is a European association for di {{ figure_markup( image="privacy-adoption-of-the-tcf-banner.png", - caption="Adoption rate of TCF banner", + caption="Adoption rate of TCF banner.", description="Bar chart showing that 1.5% of desktop sites and 1.4% of mobile sites have implemented IAB Europe's TCF banner.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=341275612&format=interactive", sheets_gid="2077755325", @@ -279,7 +279,7 @@ Privacy policies are widely used by websites to meet legal obligations and incre {{ figure_markup( image="privacy-websites-with-privacy-link.png", - caption="Websites that have a privacy policy", + caption="Websites that have a privacy policy.", description="Bar chart showing that 44.8% of desktop sites and 42.3% of mobile sites have a privacy link.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQJMtHv0Y1JcQJkcVyrqBk9dsujZeDtOZEv7uvE0xM2VrQSuTUDFya41TeRlTZDDe2rWmHwDghW3Dev/pubchart?oid=329249623&format=interactive", sheets_gid="495362514", diff --git a/src/content/en/2020/security.md b/src/content/en/2020/security.md index 15ec5124027..eafc10f69f0 100644 --- a/src/content/en/2020/security.md +++ b/src/content/en/2020/security.md @@ -64,7 +64,7 @@ One slight concern as we reach the end of this goal, is a noticeable "leveling o {{ figure_markup( image="security-https-usage-by-site.png", - caption="HTTPS usage for sites", + caption="HTTPS usage for sites.", description="Bar chart showing 77.44% of desktop sites are using HTTPS, with the remaining 22.56% using HTTP, while 73.22% of mobile sites are using HTTPS while the remaining 26.78% using HTTP.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=103775737&format=interactive", sheets_gid="1558058913", @@ -80,7 +80,7 @@ As HTTPS is now well and truly the norm, the challenge moves from having any sor {{ figure_markup( image="security-tls-version-by-site.png", - caption="TLS versions usage for sites", + caption="TLS versions usage for sites.", description="Bar chart showing that on desktop 55.98% of sites use TLSv1.2, while 43.23% use TLSv1.3. On mobile the figures are 53.82% and 45.37% respectively. TLSv1.0, TLSv1.1 barely register though there is a very small amount of QUIC usage (0.62% on desktop and 0.67% on mobile).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=840326541&format=interactive", sheets_gid="1486844039", @@ -115,7 +115,7 @@ For the widely used Advanced Encryption Standard (AES) key sizes of 128-bit and {{ figure_markup( image="security-distribution-of-cipher-suites.png", - caption="Distribution of cipher suites", + caption="Distribution of cipher suites.", description="Bar chart showing the cipher suites used by device, with AES_128_GCM is the most common and is used by 78.4% of desktop and mobile sites, AES_256_GCM is used by 19.1% of desktop and 18.5% of mobile sites, AES_256_CBC used by 1.44% of desktop sites and 1.86% of mobile sites, CHACHA20_POLY1305 is used by 0.66% and 0.72% of sites respectively, AES_128_CBC is used by 0.43% and 0.44% respectively, and 3DES_EDE_CBC is used by 0.01% of desktop and approximately 0.0% of mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=1464905386&format=interactive", sheets_gid="1919501829", @@ -713,7 +713,7 @@ Some other security mechanisms are even required to prevent certain types of att {{ figure_markup( image="security-adoption-of-security-headers.png", - caption="Adoption of security headers", + caption="Adoption of security headers.", description="Bar chart showing the prevalence of different security headers, for mobile pages in 2019 and 2020. `Content-Security-Policy` is 5% on desktop and 11% on mobile, `Expect-CT` is 8% on desktop and 11% on mobile, `Feature-Policy` is 0% on desktop and 1% on mobile, `Referrer-Policy` is 6% on desktop and 7% on mobile, `Report-To` is 2% on desktop and 3% on mobile, `Strict-Transport-Security` is 13% on desktop and 17% on mobile, `X-Content-Type-Options` is 26% on desktop and 30% on mobile, `X-Frame-Options` is 24% on desktop and 27% on mobile, and `X-XSS-Protection` is 16% on desktop and 18% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=1262077475&format=interactive", sheets_gid="1613840789", @@ -828,7 +828,7 @@ The Web Cryptography -
{{ figure_link(caption="Top used cryptography APIs", sheets_gid="1256054098", sql_file="web_cryptography_api.sql") }}
+
{{ figure_link(caption="Top used cryptography APIs.", sheets_gid="1256054098", sql_file="web_cryptography_api.sql") }}
Our results show that the `Cypto.getRandomValues` function, which allows for generating a random number (in a secure, cryptographic manner) is by far the most widely used one (desktop: 70% and mobile: 68%). We believe Google Analytic's use of this function has a major effect on the usage measured. In general, we see that mobile websites perform slightly fewer cryptographic operations, although mobile browsers [fully support](https://developer.mozilla.org/docs/Web/API/Web_Crypto_API#Browser_compatibility) this API. @@ -871,7 +871,7 @@ According to +
{{ figure_link(caption="Usage of bot protection services by provider.", sheets_gid="1787091453", sql_file="bot_detection.sql") }}
The figure above shows the use of bot protection and also the market share based on our dataset. We see that nearly 10% of desktop pages and 9% of mobile pages use such services. @@ -886,7 +886,7 @@ There can be many different factors that affect security at the level of a count {{ figure_markup( image="security-adoption-of-https-per-country.png", - caption="Adoption of HTTPS per country", + caption="Adoption of HTTPS per country.", description="Bar chart showing percentage of sites with HTTPS enabled, for sites related to different countries. Switzerland, New Zealand, Ireland, Nigeria and Australia are the top five in order at 95% to 94%. At the other end Thailand, Iran, South Korea, Taiwan, Japan are at 76% to 72%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=286219881&format=interactive", sheets_gid="446153579", @@ -916,7 +916,7 @@ With regard to security headers that secure content inclusion or that aim to thw {{ figure_markup( image="security-headers-as-drivers-of-adoption-of-other-headers.png", - caption="Security header as driver of adoption of other headers", + caption="Security header as driver of adoption of other headers.", description="Bar chart showing relative adoption rate of security mechanism based on the presence of different security headers. `Content-Security-Policy` has 357% for desktop and 368% for mobile, `Expect-CT` has 224% and 235% respectively, `Referrer-Policy` has 265% and 265%, `Strict-Transport-Security` has 275% and 284%, `X-Content-Type-Options` has 309% and 305%, and `X-Frame-Options` has 286% for desktop and 299% for mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=1444988925&format=interactive", sheets_gid="1707889711", @@ -948,7 +948,7 @@ As one of the most popular [Content Management Systems](./cms), WordPress is an {{ figure_markup( image="security-evolution-of-wordpress-5-3and5-4-after-update.png", - caption="Evolution of WordPress 5.3 and 5.4 after update", + caption="Evolution of WordPress 5.3 and 5.4 after update.", description="Stacked bar chart showing the evolution of WordPress versions 5.3.2, 5.3.3, 5.4 and 5.4.1. We can see over time starting in March 2020 that 5.3.2 is the only one of those version being used and has 50.08% adoption, in April 5.4 comes in and takes up third thirds of the adoption of these versions which increases to 54.23% in total, in May 5.4.1 comes out and there is mixed usage of all three versions with a total of 58.78%, in June it has reduced by almost half to 32.76% and most of the remaining usage is 5.4.1, in July these versions are used on just 4.55% of sites, and reducing to 3.59% in August", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTb4PkXuhnxNc-X_Jovx0970pV22ucCnNloa2g8KPMLJmp39E62oSE4XvBlAVSGL0oEEHZa71_bgsV4/pubchart?oid=503316556&format=interactive", sheets_gid="155582197", diff --git a/src/content/en/2020/third-parties.md b/src/content/en/2020/third-parties.md index d2563507193..02a6050d302 100644 --- a/src/content/en/2020/third-parties.md +++ b/src/content/en/2020/third-parties.md @@ -82,7 +82,7 @@ A good starting point for this analysis is to confirm the statement that third-p {{ figure_markup( image="pages-with-thirdparties.png", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSNXusoFJKi8Z1i_yuG_5umUCJOZwBMaZaECq4T8lU5zIQuLR7UHfZOJmXsXzPWQTJFnFa3dcOEPJgy/pubchart?oid=1149547895&format=interactive", - caption="Pages with third-party content", + caption="Pages with third-party content.", description="Third party content prevalence has grown slightly since 2019. In 2019 93.6% of mobile pages had third-party content, in 2020 this was 94.1%. In 2019 93.6% of desktop pages had third-party content, in 2020 this was 93.9%.", width=600, height=371, @@ -114,7 +114,7 @@ We can break down third-party requests by their content type. This is the report {{ figure_markup( image="thirdparty-by-content-types.png", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSNXusoFJKi8Z1i_yuG_5umUCJOZwBMaZaECq4T8lU5zIQuLR7UHfZOJmXsXzPWQTJFnFa3dcOEPJgy/pubchart?oid=258155228&format=interactive", - caption="Third-party content by type", + caption="Third-party content by type.", description="Images and JavaScript account for the majority (60%) of third-party content: 37.1% of third-party content is images, 21.9% is JavaScript, 16.1% is unknown or other, 15.4% is HTML", width=600, height=371, @@ -212,7 +212,7 @@ Many third-parties result in redirect responses, i.e. HTTP status codes 3XX. The {{ figure_markup( image="redirects-body-size.png", - caption="Distribution of third-party 3XX body size", + caption="Distribution of third-party 3XX body size.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSNXusoFJKi8Z1i_yuG_5umUCJOZwBMaZaECq4T8lU5zIQuLR7UHfZOJmXsXzPWQTJFnFa3dcOEPJgy/pubchart?oid=1145900631&format=interactive", description="Distribution of redirect body sizes showing 90% are under 420 B, 1% are over 30 kB and 0.1% are over 100 kB.", width=600, diff --git a/src/content/en/2021/accessibility.md b/src/content/en/2021/accessibility.md index b09820978bf..5a15093bff5 100644 --- a/src/content/en/2021/accessibility.md +++ b/src/content/en/2021/accessibility.md @@ -165,7 +165,7 @@ The CSS Media Queri [`prefers-contrast`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast) (`high` or `low`) suggests that the end user would prefer a [high-contrast or low-contrast](#color-contrast) contrast theme. This can help with reading comprehension and eye strain. We do not have data on the usage of this relatively new media query though we found that 25% of websites use [`ms-high-contrast`](https://developer.mozilla.org/docs/Web/CSS/@media/-ms-high-contrast) which is a Windows-specific approach to handling contrast preferences. -[`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) (`light` or `dark`) allows a user to request light color on a dark background experience, or vice-versa. This was the earliest of the User Preference Media Queries to be introduced. This capability, commonly known as "dark mode" support, rose to prominence in 2019 after Apple standardized it in iOS 13 and iPadOS, though it had been a common accessibility feature for many years prior to that. +[`prefers-color-scheme`](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) (`light` or `dark`) allows a user to request light color on a dark background experience, or vice-versa. This was the earliest of the User Preference Media Queries to be introduced. This capability, commonly known as "dark mode" support, rose to prominence in 2019 after [Apple standardized it](https://wikipedia.org/wiki/Light-on-dark_color_scheme#History) in iOS 13 and iPadOS, though it had been a common accessibility feature for many years prior to that. While dark mode is recognized by many developers and designers as an accessibility affordance, it is important to note that dark mode may, in fact, reduce accessibility for certain users. Some people with dyslexia or astigmatism might find light text on a dark background harder to read, and might find that it exacerbates the halo effect. The important takeaway here is to let your user choose what works best for them. We found that 7% of websites use the `prefers-color-scheme` media query. @@ -238,7 +238,7 @@ Descriptive page titles are helpful for context when moving between pages, tabs, {{ figure_markup( image="page_title-information.png", - caption="Title element statistics", + caption="Title element statistics.", description="A bar chart showing 98.2% of desktop sites and 98.1% of mobile sites use the `` element, 68.5% and 69.3% of those titles have four or more words, and 4.1% on both desktop and mobile are changed on render.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQf4cxIC7ywDV-K2RpfaTeCYI4URyJE1air8BCAxoOw7VW9MjGRQfwHuILvhw-6UmcWnsrAJ0-1TTD_/pubchart?oid=467029485&format=interactive", sheets_gid="1437437016", @@ -269,7 +269,7 @@ We found that 58% of desktop sites and 56% of mobile sites have some usage of th {{ figure_markup( image="tabindex-usage-and-values.png", - caption="`tabindex` usage", + caption="`tabindex` usage.", description="Bar chart showing that of pages that use `tabindex`, a negative or zero `tabindex` is used on 96.9% of those pages for desktop and 97.4% of those pages for mobile, a `tabindex` of 0 is used on 68.2% and 68.3% respectively, a negative `tabindex` is used on 74.2% and 73.3%, and finally a positive `tabindex` is used on 8.7% and 7.7%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQf4cxIC7ywDV-K2RpfaTeCYI4URyJE1air8BCAxoOw7VW9MjGRQfwHuILvhw-6UmcWnsrAJ0-1TTD_/pubchart?oid=632373616&format=interactive", sheets_gid="1330777562", @@ -380,7 +380,7 @@ For example, The Web Almanac is created each year by sending out a similar kind For cases where websites want to verify that the visitor is a human, one technique web authors sometimes use is putting up a test that a human can theoretically pass, and a computer cannot. These types of "human-only" tests are called a CAPTCHA— "Completely Automated Public Turing Test, to Tell Computers and Humans Apart". {{ figure_markup( - caption="Desktop sites using a CAPTCHA", + caption="Desktop sites using a CAPTCHA.", content="10.2%", classes="big-number", sheets_gid="1059643233", @@ -470,7 +470,7 @@ There are two attributes that can be used to communicate the required state of a {{ figure_markup( image="form-required-controls.png", - caption="How required inputs are specified", + caption="How required inputs are specified.", description="A bar chart showing the `required` attribute is used on 64.3% of desktop sites and 65.7% of mobile sites, `aria-required` is used by 32.3% and 31.6%, asterisk is used by 21.9% and 22.3%, `required` and `aria-required` is used by 7.4% and 7.7%, asterisk and `aria-required` is used by 7.3% and 8.2%, asterisk and `required` us used by 7.1% and 6.3%, and all three are used by 0.8% of sites on both.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQf4cxIC7ywDV-K2RpfaTeCYI4URyJE1air8BCAxoOw7VW9MjGRQfwHuILvhw-6UmcWnsrAJ0-1TTD_/pubchart?oid=1608381516&format=interactive", sheets_gid="2064792791", @@ -547,7 +547,7 @@ We found that 27% of `alt` text attributes were empty. In an ideal world this wo [`<track>`](https://developer.mozilla.org/docs/Web/HTML/Element/track) provides a way for a text equivalent to be provided for audio in `<audio>` and `<video>` elements. This allows people with permanent or temporary hearing loss to be able to understand audio content. {{ figure_markup( - caption="Desktop websites with an `<audio>` element have at least one accompanying `<track>` element", + caption="Desktop websites with an `<audio>` element have at least one accompanying `<track>` element.", content="0.02%", classes="big-number", sheets_gid="1198212185", @@ -564,7 +564,7 @@ These data points do not include audio embedded via an `<iframe>` element, which The `<video>` element was only present on roughly 5% of the websites included in the 2021 Web Almanac. {{ figure_markup( - caption="Desktop websites with an `<video>` element have at least one accompanying `<track>` element", + caption="Desktop websites with an `<video>` element have at least one accompanying `<track>` element.", content="0.5%", classes="big-number", sheets_gid="1261793459", @@ -625,7 +625,7 @@ If non-interactive elements such as `<div>`s and `<span>`s have been assigned a When a button role is applied to an `<a>` element, it overrides the implicit link role that anchor elements come with. This can lead to a confusing user experience because the expected behavior for a button would be to trigger an in-page action, whereas a link would typically navigate somewhere. There would also be a violation <a hreflang="en" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html">WCAG 2.1.1, Keyboard</a> if the correct keyboard behavior has not been implemented (links are not activated with the space key, whereas buttons are). Additionally, when a button role is announced by a screen reader without the expected corresponding behavior, it can create a confusing and disorienting experience for an assistive technology user. {{ figure_markup( - caption="Desktop websites have at least one link with a button role", + caption="Desktop websites have at least one link with a button role.", content="18.6%", classes="big-number", sheets_gid="1014817325", @@ -698,7 +698,7 @@ We found that 57% of buttons on both desktop and mobile sites get their accessib There are several ways to ensure that assistive technology will not discover content. We can leverage CSS `display: none;` to omit the elements from the accessibility tree. If an author wishes to hide content from screen readers specifically, they can use `aria-hidden="true"`. Note that unlike `display: none;` a declaration of `aria-hidden="true"` will not visibly remove an element and its children. {{ figure_markup( - caption="Desktop websites have at least one instance of the `aria-hidden` attribute", + caption="Desktop websites have at least one instance of the `aria-hidden` attribute.", content="53.8%", classes="big-number", sheets_gid="1763660541", @@ -717,7 +717,7 @@ Hiding and showing content is a prevalent pattern in modern interfaces, and it c A common technique that developers employ to supply additional information for screen reader users is to use CSS to visually hide a passage of text but make it discoverable by a screen reader. Since `display: none;` prevents content from being present in the accessibility tree, there is a common pattern involving a specific set of declarations of CSS code. {{ figure_markup( - caption="Desktop websites with a `sr-only` or `visually-hidden` class", + caption="Desktop websites with a `sr-only` or `visually-hidden` class.", content="14.3%", classes="big-number", sheets_gid="960991314", @@ -739,7 +739,7 @@ Accessibility overlays, sometimes referred to as accessibility plugins or overla Many of these products have deceptive marketing materials suggesting that one line of code can make websites accessible, or at least legally compliant from an accessibility standpoint. -For example, <a hreflang="en" href="https://en.wikipedia.org/wiki/AccessiBe">accessiBe</a>, one of the most aggressive products in this space, explains their process as being able to make sites accessible and compliant within 48 hours by simply pasting their JavaScript installation code into production code. +For example, [accessiBe](https://wikipedia.org/wiki/AccessiBe), one of the most aggressive products in this space, explains their process as being able to make sites accessible and compliant within 48 hours by simply pasting their JavaScript installation code into production code. Unfortunately, web accessibility is simply not possible to achieve with an out of the box solution like this. If it were, we would likely not see the sobering statistics throughout this chapter. diff --git a/src/content/en/2021/caching.md b/src/content/en/2021/caching.md index 469fb603b38..05bbda7465b 100644 --- a/src/content/en/2021/caching.md +++ b/src/content/en/2021/caching.md @@ -174,7 +174,7 @@ The most misused `Cache-Control` directive continues to be `set-cookie`, used fo When we take a look when `no-cache`, `max-age=0` and `no-store` are used together, we also see a growing trend year after year, in which `no-store` is specified with either/both of `no-cache` and `max-age=0`, the `no-store` directive takes precedence, and the other directives are ignored. Driving more awareness around using these directives, for example during larger conferences, could help avoid accidentally wasted bytes. {{ figure_markup( - caption="Largest recorded value for `max-age`", + caption="Largest recorded value for `max-age`.", content="51 trillion years", classes="medium-number", sheets_gid="529870849", @@ -351,7 +351,7 @@ When we compare the mobile data between 2020 and 2021, we notice a 5.1% increase </tbody> </table> <figcaption>{{ figure_link( - caption="Median TTL (in days)", + caption="Median TTL (in days).", sheets_gid="1792973510", sql_file="ttl_by_resource.sql" ) }}</figcaption> @@ -410,7 +410,7 @@ This data shows us that first parties have prioritized refreshing HTML content, Mobile resources with a cache TTL that was considered too short compared to its content age have seen an improvement since 2020. This data is exciting because it hints at the community's growing understanding of appropriately relative caching. {{ figure_markup( - caption="54% of mobile resources are older than their TTL", + caption="54% of mobile resources are older than their TTL.", content="54%", classes="big-number", sheets_gid="768623684", diff --git a/src/content/en/2021/compression.md b/src/content/en/2021/compression.md index cd9a8679c55..e0e20a2f417 100644 --- a/src/content/en/2021/compression.md +++ b/src/content/en/2021/compression.md @@ -32,7 +32,7 @@ HTTP compression is recommended for text-based content, such as [HTML](./markup) {{ figure_markup( image="compession-methods-by-content-type.png", - caption="Compression methods for different content types", + caption="Compression methods for different content types.", description="A stacked bar chart showing the usage rate of different compression algorithms broken down by the content type. The stacked bars divide up the use of Brotli, Gzip, and no compression. `text/plain` and `text/html` are the only content types that are compressed less than 50% of the time. `application/json` is compressed approximately 68% of the time, `image/svg+xml` approximately 64%. `text/css` and `application/javascript` are each compressed over 85% of the time, and `application/x-javascript` and `text/javascript` are compressed more than 90% of the time.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQtfyTM9VEweN_Hli3IuxxqU1CRap4V5Q28baEs7aEBResoPRgk9Dwp1m_vdS9lzNlfO8J4hZN7GPT7/pubchart?oid=1292728213&format=interactive", sheets_gid="234112121", diff --git a/src/content/en/2021/css.md b/src/content/en/2021/css.md index baae1c93cef..3936ffd9c1f 100644 --- a/src/content/en/2021/css.md +++ b/src/content/en/2021/css.md @@ -1313,7 +1313,7 @@ Moving down the list, we took a look at margin and padding properties. Much as w {{ figure_markup( image="usage-of-font-shorthand-vs-longhands.png", - caption="The most commonly used font properties", + caption="The most commonly used font properties.", description="A chart with all values given for mobile (desktop is almost always within a percent or two). The results are as follows. `font-size` 95%, `font-family` 94%, `font-weight` 92%, `font-style` 86%, `font` 82% with desktop at 57%, `font-variant` 23% with desktop at 12%, `font-stretch` 5%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRXMwdR5iy0KEMBzUWuZqDfWsj8HDDJcd5lFfjJpBmJr8gI1TE3xz2BzbNB9SEzSrxDtxfqvDvnvbQ3/pubchart?oid=1034544520&format=interactive", sheets_gid="886194727", diff --git a/src/content/en/2021/ecommerce.md b/src/content/en/2021/ecommerce.md index 9bad09dab3b..381a23beeb1 100644 --- a/src/content/en/2021/ecommerce.md +++ b/src/content/en/2021/ecommerce.md @@ -109,7 +109,7 @@ This year, the <a hreflang="en" href="https://developers.google.com/web/tools/ch {{ figure_markup( image="top-5-ecommerce-platforms-by-crux-rank.png", - caption="Top 5 ecommerce platforms share by CRUX rank", + caption="Top 5 ecommerce platforms share by CRUX rank.", description="A bar chart showing the usage of ecommerce platforms within top 10,000, top 100,000, top 1 million and all sites. In contrast to all sites, in the top 100,000 on mobile Magento has 1.21%, Shopify has 0.88%, WooCommerce has 0.56% share, PrestaShop has 0.33% and Wix eCommerce has 0%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=211149833&format=interactive", sheets_gid="1491793974", @@ -129,7 +129,7 @@ Another way to look at the results is to consider the most popular platforms wit {{ figure_markup( image="top-ecommerce-platforms-top-1m-sites.png", - caption="Top ecommerce platforms of 1 million sites", + caption="Top ecommerce platforms of 1 million sites.", description="A bar chart showing in descending order the usage of ecommerce platforms within the top 1 million sites. 3.49% on mobile are WooCommerce, 2.76% are Shopify, 1.48% are Magento, 1.17% are PrestaShop, 0.23% are Shopware, 0.22% are BigCommerce, 0.15% are Salesforce Commerce Cloud, 0.14% are VTEX, 0.10 are Shoper, and finally 0.10% are Tray. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=86873602&format=interactive", sheets_gid="1491793974", @@ -146,7 +146,7 @@ We also see Magento take the third spot over PrestaShop. Wix eCommerce and Squar {{ figure_markup( image="top-ecommerce-platforms-top-100k-sites.png", - caption="Top ecommerce platforms of top 100,000 sites", + caption="Top ecommerce platforms of top 100,000 sites.", description="A bar chart showing in descending order the usage of ecommerce platforms within the top 100,000 sites. On mobile 1.21% are Magento, 0.88% are Shopify, 0.63% are Salesforce Commerce Cloud, 0.56% are WooCommerce, 0.33% are PrestaShop, 0.30% are SAP Commerce Cloud, 0.28% are VTEX, 0.10% are HCL Commerce, 0.08% are Shopware, and finally 0.06% are Amazon Webstore. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=942112971&format=interactive", sheets_gid="1491793974", @@ -161,7 +161,7 @@ When we consider the top 100,000 sites by CrUX rank the picture changes quite dr {{ figure_markup( image="top-ecommerce-platforms-top-10k-sites.png", - caption="Top ecommerce platforms of top 10,000 sites", + caption="Top ecommerce platforms of top 10,000 sites.", description="A bar chart showing in descending order the usage of ecommerce platforms within the top 10,000 sites. On mobile 0.70% are SAP Commerce Cloud, 0.68% are Salesforce Commerce Cloud, 0.32% are Magento, 0.26% are HCL Commerce, 0.13% are Oracle Commerce, 0.12% are Shopify, 0.10% are WooCommerce, 0.10% are VTEX, 0.10% are Amazon Webstore, and 0.07% are SummerCart. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1147944186&format=interactive", sheets_gid="1491793974", @@ -186,7 +186,7 @@ Fast-forward to 2021, people and businesses around the world have continued to a {{ figure_markup( image="ecommerce-vendor-growth-covid-19-impact.png", - caption="Ecommerce platform growth Covid-19 impact", + caption="Ecommerce platform growth Covid-19 impact.", description="A line chart showing the growth of five popular ecommerce platforms: WooCommerce, Shopify, PrestaShop, Magento, and Wix eCommerce. WooCommerce shows a steady growth with a noticeable bump in February 2020 and again in June and July. Shopify shows similar but for a smaller percentage and the other three show less of such an impact. Beyond Q3 2020 there are fewer notable increases.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1480107860&format=interactive", sheets_gid="1789671097", @@ -223,7 +223,7 @@ One way of measuring the technical quality of a web page is with <a hreflang="en {{ figure_markup( image="median-lighthouse-scores-for-ecommerce-websites.png", - caption="Median Lighthouse scores for ecommerce websites", + caption="Median Lighthouse scores for ecommerce websites.", description="A bar chart showing the median Lighthouse scores for ecommerce websites. The median Performance score was 22 out of 100, the median Accessibility score was 83, the median PWA score was 42, the median SEO score was 90, and the median Best Practices score was 73.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=401880767&format=interactive", sheets_gid="669431111", @@ -250,7 +250,7 @@ The best results are likely to be found by those businesses that can find a bala {{ figure_markup( image="median-lighthouse-performance-scores-for-ecommerce-websites.png", - caption="Median Lighthouse performance scores for ecommerce websites", + caption="Median Lighthouse performance scores for ecommerce websites.", description="A bar chart showing the median Lighthouse performance scores for ecommerce websites by ecommerce platform in descending order of platform popularity. The median performance score on mobile for each platform is as follows: WooCommerce (20), Shopify (27), PrestaShop (22), Magento (18), Wix eCommerce (27), Squarespace Commerce (16), BigCommerce (25), and Shopware (20).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1706895252&format=interactive", sheets_gid="1379786622", @@ -265,7 +265,7 @@ Shopify, to its credit, has recently <a hreflang="en" href="https://shopify.dev/ {{ figure_markup( image="median-lighthouse-accessibility-scores-for-ecommerce-websites.png", - caption="Median Lighthouse accessibility scores for ecommerce websites", + caption="Median Lighthouse accessibility scores for ecommerce websites.", description="A bar chart showing the median Lighthouse accessibility scores for ecommerce websites by ecommerce platform in descending order of platform popularity. The median accessibility score on mobile for each platform is as follows: WooCommerce (85), Shopify (85), PrestaShop (75), Magento (80), Wix eCommerce (88), Squarespace Commerce (90), BigCommerce (78), and Shopware (85).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=985330269&format=interactive", sheets_gid="1379786622", @@ -291,7 +291,7 @@ It appears that PWA support is not a priority for all ecommerce businesses. We m {{ figure_markup( image="median-lighthouse-best-practices-scores-for-ecommerce-websites.png", - caption="Median Lighthouse best practices scores for ecommerce websites", + caption="Median Lighthouse best practices scores for ecommerce websites.", description="A bar chart showing the median Lighthouse best practices scores for ecommerce websites by ecommerce platform in descending order of platform popularity. The median best practices score on mobile for each platform is as follows: WooCommerce (80), Shopify (73), PrestaShop (73), Magento (73), Wix eCommerce (93), Squarespace Commerce (87), BigCommerce (73), and Shopware (87).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=2076322933&format=interactive", sheets_gid="1379786622", @@ -321,7 +321,7 @@ In this section, we will review sites that have reached a "good" threshold on al {{ figure_markup( image="ecommerce-real-user-core-web-vitals-experiences.png", - caption="Real-user Core Web Vitals experiences", + caption="Real-user Core Web Vitals experiences.", description="A bar chart showing the number of sites with good CWV experiences for the top 5 most popular ecommerce platforms. WooCommerce has 16.92% on desktop and 11.32% on mobile, Shopify has 43.22% on desktop and 32.64% on mobile, PrestaShop has 40.50% on desktop and 21.46% on mobile, Magento has 25.80% on desktop and 14.02% on mobile, Wix eCommerce has 29.86% on desktop and 21.57% on mobile, and Squarespace Commerce has 38.04% on desktop and 13.31% on mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1634335022&format=interactive", sheets_gid="1963925384", @@ -346,7 +346,7 @@ Firstly, there is the <a hreflang="en" href="https://web.dev/articles/lcp">Large {{ figure_markup( image="ecommerce-real-user-largest-contentful-paint-experiences.png", - caption="Real-user Largest Contentful Paint experiences", + caption="Real-user Largest Contentful Paint experiences.", description="A bar chart showing the number of sites with good LCP experiences for the top 5 most popular ecommerce platforms. WooCommerce has 28.07% on desktop and 17.53% on mobile, Shopify has 75.93% on desktop and 57.94% on mobile, PrestaShop has 61.54% on desktop and 39.85% on mobile, Magento has 45.20% on desktop and 30.03% on mobile, Wix eCommerce has 36.70% on desktop and 26.20% on mobile, and Squarespace Commerce has 39.63% on desktop and 24.37% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=949717130&format=interactive", sheets_gid="1963925384", @@ -367,7 +367,7 @@ The second metric, <a hreflang="en" href="https://web.dev/articles/fid">First In {{ figure_markup( image="ecommerce-real-user-first-input-delay-experiences.png", - caption="Real-user First Input Delay experiences", + caption="Real-user First Input Delay experiences.", description="A bar chart showing the number of sites with good FID experiences for the top 5 most popular ecommerce platforms. For mobile WooCommerce has 97.44%, Shopify has 98.21%, PrestaShop has 97.19%, Magento has 96.61%, Wix eCommerce has 92.05%, and Squarespace Commerce has 98.23%. Desktop percentages look very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=411508866&format=interactive", sheets_gid="1963925384", @@ -388,7 +388,7 @@ The final of the three CWV metrics is <a hreflang="en" href="https://web.dev/art {{ figure_markup( image="ecommerce-real-user-cumulative-layout-shift-experiences.png", - caption="Real-user Cumulative Layout Shift experiences", + caption="Real-user Cumulative Layout Shift experiences.", description="A bar chart showing the number of sites with good CLS experiences for the top 5 most popular ecommerce platforms on mobile. WooCommerce has 53.46% on desktop and 55.34% on mobile, Shopify has 55.97% on desktop and 52.58% on mobile, PrestaShop has 61.78% on desktop and 47.95% on mobile, Magento has 48.77% on desktop and 36.46% on mobile, Wix eCommerce has 74.15% on desktop and 76.26% on mobile, and Squarespace Commerce has 60.23% on desktop and 49.61% on mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1602906686&format=interactive", sheets_gid="1963925384", @@ -478,7 +478,7 @@ The HTML payload is the size of the document response. In addition to HTML, this {{ figure_markup( image="distribution-of-html-bytes-per-ecommerce-page.png", - caption="Distribution of HTML bytes per ecommerce page", + caption="Distribution of HTML bytes per ecommerce page.", description="A bar chart showing the number of HTML kilobytes, with the 10th percentile having 14 KB on desktop and on mobile, the 25th percentile having 22 and 21 respectively, 50th having 39 and 38, 75th having 75 and 76, and 90th percentile having 141 KB on desktop and 144 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1110473821&format=interactive", sheets_gid="1110292504", @@ -495,7 +495,7 @@ Images are the second most requested resource type as well as the second-largest {{ figure_markup( image="distribution-of-image-requests-for-ecommerce.png", - caption="Distribution of image requests for ecommerce", + caption="Distribution of image requests for ecommerce.", description="A bar chart showing the number of image requests, with the 10th percentile having 11 requests on desktop and 10 on mobile, the 25th percentile having 19 and 17 respectively, 50th having 31 and 28, 75th having 51 and 47, and 90th percentile having 84 requests on desktop and 76 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1959478173&format=interactive", sheets_gid="1637609725", @@ -508,7 +508,7 @@ Overall, there is a 10-20% reduction in the number of images requested. It is ha {{ figure_markup( image="distribution-of-image-bytes-for-ecommerce.png", - caption="Distribution of image bytes for ecommerce", + caption="Distribution of image bytes for ecommerce.", description="A bar chart showing the number of image kilobytes, with the 10th percentile having 266 KB on desktop and 219 KB on mobile, the 25th percentile having 577 and 522 respectively, 50th having 1,315 and 1,241, 75th having 2,952 and 2,803, and 90th percentile having 6,074 KB on desktop and 5,577 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1732107846&format=interactive", sheets_gid="1637609725", @@ -523,7 +523,7 @@ Given we have seen that the number of image requests is slightly down, the avera {{ figure_markup( image="poppular-image-formats-ecommerce.png", - caption="Popular images formats on ecommerce websites", + caption="Popular images formats on ecommerce websites.", description="A distribution chart showing the share of image type usage. JPG is 53% on desktop and 54% on mobile, PNG is 27% on both, GIF is 14% on both, SVG and WEBP are 2% on both, ICO is 1% on both and other is 0%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=435186757&format=interactive", sheets_gid="797916311", @@ -544,7 +544,7 @@ Ecommerce platforms and sites often make use of [third-party](./third-parties) c {{ figure_markup( image="distribution-of-third-party-requests.png", - caption="Distribution of third-party requests", + caption="Distribution of third-party requests.", description="A bar chart showing the number of third-party requests for ecommerce sites, with the 10th percentile having 8 requests on desktop and 7 on mobile, the 25th percentile having 17 and 15 respectively, 50th having 33 and 30, 75th having 60 and 56, and 90th percentile having 96 third-party requests on desktop and 91 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1946741517&format=interactive", sheets_gid="681665784", @@ -555,7 +555,7 @@ The median ecommerce site on mobile made 30 requests to third parties. While las {{ figure_markup( image="distribution-of-third-party-bytes.png", - caption="Distribution of third-party bytes", + caption="Distribution of third-party bytes.", description="A bar chart showing the number of third-party kilobytes for ecommerce sites, with the 10th percentile having 104 KB on desktop and 75 KB on mobile, the 25th percentile having 250 and 203 respectively, 50th having 569 and 495, 75th having 1,227 and 1,119, and 90th percentile having 2,527 KB on desktop and 2,306 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=52384863&format=interactive", sheets_gid="681665784", @@ -578,7 +578,7 @@ Unfortunately, we are unable to make statements about the proliferation of headl {{ figure_markup( image="top-javascript-frameworks-ecommerce.png", - caption="Top JavaScript frameworks on ecommerce sites", + caption="Top JavaScript frameworks on ecommerce sites.", description="A bar chart showing the most popular JavaScript frameworks on ecommerce sites in descending order of popularity. GSAP has 15.07% share of mobile ecommerce sites, Require JS 7.22%, Handlebars has 6.09%, styled-components has 3.79%, Vue.js has 3.41%, Prototype have 2.66%, Stimulus has 2.47%, Backbone JS has 1.80%, Moustache has 1.54% and Angular JS has 0.71%. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=532064877&format=interactive", sheets_gid="1754008320", @@ -589,7 +589,7 @@ Unfortunately, we are unable to make statements about the proliferation of headl {{ figure_markup( image="top-javascript-libraries-ecommerce.png", - caption="Top JavaScript libraries on ecommerce sites", + caption="Top JavaScript libraries on ecommerce sites.", description="A bar chart showing the most popular JavaScript libraries on ecommerce sites in descending order of popularity. jQuery has 93.66% share of mobile ecommerce sites, jQuery Migrate has 39.74%, jQuery UI has 30.99%, Modernizr has 19.57%, Lodash has 16.60%, Boomerang has 13.53%, FancyBox has 12.48%, React has 11.82%, Underscore.js has 11.65%, and Slick has 9.90%. Desktop usage looks almost identical.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=852523817&format=interactive", sheets_gid="2088662521", @@ -610,7 +610,7 @@ One of the beauties of ecommerce is that you can measure how well you're doing b {{ figure_markup( image="top-analytics-ecommerce.png", - caption="Top analytics solutions on ecommerce sites", + caption="Top analytics solutions on ecommerce sites.", description="A bar chart showing the most popular analytics solutions libraries on ecommerce sites in descending order of popularity. Google Analytics has 74.19% share of mobile ecommerce sites, Google Analytics Enhanced Ecommerce has 13.38%, HotJar has 5.90%, Yandex Metrika has 6.31%, New Relic has 2.80%, Matomo Analytics has 2.21%, Site Kit has 1.65%, and Moat has 1.20%. Desktop usage looks very similar", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1380267770&format=interactive", sheets_gid="1942109850", @@ -627,7 +627,7 @@ These tools provide ecommerce and marketing teams with reduced cycle time for la {{ figure_markup( image="top-tag-managers-ecommerce.png", - caption="Top tag managers on ecommerce sites", + caption="Top tag managers on ecommerce sites.", description="A bar chart showing the most popular tag managers on ecommerce sites in descending order of popularity. Google Tag Manager has 53.95% share of mobile ecommerce sites, Tealium has 0.26%, Adobe Experience Platform Launch has 0.20% and Adobe DTM has 0.08%. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1744266071&format=interactive", sheets_gid="1965630509", @@ -642,7 +642,7 @@ In a similar vein to analytics, implementing an A/B testing solution enables hyp {{ figure_markup( image="top-ab-testing-ecommerce.png", - caption="Top A/B testing solutions on ecommerce sites", + caption="Top A/B testing solutions on ecommerce sites.", description="A bar chart showing the most popular A/B testing solutions on ecommerce sites in descending order of popularity. Google Optimize has 2.06% share of mobile ecommerce sites, VWO has 0.15%, Optimizely and Adobe Target both have 0.12%, SiteSpect has 0.10%, Oracle Maximiser 0.07%, and AB Tasty and Convert all have 0.05% share of mobile sites. Desktop usage looks very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1079713389&format=interactive", sheets_gid="1562966266", @@ -678,7 +678,7 @@ We may explain away the low usage statistics by saying that it is from a lack of {{ figure_markup( image="web-push-notification-acceptance-rates-ecommerce.png", - caption="Web Push Notification acceptance rates", + caption="Web Push Notification acceptance rates.", description="A bar chart showing the percentage acceptance rates of Web Push Notifications, with the 10th percentile having 4.92% on mobile, the 25th percentile having 9.67%, 50th having 14.23%, 75th having 19.91%, and 90th percentile having 29.80%. Desktop acceptance rates look near identical.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=1221136912&format=interactive", sheets_gid="771576347", @@ -763,7 +763,7 @@ A `hreflang` attribute is used to communicate the language that the page is targ {{ figure_markup( image="hreflang-links-ecommerce.png", - caption="Top `hreflang` links used on ecommerce sites", + caption="Top `hreflang` links used on ecommerce sites.", description="A bar chart showing the percentage of ecommerce sites where languages were specified in one or more `hreflang` links. In descending order of popularity on mobile, an `en` hreflang is on 8.07% of ecommerce sites, `de` on 3.28%, `fr` on 2.82%, `es` on 2.66%, `it` on 1.72%, `nl` on 1.21%, `ru` on 0.81%, `pl` and `pt` on 0.81%, and `be` on 0.67%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT70VMNXb1X6Mnh69JGhQILb5ImqBkg6MtMpPiZnrNfYXQ7nngGWHO_kj87tAG5FkIyOvpNNYJmkLVY/pubchart?oid=532818660&format=interactive", sheets_gid="682046615", diff --git a/src/content/en/2021/http.md b/src/content/en/2021/http.md index 5c612a8f003..d4408950120 100644 --- a/src/content/en/2021/http.md +++ b/src/content/en/2021/http.md @@ -36,7 +36,7 @@ These data points provide a snapshot for 2021 on the HTTP usage across the web a It's been six years since the <a hreflang="en" href="https://www.ietf.org/">Internet Engineering Task Force (IETF)</a> introduced us to <a hreflang="en" href="https://datatracker.ietf.org/doc/html/rfc7540">HTTP/2</a>, and it's worth understanding how we got to HTTP/2 in the first place. Thirty years ago (in 1991) we were first introduced to HTTP 0.9. HTTP has come a long way since 0.9, which was limited in capabilities. 0.9 was used for one-line protocol transfers, which only supported the GET method, and had no support for headers nor status codes. Responses were only provided in hypertext. Five years later, this was enhanced with HTTP/1.0. The 1.0 version contains most of the protocol we know now, including response headers, status codes, and the `GET`, `HEAD` and `POST` methods. -A problem not addressed in 1.0 was that the connection was terminated immediately after the response was received. This meant each request was required to open a new connection, perform TCP handshakes, and close the connection after the data was received. This major inefficiency saw HTTP/1.1 introduced only a year later in 1997, which allowed for persistent connections to be made, which can be reused once opened. This version served its purpose for 18 years, without any changes introduced until 2015. During this time Google experimented with <a hreflang="en" href="https://en.wikipedia.org/wiki/SPDY">SPDY</a>—a complete reimagining of how HTTP messages were sent. This was eventually formalized into HTTP/2. +A problem not addressed in 1.0 was that the connection was terminated immediately after the response was received. This meant each request was required to open a new connection, perform TCP handshakes, and close the connection after the data was received. This major inefficiency saw HTTP/1.1 introduced only a year later in 1997, which allowed for persistent connections to be made, which can be reused once opened. This version served its purpose for 18 years, without any changes introduced until 2015. During this time Google experimented with [SPDY](https://wikipedia.org/wiki/SPDY)—a complete reimagining of how HTTP messages were sent. This was eventually formalized into HTTP/2. HTTP/2 aimed to address many of the problems web developers were facing when trying to achieve increased performance. Complicated processes such as domain sharding, asset spriting, and concatenating files were necessary to work around inefficiencies in HTTP/1.1. By introducing resource multiplexing, prioritization, and header compression, HTTP/2 was designed to provide network optimization at the protocol level. As well as addressing the known performance problems, HTTP/2 introduced new potential performance optimizations with features such as _HTTP/2 push_, where the server could preemptively send content to the client before the client would be aware of the asset. @@ -184,7 +184,7 @@ One of main benefits of HTTP/2 is that it is binary instead of a text-based prot By chunking messages into frames, and interleaving those frames on the wire, a single TCP connection can be used to send and receive multiple messages in one connection. This helps eliminate the need for domain hacks and other HTTP/1.1 performance workarounds. -However, this completely new way of sending HTTP traffic means that HTTP/2 is not compatible with previous versions, and so clients and servers must each know they are talking HTTP/2. HTTPS has been adopted as the de facto standard in HTTP/2. While HTTP/2 can be implemented without HTTPS, all major browser vendors ensure HTTP/2 is used over HTTPS. HTTP/2 also uses <a hreflang="en" href="https://en.wikipedia.org/wiki/Application-Layer_Protocol_Negotiation">ALPN</a>, which allows for faster-encrypted connections as the protocol can be determined during the initial connection. +However, this completely new way of sending HTTP traffic means that HTTP/2 is not compatible with previous versions, and so clients and servers must each know they are talking HTTP/2. HTTPS has been adopted as the de facto standard in HTTP/2. While HTTP/2 can be implemented without HTTPS, all major browser vendors ensure HTTP/2 is used over HTTPS. HTTP/2 also uses [ALPN](https://wikipedia.org/wiki/Application-Layer_Protocol_Negotiation), which allows for faster-encrypted connections as the protocol can be determined during the initial connection. ### Switching between protocols @@ -490,7 +490,7 @@ While many of the upsides of HTTP/3 have been discussed, there are also some con In some cases, developers and site owners may argue that the incremental gains from HTTP/3 may not be worth major upgrades to their web servers. Particularly when HTTP/3 hasn't solved all the problems identified in HTTP/2, such as prioritization or effective use of server push. As such, adoption may be driven at the CDN level, and not within web applications. This may particularly be the case if some servers may not support HTTP/3 or be blocked by lack of OpenSSL support. -As discussed throughout this chapter, QUIC relies on the UDP protocol. With the introduction of HTTP/3, UDP traffic is due to increase across the web. However, currently UDP is often used as an attack vector, such as those in a <a hreflang="en" href="https://blog.cloudflare.com/reflections-on-reflections/">reflection attack</a>. QUIC does have some <a hreflang="en" href="https://datatracker.ietf.org/doc/html/draft-ietf-quic-transport-27#section-8.1">protection mechanisms</a> in place, but this may mean changes to the way UDP is treated across the web, and the amount of UDP traffic allowed on some networks and firewalls. In the same instance, there may be adoption pushback in cases where TCP headers and the unencrypted parts of the packet are used by firewalls and other <a hreflang="en" href="https://en.wikipedia.org/wiki/Middlebox">middleboxes</a> across the web. As QUIC encrypts more parts of the packet, there is less visibility for inspection on the packet, and may limit how these middleboxes operate, including the ability to do additional security checks. +As discussed throughout this chapter, QUIC relies on the UDP protocol. With the introduction of HTTP/3, UDP traffic is due to increase across the web. However, currently UDP is often used as an attack vector, such as those in a <a hreflang="en" href="https://blog.cloudflare.com/reflections-on-reflections/">reflection attack</a>. QUIC does have some <a hreflang="en" href="https://datatracker.ietf.org/doc/html/draft-ietf-quic-transport-27#section-8.1">protection mechanisms</a> in place, but this may mean changes to the way UDP is treated across the web, and the amount of UDP traffic allowed on some networks and firewalls. In the same instance, there may be adoption pushback in cases where TCP headers and the unencrypted parts of the packet are used by firewalls and other [middleboxes](https://wikipedia.org/wiki/Middlebox) across the web. As QUIC encrypts more parts of the packet, there is less visibility for inspection on the packet, and may limit how these middleboxes operate, including the ability to do additional security checks. There are also concerns that QUIC may be a performance problem on the server side. This is because of higher CPU requirements needed when dealing with UDP. Some estimates suggest twice as much CPU is needed when compared with HTTP/2. This said, there are a number of attempts to optimize <a hreflang="en" href="https://conferences.sigcomm.org/sigcomm/2020/files/slides/epiq/0%20QUIC%20and%20HTTP_3%20CPU%20Performance.pdf">QUIC CPU performance</a> ongoing. diff --git a/src/content/en/2021/media.md b/src/content/en/2021/media.md index bc49e5d548d..4cd0ece67ca 100644 --- a/src/content/en/2021/media.md +++ b/src/content/en/2021/media.md @@ -29,7 +29,7 @@ Images are ubiquitous on the web. Almost every page contains image content. {{ figure_markup( content="95.9%", - caption="Percentage of pages that contained at least one contentful `<img>`", + caption="Percentage of pages that contained at least one contentful `<img>`.", classes="big-number", sheets_gid="1756671383", sql_file="at_least_one_img.sql" @@ -40,7 +40,7 @@ And effectively all pages serve up some sort of imagery (even if it's just a bac {{ figure_markup( content="99.9%", - caption="Percentage of pages that generated at least one request for an image resource", + caption="Percentage of pages that generated at least one request for an image resource.", classes="big-number", sheets_gid="1062090109", sql_file="at_least_one_image_request.sql" @@ -65,7 +65,7 @@ In any case, by quantity, images continue to make up an awful lot of the stuff o {{ figure_markup( content="70.6%", - caption="Mobile pages whose LCP element has an image. On the desktop it's 79.4%!", + caption="Mobile pages whose LCP element has an image. On the desktop it's 79.4%!.", classes="big-number", sheets_gid="https://docs.google.com/spreadsheets/d/13xhPx6o2Nowz_3b3_5ojiF_mY3Lhs25auBKM6eqGZmo/#gid=1423728540", sql_file="../performance/lcp_element_data.sql" @@ -305,7 +305,7 @@ GIFs, weighing in at 7.4 bits per pixel, come off terribly here, and make no mis Things get really interesting when we look at two next-gen formats: WebP and AVIF. Both weigh in almost 40% lighter than JPEG, at 1.3-1.5 bits per pixel. In formal studies using <a hreflang="en" href="https://kornel.ski/en/faircomparison">matched qualities</a>, WebP outperforms JPEG by <a hreflang="en" href="https://developers.google.com/speed/webp/docs/webp_study">between 25-34%</a>, so its real-world performance seems surprisingly *good*. On the other hand, AVIF's creators have published data suggesting that it is capable of <a hreflang="en" href="https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4">outperforming modern JPEG encoders JPEG by 50%+, in the lab</a>. So, while AVIF's performance here is good, I expected it to be better. I can think of a few possible explanations for these discrepancies between lab data and real-world performance. -First: tooling. JPEG encoders vary incredibly widely, ranging from hardware encoders in cameras which don't spend much effort compressing images well, to ancient copies of <a hreflang="en" href="https://en.wikipedia.org/wiki/Libjpeg">`libjpeg`</a> installed decades ago, to bleeding-edge, best-practice-by-default encoders like MozJPEG. In short, there are a lot of old, badly compressed JPEGs out there, but every WebP and AVIF has been compressed with modern tooling. +First: tooling. JPEG encoders vary incredibly widely, ranging from hardware encoders in cameras which don't spend much effort compressing images well, to ancient copies of [`libjpeg`](https://wikipedia.org/wiki/Libjpeg) installed decades ago, to bleeding-edge, best-practice-by-default encoders like MozJPEG. In short, there are a lot of old, badly compressed JPEGs out there, but every WebP and AVIF has been compressed with modern tooling. Also, anecdotally, the reference WebP encoder (<a hreflang="en" href="https://developers.google.com/speed/webp/download">`cwebp`</a>) is relatively aggressive about quality/compression, and returns lower-quality, more-compressed results by default than most common JPEG tooling. diff --git a/src/content/en/2021/mobile-web.md b/src/content/en/2021/mobile-web.md index 19224cae91c..de80f019e62 100644 --- a/src/content/en/2021/mobile-web.md +++ b/src/content/en/2021/mobile-web.md @@ -119,7 +119,7 @@ Fortunately, there are a few other sources. <a href="./contributors#paulcalvano" ) }} -Weekend days show a greater proportion of mobile traffic, climbing somewhere around 10% from around 55 - 56% to 65 - 67%. Globally, not every country has Monday to Friday work weeks - Sunday to Thursday is also <a hreflang="en" href="https://en.wikipedia.org/wiki/Workweek_and_weekend">another common pattern</a>, something that can be seen with a slight ramp up on Fridays, leading to a bigger jump in mobile usage on Saturdays and Sundays. +Weekend days show a greater proportion of mobile traffic, climbing somewhere around 10% from around 55 - 56% to 65 - 67%. Globally, not every country has Monday to Friday work weeks - Sunday to Thursday is also [another common pattern](https://wikipedia.org/wiki/Workweek_and_weekend), something that can be seen with a slight ramp up on Fridays, leading to a bigger jump in mobile usage on Saturdays and Sundays. ##### Not all times are equal @@ -830,7 +830,7 @@ Too often an approach to responsive web design is to supply an image whose nativ #### Appropriately sized images {{ figure_markup( - caption="Percent of mobile page loads that had appropriately sized images", + caption="Percent of mobile page loads that had appropriately sized images.", content="56.6%", classes="big-number", sheets_gid="1754517886", diff --git a/src/content/en/2021/performance.md b/src/content/en/2021/performance.md index 16d4e854778..38282acf4e6 100644 --- a/src/content/en/2021/performance.md +++ b/src/content/en/2021/performance.md @@ -59,7 +59,7 @@ This section focuses on websites that reached the "good" threshold on all three {{ figure_markup( image="performance-1-good-cwv-by-device.png", - caption="Good Core Web Vitals by Device from 2020 to 2021", + caption="Good Core Web Vitals by Device from 2020 to 2021.", description="Bar chart showing the percent of origins with good Core Web Vitals in 2020 and 2021. In 2020, 34% of desktop websites were good and 24% of mobile websites. In 2021, 41% of desktop websites were good, and 29% of mobile ones.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=116267418&format=interactive", sheets_gid="2140629699", @@ -79,7 +79,7 @@ The data by connection type in CrUX can be difficult to understand. It is not ba {{ figure_markup( image="performance-2-good-cwv-by-ect.png", - caption="Good CWV performance by effective connection type", + caption="Good CWV performance by effective connection type.", description="Bar chart showing the percent of origins in a connection type with good Core Web Vitals. The offline category had 44% of websites with good CWV, 0% for slow 2G and 2G, 5% for 3G, and 36% for 4G.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=150765595&format=interactive", sheets_gid="1361919728", @@ -93,7 +93,7 @@ The top takeaway is that 3G and lower speeds correlated with significant perform {{ figure_markup( image="performance-3-change-in-ect.png", - caption="Change in effective connection type 2020-2021 ", + caption="Change in effective connection type 2020-2021 .", description="Bar chart showing the percent of total origins within each connection type for 2020 and 2021. The offline category went from 0% to 0% of origins (2020 to 2021), 1% to 0% for slow 2G and 2G, 27% to 25% for 3G, and 72% to 75% for 4G.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=658987455&format=interactive", sheets_gid="1361919728", @@ -109,7 +109,7 @@ Performance by connection type would be easier to understand if we could start t {{ figure_markup( image="performance-4-top-cwv-country.png", - caption="Top 30 regions for good CWV performance", + caption="Top 30 regions for good CWV performance.", description="Bar chart showing the percent of origins within a country with good CWV. Korea, Republic of 56%, Japan 50%, Czechia 48%, Germany 47%, Netherlands 45%, Taiwan, Province of China 45%, Belgium 45%, Canada 43%, United Kingdom of Great Britain and Northern Ireland 42%, Poland 42%, United States of America 40%, Romania 38%, France 38%, Ukraine 37%, Russian Federation 35%, Turkey 34%, Spain 34%, Italy 33%, Australia 28%, Viet Nam 28%, Thailand 27%, Malaysia 27%, Indonesia 20%, Mexico 19%, Chile 19%, Brazil 17%, Philippines 17%, India 16%, Colombia 15%, Argentina 14%", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=162241310&format=interactive", width=645, @@ -129,7 +129,7 @@ This year for the first time, we have ranking data! ​​CrUX determines rankin {{ figure_markup( image="performance-7-cwv-by-rank.png", - caption="Good CWV performance by rank", + caption="Good CWV performance by rank.", description="Bar chart showing percent of websites in each ranking group with good CWV. 37% of the top 1,000 websites had good CWV, 31% of the top 10,000, 29% of the top 100,000, 30% of the top 1,000,000, and 32% of all origins in CrUX.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=444585880&format=interactive", sheets_gid="1988323604", @@ -151,7 +151,7 @@ In this section, we dive into each metric. For those who are less familiar, we'v {{ figure_markup( image="performance-TTFB-by-device.png", - caption="TTFB performance by device", + caption="TTFB performance by device.", description="Stacked bar chart showing TTFB performance for desktop and mobile devices. For desktop devices, 26% of websites had good (< 0.5s), 55% needs improvement, and 19% poor (>= 1.5s) TTFB performance. For mobile, 15% were good, 59% needs improvement, and 26% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=594735556&format=interactive", sheets_gid="2140629699", @@ -163,7 +163,7 @@ TTFB was faster on desktop than mobile, presumably because of faster network spe {{ figure_markup( image="performance-TTFB-by-ect.png", - caption="TTFB performance by connection type", + caption="TTFB performance by connection type.", description="Stacked bar chart showing TTFB performance for effective connection type. For offline websites, 43% had good, 39% needs improvement, and 18% poor performance. For slow 2G, 1% were good, 2% needs improvement, and 98% poor. For 2G, 0% were good, 2% needs improvement, and 97% poor. For 3G, 1% were good, 27% needs improvement, and 72% poor. For 4G, 19% were good, 58% needs improvement, and 23% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1059484029&format=interactive", sheets_gid="1361919728", @@ -177,7 +177,7 @@ You may be asking yourself how TTFB can even occur with offline connections. Pre {{ figure_markup( image="performance-TTFB-by-rank.png", - caption="TTFB performance by rank", + caption="TTFB performance by rank.", description="Stacked bar chart showing TTFB performance for each ranking group. For the top 1,000 websites, 32% had good, 63% needs improvement, and 5% poor performance. For the top 10,000, 27% were good, 66% needs improvement, and 7% poor. For the top 100,000, 22% were good, 65% needs improvement, and 13% poor. For the top 1,000,000, 18% were good, 62% needs improvement, and 20% poor. For all, 18% were good, 58% needs improvement, and 24% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=829561432&format=interactive", sheets_gid="1988323604", @@ -191,7 +191,7 @@ One more possibility has to do with CMS adoption. The [CMS Chapter](./cms) shows {{ figure_markup( image="cms-adoption-by-rank.png", - caption="CMS adoption by rank", + caption="CMS adoption by rank.", description="Bar chart showing percent of websites using a CMS for each ranking category. On mobile, the numbers are 7% of websites in the top 1,000, 15% in the top 10,000, 20% in the top 100,000, 29% in the top 1,000,000, and 42% for all sites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRzYkQYaBTpD5FKloDXsdb32Y2pjdxFZq_LoekECgTy53F-dRATm9wFFJ3dDVDS8_cGn0h2mKDBjgdM/pubchart?oid=409766380&format=interactive", sheets_gid="https://docs.google.com/spreadsheets/d/1gAJh4VcSEU6-6aQxBiTFl-7cbyHukfdhg-Iaq9y5pnc/#gid=158167539", @@ -205,7 +205,7 @@ Then, if we look at the top 5 CMSs by rank, we see that WordPress has the highes {{ figure_markup( image="top-cmss-by-rank.png", - caption="Top 5 CMSs by rank", + caption="Top 5 CMSs by rank.", description="Bar chart showing the top CMSs percent of share of each ranking category. WordPress had 3.1% of the top 1,000, 8.6% of the top 10,000, 13.2% of the top 100,000, 21.1% of the top 1,000,000, and 33.6% of all sites. The remaining CMSs had less than 3% share of all rankings.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRzYkQYaBTpD5FKloDXsdb32Y2pjdxFZq_LoekECgTy53F-dRATm9wFFJ3dDVDS8_cGn0h2mKDBjgdM/pubchart?oid=1745757207&format=interactive", sheets_gid="https://docs.google.com/spreadsheets/d/1gAJh4VcSEU6-6aQxBiTFl-7cbyHukfdhg-Iaq9y5pnc/#gid=670045665", @@ -231,7 +231,7 @@ Only 5% of origins on WordPress experienced good TTFB in July 2021. Considering {{ figure_markup( image="performance-FCP-by-device.png", - caption="FCP performance by device", + caption="FCP performance by device.", description="Stacked bar chart showing FCP performance for desktop and mobile devices. For desktop devices, 60% of websites had good (< 1.8s), 27% needs improvement, and 13% poor (>= 3.0s) FCP performance. For mobile, 38% were good, 38% needs improvement, and 24% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1509111466&format=interactive", sheets_gid="2140629699", @@ -245,7 +245,7 @@ FCP was faster on desktop than mobile, likely due to both faster average network {{ figure_markup( image="performance-FCP-by-ect.png", - caption="FCP performance by connection type", + caption="FCP performance by connection type.", description="Stacked bar chart showing FCP performance for effective connection type. For offline websites, 38% had good, 26% needs improvement, and 36% poor performance. For slow 2G, 100% were poor. For 2G, 1% were needs improvement, and 99% poor. For 3G, 4% were good, 21% needs improvement, and 75% poor. For 4G, 46% were good, 35% needs improvement, and 19% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=679577784&format=interactive", sheets_gid="1361919728", @@ -259,7 +259,7 @@ Offline connections were closer in performance to 4G though not quite as good. S {{ figure_markup( image="performance-FCP-by-rank.png", - caption="FCP performance by rank", + caption="FCP performance by rank.", description="Stacked bar chart showing FCP performance for each ranking group. For the top 1,000 websites, 67% had good, 28% needs improvement. For the top 10,000, 62% were good, 31% needs improvement, and 7% poor. For the top 100,000, 54% were good, 35% needs improvement, and 12% poor. For the top 1,000,000, 49% were good, 35% needs improvement, and 16% poor. For all, 45% were good, 35% needs improvement, and 20% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=965739974&format=interactive", sheets_gid="1988323604", @@ -277,7 +277,7 @@ Common culprits for poor FCP are render-blocking resources, server response time {{ figure_markup( image="performance-LCP-by-device.png", - caption="LCP performance by device", + caption="LCP performance by device.", description="Stacked bar chart showing LCP performance for desktop and mobile devices. For desktop devices, 60% of websites had good (< 2.5s), 27% needs improvement, and 12% poor (>= 4s) LCP performance. For mobile, 45% were good, 35% needs improvement, and 19% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=556816803&format=interactive", sheets_gid="2140629699", @@ -289,7 +289,7 @@ LCP was faster on desktop than mobile. TTFB affects LCP like FCP. Comparisons b {{ figure_markup( image="performance-LCP-by-ect.png", - caption="LCP performance by connection type", + caption="LCP performance by connection type.", description="Stacked bar chart showing LCP performance for effective connection type. For offline websites, 49% had good, 17% needs improvement, and 34% poor performance. For slow 2G, 1% were needs improvement and 99% poor. For 2G, 4% were needs improvement and 96% poor. For 3G, 8% were good, 28% needs improvement, and 65% poor. For 4G, 51% were good, 33% needs improvement, and 16% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=583947675&format=interactive", sheets_gid="1361919728", @@ -301,7 +301,7 @@ Offline origins with good LCP more closely matched 4G experiences, though poor L {{ figure_markup( image="performance-LCP-by-rank.png", - caption="LCP performance by rank", + caption="LCP performance by rank.", description="Stacked bar chart showing LCP performance for each ranking group. For the top 1,000 websites, 64% had good, 25% needs improvement, and 11% poor performance. For the top 10,000, 59% were good, 30% needs improvement, and 11% poor. For the top 100,000, 55% were good, 32% needs improvement, and 13% poor. For the top 1,000,000, 53% were good, 33% needs improvement, and 14% poor. For all, 50% were good, 33% needs improvement, and 17% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1080361066&format=interactive", sheets_gid="1988323604", @@ -317,7 +317,7 @@ Let's take a deeper dive into the LCP element. {{ figure_markup( image="performance-top-15-lcp-nodes.png", - caption="Top 15 LCP HTML element nodes", + caption="Top 15 LCP HTML element nodes.", description="Bar chart showing the percent share of pages for each node type for the LCP element- data listed by desktop then mobile: `IMG` 47% and 42%, `DIV` 28% and 27%, `P` 6% and 10%, `H1` 3% and 5%, `SECTION` 3% and 2%, undetected 2% and 2%, `H2` 2% and 2%, `A` 1% and 2%, `SPAN` 1% and 1%, `HEADER` 1% and 1%, `LI` 1% and 1%, `RS-SBG` 1% and 1%, `H3` 0% and 1%, `TD` 1% and 1%, `VIDEO` 0% and 0%", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1549429021&format=interactive", width=600, @@ -331,7 +331,7 @@ IMG, DIV, P, and H1 made up 83% of all LCP nodes (on mobile). This doesn't tell {{ figure_markup( image="performance-lcp-with-image.png", - caption="LCP elements with images, by device", + caption="LCP elements with images, by device.", description="Bar chart showing 79% of desktop pages have an LCP element with an image and 71% of mobile pages", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=992354142&format=interactive", sheets_gid="1423728540", @@ -345,7 +345,7 @@ In both cases, images comprised the majority of LCP elements. This warrants a de {{ figure_markup( image="performance-lcp-antipatterns.png", - caption="LCP elements with potential performance anti-patterns", + caption="LCP elements with potential performance anti-patterns.", description="Bar chart showing 9.3% of pages on mobile use native lazy load on the LCP element, 16.5% probably lazy load, and 0.4% use async decode.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=130632749&format=interactive", sheets_gid="1423728540", @@ -359,11 +359,11 @@ Not all browsers support native lazy loading. Popular lazy loading polyfills det Lazy loading your LCP element will result in worse performance. *Don't do it!* WordPress was an early adopter of native lazy loading. The early method was a naive solution applying lazy loading to all images, and the results showed a <a hreflang="en" href="https://web.dev/articles/lcp-lazy-loading">negative performance correlation</a>. They were able to use this data to implement a more nuanced approach for better performance. -The <a hreflang="en" href="https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-decoding">`decode` attribute</a> for images is relatively new. Setting it to `async` can improve load and scroll performance. Currently, 0.4% of sites used the async decode directive for their LCP image. The negative impact of asynchronous decode on an LCP image is currently unclear. Thus, test your site before and after if you choose to set an LCP image to `decode="async"`. +The [`decode` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#attr-decoding) for images is relatively new. Setting it to `async` can improve load and scroll performance. Currently, 0.4% of sites used the async decode directive for their LCP image. The negative impact of asynchronous decode on an LCP image is currently unclear. Thus, test your site before and after if you choose to set an LCP image to `decode="async"`. {{ figure_markup( content="354", - caption="Websites attempted to use native lazy-loading on LCP elements that are not images or iframes", + caption="Websites attempted to use native lazy-loading on LCP elements that are not images or iframes.", classes="big-number", sheets_gid="1423728540", sql_file="lcp_element_data.sql" @@ -376,7 +376,7 @@ Interestingly, 354 origins on desktop attempted to use native lazy-loading on HT {{ figure_markup( image="performance-CLS-by-device.png", - caption="CLS performance by device", + caption="CLS performance by device.", description="Stacked bar chart showing CLS performance for desktop and mobile devices. For desktop devices, 62% of websites had good (< 0.1), 23% needs improvement, and 15% poor (>= 0.25) CLS performance. For mobile, 62% were good, 21% needs improvement, and 17% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=160840238&format=interactive", sheets_gid="2140629699", @@ -388,7 +388,7 @@ Interestingly, 354 origins on desktop attempted to use native lazy-loading on HT {{ figure_markup( image="performance-CLS-by-ect.png", - caption="CLS performance by connection type", + caption="CLS performance by connection type.", description="Stacked bar chart showing CLS performance for effective connection type. For offline websites, 87% had good and 4% poor performance. For slow 2G and 2G, 53-52% were good, 15% needs improvement, and 32-33% poor. For 3G, 58% were good, 16% needs improvement, and 26% poor. For 4G, 69% were good, 13% needs improvement, and 18% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1650043738&format=interactive", sheets_gid="1361919728", @@ -402,7 +402,7 @@ Offline websites had the highest CLS performance of all connection types. For si {{ figure_markup( image="performance-CLS-by-rank.png", - caption="CLS performance by rank", + caption="CLS performance by rank.", description="Stacked bar chart showing CLS performance for each ranking group. For the top 1,000 websites, 53% had good, 25% needs improvement, and 21% poor performance. For the top 10,000, 46% were good, 27% needs improvement, and 27% poor. For the top 100,000, 48% were good, 26% needs improvement, and 26% poor. For the top 1,000,000, 54% were good, 25% needs improvement, and 21% poor. For all, 61% were good, 23% needs improvement, and 16% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1468770181&format=interactive", sheets_gid="1988323604", @@ -420,7 +420,7 @@ Common culprits for poor CLS include not reserving space for images, text shifts {{ figure_markup( image="performance-FID-by-device.png", - caption="FID performance by device", + caption="FID performance by device.", description="Stacked bar chart showing FID performance for desktop and mobile devices. For desktop devices, 100% of websites had good (< 100ms). For mobile, 90% were good, 10% needs improvement, and 0% poor (>= 300ms).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=230841623&format=interactive", sheets_gid="2140629699", @@ -432,7 +432,7 @@ FID performance was better on desktop than on mobile devices likely due to devic {{ figure_markup( image="performance-FID-by-ect.png", - caption="FID performance by connection type", + caption="FID performance by connection type.", description="Stacked bar chart showing FID performance for effective connection type. For offline websites, 78% had good, 17% needs improvement, and 5% poor performance. For slow 2G and 2G, 81-82% were good, 18% needs improvement, and 0-1% poor. For 3G, 90% were good and 10% needs improvement. For 4G, 93% were good, 7% needs improvement, and 0% poor.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1135701788&format=interactive", sheets_gid="1361919728", @@ -446,7 +446,7 @@ Unlike the other metrics, FID was worse for offline websites than any other conn {{ figure_markup( image="performance-FID-by-rank.png", - caption="FID performance by rank", + caption="FID performance by rank.", description="Stacked bar chart showing FID performance for each ranking group. For all categories, 93-94% had good, 5-7% needs improvement, and 0% poor performance.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=1539782601&format=interactive", sheets_gid="1988323604", @@ -473,7 +473,7 @@ Unfortunately, TBT is not measured in the Chrome User Experience Report. But, we {{ figure_markup( image="performance-tbt.png", - caption="Lighthouse TBT scores", + caption="Lighthouse TBT scores.", description="Bar chart showing 31% of mobile pages with good TBT (<= 200ms), 11% with needs improvement, and 58% with poor (> 600ms) TBT.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQj6-t49BNV_5W-w83AABkUoo6klfyUyIz13yKShLAzK8qGs5lJ9TKcggIEp6JgxikVF-UJBAHpsrNl/pubchart?oid=2135422883&format=interactive", sheets_gid="46896816", @@ -487,7 +487,7 @@ Remember that the data is a single, throttled-CPU Lighthouse run through WebPage {{ figure_markup( content="67 seconds", - caption="Longest TBT", + caption="Longest TBT.", classes="medium-number", sheets_gid="1423728540", sql_file="lcp_element_data.sql" diff --git a/src/content/en/2021/privacy.md b/src/content/en/2021/privacy.md index 871ba7fc91b..3a481e8c408 100644 --- a/src/content/en/2021/privacy.md +++ b/src/content/en/2021/privacy.md @@ -25,7 +25,7 @@ featured_stat_label_3: Popular sites opting out of FLoC cohorts A [whole industry](https://crackedlabs.org/en/corporate-surveillance/) is dedicated to tracking users online, to build detailed user profiles for purposes such as targeted advertising, fraud detection, price differentiation, or even credit scoring. Sharing geolocation data with websites can prove very useful in day-to-day life, but may also allow companies to <a hreflang="en" href="https://www.nytimes.com/interactive/2019/12/19/opinion/location-tracking-cell-phone.html">see your every movement</a>. Even if a service treats a user's private information diligently, the mere act of storing personal data provides hackers with an opportunity to <a hreflang="en" href="https://haveibeenpwned.com/">breach services and leak millions of personal records online</a>. -Recent legislative efforts such as the <a hreflang="en" href="https://ec.europa.eu/info/law/law-topic/data-protection/data-protection-eu">GDPR</a> in Europe, <a hreflang="en" href="https://www.oag.ca.gov/privacy/ccpa">CCPA</a> in California, <a hreflang="pt-br" href="https://www.gov.br/cidadania/pt-br/acesso-a-informacao/lgpd">LGPD</a> in Brazil, or the <a hreflang="en" href="https://www.meity.gov.in/data-protection-framework">PDP Bill</a> in India all strive to require companies to protect personal data and implement privacy by default, including online. Major technology companies such as Google, Facebook and Amazon have already received <a hreflang="en" href="https://en.wikipedia.org/wiki/GDPR_fines_and_notices">massive fines</a> for alleged violations of user privacy. +Recent legislative efforts such as the <a hreflang="en" href="https://ec.europa.eu/info/law/law-topic/data-protection/data-protection-eu">GDPR</a> in Europe, <a hreflang="en" href="https://www.oag.ca.gov/privacy/ccpa">CCPA</a> in California, <a hreflang="pt-br" href="https://www.gov.br/cidadania/pt-br/acesso-a-informacao/lgpd">LGPD</a> in Brazil, or the <a hreflang="en" href="https://www.meity.gov.in/data-protection-framework">PDP Bill</a> in India all strive to require companies to protect personal data and implement privacy by default, including online. Major technology companies such as Google, Facebook and Amazon have already received [massive fines](https://wikipedia.org/wiki/GDPR_fines_and_notices) for alleged violations of user privacy. These new laws have given users a much larger say in how comfortable they are with sharing personal data. You probably already have clicked through quite a few cookie consent banners that enable this choice. Furthermore, web browsers are implementing <a hreflang="en" href="https://privacysandbox.com/">technological solutions</a> to improve user privacy, from blocking third-party cookies over hiding sensitive data to innovative ways to balance legitimate use cases on personal attributes with individual user privacy. diff --git a/src/content/en/2021/pwa.md b/src/content/en/2021/pwa.md index 14f2c9d1c6e..2dc0acf7c74 100644 --- a/src/content/en/2021/pwa.md +++ b/src/content/en/2021/pwa.md @@ -166,7 +166,7 @@ The following two events are quite popular and frequently used in tandem: [`ServiceWorkerGlobalScope.skipWaiting()`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) is usually called at the beginning of the `install` event and allows a newly installed service worker to immediately move to the `active` state, even if there's another active service worker. Our analysis showed that it is used in 60.47% of desktop and 59.60% of mobile PWAs. {{ figure_markup( - caption="Percent of mobile sites with service workers that call `skipWaiting()`", + caption="Percent of mobile sites with service workers that call `skipWaiting()`.", content="59.60%", classes="big-number", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHHnqNdpRUjoeTfsN9_irK57PvZn_Q2X842RLl-RL4ibWmZFvO-S1x35PjVE3-xUlHFS_Zurd22rOq/pubchart?oid=2101442063&format=interactive", @@ -178,7 +178,7 @@ The following two events are quite popular and frequently used in tandem: [`Clients.claim()`](https://developer.mozilla.org/docs/Web/API/Clients/claim) is frequently used in combination with `skipWaiting()`, and it allows active service workers to "claim control" of all the clients under its scope. Appears in 48.98% of desktop pages and 47.14% of mobile. {{ figure_markup( - caption="Percent of mobile sites with service workers that call `clients.claim()`", + caption="Percent of mobile sites with service workers that call `clients.claim()`.", content="47.14%", classes="big-number", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHHnqNdpRUjoeTfsN9_irK57PvZn_Q2X842RLl-RL4ibWmZFvO-S1x35PjVE3-xUlHFS_Zurd22rOq/pubchart?oid=2101442063&format=interactive", @@ -194,7 +194,7 @@ Another interesting aspect to analyze are caching operations, which are frequent The [`ServiceWorkerGlobalScope.caches`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/caches) property returns the [CacheStorage object](https://developer.mozilla.org/docs/Web/API/CacheStorage) associated with a service worker allowing access to the different [caches](https://developer.mozilla.org/docs/Web/API/Cache). We've found that it is used in 57.41% desktop and in 57.88% mobile sites that use service workers. {{ figure_markup( - caption="Percent of mobile sites with service workers that use the service worker cache", + caption="Percent of mobile sites with service workers that use the service worker cache.", content="57.88%", classes="big-number", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHHnqNdpRUjoeTfsN9_irK57PvZn_Q2X842RLl-RL4ibWmZFvO-S1x35PjVE3-xUlHFS_Zurd22rOq/pubchart?oid=107056879&format=interactive", @@ -208,7 +208,7 @@ Its high usage is not unexpected as caching allows for reliable and performant w Finally, it's worth taking a look at <a hreflang="en" href="https://developers.google.com/web/updates/2017/02/navigation-preload">Navigation Preloads</a>, which allows you to make the requests in parallel with the service worker boot-up time to avoid delaying the requests in those situations. The [`NavigationPreloadManager`](https://developer.mozilla.org/docs/Web/API/NavigationPreloadManager) interface provides a set of methods to implement this technique, and according to our analysis, it is currently used in 11.02% of desktop and 9.78% of mobile sites that use service workers. {{ figure_markup( - caption="Percent of mobile sites with use navigation preloads", + caption="Percent of mobile sites with use navigation preloads.", content="9.78%", classes="big-number", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHHnqNdpRUjoeTfsN9_irK57PvZn_Q2X842RLl-RL4ibWmZFvO-S1x35PjVE3-xUlHFS_Zurd22rOq/pubchart?oid=1163792530&format=interactive", @@ -485,7 +485,7 @@ Here are some usage stats for some most popular notification-related APIs: Pages subscribe to notifications via the [`PushManager`](https://developer.mozilla.org/docs/Web/API/PushManager) interface of the [Push API](https://developer.mozilla.org/docs/Web/API/Push_API), which is accessed via the `pushManager` property of the [`ServiceWorkerRegistration`](https://developer.mozilla.org/docs/Web/API/ServiceWorkerRegistration) interface. It's used by 44.14% of desktop and 45.09% of mobile PWAs. {{ figure_markup( - caption="Percent of mobile sites with service workers that used some method of the `pushManager` property", + caption="Percent of mobile sites with service workers that used some method of the `pushManager` property.", content="45.09%", classes="big-number", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTHHnqNdpRUjoeTfsN9_irK57PvZn_Q2X842RLl-RL4ibWmZFvO-S1x35PjVE3-xUlHFS_Zurd22rOq/pubchart?oid=1163792530&format=interactive", diff --git a/src/content/en/2021/resource-hints.md b/src/content/en/2021/resource-hints.md index 3c0b05cc251..ec3f4a4631e 100644 --- a/src/content/en/2021/resource-hints.md +++ b/src/content/en/2021/resource-hints.md @@ -269,7 +269,7 @@ With that being said, and the expectation that more websites will adopt `preload ### The `as` attribute -The `as` attribute should be specified when using `rel="preload"` (or `rel="prefetch"`) to specify the type of resource being downloaded. Applying the correct `as` attribute allows the browser to prioritize the resource more accurately. For example, `preload as="script"` will get a low or medium priority, while `preload as="style"` would be assigned an internal request priority of _Highest_. The `as` attribute is required for caching the resource for future requests and applying the correct <a hreflang="en" href="https://developer.mozilla.org/docs/Web/HTTP/CSP">Content Security Policy</a>. +The `as` attribute should be specified when using `rel="preload"` (or `rel="prefetch"`) to specify the type of resource being downloaded. Applying the correct `as` attribute allows the browser to prioritize the resource more accurately. For example, `preload as="script"` will get a low or medium priority, while `preload as="style"` would be assigned an internal request priority of _Highest_. The `as` attribute is required for caching the resource for future requests and applying the correct [Content Security Policy](https://developer.mozilla.org/docs/Web/HTTP/CSP). {{ figure_markup( image="preload-as-attribute-values.png", @@ -338,7 +338,7 @@ The `crossorigin` attribute is used to indicate whether [Cross-Origin Resource S #### `anonymous` -The default value when no value is specified is `anonymous` and this value will set the credentials flag to <a hreflang="en" href="https://developer.mozilla.org/docs/Web/Security/Same-origin_policy">`same-origin`</a>. It is required when downloading resources protected by CORS. It is also a <a hreflang="en" href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">requirement</a> when downloading font files—even if they are on the same origin! If you omit the `crossorigin` attribute when the eventual request for the preloaded resource uses CORS, you will end up with a duplicate request since it won't match in the preload cache. +The default value when no value is specified is `anonymous` and this value will set the credentials flag to [`same-origin`](https://developer.mozilla.org/docs/Web/Security/Same-origin_policy). It is required when downloading resources protected by CORS. It is also a <a hreflang="en" href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">requirement</a> when downloading font files—even if they are on the same origin! If you omit the `crossorigin` attribute when the eventual request for the preloaded resource uses CORS, you will end up with a duplicate request since it won't match in the preload cache. #### `use-credentials` diff --git a/src/content/en/2021/structured-data.md b/src/content/en/2021/structured-data.md index f32f8b76f95..6d805c5629d 100644 --- a/src/content/en/2021/structured-data.md +++ b/src/content/en/2021/structured-data.md @@ -128,7 +128,7 @@ We can see that there's a broad range of different types of structured data acro {{ figure_markup( image="structured-data-usage-by-type.jpg", - caption="Structured data usage", + caption="Structured data usage.", description="Bar chart showing the popularity of different structured data types across the web. Of all mobile pages in our data: RDFa is on 60.61%, Open Graph tags are on 57.45%, Twitter tags are on 37.48%, Microdata is on 24.91%, Facebook tags are on 8.15%, Dublin Core tags are on 1.22%, Microformats are used on 0.68%, and microformats2 are used on 0.11%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=501587417&format=interactive", sheets_gid="1876349096", @@ -152,7 +152,7 @@ For example, a website owner might add a `rel="license"` attribute to a hyperlin {{ figure_markup( image="structured-data-rdfa-types.jpg", - caption="RDFa types", + caption="RDFa types.", description="Bar chart showing the usage of RDFa across the web. Of all mobile pages in our data: `foaf:image` is on 0.86%, `foaf:document` is on 0.36%, `sioc:item` is on 0.24%, `schema:webpage` is on 0.11%, `image` is on 0.9%, `listitem` is on 0.08%, `breadcrumblist` is on 0.07%, `og:website` is on 0.06%, `skos:concept` is on 0.04%, `webpage` is on 0.04%, `v:breadcrumb` is on 0.04%, `schema:article` is on 0.03%, `sioc:useraccount` is on 0.03%, and `person` is on 0.03%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1063480738&format=interactive", sheets_gid="379443022", @@ -197,7 +197,7 @@ Since 2008 it is managed by the Dublin Core Metadata Initiative (DCMI) and remai {{ figure_markup( image="structured-data-dublin-core.jpg", - caption="Dublin Core usage", + caption="Dublin Core usage.", description="Bar chart showing the usage of Dublin Core tags across the web. Of all mobile pages in our data: `dc.title` is on 0.70%, `dc.language` is on 0.49%, `dc.description` is on 0.44%, `dc.publisher` is on 0.22%, `dc.creator` is on 0.21%, `dc.subject` is on 0.20%, `dc.source` is on 0.19%, `dc.identifier` is on 0.17%, `dc.relation` is on 0.16%, `dcterms.title` is on 0.15%, `dc.type` is on 0.14%, `dcterms.rightsholder` is on 0.12%, and `dcterms.identifier` is on 0.11%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1985156978&format=interactive", sheets_gid="358057466", @@ -229,7 +229,7 @@ The Open Graph protocol has since been broadly adopted by many platforms and ser {{ figure_markup( image="structured-data-open-graph.jpg", - caption="Open Graph usage", + caption="Open Graph usage.", description="Bar chart showing the usage of Open Graph tags across the web. Of all mobile pages in our data: `og:title` is on 54.87%, `og:url` is on 52.03%, `og:type` is on 48.18%, `og:description` is on 48.55%, `og:site_name` is on 43.37%, `og:image` is on 36.98%, `og:locale` is on 26.39%, `og:image:width` is on 12.95%, `og:image:height` is on 12.91%, `og:image:secure_url` is on 5.61%, `og:image:alt` is on 1.75%, `og:image:type` is on 1.61%, `og:updated_time` is on 1.54%, and `og:locale:alternate` is on 0.87%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=688746239&format=interactive", sheets_gid="1440633828", @@ -255,7 +255,7 @@ Though Twitter uses Open Graph tags as fallbacks and defaults, the platform supp {{ figure_markup( image="structured-data-twitter.jpg", - caption="Twitter meta tag usage", + caption="Twitter meta tag usage.", description="Bar chart showing the usage of Twitter meta tags across the web. Of all mobile pages in our data: `twitter:card` is on 35.42%, `twitter:title` is on 20.86%, `twitter:description` is on 18.68%, `twitter:site` is on 11.31%, `twitter:image` is on 11.41%, `twitter:label1` is on 6.85%, `twitter:data1` is on 6.85%, `twitter:creator` is on 3.58%, `twitter:url` is on 3.13%, `twitter:domain` is on 2.21%, `twitter:image:src` is on 0.58%, `twitter:text:title` is on 0.57%, `twitter:app:id:phone` is on 0.54%, and `twitter:app:url:iphone` is on 0.52%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=2059334677&format=interactive", sheets_gid="485696602", @@ -285,7 +285,7 @@ In addition to Open Graph tags, Facebook supports additional metadata (meta tags {{ figure_markup( image="structured-data-facebook.jpg", - caption="Facebook meta tag usage", + caption="Facebook meta tag usage.", description="Bar chart showing the usage of Facebook meta tags across the web. Of all mobile pages in our data: `fb:app_id` is on 6.06%, `fb:admins` is on 2.63%, `fb:pages` is on 0.86%, `fb:page_id` is on 0.13%, `fb:profile_id` is on 0.06%, `fb:use_automatic_ad_placement` is on 0.01%, and `fb:article_style` is on less than 0.01%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1536454005&format=interactive", sheets_gid="1437193020", @@ -313,7 +313,7 @@ Microformats are available in two versions: Microformats v1 and Microformats v2 {{ figure_markup( image="structured-data-microformats.jpg", - caption="Microformats usage", + caption="Microformats usage.", description="Bar chart showing the presence of Microformats markup across the web. Of all mobile pages in our data: `adr` is on 0.50%, `geo` is on 0.10% `hReview` is on 0.06% `hReview-aggregate` is on 0.05% `hProduct` is on 0.01% `hListing` is on 0.01%, and `hCard` 0.01%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1769132909&format=interactive", sheets_gid="1565986462", @@ -325,7 +325,7 @@ Historically and due to its nature (as an extension of HTML), Microformats have {{ figure_markup( image="structured-data-microformats2.jpg", - caption="microformats2 usage", + caption="microformats2 usage.", description="Bar chart showing the presence of microformats2 markup across the web. Of all mobile pages in our data: `h-entry` is on 0.08% `h-card` is on 0.04% `h-adr` is on 0.02% `h-feed` is on 0.01% `h-item` is on 0.01% `h-product` is on less than 0.01%, and `h-event` is on less than 0.01%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=216200284&format=interactive", sheets_gid="214118301", @@ -353,7 +353,7 @@ For example, it may be hard to describe the _opening hours_ of an _organization_ {{ figure_markup( image="structured-data-microdata.jpg", - caption="Microdata types", + caption="Microdata types.", description="Bar chart showing the usage of microdata across the web. Of all mobile pages in our data (normalized to remove the `schema.org/` prefix): `webpage` is on 7.44%, `sitenavigationelement` is on 5.62%, `wpheader` is on 4.87%, `wpfooter` is on 4.56%, `organization` is on 4.02%, `blog` is on 3.66%, `creativework` is on 2.14%, `imageobject` is on 1.83%, `blogposting` is on 1.34%, `person` is on 1.37%, `postaladdress` is on 1.34%, `website` is on 1.33%, `wpsidebar` is on 1.38%, `product` is on 1.22%, `imagegallery` is on 1.11%, `offer` is on 1.09%, `listitem` is on 0.96%, `breadcrumblist` is on 0.96%, and `article` is on 0.85%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1112123145&format=interactive", width=600, @@ -384,7 +384,7 @@ Because the implementation isn't tied directly to the HTML structure of the page {{ figure_markup( image="structured-data-json-ld.jpg", - caption="JSON-LD usage", + caption="JSON-LD usage.", description="Bar chart showing the usage of JSON-LD on pages across the web. Of all mobile in our data: `Website` is on 8.90%, `Organization` is on 6.00%, `LocalBusiness` is on 1.67%, `BreadcrumbList` is on 1.45%, `WebPage` is on 0.97%, `ItemList` is on 0.50%, `Product` is on 0.60%, `BlogPosting` is on 0.46%, `Person` is on 0.30%, `Article` is on 0.30%, `AutoDealer` is on 0.23%, `Corporation` is on 0.20%, `Event` is on 0.17%, `Store` is on 0.16%, `VideoObject` is on 0.15%, `FAQPage` is on 0.14%, `Restaurant` is on 0.18%, and `ApartmentComplex` is on 0.11%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=2104105656&format=interactive", sheets_gid="609208795", @@ -588,7 +588,7 @@ Because this is such a powerful tool, we've taken the time to explore some of th {{ figure_markup( image="structured-data-json-ld.jpg", - caption="SameAs usage", + caption="SameAs usage.", description="Bar chart showing the usage of `sameAs` declarations on pages across the web. Of all mobile in our data: `facebook.com` occurs on 4.26%, `instagram.com` occurs on 2.74%, `twitter.com` occurs on 2.46%, `youtube.com` occurs on 1.78%, `linkedin.com` occurs on 1.04%, `pinterest.com` occurs on 0.60%, `google.com` occurs on 0.51%, `yelp.com`, `wikidata.org` occurs on 0.12%, `wikipedia.org` occurs on 0.11%, `tumblr.com` occurs on 0.08%, `uptodown.io` occurs on 0.10%, `vk.com` occurs on 0.08%, `soundcloud.com` occurs on 0.04%, `vimeo.com` occurs on 0.03%, `pinterest.co.uk` occurs on 0.03%, `tripadvisor.com` occurs on 0.03%, `t.me` occurs on 0.03%, and `flickr.com` occurs on 0.02%. Desktop usage is similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT3kZ1Ys-9tId-WBa_8muMzrTAu1Ad5TXYgkopXMmBVc1xmd2N_4PZIpEZEOqRL7baymle0kHzaC6KY/pubchart?oid=1501633178&format=interactive", sheets_gid="685929099", diff --git a/src/content/en/2022/accessibility.md b/src/content/en/2022/accessibility.md index 48272c5cdc1..66edd6008e0 100644 --- a/src/content/en/2022/accessibility.md +++ b/src/content/en/2022/accessibility.md @@ -26,7 +26,7 @@ featured_stat_label_3: Sites using `:focus-visible`, compared to only 0.6% last When does a software feature cease being an "accessibility feature" and simply become a "feature" that we all use? Ask yourself that the next time you put your smartphone in silent/vibrate mode – especially if you're not a member of the Deaf/Hard of Hearing community. -Good accessibility benefits everyone, not just those with disabilities. This is one of the core principles of <a hreflang="en" href="https://en.wikipedia.org/wiki/Universal_design">Universal Design</a>. Tim Berners-Lee said, "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." After the COVID-19 pandemic started, more and more people have been reliant on the internet. Likewise, accessibility needs to improve as well, or we risk alienating a lot of people. +Good accessibility benefits everyone, not just those with disabilities. This is one of the core principles of [Universal Design](https://wikipedia.org/wiki/Universal_design). Tim Berners-Lee said, "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." After the COVID-19 pandemic started, more and more people have been reliant on the internet. Likewise, accessibility needs to improve as well, or we risk alienating a lot of people. The median overall site score for all Lighthouse Accessibility audit data rose from 80% in 2020 to 82% in 2021, then 83% in 2022. We hope that this increase represents a shift in the right direction. @@ -286,7 +286,7 @@ Skip links allow keyboard or switch control device users to skip through differe {{ figure_markup( content="21%", - caption="Mobile and desktop pages which likely have a skip link", + caption="Mobile and desktop pages which likely have a skip link.", classes="big-number", sheets_gid="1778743357", sql_file="skip_links.sql", @@ -436,7 +436,7 @@ Websites often want to verify that the visitor is a human and not a bot, which i {{ figure_markup( content="19%", - caption="Mobile sites using a CAPTCHA", + caption="Mobile sites using a CAPTCHA.", classes="big-number", sheets_gid="1615174635", sql_file="captcha_usage.sql", @@ -452,7 +452,7 @@ Accessibility considerations become very crucial when it comes to media consumpt {{ figure_markup( content="59%", - caption="Mobile pages passing the Lighthouse image-alt audit for images with alt text", + caption="Mobile pages passing the Lighthouse image-alt audit for images with alt text.", classes="big-number", sheets_gid="1270834582", sql_file="lighthouse_a11y_audits.sql", @@ -499,7 +499,7 @@ We found that 27% of alt text attributes in desktop and mobile websites were emp {{ figure_markup( content="0.06%", - caption="Desktop websites with an `<audio>` element have at least one accompanying `<track>` element", + caption="Desktop websites with an `<audio>` element have at least one accompanying `<track>` element.", classes="big-number", sheets_gid="201877037", sql_file="audio_track_usage.sql", @@ -509,7 +509,7 @@ We found that 27% of alt text attributes in desktop and mobile websites were emp {{ figure_markup( content="0.71%", - caption="Desktop `<video>` elements with an accompanying `<track>` element", + caption="Desktop `<video>` elements with an accompanying `<track>` element.", classes="big-number", sheets_gid="345150659", sql_file="video_track_usage.sql", @@ -555,7 +555,7 @@ We found that 33% (up from 29% in 2021, and 25% in 2020) of desktop and mobile s {{ figure_markup( content="21%", - caption="Desktop websites have at least one link with a `button` role", + caption="Desktop websites have at least one link with a `button` role.", classes="big-number", sheets_gid="751886683", sql_file="anchors_with_role_button.sql", @@ -569,7 +569,7 @@ When an element has `role="presentation"` declared on it, its semantics are stri {{ figure_markup( content="24%", - caption="Mobile websites have at least one element with `role=presentation`", + caption="Mobile websites have at least one element with `role=presentation`.", classes="big-number", sheets_gid="283521996", sql_file="common_aria_role.sql", @@ -579,7 +579,7 @@ Removing an element's semantics causes an element to lose its behavior. It becom {{ figure_markup( content="11%", - caption="Mobile websites have at least one element with `role=none`", + caption="Mobile websites have at least one element with `role=none`.", classes="big-number", sheets_gid="283521996", sql_file="common_aria_role.sql", @@ -631,7 +631,7 @@ Sometimes the visual interface can contain some redundant elements that are unhe {{ figure_markup( content="58%", - caption="Desktop websites having at least one instance of the `aria-hidden` attribute", + caption="Desktop websites having at least one instance of the `aria-hidden` attribute.", classes="big-number", sheets_gid="711360879", sql_file="common_element_attributes.sql", @@ -647,7 +647,7 @@ A common technique that developers employ to supply additional information for s {{ figure_markup( content="15%", - caption="Desktop websites with a `sr-only` or `visually-hidden` class", + caption="Desktop websites with a `sr-only` or `visually-hidden` class.", classes="big-number", sheets_gid="642136962", sql_file="sr_only_classes.sql", @@ -661,7 +661,7 @@ The presence of new or updated content in the DOM sometimes needs to be communic {{ figure_markup( content="23%", - caption="Desktop pages with live regions using `aria-live`", + caption="Desktop pages with live regions using `aria-live`.", classes="big-number", sheets_gid="711360879", sql_file="common_element_attributes.sql", @@ -714,7 +714,7 @@ ARIA live regions allow us to listen for changes in the DOM, such that the updat </table> <figcaption> {{ figure_link( - caption="Pages with live region ARIA roles, and their implicit `aria-live` value", + caption="Pages with live region ARIA roles, and their implicit `aria-live` value.", sheets_gid="283521996", sql_file="common_aria_role.sql", ) }} diff --git a/src/content/en/2022/cdn.md b/src/content/en/2022/cdn.md index 679cfc1d1ea..7f4e48dffc6 100644 --- a/src/content/en/2022/cdn.md +++ b/src/content/en/2022/cdn.md @@ -105,7 +105,7 @@ CDNs can provide better performance for delivering non-static content as well as {{ figure_markup( image="cdn-usage-hosted-comparison.png", - caption="Trends for content served from CDN for mobile", + caption="Trends for content served from CDN for mobile.", description="This chart shows the trends for content served from CDN for last few years. The general trend is that the CDN usage is increasing. For the contents served from subdomains we see bigger increase.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRZQqyyKiQWgICD_a0WaEAmfZyFN_Zi3wVuQnZxsXqwZ_1JQg2x7GpRw4CTkX4gKvurzoCQ6YokkdpM/pubchart?oid=2141710369&format=interactive", sheets_gid="2085205637", @@ -241,7 +241,7 @@ Common logic dictates that the fewer hops it takes for a HTTPS request-response {{ figure_markup( image="tls-negotiation-desktop.png", - caption="HTML TLS negotiation - CDN vs origin (desktop)", + caption="HTML TLS negotiation - CDN vs origin (desktop).", description="This bar chart provides insight into TLS connection time (in milliseconds) across 10th, 25th, 50th, 75th and 90th percentile for CDN and origin. As it can be seen from the chart the TLS negotiation time is generally faster for CDNs.", chart_url="https://docs.google.com/spreadsheets/u/1/d/e/2PACX-1vRZQqyyKiQWgICD_a0WaEAmfZyFN_Zi3wVuQnZxsXqwZ_1JQg2x7GpRw4CTkX4gKvurzoCQ6YokkdpM/pubchart?oid=1669978107&format=interactive", sheets_gid="1644442668", @@ -251,7 +251,7 @@ Common logic dictates that the fewer hops it takes for a HTTPS request-response {{ figure_markup( image="tls-negotiation-mobile.png", - caption="HTML TLS negotiation - CDN vs origin (mobile)", + caption="HTML TLS negotiation - CDN vs origin (mobile).", description="This bar chart provides insight into TLS connection time (in milliseconds) across 10th, 25th, 50th, 75th and 90th percentile for CDN and origin. As it can be seen from the chart the TLS negotiation time is generally faster for CDNs.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRZQqyyKiQWgICD_a0WaEAmfZyFN_Zi3wVuQnZxsXqwZ_1JQg2x7GpRw4CTkX4gKvurzoCQ6YokkdpM/pubchart?oid=1577806460&format=interactive", sheets_gid="1644442668", diff --git a/src/content/en/2022/javascript.md b/src/content/en/2022/javascript.md index bac34bf7e46..7bb8f458c0b 100644 --- a/src/content/en/2022/javascript.md +++ b/src/content/en/2022/javascript.md @@ -466,7 +466,7 @@ A staggeringly low 0.34% of all observed mobile pages currently use dynamic `imp It's tricky, but a balance can be struck, and it involves gauging the user's intent. One way of deferring loading of JavaScript without delaying interactions is to [preload](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) that JavaScript when the user signals intent to make an interaction. One example of this could be to defer loading JavaScript for the validation of a form, and preload that JavaScript once the user has focused a field in that form. That way, when the JavaScript is requested, it will already be in the browser cache. -Another way could be to use a service worker to precache JavaScript necessary for interactions when the service worker is installed. Installation should occur at a point in which the page has fully loaded in the page's <a hreflang="en" href="https://developer.mozilla.org/docs/Web/API/Window/load_event">`load` event</a>. That way, when the necessary functionality is requested, it can be retrieved from the service worker cache without startup costs. +Another way could be to use a service worker to precache JavaScript necessary for interactions when the service worker is installed. Installation should occur at a point in which the page has fully loaded in the page's [`load` event](https://developer.mozilla.org/docs/Web/API/Window/load_event). That way, when the necessary functionality is requested, it can be retrieved from the service worker cache without startup costs. Dynamic `import()` is tricky to use, but more widespread adoption of it can help shift the performance cost of loading JavaScript from startup to a later point in the page lifecycle, presumably when there will be less network contention for resources. We hope to see increased adoption of dynamic `import()`, as the amount of JavaScript we see loaded during startup is only increasing. @@ -609,7 +609,7 @@ Minification addresses one of the first principles of web performance: ship less ### Source maps -<a hreflang="en" href="https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html">Source maps</a> are a tool that web developers use to map minified and uglified production code to their original sources. Source maps are used in production JavaScript files, and are a useful debugging tool. Source maps can be specified in a comment pointing to a source map file at the end of a resource, or as the <a hreflang="en" href="https://developer.mozilla.org/docs/Web/HTTP/Headers/SourceMap">`SourceMap`</a> HTTP response header. +<a hreflang="en" href="https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html">Source maps</a> are a tool that web developers use to map minified and uglified production code to their original sources. Source maps are used in production JavaScript files, and are a useful debugging tool. Source maps can be specified in a comment pointing to a source map file at the end of a resource, or as the [`SourceMap`](https://developer.mozilla.org/docs/Web/HTTP/Headers/SourceMap) HTTP response header. {{ figure_markup( caption="The percentage of mobile pages specifying source map comments to publicly accessible source maps.", @@ -756,9 +756,9 @@ Only 20 per million (0.002%) mobile pages are currently shipping JavaScript that ### Synchronous XHR -AJAX—or usage of the <a hreflang="en" href="https://developer.mozilla.org/docs/Web/API/XMLHttpRequest">`XMLHttpRequest`</a> (XHR) method to asynchronously retrieve data and update information on the page without a navigation request—was a very popular method of creating dynamic user experiences. It has largely been replaced by the asynchronous [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) method, but XHR is <a hreflang="en" href="https://caniuse.com/mdn-api_xmlhttprequest">still supported in all major browsers</a>. +AJAX—or usage of the [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest) (XHR) method to asynchronously retrieve data and update information on the page without a navigation request—was a very popular method of creating dynamic user experiences. It has largely been replaced by the asynchronous [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) method, but XHR is <a hreflang="en" href="https://caniuse.com/mdn-api_xmlhttprequest">still supported in all major browsers</a>. -XHR has a flag that allows you to make synchronous requests. <a hreflang="en" href="https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#synchronous_request">Synchronous XHR</a> is harmful for performance because the event loop and main thread is blocked until the request is finished, resulting in the page hanging until the data becomes available. `fetch` is a much more effective and efficient alternative with a simpler API, and has no support for synchronous fetching of data. +XHR has a flag that allows you to make synchronous requests. [Synchronous XHR](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#synchronous_request) is harmful for performance because the event loop and main thread is blocked until the request is finished, resulting in the page hanging until the data becomes available. `fetch` is a much more effective and efficient alternative with a simpler API, and has no support for synchronous fetching of data. {{ figure_markup( caption="The percentage of mobile pages using synchronous XHR.", @@ -775,7 +775,7 @@ Avoid using synchronous XHR, and XHR in general. `fetch` is a much more ergonomi ### `document.write` -Before the introduction of DOM insertion methods ([`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) and others, for example), <a hreflang="en" href="https://developer.mozilla.org/docs/Web/API/Document/write">`document.write`</a> was used to insert content at the position the `document.write` was made in the document. +Before the introduction of DOM insertion methods ([`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) and others, for example), [`document.write`](https://developer.mozilla.org/docs/Web/API/Document/write) was used to insert content at the position the `document.write` was made in the document. `document.write` is very problematic. For one, it blocks the HTML parser, and is problematic for a number of other reasons <a hreflang="en" href="https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()">the HTML spec itself warns against its use</a>. On slow connections, blocking document parsing to append nodes in this way creates performance problems that are entirely avoidable. diff --git a/src/content/en/2022/page-weight.md b/src/content/en/2022/page-weight.md index 2cd273fe827..89e66e1f10a 100644 --- a/src/content/en/2022/page-weight.md +++ b/src/content/en/2022/page-weight.md @@ -196,7 +196,7 @@ At the 50th percentile, desktop pages were over 2 MB, mobile pages just under th Overall page weight is remarkably close when looking at what is served desktop versus mobile user-agents, although the gap grows slightly in the higher percentile (larger) pages. Given that mobile devices tend to have fewer local resources and more constrained network capabilities, this is concerning. {{ figure_markup( - caption="The weight of the largest desktop page", + caption="The weight of the largest desktop page.", content="678 MB", classes="big-number", sheets_gid="1763112644", @@ -223,7 +223,7 @@ Let's dig a little deeper into what is making up these large sizes. Looking at the median page weight over time, it remains clear that the trend remains disappointingly consistent, with the median weight only growing over time. {{ figure_markup( - caption="Growth in mobile page weight over 10 years", + caption="Growth in mobile page weight over 10 years.", content="594%", classes="big-number", sheets_gid="1472139207", @@ -393,7 +393,7 @@ It's about tradeoffs and tackling the worst bottleneck, which is often the netwo ### Minification -<a hreflang="en" href="https://en.wikipedia.org/wiki/Minification_(programming)">Minification</a> helps to reduce the overall size of text-based resources by removing unnecessary characters, like whitespace, code comments, and other things that play no part in how a browser interprets and uses these resources. +[Minification](https://wikipedia.org/wiki/Minification_(programming)) helps to reduce the overall size of text-based resources by removing unnecessary characters, like whitespace, code comments, and other things that play no part in how a browser interprets and uses these resources. CSS and JavaScript are great candidates for minification, and we looked at both, using Lighthouse's test for these resources. diff --git a/src/content/en/2022/performance.md b/src/content/en/2022/performance.md index b85b09c9fb9..5c8ea1876e1 100644 --- a/src/content/en/2022/performance.md +++ b/src/content/en/2022/performance.md @@ -431,7 +431,7 @@ However, LCP images may be loaded from other origins, like asset domains and ima {{ figure_markup( image="cross-hosted-lcp-images.png", - caption="Cross-hosted LCP images", + caption="Cross-hosted LCP images.", description="Bar chart showing same host is used for the LCP image for 55% of desktop and 48% of mobile pages, cross host for 23% and 21% respectively, and other content is the LCP element for 21% of desktop and 31% of mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-dJP3uphZoGE5A_luniNBFm5V2ww6irfOxANg0hrMid7gjgrtchsN_utOIDOvVZUjIwpmUBb27nHF/pubchart?oid=65223493&format=interactive", sheets_gid="139284544", @@ -457,7 +457,7 @@ The six percentage point improvement to LCP this year can only happen when hundr {{ figure_markup( image="good-cls-by-device.png", - caption="Good CLS by device", + caption="Good CLS by device.", description="Bar chart showing the number of websites with good CLS increased from 54% in 2020 to 62% in 2021 to 65% in 2022. For sites visited on phones the it was 60% of sites achieving good CLS in 2020, 62% for 2021, increasing to 74% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-dJP3uphZoGE5A_luniNBFm5V2ww6irfOxANg0hrMid7gjgrtchsN_utOIDOvVZUjIwpmUBb27nHF/pubchart?oid=20373607&format=interactive", sheets_gid="555510064", @@ -665,7 +665,7 @@ There are other, more direct ways site owners can improve their CLS. Setting `he {{ figure_markup( image="good-fid-by-device.png", - caption="Good FID by device", + caption="Good FID by device.", description="Bar chart showing 100% of websites had good FID in 2020, 2021, and 2022. For sites visited on phones this increased from 80% in 2020 to 90% in 2021 and then to 92% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-dJP3uphZoGE5A_luniNBFm5V2ww6irfOxANg0hrMid7gjgrtchsN_utOIDOvVZUjIwpmUBb27nHF/pubchart?oid=1546220733&format=interactive", sheets_gid="555510064", @@ -875,7 +875,7 @@ The most notable attribute of this chart is the dense area in the bottom left co There's also a patch of pages that have low TBT and a FID of about 250 ms. This area represents pages that have <a hreflang="en" href="https://developer.chrome.com/blog/300ms-tap-delay-gone-away">tap delay</a> issues due to missing a `<meta name=viewport>` tag. These are outliers that can be safely ignored for this analysis's purposes. -The <a hreflang="en" href="https://en.wikipedia.org/wiki/Kendall_rank_correlation_coefficient">Kendall</a> and <a hreflang="en" href="https://en.wikipedia.org/wiki/Spearman%27s_rank_correlation_coefficient">Spearman</a> coefficients of correlation for this distribution are 0.29 and 0.40, respectively. +The [Kendall](https://wikipedia.org/wiki/Kendall_rank_correlation_coefficient) and [Spearman](https://wikipedia.org/wiki/Spearman%27s_rank_correlation_coefficient) coefficients of correlation for this distribution are 0.29 and 0.40, respectively. {{ figure_markup( image="tbt-inp.png", diff --git a/src/content/en/2022/pwa.md b/src/content/en/2022/pwa.md index 8cf887d5d9b..f6b71e93659 100644 --- a/src/content/en/2022/pwa.md +++ b/src/content/en/2022/pwa.md @@ -313,7 +313,7 @@ As these are lesser-use, more advanced, capabilities they do not show on [our pr #### Manifest preferring native {{ figure_markup( - caption="Manifest files with a related_applications field on mobile", + caption="Manifest files with a related_applications field on mobile.", content="2.0%", classes="big-number", sheets_gid="228985826", @@ -328,7 +328,7 @@ There is a property in the manifest that specifies if applications listed in the PWAs go hand in hand with advanced web capabilities. These capabilities are generally part of project Fugu which is the codename for a collection of new web platform features incubating within the Chromium project. {{ figure_markup( - caption="Most used Fugu API (desktop)", + caption="Most used Fugu API (desktop).", content="8.8%", classes="big-number", sheets_gid="1110821491", diff --git a/src/content/en/2022/structured-data.md b/src/content/en/2022/structured-data.md index c85aa57cff7..00237c7a608 100644 --- a/src/content/en/2022/structured-data.md +++ b/src/content/en/2022/structured-data.md @@ -53,11 +53,11 @@ As structured data is a rich and complex area, it is important to explore and ex ### Linked data -By adding structured data to web pages, and providing URI links to the entities the pages contain/reference, we create <a hreflang="en" href="https://en.wikipedia.org/wiki/Linked_data">_linked data_</a>. This structured data is then interlinked, making it more useful through semantic queries. +By adding structured data to web pages, and providing URI links to the entities the pages contain/reference, we create [_linked data_](https://wikipedia.org/wiki/Linked_data). This structured data is then interlinked, making it more useful through semantic queries. -Adding linked data to describe web page content enables machines to treat web pages as databases. At a large scale, this contributes to the <a hreflang="en" href="https://en.wikipedia.org/wiki/Semantic_Web">semantic web</a>. The semantic web links data together through The _Resource Description Framework (RDF)_. This is a framework for representing information on the web using URIs to define entities and the relationships between them. +Adding linked data to describe web page content enables machines to treat web pages as databases. At a large scale, this contributes to the [semantic web](https://wikipedia.org/wiki/Semantic_Web). The semantic web links data together through The _Resource Description Framework (RDF)_. This is a framework for representing information on the web using URIs to define entities and the relationships between them. -A relationship between entities in the RDF data model is known as a _semantic triple_. With a <a hreflang="en" href="https://en.wikipedia.org/wiki/Semantic_triple">semantic triple</a> (or just _triple_), we can codify a statement about data. These expressions follow the form of subject–predicate–object (e.g., "Allen knows John"). +A relationship between entities in the RDF data model is known as a _semantic triple_. With a [semantic triple](https://wikipedia.org/wiki/Semantic_triple) (or just _triple_), we can codify a statement about data. These expressions follow the form of subject–predicate–object (e.g., "Allen knows John"). To be able to retrieve and manipulate RDF data, we can use an RDF Query Language such as <a hreflang="en" href="https://www.w3.org/TR/sparql11-query/">SPARQL</a>, the standard RDF query language. @@ -65,7 +65,7 @@ As will be discussed later, this semantic web creates many opportunities for bus ### Open data -Linked data may also be <a hreflang="en" href="https://en.wikipedia.org/wiki/Open_data">_open data_</a>, described as _Linked Open Data_. Open data, as the name implies, is data that is openly accessible to anyone for any purpose. This data is licensed under an open license. +Linked data may also be [_open data_](https://wikipedia.org/wiki/Open_data), described as _Linked Open Data_. Open data, as the name implies, is data that is openly accessible to anyone for any purpose. This data is licensed under an open license. Open data is the first of the <a hreflang="en" href="https://5stardata.info/en/">5 stars of open data</a>, a deployment scheme suggested by Tim Berners-Lee. According to the <a hreflang="en" href="https://opendatahandbook.org/">open data handbook</a>, to score the maximum five stars, data must (1) Be available on the Web under an open license, (2) Be in the form of structured data, (3) Be in a non-proprietary file format, (4) Use URIs as its identifiers, (5) Include links to other data sources (see [data linking](#data-linking)). @@ -73,7 +73,7 @@ While structured data is the second star in the 5 star open data plan, linked da ### Semantic search engines, rich results and beyond -A semantic search engine is one which performs <a hreflang="en" href="https://en.wikipedia.org/wiki/Semantic_search">semantic search</a>. This is different from lexical search where search engines look for exact or close matches to words or strings of text. Semantic search aims to understand the user's intent and the context of the search terms in order to improve the accuracy of search. An example would be a structured data entity of "local business: hairdresser" versus "TG Locks n Lashes"; the latter is a business name, and while it tells the creative name of the hair salon as a key-word, it does little to help the search engine to understand what the business does. By using structured data, the website can better help the search engine understand the context of its information, and thus enable the engine to offer better search results in the context of the query asked by the search user. Google and Bing are excellent examples of semantic search engines. +A semantic search engine is one which performs [semantic search](https://wikipedia.org/wiki/Semantic_search). This is different from lexical search where search engines look for exact or close matches to words or strings of text. Semantic search aims to understand the user's intent and the context of the search terms in order to improve the accuracy of search. An example would be a structured data entity of "local business: hairdresser" versus "TG Locks n Lashes"; the latter is a business name, and while it tells the creative name of the hair salon as a key-word, it does little to help the search engine to understand what the business does. By using structured data, the website can better help the search engine understand the context of its information, and thus enable the engine to offer better search results in the context of the query asked by the search user. Google and Bing are excellent examples of semantic search engines. Google uses semantic search technologies to serve relevant information from the <a hreflang="en" href="https://blog.google/products/search/introducing-knowledge-graph-things-not/">Google Knowledge Graph</a> which is a knowledge base used to serve search results in an infobox. This infobox is known as a <a hreflang="en" href="https://support.google.com/knowledgepanel/answer/9163198">knowledge panel</a>, and can be seen in many results. This knowledge box can be enabled or enhanced by structured data. @@ -172,7 +172,7 @@ Structured data is underpinned by formats and standards that describe a meta-lev {{ figure_markup( image="structured-data-types.png", - caption="Structured data types", + caption="Structured data types.", description="Bar chart showing RDFa is used on 62% of desktop and mobile pages, Open Graph on 59% of each, Twitter on 41% and 40% respectively, JSON-LD on 37% and 37%, Microdata on 23% and 25%, Facebook on 7% and 8%, Dublin Core and Microformats on 1% of both, and finally microformats2 on 0% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1295789309&format=interactive", sheets_gid="138285863", @@ -184,7 +184,7 @@ RDFa and Open Graph remain in the majority with 62% and 57% of mobile pages, res {{ figure_markup( image="structured-data-usage-by-year.png", - caption="Structured data usage by year on mobile", + caption="Structured data usage by year on mobile.", description="Bar chart showing RDFa was used on 61% of mobile pages in 2021 and 62% in 2022, Open Graph on 57% and 59% respectively, Twitter on 37% and 40%, JSON-LD on 34% and 37%, Microdata on 25% and 25%, Facebook on 8% and 8%, Dublin Core and Microformats on 1% in both years, and finally microformats2 on 0% in both years.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1841491057&format=interactive", sheets_gid="1452747230", @@ -246,7 +246,7 @@ Let's delve a little deeper into each type. {{ figure_markup( image="rdfa-usage-by-year-mobile.png", - caption="RDFa usage by year on mobile", + caption="RDFa usage by year on mobile.", description="Bar chart showing `foaf:image` on was used on 0.86% of pages in 2021 and 0.81% in 2022, `foaf:document` on 0.36% and 0.30% respectively, `sioc:item` on 0.24% and 0.20%, `schema:webpage` on 0.11% and 0.12%, `image` on 0.09% and 0.10%, `og:website` on 0.06% and 0.08%, `listitem` on 0.08% and 0.08%, `breadcrumblist` on 0.07% and 0.07%, `webpage` on 0.04% and 0.04%, `person` on 0.03% and 0.03%, `schema:article` on 0.03% and 0.03%, `skos:concept` on 0.04% and 0.03%, `v:breadcrumb` on 0.04% and 0.03%, and finally `sioc:useraccount` was used on 0.03% of pages in 2021 and 0.02% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1434267711&format=interactive", sheets_gid="1452747230", @@ -260,7 +260,7 @@ When evaluating the types of RDFa, `foaf:image` remains present on more pages th {{ figure_markup( image="rdfa-usage-by-device.png", - caption="RDFa usage by device", + caption="RDFa usage by device.", description="Bar chart showing `foaf:image` was used on 1.05% of desktop and 0.81% of mobile pages, `foaf:document` on 0.38% and 0.30% respectively, `sioc:item` on 0.25% and 0.20%, `schema:webpage` on 0.16% and 0.12%, `image` on 0.13% and 0.10%, `og:website` on 0.07% and 0.08%, `listitem` on 0.09% and 0.08%, `breadcrumblist` on 0.08% and 0.07%, `webpage` on 0.05% and 0.04%, `person` on 0.03% and 0.03%, `schema:article` on 0.04% and 0.03%, `skos:concept` on 0.04% and 0.03%, `v:breadcrumb` on 0.03% and 0.03%, and finally `sioc:useraccount` on 0.02% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=193330933&format=interactive", sheets_gid="1452747230", @@ -276,7 +276,7 @@ RDFa remains more prominent on desktop with `foaf:image` appearing on 1% of desk {{ figure_markup( image="dublin-core-usage-by-year-mobile.png", - caption="Dublin Core usage by year (mobile)", + caption="Dublin Core usage by year (mobile).", description="Bar chart showing `dc.title` was used on 0.71% of mobile pages in 2021 and 0.70% in 2022, `dc.language` on 0.50% and 0.49% respectively, `dc.description` on 0.46% and 0.44%, `dc.publisher` on 0.21% and 0.22%, `dc.creator` on 0.21% and 0.21%, `dc.subject` on 0.20% and 0.20%, `dc.source` on 0.22% and 0.19%, `dc.identifier` on 0.18% and 0.17%, `dc.relation` on 0.19% and 0.16%, `dcterms.title` on 0.13% and 0.15%, `dc.format` on 0.15% and 0.15%, `dc.type` on 0.14% and 0.14%, `dcterms.rightsholder` on 0.13% and 0.12%, and finally `dcterms.identifier` on 0.18% of mobile pages in 2021 and 0.11% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1093040433&format=interactive", sheets_gid="1452747230", @@ -290,7 +290,7 @@ Dublin Core attribute type usage remains very similar across the most prominent {{ figure_markup( image="dublin-core-usage-by-device.png", - caption="Dublin Core usage by device", + caption="Dublin Core usage by device.", description="Bar chart showing `dc.title` was used on 0.74% of desktop and 0.70% of mobile pages, `dc.language` on 0.53% and 0.49% respectively, `dc.description` on 0.48% and 0.44%, `dc.publisher` on 0.22% and 0.22%, `dc.creator` on 0.22% and 0.21%, `dc.subject` on 0.20% and 0.20%, `dc.source` on 0.25% and 0.19%, `dc.identifier` on 0.18% and 0.17%, `dc.relation` on 0.21% and 0.16%, `dcterms.title` on 0.16% and 0.15%, `dc.format` on 0.16% and 0.15%, `dc.type` on 0.15% and 0.14%, `dcterms.rightsholder` on 0.14% and 0.12%, and finally `dcterms.identifier` on 0.18% of desktop and 0.11% of mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=690445913&format=interactive", sheets_gid="1452747230", @@ -306,7 +306,7 @@ Other than that, Dublin Core types are similar between mobile and desktop pages, {{ figure_markup( image="open-graph-usage-by-year-mobile.png", - caption="Open Graph usage by year (mobile)", + caption="Open Graph usage by year (mobile).", description="Bar chart showing `og:image` was used on 37% of mobile pages in 2021 and 39% in 2022, `og:image:width` on 13% and 14% respectively, `og:image:height` on 13% and 14%, `og:image:secure_url` on 6% and 6%, `og:image:type` on 2% and 5%, and finally `og:image:alt` on 2% of mobile pages in 2021 and 3% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1953710107&format=interactive", sheets_gid="1452747230", @@ -318,7 +318,7 @@ Open Graph tags have seen a widespread increase in use. The most common of these {{ figure_markup( image="open-graph-usage-by-device.png", - caption="Open Graph usage by device", + caption="Open Graph usage by device.", description="Bar chart showing `og:image` was used on 40% of desktop and 39% of mobile pages, `og:image:width` on 15% and 14% respectively, `og:image:height` on 15% and 14%, `og:image:secure_url` on 6% and 6%, `og:image:type` on 5% of both, and finally `og:image:alt` was used on 3% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1302475483&format=interactive", sheets_gid="1452747230", @@ -332,7 +332,7 @@ We have seen an increase in use for each Open Graph type in the top 10 for both {{ figure_markup( image="twitter-meta-tag-usage-by-year-mobile.png", - caption="Twitter meta tag usage by year (mobile)", + caption="Twitter meta tag usage by year (mobile).", description="Bar chart showing `twitter:card` was used on 35% of mobile pages in 2021 and 38% in 2022, `twitter:title` on 21% and 22% respectively, `twitter:description` on 19% and 20%, `twitter:image` on 11% and 12%, `twitter:site` on 11% and 11%, `twitter:label1` on 7% and 10%, `twitter:data1` on 7% and 10%, `twitter:creator` on 4% and 3%, `twitter:url` on 3% and 3%, `twitter:domain` on 2% and 2%, `twitter:image:src` on 1% and 1%, `twitter:text:title` on 1% and 1%, and finally `twitter:app:id:iphone` was used on 1% of mobile pages in 2021 and 0% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1993854314&format=interactive", sheets_gid="1452747230", @@ -346,7 +346,7 @@ Twitter meta tags once again follow the pattern of a general increase in usage, {{ figure_markup( image="twitter-meta-tag-usage-by-device.png", - caption="Twitter meta tag usage by device", + caption="Twitter meta tag usage by device.", description="Bar chart showing `twitter:card` was used on 39% of desktop and 38% of mobile pages, `twitter:title` on 22% and 22% respectively, `twitter:description` on 20% and 20%, `twitter:image` on 12% and 12%, `twitter:site` on 13% and 11%, `twitter:label1` on 10% and 10%, `twitter:data1` on 10% and 10%, `twitter:creator` on 4% and 3%, `twitter:url` on 4% and 3%, `twitter:domain` on 2% and 2%, `twitter:image:src` on 1% and 1%, `twitter:text:title` on 0% and 1%, and finally `twitter:app:id:iphone` was used on 0% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=270505823&format=interactive", sheets_gid="1452747230", @@ -362,7 +362,7 @@ Twitter meta tags such as `twitter:site` and `twitter:image` have a larger prese {{ figure_markup( image="facebook-meta-tag-usage-by-year-mobile.png", - caption="Facebook meta tag usage by year (mobile)", + caption="Facebook meta tag usage by year (mobile).", description="Bar chart showing `fb:app_id` was used on 6.1% of mobile pages in 2021 and 5.8% in 2022, `fb:admins` on 2.6% and 2.6% respectively, `fb:pages` on 0.9% and 0.8%, `fb:page_id` and `fb:profile_id` on 0.1% in both years, and `fb:use_automatic_ad_placement` and `fb:article_style` on 0.0% in both years.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=978227692&format=interactive", sheets_gid="1452747230", @@ -374,7 +374,7 @@ Out of all of the Facebook tags here, there are only three with significant numb {{ figure_markup( image="facebook-meta-tag-usage-by-device.png", - caption="Facebook meta tag usage by device", + caption="Facebook meta tag usage by device.", description="Bar chart showing `fb:app_id` was used on 5.6% of desktop and 5.8% of mobile pages, `fb:admins` on 2.2% and 2.6% respectively, `fb:pages` on 0.9% and 0.8%, `fb:page_id` on 0.2% and 0.1%, `fb:profile_id` on 0.1% on both, and `fb:use_automatic_ad_placement` and `fb:article_style` on 0.0% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=230494604&format=interactive", sheets_gid="1452747230", @@ -388,7 +388,7 @@ This is true for desktop pages too, with the exception of `fb:pages` at a slight {{ figure_markup( image="microformats-usage-by-year-mobile.png", - caption="Microformats usage by year (mobile)", + caption="Microformats usage by year (mobile).", description="Bar chart showing `adr` was used on 0.50% of mobile pages in 2021 and 0.47% in 2022, `geo` on 0.10% and 0.10% respectively, `hReview` on 0.06% and 0.05%, `hReview-aggregate` on 0.05% and 0.03%, `hListing` and `hProduct` on 0.01% in both years, and finally `hCard` on 0.01% of mobile pages in 2021 and 0.00% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1161847910&format=interactive", sheets_gid="1452747230", @@ -402,7 +402,7 @@ Microformats have remained very similar in usage numbers since 2021, with `adr` {{ figure_markup( image="microformats-usage-by-device.png", - caption="Microformats usage by device", + caption="Microformats usage by device.", description="Bar chart showing `adr` was used on 0.56% of desktop and 0.47% of mobile pages, `geo` on 0.12% and 0.10% respectively, `hReview` on 0.04% and 0.05%, `hReview-aggregate` on 0.03% and 0.03%, `hListing` on 0.00% and 0.01%, `hProduct` on 0.01% and 0.01%, and finally `hCard` was used on 0.01% of desktop and 0.00% of mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1952037124&format=interactive", sheets_gid="1452747230", @@ -414,7 +414,7 @@ Both mobile and desktop share a mix of increased and decreased usage between mic {{ figure_markup( image="microformats2-usage-by-year-mobile.png", - caption="Microformats2 usage by year", + caption="Microformats2 usage by year.", description="Bar chart showing `h-entry` was used on 0.08% of mobile pages in 2021 and 0.25% in 2022 `h-card` on 0.04% and 0.21% respectively, `h-feed` on 0.01% and 0.18%, `h-adr` on 0.02% and 0.02%, `h-event` on 0.00% and 0.00%, `h-product` on 0.00% and 0.00%, and finally `h-item` was used on 0.01% of mobile pages in 2021 and 0.00% in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=392054831&format=interactive", sheets_gid="1452747230", @@ -426,7 +426,7 @@ Meanwhile, microformats2 attributes have skyrocketed since 2021. The properties {{ figure_markup( image="microformats2-usage-by-device.png", - caption="Microformats2 usage by device", + caption="Microformats2 usage by device.", description="Bar chart showing `h-entry` was used on 0.12% of desktop and 0.25% of mobile pages, `h-card` on 0.09% and 0.21% respectively, `h-feed` on 0.05% and 0.18%, `h-adr` on 0.02% and 0.02%, and `h-event`, `h-product` and `h-item` on 0.00% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1709601989&format=interactive", sheets_gid="1452747230", @@ -440,7 +440,7 @@ This growth is seen more drastically on mobile pages, though desktop pages do fo {{ figure_markup( image="microdata-usage-by-year-mobile.png", - caption="Microdata usage by year (mobile)", + caption="Microdata usage by year (mobile).", description="Bar chart showing `schema.org/webpage` was used on 7.4% of mobile pages in 2021 and 7.9% in 2022, `schema.org/sitenavigationelement` on 5.6% and 6.1% respectively, `schema.org/wpheader` on 4.9% and 5.3%, `schema.org/wpfooter` on 4.6% and 4.9%, `schema.org/organization` on 4.0% and 4.3%, `schema.org/blog` on 3.7% and 3.4%, `schema.org/creativework` on 2.1% and 2.5%, `schema.org/imageobject` on 1.8% and 1.9%, `schema.org/person` on 1.4% and 1.4%, `schema.org/website` on 1.3% and 1.4%, `schema.org/postaladdress` on 1.3% and 1.3%, `schema.org/blogposting` on 1.3% and 1.2%, `schema.org/wpsidebar` on 1.4% and 1.2%, `schema.org/imagegallery` on 1.1% and 1.1%, `schema.org/product` on 1.2% and 1.1%, `schema.org/offer` on 1.1% and 1.0%, `schema.org/listitem` on 1.0% and 1.0%, `schema.org/breadcrumblist` on 1.0% and 1.0%, and finally `schema.org/article` on 0.9% of mobile pages in 2021 and 0.8% of mobile pages in 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1393933149&format=interactive", sheets_gid="1452747230", @@ -454,7 +454,7 @@ Most of the properties for Microdata have not seen much change, with a slight in {{ figure_markup( image="microdata-usage-by-device.png", - caption="Microdata usage by device", + caption="Microdata usage by device.", description="Bar chart showing `schema.org/webpage` was used on 7.4% of desktop and 7.9% of mobile pages, `schema.org/sitenavigationelement` on 5.8% and 6.1% respectively, `schema.org/wpheader` on 4.9% and 5.3%, `schema.org/wpfooter` on 4.6% and 4.9%, `schema.org/organization` on 4.3% and 4.3%, `schema.org/blog` on 2.5% and 3.4%, `schema.org/creativework` on 2.4% and 2.5%, `schema.org/imageobject` on 1.7% and 1.9%, `schema.org/person` on 1.6% and 1.4%, `schema.org/website` on 1.4% and 1.4%, `schema.org/postaladdress` on 1.3% and 1.3%, `schema.org/blogposting` on 1.5% and 1.2%, `schema.org/wpsidebar` on 1.1% and 1.2%, `schema.org/imagegallery` on 0.9% and 1.1%, `schema.org/product` on 1.0% and 1.1%, `schema.org/offer` on 0.9% and 1.0%, `schema.org/listitem` on 0.9% and 1.0%, `schema.org/breadcrumblist` on 0.9% and 1.0%, and finally `schema.org/article` was used on 0.8% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1132507895&format=interactive", sheets_gid="1452747230", @@ -470,7 +470,7 @@ These increases are common for desktop as well, with slight decreases elsewhere {{ figure_markup( image="json-ld-usage-by-year-mobile.png", - caption="JSON-LD usage by year (mobile)", + caption="JSON-LD usage by year (mobile).", description="Bar chart showing `WebSite` was used on 8.9% of mobile pages in 2021 and 8.8% in 2022, `Organization` on 6.0% and 6.2% respectively, `LocalBusiness` on 1.7% and 2.8%, `BreadcrumbList` on 1.5% and 1.6%, `WebPage` on 1.0% and 1.1%, `Product` on 0.6% and 0.7%, `ItemList` on 0.5% and 0.5%, `BlogPosting` on 0.5% and 0.4%, `Article` on 0.3% and 0.3%, `Restaurant` on 0.2% and 0.3%, `Person` on 0.3% and 0.3%, `AutoDealer` on 0.2% and 0.2%, `FAQPage` on 0.1% and 0.2%, `Corporation` on 0.2% and 0.2%, `Event` on 0.2% and 0.2%, `Store` on 0.2% and 0.2%, `VideoObject` on 0.2% and 0.1%, and finally `ApartmentComplex` on 0.1% on mobile pages in both 2021 and 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1634241816&format=interactive", sheets_gid="1452747230", @@ -484,7 +484,7 @@ JSON-LD types continue to be mostly similar with a few notable increases over th {{ figure_markup( image="json-ld-usage-by-device.png", - caption="JSON-LD usage by device", + caption="JSON-LD usage by device.", description="Bar chart showing `WebSite` was used on 9.6% of desktop and 8.8% of mobile pages, `Organization` on 6.9% and 6.2% respectively, `LocalBusiness` on 2.3% and 2.8%, `BreadcrumbList` on 1.6% and 1.6%, `WebPage` on 1.0% and 1.1%, `Product` on 0.5% and 0.7%, `ItemList` on 0.6% and 0.5%, `BlogPosting` on 0.2% and 0.4%, `Article` on 0.3% and 0.3%, `Restaurant` on 0.1% and 0.3%, `Person` on 0.3% and 0.3%, `AutoDealer` on 0.3% and 0.2%, `FAQPage` on 0.2% and 0.2%, `Corporation` on 0.2% and 0.2%, `Event` on 0.2% and 0.2%, `Store` on 0.2% and 0.2%, `VideoObject` on 0.2% and 0.1%, and finally `ApartmentComplex` was used on 0.1% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1274560821&format=interactive", sheets_gid="1452747230", @@ -537,7 +537,7 @@ The main limitation of this analysis is represented by the fact that we can eval {{ figure_markup( image="sameas-usage-by-year-mobile.png", - caption="`SameAs` usage by year (mobile)", + caption="`SameAs` usage by year (mobile).", description="Bar chart showing `WebSite` was used on 4.3% of mobile pages in both 2021 and 2022, `instagram.com` on 2.7% and 2.9% respectively, `twitter.com` on 2.5% and 2.3%, `youtube.com` on 1.8% and 1.8%, `linkedin.com` on 1.0% and 1.0%, `pinterest.com` on 0.6% and 0.6%, `google.com` on 0.5% and 0.4%, `wikipedia.org` on 0.1% and 0.1%, `wikidata.org` on 0.1% and 0.1%, `yelp.com` on 0.1% and 0.1%, `tumblr.com` on 0.1% and 0.1%, `uptodown.io` on 0.1% and 0.1%, `vk.com` on 0.1% and 0.1%, and `t.me`, `soundcloud.com`, `pinterest.co.uk`, `tripadvisor.com`, `flickr.com`, and `vimeo.com` all were used on 0.0% of mobile pages in both 2021 and 2022.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1443969983&format=interactive", sheets_gid="1452747230", @@ -551,7 +551,7 @@ As was the case in 2021, the most common values of the `sameAs` property are soc {{ figure_markup( image="sameas-usage-by-device.png", - caption="`SameAs` usage by device", + caption="`SameAs` usage by device.", description="Bar chart showing `facebook.com` was used on 4.9% of desktop and 4.3% of mobile pages, `instagram.com` on 3.3% and 2.9% respectively, `twitter.com` on 2.9% and 2.3%, `youtube.com` on 2.1% and 1.8%, `linkedin.com` on 1.4% and 1.0%, `pinterest.com` on 0.7% and 0.6%, `google.com` on 0.5% and 0.4%, `wikipedia.org` on 0.1% and 0.1%, `wikidata.org` on 0.1% and 0.1%, `yelp.com` on 0.1% and 0.1%, `tumblr.com` on 0.1% and 0.1%, `uptodown.io` on 0.1% and 0.1%, `vk.com` on 0.1% and 0.1%, and `t.me`, `soundcloud.com`, `pinterest.co.uk`, `tripadvisor.com`, `flickr.com`, and `vimeo.com` were all used on 0.0% of both desktop and mobile pages.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=30131405&format=interactive", sheets_gid="1452747230", @@ -567,7 +567,7 @@ The rest of the list includes information sources such as wikipedia.org (at 0.13 {{ figure_markup( image="sameas-relative-change.png", - caption="`SameAs` relative change", + caption="`SameAs` relative change.", description="Bar chart showing `tiktok.com` changed by 600% by both desktop and mobile pages, `spotify.com` by 100.00% on desktop and 200.00% on mobile, `pinterest.fr` by 200.00% and 200.00% respectively, `t.me` by 133.33% and 133.33%, `flickr.com` by 150.00% and 133.33%, `wikipedia.org` by 118.18% and 118.18%, `instagram.com` by 106.93% and 112.46%, `tumblr.com` by 112.50% and 111.11%, `yelp.com` by 110.00% and 108.33%, `facebook.com` by 101.41% and 107.39%, `snapchat.com` by 100.00% and 100.00%, `vimeo.com` by 100.00% and 100.00%, `tripadvisor.com` by 100.00% and 100.00%, `trello.com` by 100.00% and 100.00%, `xing.com` by 100.00% and 100.00%, `pinterest.co.uk` by 133.33% and 100.00%, `behance.net`, `crunchbase.com`, `myspace.com`, `pinterest.ca`, and `pinterest.com.au` all changed by 200.00% on desktop and 100.00% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1046677446&format=interactive", sheets_gid="1452747230", @@ -581,7 +581,7 @@ It is insightful to look at the `SameAs` entries and how they change over time. {{ figure_markup( image="sameas-domain-average-relative-change.png", - caption="`SameAs` domain average relative change", + caption="`SameAs` domain average relative change.", description="Bar chart showing `fr` changed by 200% by both desktop and mobile pages, `site` by 200.00% on desktop and 100.00% on mobile, `de` by 200% and 100% respectively, `com` by 125% and 118%, `me` by 117% and 117%, `org` by 103% and 106%, `net` by 100% and 200%, `ca` by 100% and 200%, `co` by 100% and 117%, and finally `it`, `page`, and `es` by 100% on both desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1247757269&format=interactive", sheets_gid="1452747230", @@ -595,7 +595,7 @@ Looking at the domain names of the `SameAs` entries, and how they change over ti {{ figure_markup( image="json-ld-contexts-relative-change.png", - caption="JSON-LD contexts relative change", + caption="JSON-LD contexts relative change.", description="Bar chart showing `contao.org` had a 819% increase on desktop and 701% on mobile, for `contao.org` it was 819% and 701% respectively, for `rich-snippets.io` 579% and 849%, for `inventorychanger.ru` 232% and 94%, for `itall.com` 232% and 94%, for `ftmo.com` 232% and 189%, for `drivealfaaromeo.com` 232% and 189%, for `congresopuebla.gob.mx` 232% and 189%, for `pompiers.brussels` 232% and 189%, for `urldefense.com` 232% and 252%, for `googleapis.com` 227% and 214%, and finally for `archive.org` there was a 174% increase on desktop and 157% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRr8oRb8NNs5MbpPpDi7QSsTUTPQL_vxQtQvmn52qGk97gpNhJIHa8VF0x5ZJtWXAFuEbDFZQB6TIuN/pubchart?oid=1092709727&format=interactive", sheets_gid="1452747230", diff --git a/src/content/en/2022/sustainability.md b/src/content/en/2022/sustainability.md index 52fc5423d3c..50090a45475 100644 --- a/src/content/en/2022/sustainability.md +++ b/src/content/en/2022/sustainability.md @@ -103,7 +103,7 @@ For more on this, see the [Page Weight](./page-weight) chapter. {{ figure_markup( image="kilobytes-number-by-percentile.png", - caption="Number of kilobytes by percentile", + caption="Number of kilobytes by percentile.", description="A column chart showing that on the 90th percentile web pages weight over 9 MB on desktop and 8 MB on mobile. On the 75th percentile the web pages get over 4.5 MB on desktop and around 4 MB on mobile, on the 50th percentile we found web pages weight a bit less than 2.5 MB on desktop and over 2 MB on mobile, on the 25th percentile it's over 1 MB on desktop and a bit less than 1 MB on mobile. Finally, on the 10th percentile we see pages weight about 0.5 MB on desktop and 0.4 MB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=2123741324&format=interactive", sheets_gid="1911144863", @@ -120,7 +120,7 @@ At the 90th percentile, desktop pages were over 9 MB and mobile pages over 8 MB. {{ figure_markup( image="carbon-emissions-by-percentile.png", - caption="Carbon emissions (g) by percentile", + caption="Carbon emissions (g) by percentile.", description="A column chart showing that on the 90th percentile, desktop web pages emit 3.09g of carbon and mobile pages emit 2.76g of carbon, on the 75th percentile desktop pages emit 1.59g of carbon and mobile pages emit 1.38g of carbon. On the 50th percentile it goes 0.79g of carbon on desktop and 0.69 on mobile. On the 25th percentile it's 0.39g of carbon for desktop pages and 0.34g of carbon on mobile pages. Lastly, on the 10th percentile desktop pages emit 0.18g of carbon and mobile pages emit 0.15g of carbon.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=568360340&format=interactive", sheets_gid="1911144863", @@ -135,7 +135,7 @@ Now for an additional graph: emissions per percentile by type of content. {{ figure_markup( image="percent-of-total-emissions-by-type-mobile.png", - caption="Percent of total emissions by percentile by type (mobile)", + caption="Percent of total emissions by percentile by type (mobile).", description="A bar chart showing the percent of different content types on desktop in the total page carbon emissions by percentile. On the 90th percentile HTML content accounts for around 1.8% of the total carbon emissions, JavaScript is responsible a bit less than 18.1% of total carbon emissions, CSS is around 3.4%, images accounts for around 72.3% and fonts represent 4.5% of the total carbon emissions. On the 75th percentile, HTML represents 1.8%, JavaScript 23.4%, CSS around 3.8%, images around 65.7% and fonts around 5.2% of the total carbon emissions. On the 50th percentile, HTML represents 1.9%, JavaScript 30%, CSS around 4.4%, images almost 57.4% and fonts around 6.3% of the total carbon emissions. On the 25th percentile, HTML represents 2.4%, JavaScript 38.8%, CSS around 5.2%, images 48.3% and fonts around 5.3% of the total carbon emissions. On the 10th percentile, HTML represents 3.8%, JavaScript 53.4%, CSS around 3.6%, images 39.2% and fonts 0% of the total carbon emissions.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=141071996&format=interactive", sheets_gid="1911144863", @@ -152,7 +152,7 @@ The number of requests should be kept to a minimum. Keeping an upper limit of no {{ figure_markup( image="number-of-requests-by-percentile.png", - caption="Number of requests by percentile", + caption="Number of requests by percentile.", description="A column chat showing that on the 90th percentile there are 184 requests per page on desktop and 168 requests on mobile. On the 75th percentile there are 121 requests on desktop and 111 on mobile. On the 50th percentile it drops at 76 requests on desktop and 70 on mobile. On the 25th percentile there are 45 requests on desktop and 41 on mobile. Finally on the 10th percentile we see a total of 25 requests on desktop and 23 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=843262877&format=interactive", sheets_gid="174962437", @@ -165,7 +165,7 @@ So, which content type is to blame for this? {{ figure_markup( image="number-of-requests-by-percentile-by-type-mobile.png", - caption="Number of requests by percentile by type on mobile", + caption="Number of requests by percentile by type on mobile.", description="A column chart showing that on mobile devices, on the 90th percentile we find 14 requests targeting HTML content, 60 requests for javascript resources, almost 24 requests for CSS, around 70 requests fetching images and 8 requests for fonts.. On the 75th percentile, there are 6 HTML requests, 37 JavaScript requests, 12 CSS requests, 39 images requests and 5 Fonts requests. On the 50th percentile, we can see 2 HTML requests, 20 javascript requests, 6 CSS requests, 22 images and 3 fonts requests. On the 25th percentile, there are 1 HTML, 9 javascript, 3 CSS, 10 images and 1 font requests. On the 10h percentile, we find 1Html, 4 javascript, 1 CSS, 6 images and 1 font requests.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=768422178&format=interactive", sheets_gid="174962437", @@ -178,7 +178,7 @@ There are almost as many HTTP requests for mobile and desktop versions, which sh {{ figure_markup( image="number-of-bytes-by-percentile-by-type-mobile.png", - caption="Number of bytes by percentile by type on mobile", + caption="Number of bytes by percentile by type on mobile.", description="A column chart showing that on mobile devices, on the 90th percentile we find 135 KB of HTML, around 1,367 KB of JavaScript, 256 KB of CSS, 5,475 KB of images and 338 KB of fonts. On the 75th percentile it goes down at 67 KB of HTML, 857 KB of JavaScript, 139 KB of CSS, 2,402 KB of images and 191 KB of fonts. On the 50th percentile we found 30 KB of HTML, 461 KB of JavaScript, 68 KB of CSS, 881 KB of images and 97 KB of fonts. On the 25th percentile there is 13 KB of HTML, 209 KB of JavaScript, 28 KB of CSS, 260 KB of images and 29 KB of fonts. On the 10th percentile there is 6 KB of HTML, 87 KB of JavaScript, 6 KB of CSS, 64 KB of images and 0 KB of fonts.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=683807493&format=interactive", sheets_gid="1911144863", @@ -205,7 +205,7 @@ An increasing number of technology firms are also taking steps to green **all** {{ figure_markup( image="green-hosting-percentages.png", - caption="% Green hosting", + caption="% Green hosting.", description="A column chart showing that on the top 1,000 sites, on desktop, 54% of them relied on green web hosting and it drops at 52% on mobile. On the top 10,000 sites it's 50% on desktop and 48% on mobile, on the top 100,000 it's 39% on desktop and 38% on mobile, on the top million it's 24% for desktops and 24% on mobile. On all measured websites globally, only 13% rely on green web hosting for desktop and 10% for mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=222811305&format=interactive", sheets_gid="1022303859", @@ -245,7 +245,7 @@ Unused CSS is especially found when using CSS frameworks (Bootstrap and others). {{ figure_markup( image="unused-css-bytes.png", - caption="Unused CSS bytes", + caption="Unused CSS bytes.", description="A column chart showing that on the 90th percentile there is 221 KB of unused CSS on desktop and 218 KB on mobile, on the 75th percentile it's 117 KB on desktop and 113 KB on mobile, on the 50th percentile 52 KB on desktop and 49 KB on mobile. On the 25th percentile we found 19 KB of unused CSS on desktop and 17 KB on mobile. Lastly, we saw 0 KB of unused CSS on the 10th percentile on either desktop and mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1850605337&format=interactive", sheets_gid="1952093899", @@ -260,7 +260,7 @@ The amount of unused JavaScript can grow quickly when adding dependencies or usi {{ figure_markup( image="unused-javascript-bytes.png", - caption="Unused JavaScript bytes", + caption="Unused JavaScript bytes.", description="A column chart showing that on the 90th percentile there is 645 KB of unused JavaScript on desktop and 604 KB on mobile, on the 75th percentile it's 372 KB on desktop and 342 KB on mobile, on the 50th percentile 177 KB on desktop and 162 KB on mobile. On the 25th percentile we found 69 KB of unused JavaScript on desktop and 62 KB on mobile. Lastly, we saw 0 KB of unused JavaScript on the 10th percentile on either desktop and mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=625795710&format=interactive", sheets_gid="1918594785", @@ -320,7 +320,7 @@ WebP <a hreflang="en" href="https://caniuse.com/webp">is already widely supporte {{ figure_markup( image="image-formats-in-use.png", - caption="Image formats in use", + caption="Image formats in use.", description="A column chart showing that overall, jpg represents the image format of 52.9% of all images on desktop and 54.9% on mobile, png is used in 29.1% of desktop images and 28.2% of mobile images. WebP is used on 11.6% of desktop images and 10.7% of mobile's. Gif is used in 2.8% of desktop image and 2.6% of mobile images, Svg accounts for 2.6% of desktop images format and 2.4% of mobile's. Ico represents the format used on 0.9% of all desktop and mobile images and lastly, avif is the format of 0.3% of both desktop and mobile images.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=865768073&format=interactive", sheets_gid="21166754", @@ -337,7 +337,7 @@ Also remember that you often don't need a quality of more than 85% since the hum {{ figure_markup( image="responsive-image-types.png", - caption="Responsive image types", + caption="Responsive image types.", description="A column chart showing that around 33% of websites use the srcset attribute on desktop and 34% on mobile, 25% of them used it with sizes on desktop and 26% on mobile, 8% of them used the srcset attribute with w/o sizes on desktop and 8% on mobile. 8% of the websites use the picture element on desktop and 8% of them on mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=403648557&format=interactive", sheets_gid="695142267", @@ -352,7 +352,7 @@ An easy way to get a faster first load is to load images progressively: only loa {{ figure_markup( image="native-lazy-loading-usage.png", - caption="Native lazy loading usage", + caption="Native lazy loading usage.", description="A column chart showing that no websites used native lazy-loading on July the 1st, 2019. On August the 1st, 2020, 4% of websites used native lazy-loading on desktop 4% on mobile. On July the 1st, 2021, 18% of websites used native lazy-loading on both desktop and mobile, and on the 1st June of 2022, 23% of websites used native lazy-loading on desktop and 24% on mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=862073668&format=interactive", sheets_gid="1363374212", @@ -373,7 +373,7 @@ Automatically preloading videos (or audio files) involves retrieving data that m {{ figure_markup( image="video-preload-usage.png", - caption="Video preload usage", + caption="Video preload usage.", description="A column chart showing the `preload` attribute is not used on 57.6% of desktop videos and 59.5% of mobile videos. The `preload` attribute can be found with the `none` value on 17.3% of desktop videos 15.4% of mobile videos. The `auto` value is used on 15.3% of desktop videos 13.6% of mobile videos. The `metadata` value is used on 7.5%% of desktop videos 9.2% of mobile videos. The `preload` attribute is empty on 1.6% of both desktop and mobile videos. The value `preload` attribute has a value `TRUE` on respectively 0.4% and 0.3% of desktop and mobile videos. Lastly, the `preload` attribute has a value of `preload`, `yes`, `undefined` or `FALSE` on 0.1% of both desktop and mobile videos.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1090171830&format=interactive", sheets_gid="1420607407", @@ -392,7 +392,7 @@ Also, this attribute can override your `preload` setting since autoplaying requi {{ figure_markup( image="video-autoplay-usage.png", - caption="Video autoplay usage", + caption="Video autoplay usage.", description="A column chart showing that the autoplay attribute is not used on respectively 53.1% and 52.6% of desktop and mobile videos. It is used with an empty value on 38.6% of desktop videos and 38.8% of mobile videos. It is used with an 'autoplay' value on 5.3% of desktop videos and 5.1% of mobile videos. It is used with an value 'TRUE' on 2.5% of desktop videos and 3% of mobile videos. It is used with an value '1' on 0.3% of desktop mobile videos. It is used with an value 'TRUE' on 2.5% of desktop videos and 3% of mobile videos. It is used with an value 'FALSE' on 0.2% of desktop mobile videos.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=2034030994&format=interactive", sheets_gid="1238590607", @@ -442,7 +442,7 @@ With third-party requests making up such a large portion of requests on the web, {{ figure_markup( image="green-third-party-requests.png", - caption="Percents of green third party requests", + caption="Percents of green third party requests.", description="A column chart showing that on the top 1,000 websites 64% of third party requests relied on green hosting on desktop and 63% on mobile devices. On the top 10,000 websites it's 66% on desktop and 67% on mobile. For the top 100,000 sites it's 74% on both desktop and mobile. On the top million, it's 84% on desktop and 83% on mobile. Overall, we see that 89% of third party requests rely on green hosting on desktop and it goes up to 91% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1339778519&format=interactive", sheets_gid="951750086", @@ -479,7 +479,7 @@ Minifying JavaScript involves removing unnecessary characters for the browser, m {{ figure_markup( image="unminified-javascript-savings.png", - caption="Unminified JavaScript savings", + caption="Unminified JavaScript savings.", description="A column chart showing that on the 90th percentile 40 KB of JavaScript could be saved on desktop and 36 KB on mobile if using Js minifying. On the 75th percentile 10 KB of JavaScript could be saved on desktop and 9 KB on mobile. On the 50th, 25th and 10th percentile we see no KB savings, this is explained by the usage of JavaScript minifying already in place on those websites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=457277769&format=interactive", sheets_gid="1952499146", @@ -494,7 +494,7 @@ Inlining code is bad practice, even more for sustainability. Making your HTML he {{ figure_markup( image="script-usage.png", - caption="Script usage", + caption="Script usage.", description="A bar chart showing that on desktop 34% of javascript is inline and the other 66% is external. On mobile, 35% of JavaScript is inline and 65% comes from external files.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1900077125&format=interactive", sheets_gid="2126160877", @@ -513,7 +513,7 @@ As with CSS, minifying JavaScript involves removing unnecessary characters for t {{ figure_markup( image="unminified-css-savings.png", - caption="Unminified CSS savings", + caption="Unminified CSS savings.", description="A column chart showing that on the 90th percentile 15 KB of CSS could be saved on desktop and 14 KB on mobile if using CSS minifying. On the 75th percentile 5 KB of CSS could be saved on desktop and 4 KB on mobile. On the 50th, 25th and 10th percentile we see no KB savings, this is explained by the usage of CSS minifying already in place on those websites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=898637516&format=interactive", sheets_gid="1896195819", @@ -528,7 +528,7 @@ As with JavaScript, inlining CSS could prove detrimental for the size of your HT {{ figure_markup( image="style-usage.png", - caption="Style usage", + caption="Style usage.", description="A bar chart showing that on both desktop and mobile, 25% of CSS is inline and the other 75% comes from external stylesheets", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1184478802&format=interactive", sheets_gid="362809205", @@ -543,7 +543,7 @@ Implementing a CDN can help make your website more sustainable. It helps get you {{ figure_markup( image="cdn-usage.png", - caption="Cdn usage on the web", + caption="Cdn usage on the web.", description="A column chart showing that 69.7% of the pages analyzed do not use any CDN on desktop and 71.2% on mobile, 16.9% of them use Cloudflare on desktop and 15.1% on mobile, 5.2% of them use Google on desktop and 6.5% on mobile, 2.8% use Fastly on desktop and 2.6% on mobile, 2.2% use Amazon Cloudfront on desktop and 1.8% on mobile, 1.1% use Akamai on desktop and 0.8% on mobile, 0.4% use Automattic on desktop and 0.7% on mobile, 0.5% use Sucuri Firewall on desktop and 0.3% on mobile, 0.4% use Sucuri Firewall on desktop and 0.3% on mobile. Netlify and Vercel are both used on 0.2% of the page tested on mobile and desktop. Lastly, we see CDN, Highwinds, Microsoft Azure and OVH CDN being used on 0.1% of the pages, both on desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=508019478&format=interactive", sheets_gid="1415782903", @@ -560,7 +560,7 @@ Despite these obvious benefits, more than 70% of websites still don't use a CDN. {{ figure_markup( image="compression-used-on-text-resources.png", - caption="Compression used on text resources", + caption="Compression used on text resources.", description="A bar chart showing that on desktop 28% of text resources are compressed using Brotli format, 47% of them where compressed in Gzip and 25% are not compressed. On mobile, 29% of text resources are compressed using Brotli format, 46% of them where compressed in Gzip and 25% are not compressed at all.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=2065385728&format=interactive", sheets_gid="218418435", @@ -575,7 +575,7 @@ However, a quarter of websites still don't implement text compression. Gzip is u {{ figure_markup( image="cache-control-header-usage.png", - caption="Cache control header usage", + caption="Cache control header usage.", description="A bar chart showing that on desktop 23% of websites use Cache Control Only, 1% of them use Expiries only and 51% of them use both. 25% of the websites do not use any caching on desktop. On mobile 22% of websites use Cache Control Only, 1% of them use Expiries only and 51% of them use both. 26% of the websites do not use any caching on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1354451270&format=interactive", sheets_gid="326683091", @@ -619,7 +619,7 @@ The charts below show the median page weight of the top five most popular eComme {{ figure_markup( image="median-kilobytes-by-ecommerce.png", - caption="Median kilobytes by ecommerce", + caption="Median kilobytes by ecommerce.", description="A bar chart showing that the median weight for WooCommerce pages is 3,048 KB on desktop and 2,827 KB on mobile. For Shopify it's 2,428 KB on desktop and 2,080 KB on mobile. For Squerspace Commerce it's 3,462 KB on desktop and 3,577 KB on mobile. For PrestaShop it's 2,900 KB on desktop and 2,528 KB on mobile. For Magento it's 3,317 KB on desktop and 3,093 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=574238152&format=interactive", sheets_gid="1434449385", @@ -628,7 +628,7 @@ The charts below show the median page weight of the top five most popular eComme {{ figure_markup( image="median-kilobytes-by-cms.png", - caption="Median kilobytes by CMS", + caption="Median kilobytes by CMS.", description="A bar chart showing that the median weight for Wordpress pages is 2,559 KB on desktop and 2,314 KB on mobile. For Drupal it's 2,351 KB on desktop and 2,146 KB on mobile. For Joomla it's 2,799 KB on desktop and 2,495 KB on mobile. For Wix it's 3,172 KB on desktop and 2,158 KB on mobile. For Squarespace it's 3,462 KB on desktop and 3,577 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1499422639&format=interactive", sheets_gid="1561070567", @@ -637,7 +637,7 @@ The charts below show the median page weight of the top five most popular eComme {{ figure_markup( image="static-site-generator-median.png", - caption="Static site generators median KB", + caption="Static site generators median KB.", description="A bar chart showing that the median weight for Next.js pages is 2,387 KB on desktop and 2,064 KB on mobile. For Nuxt.js it's 2,877 KB on desktop and 2,210 KB on mobile. For Gatsby it's 2,049 KB on desktop and 1,731 KB on mobile. For Hugo it's 870 KB on desktop and 1,088 KB on mobile. For Jekyll it's 662 KB on desktop and 781 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1545025671&format=interactive", sheets_gid="613315308", @@ -754,12 +754,12 @@ Another area of interest when looking across the three segments is that some sho </tr> </tbody> </table> -<figcaption>{{ figure_link(caption="Median kilobytes by CMS, device, and resource type", sheets_gid="1561070567", sql_file="cms_bytes_per_type.sql") }}</figcaption> +<figcaption>{{ figure_link(caption="Median kilobytes by CMS, device, and resource type.", sheets_gid="1561070567", sql_file="cms_bytes_per_type.sql") }}</figcaption> </figure> {{ figure_markup( image="median-kilobytes-by-cms-and-resource-type-desktop.png", - caption="Median kilobytes by cms and resource type (desktop)", + caption="Median kilobytes by cms and resource type (desktop).", description="", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=159460424&format=interactive", sheets_gid="1561070567", @@ -768,7 +768,7 @@ Another area of interest when looking across the three segments is that some sho {{ figure_markup( image="median-kilobytes-by-cms-and-resource-type-mobile.png", - caption="Median kilobytes by cms and resource type (mobile)", + caption="Median kilobytes by cms and resource type (mobile).", description="", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvn7rDUZ96mbcJGd-R-gGdofTptGuReAxtTp-jYGUPpXaDO11ef2LjXz_aj-bk7wIA3gvFbEX_El-e/pubchart?oid=1726838193&format=interactive", sheets_gid="1561070567", diff --git a/src/content/en/2022/third-parties.md b/src/content/en/2022/third-parties.md index 7c3e1238bf9..71b45dd0e48 100644 --- a/src/content/en/2022/third-parties.md +++ b/src/content/en/2022/third-parties.md @@ -77,7 +77,7 @@ Learn more about our [Methodology](./methodology). ## Prevalence {{ figure_markup( - caption="Percent of mobile pages that use at least one third-party", + caption="Percent of mobile pages that use at least one third-party.", content="94%", classes="big-number", sheets_gid="1355951746", @@ -114,7 +114,7 @@ When looking at the distribution of third parties by category and by rank, it be {{ figure_markup( image="top-third-parties-by-number-of-pages.png", - caption="Top 10 third parties by number of pages they are used on", + caption="Top 10 third parties by number of pages they are used on.", description="Bar chart showing the usage of top 10 most popular third parties. fonts.googleapis.com is used on 63% of mobile pages, google-analytics.com on 51%, accounts.google.com on 49%, adservice.google.com on 47%, and googletagmanager.com on 46%. The rest, i.e. ajax.googleapis.com, facebook.com, cdnjs.cloudflare.com, youtube.com and maps.google.com are used on less than 30% of mobile pages. Desktop and mobile percentage is similar for all third parties.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSefmoEZjMhonz5fkMTxGIywJn-T7F8vYGAaj9wF9n5l8gApihCf3WCMZtrP3Syg-9E8RD8IKZg62U7/pubchart?oid=857401072&format=interactive", sheets_gid="756029157", @@ -125,7 +125,7 @@ When looking at the distribution of third parties by category and by rank, it be Google services: fonts, analytics, account management, advertising, and tag management, are the most popular third parties across the entire web. 63% of all pages use Google Fonts which is over 4.9 million pages out of the 7.9 million mobile pages in our dataset! {{ figure_markup( - caption="Percentage of scripts of all third-party requests", + caption="Percentage of scripts of all third-party requests.", content="34%", classes="big-number", sheets_gid="811897794", @@ -161,7 +161,7 @@ We inspected the <a hreflang="en" href="https://github.com/GoogleChrome/lighthou {{ figure_markup( image="third-parties-blocking-main-thread.png", - caption="Top 10 third parties blocking the main thread", + caption="Top 10 third parties blocking the main thread.", description="Bar chart showing the percentage of mobile pages that have main thread blocked by a third party by top 10 third parties. YouTube is blocking the main thread on 90% of mobile pages, Google Maps on 85%, Other Google APIs/SDKs on 84%, Facebook 82%, Google Dounbleclick Ads 81%, Google CDN 79%, Google Tag Manager 75%, Cloudfare CDN 71%, Google Analytics 70%, Google Fonts 63%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSefmoEZjMhonz5fkMTxGIywJn-T7F8vYGAaj9wF9n5l8gApihCf3WCMZtrP3Syg-9E8RD8IKZg62U7/pubchart?oid=1753375995&format=interactive", sheets_gid="1541263858", @@ -228,7 +228,7 @@ The next figure displays the size of potential savings by a third-party. It is i The `code.jquery.com` CDN library for jQuery is the most popular JavaScript third-party library being used on 6% of all websites on desktop (note that jQuery is used on [far more websites](./javascript#library-usage), but not all uses are served from this CDN). On average 43 KB of data per page that has unminified jQuery could be saved by using the minified version of its resources, which are available on this CDN. {{ figure_markup( - caption="Percent of desktop pages with unminified jQuery from all pages using jQuery third-party", + caption="Percent of desktop pages with unminified jQuery from all pages using jQuery third-party.", content="17%", classes="big-number", sheets_gid="438030733", @@ -242,7 +242,7 @@ This should serve as a reminder for web developers to check if the third-party s {{ figure_markup( image="average-potentially-saved-bytes-of-unminified-css.png", - caption="Percentage of average potentially saved bytes of unminified CSS by first and third party", + caption="Percentage of average potentially saved bytes of unminified CSS by first and third party.", description="Pie chart showing the distribution of the average potentially saved bytes of unminified CSS by resource origin type on mobile pages. 10.7% of unminified JavaScript is originated from third parties and 89.3% from a first party.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSefmoEZjMhonz5fkMTxGIywJn-T7F8vYGAaj9wF9n5l8gApihCf3WCMZtrP3Syg-9E8RD8IKZg62U7/pubchart?oid=417912172&format=interactive", sheets_gid="1857859997", @@ -286,7 +286,7 @@ The rate of first-party scripts compressed via brotli almost tripled, increasing {{ figure_markup( image="third-party-content-encoding-by-year.png", - caption="Percentage of third-party script requests by content-encoding type and by year", + caption="Percentage of third-party script requests by content-encoding type and by year.", description="Bar chart showing first-party content-encoding trends for the period from 2020 to 2022. In 2020 12% of content has no compression, in 2021 11% and in 2022 12%. In 2020 24% of content has brotli compression, in 2021 30% and in 2022 29%. In 2020 64% of content has gzip compression, in 2021 59% and in 2022 60%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSefmoEZjMhonz5fkMTxGIywJn-T7F8vYGAaj9wF9n5l8gApihCf3WCMZtrP3Syg-9E8RD8IKZg62U7/pubchart?oid=1920216281&format=interactive", sheets_gid="1568790776", @@ -325,7 +325,7 @@ Which resources are critical and which could be deferred might be a tricky quest Despite JavaScript's rapid involvement, the prevalence of legacy code is still significant. We are using one of the Lighthouse audits to check how many third parties are <a hreflang="en" href="https://github.com/GoogleChrome/lighthouse/blob/master/core/audits/byte-efficiency/legacy-javascript.js">serving legacy JavaScript to modern browsers</a>. {{ figure_markup( - caption="Percent of legacy JavaScript Lighthouse audit failure caused by third-party", + caption="Percent of legacy JavaScript Lighthouse audit failure caused by third-party.", content="59%", classes="big-number", sheets_gid="2078522493", @@ -337,7 +337,7 @@ In general, third parties account for 59% of Lighthouse legacy JavaScript audit {{ figure_markup( image="pages-with-third-parties-that-use-legacy-javascript.png", - caption="Percentage of websites using third parties that have legacy JavaScript", + caption="Percentage of websites using third parties that have legacy JavaScript.", description="Bar chart showing top 5 most-used third parties that serve legacy JavaScript. connect.facebook.net is used on 18.5% of mobile pages, apis.google.com on 3.3%, script.hotjar.com on 3.2%, cdn.shopify.com on 2.8% and static.xx.fbcdn.net on 2.4%. Data for desktop pages is very similar.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSefmoEZjMhonz5fkMTxGIywJn-T7F8vYGAaj9wF9n5l8gApihCf3WCMZtrP3Syg-9E8RD8IKZg62U7/pubchart?oid=2145007275&format=interactive", sheets_gid="596336022", @@ -372,7 +372,7 @@ Some modern third-party loading and execution solutions have appeared in recent The previous sections showed that the responsibility for third-party negative impact is split between first and third-party developers. However, <a hreflang="en" href="https://developer.chrome.com/blog/third-party-scripts#proposed-approach">browsers are also showing interest in optimizing the loading of third-party resources</a>. The proposals include better real user monitoring and developer tooling providing more data about the impact of third parties on their websites. {{ figure_markup( - caption="Percent of third-party requests with Timing-Allow-Origin header header", + caption="Percent of third-party requests with Timing-Allow-Origin header header.", content="25%", classes="big-number", sheets_gid="1045520136", diff --git a/src/content/en/2024/accessibility.md b/src/content/en/2024/accessibility.md index 02888aeb268..b469bff9558 100644 --- a/src/content/en/2024/accessibility.md +++ b/src/content/en/2024/accessibility.md @@ -22,7 +22,7 @@ doi: 10.5281/zenodo.14063775 ## Introduction -The web is continuing to change. Voice assistants like Siri, Alexa, and Cortana often provide responses by reading from web pages using screen reader technology. Similar methods have been around since the <a hreflang="en" href="https://www.theverge.com/23203911/screen-readers-history-blind-henter-curran-teh-nvda">early days of personal computing</a>. Captions (sometimes referred to as subtitles) were created for people who are hard of hearing, but are increasingly <a hreflang="en" href="https://en.wikipedia.org/wiki/Subtitles#Use_by_hearing_people_for_convenience">used for convenience</a> by everyone, and the vibration mode of the smartphone is now a standard feature. Other groups that enjoy using captions include individuals with ADHD, who use them to maintain focus, non-native speakers, who rely on them to enhance language comprehension, and people in noisy environments, where spoken content might be easily missed. +The web is continuing to change. Voice assistants like Siri, Alexa, and Cortana often provide responses by reading from web pages using screen reader technology. Similar methods have been around since the <a hreflang="en" href="https://www.theverge.com/23203911/screen-readers-history-blind-henter-curran-teh-nvda">early days of personal computing</a>. Captions (sometimes referred to as subtitles) were created for people who are hard of hearing, but are increasingly [used for convenience](https://wikipedia.org/wiki/Subtitles#Use_by_hearing_people_for_convenience) by everyone, and the vibration mode of the smartphone is now a standard feature. Other groups that enjoy using captions include individuals with ADHD, who use them to maintain focus, non-native speakers, who rely on them to enhance language comprehension, and people in noisy environments, where spoken content might be easily missed. Modern devices and platforms offer many options for accessibility. These help to personalize the user experience for both people with disabilities as well as the general public. But not many people open the accessibility menu to try them out. @@ -40,7 +40,7 @@ Good accessibility is beneficial to everyone, not just those with disabilities. ) }} -Governments worldwide recognize that digital accessibility is not only a moral obligation but also in many instances legally required. Accessibility is also great for commerce and democracy. For example, the European Union (EU) mandates that by June 2025, websites in a wide range of sectors must adhere to the <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a> principles (via the <a hreflang="en" href="https://en.wikipedia.org/wiki/EN_301_549">EN 301 549</a> standard). This will ultimately allow more people to buy and sell services in the EU. Other countries passed similar laws, which increase the pressure on organizations to make their virtual offerings more accessible. +Governments worldwide recognize that digital accessibility is not only a moral obligation but also in many instances legally required. Accessibility is also great for commerce and democracy. For example, the European Union (EU) mandates that by June 2025, websites in a wide range of sectors must adhere to the <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a> principles (via the [EN 301 549](https://wikipedia.org/wiki/EN_301_549) standard). This will ultimately allow more people to buy and sell services in the EU. Other countries passed similar laws, which increase the pressure on organizations to make their virtual offerings more accessible. Standards referenced in legislation like EN 301 549 and <a hreflang="en" href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> are based on the Web Content Accessibility Guidelines, and the automated accessibility tests used in this report can only test against some parts of the guidelines. Our tests leverage the open source tool, <a href="https://developer.chrome.com/docs/lighthouse/accessibility/scoring">Google Lighthouse</a>, which in turn uses <a hreflang="en" href="https://github.com/dequelabs/axe-core">Deque's open source axe-core</a>. @@ -48,7 +48,7 @@ There is a lot of updated information on our [report from previous years](../202 Despite ongoing challenges, there has been noticeable improvement in web accessibility. The median score for Lighthouse Accessibility audits rose to 84% over the past two years. In WCAG 2.2, the 4.1.1 Success criteria was removed. <a hreflang="en" href="https://www.deque.com/blog/wcag-2-2-removes-4-1-1-parsing-and-how-axe-core-is-impacted/?_gl=1*1yzu5tn*_up*MQ..*_ga*MTY0NDE2MjY4LjE3MjY3NTI0NTg.*_ga_C9H6VN9QY1*MTcyNjc1MjQ1Ny4xLjAuMTcyNjc1MjQ1Ny4wLjAuMA..">Deque therefore removed <code>duplicate-id</code> and <code>duplicate-id-active</code> audits from axe</a>, and so this was no longer included in our scan. These depreciated axe rules impacted millions of sites surveyed in our 2022 report. There were also <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/">new Success Criteria added in 2.2</a> added with corresponding tests being <a hreflang="en" href="https://www.deque.com/blog/axe-core-4-5-first-wcag-2-2-support-and-more/">added to axe-core</a>. -Accessibility scores are an important tool, but people familiar with <a hreflang="en" href="https://en.wikipedia.org/wiki/Goodhart%27s_law">Goodhart's Law</a> will know the danger of a measure becoming a target. We must also acknowledge that automated tests <a hreflang="en" href="https://www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/#automate-it">can only address a portion</a> of the WCAG Success Criteria, and that <a hreflang="en" href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score">a perfect score does not guarantee an accessible site</a>. +Accessibility scores are an important tool, but people familiar with [Goodhart's Law](https://wikipedia.org/wiki/Goodhart%27s_law) will know the danger of a measure becoming a target. We must also acknowledge that automated tests <a hreflang="en" href="https://www.smashingmagazine.com/2022/11/automated-test-results-improve-accessibility/#automate-it">can only address a portion</a> of the WCAG Success Criteria, and that <a hreflang="en" href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score">a perfect score does not guarantee an accessible site</a>. {{ figure_markup( image="lighthouse-audit-median-score-yoy.png", @@ -80,7 +80,7 @@ Throughout this chapter, we have included actionable links and solutions that re ## Ease of Reading -Readability of information and content on the web is crucial. There are different factors in a website that contribute to the content's readability. Taking these aspects into account ensures that everyone on the internet can easily consume the content. This report covers those things which can be measured, and although plain language is critical to readability, it is not easy to measure. There are fairly straightforward mathematical readability scores, like <a hreflang="en" href="https://en.wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests">Flesch–Kincaid</a>. Some people use it to <a hreflang="en" href="https://en.wikipedia.org/wiki/Readability">determine readability</a> in English, but the web is global. Language is difficult, and there is no agreed-to standard for automated plain language testing that can be applied even across the most popular languages. +Readability of information and content on the web is crucial. There are different factors in a website that contribute to the content's readability. Taking these aspects into account ensures that everyone on the internet can easily consume the content. This report covers those things which can be measured, and although plain language is critical to readability, it is not easy to measure. There are fairly straightforward mathematical readability scores, like [Flesch–Kincaid](https://wikipedia.org/wiki/Flesch%E2%80%93Kincaid_readability_tests). Some people use it to [determine readability](https://wikipedia.org/wiki/Readability) in English, but the web is global. Language is difficult, and there is no agreed-to standard for automated plain language testing that can be applied even across the most popular languages. ### Color Contrast @@ -411,7 +411,7 @@ Forms are essential for user interactions, such as logging in or making purchase ### `<label>` element -The `<label>` element is the preferred way for <a hreflang="en" href="https://developer.mozilla.org/docs/Learn/Forms/Basic_native_form_controls">linking input fields with their accessible names</a>. Using the for attribute to match the id of an input ensures proper programmatic association, improving form usability. Furthermore, when the label element is used properly it allows users to click or tap on the label to focus the form field. +The `<label>` element is the preferred way for [linking input fields with their accessible names](https://developer.mozilla.org/docs/Learn/Forms/Basic_native_form_controls). Using the for attribute to match the id of an input ensures proper programmatic association, improving form usability. Furthermore, when the label element is used properly it allows users to click or tap on the label to focus the form field. For example: @@ -752,7 +752,7 @@ ARIA live regions enable screen readers to announce changes in the DOM. We found </figcaption> </figure> -For more details on live region variants and their usage, check the <a hreflang="en" href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">MDN live region documentation</a> or explore this <a hreflang="en" href="https://dequeuniversity.com/library/aria/liveregion-playground">live demo by Deque</a>. +For more details on live region variants and their usage, check the [MDN live region documentation](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) or explore this <a hreflang="en" href="https://dequeuniversity.com/library/aria/liveregion-playground">live demo by Deque</a>. ## User Personalization Widgets and Overlay Remediation @@ -762,7 +762,7 @@ Users are increasingly used to seeing accessibility widgets on websites. These a - **Automated overlay remediation**: a generic technology that automatically scans for and attempts to remediate many common WCAG issues which affect the user interface, with complex algorithms and/or Artificial Intelligence. - **Custom overlay remediation**: site specific code written by expert developer(s) to address specific conformance needs, and verified by accessibility experts in context, to avoid conflict with assistive technology. -Browsers have great built-in tools for personalization, but many users do not know about them. Some sites add **personalization widgets** that often provide a range of accessibility features to make customization easier. Often this includes font size, spacing, and contrast, which is <a hreflang="en" href="https://mcmw.abilitynet.org.uk/">included in the browser</a>. This may also include tools like <a hreflang="en" href="https://en.wikipedia.org/wiki/Speech_synthesis">text to speech</a>, which is <a hreflang="en" href="https://www.microsoft.com/en-us/edge/features/read-aloud?form=MA13FJ">included in Edge</a>. This can be useful for a range of users, but especially for those that do not have their own assistive technology available in that environment. These widgets can be helpful for users who are not actively using assistive technology or already maximizing their browser's built-in accessibility features. +Browsers have great built-in tools for personalization, but many users do not know about them. Some sites add **personalization widgets** that often provide a range of accessibility features to make customization easier. Often this includes font size, spacing, and contrast, which is <a hreflang="en" href="https://mcmw.abilitynet.org.uk/">included in the browser</a>. This may also include tools like [text to speech](https://wikipedia.org/wiki/Speech_synthesis), which is <a hreflang="en" href="https://www.microsoft.com/en-us/edge/features/read-aloud?form=MA13FJ">included in Edge</a>. This can be useful for a range of users, but especially for those that do not have their own assistive technology available in that environment. These widgets can be helpful for users who are not actively using assistive technology or already maximizing their browser's built-in accessibility features. If used, it is important that these tools do not interfere with the user experience (UX) including that of assistive technology users. For that reason, the European Disability Forum (EDF) published a report clearly stating that <a hreflang="en" href="https://www.edf-feph.org/accessibility-overlays-dont-guarantee-compliance-with-european-legislation">Accessibility overlays don't guarantee compliance with European legislation</a>: @@ -1099,7 +1099,7 @@ The differences show that it is possible for CMS to make an impact on accessibil {{ figure_markup( image="javascript-frontend-ui.png", - caption="Most Accessible JavaScript Frontend UI Frameworks", + caption="Most Accessible JavaScript Frontend UI Frameworks.", description="A bar cart with ranked with Stimulus (91%), Remix (89%), Owik (89%), Astro (89%), OpenUI5 (89%), Next.js (87%), React (87%), AlpineJS (86%), Htmx (85%), Svelte (85%), Ember.js (85%).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ32BLKultx6YJbcQP5DB6a4NTnf4h9RCC3QXte5oS-Onx-9cFqiPQ23dWgWgffj2QA1Q60zhrxJVYb/pubchart?oid=1864888468&format=interactive", sheets_gid="1029816121", @@ -1111,7 +1111,7 @@ Stimulus, Remix and Qwik are several percent more accessible on average than Rea {{ figure_markup( image="javascript-meta-frameworks.png", - caption="Most Accessible JavaScript Meta-frameworks", + caption="Most Accessible JavaScript Meta-frameworks.", description="A bar cart with meta-frameworks are in the following order RedwoodJS (92%), Remix (89%), Astro (89%), SolidStart(88%), Gatsby (88%), Next.js (87%), Nuxt.js (84%), AdonisJS (82%), Quasar (82%), Meteor (73%).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQ32BLKultx6YJbcQP5DB6a4NTnf4h9RCC3QXte5oS-Onx-9cFqiPQ23dWgWgffj2QA1Q60zhrxJVYb/pubchart?oid=506578618&format=interactive", sheets_gid="1029816121", diff --git a/src/content/en/2024/cdn.md b/src/content/en/2024/cdn.md index 7cbd4a2abfc..64aa8643375 100644 --- a/src/content/en/2024/cdn.md +++ b/src/content/en/2024/cdn.md @@ -98,7 +98,7 @@ CDNs can provide better performance for delivering non-static content as well as {{ figure_markup( image="cdn-usage-hosted-comparison.png", - caption="Trends for content served from CDN for mobile", + caption="Trends for content served from CDN for mobile.", description="This chart shows the trends for content served from CDN for last few years. The general trend is that the CDN usage is increasing. For the contents served from subdomains we see bigger increase.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRaKSyCfdyk5Qva05DCIxB4NPUI6VZASRpDfEIV9QsihS0nuKSEzWGh569LoaOnTW5NgHKTufv8ydlL/pubchart?oid=776498107&format=interactive", sheets_gid="551654600", @@ -235,7 +235,7 @@ Within the web ecosystem we observed several commonly used compression algorithm * Brotli * Zstandard (Zstd) -While media files such as JPEG images are already compressed, textual assets such as HTML, stylesheets, javascript, and manifest files can be compressed to optimize performance. Created in 1992, [Gzip](https://en.wikipedia.org/wiki/Gzip) is the longest standing compression widely used, however as we'll see in this chapter [Brotli](https://en.wikipedia.org/wiki/Brotli) has become the de facto algorithm for compressing textual data over the web ecosystem. In 2024, we also see the emergence of Zstandard which was developed by Facebook. Each of these algorithms has its strengths and use cases, and their adoption rates vary across the web. +While media files such as JPEG images are already compressed, textual assets such as HTML, stylesheets, javascript, and manifest files can be compressed to optimize performance. Created in 1992, [Gzip](https://wikipedia.org/wiki/Gzip) is the longest standing compression widely used, however as we'll see in this chapter [Brotli](https://wikipedia.org/wiki/Brotli) has become the de facto algorithm for compressing textual data over the web ecosystem. In 2024, we also see the emergence of Zstandard which was developed by Facebook. Each of these algorithms has its strengths and use cases, and their adoption rates vary across the web. Below is the analysis of compression types used by CDNs and origin servers in the Web Almanac 2024 reveals trends in how web content is optimized for delivery. @@ -325,7 +325,7 @@ For desktop users, CDN performance is notably faster than Origin servers across {{ figure_markup( image="tls-negotiation-desktop.png", - caption="HTML TLS negotiation - CDN vs origin (desktop)", + caption="HTML TLS negotiation - CDN vs origin (desktop).", description="This bar chart provides insight into TLS connection time (in milliseconds) across 10th, 25th, 50th, 75th and 90th percentile for CDN and origin. As it can be seen from the chart the TLS negotiation time is generally faster for CDNs.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRaKSyCfdyk5Qva05DCIxB4NPUI6VZASRpDfEIV9QsihS0nuKSEzWGh569LoaOnTW5NgHKTufv8ydlL/pubchart?oid=1820997303&format=interactive", sheets_gid="846467421", @@ -337,7 +337,7 @@ Mobile devices show a similar pattern, with CDN performing better than Origin se {{ figure_markup( image="tls-negotiation-mobile.png", - caption="HTML TLS negotiation - CDN vs origin (mobile)", + caption="HTML TLS negotiation - CDN vs origin (mobile).", description="This bar chart provides insight into TLS connection time (in milliseconds) across 10th, 25th, 50th, 75th and 90th percentile for CDN and origin. As it can be seen from the chart the TLS negotiation time is generally faster for CDNs.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRaKSyCfdyk5Qva05DCIxB4NPUI6VZASRpDfEIV9QsihS0nuKSEzWGh569LoaOnTW5NgHKTufv8ydlL/pubchart?oid=899797304&format=interactive", sheets_gid="846467421", diff --git a/src/content/en/2024/cms.md b/src/content/en/2024/cms.md index 2758b302cc0..ea35c410653 100644 --- a/src/content/en/2024/cms.md +++ b/src/content/en/2024/cms.md @@ -673,7 +673,7 @@ Furthermore, since they first kicked off the project in November 2021, WordPress {{ figure_markup( image="wordpress-cwv-pass-trend.png", - caption="Trend of WordPress Core Web Vitals pass rates", + caption="Trend of WordPress Core Web Vitals pass rates.", description="Line graph showing the increase of WordPress origins passing Core Web Vitals from less than 15% in January 2020 and increasing fairly steadily up to 41% in July 2024.", width=1752, height=888 diff --git a/src/content/en/2024/cookies.md b/src/content/en/2024/cookies.md index 0fc6906e1eb..70d962f729c 100644 --- a/src/content/en/2024/cookies.md +++ b/src/content/en/2024/cookies.md @@ -240,7 +240,7 @@ For first-party cookies, 23% on desktop and 22% on mobile have the `Secure` attr #### `SameSite` -The <a hreflang="en" href="https://developer.mozilla.org/docs/Web/HTTP/Cookies#controlling_third-party_cookies_with_samesite">`SameSite`</a> cookie attribute allows sites to specify when cookies are included with cross-site requests: +The [`SameSite`](https://developer.mozilla.org/docs/Web/HTTP/Cookies#controlling_third-party_cookies_with_samesite) cookie attribute allows sites to specify when cookies are included with cross-site requests: - `SameSite=Strict`: a cookie is only sent in response to a request from the same site as the cookie's origin. - `SameSite=Lax`: same as `SameSite=Strict` except that the browser also sends the cookie on navigation to the cookie's origin site. This is the default value of `SameSite`. - `SameSite=None`: cookies are sent on same-site or cross-site requests. diff --git a/src/content/en/2024/fonts.md b/src/content/en/2024/fonts.md index 55416114ddf..92eef1dabbb 100644 --- a/src/content/en/2024/fonts.md +++ b/src/content/en/2024/fonts.md @@ -127,7 +127,7 @@ Because a website can pull fonts from multiple sources, the popularity of differ </table> <figcaption> {{ figure_link( - caption="The top 5 most popular web font hosting combinations", + caption="The top 5 most popular web font hosting combinations.", sheets_gid="1014103088", sql_file="performance/fonts_services.sql", ) }} diff --git a/src/content/en/2024/jamstack.md b/src/content/en/2024/jamstack.md index c3a75f29adf..846e73b09ab 100644 --- a/src/content/en/2024/jamstack.md +++ b/src/content/en/2024/jamstack.md @@ -432,7 +432,7 @@ The total transfer of JavaScript offers one of the most interesting insights wit {{ figure_markup( image="javascript-frameworks.png", - caption="JavaScript Frameworks used by Prerendered and Hybrid sites", + caption="JavaScript Frameworks used by Prerendered and Hybrid sites.", description="Bar chart showing the most common JavaScript frameworks used by Prerendered and Hybrid sites in 2024.React is the most popular with 23% of prerendered sites and 39% of Hybrid, Vue.js comes in next with 8% of Prerendered and 13% of Hybrid.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=1961429073&format=interactive", sheets_gid="1131487846", @@ -444,7 +444,7 @@ When we break down the JavaScript frameworks used by Prerendered and Hybrid webs {{ figure_markup( image="transfer-excluding-css-js.png", - caption="Transfer size excluding CSS and JavaScript by year", + caption="Transfer size excluding CSS and JavaScript by year.", description="Column chart showing the median size of Non JavaScript and CSS transfer size per year for each category - Prerendered, Hybrid, and Dynamic. In 2024, Prerendered sites have a median of 1,071 KB, Hybrid sites have a median of 1,368 KB, and Dynamic sites have a median of 1,783 KB.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=919021609&format=interactive", sheets_gid="1131487846", @@ -456,7 +456,7 @@ If we remove CSS and JavaScript from the total transfer size, we're left with HT {{ figure_markup( image="astro-hugo-next-transfer-size.png", - caption="Astro vs Hugo vs Next.js: Transfer size by year", + caption="Astro vs Hugo vs Next.js: Transfer size by year.", description="Column chart showing the median total transfer size of Astro, Hugo, and Next.js sites in the prerendered category per year. In 2024, Astro sites have a median of 889 KB, Hugo sites have a median of 1,174 KB, and Next.js have a median of 1,659 KB.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=1751742689&format=interactive", sheets_gid="1131487846", @@ -474,7 +474,7 @@ Next.js shows a sizable increase in page weight. Next.js ships with its bundled {{ figure_markup( image="astro-hugo-next-js-size.png", - caption="Astro vs Hugo vs Next.js: JavaScript size by year", + caption="Astro vs Hugo vs Next.js: JavaScript size by year.", description="Column chart showing the median JavaScript transfer size of Astro, Hugo, and Next.js sites in the prerendered category per year. In 2024, Astro sites have a median of 164 KB, Hugo sites have a median of 210 KB, and Next.js have a median of 583 KB.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=823335659&format=interactive", sheets_gid="1131487846", @@ -486,7 +486,7 @@ Breaking this down to purely the JavaScript shipped, we can see how heavy the Ja {{ figure_markup( image="core-web-vitals.png", - caption="Sites with Good Core Web Vitals by year", + caption="Sites with Good Core Web Vitals by year.", description="Column chart showing the percentage of sites in each category that have a good Core Web Vitals score for each year. In 2024, 41% of Prerendered sites, 31% of Hybrid, and 33% of Dynamic sites have a good Core Web Vitals score.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=275245520&format=interactive", sheets_gid="1131487846", @@ -508,7 +508,7 @@ So, how are these architectures being adopted across the web? {{ figure_markup( image="global-adoption.png", - caption="Global Growth of Prerendered and Hybrid sites", + caption="Global Growth of Prerendered and Hybrid sites.", description="Column chart showing the percentage of total sites that a prerendered and hybrid by year. In 2024, .5% of sites are Prerendered and 5% are Hybrid", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=1749178863&format=interactive", sheets_gid="1131487846", @@ -522,7 +522,7 @@ We see more growth if we zoom into the sites with the most traffic: {{ figure_markup( image="prerendered-high-traffic-adoption.png", - caption="Prerendered Adoption Among High-traffic Websites", + caption="Prerendered Adoption Among High-traffic Websites.", description="Column chart showing the percentage of the most high traffic websites that are prerendered by year. In 2024, .8% of the most popular 1k and 10k sites were prerendered, along with .6% of the top 100k sites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=959672300&format=interactive", sheets_gid="1131487846", @@ -534,7 +534,7 @@ There's been significant growth in Prerendered adoption among the top 1k and 10k {{ figure_markup( image="hybrid-high-traffic-adoption.png", - caption="Hybrid Adoption Among High-traffic Websites", + caption="Hybrid Adoption Among High-traffic Websites.", description="Column chart showing the percentage of the most high traffic websites that are hybrid by year. In 2024, 11.7% of the most popular 1k sites were Hybrid, 12.7% of the top 10k, 6.1% of the top 100k, and 4.4% of the top 1M.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTzPcqcOjo0RTaHjgSQCXZYJRyquXzzd6qOsD6PysgZZdGXlR8pP5i2Reoa_WJwJLjFHniXA2DWwDq1/pubchart?oid=214828640&format=interactive", sheets_gid="1131487846", diff --git a/src/content/en/2024/markup.md b/src/content/en/2024/markup.md index 64a7cb27bd6..d9424bf5ffb 100644 --- a/src/content/en/2024/markup.md +++ b/src/content/en/2024/markup.md @@ -109,7 +109,7 @@ A page's document size is the amount of HTML bytes transferred over the network, {{ figure_markup( image="document_trends.png", - caption="Median transfer size of HTML document", + caption="Median transfer size of HTML document.", description="Bar chart showing the median transfer size of HTML document. In 2022, the median was 31 kB on desktop and 29 on mobile. In 2023, 30 kB on desktop and 29 kB on mobile. And in 2024, 33 kB on desktop and 32 kB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1823253654&format=interactive", sheets_gid="1730786160", @@ -123,7 +123,7 @@ Although the median looks like something reasonable, let's take a closer look at {{ figure_markup( image="document_size_distribution.png", - caption="Distribution of the transfer size of HTML document", + caption="Distribution of the transfer size of HTML document.", description="Bar chart showing the 10, 25, 50, 75, and 90th percentile of transfer size. The values for mobile are 6, 13, 32, 71, 147 kB respectively. The values for desktop are 6, 14, 33, 73, 148 kB respectively.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1780108383&format=interactive", sheets_gid="619373506", @@ -139,7 +139,7 @@ In the context of analyzing HTML document files, compression continues to play a {{ figure_markup( image="content_encoding.png", - caption="HTML document content-encoding", + caption="HTML document content-encoding.", description="Stacked bar chart, showing 36% of desktop and 37% of mobile HTML documents are being compressed with Brotli, 53% of desktop and 52% of mobile documents are being compressed with Gzip, and 11% of desktop and mobile HTML documents are not being compressed at all.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1114599297&format=interactive", sheets_gid="1573442294", @@ -157,7 +157,7 @@ Despite these improvements, a small percentage of HTML files (10.5% on mobile) a {{ figure_markup( content="5,625", - caption="Unique lang attribute codes on mobile", + caption="Unique lang attribute codes on mobile.", classes="big-number", sheets_gid="134927112", sql_file="distinct_lang.sql", @@ -169,7 +169,7 @@ The HTML `lang` attribute plays an important role in helping screen readers and {{ figure_markup( image="popular_lang.png", - caption="Most popular HTML language codes, not including region", + caption="Most popular HTML language codes, not including region.", description="Bar chart showing the language usage, for the top ten languages in our data set. 40% use English, 13% are not set, with Spanish, Japanese, German, French, Portuguese, Russian, Italian and Dutch having various minor percentages of usage, from 6% to 2%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1428231971&format=interactive", sheets_gid="546119077", @@ -185,7 +185,7 @@ If we aggregate the percentages of non-English and non-"not set" `lang` values, {{ figure_markup( image="popular_regional_lang.png", - caption="Most popular HTML language codes, including region", + caption="Most popular HTML language codes, including region.", description="Bar chart showing the language usage, including region, for the top ten languages in our data set. 22% use English, 15% American English, with Japanese, Spanish, Brazilian Portuguese, British English, German German, Russian and German having various minor percentages of usage, from 5% to 2%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=672282298&format=interactive", sheets_gid="546119077", @@ -208,7 +208,7 @@ HTML comments are snippets of text that developers include within their code to {{ figure_markup( content="86%", - caption="Mobile pages with at least one comment", + caption="Mobile pages with at least one comment.", classes="big-number", sheets_gid="1268900609", sql_file="comments.sql", @@ -234,7 +234,7 @@ For both desktop and mobile pages, the data shows that the 10th percentile has 2 {{ figure_markup( image="distinct_elements_per_page.png", - caption="Distribution of the number of distinct types of elements per page", + caption="Distribution of the number of distinct types of elements per page.", description="Bar chart showing the 10, 25, 50, 75, and 90th percentile of distinct elements per page. The values for mobile are 22, 27, 32, 38 and 43 respectively. The values for desktop are 22, 27, 33, 38 and 44 respectively.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1344861022&format=interactive", sheets_gid="1098213395", @@ -246,7 +246,7 @@ However, there are some differences when checking the distribution of elements p {{ figure_markup( image="elements_per_page.png", - caption="Distribution of the number of elements per page", + caption="Distribution of the number of elements per page.", description="Bar chart showing the 10, 25, 50, 75, and 90th percentile of total elements per page. The values for mobile are 180, 342, 594, 1,010 and 1,716 respectively.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1742977516&format=interactive", sheets_gid="1098213395", @@ -345,7 +345,7 @@ The list remains largely consistent with previous years, but some shifts have oc {{ figure_markup( content="29%", - caption="Percentage of elements which are div elements", + caption="Percentage of elements which are div elements.", classes="big-number", sheets_gid="248650818", sql_file="element_frequency.sql", @@ -355,7 +355,7 @@ The list remains largely consistent with previous years, but some shifts have oc {{ figure_markup( image="top_elements.png", - caption="Frequency of top HTML elements", + caption="Frequency of top HTML elements.", description="Bar chart showing the frquency of top 15 HTML elements. `div` is the most used (28.7% on mobile), followed by `a` (12.6%), `span` (11.2%), `li` (7.7%) and `script` (3.9%). The rest of the top 15 elements are `img`, `p`, `link`, `path`, `meta`, `i`, `option`, `ul`, `br`, and `td`, with values ranging from 3.3% to 1.3%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1080941706&format=interactive", sheets_gid="248650818", @@ -375,7 +375,7 @@ The adoption of top HTML elements across both desktop and mobile platforms remai {{ figure_markup( image="popularity_of_top_elements.png", - caption="Popularity of top HTML elements", + caption="Popularity of top HTML elements.", description="Bar chart showing that `html` and `head` tags are used on 99.8% of mobile pages, `body` on 99.7%, `meta` on 99.2%, and `title` on 99.1%. `div`, `link`, `a`, `script`, `img`, `span`, `p`, `li`, `ul`, and `style` are the rest of the top 15 HTML elements, with values ranging from 98.8% to 86.2%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1748599287&format=interactive", sheets_gid="1606033584", @@ -395,7 +395,7 @@ Custom elements, easily recognized by their hyphenated names, have once again ma {{ figure_markup( image="custom_elements_adoption.png", - caption="Custom elements usage by year", + caption="Custom elements usage by year.", description="Bar chart showing the evolution of the custom element usage. In 2022, 2.9% of desktop sites and 3.6% of mobile sites used custom elements. In 2023, 5.1% of desktop sites and 5.4% of mobile sites used custom elements. And in 2024, 7.7% of desktop sites and 7.9% of mobile sites use custom elements.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1066623750&format=interactive", sheets_gid="1091925040", @@ -409,7 +409,7 @@ However, custom elements typically need extra JavaScript to enable their functio {{ figure_markup( image="custom_elements_js_bytes_distribution.png", - caption="Distribution of kB of JS when using custom elements", + caption="Distribution of kB of JS when using custom elements.", description="Bar chart showing the distribution of kilobytes of JavaScript (JS) used on mobile pages that incorporate custom elements. The chart compares JavaScript usage at different percentiles (10th, 25th, 50th, 75th, and 90th) between pages with custom elements (labeled as 'TRUE') and pages without custom elements ('FALSE'). 10th percentile: 80 KB (FALSE) vs. 412 KB (TRUE), 25th percentile: 229 KB (FALSE) vs. 864 KB (TRUE), 50th percentile (median): 522 KB (FALSE) vs. 1,286 KB (TRUE), 75th percentile: 1,016 KB (FALSE) vs. 1,784 KB (TRUE), 90th percentile: 1,623 KB (FALSE) vs. 2,357 KB (TRUE). Overall, pages with custom elements tend to use significantly more JavaScript across all percentiles.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1795165204&format=interactive", sheets_gid="1492660858", @@ -423,7 +423,7 @@ Let's now take a closer look at the top 10 custom elements: {{ figure_markup( image="custom_element_popularity.png", - caption="Custom element popularity", + caption="Custom element popularity.", description="Horizontal bar chart showing the percentage of pages using each element as follows: `wow-image` (2.7% on mobile), `rs-module-wrap`, `rs-module`, `rs-slides` and `rs-slide` (1.6% on mobile), `rs-sbg-wrap`, `rs-sbg`, `rs-sbg-px` and `rs-progress` (1.% on mobile), and `predictive-search`(1.4% on mobile).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=300723169&format=interactive", sheets_gid="1606033584", @@ -443,7 +443,7 @@ There are currently <a hreflang="en" href="https://html.spec.whatwg.org/multipag {{ figure_markup( image="obsolete_elements.png", - caption="Obsolete element popularity", + caption="Obsolete element popularity.", description="Bar chart showing the percentage of web pages that use specific obsolete HTML elements on desktop and mobile devices. `font` is the most used, found on 4.5% of mobile pages, followed by `center` (4.5% of mobile pages). The rest of the list includes `marquee`, `nobr`, `big`, `param`, `strike`, `frame`, `frameset`, and `noframes`, with values ranging from 0.9% to 0.1%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=496158499&format=interactive", sheets_gid="1523691472", @@ -467,7 +467,7 @@ For another year, the most used attribute by far is `class`, with 48 billion occ {{ figure_markup( image="attribute_usage.png", - caption="Frequency of top attributes", + caption="Frequency of top attributes.", description="Bar chart showing the frequency of the top 10 HTML attributes. `class` is the most used (33% on mobile), followed by `href` (8% on mobile), `id` (6% on mobile), `style` (5% on mobile) and `src` (3% on mobile). The rest of the top 10 are `type`, `rel`, `title`, `alt` and `value`, with values ranging from 3% to 1%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=975284651&format=interactive", sheets_gid="927974312", @@ -481,7 +481,7 @@ And when we look at the attributes used per page, we find the following used on {{ figure_markup( image="popularity_attribute_usage.png", - caption="Popularity of top attributes", + caption="Popularity of top attributes.", description="Bar chart showing the usage of the top 10 HTML attributes. `href` is the most used (present on 99% of mobile pages), followed by `src` (99% on mobile), `content` (99% on mobile), `name` (99% on mobile) and `class` (99% on mobile). The rest of the top 10 are `type`, `rel`, `id`, `style` and `alt`, with values ranging from 98% to 92%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1479935889&format=interactive", sheets_gid="927974312", @@ -497,7 +497,7 @@ Let's now take a closer look to a subset of attributes: the `data-*` attributes. {{ figure_markup( content="90%", - caption="Pages with at least one `data-*` attribute", + caption="Pages with at least one `data-*` attribute.", classes="big-number", sheets_gid="156537288", sql_file="data_attribute_total.sql", @@ -507,7 +507,7 @@ The overall data shows that 90% of the analyzed documents use at least one `data {{ figure_markup( image="data_attribute_popularity.png", - caption="Popularity of top data attributes", + caption="Popularity of top data attributes.", description="Bar chart showing the popularity of the top 10 HTML `data-*` attributes. `data-id` is the most used (present on 24% of mobile pages), followed by `data-load-time` (20% on mobile), `data-tagging-id` (20% on mobile), `data-src` (19% on mobile) and `data-toggle` (19% on mobile). The rest of the top 10 are `data-type`, `data-target`, `data-name`, `data-href` and `data-testid`, with values ranging from 17% to 10%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1117739253&format=interactive", sheets_gid="1682300906", @@ -523,7 +523,7 @@ Another notable change is the appearance of new elements in the list: `data-load {{ figure_markup( image="data_attribute_frequency.png", - caption="Frequency of top data attributes", + caption="Frequency of top data attributes.", description="Bar chart showing the frequency of the top 10 HTML `data-*` attributes. `data-id` is the most used (5.8% of total `data-*` attributes on mobile pages), followed by `data-element_type` (4.1% on mobile), `data-testid` (2.8% on mobile), `data-src` (2.2% on mobile) and `data-widget_type` (2.1% on mobile). The rest of the top 10 are `data-value`, `data-name`, `data-settings`, `data-type` and `data-toggle`, with values ranging from 1.4% to 0.9%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1977102777&format=interactive", sheets_gid="1682300906", @@ -539,7 +539,7 @@ Social markup refers to the set of meta tags embedded within HTML documents that {{ figure_markup( image="social_meta_nodes.png", - caption="Popularity of top social meta nodes", + caption="Popularity of top social meta nodes.", description="Bar chart showing the popularity of the top 10 HTML social meta nodes. `og:title` is the most used (present on 61% of mobile pages), followed by `og:url` (58% on mobile), `og:type` (56% on mobile), `og:description` (53% on mobile) and `og:site_name` (49% on mobile). The rest of the top 10 are `og:image`, `twitter:card`, `og:locale`, `twitter:title` and `twitter:description`, with values ranging from 46% to 24%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1759203973&format=interactive", sheets_gid="1216284092", @@ -562,7 +562,7 @@ The `viewport` meta tag specifies how the content should be scaled on various de {{ figure_markup( image="meta_viewports.png", - caption="Meta viewport specifications", + caption="Meta viewport specifications.", description="Bar chart showing the popularity of the top 10 HTML meta viewport. `width=device-width,initial-scale=1` is the most used (present on 50% of mobile pages in our data set), followed by `(empty)` (5% on mobile), `width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0` (4% on mobile), `width=device-width,initial-scale=1,shrink-to-fit=no` (4% on mobile) and `width=device-width,initial-scale=1,maximum-scale=1` (4% on mobile). The rest of the top 10 are `width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no`, `width=device-width`, `width=320,user-scalable=yes`, `width=device-width,initial-scale=1,minimum-scale=1` and `width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1`, with values ranging from 4% to 2%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=8726003&format=interactive", sheets_gid="1271081388", @@ -580,7 +580,7 @@ Favicons, those small icons associated with websites, play an important role in {{ figure_markup( image="favicons.png", - caption="Popularity of favicon types", + caption="Popularity of favicon types.", description="Bar chart showing the popularity of favicon types. `png` is the most used (present on 42% of mobile pages in our data set), followed by `ico` (27% on mobile), `NO_ICON` (18% on mobile), `jpg` (7% on mobile) and `svg` (1% on mobile).", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=516732845&format=interactive", sheets_gid="1487566181", @@ -608,7 +608,7 @@ Buttons in web development have been a source of frequent debate due to their du {{ figure_markup( image="buttons.png", - caption="Popularity of button types", + caption="Popularity of button types.", description="Bar chart showing the popularity of button types. The generic `<button>` is the most used (present on 47% of mobile pages in our data set), followed by `<button type=button>` (45% on mobile), `<button type=submit>` (34% on mobile), and `<button type=reset>` (1% on mobile). Desktop is slightly higher in most cases but within a percentage point.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=2146901303&format=interactive", sheets_gid="753312353", @@ -627,7 +627,7 @@ Apart from buttons, certain `input` elements are also rendered and used as butto {{ figure_markup( image="input_buttons.png", - caption="Popularity of buttons using input types", + caption="Popularity of buttons using input types.", description="Bar chart showing the popularity of input types used as buttons. `<input type=\"submit\">` is the most used (present on 25% of mobile pages in our data set), followed by `<input type=\"button\">` (3% on mobile), and `<input type=\"image\">` (1% on mobile). Desktop is slightly higher in most cases but within a percentage point.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQTldh1hYi8-zIRgmK_v6IhpKuUOPTAhBxStogg3rt1L6isaX6v8dgODs7WiJ_udh7ZvHnvrTZLlXkW/pubchart?oid=1616034217&format=interactive", sheets_gid="1115291405", diff --git a/src/content/en/2024/performance.md b/src/content/en/2024/performance.md index 5a88d91a8de..0f43593c3b9 100644 --- a/src/content/en/2024/performance.md +++ b/src/content/en/2024/performance.md @@ -148,7 +148,7 @@ Interestingly, website performance is not the only factor that influences FCP. I {{ figure_markup( image="largest-contentful-paint-scores-2024.png", - caption="The percent of websites having good, need improvements and poor LCP, segmented by device", + caption="The percent of websites having good, need improvements and poor LCP, segmented by device.", description="Stacked bar chart showing LCP performance by device, categorized as good (under 2.5 seconds), needs improvement (2.5–4 seconds), and poor (over 4 seconds). For desktop, 72% of websites have good LCP, 20% need improvement, and 8% perform poorly. For phones, 59% of websites have good LCP, 27% need improvement, and 14% perform poorly.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRiPhLGlGUxomTx_5nC9ahQDRxZBmJXMT3Q0Z2z4Y2pPVqC9kzjsUjRk4hz-JZzaPBjVxyaf7Gtqh93/pubchart?oid=2074458485&format=interactive", sheets_gid="1535582002", @@ -232,7 +232,7 @@ One of the ways to optimize the LCP resource load delay is to ensure the resourc Overall, lazy-loading images is a helpful performance technique that should be used to postpone loading of non-critical resources until they are near the viewport. However, using lazy-loading on the LCP image will delay the browser from loading it quickly. That is why lazy-loading should not be used on LCP elements. In this section, we explore how many sites use this performance anti-pattern. {{ figure_markup( - caption="The percent of mobile pages having image-based LCP that use native or custom lazy-loading on it", + caption="The percent of mobile pages having image-based LCP that use native or custom lazy-loading on it.", content="16%", classes="big-number", sheets_gid="1048885241", @@ -264,7 +264,7 @@ The chart below illustrates the distribution of client-side generated content. I {{ figure_markup( image="good-largest-contentful-paint-client-side-generated-content.png", - caption="The percent of websites with good LCP vs percentage of client-side generated content on a page", + caption="The percent of websites with good LCP vs percentage of client-side generated content on a page.", description="Line chart showing the percentage of origins with good LCP compared to the percentage of client-side generated HTML for both desktop and mobile. For desktop, the percentage of origins with good LCP starts around 75% for pages with 0-10% client-side generated HTML and remains relatively stable, peaking slightly around 40-50% client-side HTML usage, before gradually declining to about 65% at the 90-100% range. For mobile, the percentage of good LCP starts lower, around 60% for the 0-10% range, and follows a similar trend, peaking slightly in the 30-40% range before declining more sharply to about 45% at the 90-100% client-side HTML usage.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRiPhLGlGUxomTx_5nC9ahQDRxZBmJXMT3Q0Z2z4Y2pPVqC9kzjsUjRk4hz-JZzaPBjVxyaf7Gtqh93/pubchart?oid=750231640&format=interactive", sheets_gid="829333856", @@ -294,7 +294,7 @@ This aligns with the <a hreflang="en" href="https://github.com/GoogleChrome/ligh {{ figure_markup( image="largest-contentful-paint-images-wasted-kb.png", - caption="Distribution of wasted kilobytes on LCP image", + caption="Distribution of wasted kilobytes on LCP image.", description="Bar chart showing the distribution of wasted kilobytes on LCP images for desktop and mobile across percentiles. At the 10th, 25th, and 50th percentiles, both desktop and mobile pages have 0 wasted kilobytes. At the 75th percentile, desktop pages waste 20 kilobytes, while mobile pages waste 10 kilobytes. At the 90th percentile, desktop pages waste 190 kilobytes, and mobile pages waste 128 kilobytes.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRiPhLGlGUxomTx_5nC9ahQDRxZBmJXMT3Q0Z2z4Y2pPVqC9kzjsUjRk4hz-JZzaPBjVxyaf7Gtqh93/pubchart?oid=321466279&format=interactive", sheets_gid="1984265626", @@ -308,7 +308,7 @@ You can reduce image sizes through resizing dimensions and increasing compressio {{ figure_markup( image="largest-contentful-paint-image-file-format.png", - caption="The percent of pages that use a given image file format for their LCP images", + caption="The percent of pages that use a given image file format for their LCP images.", description="Bar chart showing the distribution of LCP (Largest Contentful Paint) image formats for desktop and mobile. JPG is the most common format, used by 61% of desktop pages and a similar percentage of mobile pages. PNG is the second most common format, used by 26% of pages. WebP follows with 7%, while other formats such as MP4, SVG, GIF, and AVIF are used by less than 2% of pages. ICO, HEIC, and HEIF formats are barely used, with their percentages rounding to 0% for both desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRiPhLGlGUxomTx_5nC9ahQDRxZBmJXMT3Q0Z2z4Y2pPVqC9kzjsUjRk4hz-JZzaPBjVxyaf7Gtqh93/pubchart?oid=2086275423&format=interactive", sheets_gid="240287365", @@ -551,7 +551,7 @@ It is expected to see this decrease in the use of unload events with major brows Another common reason for websites to fall in the bfcache ineligibility category is the use of the `cache-control: no-store` directive. This cache control header instructs the browser (and any intermediate caches) not to store a copy of the resource, ensuring that the content is fetched from the server on every request. {{ figure_markup( - caption="Percentage of sites using `Cache-Control: no-store`", + caption="Percentage of sites using `Cache-Control: no-store`.", content="21%", classes="big-number", sheets_gid="389603749", @@ -575,7 +575,7 @@ One of the most common reasons for unexpected layout shifts is not preserving sp {{ figure_markup( image="unsized-images-amount.png", - caption="The number of unsized images per page", + caption="The number of unsized images per page.", description="Bar chart showing the number of unsized images per page by percentile for desktop and mobile devices. At the 10th and 25th percentiles, both desktop and mobile pages have 0 unsized images. At the 50th percentile, both desktop and mobile pages have 2 unsized images. At the 75th percentile, desktop pages have 10 unsized images, while mobile pages have 9. At the 90th percentile, desktop pages have 26 unsized images, and mobile pages have 23.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRiPhLGlGUxomTx_5nC9ahQDRxZBmJXMT3Q0Z2z4Y2pPVqC9kzjsUjRk4hz-JZzaPBjVxyaf7Gtqh93/pubchart?oid=603112996&format=interactive", sheets_gid="1674162543", diff --git a/src/content/en/2024/security.md b/src/content/en/2024/security.md index c274eb53ecc..843a6983f5a 100644 --- a/src/content/en/2024/security.md +++ b/src/content/en/2024/security.md @@ -164,7 +164,7 @@ In order to use TLS, servers must first get a certificate they can host, which i </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="The percentage of sites using a certificate issued by a specific issuer", sheets_gid="1458082974", sql_file="tls_ca_issuers_pages.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="The percentage of sites using a certificate issued by a specific issuer.", sheets_gid="1458082974", sql_file="tls_ca_issuers_pages.sql") }}</figcaption> </figure> R3 (an intermediate certificate from <a hreflang="en" href="https://letsencrypt.org/">Let's Encrypt</a>) still leads the charts, although usage dropped compared to last year. Also from Let's Encrypt are the E1, R10 and R11 intermediary certificates that are rising in percentage of websites using them. @@ -301,7 +301,7 @@ It's important to note that all cookies without a `SameSite` attribute are treat </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="`__Secure-` and `__Host-` prefixes (desktop)", sheets_gid="1849762871", sql_file="cookie_attributes.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="`__Secure-` and `__Host-` prefixes (desktop).", sheets_gid="1849762871", sql_file="cookie_attributes.sql") }}</figcaption> </figure> The adoption of cookie prefixes remains low, with less than 1% of cookies using these prefixes on both desktop and mobile platforms. This is particularly surprising given the high adoption rate of cookies with the `Secure` attribute, the only prerequisite for cookies prefixed with `__Secure-`. However, changing a cookie's name can require significant refactoring, which is presumably a reason why developers tend to avoid this. @@ -387,7 +387,7 @@ The `block-all-mixed-content` directive, which has been deprecated in favor of ` </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Most prevalent CSP headers", sheets_gid="176994530", sql_file="csp_most_common_header.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most prevalent CSP headers.", sheets_gid="176994530", sql_file="csp_most_common_header.sql") }}</figcaption> </figure> The top three directives also make up the building blocks of the most prevalent CSP definitions. The second most commonly used CSP definition includes both `block-all-mixed-content` and `upgrade-insecure-requests`. This suggests that many websites use `block-all-mixed-content` for backward compatibility, as newer browsers will ignore this directive if `upgrade-insecure-requests` is present. @@ -459,7 +459,7 @@ The top three directives also make up the building blocks of the most prevalent </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Relative usage change of CSP directives", sheets_gid="1796954328", sql_file="csp_directives_usage.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Relative usage change of CSP directives.", sheets_gid="1796954328", sql_file="csp_directives_usage.sql") }}</figcaption> </figure> All other directives shown in the table above are used for content inclusion control. Overall, usage has remained relatively stable. However, a notable change is the increased use of the `object-src` directive, which has surpassed `connect-src` and `frame-src`. Since 2022, the usage of `object-src` has risen by 15.9% for desktop and 16.8% for mobile. @@ -515,7 +515,7 @@ The `unsafe-inline` and `unsafe-eval` directives can significantly reduce the se </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Relative usage change of CSP `script-src` keywords", sheets_gid="2075772620", sql_file="csp_script_source_list_keywords.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Relative usage change of CSP `script-src` keywords.", sheets_gid="2075772620", sql_file="csp_script_source_list_keywords.sql") }}</figcaption> </figure> However, the increasing adoption of the `nonce-` and `strict-dynamic` keywords is a positive development. By using the `nonce-` keyword, a secret nonce can be defined, allowing only inline scripts with the correct nonce to execute. This approach is a secure alternative to the `unsafe-inline` directive for permitting inline scripts. When used in combination with the `strict-dynamic` keyword, nonced scripts are permitted to import additional scripts from any origin. This approach simplifies secure script loading for developers, as it allows them to trust a single nonced script, which can then securely load other necessary resources. @@ -609,7 +609,7 @@ The most common HTTPS origins included in CSP headers are used for loading fonts </tr> <tbody> </table> - <figcaption>{{ figure_link(caption="Most frequently allowed HTTP(S) hosts in CSP policies", sheets_gid="180799456", sql_file="csp_allowed_host_frequency.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most frequently allowed HTTP(S) hosts in CSP policies.", sheets_gid="180799456", sql_file="csp_allowed_host_frequency.sql") }}</figcaption> </figure> As for WSS origins, used for allowing WebSocket connections to certain origins, the following were found the most common: @@ -651,7 +651,7 @@ As for WSS origins, used for allowing WebSocket connections to certain origins, </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Most frequently allowed WS(S) hosts in CSP policies", sheets_gid="1790517281", sql_file="csp_allowed_host_frequency_wss.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most frequently allowed WS(S) hosts in CSP policies.", sheets_gid="1790517281", sql_file="csp_allowed_host_frequency_wss.sql") }}</figcaption> </figure> Two of these origins are related to customer service and ticketing (`intercom.io`, `zopim.com`), one is used for website analytics (`hotjar.com`), and two are associated with social media (`www.livejournal.com`, `quora.com`). For four out of these five websites, we found specific instructions on how to add the origin to the website's content security policy. This is considered good practice, as it discourages website administrators from using wildcards to allow third-party resources, which would reduce security by allowing broader access than necessary. @@ -736,7 +736,7 @@ The adoption of Subresource Integrity seems to be stagnating, with the median pe </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Most common hosts from which SRI-protected scripts are included", sheets_gid="1612151810", sql_file="sri_popular_hosts.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most common hosts from which SRI-protected scripts are included.", sheets_gid="1612151810", sql_file="sri_popular_hosts.sql") }}</figcaption> </figure> Most of the hosts from which resources are fetched and protected by SRI are CDNs. A notable difference from 2022's data is the absence of `cdn.shopify.com` from the top hosts list (previously 22% on desktop and 23% on mobile). This is due to Shopify having dropped SRI in favor of similar functionality provided by the `integrity` attribute of `importmap`, which they explain in a <a hreflang="en" href="https://shopify.engineering/shipping-support-for-module-script-integrity-in-chrome-safari#">blogpost</a>. @@ -802,7 +802,7 @@ In 2022, the adoption of the `Permissions-Policy` header saw a significant relat </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Most prevalent Permission Policies", sheets_gid="2018859098", sql_file="pp_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most prevalent Permission Policies.", sheets_gid="2018859098", sql_file="pp_header_prevalence.sql") }}</figcaption> </figure> Only 2.8% of desktop hosts and 2.5% of mobile hosts set the policy using the `Permissions-Policy` response header. The policy is primarily used to exclusively opt out of Google’s Federated Learning of Cohorts (FLoC); 21% of hosts that implement the `Permissions-Policy` header set the policy as `interest-cohort=()`. This usage is partly due to the controversy that FLoC sparked during its trial period. Although FLoC was ultimately replaced by the Topics API, the continued use of the `interest-cohort` directive highlights how specific concerns can shape the adoption of web policies. @@ -961,7 +961,7 @@ Another measure against clickjacking is the [`X-Frame-Options` (XFO)](https://de </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="`X-Frame-Options` header values", sheets_gid="609220671", sql_file="xfo_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="`X-Frame-Options` header values.", sheets_gid="609220671", sql_file="xfo_header_prevalence.sql") }}</figcaption> </figure> Although deprecated, 0.6% of observed `X-Frame-Options` headers on desktop and 0.7% on mobile still use the `ALLOW-FROM` directive, which functions similarly to the `frame-ancestors` directive by specifying trusted origins that can embed the page. However, since modern browsers ignore `X-Frame-Options` headers containing the `ALLOW-FROM` directive, this could create gaps in the website's clickjacking defenses. However, this practice may be intended for backward compatibility, where the deprecated header is used alongside a supported Content Security Policy that includes the `frame-ancestors` directive. @@ -1015,7 +1015,7 @@ The [Cross Origin Embedder Policy](https://developer.mozilla.org/docs/Web/HTTP/H </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Prevalence of COEP header values", sheets_gid="906872096", sql_file="coep_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Prevalence of COEP header values.", sheets_gid="906872096", sql_file="coep_header_prevalence.sql") }}</figcaption> </figure> The majority of websites that set the `Cross-Origin-Embedder-Policy` header indicate that they do not require access to the powerful features mentioned above (`unsafe-none`). This behavior is also the default if the COEP header is absent, meaning that websites will automatically operate under restricted access to cross-origin resources unless explicitly configured otherwise. @@ -1051,7 +1051,7 @@ Conversely, websites that serve resources can use the [`Cross-Origin-Resource-Po </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Prevalence of CORP header values", sheets_gid="1177421176", sql_file="corp_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Prevalence of CORP header values.", sheets_gid="1177421176", sql_file="corp_header_prevalence.sql") }}</figcaption> </figure> The CORP header is primarily used to allow access to the served resource from any origin, with the `cross-origin` value being the most commonly set. In fewer cases, the header restricts access: less than 5% of websites limit resources to the same origin, and less than 4% restrict them to the same site. @@ -1087,7 +1087,7 @@ The CORP header is primarily used to allow access to the served resource from an </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Prevalence of COOP header values", sheets_gid="300698248", sql_file="coop_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Prevalence of COOP header values.", sheets_gid="300698248", sql_file="coop_header_prevalence.sql") }}</figcaption> </figure> Nearly half of all observed COOP headers employ the strictest setting, `same-origin`. @@ -1160,7 +1160,7 @@ Adoption of the `Clear-Site-Data` header remains limited; our observations indic </tr> <tbody> </table> - <figcaption>{{ figure_link(caption="Prevalence of `Clear-Site-Data` headers", sheets_gid="910609664", sql_file="clear-site-data_value_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Prevalence of `Clear-Site-Data` headers.", sheets_gid="910609664", sql_file="clear-site-data_value_prevalence.sql") }}</figcaption> </figure> Current usage data shows that the `Clear-Site-Data header` is predominantly used to clear cache. It's important to note that the values in this header must be enclosed in quotation marks; for instance, `cache` is incorrect and should be written as `"cache"`. Interestingly, there has been significant improvement in adherence to this syntax rule: in 2022, 65% of desktop and 63% of mobile websites were found using the incorrect `cache` value. However, these numbers have now dropped to 22% and 23% for desktop and mobile, respectively. @@ -1196,7 +1196,7 @@ Some security mechanisms on the web can be configured through `meta` tags in the </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="The percentage of hosts enabling different policies using a meta tag", sheets_gid="1466205888", sql_file="meta_policies_allowed_vs_disallowed.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="The percentage of hosts enabling different policies using a meta tag.", sheets_gid="1466205888", sql_file="meta_policies_allowed_vs_disallowed.sql") }}</figcaption> </figure> Developers sometimes also try to enable other security features by using the `meta` tag, which is not allowed and will thus be ignored. Using the same example as in 2022, `4976` pages try to set the `X-Frame-Options` using a `meta` tag, which will be ignored by the browser. This is an absolute increase compared to 2022, but only because there were more than twice as many pages included in the data set. Relatively, there is a slight decrease from 0.04% to 0.03% on mobile pages and 0.05% to 0.03% on desktop pages. @@ -1267,7 +1267,7 @@ Developers sometimes also try to enable other security features by using the `me </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="The usages of features of the Web Cryptography API", sheets_gid="527224984", sql_file="web_cryptography_api.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="The usages of features of the Web Cryptography API.", sheets_gid="527224984", sql_file="web_cryptography_api.sql") }}</figcaption> </figure> In comparison to the last Almanac, the CryptoGetRandomValues continued to drop and it did so at a much higher rate in the past two years, dropping down to 53%. Despite that drop, it clearly continues to be the most adopted feature, far ahead of the other features. After CryptoGeRandomValues, the next five most used features have become more widely adopted, rising from under 0.7% to adoption rates between 1.3% and 2%. @@ -1316,7 +1316,7 @@ When using these APIs, developers must be careful to only pass already safe valu </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="The number of pages using HTML sanitization APIs", sheets_gid="351726153", sql_file="html_sanitization_usage.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="The number of pages using HTML sanitization APIs.", sheets_gid="351726153", sql_file="html_sanitization_usage.sql") }}</figcaption> </figure> These APIs are new, so low adoption is to be expected. We found only 6 pages in total using `parseHTMLUnsafe` and 2 using `setHTMLUnsafe`, which is an extremely small number relative to the number of pages visited. @@ -1412,7 +1412,7 @@ Many sites on the current web are made using large CMS systems. These may enable </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Security features in use by selected CMS systems", sheets_gid="225805401", sql_file="feature_adoption_by_technology.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Security features in use by selected CMS systems.", sheets_gid="225805401", sql_file="feature_adoption_by_technology.sql") }}</figcaption> </figure> It's clear that many major CMS's that are hosted by the providing company and where only content is created by users, such as Wix, SquareSpace, Google Sites, Medium and Substack, roll out security protections widely, showing adoption of HSTS, X-Content-Type-Options or X-XSS-Protection in the upper 99% adoption rates. Google sites continues to be the CMS that has the highest number of security features in place. @@ -1524,7 +1524,7 @@ Due to their similar naming and purpose, the COEP, CORP and COOP are sometimes d </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Prevalence of invalid COEP header values", sheets_gid="906872096", sql_file="coep_header_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Prevalence of invalid COEP header values.", sheets_gid="906872096", sql_file="coep_header_prevalence.sql") }}</figcaption> </figure> For instance, around 3% of observed COEP headers mistakenly use the unsupported value `same-origin`. When this occurs, browsers revert to the default behavior of allowing any cross-origin resource to be embedded, while restricting access to features like `SharedArrayBuffer` and unthrottled use of `Performance.now()`. This fallback does not inherently reduce security unless the site administrator intended to set `same-origin` for CORP or COOP, where it is a valid value. @@ -1629,7 +1629,7 @@ The most commonly exposed header is the `Server` header, which reveals the softw </tr> </tbody> </table> - <figcaption>{{ figure_link(caption="Most prevalent `X-Powered-By` header values with specific framework version", sheets_gid="895726728", sql_file="server_header_value_prevalence.sql") }}</figcaption> + <figcaption>{{ figure_link(caption="Most prevalent `X-Powered-By` header values with specific framework version.", sheets_gid="895726728", sql_file="server_header_value_prevalence.sql") }}</figcaption> </figure> Examining the most common values for the `Server` and `X-Powered-By` headers, we found that especially the `X-Powered-By` header specifies versions, with the top 10 values revealing specific PHP versions. For both desktop and mobile, at least 25% of `X-Powered-By` headers contain this information. This header is likely enabled by default on the observed web servers. While it can be useful for analytics, the header's benefits are limited, and thus it warrants to be disabled by default. However, disabling this header alone does not address the security risks of outdated servers; regularly updating the server remains crucial. diff --git a/src/content/en/2024/structured-data.md b/src/content/en/2024/structured-data.md index 572a38b70e5..9b3bb01a1de 100644 --- a/src/content/en/2024/structured-data.md +++ b/src/content/en/2024/structured-data.md @@ -199,7 +199,7 @@ This is way more consistent when interacting with Bing Copilot or Gemini by Goog {{ figure_markup( image="structured-data-google-gemini.png", - caption="Google Gemini", + caption="Google Gemini.", description="Screenshot of Google Gemini providing restaurant recommendations with images, ratings, and map integration.", width=386, height=335 @@ -208,7 +208,7 @@ This is way more consistent when interacting with Bing Copilot or Gemini by Goog {{ figure_markup( image="structured-data-via-culinaria-bing.png", - caption="Bing Copilot", + caption="Bing Copilot.", description="Screenshot of Bing Copilot showing local restaurant information with map integration, ratings, and TripAdvisor reviews.", width=400, height=296 @@ -330,7 +330,7 @@ The data reveals notable trends in both syntax and vocabulary usage: {{ figure_markup( image="structured-data-usage-by-year-mobile.png", - caption="Structured data usage by year on mobile", + caption="Structured data usage by year on mobile.", description="Bar chart showing RDFa was used on 61% of mobile pages in 2021 and 62% in 2022, Open Graph on 57% and 59% respectively, Twitter on 37% and 40%, JSON-LD on 34% and 37%, Microdata on 25% and 25%, Facebook on 8% and 8%, Dublin Core and Microformats on 1% in both years, and finally microformats2 on 0% in both years.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=1720156114&format=interactive", sheets_gid="560419533", @@ -342,7 +342,7 @@ The data reveals notable trends in both syntax and vocabulary usage: {{ figure_markup( image="structured-data-usage-by-year-desktop.png", - caption="Structured data usage by year on desktop", + caption="Structured data usage by year on desktop.", description="Bar chart showing structured data usage across desktop pages in 2022 and 2024. RDFa was used on approximately 60% of desktop pages in 2022 and 62% in 2024, Open Graph on 57% in 2022 and 59% in 2024, Twitter on 37% in 2022 and 40% in 2024, JSON-LD on 34% in 2022 and 37% in 2024, Microdata remained steady at 25%, Facebook dropped slightly from 8% to 7%, while Dublin Core, Microformats, and Microformats2 showed minimal usage, all under 1% across both years.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=1466312390&format=interactive", sheets_gid="560419533", @@ -370,7 +370,7 @@ In contrast, traditional RDFa types like `foaf:image` and `foaf:document` have s {{ figure_markup( image="rdfa-usage-by-year.png", - caption="RDFa usage by year on mobile", + caption="RDFa usage by year on mobile.", description="Bar chart showing RDFa usage across mobile pages in 2022 and 2024. Foaf:image stayed consistent at 0.49%, foaf:document dropped from 0.23% to 0.16%, sioc:item and schema:webpage remained steady at 0.16% and 0.10%, respectively. Significant growth was seen for listitem and webpage, both increasing to 0.82% in 2024 from lower levels in 2022, while breadcrumblist usage increased to 0.45%. Other properties like v:breadcrumb and sioc:useraccount had minimal usage below 0.05%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=408467656&format=interactive", sheets_gid="560419533", @@ -382,7 +382,7 @@ In contrast, traditional RDFa types like `foaf:image` and `foaf:document` have s {{ figure_markup( image="rdfa-usage-by-year-desktop.png", - caption="RDFa usage by year on desktop", + caption="RDFa usage by year on desktop.", description="Bar chart showing RDFa usage across desktop pages in 2022 and 2024. Foaf:image remained the most used, with 1.22% of desktop pages in 2022 and 2024. Foaf:document usage decreased slightly from 0.40% to 0.38%, while other types like sioc:item and schema:webpage showed minimal fluctuations. Notably, listitem usage grew significantly from 0.39% in 2022 to 0.60% in 2024, and webpage usage also rose to 0.70% in 2024. Other types like breadcrumblist and v:breadcrumb remained below 0.50%, while sioc:useraccount showed minimal adoption.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=1587094037&format=interactive", sheets_gid="560419533", @@ -396,7 +396,7 @@ The data suggests that while RDFa remains a valuable tool, its dominance is grad {{ figure_markup( image="rdfa-usage-by-device.png", - caption="RDFa usage by device (desktop vs mobile)", + caption="RDFa usage by device (desktop vs mobile).", description="Bar chart comparing RDFa usage across desktop and mobile pages in 2024. Foaf:image shows higher usage on desktop (1.22%) compared to mobile (0.49%). Foaf:document and sioc:item also show higher adoption on desktop, while mobile usage leads for listitem and webpage types, both reaching 0.82%. Breadcrumblist, v:breadcrumb, and sioc:useraccount remain below 0.50% across both devices.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=780422567&format=interactive", sheets_gid="560419533", @@ -410,7 +410,7 @@ The data suggests that while RDFa remains a valuable tool, its dominance is grad {{ figure_markup( image="dublin-core-usage-by-year.png", - caption="Dublin Core usage by year on mobile", + caption="Dublin Core usage by year on mobile.", description="Bar chart showing Dublin Core usage across mobile pages in 2022 and 2024. The usage of dc:title remained the highest, with notable increases in dc.language and dc.description in 2024. Fields like dc.source and dcterms.title also saw growth, while others like dc.publisher and dc.identifier remained relatively consistent. Specialized fields like dcterms.rightsholder and dcterms.identifier had minimal usage across both years, under 0.002%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=151920898&format=interactive", sheets_gid="560419533", @@ -422,7 +422,7 @@ The data suggests that while RDFa remains a valuable tool, its dominance is grad {{ figure_markup( image="dublin-core-usage-by-year-desktop.png", - caption="Dublin Core usage by year on desktop", + caption="Dublin Core usage by year on desktop.", description="Bar chart showing Dublin Core usage across desktop pages in 2022 and 2024. The usage of dc:title remained the highest across both years, with increases in dc.language and dc.description in 2024. Fields like dc.source, dc.creator, and dc.publisher also saw moderate increases, while more specialized fields like dcterms.identifier and dcterms.rightsholder had minimal adoption, remaining below 0.002%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=1992172544&format=interactive", sheets_gid="560419533", @@ -436,7 +436,7 @@ Dublin Core remains a stable but less frequently used format for metadata, espec {{ figure_markup( image="dublin-core-usage-by-device.png", - caption="Dublin Core usage by device (desktop vs mobile)", + caption="Dublin Core usage by device (desktop vs mobile).", description="Bar chart comparing Dublin Core usage across desktop and mobile pages in 2024. Dc:title shows the highest adoption, with 0.7% on desktop and 0.5% on mobile. Other fields such as dc.language and dc.description also have higher usage on desktop. Meanwhile, dc.relation shows a higher percentage on mobile at 0.3%, with other fields like dc.identifier and dc.subject maintaining consistent usage across both devices.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=257359995&format=interactive", sheets_gid="560419533", @@ -460,7 +460,7 @@ Open Graph continues to be one of the most widely implemented structured data fo {{ figure_markup( image="open-graph-usage-by-year.png", - caption="Open Graph usage by year on mobile", + caption="Open Graph usage by year on mobile.", description="Bar chart showing Open Graph usage on mobile pages between 2022 and 2024. The usage of og:image remained the highest. Og:image:width and og:image:height saw significant increases, both around 23.8%. Og:image:secure_url also increased to 9.41%, while og:image:type rose to 11.26%. Og:image:alt, important for accessibility, grew to 5.78% in 2024.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=513866594&format=interactive", sheets_gid="560419533", @@ -472,7 +472,7 @@ A key development in 2024 is Google's update to its search documentation, now in {{ figure_markup( image="open-graph-usage-by-year-desktop.png", - caption="Open Graph usage by year (desktop)", + caption="Open Graph usage by year (desktop).", description="Bar chart showing usage of different Open Graph properties on desktop pages in 2022 and 2024. In 2024, og:image was used on 48% of pages, og:image:width and og:image:height on 23.86%, og:image:secure_url on 9.56%, og:image:type on 11.17%, and og:image:alt on 5.62%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=759266480&format=interactive", sheets_gid="560419533", @@ -483,7 +483,7 @@ This dual role of Open Graph in social sharing and search engine optimization ma {{ figure_markup( image="open-graph-usage-by-device.png", - caption="Open Graph usage by device", + caption="Open Graph usage by device.", description="Bar chart showing Open Graph usage by device (desktop and mobile) in 2024. og:image is used on nearly 50% of pages, og:image:width and og:image:height on 23.81% and 23.76% respectively, og:image:secure_url on 9.41%, og:image:type on 11.26%, and og:image:alt on 5.78%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=876659711&format=interactive", sheets_gid="560419533", @@ -498,7 +498,7 @@ Despite the platform's transition to new ownership and its rebranding as X, Twit {{ figure_markup( image="twitter-meta-tag-usage-by-year.png", - caption="Twitter meta tag usage by year (mobile)", + caption="Twitter meta tag usage by year (mobile).", description="Bar chart showing Twitter meta tag usage on mobile pages in 2022 and 2024. In 2024, the twitter:card tag is used on 44.15% of pages, twitter:title on 26.40%, twitter:description on 24.53%, twitter:image on 18.63%, and other tags such as twitter:site and twitter:label1 show usage rates between 9.67% and 13.36%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=455664170&format=interactive", sheets_gid="560419533", @@ -511,7 +511,7 @@ Core descriptive tags like `twitter:title` and `twitter:description` have also s {{ figure_markup( image="twitter-meta-tag-usage-by-year-desktop.png", - caption="Twitter meta tag usage by year (desktop)", + caption="Twitter meta tag usage by year (desktop).", description="Bar chart showing Twitter meta tag usage on desktop pages in 2022 and 2024. In 2024, the twitter:card tag is used on 44.15% of pages, twitter:title on 26.40%, twitter:description on 24.53%, twitter:image on 18.63%, and other tags such as twitter:site and twitter:label1 show usage rates between 9.67% and 13.36%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=410054248&format=interactive", sheets_gid="560419533", @@ -522,7 +522,7 @@ Core descriptive tags like `twitter:title` and `twitter:description` have also s {{ figure_markup( image="twitter-meta-tag-usage-by-device.png", - caption="Twitter meta tag usage by device", + caption="Twitter meta tag usage by device.", description="Bar chart showing Twitter meta tag usage by device (desktop and mobile) in 2024. On mobile, the twitter:card tag is used on 44.15% of pages, twitter:title on 26.40%, twitter:description on 24.53%, and other tags such as twitter:image and twitter:data1 show usage rates between 9.67% and 13.36%.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=1804770953&format=interactive", sheets_gid="560419533", @@ -541,7 +541,7 @@ Facebook-specific meta tags have seen a marked decline in usage between 2022 and {{ figure_markup( image="facebook-meta-tag-usage-by-year-mobile.png", - caption="Facebook meta tag usage by year (mobile)", + caption="Facebook meta tag usage by year (mobile).", description="Bar chart showing Facebook meta tag usage on mobile from 2022 to 2024. In 2024, fb:app_id appears on 4.9% of pages, fb:admins on 2.4%, and fb:pages on 0.6%, with minimal or zero usage for other tags.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=778075778&format=interactive", sheets_gid="560419533", @@ -552,7 +552,7 @@ This decline underscores a strategic move by developers and webmasters to adopt {{ figure_markup( image="facebook-meta-tag-usage-by-year-desktop.png", - caption="Facebook meta tag usage by year (desktop)", + caption="Facebook meta tag usage by year (desktop).", description="Bar chart showing Facebook meta tag usage on desktop from 2022 to 2024. In 2024, fb:app_id appears on the highest percentage of pages at 4.9%, fb:admins on 2.4%, and fb:pages on 0.6%, with minimal or zero usage for other tags.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=977720399&format=interactive", sheets_gid="560419533", @@ -563,7 +563,7 @@ Despite the decreasing adoption of Facebook-specific tags, Facebook itself remai {{ figure_markup( image="facebook-meta-tag-usage-by-device.png", - caption="Facebook meta tag usage by device", + caption="Facebook meta tag usage by device.", description="Bar chart showing Facebook meta tag usage by device for desktop and mobile in 2024. The fb:app_id tag appears on the highest percentage of pages, with mobile usage at 4.9% and desktop at a similar level. The fb:admins tag is used on 2.4% of mobile pages and 0.6% on desktop, while other tags show minimal or zero usage.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTE7UqINKaCzsmdVSUPZhQjlm2Az5T9wcbk4ZMZyJu-Rp8JWXtn9YRfXnAajUqQYLTCnSA2O5FEP6YF/pubchart?oid=343986403&format=interactive", sheets_gid="560419533", diff --git a/src/content/en/2024/sustainability.md b/src/content/en/2024/sustainability.md index b4552435c03..2b39f0a87ca 100644 --- a/src/content/en/2024/sustainability.md +++ b/src/content/en/2024/sustainability.md @@ -157,7 +157,7 @@ The Sustainable Web Design Model uses data transfer as a proxy. While we can deb {{ figure_markup( image="number-of-kb-by-percentile.png", - caption="Page weight", + caption="Page weight.", description="A column chart showing that on the 90th percentile web pages weight nearly 8 MB on desktop and right above 7 MB on mobile. On the 75th percentile the web pages get over 4 MB on desktop and around 3.5 MB on mobile, on the 50th percentile we found web pages weight a bit more than 2.5 MB on desktop and a bit less than 2 MB on mobile, on the 25th percentile it's over 1 MB on desktop and a bit less than 1 MB on mobile. Finally, on the 10th percentile we see pages weight a bit more than 0.5 MB on desktop and a bit less than 0.5 MB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=188541594&format=interactive", sheets_gid="997244814", @@ -177,7 +177,7 @@ With data showing that an average page weighs around 8MB, the next logical quest {{ figure_markup( image="kilobytes-per-type.png", - caption="Kilobytes per type", + caption="Kilobytes per type.", description="A column chart showing for the 90th percentile that HTML weighs 146.45 kB on desktop, 145.40 on mobile. CSS weighs 268.78 kB on desktop, 260.40 on mobile. Fonts weigh 458.36 kB on desktop, 399.33 on mobile. JS weighs 1,834.30 kB on desktop, 1,732.17 on mobile. Images weigh 4,910.37 kB on desktop, 4,436.10 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=296763237&format=interactive", sheets_gid="123069751", @@ -186,7 +186,7 @@ With data showing that an average page weighs around 8MB, the next logical quest {{ figure_markup( image="kilobytes-by-percentile-by-type-mobile.png", - caption="Kilobytes by percentile by type (mobile)", + caption="Kilobytes by percentile by type (mobile).", description="A column chart showing the Kilobytes per byte by percentile for mobile. The division per type remains roughly the same for each percentile but the weight of each increases with the percentiles. For the 10th percentile on mobile, HTML weighs 5.87 kB, JS 88.81 kB, CSS 7.55 kB, Images 42.71 kB and fonts 0 kB.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=426612772&format=interactive", sheets_gid="123069751", @@ -218,7 +218,7 @@ Based on the V4 of the SWD model, we get these global results for emissions: {{ figure_markup( image="carbon-emissions-by-percentile-2022.png", - caption="Carbon emissions (g) by percentile for 2022", + caption="Carbon emissions (g) by percentile for 2022.", description="A column chart showing that on the 90th percentile, desktop web pages emit 1.29g of carbon and mobile pages emit 1.14g of carbon, on the 75th percentile desktop pages emit 0.66g of carbon and mobile pages emit 0.57g of carbon. On the 50th percentile it goes 0.33g of carbon on desktop and 0.29 on mobile. On the 25th percentile it's 0.16g of carbon for desktop pages and 0.14g of carbon on mobile pages. Lastly, on the 10th percentile desktop pages emit 0.08g of carbon and mobile pages emit 0.06g of carbon.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=188699126&format=interactive", sheets_gid="1113829605", @@ -233,7 +233,7 @@ Based on the SWD V4 model, carbon emissions for web pages in 2024 are as follows {{ figure_markup( image="carbon-emissions-by-percentile-2024.png", - caption="Carbon emissions (g) by percentile for 2024", + caption="Carbon emissions (g) by percentile for 2024.", description="A column chart showing that on the 90th percentile, desktop web pages emit 1.47g of carbon and mobile pages emit 1.36g of carbon, on the 75th percentile desktop pages emit 0.74g of carbon and mobile pages emit 0.66g of carbon. On the 50th percentile it goes 0.37g of carbon on desktop and 0.33 on mobile. On the 25th percentile it's 0.19g of carbon for desktop pages and 0.0.16g of carbon on mobile pages. Lastly, on the 10th percentile desktop pages emit 0.08g of carbon and mobile pages emit 0.07g of carbon.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=70239542&format=interactive", sheets_gid="1113829605", @@ -246,7 +246,7 @@ We can also take a look at the share of emissions for different resources (HTML/ {{ figure_markup( image="emissions-by-percentile-by-type-desktop.png", - caption="Emissions by percentile by type for 2024 (desktop)", + caption="Emissions by percentile by type for 2024 (desktop).", description="A bar chart showing the percent of different content types on desktop in the total page carbon emissions by percentile. On the 90th percentile HTML content accounts for around 1.6% of the total carbon emissions, JavaScript is responsible for 20.2% of total carbon emissions, CSS is around 2.9%, images accounts for around 70.2% and fonts represent 5% of the total carbon emissions. On the 75th percentile, HTML represents 1.6%, JavaScript 26.5%, CSS around 3.4%, images around 62.7% and fonts around 5.8% of the total carbon emissions. On the 50th percentile, HTML represents 1.7%, JavaScript 32.1%, CSS around 4.1%, images almost 55.2% and fonts around 6.9% of the total carbon emissions. On the 25th percentile, HTML represents 1.9%, JavaScript 37.4%, CSS around 4.9%, images 48.9% and fonts around 6.9% of the total carbon emissions. On the 10th percentile, HTML represents 2.8%, JavaScript 49%, CSS around 4.1%, images 44.1% and fonts 0% of the total carbon emissions.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1793089209&format=interactive", sheets_gid="1113829605", @@ -255,7 +255,7 @@ We can also take a look at the share of emissions for different resources (HTML/ {{ figure_markup( image="emissions-by-percentile-by-type-mobile.png", - caption="Emissions by percentile by type for 2024 (mobile)", + caption="Emissions by percentile by type for 2024 (mobile).", description="A bar chart showing the percent of different content types on mobile in the total page carbon emissions by percentile. On the 90th percentile HTML content accounts for around 1.7% of the total carbon emissions, JavaScript is responsible for 20.8% of total carbon emissions, CSS is around 3.1%, images accounts for around 69.6% and fonts represent 4.8% of the total carbon emissions. On the 75th percentile, HTML represents 1.8%, JavaScript 27.4%, CSS around 3.6%, images around 61.7% and fonts around 5.6% of the total carbon emissions. On the 50th percentile, HTML represents 1.9%, JavaScript 33.3%, CSS around 4.4%, images almost 53.8% and fonts around 6.6% of the total carbon emissions. On the 25th percentile, HTML represents 2.2%, JavaScript 40.5%, CSS around 5.2%, images 45.5% and fonts around 6.6% of the total carbon emissions. On the 10th percentile, HTML represents 3.6%, JavaScript 52.2%, CSS around 3.5%, images 40.7% and fonts 0% of the total carbon emissions.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=89199497&format=interactive", sheets_gid="1113829605", @@ -296,7 +296,7 @@ It's essential to minimize the number of requests. Setting an initial cap of 25 {{ figure_markup( image="number-of-requests-by-percentile.png", - caption="Number of requests by percentile", + caption="Number of requests by percentile.", description="A column chat showing that on the 90th percentile there are 182 requests per page on desktop and 177 requests on mobile. On the 75th percentile there are 120 requests on desktop and 114 on mobile. On the 50th percentile it drops at 74 requests on desktop and 70 on mobile. On the 25th percentile there are 43 requests on desktop and 40 on mobile. Finally on the 10th percentile we see a total of 23 requests on desktop and 21 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1890346358&format=interactive", sheets_gid="495251827", @@ -308,7 +308,7 @@ The amount of requests, in general, is quite high, so let's see what resources t {{ figure_markup( image="number-of-requests-by-percentile-and-type-mobile.png", - caption="Number of requests per percentile and resource type (mobile)", + caption="Number of requests per percentile and resource type (mobile).", description="A column chart showing that on mobile devices, on the 90th percentile we find 12 requests targeting HTML content, 68.5 requests for javascript resources, almost 26 requests for CSS, around 55 requests fetching images and 8.5 requests for fonts. On the 75th percentile, there are 5 HTML requests, 41 JavaScript requests, 15 CSS requests, 29.5 images requests and 5.5 Fonts requests. On the 50th percentile, we can see 2 HTML requests, 22 javascript requests, 7.5 CSS requests, 15.5 images and 3 fonts requests. On the 25th percentile, there are 1 HTML, 10.5 javascript, 3.5 CSS, 7.5 images and 1 font requests. On the 10h percentile, we find 1 Html, 4.5 javascript, 1.5 CSS, 4 images and 0 font requests.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1059345541&format=interactive", sheets_gid="495251827", @@ -319,7 +319,7 @@ The not-so-nice surprise here is that most of the requests, around 70 in the 90t {{ figure_markup( image="kilobytes-by-percentile-by-type-mobile-.png", - caption="Kilobytes by percentile by type (mobile)", + caption="Kilobytes by percentile by type (mobile).", description="A column chart showing that on mobile devices, on the 90th percentile we find 145.4 KB of HTML, around 1,732.17 KB of JavaScript, 260.4 KB of CSS, 4,436.1 KB of images and 399.33 KB of fonts. On the 75th percentile it goes down at 70.03 KB of HTML, 1,102.63 KB of JavaScript, 145.59 KB of CSS, 1,807.67 KB of images and 221.51 KB of fonts. On the 50th percentile we found 31.64 KB of HTML, 569.66 KB of JavaScript, 74.99 KB of CSS, 623.8 KB of images and 109.06 KB of fonts. On the 25th percentile there is 13.12 KB of HTML, 244.33 KB of JavaScript, 32.26 KB of CSS, 179.76 KB of images and 39.46 KB of fonts. On the 10th percentile there is 5.87 KB of HTML, 88.81 KB of JavaScript, 7.55 KB of CSS, 42.71 KB of images and 0 KB of fonts.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=426612772&format=interactive", sheets_gid="123069751", @@ -354,7 +354,7 @@ To help organizations and individuals choose "greener" hosting, <a hreflang="en" {{ figure_markup( image="percent_green_hosting.png", - caption="% Green hosting", + caption="% Green hosting.", description="A column chart showing that on the top 1,000 sites, on desktop, 56% of them relied on green web hosting and it drops at 55% on mobile. On the top 10,000 sites it's 58% on desktop and 55% on mobile, on the top 100,000 it's 49% on desktop and 44% on mobile, on the top million it's 32% for desktops and 30% on mobile, on the top 10 million is 16% for desktop and 14% for mobile. For all measured websites globally, only 12% rely on green web hosting for desktop and 10% for mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=377132080&format=interactive", sheets_gid="1680950752", @@ -416,7 +416,7 @@ As web applications grow in complexity, striking a balance between comprehensive {{ figure_markup( image="unused_css.png", - caption="Unused CSS", + caption="Unused CSS.", description="A column chart showing that on the 90th percentile there is 225 KB of unused CSS on desktop and 212 KB on mobile, on the 75th percentile it's 120 KB on desktop and 113 KB on mobile, on the 50th percentile 56 KB on desktop and 52 KB on mobile. On the 25th percentile we found 20 KB of unused CSS on desktop and 18 KB on mobile. Lastly, we saw 0 KB of unused CSS on the 10th percentile on either desktop and mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1281422688&format=interactive", sheets_gid="558117867", @@ -444,7 +444,7 @@ Modern techniques like tree shaking and code splitting are crucial for optimizin {{ figure_markup( image="unused_js.png", - caption="Unused JS", + caption="Unused JS.", description="A column chart showing that on the 90th percentile there is 907 KB of unused JavaScript on desktop and 812 KB on mobile, on the 75th percentile it's 508 KB on desktop and 456 KB on mobile, on the 50th percentile 239 KB on desktop and 215 KB on mobile. On the 25th percentile we found 90 KB of unused JavaScript on desktop and 78 KB on mobile. Lastly, we saw 22 KB of unused JavaScript on desktop and 20 KB on mobile on the 10th percentile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=904835139&format=interactive", sheets_gid="1021078155", @@ -511,7 +511,7 @@ Let's look at how the usage of these formats has changed from 2022 to 2024: {{ figure_markup( image="image-format-adoption-2-year-change.png", - caption="Image format adoption, 2-year change", + caption="Image format adoption, 2-year change.", description="A bar chart showing the comparison of image formats adoption between 2022 and 2024. It shows that the jpg adoption is 20% less in 2024, while png increased 1%, gif is up by 6%, webp is 34% more, svg also increased with 36% more, ico is 17% less and avif is 386% more.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQCSP87WE9bhFjIICxcrpIEGQlz3xBq33-ODZ8e91XSLUbLvAZjk25GhOdDtFIZCzPcS-VrSygr7pmz/pubchart?oid=2128858223&format=interactive", sheets_gid="https://docs.google.com/spreadsheets/d/1Q2ITOe6ZMIXGKHtIxqK9XmUA1eQBX9CLQkxarQOJFCk/edit?gid=1939630368#gid=1939630368", @@ -522,7 +522,7 @@ This data shows the evolving landscape of image format adoption. WebP has grown {{ figure_markup( image="image-format-adoption.png", - caption="Image format adoption", + caption="Image format adoption.", description="A pie chart showing that overall, jpg represents the image format of 32.3% of all images. png is used in 28.4% of the images. Gif is used on 16.8% of the images. WebP is used on 12% of the images, Svg accounts for 6.4% of the images format. Ico represents the format used on 1.3% of all images and lastly, avif is the format of 1% of the images.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQCSP87WE9bhFjIICxcrpIEGQlz3xBq33-ODZ8e91XSLUbLvAZjk25GhOdDtFIZCzPcS-VrSygr7pmz/pubchart?oid=424926454&format=interactive", sheets_gid="https://docs.google.com/spreadsheets/d/1Q2ITOe6ZMIXGKHtIxqK9XmUA1eQBX9CLQkxarQOJFCk/edit?gid=1939630368#gid=1939630368", @@ -551,7 +551,7 @@ It's worth remembering that image quality doesn't always need to be at maximum. {{ figure_markup( image="responsive-image-types.png", - caption="Responsive image types", + caption="Responsive image types.", description="A column chart showing that around 42.4% of websites use the srcset attribute on both desktop and mobile, 32.4% of them used it with sizes on desktop and 31.8% on mobile, 10% of them used the srcset attribute w/o sizes on desktop and 10.6% on mobile. 9.3% of the websites use the picture element on desktop and 9.2% of them on mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1114669918&format=interactive", sheets_gid="987814873", @@ -580,7 +580,7 @@ Lazy-loading remains a crucial technique for enhancing both performance and sust {{ figure_markup( image="lazy-loading-adoption.png", - caption="Adoption of loading=lazy on `<img>`", + caption="Adoption of loading=lazy on `<img>`.", description="A timeseries chart showing the increase in the adoption of loading=\"lazy\" attribute on image tags. In June 2022 it was used by 24% of the websites on mobile and 23% on desktop. On January 2023, 26% of the websites on mobile were using native lazy-loading and 25% of them were using it on desktop. On June the 1st, 2023, 27% of websites used native lazy-loading on wither desktop and mobile. On June 2024, 34% of websites used native lazy-loading on mobile and 33% on desktop.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQCSP87WE9bhFjIICxcrpIEGQlz3xBq33-ODZ8e91XSLUbLvAZjk25GhOdDtFIZCzPcS-VrSygr7pmz/pubchart?oid=1997305111&format=interactive", sheets_gid="https://docs.google.com/spreadsheets/d/1Q2ITOe6ZMIXGKHtIxqK9XmUA1eQBX9CLQkxarQOJFCk/edit?gid=228292115#gid=228292115", @@ -621,7 +621,7 @@ Automatically preloading videos is a concern for web sustainability. This practi {{ figure_markup( image="video-preload-usage.png", - caption="Video preload usage", + caption="Video preload usage.", description="A column chart showing the preload attribute is not used on 55% of desktop videos and 56% of mobile videos. The preload attribute can be found with the none value on 18% of desktop videos and 16% of mobile videos. The auto value is used on 15% of desktop videos 15% of mobile videos. The metadata value is used on 10% of desktop videos and 11% of mobile videos. The preload attribute is empty on 1% of both desktop and mobile videos.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1517696872&format=interactive", sheets_gid="1377676306", @@ -644,7 +644,7 @@ It's important to note that the autoplay attribute can override preload settings {{ figure_markup( image="video-autoplay-usage.png", - caption="Video autoplay usage", + caption="Video autoplay usage.", description="A column chart showing that the autoplay attribute has empty value on 47% of videos on desktop and 46% on mobile. The autoplay attribute is not used on respectively 45% and 45% of desktop and mobile videos. It is used with an `autoplay` value on 6% of desktop videos and 6% of mobile videos. It is used with an value `TRUE` on 2% of desktop videos and 3% of mobile videos.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1761138794&format=interactive", sheets_gid="215678116", @@ -670,7 +670,7 @@ Recent data on [non-composited animations](https://web.dev/articles/stick-to-com {{ figure_markup( image="non-composited-animations-per-page.png", - caption="Non-composited animations per page", + caption="Non-composited animations per page.", description="A column chart showing that on the 90th percentile there are 12 non-composited animation on desktop and 11 on mobile. On the 75th percentile it goes down to 3 on desktop and 2 on mobile. On the 50th, the 25th and the 10th percentile there are 0 non-composited animations on both desktop and mobile", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1367877831&format=interactive", sheets_gid="1335370570", @@ -714,7 +714,7 @@ These formats, when properly implemented, minimize data transfer, reduce storage {{ figure_markup( image="favicon-usage.png", - caption="Favicon usage", + caption="Favicon usage.", description="A bar chart showing that png is the format used for favicons on 41.9% of pages on both desktop and mobile. ico format is used by 28.3% on desktop and 27.2% on mobile. Favicon is missing in 17.2% on desktop and 17.9% on mobile. jpg is the format used by 6.2% on desktop and 6.5% on mobile. Svg is used by 1.4% on both desktop and mobile. NO_EXTENSION, webp, NO_DATA, gif, jpeg and NO_HREF repersent less than 1% each, on desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1102352877&format=interactive", sheets_gid="1918305009", @@ -745,7 +745,7 @@ Since third-party requests make up a large portion of requests on the web, it's {{ figure_markup( image="green-third-party-requests.png", - caption="% green third-party requests", + caption="% green third-party requests.", description="A column chart showing that on the top 1,000 websites 72% of third party requests relied on green hosting on desktop and 70% on mobile devices. On the top 10,000 websites it's 78% on both desktop and mobile. For the top 100,000 sites it's 88% on both desktop and mobile. On the top million, it's 94% on desktop and 93% on mobile. On the top 10 million, it's 97% on desktop and 97% on mobile. Overall, we see that 98% of third party requests rely on green hosting on both desktop and mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1139458989&format=interactive", sheets_gid="176951784", @@ -793,7 +793,7 @@ Optimizing JavaScript through minification, tree shaking, and code splitting rem {{ figure_markup( image="unminified-js-savings.png", - caption="Unminified Javascript savings", + caption="Unminified Javascript savings.", description="A column chart showing that on the 90th percentile 41 KB of JavaScript could be saved on desktop and 37 KB on mobile if using JS minifying. On the 75th percentile 10 KB of JavaScript could be saved on desktop and 8 KB on mobile. On the 50th, 25th and 10th percentile we see no KB savings, this is explained by the usage of JavaScript minifying already in place on those websites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=260477538&format=interactive", sheets_gid="619269903", @@ -828,7 +828,7 @@ While minification for JavaScript is a common practice (as mentioned earlier in {{ figure_markup( image="unminified-css-savings.png", - caption="Unminified CSS savings", + caption="Unminified CSS savings.", description="A column chart showing that on the 90th percentile 14 KB of CSS could be saved on desktop and 13 KB on mobile if using CSS minifying. On the 75th percentile 4 KB of CSS could be saved on both desktop and mobile. On the 50th, 25th and 10th percentile we see no KB savings, this is explained by the usage of CSS minifying already in place on those websites.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1448481615&format=interactive", sheets_gid="1866069863", @@ -881,7 +881,7 @@ For further information, refer to: {{ figure_markup( image="style-usage.png", - caption="Style usage", + caption="Style usage.", description="A bar chart showing that on desktop, 31% of CSS is inline and the other 69% comes from external stylesheets. On mobile the inline CSS goes up to 32% while 68% comes from external stylesheets", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=812833828&format=interactive", sheets_gid="109015092", @@ -927,7 +927,7 @@ Content Delivery Networks (CDNs) play a crucial role in optimizing web performan {{ figure_markup( image="cdn-usage.png", - caption="CDN usage on the web", + caption="CDN usage on the web.", description="A column chart showing that 66.9% of the pages analyzed do not use any CDN on desktop and 67.2% on mobile, 18.3% of them use Cloudflare on desktop and 18.2% on mobile, 7.4% of them use Google on desktop and 7.9% on mobile, 2.3% use Amazon Cloudfront on desktop and 2% on mobile, 2.2% use Fastly on desktop and 1.9% on mobile, 0.6% use Automattic on desktop and 0.7% on mobile, 0.6% use Akamai on desktop and 0.5% on mobile, 0.8% use Vercel on desktop and 0% on mobile, 0% use Sucuri Firewall on desktop and 0.7% on mobile. Netlify and Incapsula are both used on 0.3% of the page tested on desktop and 0.2% on mobile. Microsoft Azure is used on 0.2% of the pages on desktop and 0.1% on mobile.Lastly, we see Azion used on 0% of the pages on desktop and 0.2% on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1471666916&format=interactive", sheets_gid="232665838", @@ -965,7 +965,7 @@ More on this in this article from <a hreflang="en" href="https://paulcalvano.com {{ figure_markup( image="text-compression.png", - caption="Compression used on text resources", + caption="Compression used on text resources.", description="A bar chart showing that on desktop 21.6% of text resources are compressed using Brotli format, 24% of them where compressed in Gzip and 53.5% are not compressed, while 0.9% are using other compression format. On mobile, 23% of text resources are compressed using Brotli format, 24.6% of them where compressed in Gzip and 51.4% are not compressed at all, while 0.9% were compressed with other formats.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=962026195&format=interactive", sheets_gid="1229329467", @@ -994,7 +994,7 @@ From a sustainability perspective, effective caching offers several key benefits {{ figure_markup( image="cache-control-header-usage.png", - caption="Cache control header usage", + caption="Cache control header usage.", description="A bar chart showing that on desktop 26.6% of websites use Cache Control Only, 0.4% of them use Expiries only and 48.1% of them use both. 24.9% of the websites do not use any caching on desktop. On mobile 25.9% of websites use Cache Control Only, 0.4% of them use Expiries only and 48.6% of them use both. 25.1% of the websites do not use any caching on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=584352189&format=interactive", sheets_gid="1192354424", @@ -1091,7 +1091,7 @@ The accompanying charts present the median page weight across the top five most {{ figure_markup( image="median-kilobytes-by-cms.png", - caption="Median kB by CMS", + caption="Median kB by CMS.", description="A bar chart showing that the median weight for Wordpress pages is 2,967 KB on desktop and 2,684 KB on mobile. For Wix it's 3,161 KB on desktop and 2,471 KB on mobile. For Squarespace it's 4,012 KB on desktop and 3,562 KB on mobile. For Joomla it's 2,990 KB on desktop and 2,776 KB on mobile. For Drupal it's 2,514 KB on desktop and 2,329 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1792712710&format=interactive", sheets_gid="790675238", @@ -1106,7 +1106,7 @@ As noted above, the model we use for calculating carbon emissions changed betwee {{ figure_markup( image="median-emissions-by-cms-2024.png", - caption="Median emissions by CMS - 2024", + caption="Median emissions by CMS - 2024.", description="A bar chart showing that the median emissions for Wordpress pages is 0.42 grams of carbon on desktop and 0.38 on mobile. For Wix it's 0.45 on desktop and 0.35 on mobile. For Squarespace it's 0.57 on desktop and 0.5 on mobile. For Joomla it's 0.42 on desktop and 0.39 on mobile. For Drupal it's 0.36 on desktop and 0.33 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=654101809&format=interactive", sheets_gid="790675238", @@ -1117,7 +1117,7 @@ For comparison reasons, here are the emissions data from 2022, calculated with t {{ figure_markup( image="median-emissions-by-cms-2022.png", - caption="Median emissions by CMS - 2022", + caption="Median emissions by CMS - 2022.", description="A bar chart showing that the median emissions for Wordpress pages is 0.37 grams of carbon on desktop and 0.34 on mobile. For Joomla it's 0.38 on desktop and 0.35 on mobile. For Wix it's 0.44 on desktop and 0.31 on mobile. For Drupal it's 0.33 on desktop and 0.30 on mobile. For Squarespace it's 0.48 on desktop and 0.5 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1732727443&format=interactive", sheets_gid="1972006215", @@ -1130,7 +1130,7 @@ The average of the median emissions in the chart above is about 0.3 grams of car {{ figure_markup( image="median-kilobytes-by-cms-and-resource-type.png", - caption="Median kB by CMS and resource type", + caption="Median kB by CMS and resource type.", description="A bar chart showing the median Kilobytes of different content types on desktop by CMS. For WordPress, HTML content has a median of 42 KB, JavaScript has 572 KB, CSS is 122 KB, images have a median of 1,358 KB and fonts 191 Kb. For Wix, HTML has 147 KB, JavaScript 1,526 KB, CSS 16 KB, images 466 KB and fonts 170 KB. For Squarespace, HTML has 28 KB, JavaScript 1,321 KB, CSS 133 KB, images 1,689 KB and fonts 184 KB out of total page weight. For Joomla, HTML has 21 KB, JavaScript 431 KB, CSS 92 KB, images 1,711 KB and fonts 123 KB. For Drupal, HTML has 22 KB, JavaScript 497 KB, CSS around 73 KB, images 1,225 KB and fonts 126 KB.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1162097291&format=interactive", sheets_gid="790675238", @@ -1143,7 +1143,7 @@ Of the five CMS, it is good to see that image sizes went down across the board. {{ figure_markup( image="median-emissions-by-cms-and-resource-type.png", - caption="Median emissions by CMS and resource type", + caption="Median emissions by CMS and resource type.", description="A bar chart showing the median emissions of different content types on desktop by CMS. For WordPress, HTML content has a median of 0.01 grams of carbon, JavaScript has 0.08, CSS is 0.02, images have a median of 0.19 and fonts 0.03. For Wix, HTML has 0.02, JavaScript 0.22, CSS 0, images 0.07 and fonts 0.02. For Squarespace, HTML has 0, JavaScript 0.19, CSS 0.02, images 0.24 KB and fonts 0.03 out of total page emissions. For Joomla, HTML has 0, JavaScript 0.06, CSS 0.01, images 0.24 and fonts 0.02. For Drupal, HTML has 0, JavaScript 0.07, CSS around 0.01, images 0.17 and fonts 0.02.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1895711546&format=interactive", sheets_gid="790675238", @@ -1156,7 +1156,7 @@ CMS also has a strong role to play in shifting the definition of quality work. < {{ figure_markup( image="median-kilobytes-by-ecommerce.png", - caption="Median kB by ecommerce", + caption="Median kB by ecommerce.", description="A bar chart showing that the median weight for WooCommerce pages is 3,275 KB on desktop and 3,036 KB on mobile. For Shopify it's 2,876 KB on desktop and 2,657 KB on mobile. For Squerspace Commerce it's 4,012 KB on desktop and 2,756 KB on mobile. For Wix eCommerce it is 3,530 KB on desktop and 3,562 KB on mobile. For PrestaShop it's 3,078 KB on desktop and 2,730 KB on mobile. For 1C-Bitrix it is 3,305 KB on desktop and 3,788 KB on mobile. For Magento it's 3,505 KB on desktop and 4,209 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=510790990&format=interactive", sheets_gid="2021180834", @@ -1165,7 +1165,7 @@ CMS also has a strong role to play in shifting the definition of quality work. < {{ figure_markup( image="median-emissions-by-ecommerce-2024.png", - caption="Median emissions by ecommerce - 2024", + caption="Median emissions by ecommerce - 2024.", description="A bar chart showing that the median emission for WooCommerce pages is 0.46 grams of carbon on desktop and 0.43 on mobile. For Shopify it's 0.41 on desktop and 0.38 on mobile. For Squerspace Commerce it's 0.57 on desktop and 0.39 on mobile. For Wix eCommerce it is 0.5 on both desktop and mobile. For PrestaShop it's 0.44 on desktop and 0.39 KB on mobile. For 1C-Bitrix it is 0.47 on desktop and 0.54 on mobile. For Magento it's 0.5 on desktop and 0.59 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1542686246&format=interactive", sheets_gid="2021180834", @@ -1176,7 +1176,7 @@ For comparison reasons, here are the emissions data from 2022, calculated with t {{ figure_markup( image="median-emissions-by-ecommerce-2022.png", - caption="Median emissions by ecommerce - 2022", + caption="Median emissions by ecommerce - 2022.", description="A bar chart showing that the median emission for WooCommerce pages in 2022 was 0.28 grams of carbon on desktop and 0.26 on mobile. For Shopify it's 0.20 on desktop and 0.18 on mobile. For Squerspace Commerce it's 0.31 on desktop and 0.32 on mobile. For PrestaShop it's 0.26 on desktop and 0.23 KB on mobile. For Wix eCommerce it is 0.32 on desktop and 0.22 on mobile. For Magento it's 0.3 on desktop and 0.28 on mobile. For 1C-Bitrix it is 0.34 on desktop and 0.3 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1732727443&format=interactive", sheets_gid="1972006215", @@ -1189,7 +1189,7 @@ It is clear comparing the ecommerce platforms with other CMS platforms, that the {{ figure_markup( image="median-kilobytes-by-ssg.png", - caption="Median kB by static site generator", + caption="Median kB by static site generator.", description="A bar chart showing that the median weight for Next.js pages is 2,396 KB on desktop and 2,214 KB on mobile. For Nuxt.js it's 3,107 KB on desktop and 2,677 KB on mobile. For Gatsby it's 2,229 KB on desktop and 1,833 KB on mobile. For Hugo it's 1,112 KB on desktop and 1,216 KB on mobile. For Astro it's 1,125 KB on desktop and 1,149 KB on mobile. For Jekyll it's 792 KB on desktop and 854 KB on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=2054864060&format=interactive", sheets_gid="1941515647", @@ -1198,7 +1198,7 @@ It is clear comparing the ecommerce platforms with other CMS platforms, that the {{ figure_markup( image="median-emissions-by-ssg-2024.png", - caption="Median emissions by static site generator - 2024", + caption="Median emissions by static site generator - 2024.", description="A bar chart showing that the median emission for Next.js pages is 0.34 grams of carbon on desktop and 0.31 on mobile. For Nuxt.js it's 0.44 on desktop and 0.38 on mobile. For Gatsby it's 0.32 on desktop and 0.26 on mobile. For Hugo it's 0.16 on desktop and 0.17 on mobile. For Astro it's 0.16 on both desktop and mobile. For Jekyll it's 0.11 on desktop and 0.12 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=437135521&format=interactive", sheets_gid="1941515647", @@ -1209,7 +1209,7 @@ For comparison reasons, here are the emissions data from 2022, calculated with t {{ figure_markup( image="median-emissions-by-ssg-2022.png", - caption="Median emissions by static site generator - 2022", + caption="Median emissions by static site generator - 2022.", description="A bar chart showing that the median emission for Next.js pages is 0.22 grams of carbon on desktop and 0.20 on mobile. For Nuxt.js it's 0.26 on desktop and 0.21 on mobile. For Gatsby it's 0.19 on desktop and 0.16 on mobile. For Hugo it's 0.09 on desktop and 0.1 on mobile. For Jekyll it's 0.06 on both desktop and mobile. For Docusaurus it's 0.07 on desktop and 0.08 on mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRQLDsXdZj62xe68w716gen0rQvuuGhXPAOSwdWwYjSBZf9BgJgEb-dp1Z_jB_Lp5YMsfH0FiNKwzDb/pubchart?oid=1021559874&format=interactive", sheets_gid="1333464158", diff --git a/src/content/ja/2022/capabilities.md b/src/content/ja/2022/capabilities.md index 11435eb0f37..61e92f90699 100644 --- a/src/content/ja/2022/capabilities.md +++ b/src/content/ja/2022/capabilities.md @@ -139,7 +139,7 @@ Web Share APIは、デスクトップで2021年の9.00%から2022年には8.84% ## ホームスクリーンへの追加 -昨年のCapabilitiesレポートでは取り上げなかった機能の一つに、デバイスのホームスクリーンにWebアプリケーションを追加する機能があります。どのサイトがこの機能を持っているかを計算するために、[`beforeinstallprompt`](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event)イベントのリスナーがあるかどうかをテストしました。 +昨年のCapabilitiesレポートでは取り上げなかった機能の一つに、デバイスのホームスクリーンにWebアプリケーションを追加する機能があります。どのサイトがこの機能を持っているかを計算するために、[`beforeinstallprompt`](https://developer.mozilla.org/docs/Web/API/Window/beforeinstallprompt_event)イベントのリスナーがあるかどうかをテストしました。 `beforeinstallprompt`イベントはChromium専用のAPIであり、現在[WICG内でインキュベート中](https://wicg.github.io/manifest-incubations/index.html#installation-prompts)です。 diff --git a/src/content/ja/2022/media.md b/src/content/ja/2022/media.md index 9e54602cd06..0733e7d6632 100644 --- a/src/content/ja/2022/media.md +++ b/src/content/ja/2022/media.md @@ -83,7 +83,7 @@ featured_stat_label_3: 30秒以内の動画要素。 不審なほど多くのものが1×1です。これらの `<img>` は、画像コンテンツをまったく含んでいません。レイアウト用（[スペーサーGIF](https://en.wikipedia.org/wiki/Spacer_GIF)）と[トラッキングビーコン](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%93%E3%83%BC%E3%82%B3%E3%83%B3)の2つの目的で使用されているのです。 -新しく作成されたウェブサイトは、レイアウトにCSSを使い、トラッキングに[ビーコンAPI](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API)を使うべきです。既存の多くのコンテンツは、トラッキングピクセルとスペーサーGIFを永遠に使い続けるだろうが、ここのデスクトップ数は[昨年](../2021/media#fig-5)から変わっておらず、モバイル数はほんの少ししか縮小していないことに落胆させられる。<a hreflang="en" href="https://developers.facebook.com/docs/meta-pixel/implementation/marketing-api#intialize-img">古い習慣</a> <a hreflang="en" href="https://spacergif.org/stats/">こごえる</a>！ +新しく作成されたウェブサイトは、レイアウトにCSSを使い、トラッキングに[ビーコンAPI](https://developer.mozilla.org/docs/Web/API/Beacon_API)を使うべきです。既存の多くのコンテンツは、トラッキングピクセルとスペーサーGIFを永遠に使い続けるだろうが、ここのデスクトップ数は[昨年](../2021/media#fig-5)から変わっておらず、モバイル数はほんの少ししか縮小していないことに落胆させられる。<a hreflang="en" href="https://developers.facebook.com/docs/meta-pixel/implementation/marketing-api#intialize-img">古い習慣</a> <a hreflang="en" href="https://spacergif.org/stats/">こごえる</a>！ 可能な限り、これらの実際には画像ではない`<img>`を分析から除外しました。 From fd02231de32a8b310d05d17da543959431ad58c8 Mon Sep 17 00:00:00 2001 From: Barry Pollard <barrypollard@google.com> Date: Mon, 11 Nov 2024 23:07:54 +0000 Subject: [PATCH 3/7] Remove smart quotes (#3875) --- src/content/en/2022/accessibility.md | 2 +- src/content/en/2022/jamstack.md | 2 +- src/content/en/2022/javascript.md | 2 +- src/content/en/2022/mobile-web.md | 48 +++++++-------- src/content/en/2022/seo.md | 82 +++++++++++++------------- src/content/en/2022/structured-data.md | 4 +- src/content/en/2024/accessibility.md | 4 +- src/content/en/2024/ecommerce.md | 4 +- src/content/en/2024/security.md | 6 +- src/content/en/2024/structured-data.md | 42 ++++++------- 10 files changed, 98 insertions(+), 98 deletions(-) diff --git a/src/content/en/2022/accessibility.md b/src/content/en/2022/accessibility.md index 66edd6008e0..47844fe4db0 100644 --- a/src/content/en/2022/accessibility.md +++ b/src/content/en/2022/accessibility.md @@ -11,7 +11,7 @@ SaptakS_bio: Saptak S is a human rights centered web developer, focusing on usab scottdavis99_bio: Scott Davis is an author and Digital Accessibility Advocate with <a hreflang="en" href="https://www.thoughtworks.com/">Thoughtworks</a>, where he focuses on leading-edge / innovative / emerging / non-traditional aspects of web development. "Digital Accessibility is so much more than a compliance checkbox; Accessibility is a springboard for innovation." thibaudcolas_bio: Thibaud Colas is a web developer and open source contributor focusing on accessibility topics. He is a core contributor to the <a hreflang="en" href="https://wagtail.org/">Wagtail</a> CMS, and a member of the accessibility team for <a hreflang="en" href="https://www.djangoproject.com/">Django</a>. results: https://docs.google.com/spreadsheets/d/1ladaKh6RbtMKQwkccwxDJGQf85KyhfLrtlM_9e9sLH8/ -featured_quote: Good accessibility benefits everyone, not just those with disabilities. This is one of the core principles of Universal Design. After the COVID-19 pandemic started, more and more people have been reliant on the internet. Likewise, accessibility needs to improve as well, or we risk alienating a lot of people. Although the state of web accessibility still leaves a lot to be desired, we did see an overall improvement in sites’ accessibility this year. +featured_quote: Good accessibility benefits everyone, not just those with disabilities. This is one of the core principles of Universal Design. After the COVID-19 pandemic started, more and more people have been reliant on the internet. Likewise, accessibility needs to improve as well, or we risk alienating a lot of people. Although the state of web accessibility still leaves a lot to be desired, we did see an overall improvement in sites' accessibility this year. featured_stat_1: 8% featured_stat_label_1: Sites using `prefers-color-scheme` to adjust styles based on light/dark mode featured_stat_2: 22.9% diff --git a/src/content/en/2022/jamstack.md b/src/content/en/2022/jamstack.md index ae6be864a9a..ccbc950a037 100644 --- a/src/content/en/2022/jamstack.md +++ b/src/content/en/2022/jamstack.md @@ -77,7 +77,7 @@ We knew we wanted to measure: sites that load most of their content very quickly **Largest Contentful Paint (LCP)**: we got the distribution of all LCP times across all pages, picked the median of real-world user data from the <a hreflang="en" href="https://developer.chrome.com/docs/crux">Chrome UX Report</a>, and decided that any site equal or less to the median counted as "loaded most content quickly". This was 2.4 seconds on mobile devices, and 2.0 seconds on desktop devices. -**Cumulative Layout Shift (CLS)**: we wanted to avoid sites that very quickly load a skeleton but then take a long time to load real content. The closest we could get to that is the <a hreflang="en" href="https://web.dev/articles/cls">Cumulative Layout Shift</a>, a measure of how much the page layout jumps around while loading. While there are ways to "game" CLS, we still believe it's a reasonable proxy for what we’re trying to measure. We liked this measure because we felt that a "jumpy" site also felt less "Jamstack-y", a word we were going to end up using a lot. Again, we picked the median of Chrome UX Report data. +**Cumulative Layout Shift (CLS)**: we wanted to avoid sites that very quickly load a skeleton but then take a long time to load real content. The closest we could get to that is the <a hreflang="en" href="https://web.dev/articles/cls">Cumulative Layout Shift</a>, a measure of how much the page layout jumps around while loading. While there are ways to "game" CLS, we still believe it's a reasonable proxy for what we're trying to measure. We liked this measure because we felt that a "jumpy" site also felt less "Jamstack-y", a word we were going to end up using a lot. Again, we picked the median of Chrome UX Report data. <p class="note">Chrome UX report data rounds CLS data to the nearest 0.05, which is a shame, because the "real" median seems to be around 0.02-0.03, so on mobile it rounds down to zero and on desktop it rounds up to 0.05. Since 0 excludes huge numbers of pages, we decided to use 0.05 as the best available threshold for both mobile and desktop.</a> diff --git a/src/content/en/2022/javascript.md b/src/content/en/2022/javascript.md index 7bb8f458c0b..8e97f6f6496 100644 --- a/src/content/en/2022/javascript.md +++ b/src/content/en/2022/javascript.md @@ -8,7 +8,7 @@ reviewers: [mgechev, pankajparkar, NishuGoel, housseindjirdeh, kevinfarrugia, tu analysts: [NishuGoel, kevinfarrugia] editors: [DesignrKnight, rviscomi] translators: [] -malchata_bio: Jeremy Wagner is a technical writer for Google on performance and Core Web Vitals. He has also written for A List Apart, CSS-Tricks, and Smashing Magazine. Jeremy will someday relocate to the remote wilderness where sand has not yet been taught to think. Until then, he continues to reside in Minnesota’s Twin Cities with his wife and stepdaughters, bemoaning the existence of strip malls. +malchata_bio: Jeremy Wagner is a technical writer for Google on performance and Core Web Vitals. He has also written for A List Apart, CSS-Tricks, and Smashing Magazine. Jeremy will someday relocate to the remote wilderness where sand has not yet been taught to think. Until then, he continues to reside in Minnesota's Twin Cities with his wife and stepdaughters, bemoaning the existence of strip malls. results: https://docs.google.com/spreadsheets/d/1vOeFUyfEtWRen3Xj57ZsWav40n5tlcJoV0HmAxmNE_I/ featured_quote: The state of JavaScript is a constantly evolving phenomenon. It's clear that we have an increased reliance on it more than ever, but that spells trouble for the collective user experience of the web. We need to do all we can—and more—to stem the tide of how much JavaScript we ship on production websites. featured_stat_1: 26% diff --git a/src/content/en/2022/mobile-web.md b/src/content/en/2022/mobile-web.md index 7d7876c2281..b3d8e8ba21f 100644 --- a/src/content/en/2022/mobile-web.md +++ b/src/content/en/2022/mobile-web.md @@ -28,7 +28,7 @@ This chapter will outline the state of the web in 2022 when it is accessed from ## Worldwide connectivity -As seems to always be the case, we are living in a more connected world this year than the world has ever experienced. The evolution of mobile technology and mobile web has been fueled not only by more than two years of even more digital-focused commerce caused by the COVID-19 pandemic, but also the growth and evolution of 5G communication networks, cloud and hybrid-cloud computing environments, and the growing adoption of digital and voice assistants, “casting” technology, and IoT. +As seems to always be the case, we are living in a more connected world this year than the world has ever experienced. The evolution of mobile technology and mobile web has been fueled not only by more than two years of even more digital-focused commerce caused by the COVID-19 pandemic, but also the growth and evolution of 5G communication networks, cloud and hybrid-cloud computing environments, and the growing adoption of digital and voice assistants, "casting" technology, and IoT. New generations are getting involved in social media and have earlier access to mobile technology, and it is more readily socially acceptable than ever before. So, the growth of connectivity marches on, with no end in sight, and children, teens, and young adults of today—colloquially referred to as _digital natives_ because they were born into the digitally connected world—are sure to push the evolution of mobile technology, mobile web, and connectivity to new highs. All this progress makes the newest technology of today look foundational and fundamental for technologies of the future. @@ -59,7 +59,7 @@ The value of the mobile web is largely in its ability to seamlessly connect peop ### Alternative protocol links -Being that mobile devices are so critical in people’s daily communication, it can be interesting to evaluate the most common types of link formatting that is present in the mobile web, something called _alternative protocol links_. Rather than linking one page on a website to another page on a website, these alternative protocols link to a type of activity other than web browsing. +Being that mobile devices are so critical in people's daily communication, it can be interesting to evaluate the most common types of link formatting that is present in the mobile web, something called _alternative protocol links_. Rather than linking one page on a website to another page on a website, these alternative protocols link to a type of activity other than web browsing. {{ figure_markup( image="alt-protocols.png", @@ -127,11 +127,11 @@ Of pages with at least one input, 47% of them use one or more advanced input typ In general, the use of specialized input fields and protocols can help make visitor interactions more engaging, useful, and efficient. It is unfortunate that it is still quite common for input fields and related functionality to be so often overlooked on the mobile web, but it is not entirely disheartening. These types of mobile controls have been around for many years, but they may be growing outdated or may now be executed by web app functionality and JavaScript, rather than by the traditional methods of coding that are expected in this type of analysis. -Similarly, with the evolution of deep links, which can open and directly navigate to a deep screen within a native app, specialized input fields might not be as necessary. In some cases, brands may try to push visitors from a website to an app, if they believe that it will provide users with a better experience or have better overall conversion statistics than the website. This is especially true when apps are the main focus of the company, or when the apps are being more actively updated and maintained than the website. This is rarely technically necessary, since both websites and apps can basically complete all of the necessary tasks, so it is mostly about the brand’s preference, or their own internal success metrics. +Similarly, with the evolution of deep links, which can open and directly navigate to a deep screen within a native app, specialized input fields might not be as necessary. In some cases, brands may try to push visitors from a website to an app, if they believe that it will provide users with a better experience or have better overall conversion statistics than the website. This is especially true when apps are the main focus of the company, or when the apps are being more actively updated and maintained than the website. This is rarely technically necessary, since both websites and apps can basically complete all of the necessary tasks, so it is mostly about the brand's preference, or their own internal success metrics. The variations on input fields are generally included to make web interaction more profitable for the company and more efficient for the user. They are often associated with digital checkout processes, and thus, can directly impact the bottom line. For some brands, the importance of the functionality may make it more likely that developers push users to a native app to complete a purchase, in order to streamline the processing, leverage saved user loyalty information, or speed up the completion of the transaction. This perception that native apps are better for this kind of interaction seems misguided though. Now, most consumers expect to have a smooth and seamless experience wherever they begin their encounter, rather than being forced to transition from web to app or vice versa. Whenever possible, parity between app and web functionality should be a top priority and advanced input methods can help with this, especially for things that impact the bottom line, like checkout processes. -It is possible that traditional input fields—whether they are link protocols, input types, or advanced input types—may just be handled by deep links to apps, and these are handled differently. The protocols for linking to apps that may be replacing some web functionality is broadly called deep linking, or _Universal Links_ on iOS and _Android App Links_ on Android. In code, these links look just like a regular web link, and the launching of the app is handled by a web app manifest file hosted in the `/well-known` directory at the root of the website. That said, it is hard to make assumptions about what changes and variations in these numbers mean in a practical interpretation, because we don’t know if losses and gains are absolute, or if there is just a transitioning of technology and norms in these aspects of the mobile web. +It is possible that traditional input fields—whether they are link protocols, input types, or advanced input types—may just be handled by deep links to apps, and these are handled differently. The protocols for linking to apps that may be replacing some web functionality is broadly called deep linking, or _Universal Links_ on iOS and _Android App Links_ on Android. In code, these links look just like a regular web link, and the launching of the app is handled by a web app manifest file hosted in the `/well-known` directory at the root of the website. That said, it is hard to make assumptions about what changes and variations in these numbers mean in a practical interpretation, because we don't know if losses and gains are absolute, or if there is just a transitioning of technology and norms in these aspects of the mobile web. Looking at this topic in another light, it may also be too high of an expectation that developers specifically code the input types and variations for everything on their site. It may be possible for mobile browsers to do more of the heavy lifting in determining what the right action or keyboard layout is for a particular link or input field, based on obvious clues from the code or previous user interactions. Browsers may even be able to leverage this very research to optimize experiences like that. @@ -140,7 +140,7 @@ For example, if every user that clicks on a particular input field switches to t ## Accessibility on the mobile web -Mobile devices are cheaper, lighter, and more portable than computers, so they house a lot of potential to help populations that have historically been ignored or marginalized by technology, often with only minor tweaks to a site’s accessibility. <a hreflang="en" href="https://web.dev/accessibility/#what-is-accessibility">According to Google</a>, true accessibility on the web means that “the site's content is available, and its functionality can be operated by literally anyone.” In a more detailed explanation, Google offers that: +Mobile devices are cheaper, lighter, and more portable than computers, so they house a lot of potential to help populations that have historically been ignored or marginalized by technology, often with only minor tweaks to a site's accessibility. <a hreflang="en" href="https://web.dev/accessibility/#what-is-accessibility">According to Google</a>, true accessibility on the web means that "the site's content is available, and its functionality can be operated by literally anyone." In a more detailed explanation, Google offers that: <blockquote> Accessibility, then, refers to the experience of users who might be outside the narrow range of the "typical" user, who might access or interact with things differently than you expect. Specifically, it concerns users who are experiencing some type of impairment or disability - and bear in mind that that experience might be non-physical or temporary. @@ -161,7 +161,7 @@ Color contrast is an important aspect of mobile web accessibility for a large va Even people with perfect vision can sometimes struggle to consume mobile web content on a screen when the screen is dirty, has a lot of glare, or the user is in bright sunlight. A high contrast ratio between the colors of a mobile site can help make it easier to use and appreciate, even in bad conditions and even for people with perfect vision. -That said, many people don’t have perfect vision and use glasses or contact lenses to help them see. People with perfect vision can expect their vision to eventually degrade as they age, at least to some degree, so this accessibility standard is one that we can expect to impact everyone, albeit eventually. +That said, many people don't have perfect vision and use glasses or contact lenses to help them see. People with perfect vision can expect their vision to eventually degrade as they age, at least to some degree, so this accessibility standard is one that we can expect to impact everyone, albeit eventually. {{ figure_markup( caption="Percent of mobile pages with sufficient color contrast.", @@ -174,7 +174,7 @@ That said, many people don’t have perfect vision and use glasses or contact le Given the stakes, it is sad that only 23% of mobile sites this year actually have adequate color contrast. This is only one full percentage point up from the 2021 statistic (22%), so it is an improvement, but not a substantial improvement. When we look back further, this statistic has actually been 22% since 2019, so there has been almost no improvement in 4 years - Disappointing for something that is widely considered the most impactful accessibility standard on the web. -According to the <a hreflang="en" href="https://accessibility.digital.gov/visual-design/color-and-contrast/">US General Services Administration</a>, site owners should “make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.” The <a hreflang="en" href="https://www.w3.org/TR/mobile-accessibility-mapping/#h-contrast">W3C</a> backs this ratio and also adds an enhanced guideline that calls for “a contrast of at least 7:1 (or 4.5:1 for large-scale text).” Obviously there are more mobile sites that miss the mark for _enhanced accessibility,_ making that statistic likely far below the 23% that meet the basic requirements for color contrast on mobile sites. +According to the <a hreflang="en" href="https://accessibility.digital.gov/visual-design/color-and-contrast/">US General Services Administration</a>, site owners should "make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text." The <a hreflang="en" href="https://www.w3.org/TR/mobile-accessibility-mapping/#h-contrast">W3C</a> backs this ratio and also adds an enhanced guideline that calls for "a contrast of at least 7:1 (or 4.5:1 for large-scale text)." Obviously there are more mobile sites that miss the mark for _enhanced accessibility,_ making that statistic likely far below the 23% that meet the basic requirements for color contrast on mobile sites. If enhancing the perceivability of a site by improving the color contrast and making it actually usable is not enough of an incentive, having a minimum level of contrast between text and background colors has long been an important element for ranking in Google searches as well. It started as a means of preventing spammers from including hidden text on websites, which was often white text on a white background. Later, Google moved it over to be part of the original <a hreflang="en" href="https://developers.google.com/search/mobile-sites/get-started">Mobile Friendly</a> guidelines, and now is simply included as part of their general guidelines for designing websites that are good for users. @@ -196,7 +196,7 @@ Having appropriately sized tap targets makes it less likely that a user will err ) }} -The minimum size for a tap target is generally considered to be no smaller than 48 pixels by 48 pixels, which is a rough estimation of the size of a finger being used on a touchscreen. Tap targets are also expected to be a minimum of 8 pixels apart from each other in order to pass any of Google’s evaluations. In our research, 42% of mobile sites had sufficient tap targets, which is disappointing as less than half of the sites manage to universally have appropriately sized tap targets. +The minimum size for a tap target is generally considered to be no smaller than 48 pixels by 48 pixels, which is a rough estimation of the size of a finger being used on a touchscreen. Tap targets are also expected to be a minimum of 8 pixels apart from each other in order to pass any of Google's evaluations. In our research, 42% of mobile sites had sufficient tap targets, which is disappointing as less than half of the sites manage to universally have appropriately sized tap targets. {{ figure_markup( image="tap-target-failures.png", @@ -213,9 +213,9 @@ Pages that fail the audit generally have more than one failing link. The median ### Zooming and scaling -Mobile devices have become a big part of daily life for most people, and the expectation is that interaction with mobile web content should be quick and easy. How websites handle zooming and scaling can go a long way to improving interactions on mobile. There are different takes on this, and while most will agree that you need to set a proper initial scale in the viewport for mobile users (`<meta name="viewport" content="width=device-width, initial-scale=1">`), there is not universal agreement about the second part of a viewport setting, which controls if you should or shouldn’t disable scaling and zooming (`…user-scalable=no">` or perhaps `…user-scalable=yes">`). Most authorities, <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/proposed/">including the W3C</a>, suggest that restricting scaling and zooming can create a bad user experience and adversely impact accessibility, so it should be avoided. Settings for `minimum-scale` and `maximum-scale` can also be set, and these are often safer limits, if a developer believes that limits are needed. +Mobile devices have become a big part of daily life for most people, and the expectation is that interaction with mobile web content should be quick and easy. How websites handle zooming and scaling can go a long way to improving interactions on mobile. There are different takes on this, and while most will agree that you need to set a proper initial scale in the viewport for mobile users (`<meta name="viewport" content="width=device-width, initial-scale=1">`), there is not universal agreement about the second part of a viewport setting, which controls if you should or shouldn't disable scaling and zooming (`…user-scalable=no">` or perhaps `…user-scalable=yes">`). Most authorities, <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/proposed/">including the W3C</a>, suggest that restricting scaling and zooming can create a bad user experience and adversely impact accessibility, so it should be avoided. Settings for `minimum-scale` and `maximum-scale` can also be set, and these are often safer limits, if a developer believes that limits are needed. -Zooming can be a good workaround for a user who is visually impaired, or anyone who just doesn’t have their reading glasses handy when they need them. On the other hand, it can be hard to build sites that universally scale well on mobile. There are many different font size settings that would need to be accommodated, and getting it wrong can make the site much harder to interact with. This is why some designers prefer to prevent scaling and zooming, to ensure that the page renders in a highly predictable way that is not impacted by scaling and zooming. While this is true, disabling zooming and scaling impedes the usability of a mobile site, and thus, should be avoided for the sake of accessibility. +Zooming can be a good workaround for a user who is visually impaired, or anyone who just doesn't have their reading glasses handy when they need them. On the other hand, it can be hard to build sites that universally scale well on mobile. There are many different font size settings that would need to be accommodated, and getting it wrong can make the site much harder to interact with. This is why some designers prefer to prevent scaling and zooming, to ensure that the page renders in a highly predictable way that is not impacted by scaling and zooming. While this is true, disabling zooming and scaling impedes the usability of a mobile site, and thus, should be avoided for the sake of accessibility. {{ figure_markup( image="zoom-scale-rank.png", @@ -229,7 +229,7 @@ Zooming can be a good workaround for a user who is visually impaired, or anyone Of the mobile websites in the top 1,000 rank, 40% of them had disabled zooming and scaling, down from about 45% in 2021. When you look at the top 10,000, 36% of mobile sites had disabled scaling and zooming, and this is down from about 41% in 2021. Looking at the other end of the scale, the widest ranking group, which includes all the sites in the data set, 28% of sites prevented zooming and scaling, down from about 29% in 2021. Overall, what we can see here is that the prevalence of this accessibility-limiting setting is on the decline, especially for the most popular sites, which is good news, but the fact that more than half of the sites are still using this type of limiting setting is disappointing. -As a whole, we know that accessibility concerns are not going to go away, and as time progresses, meeting accessibility standards will become a basic expectation—especially on mobile devices. As is often the case, the use cases for mobile interactivity are more broad-ranging compared to desktop, so users’ expectations are higher, even though the development constraints for web mobile content make it more difficult to actually achieve. Nevertheless, accessibility is becoming a critical component of good web design, and should be embraced to create a more inclusive mobile web. It is good to see that there is increasing adherence to basic accessibility guidelines, but there is still considerable room for improvement. +As a whole, we know that accessibility concerns are not going to go away, and as time progresses, meeting accessibility standards will become a basic expectation—especially on mobile devices. As is often the case, the use cases for mobile interactivity are more broad-ranging compared to desktop, so users' expectations are higher, even though the development constraints for web mobile content make it more difficult to actually achieve. Nevertheless, accessibility is becoming a critical component of good web design, and should be embraced to create a more inclusive mobile web. It is good to see that there is increasing adherence to basic accessibility guidelines, but there is still considerable room for improvement. For many years, Google has created a positive impact on the web by rewarding websites that meet certain basic requirements with better rankings. They have done it for load time, performance, security and mobile-friendliness, but not yet for accessibility. Google does write and support a lot of advancements for web accessibility in their official communications, but there is an opportunity to do more. While many accessibility updates do naturally have a positive impact on website rankings, it may be time for Google to explicitly incentivize some level of compliance to basic accessibility standards with better rankings—not just because they can enhance the semantic understanding of a website, but also because they simply make the web a better place for everyone. @@ -243,7 +243,7 @@ One of the most complex problems that site owners have to address on the mobile <a hreflang="en" href="https://web.dev/articles/vitals">Core Web Vitals</a> is a collection of performance metrics that Google compiles to evaluate different websites, and specifically, different <a hreflang="en" href="https://support.google.com/webmasters/answer/9205520#page_groups">page groups</a> on websites to describe how they perform in both mobile and desktop page settings. The elements of Core Web Vitals include loading, interactivity, and layout stability. -All three are aspects of how users perceive the performance of a page that can help or hinder the loading experience for users. This type of evaluation began in May of 2020, and these metrics are taken into account in Google’s ranking algorithm specifically as an aspect of the <a hreflang="en" href="https://developers.google.com/search/docs/advanced/experience/page-experience">page experience</a> evaluation, and thus, the metrics are organized around thresholds of performance that are either considered “good”, “needs improvement”, or “poor”. For a site to be considered “good”, 75% of visits must meet the prescribed thresholds for each of the Core Web Vitals metrics. +All three are aspects of how users perceive the performance of a page that can help or hinder the loading experience for users. This type of evaluation began in May of 2020, and these metrics are taken into account in Google's ranking algorithm specifically as an aspect of the <a hreflang="en" href="https://developers.google.com/search/docs/advanced/experience/page-experience">page experience</a> evaluation, and thus, the metrics are organized around thresholds of performance that are either considered "good", "needs improvement", or "poor". For a site to be considered "good", 75% of visits must meet the prescribed thresholds for each of the Core Web Vitals metrics. {{ figure_markup( image="good-cwv.png", @@ -279,7 +279,7 @@ TTFB is not a Core Web Vitals metric itself, but it has a direct impact on all l ) }} -As you can see above, there are only minor fluctuations in the percent of mobile sites that are considered “good” from 2020 to 2022, going from 41% in 2020 down to 39% in 2021, then back up to 40% in 2022. +As you can see above, there are only minor fluctuations in the percent of mobile sites that are considered "good" from 2020 to 2022, going from 41% in 2020 down to 39% in 2021, then back up to 40% in 2022. #### Largest Contentful Paint (LCP) @@ -296,7 +296,7 @@ As you can see above, there are only minor fluctuations in the percent of mobile ) }} -LCP performance is improving. In 2020, 43% of mobile sites had a LCP assessed as “good”. In 2021, this number improved to 45% of mobile sites. There was a significant jump in 2022 in which 51% of mobile sites had good LCP performance. The [Performance](./performance) chapter explores some possible explanations for why this may have happened. +LCP performance is improving. In 2020, 43% of mobile sites had a LCP assessed as "good". In 2021, this number improved to 45% of mobile sites. There was a significant jump in 2022 in which 51% of mobile sites had good LCP performance. The [Performance](./performance) chapter explores some possible explanations for why this may have happened. ### Images @@ -306,7 +306,7 @@ Images can contribute a lot to providing a good mobile experience, but they can #### Appropriately sized images -Using images that are sized properly for a mobile device has long been one of the easiest ways that anyone could improve mobile load time. In the early days of the mobile web, site owners would often simply send the same images to desktop users as they would for mobile users, because ultimately, mobile browsers would scale and resize the images to fit in the mobile rendering of the page. Unfortunately, this didn’t work well, because it ended up requiring a lot of extra data to send rich, high-quality images that were better suited for a desktop viewing experience. +Using images that are sized properly for a mobile device has long been one of the easiest ways that anyone could improve mobile load time. In the early days of the mobile web, site owners would often simply send the same images to desktop users as they would for mobile users, because ultimately, mobile browsers would scale and resize the images to fit in the mobile rendering of the page. Unfortunately, this didn't work well, because it ended up requiring a lot of extra data to send rich, high-quality images that were better suited for a desktop viewing experience. {{ figure_markup( image="appropriately-sized-images.png", @@ -318,7 +318,7 @@ Using images that are sized properly for a mobile device has long been one of th ) }} -Given Google’s increased focus on rewarding good performance with their Core Web Vitals program, you would expect that more sites would be optimizing their images. However, it’s interesting to see that sites are actually having fewer optimized images over time. The figure above shows that there is a decrease in the percentage of pages with properly sized images since [2020](../2020/mobile-web#images), when 59% of sites had properly sized images. But in 2022, that number is down to only 54%. +Given Google's increased focus on rewarding good performance with their Core Web Vitals program, you would expect that more sites would be optimizing their images. However, it's interesting to see that sites are actually having fewer optimized images over time. The figure above shows that there is a decrease in the percentage of pages with properly sized images since [2020](../2020/mobile-web#images), when 59% of sites had properly sized images. But in 2022, that number is down to only 54%. #### Responsive images @@ -357,12 +357,12 @@ Lazy-loading is the process of assigning different loading priority levels to el ) }} -<a hreflang="en" href="https://web.dev/browser-level-image-lazy-loading/">Native lazy-loading</a> has been available since 2019, which allows browsers to do the complex calculations in the most efficient way possible, and only requires that site owners tag images with either `lazy` or `eager`. This simple tagging can be a great boon for page and site performance, and can also save a lot of time and effort associated with maintaining your own lazy-loading code. As long as you don’t <a hreflang="en" href="https://web.dev/articles/lcp-lazy-loading">inadvertently lazy-load your LCP image</a> at the top of the page, it is an easy win, but we found that only 25% of sites are currently using the `loading=lazy` attribute for their images. +<a hreflang="en" href="https://web.dev/browser-level-image-lazy-loading/">Native lazy-loading</a> has been available since 2019, which allows browsers to do the complex calculations in the most efficient way possible, and only requires that site owners tag images with either `lazy` or `eager`. This simple tagging can be a great boon for page and site performance, and can also save a lot of time and effort associated with maintaining your own lazy-loading code. As long as you don't <a hreflang="en" href="https://web.dev/articles/lcp-lazy-loading">inadvertently lazy-load your LCP image</a> at the top of the page, it is an easy win, but we found that only 25% of sites are currently using the `loading=lazy` attribute for their images. ### Layout stability -Layout stability is an important part of performance that has recently been pushed to the fore with Google’s introduction of Core Web Vitals. Elements of Core Web Vitals are designed to measure and assess the loading experience of a page, and layout stability of a page is an important part of that. If a page is constantly moving and re-painting while it is being loaded, this makes it seem like the page is taking much longer to load than it otherwise could if the experience were more predictable and once things load, they remain exactly in the place where they have loaded. +Layout stability is an important part of performance that has recently been pushed to the fore with Google's introduction of Core Web Vitals. Elements of Core Web Vitals are designed to measure and assess the loading experience of a page, and layout stability of a page is an important part of that. If a page is constantly moving and re-painting while it is being loaded, this makes it seem like the page is taking much longer to load than it otherwise could if the experience were more predictable and once things load, they remain exactly in the place where they have loaded. Since the loading order of content can be different under different conditions, or in different browsers, building and planning around layout stability is a good way to ensure a smooth loading experience regardless of the circumstances. The most relevant metrics for evaluating layout stability is Cumulative Layout Shift (CLS) but other aspects of performance like image sizing and lazy loading can also impact layout stability. @@ -375,7 +375,7 @@ A low CLS represents a visually stable layout, which makes the experience less f The screen size of the device requesting the page can have a significant impact on the way elements are laid out, and how much they move when shift-causing elements are loaded. -CLS is measured as a score, and the highest instance of movement in any session window during the page lifespan is what is measured. This <a hreflang="en" href="https://web.dev/articles/cls-web-tooling">changed</a> in 2021, when CLS was previously measured as the sum of all individual shift scores on a page. Google considers scores of 0.1 or less as “good” and scores over 0.25 to be “poor”. +CLS is measured as a score, and the highest instance of movement in any session window during the page lifespan is what is measured. This <a hreflang="en" href="https://web.dev/articles/cls-web-tooling">changed</a> in 2021, when CLS was previously measured as the sum of all individual shift scores on a page. Google considers scores of 0.1 or less as "good" and scores over 0.25 to be "poor". {{ figure_markup( image="good-cls.png", @@ -387,7 +387,7 @@ CLS is measured as a score, and the highest instance of movement in any session ) }} -The percentage of websites with “good” CLS on mobile has improved significantly to 74%, up from 62% last year. +The percentage of websites with "good" CLS on mobile has improved significantly to 74%, up from 62% last year. ### Responsiveness @@ -397,7 +397,7 @@ Responsiveness is always good in a mobile scenario, but it can have a layered me #### First Input Delay (FID) -<a hreflang="en" href="https://web.dev/articles/fid">First Input Delay</a> (FID) describes the responsiveness of a site, especially related to how long it takes for a site to respond after a user first clicks on a page element. A low FID is desirable, especially on mobile web interactions, where the responsiveness of a mobile site should ideally rival the responsiveness of a comparable native app, to make the interactions feel equally fluid and satisfying. Google considers a site to have “good” FID if at least 75% of experiences are under 100 ms. +<a hreflang="en" href="https://web.dev/articles/fid">First Input Delay</a> (FID) describes the responsiveness of a site, especially related to how long it takes for a site to respond after a user first clicks on a page element. A low FID is desirable, especially on mobile web interactions, where the responsiveness of a mobile site should ideally rival the responsiveness of a comparable native app, to make the interactions feel equally fluid and satisfying. Google considers a site to have "good" FID if at least 75% of experiences are under 100 ms. {{ figure_markup( image="good-fid.png", @@ -409,12 +409,12 @@ Responsiveness is always good in a mobile scenario, but it can have a layered me ) }} -There has been a consistent growth in the percent of mobile sites that have “good” FID in the past three years, going from only 80% in 2020 to 90% in 2021, and reaching 92% in 2022. +There has been a consistent growth in the percent of mobile sites that have "good" FID in the past three years, going from only 80% in 2020 to 90% in 2021, and reaching 92% in 2022. #### Interaction to Next Paint (INP) -<a hreflang="en" href="https://web.dev/articles/inp">Interaction to Next Paint</a> (INP) is an experimental metric from Google that is used to measure responsiveness and response time on a page when a user interacts with it. A low INP is desirable because it means that the page was able to respond quickly to user interactions without substantial delays waiting for content to paint after it is requested. A “good” INP is 200 ms or less, and a poor one is anything over 500 ms. Eventually, INP could be added to the official Core Web Vitals metrics, but for now it is still being tested to make sure that it is a reliable and consistent metric that site owners will find useful. +<a hreflang="en" href="https://web.dev/articles/inp">Interaction to Next Paint</a> (INP) is an experimental metric from Google that is used to measure responsiveness and response time on a page when a user interacts with it. A low INP is desirable because it means that the page was able to respond quickly to user interactions without substantial delays waiting for content to paint after it is requested. A "good" INP is 200 ms or less, and a poor one is anything over 500 ms. Eventually, INP could be added to the official Core Web Vitals metrics, but for now it is still being tested to make sure that it is a reliable and consistent metric that site owners will find useful. {{ figure_markup( caption="Percent of websites that have good INP on mobile.", @@ -425,7 +425,7 @@ There has been a consistent growth in the percent of mobile sites that have “g ) }} -This is the first year that INP data is available to us, so we don’t have any historical context, but what we see is that 55% of websites have good INP on mobile. This is especially interesting because of how much worse the mobile web performs on INP compared to FID. If INP does end up replacing FID as a Core Web Vital, responsiveness will become a much more prevalent issue. +This is the first year that INP data is available to us, so we don't have any historical context, but what we see is that 55% of websites have good INP on mobile. This is especially interesting because of how much worse the mobile web performs on INP compared to FID. If INP does end up replacing FID as a Core Web Vital, responsiveness will become a much more prevalent issue. ## Conclusion diff --git a/src/content/en/2022/seo.md b/src/content/en/2022/seo.md index 5f6d9a26cd8..7d05be66c88 100644 --- a/src/content/en/2022/seo.md +++ b/src/content/en/2022/seo.md @@ -11,7 +11,7 @@ results: https://docs.google.com/spreadsheets/d/1qBQWxNKIAVJNOFwGlslT7AW0VAoK85M SophieBrannon_bio: Sophie is the Client Services Director at UK-based agency Absolute Digital Media and specializes in SEO strategy and content marketing in highly competitive industries such as health and finance. Sophie is a conference speaker and industry blogger, and has proven experience in strategizing and delivering award-winning campaigns on a local, national and international scale. itamarblauer_bio: Itamar Blauer is an SEO expert based in London. He has a proven track-record of increasing rankings with SEO that is UX-focused, data-backed, and creative. mordy-oberstein_bio: Mordy Oberstein is the Head of SEO Branding at Wix. He also serves as a consultant for SEMrush and sits behind the mic of multiple SEO podcasts, including the SERP's Up podcast. -featured_quote: The implementation of structured data in the HTML of a page has continually increased. In 2021, 41.8% of desktop pages and 42.5% of mobile pages used structured data. In 2022, it’s risen to 44% of desktop pages and 45.1% of mobile pages that have structured data within their HTML. +featured_quote: The implementation of structured data in the HTML of a page has continually increased. In 2021, 41.8% of desktop pages and 42.5% of mobile pages used structured data. In 2022, it's risen to 44% of desktop pages and 45.1% of mobile pages that have structured data within their HTML. featured_stat_1: 84.75% featured_stat_label_1: Sites adopting HTTPS featured_stat_2: 66% @@ -22,7 +22,7 @@ featured_stat_label_3: Images using lazy loading image properties ## Introduction -Search engine optimization (SEO) is a digital technique used to improve a website or page's visibility so that it organically ranks higher in search engine results. It often combines technical configuration, content creation, and link acquisition, with the goal of improving relevance for a searcher’s query and intent. SEO has continued to grow in popularity and become one of the most popular digital marketing channels. +Search engine optimization (SEO) is a digital technique used to improve a website or page's visibility so that it organically ranks higher in search engine results. It often combines technical configuration, content creation, and link acquisition, with the goal of improving relevance for a searcher's query and intent. SEO has continued to grow in popularity and become one of the most popular digital marketing channels. {{ figure_markup( image="seo-term-trends.png", @@ -33,7 +33,7 @@ Search engine optimization (SEO) is a digital technique used to improve a websit ) }} -With custom metrics that expose some new, never-before-seen insights, we have analyzed more than eight million homepages across the web, comparing our findings to those from [2021](../2021/seo) and, in some instances, from [2020](../2020/seo). Note: Our data, particularly from Lighthouse and the HTTP Archive, is limited to just websites’ homepages, not site wide crawls. Learn more about these limitations in our [Methodology](./methodology). +With custom metrics that expose some new, never-before-seen insights, we have analyzed more than eight million homepages across the web, comparing our findings to those from [2021](../2021/seo) and, in some instances, from [2020](../2020/seo). Note: Our data, particularly from Lighthouse and the HTTP Archive, is limited to just websites' homepages, not site wide crawls. Learn more about these limitations in our [Methodology](./methodology). Read on for more about how search engine-friendly the web is. @@ -42,11 +42,11 @@ Read on for more about how search engine-friendly the web is. Crawling and Indexing are the backbone of what Google and other search engines ultimately display on their search results pages. Without them, ranking simply cannot happen. -The first step in the process is discovering web pages via crawling. While numerous pages are crawled, fewer of them are actually indexed, which is essentially stored and categorized in a search engine’s database. Based on a searcher’s query, matching indexed pages are then served. +The first step in the process is discovering web pages via crawling. While numerous pages are crawled, fewer of them are actually indexed, which is essentially stored and categorized in a search engine's database. Based on a searcher's query, matching indexed pages are then served. This section deals with the state of the web, as it pertains to bots crawling and indexing websites. What directives are sites giving search engines bots? What are sites doing to ensure Google serves the right page and not a near duplicate in search results? -Let’s explore the web and some of its facets that impact crawlability and indexability. +Let's explore the web and some of its facets that impact crawlability and indexability. ### Robots.txt @@ -67,11 +67,11 @@ The robots.txt file instructs bots, including search engine crawlers, as to wher There has been a nominal increase in the percentage of sites whose robots.txt files return a 200 status code in 2022 compared to 2021. In 2022, 81.5% of robots.txt files for desktop sites returned a 200 status code while 82.4% of mobile sites returned the same. This stands in comparison to 81% and 81.9% of robots.txt files on desktop and mobile sites, respectively, returning a 200 status code in 2021. -Concurrently, there was just a small reduction in the percentage of robots.txt files returning a 404 status code in 2022 compared to 2021. Last year, 17.3% of robots.txt files for desktop sites returned a 404 while 16.5% of mobile sites’ robots.txt files returned that status code. In 2022, it’s just 16.5% for desktop and 15.8% for mobile sites’ robots.txt files that are returning a 404 status code. +Concurrently, there was just a small reduction in the percentage of robots.txt files returning a 404 status code in 2022 compared to 2021. Last year, 17.3% of robots.txt files for desktop sites returned a 404 while 16.5% of mobile sites' robots.txt files returned that status code. In 2022, it's just 16.5% for desktop and 15.8% for mobile sites' robots.txt files that are returning a 404 status code. Like in 2021, the remaining status codes are associated with a minimal number of robots.txt files. -Note: The above data does not indicate how well optimized a robots.txt file is. Even a file returning a 200 status code can contain directives that are perhaps not in the best interest of a site’s overall health. +Note: The above data does not indicate how well optimized a robots.txt file is. Even a file returning a 200 status code can contain directives that are perhaps not in the best interest of a site's overall health. #### Robots.txt size @@ -87,7 +87,7 @@ Note: The above data does not indicate how well optimized a robots.txt file is. As expected, the overwhelming majority of robots.txt files were quite small, weighing between 0-100 KB. -Google’s max limit for a robots.txt file is 500 KiB. Any directives found after the file reaches that limit are ignored by the search engine. A very small number of robots.txt files fall into that category. Specifically, just .005% of both desktop and mobile sites contain a robots.txt file that is above Google’s max limit (which is consistent with 2021’s data). In cases where the file size exceeds limits, <a hreflang="en" href="https://developers.google.com/search/docs/advanced/robots/robots_txt">Google recommends</a> consolidating directives. +Google's max limit for a robots.txt file is 500 KiB. Any directives found after the file reaches that limit are ignored by the search engine. A very small number of robots.txt files fall into that category. Specifically, just .005% of both desktop and mobile sites contain a robots.txt file that is above Google's max limit (which is consistent with 2021's data). In cases where the file size exceeds limits, <a hreflang="en" href="https://developers.google.com/search/docs/advanced/robots/robots_txt">Google recommends</a> consolidating directives. #### Robots.txt user-agent usage @@ -105,7 +105,7 @@ Google’s max limit for a robots.txt file is 500 KiB. Any directives found afte Most websites today (74.9% desktop and 76.1% mobile) do not indicate a specific user-agent within the robots.txt file, meaning the directives in the file apply to all user-agents. This is consistent with the data from 2020 when 74% of desktop robots.txt files and 75.2% of mobile robots.txt files did not specify a particular user-agent. -Interestingly, Bingbot did not fall into the top 10 most specified user-agents. As for SEO tools, much like in 2021, both Majestic’s and Ahrefs’ bots were in the top 5 most specified user-agents, while Semrush’s bot rounded out the top 15 most specific user-agents. +Interestingly, Bingbot did not fall into the top 10 most specified user-agents. As for SEO tools, much like in 2021, both Majestic's and Ahrefs' bots were in the top 5 most specified user-agents, while Semrush's bot rounded out the top 15 most specific user-agents. In terms of search engines, Googlebot leads the pack with 3.3% of robots.txt files specifying the user-agent while Bingbot comes in at 2.5%. Interestingly, there was nearly a full percentage point difference in 2021 between mobile site robots.txt files and desktop files specifying Bingbot. Such is not the case in 2022 where the data is essentially uniform. @@ -115,7 +115,7 @@ Of note, Yandexbot was specified in just 0.5% of robots.txt files in 2021. By 20 In January 2022, Google introduced a new robots tag called _indexifembedded_. The tag offers control over indexation when content is embedded in an iframe on a page, even when a noindex tag has been applied. -Let’s start by determining the percentage of pages for which the new tag is possibly applicable. +Let's start by determining the percentage of pages for which the new tag is possibly applicable. {{ figure_markup( image="pages-with-iframe.png", @@ -145,9 +145,9 @@ Of the pages that have adopted the `indexifembedded` tag, 98.3% of them implemen ### Invalid head elements -The `<head>` element serves as the container for a page’s metadata. From an SEO point of view, a page’s title tag and meta description reside within the `<head>` element, as do robots meta tags. +The `<head>` element serves as the container for a page's metadata. From an SEO point of view, a page's title tag and meta description reside within the `<head>` element, as do robots meta tags. -Not all elements, however, belong in the `<head>`. Should Google come across an invalid element in the page’s `<head>`, it assumes that it has reached the end of the `<head>` and <a hreflang="en" href="https://developers.google.com/search/docs/advanced/guidelines/valid-html">will not discover the rest of its contents</a>. +Not all elements, however, belong in the `<head>`. Should Google come across an invalid element in the page's `<head>`, it assumes that it has reached the end of the `<head>` and <a hreflang="en" href="https://developers.google.com/search/docs/advanced/guidelines/valid-html">will not discover the rest of its contents</a>. Our data from 2022 shows 12.7% of desktop pages and 12.6% of mobile pages contain an invalid element in the `<head>`. @@ -179,9 +179,9 @@ Canonical tags are traditionally used when defining duplicate content pages and ) }} -We see from the data that canonical tags usage has increased over the years. In 2019, 48.3% of mobile pages used canonicals. In 2020, this grew to 53.6%. In 2021, this grew even further to 58.5%. And in 2022, it’s increased to 60.6%. +We see from the data that canonical tags usage has increased over the years. In 2019, 48.3% of mobile pages used canonicals. In 2020, this grew to 53.6%. In 2021, this grew even further to 58.5%. And in 2022, it's increased to 60.6%. -Mobile has a higher percentage of canonical attribution than desktop (60.6% vs. 58.7%), which is likely a direct result of single use URLs on mobile. Since the data set in this chapter is limited to home pages, it’s fair to assume that this is the reason for the higher canonical attribution on mobile. According to <a hreflang="en" href="https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls">Google’s guidelines</a>, having a separate mobile site is not recommended. +Mobile has a higher percentage of canonical attribution than desktop (60.6% vs. 58.7%), which is likely a direct result of single use URLs on mobile. Since the data set in this chapter is limited to home pages, it's fair to assume that this is the reason for the higher canonical attribution on mobile. According to <a hreflang="en" href="https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls">Google's guidelines</a>, having a separate mobile site is not recommended. ### HTML vs. HTTP canonical usage @@ -222,7 +222,7 @@ In this section of the chapter, we're looking at different elements of page expe ### HTTPS -In 2021, there was an increased focus on site speed and page experience following Google’s introduction of the Core Web Vitals update, which had been publicized and pushed throughout 2020. While evidence of HTTPS being a ranking factor <a hreflang="en" href="https://developers.google.com/search/blog/2014/08/https-as-ranking-signal">dates back to 2014</a>, the overall focus on page experience since the Core Web Vitals announcement likely had an impact on the adoption of HTTPS across the web. +In 2021, there was an increased focus on site speed and page experience following Google's introduction of the Core Web Vitals update, which had been publicized and pushed throughout 2020. While evidence of HTTPS being a ranking factor <a hreflang="en" href="https://developers.google.com/search/blog/2014/08/https-as-ranking-signal">dates back to 2014</a>, the overall focus on page experience since the Core Web Vitals announcement likely had an impact on the adoption of HTTPS across the web. {{ figure_markup( image="https-usage.png", @@ -234,7 +234,7 @@ In 2021, there was an increased focus on site speed and page experience followin ) }} -We see from the data how more sites are using a secure certificate (HTTPS) at the time of the crawl (taking into account expirations of these certificates). In 2021, 84.3% of desktop pages used HTTPs, and it went up to 87.71% in 2022. On mobile, this increased from 81.2% in 2021 to 84.75% in 2022. Since the announcement of the Core Web Vitals update in 2020 to the present there’s been an increase of nearly 11% on mobile and 10% on desktop. +We see from the data how more sites are using a secure certificate (HTTPS) at the time of the crawl (taking into account expirations of these certificates). In 2021, 84.3% of desktop pages used HTTPs, and it went up to 87.71% in 2022. On mobile, this increased from 81.2% in 2021 to 84.75% in 2022. Since the announcement of the Core Web Vitals update in 2020 to the present there's been an increase of nearly 11% on mobile and 10% on desktop. ### Mobile friendliness @@ -271,7 +271,7 @@ Vary header usage has remained relatively unchanged for the past few years. In 2 ### Legible font sizes -In 2021, 13.5% of mobile pages were not using a legible font size. Thanks to Google’s focus on user experience across all devices, more pages than ever now use a legible font size. Only 11% of mobile pages are still not using a legible font size. +In 2021, 13.5% of mobile pages were not using a legible font size. Thanks to Google's focus on user experience across all devices, more pages than ever now use a legible font size. Only 11% of mobile pages are still not using a legible font size. {{ figure_markup( caption="Sites not using a legible font size.", @@ -288,7 +288,7 @@ Core Web Vitals was a hot topic in SEO throughout 2021 following Google announci Core Web Vitals are a series of standardized metrics that can help developers and SEOs to better understand how a user is experiencing a page. The main metrics are: -* Largest Contentful Paint (LCP) measures how quickly a web page’s main content loads +* Largest Contentful Paint (LCP) measures how quickly a web page's main content loads * First Input Delay (FID) measures how long it takes from when a user interacts with a web page (i.e. clicks a button) to when the browser is able to respond * Cumulative Layout Shift (CLS) measures the visual stability and whether a page shifts within the viewport @@ -358,7 +358,7 @@ For the second year in a row, 98.8% of desktop and mobile pages had `<title>` el #### `<title>` element -The `<title>` element is an on-page ranking factor that provides a strong hint regarding page relevance and may appear on the SERP. In August 2021, <a hreflang="en" href="https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles">Google started rewriting more websites’ titles in their search results</a>. +The `<title>` element is an on-page ranking factor that provides a strong hint regarding page relevance and may appear on the SERP. In August 2021, <a hreflang="en" href="https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles">Google started rewriting more websites' titles in their search results</a>. {{ figure_markup( image="title-words-percentile.png", @@ -424,7 +424,7 @@ For the most part, these stats are relatively unchanged from last year. #### Header tags -Heading elements (`<h1>`, `<h2>`...) are important parts of a page’s structure since they help organize the content on the page. Heading elements are not a direct ranking factor, but they can help Google better understand the content found on the page. +Heading elements (`<h1>`, `<h2>`...) are important parts of a page's structure since they help organize the content on the page. Heading elements are not a direct ranking factor, but they can help Google better understand the content found on the page. {{ figure_markup( image="has-h-elements.png", @@ -440,7 +440,7 @@ The trends around implementation of headings by type in 2022 closely match those Another trend that has carried over is the discrepancy in usage between the h1 and h2. While 72.7% of desktop pages implement an h2, only 65.8% use an h1 (with similar numbers reflected on mobile). -Although there is no definitive explanation for this, one possible reason is that the h1 is often placed above any content. It’s not essential for the natural flow of the content. However, without the h2, there could be a long flow of unstructured content. +Although there is no definitive explanation for this, one possible reason is that the h1 is often placed above any content. It's not essential for the natural flow of the content. However, without the h2, there could be a long flow of unstructured content. {{ figure_markup( image="nonempty-h-elements.png", @@ -452,9 +452,9 @@ Although there is no definitive explanation for this, one possible reason is th ) }} -Overall, much like 2021’s stats, there are relatively few empty H elements found on pages. Additionally, there is little discrepancy between the desktop and mobile data. +Overall, much like 2021's stats, there are relatively few empty H elements found on pages. Additionally, there is little discrepancy between the desktop and mobile data. -There is divergence, however, with the h1. While 65.8% of pages contained an h1 element, 58.5% contained a non-empty h1 element. That’s a 7.3 percentage point difference. Contrast that with the h2, which has just a 1.5 percentage point difference. As noted in the 2021 Web Almanac, this may be a result of the many websites that wrap logo-images in the h1 element on homepages. +There is divergence, however, with the h1. While 65.8% of pages contained an h1 element, 58.5% contained a non-empty h1 element. That's a 7.3 percentage point difference. Contrast that with the h2, which has just a 1.5 percentage point difference. As noted in the 2021 Web Almanac, this may be a result of the many websites that wrap logo-images in the h1 element on homepages. ### Image attributes @@ -492,7 +492,7 @@ The primary purpose of the alt attribute on the `<img>` element is accessibility What we found: -- On the median desktop page, 56.25% of `<img>` tags have the alt attribute. This is a negligible decrease of just a quarter of a percentage point from 2021’s 56.5%. +- On the median desktop page, 56.25% of `<img>` tags have the alt attribute. This is a negligible decrease of just a quarter of a percentage point from 2021's 56.5%. - On the median mobile page, 54.9% of `<img>` tags have the alt attribute. This is a marginal increase from the 54.6% of tags with the alt attribute in 2021. - There is a noticeable change in the median desktop and mobile pages containing `<img>` tags that have blank alt attributes compared to 2021. Last year, the median desktop and mobile pages, respectively had 10.5% and 11.8% `<img>` tags with blank `alt` attributes. In 2022, this figure rose to 12.1% and 12.5% on desktop and mobile, respectively. - The trend towards 0% of median desktop and mobile pages containing `<img>` tags missing the alt attribute continues. On the median desktop page in 2021, 1.4% of the `<img>` tags had blank attributes. It fell to 0% in 2022. @@ -513,9 +513,9 @@ How user agents prioritize the rendering and displaying of images is affected by What we found: -- There has been a significant reduction in the number of pages that do not use any image loading property. In 2021, 83.3% of desktop pages and 83.5% of mobile pages didn’t utilize any image loading property at all. It’s now 78.3% of desktop pages and 77.9% of mobile pages in 2022. +- There has been a significant reduction in the number of pages that do not use any image loading property. In 2021, 83.3% of desktop pages and 83.5% of mobile pages didn't utilize any image loading property at all. It's now 78.3% of desktop pages and 77.9% of mobile pages in 2022. - Conversely, the implementation of loading="lazy" has increased. In 2021, both 15.6% of desktop and mobile pages implemented loading="lazy". This has increased to 19.8% (desktop) and 20.3% (mobile) in 2022. -- The number of pages defaulting to the brower’s loading method has fallen in 2022. On desktop, .07% of pages use loading="auto" and .08% on mobile. In 2021, .01% of pages utilized loading="auto". +- The number of pages defaulting to the brower's loading method has fallen in 2022. On desktop, .07% of pages use loading="auto" and .08% on mobile. In 2021, .01% of pages utilized loading="auto". ### Word count @@ -523,7 +523,7 @@ While content length is not a ranking factor, it is still valuable to assess how #### Rendered word count -Let’s begin with the number of words found on the page once it has been rendered. +Let's begin with the number of words found on the page once it has been rendered. {{ figure_markup( image="visible-words-rendered.png", @@ -541,7 +541,7 @@ Similarly, the median number of rendered words on mobile in 2022 contains 366 wo #### Raw word count -Let’s now examine the number of words contained in a page’s source code prior to the browser executing any JavaScript code or other modifications in the DOM or CSSOM. +Let's now examine the number of words contained in a page's source code prior to the browser executing any JavaScript code or other modifications in the DOM or CSSOM. {{ figure_markup( image="visible-words-raw.png", @@ -553,9 +553,9 @@ Let’s now examine the number of words contained in a page’s source code prio ) }} -Much like the rendered word count, there is a minimal difference between the data in 2022 versus what was found in 2021. For example, the median desktop page’s raw word count was 369 in 2021 compared to 363 in 2022 and median mobile page’s raw word count was 318 which is slightly less than 2021 which saw 321 words as the median. +Much like the rendered word count, there is a minimal difference between the data in 2022 versus what was found in 2021. For example, the median desktop page's raw word count was 369 in 2021 compared to 363 in 2022 and median mobile page's raw word count was 318 which is slightly less than 2021 which saw 321 words as the median. -Here, too, mobile pages contain fewer words than desktop pages across the board. The median mobile page contains a raw word count that is 12.39% less than desktop. As noted above, this is significant because of Google’s mobile-first indexing. +Here, too, mobile pages contain fewer words than desktop pages across the board. The median mobile page contains a raw word count that is 12.39% less than desktop. As noted above, this is significant because of Google's mobile-first indexing. ## Structured Data @@ -571,11 +571,11 @@ Implementing Structured Data has come into increased focus as rich results on th ) }} -The implementation of structured data in the HTML of a page has continually increased. In 2021, 42% of desktop pages and 43% of mobile pages used structured data. In 2022, it’s risen to 44% of desktop pages and 45% of mobile pages that have structured data within their HTML. +The implementation of structured data in the HTML of a page has continually increased. In 2021, 42% of desktop pages and 43% of mobile pages used structured data. In 2022, it's risen to 44% of desktop pages and 45% of mobile pages that have structured data within their HTML. This reflects 2 percentage point increases on both desktop and mobile pages. Two possible explanations for greater adoption could be that a number of Content Management Systems have added automatic structured data markup to their pages, as well as the aforementioned prominence that structured data has played in Google SERPs. -There has also been a great reduction in both mobile and desktop pages that have structured data added via JavaScript where it was not contained within the initial HTML response. In 2021, 1.7% of mobile pages and 1.4% of desktop pages had structured data added via JavaScript where it was not contained within the initial HTML response. It’s now just .15% on desktop and .13% on mobile. +There has also been a great reduction in both mobile and desktop pages that have structured data added via JavaScript where it was not contained within the initial HTML response. In 2021, 1.7% of mobile pages and 1.4% of desktop pages had structured data added via JavaScript where it was not contained within the initial HTML response. It's now just .15% on desktop and .13% on mobile. ### Most popular Structured Data formats @@ -589,9 +589,9 @@ There has also been a great reduction in both mobile and desktop pages that have ) }} -Structured data can be implemented through various ways on a given page. However, JSON-LD, which aligns with Google’s own recommendation for implementation, is by far the most popular format. +Structured data can be implemented through various ways on a given page. However, JSON-LD, which aligns with Google's own recommendation for implementation, is by far the most popular format. -Compared to 2021’s figures, 2022’s data shows a nominal increase in implementation via JSON-LD and a slight decrease when implementing structured data with microdata. These numbers bear out in particular on mobile. In 2021, 60.5% of mobile pages used JSON-LD to implement structured data. The number of mobile pages in 2022 using JSON-LD for adding structured data is up 2.3% to 61.9%. Conversely, 36.9% of mobile pages in 2021 utilized structured data with microdata. That number fell 4.3% in 2022 to 35.3%. +Compared to 2021's figures, 2022's data shows a nominal increase in implementation via JSON-LD and a slight decrease when implementing structured data with microdata. These numbers bear out in particular on mobile. In 2021, 60.5% of mobile pages used JSON-LD to implement structured data. The number of mobile pages in 2022 using JSON-LD for adding structured data is up 2.3% to 61.9%. Conversely, 36.9% of mobile pages in 2021 utilized structured data with microdata. That number fell 4.3% in 2022 to 35.3%. ### Most popular schema types @@ -623,7 +623,7 @@ Search engines utilize links to discover new pages and to pass PageRank, which h ### Non-descriptive link text -Anchor text, which is the clickable text used in a link, helps search engines to understand the content of the linked page. Lighthouse has a test to check if the anchor text used is useful and/or contextual, or if it’s generic and/or non-descriptive such as "learn more" or "click here." In 2022, 15% and 17% of the tested links on mobile and desktop, respectively, did not have descriptive anchor text, a missed opportunity from an SEO perspective and bad for accessibility. +Anchor text, which is the clickable text used in a link, helps search engines to understand the content of the linked page. Lighthouse has a test to check if the anchor text used is useful and/or contextual, or if it's generic and/or non-descriptive such as "learn more" or "click here." In 2022, 15% and 17% of the tested links on mobile and desktop, respectively, did not have descriptive anchor text, a missed opportunity from an SEO perspective and bad for accessibility. ### Outgoing links @@ -637,11 +637,11 @@ Anchor text, which is the clickable text used in a link, helps search engines to ) }} -Internal links are links to other pages on the same website. Much like last year, 2022’s figures suggest pages had fewer links on their mobile versions compared to their desktop counterparts. +Internal links are links to other pages on the same website. Much like last year, 2022's figures suggest pages had fewer links on their mobile versions compared to their desktop counterparts. -The median number of internal links is now 16% higher on desktop than mobile at 56% and 48%, respectively. It’s likely a result of developers minimizing the navigation menus and footers on mobile for ease of use on smaller screens. +The median number of internal links is now 16% higher on desktop than mobile at 56% and 48%, respectively. It's likely a result of developers minimizing the navigation menus and footers on mobile for ease of use on smaller screens. -According to CrUX data, the 1,000 most popular websites have more outgoing internal links than less popular sites, a total of 137 links on desktop versus 106 on mobile. That’s more than two times higher than the median. This may be attributed to the use of mega-menus on larger sites that generally have more pages. +According to CrUX data, the 1,000 most popular websites have more outgoing internal links than less popular sites, a total of 137 links on desktop versus 106 on mobile. That's more than two times higher than the median. This may be attributed to the use of mega-menus on larger sites that generally have more pages. {{ figure_markup( image="median-external-links.png", @@ -682,7 +682,7 @@ Not much has changed in terms of the adoption of the newer attributes, with `rel AMP has been a controversial topic since its launch in 2015, with SEOs debating whether or not it had a direct impact on rankings. Google later released this statement (below) in its documentation for additional clarification: <figure> - <blockquote>While AMP itself isn’t a ranking factor, speed is a ranking factor for Google Search. Google Search applies the same standard to all pages, regardless of the technology used to build the page.</blockquote> + <blockquote>While AMP itself isn't a ranking factor, speed is a ranking factor for Google Search. Google Search applies the same standard to all pages, regardless of the technology used to build the page.</blockquote> <figcaption>— <cite><a hreflang="en" href="https://developers.google.com/search/docs/advanced/experience/about-amp">Google Search Central</a></cite></figcaption> </figure> @@ -749,12 +749,12 @@ While Google tends to use hreflang tags, other search engines such as Bing prefe In 2022, HTTP server response is the most popular implementation method of content-language, with 8.27% of mobile sites using this and 8.82% of desktop sites. However this has seen a decline in adoption on mobile compared to 2021 when 9.3% of mobile sites used it. Conversely, desktop has seen a slight increase compared to 2021 when 8.7% of sites used it. -HTML, on the other hand, has 2.98% adoption on desktop in 2022 and 3.01% adoption on mobile. But again there’s a decline in mobile usage compared to 2021 when 3.3% of mobile sites used the HTML tag. +HTML, on the other hand, has 2.98% adoption on desktop in 2022 and 3.01% adoption on mobile. But again there's a decline in mobile usage compared to 2021 when 3.3% of mobile sites used the HTML tag. ## Conclusion Much like patterns in our data from [2021](../2021/seo), [2020](../2020/seo), and [2019](../2019/seo), the majority of sites analyzed are showing small, yet consistent, improvement when it comes to various fundamentals of SEO, including having indexable and crawlable pages. -We have also seen an increasing focus on performance elements such as Core Web Vitals, with 39% of sites now having passing scores compared to just 20% in 2020 when the update was first announced. This seems to indicate sites are now taking Google’s guidance more to heart. Still, more work needs to be done across the web. +We have also seen an increasing focus on performance elements such as Core Web Vitals, with 39% of sites now having passing scores compared to just 20% in 2020 when the update was first announced. This seems to indicate sites are now taking Google's guidance more to heart. Still, more work needs to be done across the web. Newer introductions, such as the indexifembedded tag, are seeing slow pick-up. This underscores the continuous need for adoption of best practices and how much opportunity for growth there is in SEO, search engine friendliness, and the state of the web in general. diff --git a/src/content/en/2022/structured-data.md b/src/content/en/2022/structured-data.md index 00237c7a608..18a12dc76e2 100644 --- a/src/content/en/2022/structured-data.md +++ b/src/content/en/2022/structured-data.md @@ -500,9 +500,9 @@ These increases are enough to make JSON-LD types have the 2nd biggest positive c When evaluating JSON-LD, we can focus on the most recurring patterns of relationships among the different classes. More than with other syntaxes, JSON-LD expresses the value of graphs in structured data. An `Article`, for example, is frequently characterized by a linked `image` and the entity type `Person` to represent its _author_. Quite similarly, we would see that `BlogPosting` is also connected with image but as a frequent relationship with the `Organization` that serves as `Publisher`. -Some types are purely syntactic like `BreadcrumbList` that is used exclusively to connect different items (`itemListElement`) of a site navigation’s system or a `Question` that is typically linked with its answer (`acceptedAnswer`). Other elements deal with meanings: a `LocalBusiness` typically is linked to an `address` and to the opening hours (`openingHoursSpecification`). +Some types are purely syntactic like `BreadcrumbList` that is used exclusively to connect different items (`itemListElement`) of a site navigation's system or a `Question` that is typically linked with its answer (`acceptedAnswer`). Other elements deal with meanings: a `LocalBusiness` typically is linked to an `address` and to the opening hours (`openingHoursSpecification`). -With this analysis we want to share a birds-eye overview of the most common types of relationships between entities and the subtle differences between let’s say `Article` and `BlogPosting`. +With this analysis we want to share a birds-eye overview of the most common types of relationships between entities and the subtle differences between let's say `Article` and `BlogPosting`. Here below we can see the common links between the different types, based on how frequently they occur within all structure/relationship values. Some of these structures are typically part of larger relationship chains. diff --git a/src/content/en/2024/accessibility.md b/src/content/en/2024/accessibility.md index b469bff9558..7da1082dd5a 100644 --- a/src/content/en/2024/accessibility.md +++ b/src/content/en/2024/accessibility.md @@ -600,7 +600,7 @@ We observed that over 50% of mobile sites had homepages with at least one elemen When an element is assigned the `role="presentation"`, it loses its inherent semantics, along with those of its required child elements (e.g., list items within a `<ul>`, or rows and cells within a table). For instance, applying `role="presentation"` to a parent `<table>` or `<ul>` element will propagate this role to its child elements, causing them to lose their table or list semantics. -Removing semantics with `role="presentation"` means the element only has visual presence and its structure is not recognized by assistive technologies. The element’s content will be read by a screen reader, but no information about the semantics will be provided. +Removing semantics with `role="presentation"` means the element only has visual presence and its structure is not recognized by assistive technologies. The element's content will be read by a screen reader, but no information about the semantics will be provided. {{ figure_markup( caption='Of desktop sites and 39% of mobile sites have at least one `role="presentation"`.', @@ -683,7 +683,7 @@ A common approach developers use to provide extra information for screen reader ) }} -The sr-only and visually-hidden class names are frequently used by developers and UI frameworks to create text that is only accessible to screen readers. For instance, Bootstrap and Tailwind include sr-only classes for this purpose. We found that 16% of desktop pages and 15% of mobile pages used one or both of these CSS classes (each up a percentage point from 2022). It's important to note that not all screen reader users are visually impaired, so relying too heavily on screen reader-only solutions should be avoided. When this technique is used with an interactive element’s accessible name, it can make it difficult for people who use their voice to control their computer to know what command to give to interact with the element. +The sr-only and visually-hidden class names are frequently used by developers and UI frameworks to create text that is only accessible to screen readers. For instance, Bootstrap and Tailwind include sr-only classes for this purpose. We found that 16% of desktop pages and 15% of mobile pages used one or both of these CSS classes (each up a percentage point from 2022). It's important to note that not all screen reader users are visually impaired, so relying too heavily on screen reader-only solutions should be avoided. When this technique is used with an interactive element's accessible name, it can make it difficult for people who use their voice to control their computer to know what command to give to interact with the element. ## Dynamically-rendered content diff --git a/src/content/en/2024/ecommerce.md b/src/content/en/2024/ecommerce.md index e2d0c4cc57c..586e134d480 100644 --- a/src/content/en/2024/ecommerce.md +++ b/src/content/en/2024/ecommerce.md @@ -8,7 +8,7 @@ analysts: [JonathanPagel] editors: [tunetheweb] translators: [] results: https://docs.google.com/spreadsheets/d/1LABlisQFCLjOyEd43tdUb-Hxs6pGuboTresntMk71Lc/ -JonathanPagel_bio: Jonathan Pagel studied ecommerce in his bachelor's degree and has since been interested in the field, particularly in the areas of speed optimization and accessibility for shops and websites. Currently, he is freelancing in this field and pursuing a Master’s in AI and Society. +JonathanPagel_bio: Jonathan Pagel studied ecommerce in his bachelor's degree and has since been interested in the field, particularly in the areas of speed optimization and accessibility for shops and websites. Currently, he is freelancing in this field and pursuing a Master's in AI and Society. featured_quote: While ecommerce platforms are diverse and well distributed among different providers, a few key players dominate technologies like payment systems. featured_stat_1: 21% featured_stat_label_1: Percent of ecommerce sites @@ -197,7 +197,7 @@ Here's the percentage of sites on each platform that achieve a "good" score, mea ) }} -Some platforms made impressive improvements, like Squarespace, which increased from 33% good scores in 2022 to 60% in 2024. Other platforms, like Magento and WooCommerce, are still struggling with real-world user experiences. This chart, and the other charts of this section, consider mobile performance only since most web traffic comes from mobile, and it’s more challenging to reach top scores. +Some platforms made impressive improvements, like Squarespace, which increased from 33% good scores in 2022 to 60% in 2024. Other platforms, like Magento and WooCommerce, are still struggling with real-world user experiences. This chart, and the other charts of this section, consider mobile performance only since most web traffic comes from mobile, and it's more challenging to reach top scores. ### Largest Contentful Paint (LCP) diff --git a/src/content/en/2024/security.md b/src/content/en/2024/security.md index 843a6983f5a..d17e377feaa 100644 --- a/src/content/en/2024/security.md +++ b/src/content/en/2024/security.md @@ -805,9 +805,9 @@ In 2022, the adoption of the `Permissions-Policy` header saw a significant relat <figcaption>{{ figure_link(caption="Most prevalent Permission Policies.", sheets_gid="2018859098", sql_file="pp_header_prevalence.sql") }}</figcaption> </figure> -Only 2.8% of desktop hosts and 2.5% of mobile hosts set the policy using the `Permissions-Policy` response header. The policy is primarily used to exclusively opt out of Google’s Federated Learning of Cohorts (FLoC); 21% of hosts that implement the `Permissions-Policy` header set the policy as `interest-cohort=()`. This usage is partly due to the controversy that FLoC sparked during its trial period. Although FLoC was ultimately replaced by the Topics API, the continued use of the `interest-cohort` directive highlights how specific concerns can shape the adoption of web policies. +Only 2.8% of desktop hosts and 2.5% of mobile hosts set the policy using the `Permissions-Policy` response header. The policy is primarily used to exclusively opt out of Google's Federated Learning of Cohorts (FLoC); 21% of hosts that implement the `Permissions-Policy` header set the policy as `interest-cohort=()`. This usage is partly due to the controversy that FLoC sparked during its trial period. Although FLoC was ultimately replaced by the Topics API, the continued use of the `interest-cohort` directive highlights how specific concerns can shape the adoption of web policies. -All other observed headers with at least 2% of hosts implementing them, are aimed at restricting the permission capabilities of the website itself and/or its embedded `<iframe>` elements. Similar to the Content Security Policy, the Permissions Policy is “open by default” instead of “secure by default”; absence of the policy entails absence of protection. This approach aims to avoid breaking website functionality when introducing new policies. Notably, 0.28% of sites explicitly use the `*` wildcard policy, allowing the website and all embedded `<iframe>` elements (where no more restrictive `allow` attribute is present) to request any permission - though this is the default behavior when the Permissions Policy is not set. +All other observed headers with at least 2% of hosts implementing them, are aimed at restricting the permission capabilities of the website itself and/or its embedded `<iframe>` elements. Similar to the Content Security Policy, the Permissions Policy is "open by default" instead of "secure by default"; absence of the policy entails absence of protection. This approach aims to avoid breaking website functionality when introducing new policies. Notably, 0.28% of sites explicitly use the `*` wildcard policy, allowing the website and all embedded `<iframe>` elements (where no more restrictive `allow` attribute is present) to request any permission - though this is the default behavior when the Permissions Policy is not set. The Permissions Policy can also be defined individually for each embedded `<iframe>` through its `allow` attribute. For example, an `<iframe>` can be permitted to use the geolocation and camera permissions by setting the attribute as follows: @@ -882,7 +882,7 @@ Out of the 21.4 million `<iframe>` elements observed in the crawl, half included <figcaption>{{ figure_link(caption="Most prevalent `allow` attribute directives.", sheets_gid="1497012339", sql_file="iframe_allow_directives.sql") }}</figcaption> </figure> -Compared to 2022, the top 10 most common directives are now led by three newly introduced directives: `join-ad-interest-group`, `attribution-reporting` and `run-ad-auction`. The first and third directives are specific to Google’s Privacy Sandbox. For all observed directives in the top 10, almost none were used in combination with an origin or keyword (i.e., `'src'`, `'self'`, and `'none'`), meaning the loaded page is allowed to request the indicated permission regardless of its origin. +Compared to 2022, the top 10 most common directives are now led by three newly introduced directives: `join-ad-interest-group`, `attribution-reporting` and `run-ad-auction`. The first and third directives are specific to Google's Privacy Sandbox. For all observed directives in the top 10, almost none were used in combination with an origin or keyword (i.e., `'src'`, `'self'`, and `'none'`), meaning the loaded page is allowed to request the indicated permission regardless of its origin. ### Iframe sandbox diff --git a/src/content/en/2024/structured-data.md b/src/content/en/2024/structured-data.md index 9b3bb01a1de..7c9de397ca6 100644 --- a/src/content/en/2024/structured-data.md +++ b/src/content/en/2024/structured-data.md @@ -33,7 +33,7 @@ Over the past 18 months, there have been significant changes in the structured d 2. **Enhanced existing types**: Improvements to organization data, product variants, and the introduction of discount-rich results. -3. **Structured data carousels**: The beta launch of structured data carousels, combining `ItemList` with other types, opens new content presentation possibilities on Google’s SERP ([source](https://developers.google.com/search/blog/2023/05/carousels-beta)). +3. **Structured data carousels**: The beta launch of structured data carousels, combining `ItemList` with other types, opens new content presentation possibilities on Google's SERP ([source](https://developers.google.com/search/blog/2023/05/carousels-beta)). 4. **GS1 integrations**: There has been increased support for GS1 standards such as the <a hreflang="en" href="https://www.gs1.org/standards/gs1-digital-link">GS1 Digital Link</a>, which aims to bridge the gap between physical and digital product information. This technology enables manufacturers and retailers to connect physical products to their digital identities through QR codes. When scanned, these codes provide access to comprehensive product information, enhancing transparency and customer engagement. Also, the `gs1:CertificationDetails` property has been officially adopted by Google as `schema:Certification`, demonstrating how industry-specific extensions can successfully influence and integrate with Schema.org standards. @@ -50,7 +50,7 @@ As the structured data ecosystem matures, we're witnessing a diversification in 1. **Schema.org as markup**: The traditional method of embedding structured data directly into webpages continues to be a cornerstone of modern SEO practices. 2. **Schema.org as a data standard**: - Beyond its use in HTML, Schema.org is increasingly employed to standardize data shared via APIs or feeds. For example, Google’s <a hreflang="en" href="https://datacommons.org/">Data Commons</a> initiative uses an extended Schema.org vocabulary to integrate datasets from hundreds of organizations globally. This standardization supports tasks like dataset discovery and relationship mapping, crucial for understanding provenance, subsets, and derivations of datasets in AI-driven environments (<a hreflang="en" href="https://research.google/blog/relationships-arecomplicated-an-analysis-of-relationships-between-datasets-on-the-web/">source</a>). + Beyond its use in HTML, Schema.org is increasingly employed to standardize data shared via APIs or feeds. For example, Google's <a hreflang="en" href="https://datacommons.org/">Data Commons</a> initiative uses an extended Schema.org vocabulary to integrate datasets from hundreds of organizations globally. This standardization supports tasks like dataset discovery and relationship mapping, crucial for understanding provenance, subsets, and derivations of datasets in AI-driven environments (<a hreflang="en" href="https://research.google/blog/relationships-arecomplicated-an-analysis-of-relationships-between-datasets-on-the-web/">source</a>). 3. **Semantic data in social web applications**: @@ -59,7 +59,7 @@ As the structured data ecosystem matures, we're witnessing a diversification in 4. **Digital Product Passports (DPPs)**: -Structured data plays a key role in emerging regulatory requirements like the EU’s <a hreflang="en" href="https://wordlift.io/blog/en/digital-product-passport-implementation/">Digital Product Passports</a>, designed to enhance transparency and sustainability in eCommerce. These passports leverage GS1 Digital Links to provide comprehensive product information through QR codes. +Structured data plays a key role in emerging regulatory requirements like the EU's <a hreflang="en" href="https://wordlift.io/blog/en/digital-product-passport-implementation/">Digital Product Passports</a>, designed to enhance transparency and sustainability in eCommerce. These passports leverage GS1 Digital Links to provide comprehensive product information through QR codes. 5. **Structured data for AI-powered Ddscovery**: @@ -67,7 +67,7 @@ As AI-powered search engines, chatbots, and conversational assistants continue t - **AI Search Engines**: Platforms like Bing Chat and Google AI Overview utilize structured data not only to train their language models but also to deliver contextually rich and accurate responses. By leveraging structured data, these systems can interpret complex relationships between datasets, improve search relevance, and enable users to seamlessly navigate interconnected datasets (<a hreflang="en" href="https://research.google/blog/relationships-arecomplicated-an-analysis-of-relationships-between-datasets-on-the-web/">source</a>). -These capabilities demonstrate structured data's evolving role in not only improving discoverability but also in enhancing AI systems’ ability to interpret and act on relationships between data, thereby creating richer and more useful user experiences. +These capabilities demonstrate structured data's evolving role in not only improving discoverability but also in enhancing AI systems' ability to interpret and act on relationships between data, thereby creating richer and more useful user experiences. This diversification highlights structured data's growing role in facilitating data interoperability, social trust, regulatory compliance, and AI-driven content discovery. By enabling systems to understand and act on complex relationships between data, structured data lays the foundation for richer, more intelligent digital experiences. @@ -114,7 +114,7 @@ This chapter offers a data-driven analysis of structured data trends in 2023-202 6. **Ecommerce innovations**: - Growth of Digital Product Passports and GS1 Digital Links. - - Structured data’s role in ecommerce and new rich result types. + - Structured data's role in ecommerce and new rich result types. 7. **Knowledge graphs & Graph RAG**: @@ -132,7 +132,7 @@ This chapter offers a data-driven analysis of structured data trends in 2023-202 - The evolving role of structured data in AI, semantic SEO, and content discovery. -This chapter provides a comprehensive view of structured data’s impact on SEO, AI, and ecommerce, with actionable insights for developers and marketers. +This chapter provides a comprehensive view of structured data's impact on SEO, AI, and ecommerce, with actionable insights for developers and marketers. ## Key concepts @@ -158,8 +158,8 @@ Semantic search has progressed beyond traditional keyword matching to include so - Google AI Overview: A feature that provides comprehensive (sometimes misleading) AI-generated summaries on complex topics. - Microsoft Bing Chat: Integrates chat-based AI interactions directly into Bing search results. -- Meta AI: Meta’s AI assistant is integrated across platforms like Facebook, Messenger, Instagram, and WhatsApp. -- SearchGPT (and ChatGPT): OpenAI’s AI search engine that integrates search results into conversational responses. +- Meta AI: Meta's AI assistant is integrated across platforms like Facebook, Messenger, Instagram, and WhatsApp. +- SearchGPT (and ChatGPT): OpenAI's AI search engine that integrates search results into conversational responses. - Perplexity.ai: An AI-powered search engine that provides detailed, sourced answers to queries. - You.com: Offers AI-summarized search results and a chat interface for more interactive searching. @@ -302,7 +302,7 @@ Investing in semantic SEO and maintaining high-quality structured data not only ## A year in review -The landscape of structured data implementation continues to evolve. To better understand this landscape, it’s essential to distinguish between _syntax/encoding_ and _vocabularies_: +The landscape of structured data implementation continues to evolve. To better understand this landscape, it's essential to distinguish between _syntax/encoding_ and _vocabularies_: - **Syntax/encodings**: These define how structured data is embedded into webpages: - **RDFa**: Maintains a strong presence, used on 66% of pages. @@ -360,7 +360,7 @@ The three main structured data formats show distinctly different adoption patter - **JSON-LD**: Present on 41% of pages (up from 34% in 2022). Growing fastest among the three formats, preferred by Google and gaining wider developer adoption. Most commonly used for: organization data, local business information, product listings, articles and creative works. - **Microdata**: Present on 26% of pages. Showing steady but slower growth. Primarily used for webpage structure (8.34% of pages), site navigation (6.42%), headers and footers (5.97% and 5.33%), organization information (4.87%) | -Let’s analyze now more in detail each type. +Let's analyze now more in detail each type. ## RDFa @@ -494,7 +494,7 @@ Security and type-related properties have also gained traction. The `og:image:se ## Twitter -Despite the platform's transition to new ownership and its rebranding as X, Twitter’s meta tags remain a vital part of the structured data landscape, particularly in the realm of social media optimization. The `twitter:card` tag continues to dominate, showing significant growth across mobile and desktop pages, as it plays a key role in defining how content is displayed when shared on the platform. +Despite the platform's transition to new ownership and its rebranding as X, Twitter's meta tags remain a vital part of the structured data landscape, particularly in the realm of social media optimization. The `twitter:card` tag continues to dominate, showing significant growth across mobile and desktop pages, as it plays a key role in defining how content is displayed when shared on the platform. {{ figure_markup( image="twitter-meta-tag-usage-by-year.png", @@ -621,7 +621,7 @@ Microformats2, while still relatively niche, has seen slightly higher adoption t sql_file="present_types.sql" )}} -Cross-device implementation remains relatively consistent, though with some variation between mobile and desktop. The data shows a general decline in traditional Microformats usage from 2022 to 2024, particularly in review-related properties like `hReview` and `hReview-aggregate`. This decline reflects the industry’s shift toward more modern structured data formats like JSON-LD and RDFa, which offer broader functionality and better integration with current web standards. +Cross-device implementation remains relatively consistent, though with some variation between mobile and desktop. The data shows a general decline in traditional Microformats usage from 2022 to 2024, particularly in review-related properties like `hReview` and `hReview-aggregate`. This decline reflects the industry's shift toward more modern structured data formats like JSON-LD and RDFa, which offer broader functionality and better integration with current web standards. Despite this decline, Microformats and Microformats2 remain useful in specific contexts where lightweight, human-readable semantic data is needed. However, their overall presence continues to be eclipsed by more versatile formats like JSON-LD, which dominate the structured data landscape. @@ -636,7 +636,7 @@ Despite this decline, Microformats and Microformats2 remain useful in specific c ## Microdata -Microdata continues to be widely used for structural elements and navigation data, particularly within legacy platforms and sites where simpler, static page structures are required. The most frequently implemented types include `schema.org/webpage` (appearing on 8.34% of mobile pages) and `schema.org/sitenavigationelement` (used on 6.42% of mobile pages), indicating the format’s enduring relevance for webpage structure and site navigation. +Microdata continues to be widely used for structural elements and navigation data, particularly within legacy platforms and sites where simpler, static page structures are required. The most frequently implemented types include `schema.org/webpage` (appearing on 8.34% of mobile pages) and `schema.org/sitenavigationelement` (used on 6.42% of mobile pages), indicating the format's enduring relevance for webpage structure and site navigation. {{ figure_markup( image="microdata-year-on-year-mobile.png", @@ -676,7 +676,7 @@ The diversity in implementation patterns reflects how different industries and w `BreadcrumbList` implementation has seen notable growth, appearing on 5.66% of pages, suggesting an increased focus on structured navigation data. The `WebPage` schema shows steady adoption at 1.49%, while the `Product` schema appears on 0.77% of pages. Content-specific types like `BlogPosting` (1.40%) and `Article` (0.18%) maintain consistent presence, though at lower levels. -Specialized business types such as `Restaurant` (0.19%), `AutoDealer` (1.09%), and Store (0.17%) demonstrate the growing adoption of industry-specific markup, corresponding to Google’s increased support for these schemas. Supporting content types including `VideoObject`, `FAQPage`, and `Event` each appear on approximately 0.34% of pages, indicating steady but modest implementation of specialized content markup. +Specialized business types such as `Restaurant` (0.19%), `AutoDealer` (1.09%), and Store (0.17%) demonstrate the growing adoption of industry-specific markup, corresponding to Google's increased support for these schemas. Supporting content types including `VideoObject`, `FAQPage`, and `Event` each appear on approximately 0.34% of pages, indicating steady but modest implementation of specialized content markup. `ItemList` schema shows healthy adoption at 2.44%, suggesting increased use of structured listing data. The overall distribution of JSON-LD types reflects a maturing ecosystem where fundamental entity types dominate, while specialized schemas serve specific business and content needs. @@ -695,7 +695,7 @@ The consistency in implementation across devices indicates a mature approach to Despite Google's deprecation of `FAQ` and `HowTo` rich results in August 2023 ([source](https://developers.google.com/search/blog/2023/08/howto-faq-changes)), we see limited impact on their adoption rates. `HowTo` schema adoption has historically been low due to its complexity, with implementation rates below 1% for both desktop and mobile. `FAQPage`, on the other hand, has not only maintained its adoption but even shows a slight increase on desktop, rising from 0.2% in 2022 to 0.6% in 2024. This trend suggests that webmasters may still find value in implementing FAQPage for additional search engine visibility besides rich results. -These observations highlight the *resilience of certain structured data types* despite changes in Google’s support. It also points to the importance of monitoring how structured data evolves across various platforms, as its utility often extends beyond immediate search result enhancements. +These observations highlight the *resilience of certain structured data types* despite changes in Google's support. It also points to the importance of monitoring how structured data evolves across various platforms, as its utility often extends beyond immediate search result enhancements. {{ figure_markup( image="jsonld-by-device.png", @@ -712,7 +712,7 @@ These observations highlight the *resilience of certain structured data types* d When evaluating JSON-LD relationships in structured data implementations, several key patterns emerge in how entities are connected in a graph. These relationship patterns reflect how structured data is used to create comprehensive, interconnected entity descriptions that help search engines better understand content context and relationships. The most successful implementations leverage these connections to provide rich, detailed information while maintaining logical content relationships. -Let’s review the most critical patterns from the JSON-LD relationship analysis: +Let's review the most critical patterns from the JSON-LD relationship analysis: 1. **Local Business Ecosystem.** The most sophisticated structured data implementations are occurring in the local business sector, where we see rich interconnections between LocalBusiness, OpeningHoursSpecification, PostalAddress, and GeoCoordinates. This suggests businesses are creating comprehensive digital identities that go beyond basic location information to include detailed operational data. This aligns with Google's increasing focus on local search and the growing importance of location-based services. 2. **Content Organization.** Maturity There's a clear pattern of publishers implementing more sophisticated content structures. The relationships between Article, BlogPosting, and WebPage entities consistently link to ImageObject, author attributes, and publishing details. This isn't just about marking up individual pieces of content – it's about creating proper content graphs that establish clear relationships between content, creators, and organizational entities. @@ -792,7 +792,7 @@ The structured data landscape is rapidly evolving, marked by Google's introducti The data shows a clear shift toward more specialized implementation patterns, particularly in ecommerce and local business contexts. For instance, structured data types like `Product`, `Offer`, and `Review` have become more prevalent in ecommerce, while `LocalBusiness` and `GeoCoordinates` are increasingly used to improve local search visibility. -This shift can be partially attributed to Google’s policy changes, which encouraged webmasters to focus on more domain-specific schemas. Entity disambiguation has also become increasingly critical, with organizations leveraging structured data like `sameAs` and `Organization` to establish clear digital identities across platforms and knowledge bases. +This shift can be partially attributed to Google's policy changes, which encouraged webmasters to focus on more domain-specific schemas. Entity disambiguation has also become increasingly critical, with organizations leveraging structured data like `sameAs` and `Organization` to establish clear digital identities across platforms and knowledge bases. ## Looking ahead: the future of structured data @@ -812,17 +812,17 @@ As we analyze current trends, we also cast our gaze forward to emerging developm - **Regulatory impacts** - Finally, regulations such as the EU’s Digital Product Passport are poised to reshape future structured data standards. These initiatives will likely influence how structured data is applied, especially in domains like ecommerce and product traceability, encouraging more structured and transparent data practices. + Finally, regulations such as the EU's Digital Product Passport are poised to reshape future structured data standards. These initiatives will likely influence how structured data is applied, especially in domains like ecommerce and product traceability, encouraging more structured and transparent data practices. By examining these aspects, we aim to provide a comprehensive overview of the state of structured data in 2024, its recent evolution, and its future trajectory. Whether you're a seasoned SEO professional, a web developer, an eCommerce strategist, or simply interested in the evolution of the web, this chapter offers valuable insights into how structured data is reshaping our digital world and paving the way for a more connected, transparent, and intelligent online experience. ## Conclusion -The analysis of structured data in 2024 highlights a clear shift from its SEO roots toward a broader, more strategic role in AI and semantic metadata. The dominance of RDFa and Open Graph on over 60% of pages, combined with JSON-LD’s growth (now on 41% of pages, particularly in eCommerce), points to a maturing technology. But the true impact lies in how structured data is transforming AI discovery and enhancing machine understanding. +The analysis of structured data in 2024 highlights a clear shift from its SEO roots toward a broader, more strategic role in AI and semantic metadata. The dominance of RDFa and Open Graph on over 60% of pages, combined with JSON-LD's growth (now on 41% of pages, particularly in eCommerce), points to a maturing technology. But the true impact lies in how structured data is transforming AI discovery and enhancing machine understanding. -This year, we’ve seen significant changes in how search engines handle structured data. While Google has deprecated certain rich results, such as FAQs, HowTos, and SiteLinks, they’ve simultaneously introduced new types for vehicles, courses, 3D product models, loyalty cards, and certifications, expanding the scope of structured data. Even more importantly, structured data is now essential for AI systems, supporting tasks from fact-checking to improved search capabilities and training large language models (LLMs). +This year, we've seen significant changes in how search engines handle structured data. While Google has deprecated certain rich results, such as FAQs, HowTos, and SiteLinks, they've simultaneously introduced new types for vehicles, courses, 3D product models, loyalty cards, and certifications, expanding the scope of structured data. Even more importantly, structured data is now essential for AI systems, supporting tasks from fact-checking to improved search capabilities and training large language models (LLMs). -The advent of Digital Product Passports and increased adoption of GS1 standards underlines the growing importance of structured data in commerce and regulatory compliance. As AI-driven search becomes the norm, businesses are realizing that structured data is no longer just about search visibility—it’s key to ensuring content is machine-readable and future-proof. +The advent of Digital Product Passports and increased adoption of GS1 standards underlines the growing importance of structured data in commerce and regulatory compliance. As AI-driven search becomes the norm, businesses are realizing that structured data is no longer just about search visibility—it's key to ensuring content is machine-readable and future-proof. For businesses developing their structured data strategy, the way forward is clear: implement it comprehensively, maintain it rigorously, and adapt continuously. New projects should focus on JSON-LD, while legacy formats should be preserved where appropriate. Systems must be built to scale and evolve alongside emerging technologies and standards. From 0044d2e7942fd81c97e53ab69a4b1cfd7e35940c Mon Sep 17 00:00:00 2001 From: Barry Pollard <barrypollard@google.com> Date: Mon, 11 Nov 2024 23:08:14 +0000 Subject: [PATCH 4/7] Add bluesky social media links (#3874) * Add bluesky social media links * Linting --- README.md | 2 +- src/static/css/almanac.css | 12 ++++++++---- src/templates/base/base.html | 25 +++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 14462b4f502..a6ba4d66d3b 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ We do almost all of our project planning here on GitHub. Browse the open [issues We also have a [`#web-almanac`](https://join.slack.com/t/httparchive/shared_invite/zt-45sgwmnb-eDEatOhqssqNAKxxOSLAaA) channel on the HTTP Archive Slack where we chat about project updates. -For news and announcements, follow [@HTTPArchive](https://x.com/HTTPArchive) on Twitter. +For news and announcements, follow [@HTTPArchive](https://x.com/HTTPArchive) on X, or [httparchive.org](https://bsky.app/profile/httparchive.org) on Bluesky. ## [License](https://github.com/HTTPArchive/almanac.httparchive.org/blob/main/LICENSE) diff --git a/src/static/css/almanac.css b/src/static/css/almanac.css index be5f5c3b3e6..6a0b1c1736a 100644 --- a/src/static/css/almanac.css +++ b/src/static/css/almanac.css @@ -768,8 +768,8 @@ footer .container { 'home-logo nav-items nav-items nav-items' 'hr hr hr hr' 'copyright copyright ha-logo social-media'; - grid-template-columns: 280px 1fr 1fr 120px 0 0; - grid-template-columns: 17.5rem 1fr 1fr 7.5rem 0 0; + grid-template-columns: 280px 1fr 1fr 150px 0 0; + grid-template-columns: 17.5rem 1fr 1fr 9.375rem 0 0; } footer .home-logo { @@ -854,10 +854,14 @@ p.copyright a { padding: 0 20px; } -.social-media li:first-child a { +.social-media li a { margin-right: 30px; } +.social-media li:last-child a { + margin-right: 0; +} + .social-media li { display: flex; } @@ -915,7 +919,7 @@ p.copyright a { 'nav-items nav-items nav-items nav-items' 'hr-last hr-last hr-last hr-last' 'copyright copyright ha-logo social-media'; - grid-template-columns: 3fr 1fr 1fr 120px 0 0; + grid-template-columns: 3fr 1fr 1fr 150px 0 0; grid-template-rows: 60px auto auto; } diff --git a/src/templates/base/base.html b/src/templates/base/base.html index c28b3ef9573..c0bda000002 100644 --- a/src/templates/base/base.html +++ b/src/templates/base/base.html @@ -71,6 +71,7 @@ "sameAs": [ "https://httparchive.org", "https://x.com/HTTPArchive", + "https://bsky.app/profile/httparchive.org", "https://github.com/HTTPArchive" ] }, @@ -451,6 +452,14 @@ </svg> </a> </li> + <li> + <a href="https://bsky.app/profile/httparchive.org" aria-labelledby="bluesky-logo-mobile"> + <svg width="20" height="20" role="img"> + <title id="bluesky-logo-mobile">Bluesky + + + +
  • @@ -550,6 +559,14 @@
    • +
  • + + + Bluesky + + + +
  • @@ -583,6 +600,14 @@
    • +
  • + + + Bluesky + + + +
  • From 4c2fe2618c98e8f326f5f3113c975b8b2d952331 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 11 Nov 2024 23:16:49 +0000 Subject: [PATCH 5/7] Update Timestamps (#3876) Co-authored-by: tunetheweb <10931297+tunetheweb@users.noreply.github.com> --- src/config/last_updated.json | 244 +++++++++++++++++------------------ 1 file changed, 122 insertions(+), 122 deletions(-) diff --git a/src/config/last_updated.json b/src/config/last_updated.json index 869280c42b5..5a5aebb347a 100644 --- a/src/config/last_updated.json +++ b/src/config/last_updated.json @@ -1,8 +1,8 @@ { "/static/css/almanac.css": { "date_published": "2020-11-13T00:00:00.000Z", - "date_modified": "2024-02-08T00:00:00.000Z", - "hash": "9855ebaccf6c51a57239b9d47e2fde41" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "1653be48f4c6c63139a92045bbc0a5c5" }, "/static/css/ebook.css": { "date_published": "2020-05-15T00:00:00.000Z", @@ -51,138 +51,138 @@ }, "/static/pdfs/web_almanac_2019_en.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "4046a2d49462bf28edc385dfd0e8663a", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "f2f22102e58cde2858848edbce692ccd", "size": 17 }, "/static/pdfs/web_almanac_2019_en_cover_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "716ab353261a33fa6c2aa4ddd6e643dc" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "20ec2d928cfec03e909f1afd7de11af3" }, "/static/pdfs/web_almanac_2019_en_print_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "0648c7b15328af15899cce9fc63e3a7f", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "f7957abb79e7064ec8f873f5cab6be1a", "size": 16 }, "/static/pdfs/web_almanac_2019_ja.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "4e57d5cdd4a4532538e4d38884c3340d", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "faf8e0ead44e5e0ef23d4e5389e8cb26", "size": 17 }, "/static/pdfs/web_almanac_2019_ja_cover_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "6d2051e7fe0253f58f9cc7797422ef72" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "43703de647602bdfd3b771132ef6e429" }, "/static/pdfs/web_almanac_2019_ja_print_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "0f67d346605d67d57ed68a4b1f0e3137", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "18c796858653b0fff25094c9aaa40abc", "size": 16 }, "/static/pdfs/web_almanac_2020_en.pdf": { "date_published": "2020-12-08T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "ace82536adf9a4d5983eaa53ae2ef1e2", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "4030888cfafeeec6f79e71a93716562e", "size": 24 }, "/static/pdfs/web_almanac_2020_en_cover_A5.pdf": { "date_published": "2020-12-09T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "2efe4d8d8edc59de530f7c8c38d6a6b9" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "c0f8749c7fc062def4e1afc10b636683" }, "/static/pdfs/web_almanac_2020_en_print_A5.pdf": { "date_published": "2020-12-09T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "31174495c39b9d73fcd9d3c3930571cd", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "5fbcdfb11bb7fc519ac97df832fe4efc", "size": 24 }, "/static/pdfs/web_almanac_2020_ja.pdf": { "date_published": "2021-10-24T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "1a24c2b07c38a9823bbcd9c31b21a7ba", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "528ac2094548bdfe87c975504eee108b", "size": 25 }, "/static/pdfs/web_almanac_2020_ja_cover_A5.pdf": { "date_published": "2021-10-24T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "6748a24b65c5545f9c2e425619e9f0ac" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "0b852fcef33fdbeb06119fe50c3af1e4" }, "/static/pdfs/web_almanac_2020_ja_print_A5.pdf": { "date_published": "2021-10-24T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "997db112e6975ada7375305e6e5c0dc6", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "a5e501097db55e66f53a28aba385635f", "size": 24 }, "/static/pdfs/web_almanac_2021_en.pdf": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "0356d9c97d3f774e8de6250c0525fe33", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "85befe97242058382a780635705072bf", "size": 32 }, "/static/pdfs/web_almanac_2021_en_cover_A5.pdf": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "f9b016cdbb1165e48faf4ab2063057bf" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "9721ce78d00e24911e545750c6665475" }, "/static/pdfs/web_almanac_2021_en_print_A5.pdf": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "33c08203ece67fae0ea481c03dc59316", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "97e2c98695c652ac7ed56844059b66a9", "size": 31 }, "/static/pdfs/web_almanac_2021_ja.pdf": { "date_published": "22-08-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "6f468be016e7a90d559384137bd85e7a", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "4cab3ad3d69aebacbeda4e2c3cb74c17", "size": 32 }, "/static/pdfs/web_almanac_2021_ja_cover_A5.pdf": { "date_published": "22-08-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "df4bb2307000c6477e5e87dc89780070" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "e611c0220708d7b0e9ee5b98036aab02" }, "/static/pdfs/web_almanac_2021_ja_print_A5.pdf": { "date_published": "22-08-01T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "cd60ecc069edfee629f354e986bea287", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "b280645e3175781d417e8925cb66dc57", "size": 32 }, "/static/pdfs/web_almanac_2022_en.pdf": { "date_published": "2022-10-19T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "86dbaf249adf2a2e015cca6e6d5833a1", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "0387e3e87f0aa43fbcc15e9c74444048", "size": 32 }, "/static/pdfs/web_almanac_2022_en_cover_A5.pdf": { "date_published": "2022-10-19T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "4023b2ef384cfc46cb9fc4eb6424ec14" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "ed1f2d2c5c54ccf3ece02521f7a24e23" }, "/static/pdfs/web_almanac_2022_en_print_A5.pdf": { "date_published": "2022-10-19T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "9bc4427cb1727eab129a9b1fb1cde621", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "ef896d344b6706181b00e0b7fd73eb9f", "size": 31 }, "/static/pdfs/web_almanac_2022_ja.pdf": { "date_published": "2024-09-26T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "0f5495b0418ed5706baa9bc28fe50d29", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "4e12016164dd76d2fe2a73db99dac7d0", "size": 32 }, "/static/pdfs/web_almanac_2022_ja_cover_A5.pdf": { "date_published": "2024-09-26T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "f007ef17f726146a59ec0a80e9233fca" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "f81b57a5a6b4696926106b872e1eb149" }, "/static/pdfs/web_almanac_2022_ja_print_A5.pdf": { "date_published": "2024-09-26T00:00:00.000Z", - "date_modified": "2024-10-22T00:00:00.000Z", - "hash": "2147f65ed171be771763b94cdb945d30", + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "a081a983a6cfd1c6b397a61915f7756a", "size": 32 }, "/static/pdfs/web_almanac_2022_js_cover_A5.pdf": { @@ -198,8 +198,8 @@ }, "en/2019/chapters/accessibility.html": { "date_published": "2019-11-11T00:00:00.000Z", - "date_modified": "2022-12-12T00:00:00.000Z", - "hash": "3f9cd2d1ad2563486b7d398286a8abc2" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "c83d7955372c89ae31a2027df23882fc" }, "en/2019/chapters/caching.html": { "date_published": "2019-11-11T00:00:00.000Z", @@ -258,13 +258,13 @@ }, "en/2019/chapters/mobile-web.html": { "date_published": "2019-11-11T00:00:00.000Z", - "date_modified": "2024-09-20T00:00:00.000Z", - "hash": "d20299b6943f1496b4ae1b51362c6f4f" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "67ff06b4f97d8f05dcb49912692c8d48" }, "en/2019/chapters/page-weight.html": { "date_published": "2019-11-11T00:00:00.000Z", - "date_modified": "2022-03-02T00:00:00.000Z", - "hash": "584245c6373376c96683dcb83f34adab" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "406cc32c7faef1393b457d7f4eceaeb1" }, "en/2019/chapters/performance.html": { "date_published": "2019-11-11T00:00:00.000Z", @@ -284,7 +284,7 @@ "en/2019/chapters/security.html": { "date_published": "2019-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "482f6cbd62b8fcf421bb1f9328f1b14c" + "hash": "e238cbd53fd636fde25f69af57e7ae21" }, "en/2019/chapters/seo.html": { "date_published": "2019-11-11T00:00:00.000Z", @@ -339,22 +339,22 @@ "en/2020/chapters/cms.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "3c07fad4ba5ed0c8861d6064149d8106" + "hash": "e649cc1c19cc37f3a6b01de3cdb1844e" }, "en/2020/chapters/compression.html": { "date_published": "2020-12-09T00:00:00.000Z", - "date_modified": "2022-12-12T00:00:00.000Z", - "hash": "5347db4412e4698caefa8c58f8f325cf" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "61d77711ecc5bfb6acc548a5a43000ca" }, "en/2020/chapters/css.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "234ca34055afd1d6c24456d9d0fa0b57" + "hash": "73e119d7a734d0735acf543fbc173fe8" }, "en/2020/chapters/ecommerce.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "aa53560d6ae1af92be7a27f187211ffb" + "hash": "e8a8e34fa894aa3a0ed30dd0e97e4e9c" }, "en/2020/chapters/fonts.html": { "date_published": "2020-12-09T00:00:00.000Z", @@ -364,12 +364,12 @@ "en/2020/chapters/http.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "22b969c0cd580009f457528cb435a57a" + "hash": "966c9dd8b1063b04ed1476cb4387805e" }, "en/2020/chapters/jamstack.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "9719358fc526ef5cde3ff9d428b74edc" + "hash": "5b74ea5463306a279b893712ed8d07d0" }, "en/2020/chapters/javascript.html": { "date_published": "2020-12-09T00:00:00.000Z", @@ -389,7 +389,7 @@ "en/2020/chapters/mobile-web.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "92ead21dac3ad3868f2352c16085aa63" + "hash": "517b8311646847ce5c4333d483bfa2d2" }, "en/2020/chapters/page-weight.html": { "date_published": "2020-12-09T00:00:00.000Z", @@ -404,7 +404,7 @@ "en/2020/chapters/privacy.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "518abc2f9b7d960a682e4c564b0bd636" + "hash": "11a78d7c5cc84eed7fffb02803ec7b7b" }, "en/2020/chapters/pwa.html": { "date_published": "2020-12-09T00:00:00.000Z", @@ -419,7 +419,7 @@ "en/2020/chapters/security.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "371ffd44ac0ca7c184207b128b912356" + "hash": "f012d04328b25392ed82942bfc65da15" }, "en/2020/chapters/seo.html": { "date_published": "2020-12-09T00:00:00.000Z", @@ -429,7 +429,7 @@ "en/2020/chapters/third-parties.html": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "fa836d18e27ef4814195504d8ea89e70" + "hash": "0952d23b948dec64cfa506ccb49506f0" }, "en/2020/contributors.html": { "date_published": "2020-07-14T00:00:00.000Z", @@ -479,12 +479,12 @@ "en/2021/chapters/accessibility.html": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "0c789f03685e966090659acf02d05708" + "hash": "a3b5af2cf476002a4f908ce75fd857b3" }, "en/2021/chapters/caching.html": { "date_published": "2021-12-15T00:00:00.000Z", - "date_modified": "2022-12-12T00:00:00.000Z", - "hash": "153a31ca4c707cebd6e4f79a3034d1ab" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "cfea3bc0c5f1f25a3063610c55ac1783" }, "en/2021/chapters/capabilities.html": { "date_published": "2021-11-17T00:00:00.000Z", @@ -503,23 +503,23 @@ }, "en/2021/chapters/compression.html": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2022-12-12T00:00:00.000Z", - "hash": "f04838194a0f121d03046225b6d1cc0f" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "7906ed68465d5d8eb811072590dd6ca0" }, "en/2021/chapters/css.html": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2022-12-12T00:00:00.000Z", - "hash": "72abd8c715e532cc343fd7a97ab59498" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "7133c084fe63fd7dda4f620941172f3a" }, "en/2021/chapters/ecommerce.html": { "date_published": "2021-12-01T00:00:00.000Z", - "date_modified": "2024-09-20T00:00:00.000Z", - "hash": "2f6ad77acfc9e4df5bfeb76607c7dcfe" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "edaa2c98a2aa92b01b4f3c1ef60d7c89" }, "en/2021/chapters/http.html": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "b7237631b646a56d9fc35adfbe01a6c8" + "hash": "f8d6fd094600144a6e3d25d84ed246e5" }, "en/2021/chapters/jamstack.html": { "date_published": "2021-12-01T00:00:00.000Z", @@ -539,12 +539,12 @@ "en/2021/chapters/media.html": { "date_published": "2021-12-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "abe1dc6adf8a932bd67a2dece73e5d6b" + "hash": "bf6257adcf16b2ed713fa7fd5db1f0b6" }, "en/2021/chapters/mobile-web.html": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "dc3c4aa790fa4a2419e112febe842770" + "hash": "2eab30367a9cfebce01c57d3d133a250" }, "en/2021/chapters/page-weight.html": { "date_published": "2021-12-01T00:00:00.000Z", @@ -554,22 +554,22 @@ "en/2021/chapters/performance.html": { "date_published": "2021-11-17T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "6258cb7b1620224ea17e7b7f72c573c1" + "hash": "4cc26b52b2b9f90d77742cadf4036fce" }, "en/2021/chapters/privacy.html": { "date_published": "2021-11-17T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "48b8b22e9877bd774bac20fd1078441d" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "3b4ee70be58a394de1a5f625cdeda228" }, "en/2021/chapters/pwa.html": { "date_published": "2021-11-17T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "e02d0eda454e803d9a8d69a11a1245a3" + "hash": "279483ed3102f9dd8f6423fc10736a0a" }, "en/2021/chapters/resource-hints.html": { "date_published": "2021-11-17T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "71057e219be358b29053ab258e63188f" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "37a4f0fc1c497c6837f283ac149e7bc8" }, "en/2021/chapters/security.html": { "date_published": "2021-12-01T00:00:00.000Z", @@ -584,7 +584,7 @@ "en/2021/chapters/structured-data.html": { "date_published": "2021-11-17T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "f0337234ff8783e5815b33a15c743ba4" + "hash": "fcb26d92c77c8242a3204815493bf4c9" }, "en/2021/chapters/third-parties.html": { "date_published": "2021-11-17T00:00:00.000Z", @@ -619,7 +619,7 @@ "en/2022/chapters/accessibility.html": { "date_published": "2022-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "acba4364fb78621e73ef420b3aa56d18" + "hash": "842429fe24959b8b07aea37f1a343a37" }, "en/2022/chapters/capabilities.html": { "date_published": "2022-09-26T00:00:00.000Z", @@ -628,8 +628,8 @@ }, "en/2022/chapters/cdn.html": { "date_published": "2022-10-13T00:00:00.000Z", - "date_modified": "2023-01-14T00:00:00.000Z", - "hash": "9e93873e7db8efc321dced61c3b79b70" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "5600ca44fdce04ac1247805330975bde" }, "en/2022/chapters/cms.html": { "date_published": "2022-09-26T00:00:00.000Z", @@ -658,13 +658,13 @@ }, "en/2022/chapters/jamstack.html": { "date_published": "2022-10-13T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "58348fe6d3666406e764c655cf73a0a9" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "29105112bc25ad355e44a22ea2994448" }, "en/2022/chapters/javascript.html": { "date_published": "2022-09-26T00:00:00.000Z", - "date_modified": "2024-09-20T00:00:00.000Z", - "hash": "ace95cc36f911ae2e68498a2c6714532" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "0133d115f7c0e5cc6ab3db50d7b728de" }, "en/2022/chapters/markup.html": { "date_published": "2022-09-26T00:00:00.000Z", @@ -678,18 +678,18 @@ }, "en/2022/chapters/mobile-web.html": { "date_published": "2022-09-26T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "cbb1910a3e4a5cef6651261f753a403a" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "6051770c0488b3214e767118566acfd9" }, "en/2022/chapters/page-weight.html": { "date_published": "2022-09-26T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "3066928df713664ff1960fc96fb983ab" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "39a5e45beda2b61bf5f39a5b301bf431" }, "en/2022/chapters/performance.html": { "date_published": "2022-10-25T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "c85bdca957ff7ef96430a130adcf4717" + "hash": "5cc277296afa741cf9f1c2d28cd27859" }, "en/2022/chapters/privacy.html": { "date_published": "2022-10-13T00:00:00.000Z", @@ -698,8 +698,8 @@ }, "en/2022/chapters/pwa.html": { "date_published": "2022-09-26T00:00:00.000Z", - "date_modified": "2024-09-26T00:00:00.000Z", - "hash": "dacaa27f5d4cd0e12a6a6df6656e072d" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "fd91f9a6f25842cdf7f0d3ecabf5ff22" }, "en/2022/chapters/security.html": { "date_published": "2022-09-26T00:00:00.000Z", @@ -708,23 +708,23 @@ }, "en/2022/chapters/seo.html": { "date_published": "2022-09-26T00:00:00.000Z", - "date_modified": "2023-10-19T00:00:00.000Z", - "hash": "1473ad30f55df8b1b9c0cf91f2d848f2" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "2ba2770679025cdcecfdff3e199a6d24" }, "en/2022/chapters/structured-data.html": { "date_published": "2022-10-25T00:00:00.000Z", - "date_modified": "2023-01-14T00:00:00.000Z", - "hash": "3514f7753cd3ba3ce03f8209bb40eba3" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "fddd48e980912ba5d1a839a676cb5457" }, "en/2022/chapters/sustainability.html": { "date_published": "2022-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "5129e744bf687a905f89a92afd1edbbe" + "hash": "825c3e9d5c968221273ae2f36a8a9661" }, "en/2022/chapters/third-parties.html": { "date_published": "2022-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "124d8db033c26d3c8d9d749ad38df8b9" + "hash": "339d6adac171799bcf828ebc3b9181e2" }, "en/2022/chapters/webassembly.html": { "date_published": "2022-09-26T00:00:00.000Z", @@ -754,22 +754,22 @@ "en/2024/chapters/accessibility.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "8ad966915429881813271d6c09e2342b" + "hash": "53459580da52322937865f105f19349b" }, "en/2024/chapters/cdn.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "f2fe245243607ac9db40d76e42f3d498" + "hash": "65d8d20990cc3ff5ab6975659151646b" }, "en/2024/chapters/cms.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "ee3998c956a283aeacc6d630b642d23b" + "hash": "a49e3e459c528bf2086a4aa3b18be12d" }, "en/2024/chapters/cookies.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "871a62b97261e05d8e6b9276ea799f48" + "hash": "ec7d73f704876948407a74f8aafa8948" }, "en/2024/chapters/css.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -779,12 +779,12 @@ "en/2024/chapters/ecommerce.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "d5915e740ecb59a322dcd6fdc6d2fcbc" + "hash": "7d7dd4fee27d3f37fca1387821d74484" }, "en/2024/chapters/fonts.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "2e86d7ccf6eeda856b7f6e559978c458" + "hash": "a23e03fbf55fa05ad020a6671f8be500" }, "en/2024/chapters/http.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -794,7 +794,7 @@ "en/2024/chapters/jamstack.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "53d8e184605ad3267eb8ee534de436f8" + "hash": "a281831c9a622ed1aef8e8f6e0214b1b" }, "en/2024/chapters/javascript.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -804,7 +804,7 @@ "en/2024/chapters/markup.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "3da3e8a701e6efb45dde7f3f22587d5f" + "hash": "4b0b140d658cdea96a1bf8b0601da6f8" }, "en/2024/chapters/media.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -824,7 +824,7 @@ "en/2024/chapters/performance.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "efe893e4771f62d519e05f77742f726d" + "hash": "f18514aeec2318cfc3c4099fc9696afd" }, "en/2024/chapters/privacy.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -834,7 +834,7 @@ "en/2024/chapters/security.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "28772d2a18d0f7c4ab2a9245158878a1" + "hash": "5db067562ae7aef59980d7e70c61f00b" }, "en/2024/chapters/seo.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -844,12 +844,12 @@ "en/2024/chapters/structured-data.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "2f3033f4ccf3c6afeaf114ab2c08feb0" + "hash": "abb3cedecd31ffdbe04f949ff508a4d9" }, "en/2024/chapters/sustainability.html": { "date_published": "2024-11-11T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "7325edc6c9bef2da3568cbcbd1fb2584" + "hash": "4676d1a780853d84d30aa6093300e394" }, "en/2024/chapters/third-parties.html": { "date_published": "2024-11-11T00:00:00.000Z", @@ -1834,7 +1834,7 @@ "ja/2022/chapters/capabilities.html": { "date_published": "2024-08-21T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "da676a1f3796751e06c3bc96421965b0" + "hash": "3b6f17093a7f134f2f4097e8fd699223" }, "ja/2022/chapters/cdn.html": { "date_published": "2024-09-26T00:00:00.000Z", @@ -1883,8 +1883,8 @@ }, "ja/2022/chapters/media.html": { "date_published": "2023-04-05T00:00:00.000Z", - "date_modified": "2024-09-20T00:00:00.000Z", - "hash": "17bf014fe051f667a8a5b8024948e3a4" + "date_modified": "2024-11-11T00:00:00.000Z", + "hash": "d1561a1ab65c1a3a55943b0aa0d0a6eb" }, "ja/2022/chapters/mobile-web.html": { "date_published": "2024-08-07T00:00:00.000Z", From f59cb74bd45b9b7fb96235826e305e2840bc507d Mon Sep 17 00:00:00 2001 From: Matteo Fogli Date: Tue, 12 Nov 2024 00:35:30 +0100 Subject: [PATCH 6/7] Fix Mastodon links in contributors page (#3877) * fix mastodon links * fix: template error --- src/config/contributors.json | 2 +- src/templates/base/contributors.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/config/contributors.json b/src/config/contributors.json index c117c6f7aa5..5a76b4628f6 100644 --- a/src/config/contributors.json +++ b/src/config/contributors.json @@ -1829,7 +1829,7 @@ "reviewers" ] }, - "mastodon": "@hdv@front-end.social", + "mastodon": "https://front-end.social/@hdv", "website": "https://hidde.blog/" }, "housseindjirdeh": { diff --git a/src/templates/base/contributors.html b/src/templates/base/contributors.html index 8eb36aabd0c..e388264e37e 100644 --- a/src/templates/base/contributors.html +++ b/src/templates/base/contributors.html @@ -328,7 +328,7 @@

    {% endif %} {% if contributor.mastodon %} - + From e555057402ece78e8caf1308a9a7500d49c99f85 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 11 Nov 2024 23:43:04 +0000 Subject: [PATCH 7/7] Update Timestamps (#3878) Co-authored-by: tunetheweb <10931297+tunetheweb@users.noreply.github.com> --- src/config/last_updated.json | 48 ++++++++++++++++++------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/config/last_updated.json b/src/config/last_updated.json index 5a5aebb347a..d0137d258e6 100644 --- a/src/config/last_updated.json +++ b/src/config/last_updated.json @@ -52,137 +52,137 @@ "/static/pdfs/web_almanac_2019_en.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "f2f22102e58cde2858848edbce692ccd", + "hash": "4e14a8cc177ffe0c343eaf1f58f08a5e", "size": 17 }, "/static/pdfs/web_almanac_2019_en_cover_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "20ec2d928cfec03e909f1afd7de11af3" + "hash": "28a2145889847d26c32480a6949f91b3" }, "/static/pdfs/web_almanac_2019_en_print_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "f7957abb79e7064ec8f873f5cab6be1a", + "hash": "a2f79a39d60844605012fc1441d44325", "size": 16 }, "/static/pdfs/web_almanac_2019_ja.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "faf8e0ead44e5e0ef23d4e5389e8cb26", + "hash": "d29c7fa0c9b046d6f7677433e25ca315", "size": 17 }, "/static/pdfs/web_almanac_2019_ja_cover_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "43703de647602bdfd3b771132ef6e429" + "hash": "d5605c80a038703fe519e4d847e70999" }, "/static/pdfs/web_almanac_2019_ja_print_A5.pdf": { "date_published": "2020-05-15T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "18c796858653b0fff25094c9aaa40abc", + "hash": "7a24f007b1148c3dd59513686e1bae22", "size": 16 }, "/static/pdfs/web_almanac_2020_en.pdf": { "date_published": "2020-12-08T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "4030888cfafeeec6f79e71a93716562e", + "hash": "61edaf4f2c6da413b56def1f4c9c5c92", "size": 24 }, "/static/pdfs/web_almanac_2020_en_cover_A5.pdf": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "c0f8749c7fc062def4e1afc10b636683" + "hash": "5f8e4a9eb3b6eb5aa1bc5c137f344085" }, "/static/pdfs/web_almanac_2020_en_print_A5.pdf": { "date_published": "2020-12-09T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "5fbcdfb11bb7fc519ac97df832fe4efc", + "hash": "f3507b55ce76fe76afeedfa851134ab9", "size": 24 }, "/static/pdfs/web_almanac_2020_ja.pdf": { "date_published": "2021-10-24T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "528ac2094548bdfe87c975504eee108b", + "hash": "0d647a9ed31485ddb1bf308af6718741", "size": 25 }, "/static/pdfs/web_almanac_2020_ja_cover_A5.pdf": { "date_published": "2021-10-24T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "0b852fcef33fdbeb06119fe50c3af1e4" + "hash": "881f22074a0b6c30ebdde2277b685ca5" }, "/static/pdfs/web_almanac_2020_ja_print_A5.pdf": { "date_published": "2021-10-24T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "a5e501097db55e66f53a28aba385635f", + "hash": "18395e0d9927cd69457540f9f540012a", "size": 24 }, "/static/pdfs/web_almanac_2021_en.pdf": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "85befe97242058382a780635705072bf", + "hash": "fd65db4cf123c8013659fc3eaea107fa", "size": 32 }, "/static/pdfs/web_almanac_2021_en_cover_A5.pdf": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "9721ce78d00e24911e545750c6665475" + "hash": "752f86d892be0e299b14ec88454c6ac8" }, "/static/pdfs/web_almanac_2021_en_print_A5.pdf": { "date_published": "2021-12-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "97e2c98695c652ac7ed56844059b66a9", + "hash": "ae25bfcbe71f55b0f31950f90214389d", "size": 31 }, "/static/pdfs/web_almanac_2021_ja.pdf": { "date_published": "22-08-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "4cab3ad3d69aebacbeda4e2c3cb74c17", + "hash": "913ad21c16ab62faa155d35d027f22a7", "size": 32 }, "/static/pdfs/web_almanac_2021_ja_cover_A5.pdf": { "date_published": "22-08-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "e611c0220708d7b0e9ee5b98036aab02" + "hash": "039516dd9e9801e16eaaa58a06ac6fed" }, "/static/pdfs/web_almanac_2021_ja_print_A5.pdf": { "date_published": "22-08-01T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "b280645e3175781d417e8925cb66dc57", + "hash": "0fa361c4be5ebeffaccf8ce073f9b5d1", "size": 32 }, "/static/pdfs/web_almanac_2022_en.pdf": { "date_published": "2022-10-19T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "0387e3e87f0aa43fbcc15e9c74444048", + "hash": "e70c9d8fe96c820acda4b047da94bb6d", "size": 32 }, "/static/pdfs/web_almanac_2022_en_cover_A5.pdf": { "date_published": "2022-10-19T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "ed1f2d2c5c54ccf3ece02521f7a24e23" + "hash": "3ae5b3ef07796c7ca2c650f6d6aa21e9" }, "/static/pdfs/web_almanac_2022_en_print_A5.pdf": { "date_published": "2022-10-19T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "ef896d344b6706181b00e0b7fd73eb9f", + "hash": "f7fedbb8320a4c536263d94678808c79", "size": 31 }, "/static/pdfs/web_almanac_2022_ja.pdf": { "date_published": "2024-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "4e12016164dd76d2fe2a73db99dac7d0", + "hash": "0622150a35dfc079d4b0d7ea1821f9c9", "size": 32 }, "/static/pdfs/web_almanac_2022_ja_cover_A5.pdf": { "date_published": "2024-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "f81b57a5a6b4696926106b872e1eb149" + "hash": "a45c20909a46bb8a113ba21f1d78d0ce" }, "/static/pdfs/web_almanac_2022_ja_print_A5.pdf": { "date_published": "2024-09-26T00:00:00.000Z", "date_modified": "2024-11-11T00:00:00.000Z", - "hash": "a081a983a6cfd1c6b397a61915f7756a", + "hash": "98a9005db7c1f002d0360244c79a46dd", "size": 32 }, "/static/pdfs/web_almanac_2022_js_cover_A5.pdf": {