diff --git a/src/main.py b/src/main.py index 990826d735a..3b7b43609d3 100644 --- a/src/main.py +++ b/src/main.py @@ -12,6 +12,7 @@ import os.path import re import sys +import json # Set WOFF and WOFF2 caching to return 1 year as they should never change # Note this requires similar set up in app.yaml for Google App Engine @@ -190,6 +191,15 @@ def accentless_sort(value): return sorted(value, key=lambda i: strip_accents(i[1]).lower()) +def get_featured_quotes(lang, year): + featured_quotes = {} + featured_quote_filename = 'templates/%s/%s/featured_chapters.json' % (lang, year) + if os.path.isfile(featured_quote_filename): + with open(featured_quote_filename, 'r') as featured_quotes_file: + featured_quotes = json.load(featured_quotes_file) + return featured_quotes + + # Make these functions available in templates. app.jinja_env.globals['get_view_args'] = get_view_args app.jinja_env.globals['chapter_lang_exists'] = chapter_lang_exists @@ -205,7 +215,8 @@ def accentless_sort(value): @validate def home(lang, year): config = get_config(year) - return render_template('%s/%s/index.html' % (lang, year), config=config) + featured_quotes = get_featured_quotes(lang, year) + return render_template('%s/%s/index.html' % (lang, year), config=config, featured_quotes=featured_quotes) @app.route('//') diff --git a/src/templates/base/2019/index.html b/src/templates/base/2019/index.html index 38de1baf3a6..a905ce64f24 100644 --- a/src/templates/base/2019/index.html +++ b/src/templates/base/2019/index.html @@ -43,7 +43,100 @@

{{ self.intro_sub_title() }}

- {% include "%s/2019/featured_chapters.html" % lang %} + {% if featured_quotes %} + {# Get a random quote server side for those without JS #} + {%- set random_chapter = featured_quotes.keys()|list()|random %} + {%- set featured_chapter_quotes = featured_quotes.get(random_chapter) %} + {%- if not featured_chapter_quotes.get('stat_1') %}{% set stat1_hidden = "hidden" %}{% endif %} + {%- if not featured_chapter_quotes.get('stat_2') %}{% set stat2_hidden = "hidden" %}{% endif %} + {%- if not featured_chapter_quotes.get('stat_3') %}{% set stat3_hidden = "hidden" %}{% endif %} + {% if featured_chapter_quotes %} + + + {% endif %} + + {% endif %}

{{ self.contributors_title() }}

diff --git a/src/templates/en/2019/featured_chapters.html b/src/templates/en/2019/featured_chapters.html deleted file mode 100644 index 0bae7486a32..00000000000 --- a/src/templates/en/2019/featured_chapters.html +++ /dev/null @@ -1,94 +0,0 @@ -{%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %} -{%- if featured_chapter == "javascript" %} - {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %} - {%- set featured_chapter_stats = {"stat1":"89%","label1":"Sites with more third-party code than first-party","stat2":"83%","label2":"Sites that use jQuery","stat3":"4.6%","label3":"Home pages using React"} %} -{%- elif featured_chapter == "css" %} - {%- set featured_chapter_quote = "Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user." %} - {%- set featured_chapter_stats = {"stat1":"5%","label1":"Pages using custom properties","stat2":"2%","label2":"Sites that use CSS Grid","stat3":"780","label3":"Number of digits in largest Z-Index value"} %} -{%- elif featured_chapter == "markup" %} - {%- set featured_chapter_quote = "As of July 2019, the HTTP Archive has begun collecting all used element names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. This crawl encountered over 5,000 distinct non-standard element names in these pages, so we capped the total distinct number of elements that we count to the 'top' 5,048." %} - {%- set featured_chapter_stats = {"stat1":"11","label1":"Elements used on more than 90% of pages","stat2":"15%","label2":"Pages that contain deprecated elements","stat3":"65","label3":"Variants of carousels found"} %} -{%- elif featured_chapter == "media" %} - {%- set featured_chapter_quote = "Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media." %} - {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"Median size of home pages","stat2":"60%","label2":"JPEG use amongst images","stat3":"2%","label3":"Use of <picture> element"} %} -{%- elif featured_chapter == "third-parties" %} - {%- set featured_chapter_quote = "The open web is vast, linkable, and interoperable by design. The ability to grab someone else’s complex library and use it on your site with a single <link> or <script> element has supercharged developers’ productivity and enabled awesome new web experiences; on the flip side, the immense popularity of a select few third-party providers raises important performance and privacy concerns. This chapter examines the prevalence and impact of third-party code on the web in 2019, the web usage patterns that lead to the popularity of third-party solutions, and potential repercussions for the future of web performance and privacy." %} - {%- set featured_chapter_stats = {"stat1":"93%","label1":"Pages with 3P","stat2":"49%","label2":"3P requests","stat3":"28%","label3":"3P bytes"} %} -{%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_quote = "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly." %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Font Requests that use Google Fonts","stat2":"29%","label2":"Percent of pages that include a Google Fonts stylesheet link","stat3":"718","label3":"Most font requests on a single page"} %} -{%- elif featured_chapter == "performance" %} - {%- set featured_chapter_quote = "Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration." %} - {%- set featured_chapter_stats = {"stat1":"13%","label1":"Sites with fast FCP","stat2":"42%","label2":"Sites with slow TTFB","stat3":"40%","label3":"Sites with fast FID"} %} -{%- elif featured_chapter == "security" %} - {%- set featured_chapter_quote = "As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author." %} - {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"Sites using TLSv1.3","stat3":"4.43%","label3":"Sites using CSP"} %} -{%- elif featured_chapter == "accessibility" %} - {%- set featured_chapter_quote = "Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on." %} - {%- set featured_chapter_stats = {"stat1":"22%","label1":"Sites using sufficient colour contrast","stat2":"50%","label2":"Sites with missing image alt attributes","stat3":"14%","label3":"Sites using a skip link"} %} -{%- elif featured_chapter == "seo" %} - {%- set featured_chapter_quote = "Search Engine Optimization (SEO) isn't just a hobby or a side project for digital marketers, it is crucial for the success of a website. The primary goal of SEO is to make sure that a website is optimized for the search engine bots that need to crawl and index its pages, as well as for the users that will be navigating the website and consuming its content. SEO impacts everyone working on a website, from the developer who is building it, through to the digital marketer who will need to promote it to new potential customers." %} - {%- set featured_chapter_stats = {"stat1":"346","label1":"No. of words on median page","stat2":"11%","label2":"Pages with no heading tags","stat3":"15%","label3":"Sites eligible for rich results"} %} -{%- elif featured_chapter == "pwa" %} - {%- set featured_chapter_quote = "Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses." %} - {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"Sites that register a service worker","stat2":"15%","label2":"Pageviews that use a Service Worker","stat3":"57%","label3":"PWAs that use the standalone display property"} %} -{%- elif featured_chapter == "mobile-web" %} - {%- set featured_chapter_quote = "Since 2007, the mobile web has grown at an explosive rate. And now, 13 years later, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It's no longer an afterthought, but the primary way people experience the web. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we falling short? Let's find out." %} - {%- set featured_chapter_stats = {"stat1":"65%","label1":"Sites with medium or large content shifts during load","stat2":"32%","label2":"Sites that disable zooming","stat3":"34%","label3":"Sites with sufficiently sized tap targets"} %} -{%- elif featured_chapter == "ecommerce" %} - {%- set featured_chapter_quote = "Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An ecommerce platform is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce." %} - {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"Sites using WooCommerce the most popular ecommerce platform","stat2":"116","label2":"Number of ecommerce platforms detected","stat3":"1,517 KB","label3":"Median image bytes per mobile ecommerce page."} %} -{%- elif featured_chapter == "cms" %} - {%- set featured_chapter_quote = "The general term Content Management System (CMS) refers to systems enabling individuals and organizations to create, manage, and publish content. A CMS for web content, specifically, is a system aimed at creating, managing, and publishing content to be consumed and experienced via the open web. Each CMS implements some subset of a wide range of content management capabilities and the corresponding mechanisms for users to build websites easily and effectively around their content." %} - {%- set featured_chapter_stats = {"stat1":"40%","label1":"Pages powered by a CMS","stat2":"74%","label2":"CMS sites that use WordPress","stat3":"1,232 KB","label3":"Median image KB loaded per desktop CMS page."} %} -{%- elif featured_chapter == "compression" %} - {%- set featured_chapter_quote = "HTTP compression is a technique that allows you to encode information using fewer bits than the original representation. When used for delivering web content, it enables web servers to reduce the amount of data transmitted to clients. This increases the efficiency of the client's available bandwidth, reduces page weight, and improves web performance." %} - {%- set featured_chapter_stats = {"stat1":"38%","label1":"HTTP responses using text-based compression","stat2":"80%","label2":"Use of gzip compression","stat3":"56%","label3":"HTML responses not using compression"} %} -{%- elif featured_chapter == "caching" %} - {%- set featured_chapter_quote = "Caching is a technique that enables the reuse of previously downloaded content. It provides a significant performance benefit by avoiding costly network requests and it also helps scale an application by reducing the traffic to a website's origin infrastructure. There's an old saying, "the fastest request is the one that you don't have to make," and caching is one of the key ways to avoid having to make requests." %} - {%- set featured_chapter_stats = {"stat1":"27%","label1":"Responses not using any caching headers","stat2":"39%","label2":"Responses using the Vary header","stat3":"82%","label3":"Sites that could save 1Mb by optimising caching better"} %} -{%- elif featured_chapter == "cdn" %} - {%- set featured_chapter_quote = ""Use a Content Delivery Network" was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using." %} - {%- set featured_chapter_stats = {"stat1":"20%","label1":"Home pages served by CDN","stat2":"9.61%","label2":"Homepages served by most popular CDN (Cloudflare)","stat3":"30%","label3":"3P CDN requests that use Google"} %} -{%- elif featured_chapter == "page-weight" %} - {%- set featured_chapter_quote = "The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices." %} - {%- set featured_chapter_stats = {"stat1":"10%","label1":"Sites sending more than 6 MB of Data","stat2":"434 KB","label2":"Increase in median desktop size in last year","stat3":"69","label3":"Median requests per home page"} %} -{%- elif featured_chapter == "resource-hints" %} - {%- set featured_chapter_quote = "Resource hints provide hints to the browser about what resources will be needed soon. The action that the browser takes as a result of receiving this hint will vary depending on the type of resource hint; different resource hints kick off different actions. When used correctly, they can improve page performance by giving a head start to important anticipated actions." %} - {%- set featured_chapter_stats = {"stat1":"29%","label1":"Sites using dns-prefetch","stat2":"88%","label2":"Resource hints using the as attribute.","stat3":"0.04%","label3":"Usage of priority hints"} %} -{%- elif featured_chapter == "http2" %} - {%- set featured_chapter_quote = "HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world." %} - {%- set featured_chapter_stats = {"stat1":"95%","label1":"Users who can use HTTP/2","stat2":"27.83%","label2":"Requests with HTTP/2 prioritisation issues","stat3":"8.38%","label3":"Sites supporting QUIC"} %} -{%- endif %} - \ No newline at end of file diff --git a/src/templates/en/2019/featured_chapters.json b/src/templates/en/2019/featured_chapters.json new file mode 100644 index 00000000000..a580d31a8c3 --- /dev/null +++ b/src/templates/en/2019/featured_chapters.json @@ -0,0 +1,182 @@ +{ + "javascript": { + "quote": "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page.", + "stat_1": "89%", + "stat_label_1": "Sites with more third-party code than first-party", + "stat_2": "83%", + "stat_label_2": "Sites that use jQuery", + "stat_3": "4.6%", + "stat_label_3": "Home pages using React" + }, + "css": { + "quote": "Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user.", + "stat_1": "5%", + "stat_label_1": "Pages using custom properties", + "stat_2": "2%", + "stat_label_2": "Sites that use CSS Grid", + "stat_3": "780", + "stat_label_3": "Number of digits in largest Z-Index value" + }, + "markup": { + "quote": "As of July 2019, the HTTP Archive has begun collecting all used element names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. This crawl encountered over 5,000 distinct non-standard element names in these pages, so we capped the total distinct number of elements that we count to the 'top' 5,048.", + "stat_1": "11", + "stat_label_1": "Elements used on more than 90% of pages", + "stat_2": "15%", + "stat_label_2": "Pages that contain deprecated elements", + "stat_3": "65", + "stat_label_3": "Variants of carousels found" + }, + "media": { + "quote": "Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media.", + "stat_1": "1 MB", + "stat_label_1": "Median size of home pages", + "stat_2": "60%", + "stat_label_2": "JPEG use amongst images", + "stat_3": "2%", + "stat_label_3": "Use of <picture> element" + }, + "third-parties": { + "quote": "The open web is vast, linkable, and interoperable by design. The ability to grab someone else’s complex library and use it on your site with a single <link> or <script> element has supercharged developers’ productivity and enabled awesome new web experiences; on the flip side, the immense popularity of a select few third-party providers raises important performance and privacy concerns. This chapter examines the prevalence and impact of third-party code on the web in 2019, the web usage patterns that lead to the popularity of third-party solutions, and potential repercussions for the future of web performance and privacy.", + "stat_1": "93%", + "stat_label_1": "Pages with 3P", + "stat_2": "49%", + "stat_label_2": "3P requests", + "stat_3": "28%", + "stat_label_3": "3P bytes" + }, + "fonts": { + "quote": "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly.", + "stat_1": "74.9%", + "stat_label_1": "3P Font Requests that use Google Fonts", + "stat_2": "29%", + "stat_label_2": "Percent of pages that include a Google Fonts stylesheet link", + "stat_3": "718", + "stat_label_3": "Most font requests on a single page" + }, + "performance": { + "quote": "Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration.", + "stat_1": "13%", + "stat_label_1": "Sites with fast FCP", + "stat_2": "42%", + "stat_label_2": "Sites with slow TTFB", + "stat_3": "40%", + "stat_label_3": "Sites with fast FID" + }, + "security": { + "quote": "As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author.", + "stat_1": "79%", + "stat_label_1": "Sites using HTTPS", + "stat_2": "41%", + "stat_label_2": "Sites using TLSv1.3", + "stat_3": "4.43%", + "stat_label_3": "Sites using CSP" + }, + "accessibility": { + "quote": "Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on.", + "stat_1": "22%", + "stat_label_1": "Sites using sufficient colour contrast", + "stat_2": "50%", + "stat_label_2": "Sites with missing image alt attributes", + "stat_3": "14%", + "stat_label_3": "Sites using a skip link" + }, + "seo": { + "quote": "Search Engine Optimization (SEO) isn't just a hobby or a side project for digital marketers, it is crucial for the success of a website. The primary goal of SEO is to make sure that a website is optimized for the search engine bots that need to crawl and index its pages, as well as for the users that will be navigating the website and consuming its content. SEO impacts everyone working on a website, from the developer who is building it, through to the digital marketer who will need to promote it to new potential customers.", + "stat_1": "346", + "stat_label_1": "No. of words on median page", + "stat_2": "11%", + "stat_label_2": "Pages with no heading tags", + "stat_3": "15%", + "stat_label_3": "Sites eligible for rich results" + }, + "pwa": { + "quote": "Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses.", + "stat_1": "0.44%", + "stat_label_1": "Sites that register a service worker", + "stat_2": "15%", + "stat_label_2": "Pageviews that use a Service Worker", + "stat_3": "57%", + "stat_label_3": "PWAs that use the standalone display property" + }, + "mobile-web": { + "quote": "Since 2007, the mobile web has grown at an explosive rate. And now, 13 years later, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It's no longer an afterthought, but the primary way people experience the web. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we falling short? Let's find out.", + "stat_1": "65%", + "stat_label_1": "Sites with medium or large content shifts during load", + "stat_2": "32%", + "stat_label_2": "Sites that disable zooming", + "stat_3": "34%", + "stat_label_3": "Sites with sufficiently sized tap targets" + }, + "ecommerce": { + "quote": "Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An ecommerce platform is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce.", + "stat_1": "3.98%", + "stat_label_1": "Sites using WooCommerce the most popular ecommerce platform", + "stat_2": "116", + "stat_label_2": "Number of ecommerce platforms detected", + "stat_3": "1,517 KB", + "stat_label_3": "Median image bytes per mobile ecommerce page." + }, + "cms": { + "quote": "The general term Content Management System (CMS) refers to systems enabling individuals and organizations to create, manage, and publish content. A CMS for web content, specifically, is a system aimed at creating, managing, and publishing content to be consumed and experienced via the open web. Each CMS implements some subset of a wide range of content management capabilities and the corresponding mechanisms for users to build websites easily and effectively around their content.", + "stat_1": "40%", + "stat_label_1": "Pages powered by a CMS", + "stat_2": "74%", + "stat_label_2": "CMS sites that use WordPress", + "stat_3": "1,232 KB", + "stat_label_3": "Median image KB loaded per desktop CMS page." + }, + "compression": { + "quote": "HTTP compression is a technique that allows you to encode information using fewer bits than the original representation. When used for delivering web content, it enables web servers to reduce the amount of data transmitted to clients. This increases the efficiency of the client's available bandwidth, reduces page weight, and improves web performance.", + "stat_1": "38%", + "stat_label_1": "HTTP responses using text-based compression", + "stat_2": "80%", + "stat_label_2": "Use of gzip compression", + "stat_3": "56%", + "stat_label_3": "HTML responses not using compression" + }, + "caching": { + "quote": "Caching is a technique that enables the reuse of previously downloaded content. It provides a significant performance benefit by avoiding costly network requests and it also helps scale an application by reducing the traffic to a website's origin infrastructure. There's an old saying, \"the fastest request is the one that you don't have to make,\" and caching is one of the key ways to avoid having to make requests.", + "stat_1": "27%", + "stat_label_1": "Responses not using any caching headers", + "stat_2": "39%", + "stat_label_2": "Responses using the Vary header", + "stat_3": "82%", + "stat_label_3": "Sites that could save 1Mb by optimising caching better" + }, + "cdn": { + "quote": "\"Use a Content Delivery Network\" was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using.", + "stat_1": "20%", + "stat_label_1": "Home pages served by CDN", + "stat_2": "9.61%", + "stat_label_2": "Homepages served by most popular CDN (Cloudflare)", + "stat_3": "30%", + "stat_label_3": "3P CDN requests that use Google" + }, + "page-weight": { + "quote": "The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices.", + "stat_1": "10%", + "stat_label_1": "Sites sending more than 6 MB of Data", + "stat_2": "434 KB", + "stat_label_2": "Increase in median desktop size in last year", + "stat_3": "69", + "stat_label_3": "Median requests per home page" + }, + "resource-hints": { + "quote": "Resource hints provide hints to the browser about what resources will be needed soon. The action that the browser takes as a result of receiving this hint will vary depending on the type of resource hint; different resource hints kick off different actions. When used correctly, they can improve page performance by giving a head start to important anticipated actions.", + "stat_1": "29%", + "stat_label_1": "Sites using dns-prefetch", + "stat_2": "88%", + "stat_label_2": "Resource hints using the as attribute.", + "stat_3": "0.04%", + "stat_label_3": "Usage of priority hints" + }, + "http2": { + "quote": "HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world.", + "stat_1": "95%", + "stat_label_1": "Users who can use HTTP/2", + "stat_2": "27.83%", + "stat_label_2": "Requests with HTTP/2 prioritisation issues", + "stat_3": "8.38%", + "stat_label_3": "Sites supporting QUIC" + } +} diff --git a/src/templates/en/2019/index.html b/src/templates/en/2019/index.html index 090e1f9953e..1a26a971d5a 100644 --- a/src/templates/en/2019/index.html +++ b/src/templates/en/2019/index.html @@ -11,3 +11,5 @@ {% block intro_title %}Web Almanac{% endblock %} {% block intro_sub_title %}HTTP Archive's annual
state of the web report{% endblock %} +{% block featured_chapter%}Featured Chapter{% endblock %} +{% macro readChapter(chapter) %}Read the {{ chapter }} Chapter{% endmacro %} diff --git a/src/templates/en/2020/index.html b/src/templates/en/2020/index.html index 4f48b13c161..3439b065410 100644 --- a/src/templates/en/2020/index.html +++ b/src/templates/en/2020/index.html @@ -22,3 +22,6 @@ Join the team {% endblock %} + +{% block featured_chapter%}Featured Chapter{% endblock %} +{% macro readChapter(chapter) %}Read the {{ chapter }} Chapter{% endmacro %} diff --git a/src/templates/es/2019/featured_chapters.html b/src/templates/es/2019/featured_chapters.html deleted file mode 100644 index ca3789d9bec..00000000000 --- a/src/templates/es/2019/featured_chapters.html +++ /dev/null @@ -1,99 +0,0 @@ -{%- set featured_chapter = ("third-parties","third-parties") | random %} -{# - Below is the full set of chapters. If all are translated then replace above line with this one. - Other than add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter) - {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %} -#} -{%- if featured_chapter == "javascript" %} - {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %} - {%- set featured_chapter_stats = {"stat1":"89%","label1":"Sites with more third-party code than first-party","stat2":"83%","label2":"Sites that use jQuery","stat3":"4.6%","label3":"Home pages using React"} %} -{%- elif featured_chapter == "css" %} - {%- set featured_chapter_quote = "Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user." %} - {%- set featured_chapter_stats = {"stat1":"5%","label1":"Pages using custom properties","stat2":"2%","label2":"Sites that use CSS Grid","stat3":"780","label3":"Number of digits in largest Z-Index value"} %} -{%- elif featured_chapter == "markup" %} - {%- set featured_chapter_quote = "As of July 2019, the HTTP Archive has begun collecting all used element names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. This crawl encountered over 5,000 distinct non-standard element names in these pages, so we capped the total distinct number of elements that we count to the 'top' 5,048." %} - {%- set featured_chapter_stats = {"stat1":"11","label1":"Elements used on more than 90% of pages","stat2":"15%","label2":"Pages that contain deprecated elements","stat3":"65","label3":"Variants of carousels found"} %} -{%- elif featured_chapter == "media" %} - {%- set featured_chapter_quote = "Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media." %} - {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"Median size of home pages","stat2":"60%","label2":"JPEG use amongst images","stat3":"2%","label3":"Use of <picture> element"} %} -{%- elif featured_chapter == "third-parties" %} - {%- set featured_chapter_quote = "La web abierta es vasta, enlazable e interoperable por diseño. La capacidad de tomar la biblioteca compleja de otra persona y usarla en su sitio con un solo elemento <link> or <script> ha incrementado la productividad de los desarrolladores y ha permitido nuevas e increíbles experiencias web; por otro lado, la inmensa popularidad de unos pocos servicios de terceros seleccionados plantea importantes problemas de rendimiento y privacidad. Este capítulo examina la prevalencia y el impacto del código de servicios de terceros en la web en 2019, los patrones de uso de la web que conducen a la popularidad de las soluciones de servicios de terceros y las posibles repercusiones para el futuro del rendimiento y la privacidad de la web." %} - {%- set featured_chapter_stats = {"stat1":"93%","label1":"Páginas con SdT","stat2":"49%","label2":"Peticiones SdT","stat3":"28%","label3":"Bytes SdT"} %} -{%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_quote = "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly." %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Font Requests that use Google Fonts","stat2":"29%","label2":"Percent of pages that include a Google Fonts stylesheet link","stat3":"718","label3":"Most font requests on a single page"} %} -{%- elif featured_chapter == "performance" %} - {%- set featured_chapter_quote = "Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration." %} - {%- set featured_chapter_stats = {"stat1":"13%","label1":"Sites with fast FCP","stat2":"42%","label2":"Sites with slow TTFB","stat3":"40%","label3":"Sites with fast FID"} %} -{%- elif featured_chapter == "security" %} - {%- set featured_chapter_quote = "As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author." %} - {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"Sites using TLSv1.3","stat3":"4.43%","label3":"Sites using CSP"} %} -{%- elif featured_chapter == "accessibility" %} - {%- set featured_chapter_quote = "Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on." %} - {%- set featured_chapter_stats = {"stat1":"22%","label1":"Sites using sufficient colour contrast","stat2":"50%","label2":"Sites with missing image alt attributes","stat3":"14%","label3":"Sites using a skip link"} %} -{%- elif featured_chapter == "seo" %} - {%- set featured_chapter_quote = "Search Engine Optimization (SEO) isn't just a hobby or a side project for digital marketers, it is crucial for the success of a website. The primary goal of SEO is to make sure that a website is optimized for the search engine bots that need to crawl and index its pages, as well as for the users that will be navigating the website and consuming its content. SEO impacts everyone working on a website, from the developer who is building it, through to the digital marketer who will need to promote it to new potential customers." %} - {%- set featured_chapter_stats = {"stat1":"346","label1":"No. of words on median page","stat2":"11%","label2":"Pages with no heading tags","stat3":"15%","label3":"Sites eligible for rich results"} %} -{%- elif featured_chapter == "pwa" %} - {%- set featured_chapter_quote = "Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses." %} - {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"Sites that register a service worker","stat2":"15%","label2":"Pageviews that use a Service Worker","stat3":"57%","label3":"PWAs that use the standalone display property"} %} -{%- elif featured_chapter == "mobile-web" %} - {%- set featured_chapter_quote = "Since 2007, the mobile web has grown at an explosive rate. And now, 13 years later, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It's no longer an afterthought, but the primary way people experience the web. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we falling short? Let's find out." %} - {%- set featured_chapter_stats = {"stat1":"65%","label1":"Sites with medium or large content shifts during load","stat2":"32%","label2":"Sites that disable zooming","stat3":"34%","label3":"Sites with sufficiently sized tap targets"} %} -{%- elif featured_chapter == "ecommerce" %} - {%- set featured_chapter_quote = "Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An ecommerce platform is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce." %} - {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"Sites using WooCommerce the most popular ecommerce platform","stat2":"116","label2":"Number of ecommerce platforms detected","stat3":"1,517 KB","label3":"Median image bytes per mobile ecommerce page."} %} -{%- elif featured_chapter == "cms" %} - {%- set featured_chapter_quote = "The general term Content Management System (CMS) refers to systems enabling individuals and organizations to create, manage, and publish content. A CMS for web content, specifically, is a system aimed at creating, managing, and publishing content to be consumed and experienced via the open web. Each CMS implements some subset of a wide range of content management capabilities and the corresponding mechanisms for users to build websites easily and effectively around their content." %} - {%- set featured_chapter_stats = {"stat1":"40%","label1":"Pages powered by a CMS","stat2":"74%","label2":"CMS sites that use WordPress","stat3":"1,232 KB","label3":"Median image KB loaded per desktop CMS page."} %} -{%- elif featured_chapter == "compression" %} - {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %} - {%- set featured_chapter_stats = {"stat1":"38%","label1":"HTTP responses using text-based compression","stat2":"80%","label2":"Use of gzip compression","stat3":"56%","label3":"HTML responses not using compression"} %} -{%- elif featured_chapter == "caching" %} - {%- set featured_chapter_quote = "Caching is a technique that enables the reuse of previously downloaded content. It provides a significant performance benefit by avoiding costly network requests and it also helps scale an application by reducing the traffic to a website's origin infrastructure. There's an old saying, "the fastest request is the one that you don't have to make," and caching is one of the key ways to avoid having to make requests." %} - {%- set featured_chapter_stats = {"stat1":"27%","label1":"Responses not using any caching headers","stat2":"39%","label2":"Responses using the Vary header","stat3":"82%","label3":"Sites that could save 1Mb by optimising caching better"} %} -{%- elif featured_chapter == "cdn" %} - {%- set featured_chapter_quote = ""Use a Content Delivery Network" was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using." %} - {%- set featured_chapter_stats = {"stat1":"20%","label1":"Home pages served by CDN","stat2":"9.61%","label2":"Homepages served by most popular CDN (Cloudflare)","stat3":"30%","label3":"3P CDN requests that use Google"} %} -{%- elif featured_chapter == "page-weight" %} - {%- set featured_chapter_quote = "The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices." %} - {%- set featured_chapter_stats = {"stat1":"10%","label1":"Sites sending more than 6 MB of Data","stat2":"434 KB","label2":"Increase in median desktop size in last year","stat3":"69","label3":"Median requests per home page"} %} -{%- elif featured_chapter == "resource-hints" %} - {%- set featured_chapter_quote = "Resource hints provide hints to the browser about what resources will be needed soon. The action that the browser takes as a result of receiving this hint will vary depending on the type of resource hint; different resource hints kick off different actions. When used correctly, they can improve page performance by giving a head start to important anticipated actions." %} - {%- set featured_chapter_stats = {"stat1":"29%","label1":"Sites using dns-prefetch","stat2":"88%","label2":"Resource hints using the as attribute.","stat3":"0.04%","label3":"Usage of priority hints"} %} -{%- elif featured_chapter == "http2" %} - {%- set featured_chapter_quote = "HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world." %} - {%- set featured_chapter_stats = {"stat1":"95%","label1":"Users who can use HTTP/2","stat2":"27.83%","label2":"Requests with HTTP/2 prioritisation issues","stat3":"8.38%","label3":"Sites supporting QUIC"} %} -{%- endif %} - \ No newline at end of file diff --git a/src/templates/es/2019/featured_chapters.json b/src/templates/es/2019/featured_chapters.json new file mode 100644 index 00000000000..3f471655052 --- /dev/null +++ b/src/templates/es/2019/featured_chapters.json @@ -0,0 +1,11 @@ +{ + "third-parties": { + "quote": "La web abierta es vasta, enlazable e interoperable por diseño. La capacidad de tomar la biblioteca compleja de otra persona y usarla en su sitio con un solo elemento <link> or <script> ha incrementado la productividad de los desarrolladores y ha permitido nuevas e increíbles experiencias web; por otro lado, la inmensa popularidad de unos pocos servicios de terceros seleccionados plantea importantes problemas de rendimiento y privacidad. Este capítulo examina la prevalencia y el impacto del código de servicios de terceros en la web en 2019, los patrones de uso de la web que conducen a la popularidad de las soluciones de servicios de terceros y las posibles repercusiones para el futuro del rendimiento y la privacidad de la web.", + "stat_1": "93%", + "stat_label_1": "Páginas con SdT", + "stat_2": "49%", + "stat_label_2": "Peticiones SdT", + "stat_3": "28%", + "stat_label_3": "Bytes SdT" + } +} diff --git a/src/templates/es/2019/index.html b/src/templates/es/2019/index.html index 229795c3afe..ad82fd1f01b 100644 --- a/src/templates/es/2019/index.html +++ b/src/templates/es/2019/index.html @@ -10,3 +10,6 @@ {% block intro_title %}Web Almanac{% endblock %} {% block intro_sub_title %}HTTP Archive informe del
estado de la web anual{% endblock %} + +{% block featured_chapter %}Capítulo Destacado{% endblock %} +{% macro readChapter(chapter) %}Lea el Capítulo: {{ chapter }}{% endmacro %} diff --git a/src/templates/es/2020/index.html b/src/templates/es/2020/index.html index 2d73fb14629..d3ec2ca068e 100644 --- a/src/templates/es/2020/index.html +++ b/src/templates/es/2020/index.html @@ -22,3 +22,6 @@ ¡Únete al equipo! {% endblock %} + +{% block featured_chapter %}Capítulo Destacado{% endblock %} +{% macro readChapter(chapter) %}Lea el Capítulo: {{ chapter }}{% endmacro %} diff --git a/src/templates/fr/2019/featured_chapters.html b/src/templates/fr/2019/featured_chapters.html deleted file mode 100644 index 8731f179a2f..00000000000 --- a/src/templates/fr/2019/featured_chapters.html +++ /dev/null @@ -1,99 +0,0 @@ -{%- set featured_chapter = ("accessibility","third-parties","seo","markup","cms","caching","mobile-web","resource-hints","compression") | random %} -{# - Below is the full set of chapters. If all are translated then replace above line with this one. - Other than add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter) - {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %} -#} -{%- if featured_chapter == "javascript" %} - {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %} - {%- set featured_chapter_stats = {"stat1":"89%","label1":"Sites with more third-party code than first-party","stat2":"83%","label2":"Sites that use jQuery","stat3":"4.6%","label3":"Home pages using React"} %} -{%- elif featured_chapter == "css" %} - {%- set featured_chapter_quote = "Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user." %} - {%- set featured_chapter_stats = {"stat1":"5%","label1":"Pages using custom properties","stat2":"2%","label2":"Sites that use CSS Grid","stat3":"780","label3":"Number of digits in largest Z-Index value"} %} -{%- elif featured_chapter == "markup" %} - {%- set featured_chapter_quote = "À partir de juillet 2019, HTTP Archive a commencé à collecter tous les noms de *éléments* utilisés dans le DOM, environ 4,4 millions de pages d’accueil pour ordinateurs de bureau et environ 5,3 millions de pages d’accueil sur mobiles que nous pouvons maintenant commencer à analyser et à disséquer. Lors de cette collecte, nous avons découvert *plus de 5 000 noms d’éléments non standard distincts* dans les pages. Nous avons donc limité le nombre total d’éléments distincts que nous comptons aux 5 048 \"premiers\"." %} - {%- set featured_chapter_stats = {"stat1":"11","label1":"éléments sont utilisés sur plus de 90 % des pages.","stat2":"15 %","label2":"des pages contiennent des éléments dépréciés.","stat3":"65","label3":"variantes de carrousels trouvées."} %} -{%- elif featured_chapter == "media" %} - {%- set featured_chapter_quote = "Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media." %} - {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"Median size of home pages","stat2":"60%","label2":"JPEG use amongst images","stat3":"2%","label3":"Use of <picture> element"} %} -{%- elif featured_chapter == "third-parties" %} - {%- set featured_chapter_quote = "Le Web ouvert a été conçu pour être vaste, interconnectable et interopérable. La possibilité d’accéder à de puissantes librairies tierces et de les utiliser sur votre site avec des éléments <link> ou <script> a décuplé la productivité des développeurs et permis de nouvelles et incroyables expériences web ; par contre, l’immense popularité de quelques fournisseurs tiers (3P) pose d’importants problèmes en termes de performances et de confidentialité. Ce chapitre examine la prévalence et l’impact du code tiers sur le Web en 2019, les modèles d’utilisation du Web qui mènent à la popularité des solutions tierces et les répercussions potentielles sur l’avenir des performances Web et de la confidentialité." %} - {%- set featured_chapter_stats = {"stat1":"93 %","label1":"pages avec 3P.","stat2":"49 %","label2":"des requêtes.","stat3":"28 %","label3":"des octets."} %} -{%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_quote = "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly." %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Font Requests that use Google Fonts","stat2":"29%","label2":"Percent of pages that include a Google Fonts stylesheet link","stat3":"718","label3":"Most font requests on a single page"} %} -{%- elif featured_chapter == "performance" %} - {%- set featured_chapter_quote = "Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration." %} - {%- set featured_chapter_stats = {"stat1":"13%","label1":"Sites with fast FCP","stat2":"42%","label2":"Sites with slow TTFB","stat3":"40%","label3":"Sites with fast FID"} %} -{%- elif featured_chapter == "security" %} - {%- set featured_chapter_quote = "As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author." %} - {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"Sites using TLSv1.3","stat3":"4.43%","label3":"Sites using CSP"} %} -{%- elif featured_chapter == "accessibility" %} - {%- set featured_chapter_quote = "L’accessibilité sur le web est essentielle pour une société inclusive et équitable. Alors que nos vies sociales et professionnelles se déplacent de plus en plus vers le monde en ligne, il devient encore plus important pour les personnes handicapées de pouvoir participer à toutes les interactions en ligne sans barrières. Tout comme les architectes en bâtiment peuvent créer ou omettre des fonctionnalités d’accessibilité telles que des rampes pour fauteuils roulants, les développeurs et développeuses web peuvent aider ou entraver la technologie d’assistance sur laquelle les utilisateurs se basent." %} - {%- set featured_chapter_stats = {"stat1":"22 %","label1":"Sites ayant des contrastes de couleurs insuffisants","stat2":"50 %","label2":"Sites ayant des attributs alt manquants","stat3":"14 %","label3":"Sites utilisant des liens d’évitement"} %} -{%- elif featured_chapter == "seo" %} - {%- set featured_chapter_quote = "L’optimisation pour les moteurs de recherche (SEO) n'est pas seulement un passe-temps ou un projet parallèle pour les spécialistes du marketing digital, ce métier est crucial pour le succès d'un site web. Le but principal du référencement naturel est de s'assurer qu’un site internet est optimisé pour les robots des moteurs de recherche qui ont besoin d’explorer et d'indexer ses pages, ainsi que pour les utilisateurs qui naviguent et consomment des contenus. Le référencement a un impact sur tous ceux qui travaillent sur un site web, du développeur qui le construit au marketeur digital qui en fait la promotion auprès de nouveaux clients potentiels." %} - {%- set featured_chapter_stats = {"stat1":"346","label1":"mots par page, en médiane.","stat2":"11 %","label2":"des pages n’ont pas de titres HTML (Hn).","stat3":"15 %","label3":"des sites sont éligibles aux résultats enrichis."} %} -{%- elif featured_chapter == "pwa" %} - {%- set featured_chapter_quote = "Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses." %} - {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"Sites that register a service worker","stat2":"15%","label2":"Pageviews that use a Service Worker","stat3":"57%","label3":"PWAs that use the standalone display property"} %} -{%- elif featured_chapter == "mobile-web" %} - {%- set featured_chapter_quote = "Depuis 2007, le web mobile s’est développé à un rythme explosif. Aujourd’hui, 13 ans plus tard, le mobile représente 59 % de toutes les recherches et 58,7 % de tout le trafic web, selon les données de Akamai mPulse en juillet 2019. Ce n’est plus un usage secondaire, mais la principale façon dont les gens vivent le web. Alors, étant donné l’importance du mobile, quel genre d’expérience offrons-nous à nos visiteurs et visiteuses ? Quels sont les points faibles ? C’est ce que nous allons découvrir." %} - {%- set featured_chapter_stats = {"stat1":"65 %","label1":"des sites sont victimes de déplacements de contenu moyens ou importants pendant le chargement","stat2":"32 %","label2":"des sites désactive le zoom","stat3":"34 %","label3":"des sites ont des cibles d'appui de tailles suffisantes"} %} -{%- elif featured_chapter == "ecommerce" %} - {%- set featured_chapter_quote = "Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An ecommerce platform is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce." %} - {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"Sites using WooCommerce the most popular ecommerce platform","stat2":"116","label2":"Number of ecommerce platforms detected","stat3":"1,517 KB","label3":"Median image bytes per mobile ecommerce page."} %} -{%- elif featured_chapter == "cms" %} - {%- set featured_chapter_quote = "Le terme général Système de gestion de contenu (SGC, ou CMS pour Content Management System en anglais) désigne les systèmes permettant aux personnes et aux organisations de créer, de gérer et de publier du contenu. Un CMS pour le contenu web, plus précisément, est un système visant à créer, gérer et publier du contenu à consommer et à expérimenter via le web ouvert. Chaque CMS met en œuvre un sous-ensemble d’un large éventail de capacités de gestion de contenu et les mécanismes correspondants pour permettre aux utilisateurs de construire facilement et efficacement des sites web autour de leur contenu." %} - {%- set featured_chapter_stats = {"stat1":"40 %","label1":"des pages web sont propulsées par un CMS","stat2":"74 %","label2":"des sites utilisant un CMS utilisent WordPress","stat3":"1 232 Ko","label3":"poids des images sur page CMS (bureau)"} %} -{%- elif featured_chapter == "compression" %} - {%- set featured_chapter_quote = "La compression HTTP est une technique qui permet de coder des informations en utilisant moins de bits que la représentation originale. Lorsqu’elle est utilisée pour la diffusion de contenu web, elle permet aux serveurs web de réduire la quantité de données transmises aux clients. La compression HTTP augmente l’efficacité de la bande passante disponible au client, réduit le poids des pages, et améliore les performances web." %} - {%- set featured_chapter_stats = {"stat1":"38%","label1":"Réponses HTTP avec compression de texte","stat2":"80%","label2":"Utilisent la compression gzip","stat3":"56%","label3":"Réponses HTML n'utilisant pas de compression"} %} -{%- elif featured_chapter == "caching" %} - {%- set featured_chapter_quote = "La mise en cache est une technique permettant de réutiliser un contenu précédemment téléchargé. Elle offre un avantage significatif en termes de performance en évitant de rejouer de coûteuses requêtes. La mise en cache facilite la montée en charge d’une application, en réduisant le trafic sur le réseau à destination du serveur d'origine. Un vieux dicton dit que \"la requête la plus rapide est celle que vous n’avez pas à faire\" et la mise en cache est l’un des principaux moyens d'éviter d'avoir à refaire des requêtes." %} - {%- set featured_chapter_stats = {"stat1":"27 %","label1":"des réponses n’utilisent aucun en-tête de cache.","stat2":"39 %","label2":"des réponses utilisent l’en-tête Vary.","stat3":"82 %","label3":"des sites pourraient économiser 1 Mo en optimisant le cache."} %} -{%- elif featured_chapter == "cdn" %} - {%- set featured_chapter_quote = ""Use a Content Delivery Network" was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using." %} - {%- set featured_chapter_stats = {"stat1":"20%","label1":"Home pages served by CDN","stat2":"9.61%","label2":"Homepages served by most popular CDN (Cloudflare)","stat3":"30%","label3":"3P CDN requests that use Google"} %} -{%- elif featured_chapter == "page-weight" %} - {%- set featured_chapter_quote = "The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices." %} - {%- set featured_chapter_stats = {"stat1":"10%","label1":"Sites sending more than 6 MB of Data","stat2":"434 KB","label2":"Increase in median desktop size in last year","stat3":"69","label3":"Median requests per home page"} %} -{%- elif featured_chapter == "resource-hints" %} - {%- set featured_chapter_quote = "Les indices de ressources fournissent des \"suggestions\" au navigateur sur les ressources qui seront rapidement nécessaires. L’action que le navigateur entreprend à la suite de cet indice varie selon le type d’indice ; différents indices déclenchent différentes actions. Lorsqu’ils sont utilisés correctement, ils peuvent améliorer les performances de la page en donnant une longueur d'avance aux actions importantes, par anticipation." %} - {%- set featured_chapter_stats = {"stat1":"29 %","label1":"des sites utilisent dns-prefetch.","stat2":"88 %","label2":"des indices de ressources utilisent l’attribut as.","stat3":"0,04 %","label3":"des pages utilisent des indices de priorité."} %} -{%- elif featured_chapter == "http2" %} - {%- set featured_chapter_quote = "HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world." %} - {%- set featured_chapter_stats = {"stat1":"95%","label1":"Users who can use HTTP/2","stat2":"27.83%","label2":"Requests with HTTP/2 prioritisation issues","stat3":"8.38%","label3":"Sites supporting QUIC"} %} -{%- endif %} -
-
-

Focus sur le chapitre…

-

{{ localizedChapterTitles[featured_chapter] }}

-
- {{ featured_chapter_quote|safe }} -
-
- {% if featured_chapter_stats.get('stat1') %} -
-
{{ featured_chapter_stats.get('stat1')|safe }}
-
{{ featured_chapter_stats.get('label1')|safe }}
-
- {% endif %} - {% if featured_chapter_stats.get('stat2') %} -
-
{{ featured_chapter_stats.get('stat2')|safe }}
-
{{ featured_chapter_stats.get('label2')|safe }}
-
- {% endif %} - {% if featured_chapter_stats.get('stat3') %} -
-
{{ featured_chapter_stats.get('stat3')|safe }}
-
{{ featured_chapter_stats.get('label3')|safe }}
-
- {% endif %} -
- - Lire le chapitre : {{ localizedChapterTitles[featured_chapter] }} - -
-
diff --git a/src/templates/fr/2019/featured_chapters.json b/src/templates/fr/2019/featured_chapters.json new file mode 100644 index 00000000000..8dabb9d1767 --- /dev/null +++ b/src/templates/fr/2019/featured_chapters.json @@ -0,0 +1,83 @@ +{ + "markup": { + "quote": "À partir de juillet 2019, HTTP Archive a commencé à collecter tous les noms de *éléments* utilisés dans le DOM, environ 4,4 millions de pages d’accueil pour ordinateurs de bureau et environ 5,3 millions de pages d’accueil sur mobiles que nous pouvons maintenant commencer à analyser et à disséquer. Lors de cette collecte, nous avons découvert *plus de 5 000 noms d’éléments non standard distincts* dans les pages. Nous avons donc limité le nombre total d’éléments distincts que nous comptons aux 5 048 \"premiers\".", + "stat_1": "11", + "stat_label_1": "éléments sont utilisés sur plus de 90 % des pages.", + "stat_2": "15 %", + "stat_label_2": "des pages contiennent des éléments dépréciés.", + "stat_3": "65", + "stat_label_3": "variantes de carrousels trouvées." + }, + "third-parties": { + "quote": "Le Web ouvert a été conçu pour être vaste, interconnectable et interopérable. La possibilité d’accéder à de puissantes librairies tierces et de les utiliser sur votre site avec des éléments <link> ou <script> a décuplé la productivité des développeurs et permis de nouvelles et incroyables expériences web ; par contre, l’immense popularité de quelques fournisseurs tiers (3P) pose d’importants problèmes en termes de performances et de confidentialité. Ce chapitre examine la prévalence et l’impact du code tiers sur le Web en 2019, les modèles d’utilisation du Web qui mènent à la popularité des solutions tierces et les répercussions potentielles sur l’avenir des performances Web et de la confidentialité.", + "stat_1": "93 %", + "stat_label_1": "pages avec 3P.", + "stat_2": "49 %", + "stat_label_2": "des requêtes.", + "stat_3": "28 %", + "stat_label_3": "des octets." + }, + "accessibility": { + "quote": "L’accessibilité sur le web est essentielle pour une société inclusive et équitable. Alors que nos vies sociales et professionnelles se déplacent de plus en plus vers le monde en ligne, il devient encore plus important pour les personnes handicapées de pouvoir participer à toutes les interactions en ligne sans barrières. Tout comme les architectes en bâtiment peuvent créer ou omettre des fonctionnalités d’accessibilité telles que des rampes pour fauteuils roulants, les développeurs et développeuses web peuvent aider ou entraver la technologie d’assistance sur laquelle les utilisateurs se basent.", + "stat_1": "22 %", + "stat_label_1": "Sites ayant des contrastes de couleurs insuffisants", + "stat_2": "50 %", + "stat_label_2": "Sites ayant des attributs alt manquants", + "stat_3": "14 %", + "stat_label_3": "Sites utilisant des liens d’évitement" + }, + "seo": { + "quote": "L’optimisation pour les moteurs de recherche (SEO) n'est pas seulement un passe-temps ou un projet parallèle pour les spécialistes du marketing digital, ce métier est crucial pour le succès d'un site web. Le but principal du référencement naturel est de s'assurer qu’un site internet est optimisé pour les robots des moteurs de recherche qui ont besoin d’explorer et d'indexer ses pages, ainsi que pour les utilisateurs qui naviguent et consomment des contenus. Le référencement a un impact sur tous ceux qui travaillent sur un site web, du développeur qui le construit au marketeur digital qui en fait la promotion auprès de nouveaux clients potentiels.", + "stat_1": "346", + "stat_label_1": "mots par page, en médiane.", + "stat_2": "11 %", + "stat_label_2": "des pages n’ont pas de titres HTML (Hn).", + "stat_3": "15 %", + "stat_label_3": "des sites sont éligibles aux résultats enrichis." + }, + "mobile-web": { + "quote": "Depuis 2007, le web mobile s’est développé à un rythme explosif. Aujourd’hui, 13 ans plus tard, le mobile représente 59 % de toutes les recherches et 58,7 % de tout le trafic web, selon les données de Akamai mPulse en juillet 2019. Ce n’est plus un usage secondaire, mais la principale façon dont les gens vivent le web. Alors, étant donné l’importance du mobile, quel genre d’expérience offrons-nous à nos visiteurs et visiteuses ? Quels sont les points faibles ? C’est ce que nous allons découvrir.", + "stat_1": "65 %", + "stat_label_1": "des sites sont victimes de déplacements de contenu moyens ou importants pendant le chargement", + "stat_2": "32 %", + "stat_label_2": "des sites désactive le zoom", + "stat_3": "34 %", + "stat_label_3": "des sites ont des cibles d'appui de tailles suffisantes" + }, + "cms": { + "quote": "Le terme général Système de gestion de contenu (SGC, ou CMS pour Content Management System en anglais) désigne les systèmes permettant aux personnes et aux organisations de créer, de gérer et de publier du contenu. Un CMS pour le contenu web, plus précisément, est un système visant à créer, gérer et publier du contenu à consommer et à expérimenter via le web ouvert. Chaque CMS met en œuvre un sous-ensemble d’un large éventail de capacités de gestion de contenu et les mécanismes correspondants pour permettre aux utilisateurs de construire facilement et efficacement des sites web autour de leur contenu.", + "stat_1": "40 %", + "stat_label_1": "des pages web sont propulsées par un CMS", + "stat_2": "74 %", + "stat_label_2": "des sites utilisant un CMS utilisent WordPress", + "stat_3": "1 232 Ko", + "stat_label_3": "poids des images sur page CMS (bureau)" + }, + "compression": { + "quote": "La compression HTTP est une technique qui permet de coder des informations en utilisant moins de bits que la représentation originale. Lorsqu’elle est utilisée pour la diffusion de contenu web, elle permet aux serveurs web de réduire la quantité de données transmises aux clients. La compression HTTP augmente l’efficacité de la bande passante disponible au client, réduit le poids des pages, et améliore les performances web.", + "stat_1": "38%", + "stat_label_1": "Réponses HTTP avec compression de texte", + "stat_2": "80%", + "stat_label_2": "Utilisent la compression gzip", + "stat_3": "56%", + "stat_label_3": "Réponses HTML n'utilisant pas de compression" + }, + "caching": { + "quote": "La mise en cache est une technique permettant de réutiliser un contenu précédemment téléchargé. Elle offre un avantage significatif en termes de performance en évitant de rejouer de coûteuses requêtes. La mise en cache facilite la montée en charge d’une application, en réduisant le trafic sur le réseau à destination du serveur d'origine. Un vieux dicton dit que \"la requête la plus rapide est celle que vous n’avez pas à faire\" et la mise en cache est l’un des principaux moyens d'éviter d'avoir à refaire des requêtes.", + "stat_1": "27 %", + "stat_label_1": "des réponses n’utilisent aucun en-tête de cache.", + "stat_2": "39 %", + "stat_label_2": "des réponses utilisent l’en-tête Vary.", + "stat_3": "82 %", + "stat_label_3": "des sites pourraient économiser 1 Mo en optimisant le cache." + }, + "resource-hints": { + "quote": "Les indices de ressources fournissent des \"suggestions\" au navigateur sur les ressources qui seront rapidement nécessaires. L’action que le navigateur entreprend à la suite de cet indice varie selon le type d’indice ; différents indices déclenchent différentes actions. Lorsqu’ils sont utilisés correctement, ils peuvent améliorer les performances de la page en donnant une longueur d'avance aux actions importantes, par anticipation.", + "stat_1": "29 %", + "stat_label_1": "des sites utilisent dns-prefetch.", + "stat_2": "88 %", + "stat_label_2": "des indices de ressources utilisent l’attribut as.", + "stat_3": "0,04 %", + "stat_label_3": "des pages utilisent des indices de priorité." + } +} diff --git a/src/templates/fr/2019/index.html b/src/templates/fr/2019/index.html index 4fbcb3f456f..54c6835e85f 100644 --- a/src/templates/fr/2019/index.html +++ b/src/templates/fr/2019/index.html @@ -10,3 +10,6 @@ {% block intro_title %}Web Almanac{% endblock %} {% block intro_sub_title %}Rapport annuel
de HTTP Archive sur
l’état du Web{% endblock %} + +{% block featured_chapter %}Focus sur le chapitre…{% endblock %} +{% macro readChapter(chapter) %}Lire le chapitre : {{ chapter }}{% endmacro %} diff --git a/src/templates/fr/2020/index.html b/src/templates/fr/2020/index.html index 47008791193..d2fea833f50 100644 --- a/src/templates/fr/2020/index.html +++ b/src/templates/fr/2020/index.html @@ -22,3 +22,6 @@ Rejoignez l'équipe ! {% endblock %} + +{% block featured_chapter%}Focus sur le chapitre…{% endblock %} +{% macro readChapter(chapter) %}Lire le chapitre : {{ chapter }}{% endmacro %} diff --git a/src/templates/ja/2019/featured_chapters.html b/src/templates/ja/2019/featured_chapters.html deleted file mode 100644 index 081f9d54c3c..00000000000 --- a/src/templates/ja/2019/featured_chapters.html +++ /dev/null @@ -1,99 +0,0 @@ -{%- set featured_chapter = ("javascript","css","markup","media","third-parties","fonts","performance","security","accessibility","seo","pwa","mobile-web","ecommerce","cms","compression","caching","cdn","page-weight","resource-hints","http2") | random %} -{# - Below is the full set of chapters. If all are translated then replace above line with this one. - Other than add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter) - {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %} -#} -{%- if featured_chapter == "javascript" %} - {%- set featured_chapter_quote = "JavaScript はブラウザに送信するリソースの中で最もコストのかかるもので、ダウンロード、解析、コンパイル、そして最終的に実行されます。ブラウザはスクリプトの解析とコンパイルにかかる時間を大幅に短縮しましたが、ダウンロードと実行は、JavaScriptがWebページで処理される際に最もコストのかかる段階となっています。" %} - {%- set featured_chapter_stats = {"stat1":"89%","label1":"ファーストパーティよりもサードパーティのコードが多いサイト","stat2":"83%","label2":"jQueryを使用しているサイト","stat3":"4.6%","label3":"Reactを使ったホームページ"} %} -{%- elif featured_chapter == "css" %} - {%- set featured_chapter_quote = "Cascading Style Sheets (CSS) は、Web ページのペイント、フォーマット、レイアウトに使用されます。その機能は、テキストの色から3Dパースペクティブと、シンプルな概念にまで及びます。また、さまざまな画面サイズ、表示コンテキスト、および印刷を処理するために開発者に力を与えるフックを持っています。CSS は、開発者がコンテンツを調整し、ユーザーに適切に適応することを確認するのに役立ちます。" %} - {%- set featured_chapter_stats = {"stat1":"5%","label1":"カスタムプロパティを使用したページ","stat2":"2%","label2":"CSS Gridを使用しているサイト","stat3":"780","label3":"Z-Indexの最大値の桁数"} %} -{%- elif featured_chapter == "markup" %} - {%- set featured_chapter_quote = "2019年7月現在、HTTP Archiveは、約440万件のデスクトップホームページと約530万件のモバイルホームページについて、DOM内で使用されているすべての要素名の収集を開始しており、これにより調査と解剖を開始することができるようになりました。このクロールでは、これらのページで5,000以上の明確な非標準要素名に遭遇したので、私たちがカウントしている要素の合計の明確な数を「トップ」の5,048に制限しました。" %} - {%- set featured_chapter_stats = {"stat1":"11","label1":"90%以上のページで使用されている要素","stat2":"15%","label2":"非推奨の要素を含むページ","stat3":"65","label3":"カルーセルのバリエーションが見つかりました"} %} -{%- elif featured_chapter == "media" %} - {%- set featured_chapter_quote = "画像、アニメーション、動画はウェブ体験の重要な一部です。それらが重要な理由はたくさんあります。ストーリーを伝えたり、視聴者の関心を引きつけたり、他のウェブ技術では簡単には作れないような芸術的な表現を提供したりするのに役立ちます。これらのメディアリソースの重要性は、2つの方法で示すことができます。1つは、1ページのダウンロードに必要なバイト数の多さ、もう1つは、メディアで描かれたピクセル数の多さです。" %} - {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"ホームページのサイズの中央値","stat2":"60%","label2":"画像間でのJPEG利用","stat3":"2%","label3":"<picture>要素の使用"} %} -{%- elif featured_chapter == "third-parties" %} - {%- set featured_chapter_quote = "オープンウェブは広大で、リンク可能で、相互運用可能な設計になっています。他の誰かの複雑なライブラリを取得し、単一の <link> または <script> 要素を使用して自分のサイトで使用する能力は、開発者の生産性を高め、素晴らしい新しいウェブ体験を可能にしました。本章では、2019年のWebにおけるサードパーティコードの普及と影響、サードパーティソリューションの人気につながるWebの利用パターン、Webのパフォーマンスとプライバシーの将来に対する潜在的な影響を検証します。" %} - {%- set featured_chapter_stats = {"stat1":"93%","label1":"サードパーティを含むページ","stat2":"49%","label2":"サードパーティのリクエスト","stat3":"28%","label3":"サードパーティのバイト数"} %} -{%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_quote = "ウェブフォントは、ウェブ上で美しく機能的なタイポグラフィを可能にします。ウェブフォントを使用することは、デザインに力を与えるだけでなく、デザインのサブセットを民主化します。しかし、どんなに良いことがあっても、ウェブフォントが適切に読み込まれていないと、サイトのパフォーマンスに大きな悪影響を及ぼすこともあります。" %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Googleフォントを使用したフォントリクエスト","stat2":"29%","label2":"Google Fontsスタイルシートのリンクを含むページの割合","stat3":"718","label3":"1ページでのフォントのリクエストが多い"} %} -{%- elif featured_chapter == "performance" %} - {%- set featured_chapter_quote = "パフォーマンスはユーザー体験の内臓的な部分です。多くのウェブサイトでは、ページの読み込み時間を高速化してユーザー体験を向上させることは、コンバージョン率の向上につながります。逆に、パフォーマンスが悪いと、ユーザーは頻繁にコンバージョンしないし、不満でページを激怒してクリックしてしまうことさえ観察されています。" %} - {%- set featured_chapter_stats = {"stat1":"13%","label1":"FCPが速いサイト","stat2":"42%","label2":"TTFBが遅いサイト","stat3":"40%","label3":"FIDが速いサイト"} %} -{%- elif featured_chapter == "security" %} - {%- set featured_chapter_quote = "Webの機能が向上し、より多くの機密データへのアクセスが可能になるにつれ、開発者が自社のアプリケーションを保護するためにWebセキュリティ機能を採用することがますます重要になってきています。この章で紹介するセキュリティ機能は、Webプラットフォーム自体に組み込まれた防御機能であり、すべてのWeb制作者が利用できます。" %} - {%- set featured_chapter_stats = {"stat1":"79%","label1":"HTTPSを使用しているサイト","stat2":"41%","label2":"TLSv1.3を使用しているサイト","stat3":"4.43%","label3":"CSPを使用しているサイト"} %} -{%- elif featured_chapter == "accessibility" %} - {%- set featured_chapter_quote = "ウェブ上のアクセシビリティは、包括的で公平な社会にとって不可欠です。私たちの社会生活や仕事の多くがオンラインの世界に移行するにつれ、障害を持つ人々が障害なくすべてのオンライン上の交流に参加できることがさらに重要になってきています。建築家が車椅子用スロープなどのアクセシビリティ機能を作成したり省略したりできるように、ウェブ開発者はユーザーが利用する支援技術を支援したり、妨げたりすることができます。" %} - {%- set featured_chapter_stats = {"stat1":"22%","label1":"十分なカラーコントラストを使用しているサイト","stat2":"50%","label2":"画像のalt属性がないサイト","stat3":"14%","label3":"スキップリンクを使用しているサイト"} %} -{%- elif featured_chapter == "seo" %} - {%- set featured_chapter_quote = "検索エンジン最適化（SEO）は、デジタルマーケッターの趣味やサイドプロジェクトではなく、ウェブサイトの成功に欠かせないものです。SEOの主な目標は、ウェブサイトが検索エンジンのボットに最適化されていることを確認し、ページをクロールしてインデックスを作成し、ウェブサイトをナビゲートしてコンテンツを消費するユーザーのために最適化することです。SEOは、それを構築している開発者から、新しい潜在的な顧客にそれを促進する必要がありますデジタルマーケッターまで、ウェブサイト上で働くすべての人に影響を与えます。" %} - {%- set featured_chapter_stats = {"stat1":"346","label1":"中央値ページの単語数","stat2":"11%","label2":"見出しタグのないページ","stat3":"15%","label3":"リッチな結果の対象となるサイト"} %} -{%- elif featured_chapter == "pwa" %} - {%- set featured_chapter_quote = "プログレッシブウェブアプリ（PWA）は、サービスワーカーAPIのようなプラットフォームプリミティブの上に構築された新しいクラスのウェブアプリケーションです。サービスワーカーは、アプリケーションがネットワークプロキシとして動作し、ウェブアプリの送信要求を傍受し、プログラム的な応答またはキャッシュされた応答で応答することで、ネットワークに依存しないロードをサポートすることを可能にします。" %} - {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"サービスワーカーを登録しているサイト","stat2":"15%","label2":"サービスワーカーを利用したページビュー","stat3":"57%","label3":"standalone displayプロパティを使用するPWA"} %} -{%- elif featured_chapter == "mobile-web" %} - {%- set featured_chapter_quote = "2007年以降、モバイルウェブは爆発的な成長を遂げました。そして13年後の現在、2019年7月のAkamaimPulseのデータによると、モバイルはすべての検索の59%を占め、ウェブトラフィックの58.7%を占めています。モバイルはもはや余計なものではなく、人々がウェブを体験する主要な手段となっています。モバイルの重要性を考えると、当社は訪問者にどのような体験を提供しているのでしょうか？どこが不足しているのか？それを探ってみましょう。" %} - {%- set featured_chapter_stats = {"stat1":"65%","label1":"ロード中に中または大きくシフトするサイト","stat2":"32%","label2":"ズームを無効にしているサイト","stat3":"34%","label3":"十分なサイズのタップターゲットを持つサイト"} %} -{%- elif featured_chapter == "ecommerce" %} - {%- set featured_chapter_quote = "この調査では、ホームページの10%近くがeコマース・プラットフォーム上にあることが判明しました。eコマースプラットフォーム は、オンラインストアを作成して運営することを可能にするソフトウェア ソフトウェアまたはサービスのセットです。Shopifyなどの有料サービス、Magentoオープンソースなどのソフトウェアプラットフォーム、およびMagento Commerceなどのホスト型プラットフォームなどが含まれます。" %} - {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"WooCommerceを使用してサイト最も人気のあるEコマースプラットフォーム","stat2":"116","label2":"検出されたEコマースプラットフォームの数","stat3":"1,517 KB","label3":"モバイルEコマースページあたりの画像バイト数の中央値。"} %} -{%- elif featured_chapter == "cms" %} - {%- set featured_chapter_quote = "一般的にコンテンツ管理システム（CMS）とは、個人や組織がコンテンツを作成、管理、公開するためのシステムのことを指します。特にウェブコンテンツのためのCMSとは、オープンウェブを介して消費され、体験されるコンテンツを作成、管理、公開することを目的としたシステムのことです。各CMSは、コンテンツ管理機能の一部を実装しており、ユーザーがコンテンツを中心としたウェブサイトを簡単かつ効果的に構築するための仕組みを提供しています。" %} - {%- set featured_chapter_stats = {"stat1":"40%","label1":"CMSを利用したページ","stat2":"74%","label2":"WordPressを利用したCMSサイト","stat3":"1,232 KB","label3":"デスクトップCMSページごとに読み込まれる画像KBの中央値。"} %} -{%- elif featured_chapter == "compression" %} - {%- set featured_chapter_quote = "HTTP圧縮とは、元の表現よりも少ないビット数で情報をエンコードすることを可能にする技術です。ウェブコンテンツの配信に使用すると、ウェブサーバーがクライアントに送信するデータ量を減らすことができます。これにより、クライアントの利用可能な帯域幅の効率が向上し、ページの重さが軽減され、ウェブパフォーマンスが向上します。" %} - {%- set featured_chapter_stats = {"stat1":"38%","label1":"テキストベースの圧縮を使用したHTTPレスポンス","stat2":"80%","label2":"gzip圧縮の使用","stat3":"56%","label3":"圧縮を使用していないHTMLレスポンス"} %} -{%- elif featured_chapter == "caching" %} - {%- set featured_chapter_quote = "キャッシングは、以前にダウンロードしたコンテンツの再利用を可能にする技術です。高価なネットワークリクエストを回避することでパフォーマンスに大きなメリットがあり、また、ウェブサイトのオリジンインフラストラクチャへのトラフィックを減らすことでアプリケーションの拡張性を高めることができます。古いことわざに「最速のリクエストは、作る必要のないものである」というものがありますが、キャッシングはリクエストをしなくても済むようにするための重要な方法の一つです。" %} - {%- set featured_chapter_stats = {"stat1":"27%","label1":"キャッシングヘッダを使用していないレスポンス","stat2":"39%","label2":"Varyヘッダーを使用したレスポンス","stat3":"82%","label3":"キャッシングを最適化することで1Mbを節約できるサイト"} %} -{%- elif featured_chapter == "cdn" %} - {%- set featured_chapter_quote = "コンテンツデリバリネットワークを使用する"は、Webサイトの読み込みを高速化するためのSteve Soudersのオリジナルの推奨事項の1つです。Web Almanacのこの章では、スティーブの推奨事項がどれだけ広く採用されているか、サイトがどのようにコンテンツデリバリネットワーク(CDN)を使用しているか、そして使用している機能のいくつかを探っていきます。" %} - {%- set featured_chapter_stats = {"stat1":"20%","label1":"CDNが提供するホームページ","stat2":"9.61%","label2":"最も人気のあるCDN（Cloudflare）が提供するホームページ","stat3":"30%","label3":"Googleを利用したサードパーティCDNリクエスト"} %} -{%- elif featured_chapter == "page-weight" %} - {%- set featured_chapter_quote = "なぜページサイズはもう重要ではないのかという共通の議論は、高速インターネットとスープアップされたデバイスのおかげで、私たちは一般の人々に大規模で複雑な（そして大規模に複雑な）ページを提供することができるということです。この仮定は、あなたが言った高速インターネットとスープアップデバイスへのアクセスを持っていないインターネットユーザーの広大な範囲を無視して大丈夫だとしている限り、うまく動作します。" %} - {%- set featured_chapter_stats = {"stat1":"10%","label1":"6MB以上のデータを送信しているサイト","stat2":"434 KB","label2":"昨年のデスクトップサイズ中央値の増加","stat3":"69","label3":"ホームページあたりのリクエストの中央値"} %} -{%- elif featured_chapter == "resource-hints" %} - {%- set featured_chapter_quote = "リソースヒントは、どのようなリソースがすぐに必要になるかについてブラウザにヒントを提供します。このヒントを受け取った結果としてブラウザが取るアクションは、リソースヒントのタイプによって異なります。リソースヒントが正しく使用されていれば、重要なアクションを先取りすることでページのパフォーマンスを向上させることができます。" %} - {%- set featured_chapter_stats = {"stat1":"29%","label1":"dns-prefetchを使用しているサイト","stat2":"88%","label2":"as属性を使用したリソースヒント。","stat3":"0.04%","label3":"優先順位のヒントの使い方"} %} -{%- elif featured_chapter == "http2" %} - {%- set featured_chapter_quote = "HTTP/2は、ほぼ20年ぶりになるWebのメイン送信プロトコルの初となるメジャーアップデートでした。それは多くの期待を持って到来し、欠点なしで無料のパフォーマンス向上を約束しました。それ以上に、HTTP/1.1が非効率なため強制されていたすべてのハックや回避策をやめることができました。デフォルトでパフォーマンスが向上するため、ドメインのバンドル、分割、インライン化、さらにはシャーディングなどはすべてHTTP/2の世界でアンチパターンになります。" %} - {%- set featured_chapter_stats = {"stat1":"95%","label1":"HTTP/2を使用できるグローバルユーザーの割合。","stat2":"27.83%","label2":"準最適なHTTP/2優先順位付けによるモバイル要求の割合。","stat3":"8.38%","label3":"QUICをサポートするモバイルサイトの割合。"} %} -{%- endif %} - diff --git a/src/templates/ja/2019/featured_chapters.json b/src/templates/ja/2019/featured_chapters.json new file mode 100644 index 00000000000..9cbaaed6582 --- /dev/null +++ b/src/templates/ja/2019/featured_chapters.json @@ -0,0 +1,182 @@ +{ + "javascript": { + "quote": "JavaScript はブラウザに送信するリソースの中で最もコストのかかるもので、ダウンロード、解析、コンパイル、そして最終的に実行されます。ブラウザはスクリプトの解析とコンパイルにかかる時間を大幅に短縮しましたが、ダウンロードと実行は、JavaScriptがWebページで処理される際に最もコストのかかる段階となっています。", + "stat_1": "89%", + "stat_label_1": "ファーストパーティよりもサードパーティのコードが多いサイト", + "stat_2": "83%", + "stat_label_2": "jQueryを使用しているサイト", + "stat_3": "4.6%", + "stat_label_3": "Reactを使ったホームページ" + }, + "css": { + "quote": "Cascading Style Sheets (CSS) は、Web ページのペイント、フォーマット、レイアウトに使用されます。その機能は、テキストの色から3Dパースペクティブと、シンプルな概念にまで及びます。また、さまざまな画面サイズ、表示コンテキスト、および印刷を処理するために開発者に力を与えるフックを持っています。CSS は、開発者がコンテンツを調整し、ユーザーに適切に適応することを確認するのに役立ちます。", + "stat_1": "5%", + "stat_label_1": "カスタムプロパティを使用したページ", + "stat_2": "2%", + "stat_label_2": "CSS Gridを使用しているサイト", + "stat_3": "780", + "stat_label_3": "Z-Indexの最大値の桁数" + }, + "markup": { + "quote": "2019年7月現在、HTTP Archiveは、約440万件のデスクトップホームページと約530万件のモバイルホームページについて、DOM内で使用されているすべての要素名の収集を開始しており、これにより調査と解剖を開始することができるようになりました。このクロールでは、これらのページで5,000以上の明確な非標準要素名に遭遇したので、私たちがカウントしている要素の合計の明確な数を「トップ」の5,048に制限しました。", + "stat_1": "11", + "stat_label_1": "90%以上のページで使用されている要素", + "stat_2": "15%", + "stat_label_2": "非推奨の要素を含むページ", + "stat_3": "65", + "stat_label_3": "カルーセルのバリエーションが見つかりました" + }, + "media": { + "quote": "画像、アニメーション、動画はウェブ体験の重要な一部です。それらが重要な理由はたくさんあります。ストーリーを伝えたり、視聴者の関心を引きつけたり、他のウェブ技術では簡単には作れないような芸術的な表現を提供したりするのに役立ちます。これらのメディアリソースの重要性は、2つの方法で示すことができます。1つは、1ページのダウンロードに必要なバイト数の多さ、もう1つは、メディアで描かれたピクセル数の多さです。", + "stat_1": "1 MB", + "stat_label_1": "ホームページのサイズの中央値", + "stat_2": "60%", + "stat_label_2": "画像間でのJPEG利用", + "stat_3": "2%", + "stat_label_3": "<picture>要素の使用" + }, + "third-parties": { + "quote": "オープンウェブは広大で、リンク可能で、相互運用可能な設計になっています。他の誰かの複雑なライブラリを取得し、単一の <link> または <script> 要素を使用して自分のサイトで使用する能力は、開発者の生産性を高め、素晴らしい新しいウェブ体験を可能にしました。本章では、2019年のWebにおけるサードパーティコードの普及と影響、サードパーティソリューションの人気につながるWebの利用パターン、Webのパフォーマンスとプライバシーの将来に対する潜在的な影響を検証します。", + "stat_1": "93%", + "stat_label_1": "サードパーティを含むページ", + "stat_2": "49%", + "stat_label_2": "サードパーティのリクエスト", + "stat_3": "28%", + "stat_label_3": "サードパーティのバイト数" + }, + "fonts": { + "quote": "ウェブフォントは、ウェブ上で美しく機能的なタイポグラフィを可能にします。ウェブフォントを使用することは、デザインに力を与えるだけでなく、デザインのサブセットを民主化します。しかし、どんなに良いことがあっても、ウェブフォントが適切に読み込まれていないと、サイトのパフォーマンスに大きな悪影響を及ぼすこともあります。", + "stat_1": "74.9%", + "stat_label_1": "3P Googleフォントを使用したフォントリクエスト", + "stat_2": "29%", + "stat_label_2": "Google Fontsスタイルシートのリンクを含むページの割合", + "stat_3": "718", + "stat_label_3": "1ページでのフォントのリクエストが多い" + }, + "performance": { + "quote": "パフォーマンスはユーザー体験の内臓的な部分です。多くのウェブサイトでは、ページの読み込み時間を高速化してユーザー体験を向上させることは、コンバージョン率の向上につながります。逆に、パフォーマンスが悪いと、ユーザーは頻繁にコンバージョンしないし、不満でページを激怒してクリックしてしまうことさえ観察されています。", + "stat_1": "13%", + "stat_label_1": "FCPが速いサイト", + "stat_2": "42%", + "stat_label_2": "TTFBが遅いサイト", + "stat_3": "40%", + "stat_label_3": "FIDが速いサイト" + }, + "security": { + "quote": "Webの機能が向上し、より多くの機密データへのアクセスが可能になるにつれ、開発者が自社のアプリケーションを保護するためにWebセキュリティ機能を採用することがますます重要になってきています。この章で紹介するセキュリティ機能は、Webプラットフォーム自体に組み込まれた防御機能であり、すべてのWeb制作者が利用できます。", + "stat_1": "79%", + "stat_label_1": "HTTPSを使用しているサイト", + "stat_2": "41%", + "stat_label_2": "TLSv1.3を使用しているサイト", + "stat_3": "4.43%", + "stat_label_3": "CSPを使用しているサイト" + }, + "accessibility": { + "quote": "ウェブ上のアクセシビリティは、包括的で公平な社会にとって不可欠です。私たちの社会生活や仕事の多くがオンラインの世界に移行するにつれ、障害を持つ人々が障害なくすべてのオンライン上の交流に参加できることがさらに重要になってきています。建築家が車椅子用スロープなどのアクセシビリティ機能を作成したり省略したりできるように、ウェブ開発者はユーザーが利用する支援技術を支援したり、妨げたりすることができます。", + "stat_1": "22%", + "stat_label_1": "十分なカラーコントラストを使用しているサイト", + "stat_2": "50%", + "stat_label_2": "画像のalt属性がないサイト", + "stat_3": "14%", + "stat_label_3": "スキップリンクを使用しているサイト" + }, + "seo": { + "quote": "検索エンジン最適化（SEO）は、デジタルマーケッターの趣味やサイドプロジェクトではなく、ウェブサイトの成功に欠かせないものです。SEOの主な目標は、ウェブサイトが検索エンジンのボットに最適化されていることを確認し、ページをクロールしてインデックスを作成し、ウェブサイトをナビゲートしてコンテンツを消費するユーザーのために最適化することです。SEOは、それを構築している開発者から、新しい潜在的な顧客にそれを促進する必要がありますデジタルマーケッターまで、ウェブサイト上で働くすべての人に影響を与えます。", + "stat_1": "346", + "stat_label_1": "中央値ページの単語数", + "stat_2": "11%", + "stat_label_2": "見出しタグのないページ", + "stat_3": "15%", + "stat_label_3": "リッチな結果の対象となるサイト" + }, + "pwa": { + "quote": "プログレッシブウェブアプリ（PWA）は、サービスワーカーAPIのようなプラットフォームプリミティブの上に構築された新しいクラスのウェブアプリケーションです。サービスワーカーは、アプリケーションがネットワークプロキシとして動作し、ウェブアプリの送信要求を傍受し、プログラム的な応答またはキャッシュされた応答で応答することで、ネットワークに依存しないロードをサポートすることを可能にします。", + "stat_1": "0.44%", + "stat_label_1": "サービスワーカーを登録しているサイト", + "stat_2": "15%", + "stat_label_2": "サービスワーカーを利用したページビュー", + "stat_3": "57%", + "stat_label_3": "standalone displayプロパティを使用するPWA" + }, + "mobile-web": { + "quote": "2007年以降、モバイルウェブは爆発的な成長を遂げました。そして13年後の現在、2019年7月のAkamaimPulseのデータによると、モバイルはすべての検索の59%を占め、ウェブトラフィックの58.7%を占めています。モバイルはもはや余計なものではなく、人々がウェブを体験する主要な手段となっています。モバイルの重要性を考えると、当社は訪問者にどのような体験を提供しているのでしょうか？どこが不足しているのか？それを探ってみましょう。", + "stat_1": "65%", + "stat_label_1": "ロード中に中または大きくシフトするサイト", + "stat_2": "32%", + "stat_label_2": "ズームを無効にしているサイト", + "stat_3": "34%", + "stat_label_3": "十分なサイズのタップターゲットを持つサイト" + }, + "ecommerce": { + "quote": "この調査では、ホームページの10%近くがeコマース・プラットフォーム上にあることが判明しました。eコマースプラットフォーム は、オンラインストアを作成して運営することを可能にするソフトウェア ソフトウェアまたはサービスのセットです。Shopifyなどの有料サービス、Magentoオープンソースなどのソフトウェアプラットフォーム、およびMagento Commerceなどのホスト型プラットフォームなどが含まれます。", + "stat_1": "3.98%", + "stat_label_1": "WooCommerceを使用してサイト最も人気のあるEコマースプラットフォーム", + "stat_2": "116", + "stat_label_2": "検出されたEコマースプラットフォームの数", + "stat_3": "1,517 KB", + "stat_label_3": "モバイルEコマースページあたりの画像バイト数の中央値。" + }, + "cms": { + "quote": "一般的にコンテンツ管理システム（CMS）とは、個人や組織がコンテンツを作成、管理、公開するためのシステムのことを指します。特にウェブコンテンツのためのCMSとは、オープンウェブを介して消費され、体験されるコンテンツを作成、管理、公開することを目的としたシステムのことです。各CMSは、コンテンツ管理機能の一部を実装しており、ユーザーがコンテンツを中心としたウェブサイトを簡単かつ効果的に構築するための仕組みを提供しています。", + "stat_1": "40%", + "stat_label_1": "CMSを利用したページ", + "stat_2": "74%", + "stat_label_2": "WordPressを利用したCMSサイト", + "stat_3": "1,232 KB", + "stat_label_3": "デスクトップCMSページごとに読み込まれる画像KBの中央値。" + }, + "compression": { + "quote": "HTTP圧縮とは、元の表現よりも少ないビット数で情報をエンコードすることを可能にする技術です。ウェブコンテンツの配信に使用すると、ウェブサーバーがクライアントに送信するデータ量を減らすことができます。これにより、クライアントの利用可能な帯域幅の効率が向上し、ページの重さが軽減され、ウェブパフォーマンスが向上します。", + "stat_1": "38%", + "stat_label_1": "テキストベースの圧縮を使用したHTTPレスポンス", + "stat_2": "80%", + "stat_label_2": "gzip圧縮の使用", + "stat_3": "56%", + "stat_label_3": "圧縮を使用していないHTMLレスポンス" + }, + "caching": { + "quote": "キャッシングは、以前にダウンロードしたコンテンツの再利用を可能にする技術です。高価なネットワークリクエストを回避することでパフォーマンスに大きなメリットがあり、また、ウェブサイトのオリジンインフラストラクチャへのトラフィックを減らすことでアプリケーションの拡張性を高めることができます。古いことわざに「最速のリクエストは、作る必要のないものである」というものがありますが、キャッシングはリクエストをしなくても済むようにするための重要な方法の一つです。", + "stat_1": "27%", + "stat_label_1": "キャッシングヘッダを使用していないレスポンス", + "stat_2": "39%", + "stat_label_2": "Varyヘッダーを使用したレスポンス", + "stat_3": "82%", + "stat_label_3": "キャッシングを最適化することで1Mbを節約できるサイト" + }, + "cdn": { + "quote": "コンテンツデリバリネットワークを使用する"は、Webサイトの読み込みを高速化するためのSteve Soudersのオリジナルの推奨事項の1つです。Web Almanacのこの章では、スティーブの推奨事項がどれだけ広く採用されているか、サイトがどのようにコンテンツデリバリネットワーク(CDN)を使用しているか、そして使用している機能のいくつかを探っていきます。", + "stat_1": "20%", + "stat_label_1": "CDNが提供するホームページ", + "stat_2": "9.61%", + "stat_label_2": "最も人気のあるCDN（Cloudflare）が提供するホームページ", + "stat_3": "30%", + "stat_label_3": "Googleを利用したサードパーティCDNリクエスト" + }, + "page-weight": { + "quote": "なぜページサイズはもう重要ではないのかという共通の議論は、高速インターネットとスープアップされたデバイスのおかげで、私たちは一般の人々に大規模で複雑な（そして大規模に複雑な）ページを提供することができるということです。この仮定は、あなたが言った高速インターネットとスープアップデバイスへのアクセスを持っていないインターネットユーザーの広大な範囲を無視して大丈夫だとしている限り、うまく動作します。", + "stat_1": "10%", + "stat_label_1": "6MB以上のデータを送信しているサイト", + "stat_2": "434 KB", + "stat_label_2": "昨年のデスクトップサイズ中央値の増加", + "stat_3": "69", + "stat_label_3": "ホームページあたりのリクエストの中央値" + }, + "resource-hints": { + "quote": "リソースヒントは、どのようなリソースがすぐに必要になるかについてブラウザにヒントを提供します。このヒントを受け取った結果としてブラウザが取るアクションは、リソースヒントのタイプによって異なります。リソースヒントが正しく使用されていれば、重要なアクションを先取りすることでページのパフォーマンスを向上させることができます。", + "stat_1": "29%", + "stat_label_1": "dns-prefetchを使用しているサイト", + "stat_2": "88%", + "stat_label_2": "as属性を使用したリソースヒント。", + "stat_3": "0.04%", + "stat_label_3": "優先順位のヒントの使い方" + }, + "http2": { + "quote": "HTTP/2は、ほぼ20年ぶりになるWebのメイン送信プロトコルの初となるメジャーアップデートでした。それは多くの期待を持って到来し、欠点なしで無料のパフォーマンス向上を約束しました。それ以上に、HTTP/1.1が非効率なため強制されていたすべてのハックや回避策をやめることができました。デフォルトでパフォーマンスが向上するため、ドメインのバンドル、分割、インライン化、さらにはシャーディングなどはすべてHTTP/2の世界でアンチパターンになります。", + "stat_1": "95%", + "stat_label_1": "HTTP/2を使用できるグローバルユーザーの割合。", + "stat_2": "27.83%", + "stat_label_2": "準最適なHTTP/2優先順位付けによるモバイル要求の割合。", + "stat_3": "8.38%", + "stat_label_3": "QUICをサポートするモバイルサイトの割合。" + } +} diff --git a/src/templates/ja/2019/index.html b/src/templates/ja/2019/index.html index abd40ddce1f..5adf67d77f2 100644 --- a/src/templates/ja/2019/index.html +++ b/src/templates/ja/2019/index.html @@ -10,3 +10,6 @@ {% block intro_title %}Web Almanac{% endblock %} {% block intro_sub_title %}HTTP Archiveの年次報告書
ウェブの状態レポート{% endblock %} + +{% block featured_chapter%}注目の章{% endblock %} +{% macro readChapter(chapter) %}{{ chapter }}の章を読む{% endmacro %} diff --git a/src/templates/ja/2020/index.html b/src/templates/ja/2020/index.html index 9c28e3480d6..a162b0b3c3e 100644 --- a/src/templates/ja/2020/index.html +++ b/src/templates/ja/2020/index.html @@ -22,3 +22,6 @@ チームに参加しよう！ {% endblock %} + +{% block featured_chapter%}注目の章{% endblock %} +{% macro readChapter(chapter) %}{{ chapter }}の章を読む{% endmacro %} diff --git a/src/templates/zh-CN/2019/featured_chapters.html b/src/templates/zh-CN/2019/featured_chapters.html deleted file mode 100644 index 5c487cbf186..00000000000 --- a/src/templates/zh-CN/2019/featured_chapters.html +++ /dev/null @@ -1,114 +0,0 @@ -{%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %} -{%- if featured_chapter == "javascript" %} - {%- set featured_chapter_name = "JavaScript" %} - {%- set featured_chapter_quote = "JavaScript是我们发送给浏览器的最昂贵的资源;必须下载、解析、编译，最后执行。尽管浏览器大大减少了解析和编译脚本的时间，但在web页面处理JavaScript时，下载和执行已经成为最昂贵的阶段。" %} - {%- set featured_chapter_stats = {"stat1":"89%","label1":"第三方代码多于自有代码的站点","stat2":"83%","label2":"使用jQuery的站点","stat3":"4.6%","label3":"主页使用React"} %} -{%- elif featured_chapter == "css" %} - {%- set featured_chapter_name = "CSS" %} - {%- set featured_chapter_quote = "层叠样式表(CSS) 用于绘制、格式化和布局web页面。 它们的功能涵盖了从简单的文本颜色到3D透视图等概念。它还提供了钩子，使开发人员能够处理各种屏幕大小、查看上下文和打印。 CSS帮助开发人员处理内容，并确保其适当地适应用户。" %} - {%- set featured_chapter_stats = {"stat1":"5%","label1":"使用自定义属性的页面","stat2":"2%","label2":"使用CSS Grid的站点","stat3":"780","label3":"最大Z索引值的位数"} %} -{%- elif featured_chapter == "markup" %} - {%- set featured_chapter_name = "标记" %} - {%- set featured_chapter_quote = "截止2019年7月, HTTP Archive 已经开始收集所有在DOM使用 元素 命名的大约440万个桌面版主页。还有大约530万个移动主页，我们现在可以开始研究和分析。这个爬取过程在这些页面中遇到了超过5000个不同的非标准元素名称, 因此我们将可计数元素的总数限制为'最多' 5,048个。" %} - {%- set featured_chapter_stats = {"stat1":"11","label1":"超过90%的页面使用元素","stat2":"15%","label2":"包含已过时的元素页面","stat3":"65","label3":"发现轮播的变体"} %} -{%- elif featured_chapter == "media" %} - {%- set featured_chapter_name = "媒体" %} - {%- set featured_chapter_quote = "图像、动画和视频是网络体验的重要组成部分。它们之所以重要有很多原因:它们有助于讲述故事、吸引观众、提供艺术表达，而这些通常是其他网络技术无法轻易做到的。这些媒体资源的重要性可以通过两种方式来体现:页面下载所需的字节量，以及用媒体绘制的像素量。" %} - {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"主页的中位数","stat2":"60%","label2":"在图像中使用JPEG","stat3":"2%","label3":"使用 <picture> 元素"} %} -{%- elif featured_chapter == "third-parties" %} - {%- set featured_chapter_name = "第三方" %} - {%- set featured_chapter_quote = "开放的网络是从设计之初就是庞大，可链接，可以互操作的。要拥有抓取别人复杂的库并在您的站点上使用它的能力，只需一个单独的 <link> 或者 <script> 元素，这 极大地提高了开发人员的工作效率，并带来了卓越的全新网络体验;另一方面，少数第三方提供商的广泛流行引发了重要的性能和隐私问题。本章考察了2019年第三方代码在web上的流行和影响，导致第三方解决方案流行的web使用模式，以及对未来web性能和隐私的潜在影响。" %} - {%- set featured_chapter_stats = {"stat1":"93%","label1":"有第三方内容的页面","stat2":"49%","label2":"第三方请求","stat3":"28%","label3":"第三方字节"} %} -{%- elif featured_chapter == "fonts" %} - {%- set featured_chapter_name = "字体" %} - {%- set featured_chapter_quote = "Web字体能够在Web上实现美观和功能的排版。使用网络字体不仅增强了设计能力，而且使设计的一个子集变得大众化，因为它让那些可能没有特别强的设计技能的人更容易接触到它。然而，尽管网络字体能带来很多好处，但如果加载不当，它们也会对网站的性能造成很大的损害。" %} - {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"第三方字体请求使用谷歌体","stat2":"29%","label2":"包含谷歌字体样式表链接的页面的百分比","stat3":"718","label3":"单个页面上的大多数字体请求"} %} -{%- elif featured_chapter == "performance" %} - {%- set featured_chapter_name = "性能" %} - {%- set featured_chapter_quote = "性能是用户体验的本质部分。对于许多网站来说，通过加快页面加载时间来改善用户体验与提高转化率是一致的。相反，当性能较差时，用户不会经常转换，甚至会在沮丧时愤怒的点击页面。" %} - {%- set featured_chapter_stats = {"stat1":"13%","label1":"有快速FCP的站点","stat2":"42%","label2":"有缓慢TTFB的站点","stat3":"40%","label3":"有快速FID的站点"} %} -{%- elif featured_chapter == "security" %} - {%- set featured_chapter_name = "安全" %} - {%- set featured_chapter_quote = "随着web功能的增长并允许访问越来越多的敏感数据，开发人员采用web安全特性来保护其应用程序变得越来越重要。本章讨论的安全特性是构建在web平台本身的防御，每个web作者都可以使用。" %} - {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"使用TLSv1.3的站点","stat3":"4.43%","label3":"使用CSP的站点"} %} -{%- elif featured_chapter == "accessibility" %} - {%- set featured_chapter_name = "无障碍可访问性" %} - {%- set featured_chapter_quote = "互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残疾人能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。" %} - {%- set featured_chapter_stats = {"stat1":"22%","label1":"使用充分的色彩对比的网站","stat2":"50%","label2":"缺少图像alt属性的网站","stat3":"14%","label3":"使用跳过链接的网站"} %} -{%- elif featured_chapter == "seo" %} - {%- set featured_chapter_name = "SEO" %} - {%- set featured_chapter_quote = "搜索引擎优化(SEO)不仅仅是数字营销人员的业余爱好或兼职项目，它对网站的成功至关重要。SEO的主要目标是确保一个网站针对搜索引擎机器人需要抓取和索引它的页面，以及实际用户的浏览网站和消费它的内容做好了优化，。SEO影响着每一个在网站上工作的人，从建立网站的开发人员，到需要向新潜在客户推广网站的数字营销人员。" %} - {%- set featured_chapter_stats = {"stat1":"346","label1":"页面中位数的字数","stat2":"11%","label2":"没有标题标签的页面","stat3":"15%","label3":"网站符合丰富的结果"} %} -{%- elif featured_chapter == "pwa" %} - {%- set featured_chapter_name = "PWA" %} - {%- set featured_chapter_quote = "渐进式 Web 应用(PWA)是一种新的Web应用程序，构建在平台原语(如Service Worker API)之上。Service Worker通过充当网络代理，拦截web应用程序发出的请求，并用编程或缓存的响应进行应答，从而允许应用程序支持独立于网络的加载。" %} - {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"注册了 service worker的站点","stat2":"15%","label2":"使用了Service Worker的Pageview","stat3":"57%","label3":"PWA使用了 standalone display property"} %} -{%- elif featured_chapter == "mobile-web" %} - {%- set featured_chapter_name = "移动 Web" %} - {%- set featured_chapter_quote = "自2007年以来，移动网络以爆炸式的速度增长。根据Akamai mPulse 2019年7月的数据，13年后的今天，移动搜索和网络流量分别占到了59%和58.7%。这不再是事后产生的想法，而是人们体验网络的主要方式。那么，考虑到移动设备的重要性，我们能为访问者提供什么样的体验呢?我们的不足之处在哪里?让我们找出答案。" %} - {%- set featured_chapter_stats = {"stat1":"65%","label1":"站点加载期间中或大部分内容发生位移","stat2":"32%","label2":"禁用缩放的网站","stat3":"34%","label3":"具有足够大小的点击目标的站点"} %} -{%- elif featured_chapter == "ecommerce" %} - {%- set featured_chapter_name = "电商" %} - {%- set featured_chapter_quote = "在本次研究中，发现近10%的首页都位于电子商务平台上。 电子商务平台 是一套软件或服务，使您能够创建和运营在线商店， 包括付费服务，例如Shopify，软件平台，例如Magento开源，还有托管平台，例如Magento商务。" %} - {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"使用WooCommerce的网站是最受欢迎的电子商务平台","stat2":"116","label2":"检测到的电子商务平台数量","stat3":"1,517 KB","label3":"每个移动电商页面的图像字节中位数。"} %} -{%- elif featured_chapter == "cms" %} - {%- set featured_chapter_name = "CMS" %} - {%- set featured_chapter_quote = "通用术语内容管理系统(CMS)是指允许个人和组织创建、管理和发布内容的系统。具体来说，用于web内容的CMS是一种旨在创建、管理和发布内容以通过开放web消费和体验的系统。每个CMS都实现了一系列内容管理功能的一个子集，以及提供相应的机制使用户可以轻松有效地围绕内容构建网站。" %} - {%- set featured_chapter_stats = {"stat1":"40%","label1":"Pages powered by a CMS","stat2":"74%","label2":"使用WordPress的CMS站点","stat3":"1,232 KB","label3":"每个CMS桌面页面加载的图像KB中位数。"} %} -{%- elif featured_chapter == "compression" %} - {%- set featured_chapter_name = "压缩" %} - {%- set featured_chapter_quote = "HTTP压缩是一种允许您使用比原始内容更少的比特数进行编码的技术。当用于交付web内容时，它使web服务器能够减少传输到客户机的数据量。这提高了客户机可用带宽的效率，减少了页面重量，并提高了web性能。" %} - {%- set featured_chapter_stats = {"stat1":"38%","label1":"使用基于文本压缩的HTTP响应","stat2":"80%","label2":"使用gzip压缩","stat3":"56%","label3":"HTML响应没有使用压缩"} %} -{%- elif featured_chapter == "caching" %} - {%- set featured_chapter_name = "缓存" %} - {%- set featured_chapter_quote = "缓存是一种支持重用以前下载的内容的技术。通过避免昂贵的网络请求，它提供了显著的性能优势，还通过减少对网站源站基础设施的流量来帮助扩展应用程序的范围。有句老话说， "最快的请求是你不必提出的，" 而缓存是避免发出请求的关键方法之一。" %} - {%- set featured_chapter_stats = {"stat1":"27%","label1":"没有使用任何缓存头的响应","stat2":"39%","label2":"使用 Vary 头的响应","stat3":"82%","label3":"通过更好地优化缓存可以节省1Mb的站点"} %} -{%- elif featured_chapter == "cdn" %} - {%- set featured_chapter_name = "CDN" %} - {%- set featured_chapter_quote = ""使用内容分发网络" 是Steve Souders最初的建议之一，用来提高网站的加载速度。 这个建议今天仍然有效，在Web Almanac网络年鉴的这一章我们将探索Steve的建议被广泛采纳的程度，站点如何使用使用内容分发网络(CDN), 以及他们使用的一些功能特性。" %} - {%- set featured_chapter_stats = {"stat1":"20%","label1":"使用CDN的主页","stat2":"9.61%","label2":"使用最流行的 CDN (Cloudflare)的主页","stat3":"30%","label3":"使用谷歌的第三方CDN请求"} %} -{%- elif featured_chapter == "page-weight" %} - {%- set featured_chapter_name = "页面重量" %} - {%- set featured_chapter_quote = "关于为什么页面大小不再重要的常见争论是，由于高速互联网和我们更强的设备，我们可以为普通大众提供大量复杂的页面。这个假设是可行的，只要你愿意忽视那些无法访问高速互联网和更强设备的大量互联网用户。" %} - {%- set featured_chapter_stats = {"stat1":"10%","label1":"网站发送超过6MB的数据","stat2":"434 KB","label2":"去年桌面尺寸增加的中位数","stat3":"69","label3":"每个主页请求的中位数"} %} -{%- elif featured_chapter == "resource-hints" %} - {%- set featured_chapter_name = "资源提示" %} - {%- set featured_chapter_quote = "资源提示向浏览器提供关于即将需要哪些资源的提示。浏览器由于收到此提示而采取的操作将根据资源提示的类型而有所不同。 不同的资源提示将启动不同的操作。 如果使用得当，它们可以通过提前采取重要的预期措施来提高页面性能。" %} - {%- set featured_chapter_stats = {"stat1":"29%","label1":"使用 dns-prefetch的站点","stat2":"88%","label2":"资源提示 作为 属性使用。","stat3":"0.04%","label3":"优先级提示使用"} %} -{%- elif featured_chapter == "http2" %} - {%- set featured_chapter_name = "HTTP/2" %} - {%- set featured_chapter_quote = "HTTP/2是近20年来对web主要传输协议的第一次重大更新。它带来了丰富的期望:它承诺免费的性能提升而没有缺点。更重要的是，我们可以停止做所有 HTTP/1.1曾因为低效率的缘故，强迫我们叠加的入侵式解决方案。在HTTP/2世界中，绑定、弹跳、内联甚至分片域都将成为反模式，因为默认情况下会提供改进的性能。之前的优化技术Bundling, spriting, inlining,甚至域分片都会在HTTP/2 的世界中成为反模式, 因为它在默认情况就提供改进的性能。本章探讨了这种相对较新的技术在现实世界中的表现。" %} - {%- set featured_chapter_stats = {"stat1":"95%","label1":"可以使用HTTP/2的用户","stat2":"27.83%","label2":"有HTTP/2优先级问题的请求","stat3":"8.38%","label3":"支持QUIC的站点"} %} -{%- endif %} - \ No newline at end of file diff --git a/src/templates/zh-CN/2019/featured_chapters.json b/src/templates/zh-CN/2019/featured_chapters.json new file mode 100644 index 00000000000..69eac4fcdaa --- /dev/null +++ b/src/templates/zh-CN/2019/featured_chapters.json @@ -0,0 +1,182 @@ +{ + "javascript": { + "quote": "JavaScript是我们发送给浏览器的最昂贵的资源;必须下载、解析、编译，最后执行。尽管浏览器大大减少了解析和编译脚本的时间，但在web页面处理JavaScript时，下载和执行已经成为最昂贵的阶段。", + "stat_1": "89%", + "stat_label_1": "第三方代码多于自有代码的站点", + "stat_2": "83%", + "stat_label_2": "使用jQuery的站点", + "stat_3": "4.6%", + "stat_label_3": "主页使用React" + }, + "css": { + "quote": "层叠样式表(CSS) 用于绘制、格式化和布局web页面。 它们的功能涵盖了从简单的文本颜色到3D透视图等概念。它还提供了钩子，使开发人员能够处理各种屏幕大小、查看上下文和打印。 CSS帮助开发人员处理内容，并确保其适当地适应用户。", + "stat_1": "5%", + "stat_label_1": "使用自定义属性的页面", + "stat_2": "2%", + "stat_label_2": "使用CSS Grid的站点", + "stat_3": "780", + "stat_label_3": "最大Z索引值的位数" + }, + "markup": { + "quote": "截止2019年7月, HTTP Archive 已经开始收集所有在DOM使用 元素 命名的大约440万个桌面版主页。还有大约530万个移动主页，我们现在可以开始研究和分析。这个爬取过程在这些页面中遇到了超过5000个不同的非标准元素名称, 因此我们将可计数元素的总数限制为'最多' 5,048个。", + "stat_1": "11", + "stat_label_1": "超过90%的页面使用元素", + "stat_2": "15%", + "stat_label_2": "包含已过时的元素页面", + "stat_3": "65", + "stat_label_3": "发现轮播的变体" + }, + "media": { + "quote": "图像、动画和视频是网络体验的重要组成部分。它们之所以重要有很多原因:它们有助于讲述故事、吸引观众、提供艺术表达，而这些通常是其他网络技术无法轻易做到的。这些媒体资源的重要性可以通过两种方式来体现:页面下载所需的字节量，以及用媒体绘制的像素量。", + "stat_1": "1 MB", + "stat_label_1": "主页的中位数", + "stat_2": "60%", + "stat_label_2": "在图像中使用JPEG", + "stat_3": "2%", + "stat_label_3": "使用 <picture> 元素" + }, + "third-parties": { + "quote": "开放的网络是从设计之初就是庞大，可链接，可以互操作的。要拥有抓取别人复杂的库并在您的站点上使用它的能力，只需一个单独的 <link> 或者 <script> 元素，这 极大地提高了开发人员的工作效率，并带来了卓越的全新网络体验;另一方面，少数第三方提供商的广泛流行引发了重要的性能和隐私问题。本章考察了2019年第三方代码在web上的流行和影响，导致第三方解决方案流行的web使用模式，以及对未来web性能和隐私的潜在影响。", + "stat_1": "93%", + "stat_label_1": "有第三方内容的页面", + "stat_2": "49%", + "stat_label_2": "第三方请求", + "stat_3": "28%", + "stat_label_3": "第三方字节" + }, + "fonts": { + "quote": "Web字体能够在Web上实现美观和功能的排版。使用网络字体不仅增强了设计能力，而且使设计的一个子集变得大众化，因为它让那些可能没有特别强的设计技能的人更容易接触到它。然而，尽管网络字体能带来很多好处，但如果加载不当，它们也会对网站的性能造成很大的损害。", + "stat_1": "74.9%", + "stat_label_1": "第三方字体请求使用谷歌体", + "stat_2": "29%", + "stat_label_2": "包含谷歌字体样式表链接的页面的百分比", + "stat_3": "718", + "stat_label_3": "单个页面上的大多数字体请求" + }, + "performance": { + "quote": "性能是用户体验的本质部分。对于许多网站来说，通过加快页面加载时间来改善用户体验与提高转化率是一致的。相反，当性能较差时，用户不会经常转换，甚至会在沮丧时愤怒的点击页面。", + "stat_1": "13%", + "stat_label_1": "有快速FCP的站点", + "stat_2": "42%", + "stat_label_2": "有缓慢TTFB的站点", + "stat_3": "40%", + "stat_label_3": "有快速FID的站点" + }, + "security": { + "quote": "随着web功能的增长并允许访问越来越多的敏感数据，开发人员采用web安全特性来保护其应用程序变得越来越重要。本章讨论的安全特性是构建在web平台本身的防御，每个web作者都可以使用。", + "stat_1": "79%", + "stat_label_1": "Sites using HTTPS", + "stat_2": "41%", + "stat_label_2": "使用TLSv1.3的站点", + "stat_3": "4.43%", + "stat_label_3": "使用CSP的站点" + }, + "accessibility": { + "quote": "互联网的无障碍可访问性对一个包容和公平的社会至关重要。随着我们的社会生活和工作生活越来越多地转移到网络世界，残疾人能够无障碍地参与所有在线互动就变得更加重要了。正如建筑设计师可以创建或省略无障碍功能，例如轮椅坡道，web开发人员可以帮助或阻碍用户依赖的辅助技术。", + "stat_1": "22%", + "stat_label_1": "使用充分的色彩对比的网站", + "stat_2": "50%", + "stat_label_2": "缺少图像alt属性的网站", + "stat_3": "14%", + "stat_label_3": "使用跳过链接的网站" + }, + "seo": { + "quote": "搜索引擎优化(SEO)不仅仅是数字营销人员的业余爱好或兼职项目，它对网站的成功至关重要。SEO的主要目标是确保一个网站针对搜索引擎机器人需要抓取和索引它的页面，以及实际用户的浏览网站和消费它的内容做好了优化，。SEO影响着每一个在网站上工作的人，从建立网站的开发人员，到需要向新潜在客户推广网站的数字营销人员。", + "stat_1": "346", + "stat_label_1": "页面中位数的字数", + "stat_2": "11%", + "stat_label_2": "没有标题标签的页面", + "stat_3": "15%", + "stat_label_3": "网站符合丰富的结果" + }, + "pwa": { + "quote": "渐进式 Web 应用(PWA)是一种新的Web应用程序，构建在平台原语(如Service Worker API)之上。Service Worker通过充当网络代理，拦截web应用程序发出的请求，并用编程或缓存的响应进行应答，从而允许应用程序支持独立于网络的加载。", + "stat_1": "0.44%", + "stat_label_1": "注册了 service worker的站点", + "stat_2": "15%", + "stat_label_2": "使用了Service Worker的Pageview", + "stat_3": "57%", + "stat_label_3": "PWA使用了 standalone display property" + }, + "mobile-web": { + "quote": "自2007年以来，移动网络以爆炸式的速度增长。根据Akamai mPulse 2019年7月的数据，13年后的今天，移动搜索和网络流量分别占到了59%和58.7%。这不再是事后产生的想法，而是人们体验网络的主要方式。那么，考虑到移动设备的重要性，我们能为访问者提供什么样的体验呢?我们的不足之处在哪里?让我们找出答案。", + "stat_1": "65%", + "stat_label_1": "站点加载期间中或大部分内容发生位移", + "stat_2": "32%", + "stat_label_2": "禁用缩放的网站", + "stat_3": "34%", + "stat_label_3": "具有足够大小的点击目标的站点" + }, + "ecommerce": { + "quote": "在本次研究中，发现近10%的首页都位于电子商务平台上。 电子商务平台 是一套软件或服务，使您能够创建和运营在线商店， 包括付费服务，例如Shopify，软件平台，例如Magento开源，还有托管平台，例如Magento商务。", + "stat_1": "3.98%", + "stat_label_1": "使用WooCommerce的网站是最受欢迎的电子商务平台", + "stat_2": "116", + "stat_label_2": "检测到的电子商务平台数量", + "stat_3": "1,517 KB", + "stat_label_3": "每个移动电商页面的图像字节中位数。" + }, + "cms": { + "quote": "通用术语内容管理系统(CMS)是指允许个人和组织创建、管理和发布内容的系统。具体来说，用于web内容的CMS是一种旨在创建、管理和发布内容以通过开放web消费和体验的系统。每个CMS都实现了一系列内容管理功能的一个子集，以及提供相应的机制使用户可以轻松有效地围绕内容构建网站。", + "stat_1": "40%", + "stat_label_1": "Pages powered by a CMS", + "stat_2": "74%", + "stat_label_2": "使用WordPress的CMS站点", + "stat_3": "1,232 KB", + "stat_label_3": "每个CMS桌面页面加载的图像KB中位数。" + }, + "compression": { + "quote": "HTTP压缩是一种允许您使用比原始内容更少的比特数进行编码的技术。当用于交付web内容时，它使web服务器能够减少传输到客户机的数据量。这提高了客户机可用带宽的效率，减少了页面重量，并提高了web性能。", + "stat_1": "38%", + "stat_label_1": "使用基于文本压缩的HTTP响应", + "stat_2": "80%", + "stat_label_2": "使用gzip压缩", + "stat_3": "56%", + "stat_label_3": "HTML响应没有使用压缩" + }, + "caching": { + "quote": "缓存是一种支持重用以前下载的内容的技术。通过避免昂贵的网络请求，它提供了显著的性能优势，还通过减少对网站源站基础设施的流量来帮助扩展应用程序的范围。有句老话说， "最快的请求是你不必提出的，" 而缓存是避免发出请求的关键方法之一。", + "stat_1": "27%", + "stat_label_1": "没有使用任何缓存头的响应", + "stat_2": "39%", + "stat_label_2": "使用 Vary 头的响应", + "stat_3": "82%", + "stat_label_3": "通过更好地优化缓存可以节省1Mb的站点" + }, + "cdn": { + "quote": ""使用内容分发网络" 是Steve Souders最初的建议之一，用来提高网站的加载速度。 这个建议今天仍然有效，在Web Almanac网络年鉴的这一章我们将探索Steve的建议被广泛采纳的程度，站点如何使用使用内容分发网络(CDN), 以及他们使用的一些功能特性。", + "stat_1": "20%", + "stat_label_1": "使用CDN的主页", + "stat_2": "9.61%", + "stat_label_2": "使用最流行的 CDN (Cloudflare)的主页", + "stat_3": "30%", + "stat_label_3": "使用谷歌的第三方CDN请求" + }, + "page-weight": { + "quote": "关于为什么页面大小不再重要的常见争论是，由于高速互联网和我们更强的设备，我们可以为普通大众提供大量复杂的页面。这个假设是可行的，只要你愿意忽视那些无法访问高速互联网和更强设备的大量互联网用户。", + "stat_1": "10%", + "stat_label_1": "网站发送超过6MB的数据", + "stat_2": "434 KB", + "stat_label_2": "去年桌面尺寸增加的中位数", + "stat_3": "69", + "stat_label_3": "每个主页请求的中位数" + }, + "resource-hints": { + "quote": "资源提示向浏览器提供关于即将需要哪些资源的提示。浏览器由于收到此提示而采取的操作将根据资源提示的类型而有所不同。 不同的资源提示将启动不同的操作。 如果使用得当，它们可以通过提前采取重要的预期措施来提高页面性能。", + "stat_1": "29%", + "stat_label_1": "使用 dns-prefetch的站点", + "stat_2": "88%", + "stat_label_2": "资源提示 作为 属性使用。", + "stat_3": "0.04%", + "stat_label_3": "优先级提示使用" + }, + "http2": { + "quote": "HTTP/2是近20年来对web主要传输协议的第一次重大更新。它带来了丰富的期望:它承诺免费的性能提升而没有缺点。更重要的是，我们可以停止做所有 HTTP/1.1曾因为低效率的缘故，强迫我们叠加的入侵式解决方案。在HTTP/2世界中，绑定、弹跳、内联甚至分片域都将成为反模式，因为默认情况下会提供改进的性能。之前的优化技术Bundling, spriting, inlining,甚至域分片都会在HTTP/2 的世界中成为反模式, 因为它在默认情况就提供改进的性能。本章探讨了这种相对较新的技术在现实世界中的表现。", + "stat_1": "95%", + "stat_label_1": "可以使用HTTP/2的用户", + "stat_2": "27.83%", + "stat_label_2": "有HTTP/2优先级问题的请求", + "stat_3": "8.38%", + "stat_label_3": "支持QUIC的站点" + } +} diff --git a/src/templates/zh-CN/2019/index.html b/src/templates/zh-CN/2019/index.html index 45b6192eef7..ba3eb3bb99a 100644 --- a/src/templates/zh-CN/2019/index.html +++ b/src/templates/zh-CN/2019/index.html @@ -11,3 +11,5 @@ {% block intro_title %}Web Almanac{% endblock %} {% block intro_sub_title %}HTTP Archive的年度报告
网络状态报告{% endblock %} +{% block featured_chapter%}章节精选{% endblock %} +{% macro readChapter(chapter) %}阅读 {{ chapter }} 本章{% endmacro %} diff --git a/src/templates/zh-CN/2020/index.html b/src/templates/zh-CN/2020/index.html index 40f2ad5ae48..6a024ae8bf2 100644 --- a/src/templates/zh-CN/2020/index.html +++ b/src/templates/zh-CN/2020/index.html @@ -11,6 +11,9 @@ {% block intro_title %}即将到来！{% endblock %} {% block intro_sub_title %}{{ year }} 网络状态 报告{% endblock %} +{% block featured_chapter%}章节精选{% endblock %} +{% macro readChapter(chapter) %}阅读 {{ chapter }} 本章{% endmacro %} + {% block mission %}

来自网络社区的专家们目前正在努力地为{{ year }}版本的 Web Almanac 网络年鉴规划、分析和编写内容，预计将在今年年底发布。