Merge branch 'acl2809/blog-post'

Author: MoralCode

_posts/2025-05-04-acl2809-rit-bus-app.md

@@ -0,0 +1,53 @@
+---
+layout: post
+
+categories: 
+- Contribution
+
+# Enter your name below
+author: Alex Leute
+---
+
+# Ritchie's Bus Schedule: Eager loading for the welcome image
+For my contribution, I'm contributing to Ritchie's Bus Schedule. I'm
+contributing to this software because it's something I use personally, so it
+makes sense for me to contribute to it.
+## Introduction to the Community
+[Ritchie's Bus Schedule](https://www.rit-bus.app/) is a community-made bus
+schedule, that is a better version of the official website. It's important that
+this exists because the buses at RIT are inconsistent, and the existing website
+is hard to use.
+
+This project was a good pick based on what I learned from the Comm Arch
+experience. There seems to be an active community, and good tests and
+documentation, as well as a good community.
+
+## The issue
+I chose this issue
+[#109](https://github.com/hiromon0125/ritchie-bus-schedule/issues/109) because
+it was marked as a good first issue, which is correct, it was not difficult to
+reproduce, and had a simple fix. The welcome image is loaded lazily, which is
+bad for performance. Because it's above the fold, it'll be displayed
+immediately, so lazy loading will make it take longer for the whole page to do
+it's first render.
+
+Looking at the issue description, I quickly determined a possible solution to
+the problem based on the documentation for the Next.js Image:
+```diff
+diff --git a/src/app/_components/welcome.tsx b/src/app/_components/welcome.tsx
+index 7163264..3a35b42 100644
+--- a/src/app/_components/welcome.tsx
++++ b/src/app/_components/welcome.tsx
+@@ -34,6 +34,7 @@ export default function WelcomePopup() {
+               alt="banner"
+               height={1201}
+               width={630}
++              loading="eager"
+             />
+           </div>
+           <div className=" h-3 w-full bg-linear-to-b from-[#e1ecf7] to-[#e1ecf700]" />
+```
+After writing this solution, I ran the lighthouse performance test again, and
+found that I had significantly improved the performance compared to before, so
+I submitted a PR for it, which then got merged.
+![A GitHub PR. I comment "For #109 It might also be a good idea to eagerly load the map too, but I don't know if it'll make as big of a difference because it might not be on the screen. hiromon0125 comments "oh i just merged without properly reviewing it lol, but this is good."](../assets/images/acl2809/pr.png)