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 <[email protected]>
zooniverse · Sep 16, 2024 · 4bdd83b · 4bdd83b
1 parent 232fa24
commit 4bdd83b
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"