AletheiaFact/aletheia

Lazy load commons images and stop fetching them in SSR mode

Open

#1,103 opened on Nov 16, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (19 forks)auto 404
good first issueperformancetech

Repository metrics

Stars
 (53 stars)
PR merge metrics
 (PR metrics pending)

Description

Background Information

From the new relic dashboard we identified that the personality pages have slow outliers and one thing we can do to improve is stop rendering commons images during SSR. Fetching the image takes up to 25% of the loading time, see image below. image

How

Look at the Next.js documentation for lazyloading component. The component that needs to be lazyloaded is AletheiaAvatar.tsx

Contributor guide

Research direction
Follow Next.js documentation on lazy loading components and apply it to AletheiaAvatar.tsx to disable SSR for that component.
Tech stack
typescriptreactnextjs
Domain
frontend
Issue type
Performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Next.jsReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70