Discourse Splashのご紹介：サイトアセット読み込み中に表示されるビジュアルプリローダー

お知らせ
,
1

Discourse はシングルページ JavaScript アプリケーションです。

これは、アプリ内でのナビゲーションが非常に高速であることを意味します。最新のウェブアプリケーションのトレードオフは、最初のページビューで読み込まれて解析される必要があることです。サイトアセットの提供方法を最適化するために長年多くの作業を行ってきましたが、デバイス/ネットワークの状況によっては、これが少し遅くなる場合があります。

過去数週間、低速な接続/デバイスのユーザーが最初に遭遇する待機時間を改善するための潜在的な改善策を積極的に作業およびテストしてきました。 このコミットから、Discourse サイトはサイトアセットの読み込み中にスプラッシュスクリーンを表示するようになることをお知らせできることを嬉しく思います。

外観は？

Meta ではしばらくの間これを有効にしていたので、すでに見たことがあるかもしれません。そうでない場合は、次のようになります。

仕組みは？

ユーザーが Discourse サイトを読み込み、Discourse が 2 秒以内に解析されない場合、スプラッシュが表示されます。つまり、接続時間 + 2 秒に基づいています。

高速なデバイス/接続のユーザーにはスプラッシュは表示されません。

どうすれば入手できますか？

これはコアの機能であり、設定はデフォルトで有効になっているため、最新の状態に更新するだけで済みます。万が一、追加した設定を試したが表示されない場合は、splash_screen サイト設定が有効になっていることを確認してください。

メリットは？

低速なデバイス/接続のユーザーに何かを表示することに加えて。この機能は、Discourse サイトでの FCP/LCP の遅延も削減します。Meta で FCP/LCP を追跡するための内部ツールを構築しました。結果は次のとおりです。

dcdaa086b20f9497222327a82e8c22760b1c472b
dcdaa086b20f9497222327a82e8c22760b1c472b1920×996 67.2 KB

その他知っておくべきことはありますか？

スプラッシュに表示される「読み込み中」テキストは、preloader_text 翻訳文字列に基づいています。私たちのコミュニティは素晴らしく、そのテキストはすでに多くの言語に翻訳されています。別のものにしたい場合は、サイトの /admin/customize/site_texts?q=preloader_text でその文字列をカスタマイズできます。

スプラッシュスクリーンはサイトを遅延させることはなく、サイトアセットの読み込み中にのみ表示されます。サイトの準備ができると、スプラッシュスクリーンはすぐに削除されます。サイトの準備ができていることとスプラッシュの削除との間に遅延はありません。

「いいね！」 67
2

Google Search Console に保存されているコアウェブバイタルのデータと、貴社の内部データが一致するかどうか、関心があります。

「いいね！」 6
3

内部メトリクスにはGoogle独自のWeb-Vitalsライブラリを使用しているため、一致します。Search Consoleの情報はフィードバックループが広いため、ソリューションのイテレーションを高速化するために自分でキャプチャしました。

WebPageTestツールを使用して、新しいLCP値を確認することもできます。

「いいね！」 11
4

素晴らしいですね！

オタクっぽい詳細かもしれませんが、ローディングの円の色を変更することは可能ですか？:grin:

「いいね！」 4
5

ローダーを変更したい場合は、こちらがファイルです。

「いいね！」 10
6

スプラッシュは別のCSSスコープに存在するため、残念ながらテーマ経由でCSSを変更することはできません。とはいえ、改善を計画しており、この変更から着手しました。

変更がサイトで有効になると、スプラッシュドットは現在のテーマの色を使用するようになります。

「いいね！」 19
7

そのアニメーションの代わりに、一貫性のためにデフォルトのDiscourseスピナーを表示すべきだと思います。ただの意見ですが。

「いいね！」 2
8

素晴らしい機能ですね。最新のアップグレードで利用できるようになりました。

装飾について気にする前に、ダークテーマと同期させることを優先すべきだと思います。ダークテーマを使用しているときに突然フルスクリーンの白が表示されるのは、暗い部屋にいると目のセンサーへの攻撃も同然です！:face_with_spiral_eyes:

ダークテーマとの一貫性を保つために、サングラスを追加してください。:sunglasses:

「いいね！」 3
9

私の理解では、ダーク背景はすでに同期されていると思いますが、@Johani？

問題は、サーバーがダークテーマを扱っていることを伝えるのに数秒かかる場合があることです。サービスワーカーのマジックで2回目の読み込みを改善できますが、これは非常に非常に難しい問題です。

「いいね！」 4
10

前回投稿以降、気づいた点があります。ログアウトしている場合、Discourse は OS のテーマをダークとして認識し、Discourse サイトもそれに合わせてダークに設定するため、ローディング画面もテーマ スタイリングと同期してダーク背景色を使用します。

しかし、デフォルトでダークテーマが有効になっているユーザーとしてログインすると、ローディング画面は白い画面に戻ります。

したがって、これはすでに 50% 期待どおりに機能していると言っても間違いないかもしれません。:disguised_face:

まだテストしていませんが、誰かが試してくれるかもしれません。

「いいね！」 2
11

はい、本日テストしましたが、このように動作します。ログアウト時には動作し、ログインするとダークテーマが設定されたユーザーとして白い画面にデフォルト設定されます。OSのダークテーマが検出された場合と同じように動作させることができれば、それで完了です。

「いいね！」 4
12

奇妙なことに、OSがライトモードかダークモードに設定されているかどうかに基づいているようで、Discourseは私が期待することと反対のことをします。基本的に、ダークモードに設定するとDiscourseは白く点滅しますが、ライトモードに設定すると、コンテンツが読み込まれるまでDiscourseは暗いページを表示します。

これがダークモードです。ダークで始まり（iOSがサーバーからデータを取得するのを待っています）、白く点滅し（Discourseの初期ページ読み込みだと思います）、次に設定したダークテーマが読み込まれます。

そして、こちらがライトモードです。白で始まり（iOSがサーバーからデータを取得するのを待っています）、暗くなり（Discourseの初期ページ読み込みだと思います）、次に設定したダークテーマのままになります。

「いいね！」 5
13

興味深いですね！動画ありがとうございます。ヨハニが確認して、また報告します。

「いいね！」 7
14

ええ、それです、ビデオでの完璧な例です！

私が狂っていないとわかってよかった！:crazy_face:

「いいね！」 3
17

@Johani 最新のコミットを、修正したと思われるもの、または修正の可能性があるもので更新しましたが、違いがあったかどうかはわかりません（iOS、Safari / macOS Safari）。

私の接続が良すぎるため、簡単に再現できません。ダイヤルアップでも見つけてきます… :rofl:

「いいね！」 3
18

デスクトップでは、ブラウザの開発者ツールを使用して接続をスロットルできます: How to perform Network Throttling in Chrome | BrowserStack

ただし、モバイルブラウザについてはわかりません。

「いいね！」 3
19

Chromeは使用していませんが、xCodeツールを見て、スロットリングを設定します。

もう少し時間が取れたので、同じ状態であることを確認できました。

「いいね！」 3
20

これは、白い点滅に関連している可能性があるため、ここに投稿します。

ライトモードのiPhoneでは、トップバーはダークです。これは、使用しているダークDiscourseレイアウトに一致するため、予想どおりです。

image
image750×1334 137 KB

ダークモードのiPhoneでは、トップバーはライトです。これは予期しないことであり、白い点滅と同様に、レイアウトに関する何かが電話にページが白いと確信させていることを示しているようです。私がそう言う理由は、iPhoneのSafariが、表示しているサイトのメインカラーに合わせてトップバーに着色しようとするためです。

image
image750×1334 136 KB

「いいね！」 4
21

同期していましたが、ユーザーが通常のカラースキームのみをダークに設定した場合を見落としていました。以前は、OSの設定でスプラッシュのライト/ダークモードを選択できるようにOSの環境設定に依存していましたが、これはユーザーが両方設定してOSトグルを使用するという前提でした。

いくつかの修正をプッシュしました。

通常のスキームがダークであれば、それを使用します。ライトであれば、OSのライトモードにはライトスキームを、OSのダークモード（設定されている場合）にはダークスキームを使用します。

この問題と、こちらの問題も

これで修正されたはずです。ご報告ありがとうございました :+1:

「いいね！」 11
22

:+1: クールですね、試すのを楽しみにしています！

提案 - ブランディング

アニメーションドットの上に基本的なロゴのカスタマイズを許可することは可能ですか、または「ドット」をロゴ（fav.icoサイズの画像）または低解像度の固定サイズ（ロードと速度が問題になる場合）で埋めることは可能ですか？

別のユーザーは、Discourseの一般的なアーティファクトであるローディングサークルを返すことを提案しました。これはUI/UXの一貫性のために素晴らしいアイデアだと思います。静的なサイト画像/ロゴを指定することで強化され、ユーザーは limbo のロード状態中に方向感覚を失わず、ユーザーエクスペリエンスとユーザーの信頼を高めることができます。

追加 - fav.ico または「ロゴ小」の既存のブランディング設定から画像を取得するのが良いデフォルトでしょう。

「いいね！」 6