Why do we need this improvement?

Description:
The current conference website loads all images upfront, regardless of whether they are visible in the user’s viewport. This approach can slow down initial page load times, especially for users on slower connections.

Implementing lazy loading ensures that images are loaded only when they come into view, improving performance and reducing unnecessary bandwidth usage.

How will this change help?

Lazy loading will:

Speed up page load by only loading images when they’re visible.
Reduce bandwidth for users, especially on slow or mobile connections.
Improve SEO via better Core Web Vitals scores.
Enhance user experience with faster, more responsive pages.

Screenshots

No response

How could it be implemented/designed?

Proposed Solution:
Use the native HTML loading="lazy" attribute for images where possible.
For browsers that don’t fully support native lazy loading, add a small JavaScript fallback using IntersectionObserver.
Ensure all critical images (e.g., logos, above-the-fold content) remain eagerly loaded.

Acceptance Criteria:
Images below the fold load only when scrolled into view.
No visual glitches or delays for visible images.
Verified performance improvement via Lighthouse or WebPageTest before/after comparison.
No broken images in any supported browsers.

🚧 Breaking changes

No

👀 Have you checked for similar open issues?

• I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue?

Yes I am willing to submit a PR!