Graduate new Core Web Vitals Tech Report (#1144)

* Graduate new Core Web Vitals Tech Report

* Clean up tests

* Remove unneeded code

* Fix image

Author: tunetheweb

config/last_updated.json

@@ -220,11 +220,6 @@
     "hash": "8e9534ce5c7e68caea1a97bfe2747f7a"
   },
   "reports/cwv-tech": {
-    "date_published": "2021-09-20T00:00:00.000Z",
-    "date_modified": "2023-09-07T00:00:00.000Z",
-    "hash": "bb56bcf9203e97fcad14369053f778e3"
-  },
-  "reports/cwv-tech-new": {
     "date_published": "2023-10-09T00:00:00.000Z",
     "date_modified": "2024-04-05T00:00:00.000Z",
     "hash": "59ca9a96a7a3a9ec1b19bb7aba15f930"

config/reports.json

@@ -10,8 +10,7 @@
     "page-weight",
     "chrome-ux-report",
     "project-fugu",
-    "cwv-tech",
-    "cwv-tech-new"
+    "cwv-tech"
   ],
   "_featured": [
     "state-of-the-web"
@@ -1281,36 +1280,19 @@
   "cwv-tech": {
     "name": "Core Web Vitals Technology Report",
     "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
-    "url": "https://datastudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC",
+    "url": "/reports/techreport/landing",
     "metrics": [],
     "graphic": {
       "bgcolor": "#fff",
       "primary": {
         "color": "#444",
         "icon": "fa-wrench",
-        "width": "fa-w-16"
+        "width": "fa-w-20"
       },
       "secondary": {
         "color": "rgba(0, 0, 0, 0.3)",
         "icon": "fa-tachometer-alt",
-        "width": "fa-w-18"
-      }
-    }
-  },
-  "cwv-tech-new": {
-    "name": "BETA: Core Web Vitals Technology Report",
-    "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.",
-    "url": "/reports/techreport/landing",
-    "metrics": [],
-    "graphic": {
-      "bgcolor": "#fff",
-      "primary": {
-        "color": "#444",
-        "icon": "fas fa-wrench"
-      },
-      "secondary": {
-        "color": "rgba(0, 0, 0, 0.3)",
-        "icon": "fas fa-tachometer-alt"
+        "width": "fa-w-20"
       }
     }
   }

server/routes.py

@@ -214,10 +214,6 @@ def report(report_id):
     if not report:
         abort(404)
 
-    report_url = report_util.get_report(report_id).get("url")
-    if report_url:
-        return redirect(report_url), 302
-
     dates = report_util.get_dates()
     if not dates:  # pragma: no cover
         abort(500)

server/tests/routes_test.py

@@ -199,15 +199,6 @@ def test_metric_speedindex(client):
     )
 
 
-def test_external_report(client):
-    assert_route(
-        client,
-        "/reports/cwv-tech",
-        302,
-        "https://datastudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC",
-    )
-
-
 def test_render_efonts_cache_control(client):
     response = client.get("/static/fonts/opensans-latin-700.woff2")
     assert response.status_code == 200 and "max-age=3153600" in response.headers.get(

static/img/web-vitals.png

@@ -53,25 +53,54 @@ <h2>
     </div>
   </section>
 
-  <section id="bigquery" class="container">
-    <div class="row">
-
-      <h2>
-        <small>Public Dataset</small>
-        Google BigQuery
-      </h2>
-
-      <div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
-        <p>
-          The HTTP Archive archives and provides access to detailed information about each website it crawls: request and response metadata, response bodies, execution traces, and more. You can download this data for offline analysis, or access it as a public dataset via Google BigQuery for fast and rapid analysis.
-        </p>
-        <a href="https://har.fyi/guides/getting-started/" class="btn">Get Started with Public Dataset</a>
+  <section id="tech-report">
+    <div class="container">
+      <div class="row">
+
+        <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
+          <a href="/reports/techreport/landing">
+            <img src="/static/img/web-vitals.png" width="471" height="367" alt="Explore the Core Web Vitals Tech Report" loading="lazy" />
+          </a>
+        </div>
+
+        <div class="col-lg-7 col-sm-6 col-md-6 col-xs-12">
+          <h2>
+            <small>Core Web Vitals</small>
+            Tech Report
+          </h2>
+
+          <p>
+            Track and compare web technology performance and adoption. Real-world Core Web Vitals performance data is provided by the Chrome UX Report at the origin level, and technologies are identified by HTTP Archive on the home page and one interior page.
+          </p>
+          <a href="/reports/techreport/landing" class="btn alt">View the Core Web Vitals Tech Report </a>
+
+        </div>
       </div>
+    </div>
+  </section>
 
-      <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
-        <a href="https://har.fyi/guides/getting-started/">
-          <img src="/static/img/data.png" width="466" height="367" alt="Learn more about HTTP Archive on BigQuery" loading="lazy" />
-        </a>
+  <section id="bigquery">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-7 col-sm-6 col-md-6 col-xs-12">
+
+          <h2>
+            <small>Public Dataset</small>
+            Google BigQuery
+          </h2>
+
+          <p>
+            The HTTP Archive archives and provides access to detailed information about each website it crawls: request and response metadata, response bodies, execution traces, and more. You can download this data for offline analysis, or access it as a public dataset via Google BigQuery for fast and rapid analysis.
+          </p>
+          <a href="https://har.fyi/guides/getting-started/" class="btn alt">Get Started with Public Dataset</a>
+
+        </div>
+
+        <div class="col-lg-6 col-sm-6 col-md-6 hidden-xs">
+          <a href="https://har.fyi/guides/getting-started/">
+            <img src="/static/img/data.png" width="466" height="367" alt="Learn more about HTTP Archive on BigQuery" loading="lazy" />
+          </a>
+        </div>
       </div>
     </div>
   </section>

templates/index.html

@@ -67,7 +67,6 @@ const test_status_codes = async () => {
   await test_status_code('/reports/techreport/landing', 200);
   await test_status_code('/reports/techreport/drilldown', 200);
   await test_status_code('/reports/techreport/comparison', 200);
-  await test_status_code('/reports/cwv-tech', 302, 'https://datastudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC');
 
   // Test non-sitemap pages
   await test_status_code('/sitemap.xml', 200);