fetch priorities for images

wri · Nov 27, 2024 · 1a5c179 · 1a5c179
1 parent ca68ff2
commit 1a5c179
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/components/ui/static-section.js b/components/ui/static-section.js
@@ -24,7 +24,7 @@ export default class StaticSection extends React.Component {
   }
 
   render() {
-    const { children, background, column, className } = this.props;
+    const { children, background, backgroundProps, column, className } = this.props;
 
     return (
       <div
@@ -38,7 +38,7 @@ export default class StaticSection extends React.Component {
               <source type="image/jpeg" media="(max-width: 499px)" srcSet={background.replace('.jpg', '-small.jpg')} />
               <source type="image/webp" media="(min-width: 500px)" srcSet={background.replace('.jpg', '.webp')} />
               <source type="image/jpeg" media="(min-width: 500px)" srcSet={background} />
-              <img src={background} alt="" />
+              <img src={background} alt="" {...backgroundProps} />
             </picture>
           </div>
         )}
@@ -72,6 +72,7 @@ StaticSection.propTypes = {
   className: PropTypes.string,
   children: PropTypes.any.isRequired,
   background: PropTypes.string,
+  backgroundProps: PropTypes.object,
   map: PropTypes.any,
   position: PropTypes.object,
   column: PropTypes.number

diff --git a/pages/index.js b/pages/index.js
@@ -22,6 +22,7 @@ const HomePage = () => {
         background="/static/images/home/bg-intro.jpg"
         position={{ bottom: true, left: true }}
         column={9}
+        backgroundProps={{ fetchPriority: 'high' }}
       >
         <div className="c-intro">
           <h2>
@@ -58,6 +59,7 @@ const HomePage = () => {
         position={{ top: true, right: true }}
         column={5}
         background="/static/images/home/bg-map.jpg"
+        backgroundProps={{ fetchPriority: 'low', loading: 'lazy' }}
       >
         <Card
           theme="-tertiary -theme-home"
@@ -74,9 +76,10 @@ const HomePage = () => {
 
       {/* SECTION C */}
       <StaticSection
-        background="/static/images/home/bg-c.jpg"
         position={{ top: true, left: true }}
         column={5}
+        background="/static/images/home/bg-c.jpg"
+        backgroundProps={{ fetchPriority: 'low', loading: 'lazy' }}
       >
         <Card
           theme="-secondary -theme-home"