Merge pull request #6446 from layer5io/leecalcote/perf/cls

[SEO] Improve site performance with reduction of layout shifts (CLS)

Author: leecalcote

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run checklint
+npm run lint

root-wrapper.js

@@ -6,6 +6,26 @@ import CTA_FullWidth from "./src/components/Call-To-Actions/CTA_FullWidth";
 import CTA_Bottom from "./src/components/Call-To-Actions/CTA_Bottom";
 import { ContextWrapper } from "./context-wrapper";
 
+// Custom image component for better CLS scores
+const OptimizedImage = props => {
+  return (
+    <div style={{ width: "100%", height: "auto", aspectRatio: props.aspectRatio || "16/9", overflow: "hidden" }}>
+      <img
+        {...props}
+        width={props.width || "100%"}
+        height={props.height || "auto"}
+        style={{
+          objectFit: props.objectFit || "cover",
+          aspectRatio: props.aspectRatio || "16/9",
+          ...props.style
+        }}
+        loading="lazy"
+        alt={props.alt || "Blog content image"}
+      />
+    </div>
+  );
+};
+
 const components = {
   pre: ({ children: { props } }) => {
     if (props.mdxType === "code") {
@@ -20,6 +40,7 @@ const components = {
       );
     }
   },
+  img: OptimizedImage,
   CTA_ImageOnly,
   CTA_FullWidth,
   CTA_Bottom

src/components/Card/index.js

@@ -13,11 +13,11 @@ const Card = ({ frontmatter, fields }) => {
   return (
     <CardWrapper fixed={!!frontmatter.abstract}>
       <div className="post-block">
-        <div className="post-thumb-block">
+        <div className="post-thumb-block" style={{ aspectRatio: "16/9", minHeight: "200px" }}>
           <Image
             {...((isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL)
               ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
-            imgStyle={{ objectFit: "contain" }}
+            imgStyle={{ objectFit: "cover" }}
             alt={frontmatter.title}
           />
         </div>

src/components/Inline-quotes/index.js

@@ -111,7 +111,13 @@ const InlineQuotes = ({ person, title, quote,image }) => {
         {(image || person || title) && <hr />}
         {
           image &&
-          <img src={image}></img>
+          <img
+            src={image}
+            alt={`${person || "Quote author"}`}
+            width="96"
+            height="96"
+            style={{ objectFit: "cover" }}
+          />
         }
         <div className="quote-source">
           <h5>{person}</h5>

src/components/Related-Posts/index.js

@@ -1,4 +1,3 @@
-
 import React from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
@@ -32,13 +31,13 @@ const RelatedPosts = props => {
                   {
                     postType === "blogs" ? relatedPosts.map(({ post }) => {
                       return (
-                        <Col className="cardCol" $xs={12} key={post.fields.slug}>
+                        <Col className="cardCol" $xs={12} key={post.fields.slug} style={{ minHeight: "320px" }}>
                           <Card frontmatter={post.frontmatter} fields={post.fields}/>
                         </Col>
                       );
                     }) : relatedPosts.map((post) => {
                       return (
-                        <Col className="cardCol" $xs={12} key={post.fields.slug}>
+                        <Col className="cardCol" $xs={12} key={post.fields.slug} style={{ minHeight: "320px" }}>
                           <Card frontmatter={post.frontmatter} fields={post.fields}/>
                         </Col>
                       );

src/components/image.js

@@ -1,18 +1,32 @@
 import React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
 
-const Image = ({ childImageSharp, extension, publicURL, alt, ...rest }) => {
+const Image = ({ childImageSharp, extension, publicURL, alt, imgStyle, ...rest }) => {
 
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="old-gatsby-image-wrapper">
-        <img src={publicURL} alt={alt} />
+      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto", aspectRatio: "16/9" }}>
+        <img
+          src={publicURL}
+          alt={alt || "Blog image"}
+          width="100%"
+          height="auto"
+          style={{
+            aspectRatio: "16/9",
+            objectFit: imgStyle?.objectFit || "cover",
+            ...imgStyle
+          }}
+        />
       </div>
     );
   }
 
   return <GatsbyImage
-    key={publicURL} image={childImageSharp?.gatsbyImageData} {...rest} alt={alt}/>;
+    key={publicURL}
+    image={childImageSharp?.gatsbyImageData}
+    alt={alt || "Blog image"}
+    {...rest}
+  />;
 };
 
 export default Image;

src/reusecore/PageHeader/index.js

@@ -45,7 +45,7 @@ const PageHeader = ({ category, title, img, feedlink, subtitle, author, thumbnai
   return (
     <PageHeaderWrapper>
       <div className="page-header">
-        { thumbnail && <div className="feature-image">
+        { thumbnail && <div className="feature-image" style={{ aspectRatio: "16/9", minHeight: "250px" }}>
           <Image {...thumbnail} imgStyle={{ objectFit: "contain" }} alt={title}/>
         </div>}
         <h1 className="page-title" >{title}  <sup className="supscript">{superscript}</sup>{ img && feedlink && (<a href= {feedlink} target="_blank" rel="noreferrer"> <img src={img} alt="RSS Feed"/> </a>) } </h1>

src/sections/Blog/Blog-single/author.js

@@ -18,9 +18,9 @@ const AboutTheAuthor = (props) => {
         <div className="author-info-section">
           <div className="authors-info-container">
             <h3>About the Author</h3>
-            <div className="authors-head-shot">
+            <div className="authors-head-shot" style={{ aspectRatio: "1/1", width: "150px", height: "150px", overflow: "hidden" }}>
               <Link to={`${authorInformation?.fields?.slug}`}>
-                <Image {...authorInformation?.frontmatter?.image_path} imgStyle={{ objectFit: "cover" }} alt={authorInformation.frontmatter?.name} className="authors-image" />
+                <Image {...authorInformation?.frontmatter?.image_path} imgStyle={{ objectFit: "cover", width: "100%", height: "100%" }} alt={authorInformation.frontmatter?.name} className="authors-image" />
               </Link>
             </div>
             <h4>{authorInformation.frontmatter?.name}</h4>

src/sections/Home/Banner-4/banner4.style.js

@@ -36,48 +36,77 @@ const Banner1SectionWrapper = styled.section`
             }
         }
     }
-    .embedVideo {
+    
+    /* Video container with fixed aspect ratio to prevent layout shifts */
+    .video-wrapper {
         position: relative;
-        min-width:25%;
-        max-width:100%;
+        width: 90%;
+        margin: auto;
+        height: 0;
+        padding-bottom: 50.625%; /* 16:9 aspect ratio (9/16 = 0.5625) */
+        overflow: hidden;
+        border-radius: 8px;
+        background: ${props => props.theme.DarkTheme ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.05)"};
+        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+        
+        /* Loading placeholder */
+        &::before {
+            content: "Loading video...";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: ${props => props.theme.DarkTheme ? "#ffffff80" : "#00000080"};
+            z-index: 0; /* Lower z-index so it doesn't block interactions */
+            opacity: 0.7;
+            transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+        
+        &.video-loaded::before {
+            opacity: 0;
+            visibility: hidden; /* Completely hide the element */
+        }
+    }
+    
+    .embedVideo {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        width: 100% !important;
+        height: 100% !important;
         object-fit: cover;
-        /* height: 44vw !important;
-        border-radius: 2.5%;
-        transition: 0.2s ease-in-out;
-        box-shadow: 0px 3px 20px 4px rgba(0, 179, 159, 0.5); */
+        z-index: 1; /* Ensure video player is above the loading message */
 
         .react-player__preview {
-        border-radius: 1.5%;
+            border-radius: 8px;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            background-size: cover;
+            z-index: 2; /* Ensure preview is clickable */
         }
 
         .react-player__play-icon {
-        transform: scale(3, 3);
+            transform: scale(3, 3);
         }
 
         iframe {
-        border-radius: 2.5%;
-        }
-
-        @media (max-width: 768px) {
-        height: 54vw !important;
+            border-radius: 8px;
         }
 
         &:hover {
-        /* box-shadow: 0px 3px 20px 4px rgba(0, 179, 159, 0.75);
-        .react-player__play-icon {
-            border-color: transparent transparent transparent #EBC017 !important;
-        } */
-        .playBtn {
-        box-shadow: 0px 0px 16px 3px #00B39F;
-        }
+            .playBtn {
+                box-shadow: 0px 0px 16px 3px #00B39F;
+            }
         }
     }
+    
     .kanvasVideo {
         position: relative;
         min-width:25%;
         max-width:100%;
         object-fit: cover;
-}
+    }
     .vintage-box-container {
         display: flex;
     }
@@ -132,6 +161,7 @@ const Banner1SectionWrapper = styled.section`
         border-radius: 50%;
         height: 4rem;
         width: 4rem;
+        z-index: 3; /* Highest z-index to ensure it's clickable */
     }
     @media only screen and (max-width: 1200px) {
         .section-title {

src/sections/Home/Banner-4/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 // import { Link } from "gatsby";
 
 import { Container, Row, Col } from "../../../reusecore/Layout";
@@ -22,6 +22,8 @@ import { getImage } from "gatsby-plugin-image";
 import useHasMounted from "../../../utils/useHasMounted";
 
 const Banner1 = (props) => {
+  const [videoReady, setVideoReady] = useState(false);
+  const thumbnailRef = useRef(null);
 
   const { heroImage } = useStaticQuery(
     graphql`
@@ -46,6 +48,37 @@ const Banner1 = (props) => {
 
   const hasMounted = useHasMounted();
 
+  // Set video as ready immediately after mount to avoid loading message
+  useEffect(() => {
+    if (hasMounted) {
+      // Force the video to be marked as ready after a short delay
+      // This ensures that even if events don't fire, the loading message will disappear
+      const timer = setTimeout(() => {
+        setVideoReady(true);
+      }, 1000);
+
+      // Preload the thumbnail
+      const img = new Image();
+      img.src = videoThumbnail;
+      img.onload = () => {
+        // Mark video as ready when thumbnail loads
+        setVideoReady(true);
+      };
+
+      return () => clearTimeout(timer);
+    }
+  }, [hasMounted]);
+
+  // Multiple handlers to ensure the video gets marked as ready
+  const handleVideoReady = () => {
+    setVideoReady(true);
+  };
+
+  const handleThumbnailClick = () => {
+    // Set ready when user clicks on thumbnail
+    setVideoReady(true);
+  };
+
   return (
     <Banner1SectionWrapper {...props}>
       <BGImg title="heroImage" image={pluginImage}>
@@ -61,10 +94,6 @@ const Banner1 = (props) => {
                 <h2>
                   Collaborate to innovate
                 </h2>
-                {/* <h1>Take the blinders off</h1>
-                <h2>
-                  cloud native management
-                </h2> */}
               </SectionTitle>
               <span className="vintage-box-container">
                 <VintageBox $right={true} $vintageOne={true}>
@@ -80,32 +109,45 @@ const Banner1 = (props) => {
           </Col>
           {hasMounted && window.innerWidth > 760 && (
             <Col $sm={4} $lg={6} className="section-title-wrapper video-col">
-              <ReactPlayer
-                url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
-                playing
-                controls
-                light={videoThumbnail}
-                playIcon={
-                  <img
-                    src={playIcon}
-                    className="playBtn"
-                    loading="lazy"
-                    alt="Play"
-                    role="button"
-                    aria-label="Play"
-                    style={{ fontSize: "24px" }}
-                  />
-                }
-                width="90%"
-                height="30vw"
-                style={{ margin: "auto" }}
-                className="embedVideo"
-              />
-              {/* <Link to="/cloud-native-management/kanvas">
-                <video autoPlay muted loop preload="metadata" className="kanvasVideo">
-                  <source src={kanvasVideo} type="video/mp4"></source>
-                </video>
-              </Link> */}
+              <div
+                className={`video-wrapper ${videoReady ? "video-loaded" : ""}`}
+                ref={thumbnailRef}
+                onClick={handleThumbnailClick}
+              >
+                <ReactPlayer
+                  url="https://youtu.be/034nVaQUyME?si=Yya8m6i7JUoSdZm4"
+                  playing
+                  controls
+                  light={videoThumbnail}
+                  playIcon={
+                    <img
+                      src={playIcon}
+                      className="playBtn"
+                      loading="eager"
+                      alt="Play"
+                      role="button"
+                      aria-label="Play"
+                      style={{ fontSize: "24px" }}
+                    />
+                  }
+                  width="100%"
+                  height="100%"
+                  className="embedVideo"
+                  onReady={handleVideoReady}
+                  onStart={handleVideoReady}
+                  onPlay={handleVideoReady}
+                  onBufferEnd={handleVideoReady}
+                  onClickPreview={handleVideoReady}
+                  config={{
+                    youtube: {
+                      playerVars: {
+                        rel: 0,
+                        modestbranding: 1,
+                      }
+                    }
+                  }}
+                />
+              </div>
             </Col>
           )}
         </Row>