refactor(lib-content): reduce home and about page load times

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",

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

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
           />

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='A Brief Introduction to the Zooniverse'
         />
       </VideoWrapper>
 

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='A Brief Introduction to the Zooniverse'
         />
       </VideoWrapper>
     </>

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>
           ))}

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/[email protected]":
   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"
 
+[email protected]:
+  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"