Issue 1013/reduce website latency/2 (#2221)

This PR enhances image handling on the home page for better performance, especially on mobile. - Serve Images in Next-Gen Formats - Preload Background and external link Images - Eliminate Render-Blocking Resources: Adjusts loading optional fonts to reduce render-blocking. - Defer Offscreen Footer Image on Mobile: Defers footer image loading on mobile.
google · May 22, 2024 · 0df2087 · 0df2087
1 parent d0b1f72
commit 0df2087
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 9 deletions.
diff --git a/gcp/appengine/frontend3/img/background-1.webp b/gcp/appengine/frontend3/img/background-1.webp
diff --git a/gcp/appengine/frontend3/img/background-2.webp b/gcp/appengine/frontend3/img/background-2.webp
diff --git a/gcp/appengine/frontend3/img/footer-decoration.webp b/gcp/appengine/frontend3/img/footer-decoration.webp
diff --git a/gcp/appengine/frontend3/img/github-action-scan-output.png b/gcp/appengine/frontend3/img/github-action-scan-output.png
diff --git a/gcp/appengine/frontend3/img/github-action-scan-output.webp b/gcp/appengine/frontend3/img/github-action-scan-output.webp
diff --git a/gcp/appengine/frontend3/src/base.html b/gcp/appengine/frontend3/src/base.html
@@ -14,6 +14,12 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="{{ url_for('frontend_handlers.blog_rss') }}">
+  <link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <noscript>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap">
+  </noscript>
   <meta charset="utf-8">
   <title id="title">OSV - Open Source Vulnerabilities</title>
   <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -25,6 +31,7 @@
 
     gtag('config', 'G-ZXG9G6HTBR', { 'anonymize_ip': true });
   </script>
+  {% block extra_head %}{% endblock %}
 </head>
 
 <body>
@@ -82,10 +89,6 @@
     {% endblock %}
     {% block content %}{% endblock %}
   </div>
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@400;700&family=Overpass:ital,wght@0,400;0,700;1,400&display=swap"
-    rel="stylesheet">
 </body>
 
 </html>
diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss
@@ -870,7 +870,7 @@ dl.vulnerability-details,
 /** Home page */
 
 .wrapper.decorated {
-  background: url('/static/img/background-1.png');
+  background: url('/static/img/background-1.webp');
   background-repeat: no-repeat;
   background-position: calc(50% - 70px) top;
 }
@@ -1083,7 +1083,7 @@ dl.vulnerability-details,
   }
 
   .data-sources {
-    background: url('/static/img/background-2.png');
+    background: url('/static/img/background-2.webp');
     background-position: calc(50% - 70px) top;
     background-repeat: no-repeat;
     margin-top: 0;
@@ -1239,7 +1239,7 @@ dl.vulnerability-details,
   }
 
   footer {
-    background: url('/static/img/footer-decoration.png');
+    background: url('/static/img/footer-decoration.webp');
     background-repeat: no-repeat;
     background-position: center;
     min-height: 500px;
@@ -1420,7 +1420,7 @@ div.highlight {
   }
 
   footer {
-    background: url('/static/img/footer-decoration.png');
+    background: url('/static/img/footer-decoration.webp');
     background-repeat: no-repeat;
     background-position: center;
     min-height: 500px;

diff --git a/gcp/appengine/frontend3/src/templates/404.html b/gcp/appengine/frontend3/src/templates/404.html
@@ -1,5 +1,14 @@
 {% extends 'base.html' %}
 
+{% block extra_head %}
+<!-- Defer offscreen images on mobile screens -->
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/footer-decoration.webp" type="image/webp"
+    media="(min-width: 768px)" onload="this.media='all'">
+<noscript>
+    <link rel="stylesheet" href="/static/img/footer-decoration.webp" type="image/webp">
+</noscript>
+{% endblock %}
+
 {% block top_bar %} {% endblock %}
 
 {% block content %}

diff --git a/gcp/appengine/frontend3/src/templates/home.html b/gcp/appengine/frontend3/src/templates/home.html
@@ -1,6 +1,18 @@
 {% extends 'base.html' %}
 {% set active_section = 'home' %}
 
+{% block extra_head %}
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/background-1.webp" type="image/webp">
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/background-2.webp" type="image/webp">
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/external-link.svg" type="image/webp">
+<!-- Defer offscreen images on mobile screens -->
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/footer-decoration.webp" type="image/webp"
+  media="(min-width: 768px)" onload="this.media='all'">
+<noscript>
+  <link rel="stylesheet" href="/static/img/footer-decoration.webp" type="image/webp">
+</noscript>
+{% endblock %}
+
 {% block content %}
 <div class="mdc-layout-grid home-page">
   <div class="mdc-layout-grid__inner">
@@ -244,7 +256,7 @@ <h2 class="heading">GitHub Workflows</h2>
         continuous vulnerability scanning coverage. This can scan newly added dependencies in pull requests for introduced
         vulnerabilities, as well as perform regular vulnerability scans for the entire project.</p>
       <div class="image-container">
-        <img src="/static/img/github-action-scan-output.png" alt="Screenshot of OSV-Scanner GitHub Action">
+        <img src="/static/img/github-action-scan-output.webp" alt="Screenshot of OSV-Scanner GitHub Action" loading="lazy">
       </div>
       <div class="cta">
         <a class="cta-primary link-button" href="https://google.github.io/osv-scanner/github-action/"

diff --git a/gcp/appengine/frontend3/src/templates/vulnerability.html b/gcp/appengine/frontend3/src/templates/vulnerability.html
@@ -1,6 +1,10 @@
 {% extends 'base.html' -%}
 {% set active_section = 'vulnerabilities' -%}
 
+{% block extra_head %}
+<link rel="preload" fetchpriority="high" as="image" href="/static/img/external-link.svg" type="image/webp">
+{% endblock %}
+
 {% block content -%}
 <div class="vulnerability-page">
   <div class="mdc-layout-grid">