perf: Add a priority for the images above the fold

gorzelinski · Oct 4, 2024 · 1d84938 · 1d84938
1 parent fe3435e
commit 1d84938
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 4 deletions.
diff --git a/app/[lang]/blog/[slug]/page.tsx b/app/[lang]/blog/[slug]/page.tsx
@@ -158,6 +158,7 @@ export default async function Blog({
               alt={frontmatter.image.alt}
               width={1200}
               height={675}
+              priority={true}
             />
             <Figcaption
               style="italic"

diff --git a/app/[lang]/blog/page.tsx b/app/[lang]/blog/page.tsx
@@ -67,7 +67,7 @@ export default async function Blog({ params: { lang } }: PageProps) {
           <H1>{page.blog.heading}</H1>
           <h2 className={small()}>{page.blog.all}</h2>
         </Header>
-        {posts.map(({ frontmatter }) => (
+        {posts.map(({ frontmatter }, index) => (
           <Post
             key={frontmatter.slug}
             lang={lang}
@@ -78,6 +78,7 @@ export default async function Blog({ params: { lang } }: PageProps) {
             title={frontmatter.title}
             description={frontmatter.description}
             slug={frontmatter.slug}
+            priority={index < 3}
           />
         ))}
       </Section>

diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
@@ -107,6 +107,7 @@ export default async function Home({ params: { lang } }: PageProps) {
             title={frontmatter.title}
             description={frontmatter.description}
             slug={frontmatter.slug}
+            priority={true}
           />
         ))}
       </Section>

diff --git a/app/[lang]/portfolio/[slug]/page.tsx b/app/[lang]/portfolio/[slug]/page.tsx
@@ -125,6 +125,7 @@ export default async function Portfolio({
               alt={frontmatter.image.alt}
               width={1200}
               height={675}
+              priority={true}
             />
           </Box>
           <H1

diff --git a/app/[lang]/portfolio/page.tsx b/app/[lang]/portfolio/page.tsx
@@ -72,7 +72,7 @@ export default async function Portfolio({ params: { lang } }: PageProps) {
           <H1>{page.portfolio.heading}</H1>
           <h2 className={small()}>{page.portfolio.all}</h2>
         </Header>
-        {projects.map(({ frontmatter }) => (
+        {projects.map(({ frontmatter }, index) => (
           <Project
             key={frontmatter.slug}
             lang={lang}
@@ -82,6 +82,7 @@ export default async function Portfolio({ params: { lang } }: PageProps) {
             image={frontmatter.image}
             deliverables={frontmatter.deliverables}
             slug={frontmatter.slug}
+            priority={index < 2}
           />
         ))}
       </Section>

diff --git a/app/[lang]/uses/page.tsx b/app/[lang]/uses/page.tsx
@@ -90,6 +90,7 @@ export default async function Uses({ params: { lang } }: PageProps) {
             alt={frontmatter.image.alt}
             width={1200}
             height={888}
+            priority={true}
           />
           <Figcaption
             style="italic"

diff --git a/design-system/components/post/post.tsx b/design-system/components/post/post.tsx
@@ -11,7 +11,8 @@ export const Post = ({
   title,
   description,
   date,
-  readingTime
+  readingTime,
+  priority = false
 }: PostProps) => {
   return (
     <Card orientation="horizontal">
@@ -20,6 +21,7 @@ export const Post = ({
         height={403}
         src={`/images${delocalizePath(slug, lang)}${image.src}`}
         alt={image.alt}
+        priority={priority}
       />
       <Small>
         {formatDate(date, lang)} • {formatReadingTime(readingTime.minutes)}{' '}

diff --git a/design-system/components/post/post.types.tsx b/design-system/components/post/post.types.tsx
@@ -7,4 +7,5 @@ export type PostProps = Pick<
 > & {
   lang: Locale
   dictionary: Dictionary['component']['post']
+  priority?: boolean
 }
diff --git a/design-system/components/project/project.tsx b/design-system/components/project/project.tsx
@@ -10,7 +10,8 @@ export const Project = ({
   image,
   title,
   description,
-  deliverables
+  deliverables,
+  priority = false
 }: ProjectProps) => {
   return (
     <Card orientation="vertical">
@@ -20,6 +21,7 @@ export const Project = ({
         aspectRatio="wide"
         src={`/images${delocalizePath(slug, lang)}${image.src}`}
         alt={image.alt}
+        priority={priority}
       />
       <Small>{deliverables.join(', ')}</Small>
       <H3 size="s">{title}</H3>

diff --git a/design-system/components/project/project.types.tsx b/design-system/components/project/project.types.tsx
@@ -7,4 +7,5 @@ export type ProjectProps = Pick<
 > & {
   lang: Locale
   dictionary: Dictionary['component']['project']
+  priority?: boolean
 }