From 03fc36e9537f12f0e8c80b748fefedca3f17c111 Mon Sep 17 00:00:00 2001
From: ethangardner <ethan.gardner@gsa.gov>
Date: Wed, 26 Jun 2024 10:02:50 -0400
Subject: [PATCH] update hidden lcp image to use picture element and a partial.
 add cache header for font files

---
 404.html                                       | 3 +--
 _data/assetPaths.json                          | 4 ++--
 _includes/components/gradient-bg-image.html    | 5 +++++
 _includes/components/gradient-hero-banner.html | 5 +----
 _includes/components/head.html                 | 2 +-
 _includes/components/header.html               | 6 +++---
 _includes/layouts/about-sub-page.html          | 5 +----
 _includes/layouts/home.html                    | 5 +----
 federalist.json                                | 5 +++++
 9 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 _includes/components/gradient-bg-image.html

diff --git a/404.html b/404.html
index f8faa07b..293d3774 100644
--- a/404.html
+++ b/404.html
@@ -12,8 +12,7 @@
   <div class="static-content-page portfolio-bloglist-wrapper">
     <div class="banner-bg newspage-wrapper">
       <div class="banner-bg-gradient padding-y-2" style="background-image: url(../assets/images/homepage-gradient-bg.jpg)">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
+        {% include "components/gradient-bg-image.html" %}
         <section class="grid-container header-section usa-section" aria-label="Introduction">
             <h1>{{ title }}</h1>
             <h2>We can’t find the page you requested. But at 10x, we believe in smart experimentation and trying to make a difference.</h2>
diff --git a/_data/assetPaths.json b/_data/assetPaths.json
index f5ffaae4..d8db3401 100644
--- a/_data/assetPaths.json
+++ b/_data/assetPaths.json
@@ -85,6 +85,6 @@
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
   "app.js": "/assets/js/app-EDZES2YK.js",
   "app.map": "/assets/js/app-EDZES2YK.js.map",
-  "index.css": "/assets/styles/index-PVF35CMC.css",
-  "index.map": "/assets/styles/index-PVF35CMC.css.map"
+  "index.css": "/assets/styles/index-HR7SNJNM.css",
+  "index.map": "/assets/styles/index-HR7SNJNM.css.map"
 }
\ No newline at end of file
diff --git a/_includes/components/gradient-bg-image.html b/_includes/components/gradient-bg-image.html
new file mode 100644
index 00000000..d6b025c3
--- /dev/null
+++ b/_includes/components/gradient-bg-image.html
@@ -0,0 +1,5 @@
+<picture>
+  <source media="(min-width: 40em)" srcset="{{ assetPaths['homepage-gradient-bg.jpg'] }}"/>
+  <img src="{{ assetPaths['homepage-gradient-bg-mobile.jpg'] }}" alt="" width="0" height="0"
+    style="display: none !important;" fetchpriority="high"/>
+</picture>
\ No newline at end of file
diff --git a/_includes/components/gradient-hero-banner.html b/_includes/components/gradient-hero-banner.html
index b3769517..9c1490e3 100644
--- a/_includes/components/gradient-hero-banner.html
+++ b/_includes/components/gradient-hero-banner.html
@@ -1,10 +1,7 @@
 {% assign formatted_category = hero_banner.category | replace: ' ', '-' | downcase %}
 
 <div class="banner-bg-gradient header-banner-component padding-y-2">
-  <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-    style="display: none !important;" />
-  <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-    style="display: none !important;" />
+  {% include "components/gradient-bg-image.html" %}
   <section class="grid-container header-section usa-section" aria-labelledby="{{ formatted_category }}">
     {% if section == 'post' %}
     <span class="page-brow" id="{{ formatted_category}}">
diff --git a/_includes/components/head.html b/_includes/components/head.html
index 2829deeb..fc2b6094 100644
--- a/_includes/components/head.html
+++ b/_includes/components/head.html
@@ -26,7 +26,7 @@
   <link href="{{ '/favicon/favicon-16x16.png' | url }}" rel="icon" sizes="16x16" type="image/png">
   <link href="{{ '/favicon/favicon.ico' | url }}" rel="shortcut icon">
 
-  <link rel="preload" as="style" href="{{ assetPaths['index.css'] }}" />
+  <link rel="preload" href="{{ assetPaths['Poppins-Bold.woff2'] }}" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="{{ assetPaths['index.css'] }}" type="text/css" />
   {% capture js %}
   {% include "theme/js/inline.js" %}
diff --git a/_includes/components/header.html b/_includes/components/header.html
index 78a3d7a6..e79a577d 100644
--- a/_includes/components/header.html
+++ b/_includes/components/header.html
@@ -20,7 +20,7 @@
         <div class="grid-row grid-gap-lg">
           <div class="usa-banner__guidance tablet:grid-col-6">
             <img class="usa-banner__icon usa-media-block__img" src="{{ '/assets/images/uswds/icon-dot-gov.svg' | url }}"
-              role="img" alt="" width="40" height="40" aria-hidden="true" />
+              role="img" alt="" width="40" height="40" aria-hidden="true" fetchpriority="low" />
             <div class="usa-media-block__body">
               <p>
                 <strong>Official websites use .gov</strong><br />A
@@ -31,7 +31,7 @@
           </div>
           <div class="usa-banner__guidance tablet:grid-col-6">
             <img class="usa-banner__icon usa-media-block__img" src="{{ '/assets/images/uswds/icon-https.svg' | url }}"
-              role="img" alt="" width="40" height="40" aria-hidden="true" />
+              role="img" alt="" width="40" height="40" aria-hidden="true" fetchpriority="low" />
             <div class="usa-media-block__body">
               <p>
                 <strong>Secure .gov websites use HTTPS</strong><br />A
@@ -68,7 +68,7 @@
     <nav aria-label="Primary navigation" class="usa-nav">
       <button class="usa-nav-close usa-nav__close margin-top-2 margin-right-0" id="usa-nav-close"
         type="button">
-        <img alt="Close" width="24" height="24" src="{{ '/assets/images/close-x.svg' | url }}">
+        <img alt="Close" width="24" height="24" src="{{ '/assets/images/close-x.svg' | url }}" fetchpriority="low">
       </button>
       <ul class="usa-accordion usa-nav__primary">
         {%- for entry in navPages %}
diff --git a/_includes/layouts/about-sub-page.html b/_includes/layouts/about-sub-page.html
index 1b24ccc3..49376f42 100644
--- a/_includes/layouts/about-sub-page.html
+++ b/_includes/layouts/about-sub-page.html
@@ -6,10 +6,7 @@
   <div class="TxContent portfolio-blog-single-page about-page-section about-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
       <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
+        {% include "components/gradient-bg-image.html" %}
         <section class="grid-container header-section blog-post-header-section usa-section" aria-labelledby="{{ pageBrow }}">
           <span class="page-brow" id="{{ pageBrow }}">{{ pageBrow }}</span>
           <h1>{{ pageTitle }}</h1>
diff --git a/_includes/layouts/home.html b/_includes/layouts/home.html
index 9b01225a..c53e05c6 100644
--- a/_includes/layouts/home.html
+++ b/_includes/layouts/home.html
@@ -5,10 +5,7 @@
 <div class="homepage-wrapper list-page-blue-background">
   <div class="usa-home banner-bg">
     <div class="banner-bg-gradient padding-y-2">
-      <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
+      {% include "components/gradient-bg-image.html" %}
       <section class="grid-container hero-section usa-section padding-y-8" aria-label="Introduction">
         <h1>{{ hero_banner.title }}</h1>
       </section>
diff --git a/federalist.json b/federalist.json
index 5416ba84..e40051c1 100644
--- a/federalist.json
+++ b/federalist.json
@@ -36,6 +36,11 @@
         "cache-control": "public, max-age=31536000, immutable"
       }
     },
+    {
+      "/assets/assets/*.woff2": {
+        "cache-control": "public, max-age=31536000, immutable"
+      }
+    },
     {
       "/icons/*": {
         "cache-control": "public, max-age=31536000, immutable"