Improve above-the-fold page performance

assets/theme/parabola/fonts/fontfaces.css

@@ -7,6 +7,7 @@
          url('OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -19,6 +20,7 @@
          url('OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -31,6 +33,7 @@
          url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -43,6 +46,7 @@
          url('yanonekaffeesatz-regular-webfont.svg#yanone_kaffeesatzregular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -55,6 +59,7 @@
          url('yanonekaffeesatz-light-webfont.svg#yanone_kaffeesatzlight') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -69,6 +74,7 @@
          url('Oswald-Light-webfont.svg#OswaldLight') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -81,6 +87,7 @@
          url('Oswald-Regular-webfont.svg#OswaldBook') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -94,6 +101,7 @@
          url('Oswald-Stencil-webfont.svg#OswaldStencilRegular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -106,6 +114,7 @@
          url('propaganda-webfont.svg#propagandaregular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -118,6 +127,7 @@
          url('square-webfont.svg#squarefontregular') format('svg');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 
 }
 
@@ -131,5 +141,5 @@
        url('elusive.svg?#elusive') format('svg');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
-

css/site.css

@@ -20,6 +20,48 @@ body.custom-background { background-color: #ffffff; }
 .su-column-size-1-4{
   width:18%;
 }
+
+/* The migrated content only uses columns and video embeds from WordPress blocks. */
+.wp-block-columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: normal;
+  box-sizing: border-box;
+  margin-bottom: 1.75em;
+}
+
+.wp-block-column {
+  flex-grow: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+@media (max-width: 781px) {
+  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
+    flex-basis: 100%;
+  }
+}
+
+@media (min-width: 782px) {
+  .wp-block-columns {
+    flex-wrap: nowrap;
+  }
+
+  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
+    flex-basis: 0;
+  }
+}
+
+.wp-block-embed {
+  box-sizing: border-box;
+  margin: 0 0 1em;
+  overflow-wrap: break-word;
+}
+
+.wp-block-embed iframe {
+  max-width: 100%;
+}
 /* Homepage slider/frontpage settings from the original export. */
 #colophon {display: none;} .slider-wrapper { max-width: 1200px; } #slider{ max-width: 1200px; max-height: 350px; border:0px solid #ffffff; } #front-text1, #front-text2 { color: #212121; } #front-columns > div { width: 32%; } #front-columns > div.ppcolumn:nth-child(3n) { margin-right: 0; } #front-columns > div.ppcolumn:nth-child(3n+1) { clear: left; } .column-image { padding: 0px; } .column-image h3 {margin-bottom: 0px; } .column-image img { max-height:201px;} .nivo-caption { background-color: rgb(252,250,250); background-color: rgba(252,250,250,0.7); } .nivo-caption, .nivo-caption a { color: #0e2012; } .theme-default .nivoSlider { background-color: #ffffff; } .theme-default .nivo-controlNav:before, .theme-default .nivo-controlNav:after { border-top-color:#ffffff; } .theme-default .nivo-controlNav { background-color:#ffffff; } .slider-bullets .nivo-controlNav a { background-color: #fdf7f7; } .slider-bullets .nivo-controlNav a:hover { background-color: #fdfcfc; } .slider-bullets .nivo-controlNav a.active {background-color: #ffffff; } .slider-numbers .nivo-controlNav a { color:#fdf7f7; background-color:#F7F7F2;} .slider-numbers .nivo-controlNav a:hover { color: #fdfcfc; background-color:#FFFFFF } .slider-numbers .nivo-controlNav a.active { color:#ffffff;} .column-image h3{ color: #333333; background-color: rgb(255,255,255); } .columnmore { background-color: #F7F7F2; } .columnmore:before { border-bottom-color: #F7F7F2; } #front-columns h3.column-header-noimage { background: #FFFFFF; }
 

src/components/SiteLayout.astro

@@ -45,7 +45,10 @@ 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="stylesheet" id="content-blocks-css" href="/css/block-library.css?ver=6.6.5" type="text/css" media="all" />
+    <link rel="preload" href="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.jpg" as="image" 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="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" 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" />
@@ -53,9 +56,9 @@ const metaTitle = title
     <link rel="stylesheet" id="familyfedie-site-css" href="/css/site.css" 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 type="text/javascript" src="/js/jquery.min.js?ver=2.0.2" id="jquery-js"></script>
+    <script is:inline defer type="text/javascript" src="/js/jquery.min.js?ver=2.0.2" id="jquery-js"></script>
     <script is:inline type="text/javascript" id="parabola-frontend-js-extra" set:html={parabolaSettingsScript}></script>
-    <script is:inline type="text/javascript" src="/assets/theme/parabola/js/frontend.js?ver=2.4.1" id="parabola-frontend-js"></script>
+    <script is:inline defer type="text/javascript" src="/assets/theme/parabola/js/frontend.js?ver=2.4.1" id="parabola-frontend-js"></script>
     <slot name="head" />
     {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
   </head>
@@ -66,7 +69,7 @@ const metaTitle = title
         <header id="header">
           <div id="masthead">
             <div id="branding" role="banner">
-              <img id="bg_image" alt="Family Federation for World Peace and Unification Ireland" src="/assets/uploads/2013/10/BannerFamilyFed_23_10c1.jpg" />
+              <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" />
               <div id="header-container">
                 <a href="/index" id="linky" aria-label="FFWPU Ireland home page"></a>
               </div>