My forum is known for a rotating series of fun banners. Here’s a plugin I use to enable randomly showing different banners between visits or when the user performs a refresh.
|Adds a banner that is randomly chosen from a list.
|GitHub - ScottMastro/discourse-randomized-banner: Randomized Discourse Banner Plugin
|How to install plugins in Discourse
Banner images to be randomized are included in the
banner images setting. To show a guest (user not logged in) a unique static banner, add it to the
guest banner setting. To show all users a static banner, use the
override banner setting.
Since the random nature of this plugin making the banner dynamic, a naive implementation may stick the random banner in to late causing a high Largest Contentful Paint (LCP) measure and may cause a Content Layout Shift (CLS).
For LCP, the
optimize lcp option preloads the guest banner and override banner (if they exist) so they are drawn faster. The randomized banners are not preloaded to minimize preloading assets that aren’t used. It is important to keep the file sizes of your banners smaller to minimize the time to download the banners.
I have kept the LCP down to sufficient levels on my forum, but I try to use banners smaller than 2MB and I use a CDN. I also made my guest banner about 200KB. But I changed the implementation of the plugin right before typing this post. There should not be LCP issues however there’s no guarantee. I plan to monitor my LCP. Please use with caution.
For CLS, content shift is avoided by defining the image size in advance in the HTML. The
banner aspect ratio is needed in advance to draw the div that holds the banner. Therefore, you want all your random banners to have roughly the same aspect ratio. Other ratios will be accommodated by may be stretched or shrunk.