ランダムバナー

背景

私のフォーラムは、ローテーションされる楽しいバナーのシリーズで知られています。これは、訪問ごと、またはユーザーがリフレッシュを実行したときに異なるバナーをランダムに表示できるようにするために使用しているプラグインです。

インストール方法

|||
|-|-|-|
| :information_source: | 概要 | リストからランダムに選択されたバナーを追加します。
| :hammer_and_wrench:|リポジトリ| GitHub - ScottMastro/discourse-randomized-banner: Randomized Discourse Banner Plugin |
|:open_book: | インストールガイド | Discourseにプラグインをインストールする方法 |


:down_arrow: リフレッシュ :down_arrow:


プラグインオプション

ランダム化されるバナー画像は、banner images設定に含まれています。ゲスト(ログインしていないユーザー)にユニークな静的バナーを表示するには、guest banner設定に追加します。すべてのユーザーに静的バナーを表示するには、override banner設定を使用します。

SEOへの影響

このプラグインのランダムな性質によりバナーが動的になるため、単純な実装ではバナーが表示されるのが遅くなり、Largest Contentful Paint(LCP)の測定値が高くなり、Content Layout Shift(CLS)が発生する可能性があります。

LCPについては、optimize lcpオプションがゲストバナーとオーバーライドバナー(存在する場合)をプリロードし、より速く描画されるようにします。ランダムバナーは、使用されないアセットのプリロードを最小限に抑えるためにプリロードされません。バナーのダウンロード時間を最小限に抑えるために、バナーのファイルサイズを小さく保つことが重要です。

注意
私は自分のフォーラムでLCPを十分なレベルに抑えていますが、バナーのサイズは2MB未満を使用し、CDNを使用しています。また、ゲストバナーは約200KBにしました。しかし、この投稿を入力する直前にプラグインの実装を変更しました。LCPの問題はないはずですが、保証はありません。LCPを監視する予定です。注意して使用してください。

CLSについては、HTMLで事前に画像サイズを定義することで、コンテンツシフトが回避されます。バナーを保持するdivを描画するには、事前にbanner aspect ratioが必要です。したがって、すべてのランダムバナーがほぼ同じアスペクト比を持つようにしたいはずです。他の比率は、引き伸ばされたり縮小されたりすることで対応されます。

「いいね!」 11

これは素晴らしいですね。探していたものにぴったりかもしれません!

質問があります。バナーの画像サイズに特別な要件や推奨事項はありますか?高さはもう少し低くしたいと考えています。それは問題になりますか?

「いいね!」 1

幅を100%で表示し、アスペクト比パラメータで高さを決定します。これにより、バナーがダウンロードされる前にバナーが表示されるスペースを確保でき、ページが突然シフトするのを防ぎます。

したがって、アスペクト比パラメータを変更して高さを小さくすることができます。

「いいね!」 2