배경
제 포럼은 재미있는 배너 시리즈를 순환하며 게시하는 것으로 유명합니다. 방문 사이사이 또는 사용자가 새로고침을 수행할 때 무작위로 다른 배너를 표시하도록 해주는 제가 사용하는 플러그인을 소개합니다.
설치 방법
| 요약 | 목록에서 무작위로 선택된 배너를 추가합니다. | |
| 저장소 | GitHub - ScottMastro/discourse-randomized-banner: Randomized Discourse Banner Plugin · GitHub | |
| 설치 가이드 | Discourse에 플러그인 설치하는 방법 |
플러그인 옵션
무작위로 표시될 배너 이미지는 banner images 설정에 포함됩니다. 게스트(로그인되지 않은 사용자)에게 고유한 정적 배너를 표시하려면 guest banner 설정에 추가하세요. 모든 사용자에게 정적 배너를 표시하려면 override banner 설정을 사용하세요.
SEO에 미치는 영향
이 플러그인의 무작위성으로 인해 배너가 동적으로 변경되므로, 무리한 구현 방식은 무작위 배너를 너무 늦게 삽입하여 가장 큰 콘텐츠 페인트(LCP) 측정치가 높아지거나 콘텐츠 레이아웃 시프트(CLS)를 유발할 수 있습니다.
LCP의 경우, optimize lcp 옵션은 게스트 배너와 오버라이드 배너(존재하는 경우)를 미리 불러오도록 하여 더 빠르게 렌더링되도록 합니다. 사용하지 않을 수 있는 자산을 미리 불러오는 것을 최소화하기 위해 무작위 배너는 미리 불러오지 않습니다. 배너 다운로드 시간을 최소화하기 위해 배너 파일 크기를 작게 유지하는 것이 중요합니다.
참고
제 포럼에서는 LCP를 적절한 수준으로 유지하고 있지만, 2MB보다 작은 배너를 사용하고 CDN을 이용합니다. 또한 게스트 배너 크기를 약 200KB로 설정했습니다. 하지만 이 글을 작성하기 직전에 플러그인 구현 방식을 변경했습니다. LCP 문제가 발생해서는 안 되지만 보장은 없습니다. LCP를 모니터링할 계획입니다. 신중하게 사용해 주세요.
CLS의 경우, HTML에서 이미지 크기를 사전에 정의함으로써 콘텐츠 시프트를 방지합니다. 배너를 담는 div를 렌더링하려면 banner aspect ratio가 사전에 필요합니다. 따라서 모든 무작위 배너의 종횡비가 대략 동일하도록 하세요. 다른 종횡비의 배너는 늘어지거나 축소되어 조정됩니다.


