diff --git a/client/src/components/foundation/CoveredImage/CoveredImage.jsx b/client/src/components/foundation/CoveredImage/CoveredImage.jsx
index ffc6fed..c74f9f4 100644
--- a/client/src/components/foundation/CoveredImage/CoveredImage.jsx
+++ b/client/src/components/foundation/CoveredImage/CoveredImage.jsx
@@ -10,7 +10,7 @@ import React from 'react';
  * アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小します
  * @type {React.VFC<Props>}
  */
-const CoveredImage = ({ alt, src, children }) => {
+const CoveredImage = ({ alt, src, children, eager }) => {
   return (
     <picture className="w-full h-full overflow-hidden">
       {children}
@@ -18,7 +18,7 @@ const CoveredImage = ({ alt, src, children }) => {
         alt={alt}
         className="w-full h-full max-w-none object-cover"
         src={src}
-        loading="lazy"
+        loading={eager ? null : 'lazy'}
       />
     </picture>
   );
diff --git a/client/src/components/post/ImageArea/ImageArea.jsx b/client/src/components/post/ImageArea/ImageArea.jsx
index 20eda7f..30af41b 100644
--- a/client/src/components/post/ImageArea/ImageArea.jsx
+++ b/client/src/components/post/ImageArea/ImageArea.jsx
@@ -11,7 +11,7 @@ import { CoveredImage } from '../../foundation/CoveredImage';
  */
 
 /** @type {React.VFC<Props>} */
-const ImageArea = ({ images }) => {
+const ImageArea = ({ images, eager }) => {
   return (
     <AspectRatioBox aspectHeight={9} aspectWidth={16}>
       <div className="grid gap-1 grid-cols-2 grid-rows-2 w-full h-full border border-gray-300 rounded-lg overflow-hidden">
@@ -30,6 +30,7 @@ const ImageArea = ({ images }) => {
               <CoveredImage
                 alt={image.alt}
                 src={getImagePath(image.id, images.length >= 2)}
+                eager={eager && idx === 0}
               >
                 {
                   images.length === 1
diff --git a/client/src/components/post/PostItem/PostItem.jsx b/client/src/components/post/PostItem/PostItem.jsx
index 6ecbadc..379872c 100644
--- a/client/src/components/post/PostItem/PostItem.jsx
+++ b/client/src/components/post/PostItem/PostItem.jsx
@@ -63,7 +63,7 @@ const PostItem = ({ post }) => {
           <p className="text-gray-800 text-xl leading-relaxed">{post?.text ?? '　'}</p>
           {post?.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} eager />
             </div>
           ) : null}
           {post?.movie ? (
diff --git a/client/src/components/timeline/Timeline/Timeline.jsx b/client/src/components/timeline/Timeline/Timeline.jsx
index 0e5bb67..43bfdcf 100644
--- a/client/src/components/timeline/Timeline/Timeline.jsx
+++ b/client/src/components/timeline/Timeline/Timeline.jsx
@@ -8,11 +8,11 @@ import { TimelineItem } from '../TimelineItem';
  */
 
 /** @type {React.VFC<Props>} */
-const Timeline = ({ timeline }) => {
+const Timeline = ({ timeline, eager }) => {
   return (
     <section>
-      {timeline.map((post) => {
-        return <TimelineItem key={post.id} post={post} />;
+      {timeline.map((post, idx) => {
+        return <TimelineItem key={post.id} post={post} eager={eager && idx === 0} />;
       })}
     </section>
   );
diff --git a/client/src/components/timeline/TimelineItem/TimelineItem.jsx b/client/src/components/timeline/TimelineItem/TimelineItem.jsx
index c56a971..e66dd82 100644
--- a/client/src/components/timeline/TimelineItem/TimelineItem.jsx
+++ b/client/src/components/timeline/TimelineItem/TimelineItem.jsx
@@ -32,7 +32,7 @@ const isClickedAnchorOrButton = (target, currentTarget) => {
  */
 
 /** @type {React.VFC<Props>} */
-const TimelineItem = ({ post }) => {
+const TimelineItem = ({ post, eager }) => {
   const navigate = useNavigate();
 
   /**
@@ -78,7 +78,7 @@ const TimelineItem = ({ post }) => {
           <p className="text-gray-800 leading-relaxed">{post.text}</p>
           {post.images?.length > 0 ? (
             <div className="relative mt-2 w-full">
-              <ImageArea images={post.images} />
+              <ImageArea images={post.images} eager={eager} />
             </div>
           ) : null}
           {post.movie ? (
diff --git a/client/src/components/timeline/TimelinePage/TimelinePage.jsx b/client/src/components/timeline/TimelinePage/TimelinePage.jsx
index e750aaf..ab65a4f 100644
--- a/client/src/components/timeline/TimelinePage/TimelinePage.jsx
+++ b/client/src/components/timeline/TimelinePage/TimelinePage.jsx
@@ -9,7 +9,7 @@ import { Timeline } from '../Timeline';
 
 /** @type {React.VFC<Props>} */
 const TimelinePage = ({ timeline }) => {
-  return <Timeline timeline={timeline} />;
+  return <Timeline timeline={timeline} eager />;
 };
 
 export { TimelinePage };
diff --git a/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx b/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx
index 4020bdf..2c0e33d 100644
--- a/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx
+++ b/client/src/components/user_profile/UserProfilePage/UserProfilePage.jsx
@@ -15,7 +15,7 @@ const UserProfilePage = ({ timeline, user }) => {
     <>
       <UserProfileHeader user={user} />
       <div className="mt-6 border-t border-gray-300">
-        <Timeline timeline={timeline} />
+        <Timeline timeline={timeline} eager />
       </div>
     </>
   );