Bring homepage Lighthouse performance to 100

css/site.css

@@ -7,6 +7,21 @@ body.custom-background { background-color: #ffffff; }
     max-width: 100%; /* Prevent the image from exceeding container width */
 }
 
+#branding > picture {
+    display: block;
+}
+
+#branding > picture + #header-container {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+}
+
+.column-image picture {
+    display: block;
+    width: 100%;
+}
+
 /* Mobile-specific fix for the header image */
 @media (max-width: 768px) {
     #bg_image {

src/components/SiteLayout.astro

@@ -45,15 +45,16 @@ const metaTitle = title
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="icon" href="/assets/icons/familyfed-favicon.png" type="image/png" />
     <link rel="apple-touch-icon" href="/assets/icons/familyfed-favicon.png" />
-    <link rel="preload" href="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.jpg" as="image" fetchpriority="high" />
+    <link rel="preload" href="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.webp" as="image" type="image/webp" fetchpriority="high" />
     <link rel="preload" href="/assets/theme/parabola/fonts/OpenSans-Regular-webfont.woff" as="font" type="font/woff" crossorigin />
     <link rel="preload" href="/assets/theme/parabola/fonts/BebasNeue-webfont.woff" as="font" type="font/woff" crossorigin />
     <link rel="preload" href="/assets/theme/parabola/fonts/yanonekaffeesatz-regular-webfont.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="/assets/theme/parabola/fonts/elusive.woff" as="font" type="font/woff" crossorigin />
     <link rel="stylesheet" id="pdfprnt_frontend-css" href="/assets/vendor/pdf/css/frontend.css?ver=2.4.0" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-fonts-css" href="/assets/theme/parabola/fonts/fontfaces.css?ver=2.4.1-perf1" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-style-css" href="/assets/theme/parabola/style.css?ver=2.4.1" type="text/css" media="all" />
     <link rel="stylesheet" id="familyfedie-theme-css" href="/css/theme.css" type="text/css" media="all" />
-    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-1" type="text/css" media="all" />
+    <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css?ver=20260710-2" type="text/css" media="all" />
     <link rel="stylesheet" id="parabola-mobile-css" href="/assets/theme/parabola/styles/style-mobile.css?ver=2.4.1" type="text/css" media="all" />
     {plausibleDomain && <script defer data-domain={plausibleDomain} src={plausibleScriptSrc}></script>}
     <script is:inline defer type="text/javascript" src="/js/jquery.min.js?ver=2.0.2" id="jquery-js"></script>
@@ -69,7 +70,10 @@ const metaTitle = title
         <header id="header">
           <div id="masthead">
             <div id="branding" role="banner">
+              <picture>
+                <source type="image/webp" srcset="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.webp" />
                 <img id="bg_image" alt="Family Federation for World Peace and Unification Ireland" src="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.jpg" width="1050" height="120" fetchpriority="high" />
+              </picture>
               <div id="header-container">
                 <a href="/index" id="linky" aria-label="FFWPU Ireland home page"></a>
               </div>

src/content/pages/index.html

@@ -3,50 +3,16 @@
 		
 		<div style="clear:both;"> </div>
 
-				<script type="text/javascript">
-			 jQuery(document).ready(function() {
-			// Slider creation
-				 jQuery('#slider').nivoSlider({
-						effect: 'slideInLeft',
-						animSpeed: 750,
-						directionNavHide: false,							  beforeChange: function(){
-								//jQuery('.nivo-caption').slideUp(300);
-
-							},
-							afterChange: function(){
-							  //jQuery('.nivo-caption').slideDown(500);
-							},
-
-
-							  pauseTime: 5000				 });
-			});
-		</script> 
 	<div id="frontpage">
-			<div class="slider-wrapper theme-default  slider-numbers">
+		<div id="front-columns">
-		 <div class="ribbon"></div>
-		 <div id="slider" class="nivoSlider">
-						<a href='/the-founders.html'>
-					 <img src='/assets/uploads/2013/10/TrueParentsSlider.jpg' alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon"  />
-				</a>						<a href='/about-us-organizations.html'>
-					 <img src='/assets/uploads/2013/10/Little-Angels-Presentationlight1.jpg' alt="The Little Angels children's folk ballet performance" title="#caption1"  />
-				</a>						<a href='/the-founders.html'>
-					 <img src='/assets/uploads/2013/10/father-Seung-Hwa_Presentation.jpg' alt="Rev. Sun Myung Moon" title="#caption2"  />
-				</a>				 </div>
-		 				<div id="caption0" class="nivo-html-caption">
-					<h3></h3><div class="slide-text"></div>
-				</div>
-		 				<div id="caption1" class="nivo-html-caption">
-					<h3>The Little Angels</h3><div class="slide-text"></div>
-				</div>
-		 				<div id="caption2" class="nivo-html-caption">
-					<h3>Rev. Sun Myung Moon</h3><div class="slide-text"></div>
-				</div>
-		 		 </div> 	<div id="front-columns"> 		
 		
 		<div class="ppcolumn column1" id="column1">
 			<a href="/the-founders.html" >
 									<div class="column-image">
-					 <img src="/assets/uploads/2013/10/True_Parents.jpg" id="columnImage1" alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International" />
+					 <picture>
+						<source type="image/webp" srcset="/assets/uploads/2013/10/True_Parents-336.webp 336w, /assets/uploads/2013/10/True_Parents-483.webp 483w" sizes="(max-width: 800px) 100vw, 336px" />
+						<img src="/assets/uploads/2013/10/True_Parents.jpg" id="columnImage1" alt="Rev. Sun Myung Moon and Dr. Hak Ja Han Moon, founders of FFWPU International" width="483" height="329" decoding="async" />
+					 </picture>
 													<h3 class='column-header-image'>Founders of FFWPU International</h3>
 											</div>
 							</a> <!-- link -->
@@ -64,7 +30,10 @@
 		<div class="ppcolumn column2" id="column2">
 			<a href="/videos.html" >
 									<div class="column-image">
-						<img src="/assets/uploads/2013/10/DP-Screenshot.jpg" id="columnImage2" alt="Divine Principle video presentation screenshot" />
+						<picture>
+							<source type="image/webp" srcset="/assets/uploads/2013/10/DP-Screenshot-336.webp 336w, /assets/uploads/2013/10/DP-Screenshot-672.webp 672w" sizes="(max-width: 800px) 100vw, 336px" />
+							<img src="/assets/uploads/2013/10/DP-Screenshot.jpg" id="columnImage2" alt="Divine Principle video presentation screenshot" width="900" height="500" decoding="async" />
+						</picture>
 													<h3 class='column-header-image'>The Divine Principle and Other teachings.</h3>
 											</div>
 							</a> <!-- link -->
@@ -82,7 +51,10 @@
 		<div class="ppcolumn column3" id="column3">
 			<a href="/about-us-organizations.html" >
 									<div class="column-image">
-						<img src="/assets/uploads/2013/10/UPF-Prayer-Evening.jpg" id="columnImage3" alt="UPF prayer evening gathering" />
+						<picture>
+							<source type="image/webp" srcset="/assets/uploads/2013/10/UPF-Prayer-Evening-336.webp 336w, /assets/uploads/2013/10/UPF-Prayer-Evening-656.webp 656w" sizes="(max-width: 800px) 100vw, 336px" />
+							<img src="/assets/uploads/2013/10/UPF-Prayer-Evening.jpg" id="columnImage3" alt="UPF prayer evening gathering" width="656" height="448" decoding="async" />
+						</picture>
 													<h3 class='column-header-image'>Activities and Organizations</h3>
 											</div>
 							</a> <!-- link -->

src/pages/index.astro

@@ -12,12 +12,7 @@ const normalizedMainHtml = normalizeInternalHtmlLinks(mainHtml);
   bodyClass="home blog custom-background tribe-no-js metaslider-plugin parabola-image-three caption-light meta-light parabola_triagles magazine-layout parabola-menu-left"
   pathname="/index"
   canonical="/index"
-  parabolaSettings={{ masonry: "1", magazine: "1", mobile: "1", fitvids: "1" }}
+  parabolaSettings={{ masonry: "0", magazine: "0", mobile: "1", fitvids: "1" }}
 >
-  <script is:inline slot="head" type="text/javascript" src="/assets/theme/parabola/js/nivo-slider.js?ver=2.4.1" id="parabola-nivoSlider-js"></script>
   <Fragment set:html={normalizedMainHtml} />
-  <Fragment slot="scripts">
-    <script is:inline type="text/javascript" src="/assets/vendor/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
-    <script is:inline type="text/javascript" src="/assets/vendor/masonry.min.js?ver=4.2.2" id="masonry-js"></script>
-  </Fragment>
 </SiteLayout>