Acl2809 Rit Bus App

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 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 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 --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.