Merge pull request #281 from sourcectl/perf/lazy-load-images

perf: add loading="lazy" to below-fold images

Author: andygrunwald

src/components/NewsPostPreview.astro

@@ -40,7 +40,7 @@ const imageOrder = isEven ? 'order-0 lg:order-1' : 'order-0';
 	</div>
 	<div class={`w-full lg:w-1/2 px-4 mb-8 ${imageOrder}`}>
 		<a href={entry.url} title={frontmatter.title}>
-			<img class="w-full h-80 object-cover rounded" src={frontmatter.coverImage} alt={frontmatter.title} title={frontmatter.title} />
+			<img class="w-full h-80 object-cover rounded" src={frontmatter.coverImage} alt={frontmatter.title} title={frontmatter.title} loading="lazy" />
 		</a>
 	</div>
 </div>

src/layouts/NewsSingleViewLayout.astro

@@ -37,7 +37,7 @@ const description = cutText(content.description, 200);
 						</div>
 					</div>
 					<div class="mb-8">
-						<img class="h-80 mx-auto mb-6 object-cover rounded" src={content.coverImage} alt={content.title} title={content.title} />
+						<img class="h-80 mx-auto mb-6 object-cover rounded" src={content.coverImage} alt={content.title} title={content.title} loading="lazy" />
 					</div>
 					<div id="changelog_content" class="max-w-2xl mx-auto">
 						<slot />

src/pages/index.astro

@@ -31,9 +31,9 @@ import Layout from '../layouts/StandardLayout.astro';
 		<div class="flex flex-wrap">
 			<div class="relative w-full lg:w-1/2 px-4 lg:h-128">
 				<div class="relative lg:absolute left-0 top-0 lg:max-w-6xl mx-auto lg:-ml-64">
-					<img class="lg:h-128" src="/images/elements/macbook.png" alt="" />
+					<img class="lg:h-128" src="/images/elements/macbook.png" alt="" loading="lazy" />
 					<div class="absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
-						<img class="object-cover w-full h-full" src="/images/screenshots/sourcectl-repo-view.png" alt="sourcectl Repository view" title="sourcectl Repository view" />
+						<img class="object-cover w-full h-full" src="/images/screenshots/sourcectl-repo-view.png" alt="sourcectl Repository view" title="sourcectl Repository view" loading="lazy" />
 					</div>
 				</div>
 			</div>
@@ -76,9 +76,9 @@ import Layout from '../layouts/StandardLayout.astro';
 			</div>
 			<div class="relative order-0 lg:order-1 w-full lg:w-1/2 px-4 lg:h-128">
 				<div class="relative lg:absolute right-0 top-0 lg:max-w-6xl mx-auto lg:-mr-64">
-					<img class="lg:h-128" src="/images/elements/macbook.png" alt="" />
+					<img class="lg:h-128" src="/images/elements/macbook.png" alt="" loading="lazy" />
 					<div class="absolute" style="top: 5.8%; left: 14.6%; width: 72.8%; height: 76.8%;">
-						<img class="object-cover w-full h-full" src="/images/screenshots/sourcectl-dashboard.png" alt="sourcectl Dashboard" title="sourcectl Dashboard" />
+						<img class="object-cover w-full h-full" src="/images/screenshots/sourcectl-dashboard.png" alt="sourcectl Dashboard" title="sourcectl Dashboard" loading="lazy" />
 					</div>
 				</div>
 			</div>
@@ -188,7 +188,7 @@ import Layout from '../layouts/StandardLayout.astro';
 					</div>
 				</div>
 				<div class="w-full md:w-1/2 px-3 order-0 md:order-1 mb-12 md:mb-0">
-					<img class="sm:max-w-sm lg:max-w-full mx-auto" src="/images/illustrations/work-tv.png" alt="" />
+					<img class="sm:max-w-sm lg:max-w-full mx-auto" src="/images/illustrations/work-tv.png" alt="" loading="lazy" />
 				</div>
 			</div>
 		</div>
@@ -206,7 +206,7 @@ import Layout from '../layouts/StandardLayout.astro';
 			<div class="flex flex-wrap -mx-3">
 				<div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
 					<div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
-						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/people.png" alt="" />
+						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/people.png" alt="" loading="lazy" />
 						<h3 class="mb-2 text-4xl font-bold font-heading">In the Open</h3>
 						<span class="text-4xl text-sourcectl-orange font-bold font-heading">Free</span>
 						<p class="mt-2 mb-8 text-blueGray-500">&nbsp;</p>
@@ -240,7 +240,7 @@ import Layout from '../layouts/StandardLayout.astro';
 				</div>
 				<div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
 					<div class="pt-16 pb-8 px-4 text-center text-white bg-gray-700 rounded shadow">
-						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/job-interview.png" alt="" />
+						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/job-interview.png" alt="" loading="lazy" />
 						<h3 class="mb-2 text-4xl font-bold font-heading">Professional</h3>
 						<span class="text-4xl font-bold font-heading">$199.99</span>
 						<p class="mt-2 mb-8">per month</p>
@@ -289,7 +289,7 @@ import Layout from '../layouts/StandardLayout.astro';
 				</div>
 				<div class="w-full lg:w-1/3 px-3 mb-6">
 					<div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
-						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/team-management.png" alt="" />
+						<img class="h-20 mb-6 mx-auto" src="/images/illustrations/team-management.png" alt="" loading="lazy" />
 						<h3 class="mb-2 text-4xl font-bold font-heading">Enterprise</h3>
 						<span class="text-4xl text-sourcectl-orange font-bold font-heading">$499.99</span>
 						<p class="mt-2 mb-8 text-blueGray-500">per month</p>