From 4bdd83bd263314b1b18c2afaf7bb89047e35f4e9 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Mon, 16 Sep 2024 01:38:22 +0100
Subject: [PATCH] refactor(lib-content): reduce home and about page load times
 (#6255)

* refactor(lib-content): use lite-youtube-embed for video embeds

Use `YouTubeEmbed`, from `@next/third-parties/google`, for video embeds on the home page. This should reduce the JS download size by ~2.5MB per video.

* lazy load large blog images

* update the About page

- use `lite-youtube-embed`.
- lazy load offscreen images.

* put video title in translations dictionary

* fix DefaultHome padding dupe

---------

Co-authored-by: Delilah <23665803+goplayoutside3@users.noreply.github.com>
---
 packages/lib-content/package.json             |  1 +
 .../src/components/Article/Article.js         | 20 +++++++++++++-----
 .../screens/About/components/Highlights.js    |  3 +++
 .../screens/About/components/OurMission.js    | 13 ++++++------
 .../screens/Home/DefaultHome/DefaultHome.js   |  3 +--
 .../DefaultHome/components/Introduction.js    | 11 +++++-----
 .../DefaultHome/components/Researchers.js     | 21 +++++++++----------
 packages/lib-content/src/translations/en.json |  6 ++++--
 yarn.lock                                     | 12 +++++++++++
 9 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json
index 167f19fa2d..f3fa32364b 100644
--- a/packages/lib-content/package.json
+++ b/packages/lib-content/package.json
@@ -30,6 +30,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@next/third-parties": "~14.2.7",
     "@zooniverse/async-states": "~0.0.1",
     "@zooniverse/react-components": "~1.13.0",
     "dayjs": "~1.11.11",
diff --git a/packages/lib-content/src/components/Article/Article.js b/packages/lib-content/src/components/Article/Article.js
index 7d87bb23f3..ca4572f31f 100644
--- a/packages/lib-content/src/components/Article/Article.js
+++ b/packages/lib-content/src/components/Article/Article.js
@@ -1,4 +1,4 @@
-import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet'
+import { Anchor, Box, Heading, Image, Paragraph, ResponsiveContext } from 'grommet'
 import { string } from 'prop-types'
 import { useTranslation } from '../../translations/i18n.js'
 import styled from 'styled-components'
@@ -9,6 +9,10 @@ const StyledParagraph = styled(Paragraph)`
   line-height: 1.2;
 `
 
+const thumbnailSize = {
+  max: '120px',
+  min: '120px'
+}
 export default function Article({
   date = '',
   excerpt = '',
@@ -33,11 +37,17 @@ export default function Article({
       {imageSrc.length && size !== 'small' ? (
         <Box
           alignSelf='center'
-          background={`url('${imageSrc}')`}
           flex='grow'
-          height={{ max: '120px', min: '120px' }}
-          width={{ max: '120px', min: '120px' }}
-        />
+          height={thumbnailSize}
+          width={thumbnailSize}
+        >
+          <Image
+            fit='cover'
+            src={imageSrc}
+            alt={title}
+            loading='lazy'
+          />
+        </Box>
       ) : null}
       <Box>
         <SpacedText
diff --git a/packages/lib-content/src/screens/About/components/Highlights.js b/packages/lib-content/src/screens/About/components/Highlights.js
index 7bc89affca..1df00ca45e 100644
--- a/packages/lib-content/src/screens/About/components/Highlights.js
+++ b/packages/lib-content/src/screens/About/components/Highlights.js
@@ -46,6 +46,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.one')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse1.jpg'
+            loading='lazy'
             fit='contain'
             width='100%'
           />
@@ -54,6 +55,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.two')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse2.png'
+            loading='lazy'
             fit='contain'
             width='100%'
 
@@ -63,6 +65,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.three')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse3.jpg'
+            loading='lazy'
             fit='contain'
             width='99%' // minor adjustment to align these images top/bottom
           />
diff --git a/packages/lib-content/src/screens/About/components/OurMission.js b/packages/lib-content/src/screens/About/components/OurMission.js
index bbc5d8dbc0..9507ea940b 100644
--- a/packages/lib-content/src/screens/About/components/OurMission.js
+++ b/packages/lib-content/src/screens/About/components/OurMission.js
@@ -16,6 +16,7 @@ import styled from 'styled-components'
 import { useContext } from 'react'
 
 import Stats from '../../../components/Stats/Stats.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const VideoWrapper = styled(Box)`
   border-radius: 8px; // same as Stat component
@@ -37,7 +38,7 @@ const Discovery = ({ href, src, labelString }) => (
   <Anchor href={href}>
     <Box width='8rem'>
       <CircleImage>
-        <Image alt='' src={src} width='100%' height='100%' />
+        <Image alt='' loading='lazy' src={src} width='100%' height='100%' />
       </CircleImage>
       <Text
         color={{ light: 'dark-5', dark: 'white' }}
@@ -120,13 +121,11 @@ export default function OurMission() {
       <Stats />
 
       <VideoWrapper>
-        <iframe
-          width='100%'
+        <YouTubeEmbed
           height='100%'
-          src='https://www.youtube-nocookie.com/embed/F-B8gXJyMHc?si=YGd16vJFYOB-rfrI'
-          title='YouTube video player'
-          frameborder='0'
-          allowfullscreen
+          width='100%'
+          videoid='F-B8gXJyMHc'
+          title={t('AboutPage.OurMission.video')}
         />
       </VideoWrapper>
 
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
index 6a0a24bdeb..779336e1c9 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
@@ -16,7 +16,7 @@ import Researchers from './components/Researchers.js'
 import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
 
 const StyledBox = styled(Box)`
-  padding: 0 0 0 50px;
+  padding: 0 0 50px 0;
 
   @media (width <= 90rem) {
     padding: 0 30px 50px;
@@ -44,7 +44,6 @@ export default function DefaultHome({ dailyZooPosts = [], zooBlogPosts = [] }) {
         <StyledBox
           align='center'
           width='min(100%, calc(90rem - 160px))' // Like 80px horizontal padding, matches lib-user Layout
-          pad={{ bottom: '50px' }}
         >
           <MaxWidthContent>
             <Introduction />
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
index 7fb573d810..28f4e43323 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
@@ -6,6 +6,7 @@ import { useTranslation } from '../../../../translations/i18n.js'
 
 import Stats from '../../../../components/Stats/Stats.js'
 import SubHeading from '../../../../components/HeadingForAboutNav/SubHeading.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const StyledSignIn = styled(Button)`
   width: 47%;
@@ -115,13 +116,11 @@ export default function Introduction() {
       </SpacedHeading>
       <Stats />
       <VideoWrapper>
-        <iframe
-          width='100%'
+        <YouTubeEmbed
           height='100%'
-          src='https://www.youtube-nocookie.com/embed/F-B8gXJyMHc?si=YGd16vJFYOB-rfrI'
-          title='YouTube video player'
-          frameBorder='0'
-          allowFullScreen
+          width='100%'
+          videoid='F-B8gXJyMHc'
+          title={t('Home.DefaultHome.Introduction.video')}
         />
       </VideoWrapper>
     </>
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
index 23038bd23d..7fa0980688 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
@@ -1,4 +1,5 @@
 import { Anchor, Box, Paragraph } from 'grommet'
+import { YouTubeEmbed } from '@next/third-parties/google'
 import { useTranslation } from '../../../../translations/i18n.js'
 import styled, { css } from 'styled-components'
 import { SpacedHeading } from '@zooniverse/react-components'
@@ -62,9 +63,9 @@ const VideoWrapper = styled(Box)`
 `
 
 const YOUTUBE_SOURCES = [
-  'https://www.youtube-nocookie.com/embed/CaTNIoJy4Dg?si=-rG8luvWD_FtFBc5', // PH TESS
-  'https://www.youtube-nocookie.com/embed/8lZiZoBcMjE?si=wPKWlRjQcKeTIOB5', // Wildcam Gorongosa
-  'https://www.youtube-nocookie.com/embed/B6diEbpEblQ?si=tt3jtcINdleiBT8g' // Backyard Worlds
+  ['CaTNIoJy4Dg', 'Around the Zoo – Planet Hunters TESS'],
+  ['8lZiZoBcMjE', 'Around the Zoo – Wildcam Gorongosa'],
+  ['B6diEbpEblQ', 'Around the Zoo – Backyard Worlds'],
 ]
 
 export default function Researchers() {
@@ -93,15 +94,13 @@ export default function Researchers() {
           pad={{ horizontal: 'xxsmall', bottom: 'xsmall' }}
           overflow={{ horizontal: 'auto' }}
         >
-          {YOUTUBE_SOURCES.map(src => (
-            <VideoWrapper key={src}>
-              <iframe
-                width='100%'
+          {YOUTUBE_SOURCES.map(([id, title]) => (
+            <VideoWrapper key={id}>
+              <YouTubeEmbed
                 height='100%'
-                src={src}
-                title='TESS YouTube video player'
-                frameBorder='0'
-                allowFullScreen
+                width='100%'
+                videoid={id}
+                title={title}
               />
             </VideoWrapper>
           ))}
diff --git a/packages/lib-content/src/translations/en.json b/packages/lib-content/src/translations/en.json
index dcebfce670..1ab75917f6 100644
--- a/packages/lib-content/src/translations/en.json
+++ b/packages/lib-content/src/translations/en.json
@@ -115,7 +115,8 @@
       "stats": {
         "one": "Classifications so far",
         "two": "Registered volunteers"
-      }
+      },
+      "video": "A Brief Introduction to the Zooniverse"
     },
     "sidebarLabel": "Section",
     "title": "About the Zooniverse"
@@ -278,7 +279,8 @@
         "description1": "The Zooniverse is the world's largest platform for people-powered research. We connect professional researchers with millions of volunteers worldwide. Facilitating real results from impractical, or otherwise impossible research. This has led to new discoveries, policy impacts, and research publications.",
         "description2": "Our platform is driven by volunteers, like you. All ages and backgrounds are welcome to participate, no PhD required — just a sense of wonder and a few clicks. Many of the most interesting findings from Zooniverse projects have emerged from discussions between volunteers and researchers. Join us today to take part in cutting-edge research and make your own discoveries!",
         "signIn": "Sign in",
-        "register": "Register"
+        "register": "Register",
+        "video": "A Brief Introduction to the Zooniverse"
       },
       "Researchers": {
         "build": "Build a project",
diff --git a/yarn.lock b/yarn.lock
index c9f6399511..65fc894752 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2041,6 +2041,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.7.tgz#75e1d90758cb10a547e1cdfb878871da28123682"
   integrity sha512-pxsI23gKWRt/SPHFkDEsP+w+Nd7gK37Hpv0ngc5HpWy2e7cKx9zR/+Q2ptAUqICNTecAaGWvmhway7pj/JLEWA==
 
+"@next/third-parties@~14.2.7":
+  version "14.2.7"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.2.7.tgz#542e354cb129e5a4751fa3c28f96d00515a4d3b8"
+  integrity sha512-cE/1MAvmbKFZ9VCCj+Gvv21rMm/72JRTeLr24QEqCBNe17xuXyCzg9c7cRCXLdbk1VTBSALZCK9o13gbOvSMKA==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -16685,6 +16692,11 @@ then-request@^6.0.0:
     promise "^8.0.0"
     qs "^6.4.0"
 
+third-party-capital@1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 through2@^2.0.0, through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"