サイトの高速化と DM の機能追加について
いつも AORIN をご利用いただきありがとうございます。サイト全体の表示速度を大きく改善する更新を行いました。あわせて、ダイレクトメッセージ（DM）にいくつかの新機能を追加し、サイト全体のデザインも一新しています。
今回は速度の改善が中心のため、何がどう遅かったのか、それをどう直したのかを詳しく書いておきます。
表示速度の改善
これまで何が遅かったのか
AORIN は WordPress で動いています。WordPress はページを表示するたびに、テーマの初期化処理を最初から実行する仕組みになっています。この初期化はどのページを開いても必ず通る場所で、ここが遅いとサイト全体が遅くなります。
AORIN ではこの初期化処理の中に、次のものが紛れ込んでいました。
- 掲載中の Minecraft サーバーが起動しているかどうかを確認する通信
- DM のデータベース定義が最新かどうかの確認
- 設定値を一つずつ個別にデータベースから読み出す処理
特に問題だったのが一つ目です。サーバーの状態確認は外部への通信を伴うため、相手のサーバーが落ちていたり応答が遅かったりすると、タイムアウトするまで待ち続けることになります。しかもこれが、投稿ページでもニュースでも設定画面でも、サーバー一覧と何の関係もないページを開いたときにまで動いていました。
計測したところ、ページの中身を組み立て始める前の段階だけで 3 秒から 8 秒かかっていました。表示が遅かった原因の大半がここです。
初期化処理を整理しました
原因が分かったので、初期化処理から重いものを外しました。
- サーバーの状態確認: ページ表示の経路から完全に切り離し、5 分間隔の定期実行に移しました。表示するときは記録済みの結果を読むだけになります
- DM のデータベース定義の確認: 定義のバージョン番号を記録しておき、更新で番号が変わったときだけ確認するようにしました。通常のアクセスでは何も走りません
- 設定値の読み出し: 初期化で参照する各種のフラグを一つの設定値にまとめ、WordPress が起動時にまとめて読み込む対象に入れました。個別に問い合わせる必要がなくなりました
この結果、ページを組み立て始めるまでの時間が 3 秒から 8 秒だったものが、およそ 45 ミリ秒になりました。AORIN のすべてのページに効いています。
投稿一覧のキャッシュ
投稿一覧は、表示条件が同じであれば誰が見ても同じ内容になります。そこで、組み上がった一覧の HTML をそのまま一時保存して、同じ条件で開かれたときは作り直さずにそれを返すようにしました。保存期間は 10 分です。キーワード検索のときは条件の組み合わせが無限にあるため保存していません。
保存の鍵には、スコープ・言語・端末の種類・エディション・カテゴリ・並び順・表示形式・ページ番号を使っています。
キャッシュで難しいのは、内容が変わったときにどうやって古いものを捨てるかです。条件の組み合わせが数百通りあるため、一つずつ削除して回るのは現実的ではありません。AORIN では鍵の中に世代番号を含めておき、投稿の保存・削除・タグの変更をきっかけにこの番号を一つ進めるようにしました。番号が変われば古い鍵とは二度と一致しなくなるため、実質的に全部まとめて無効化できます。ホームの集計やニュースのタグ別件数も同じ世代番号に乗せているので、新しい投稿が一覧に出てこないということは起きません。
加えて、並び替えやカテゴリの切り替えではページ全体を読み直さず、一覧の部分だけを差し替えるようにしました。一度表示した内容はブラウザ側にも保持しているので、戻るときは通信なしで切り替わります。さらに、ページ送りのリンクにマウスを載せた時点で次のページを裏で読み込んでおくようにしました。
データベースへの問い合わせを減らしました
WordPress では、ユーザー情報や投稿の付加情報を取得する関数を呼ぶたびにデータベースへの問い合わせが発生します。一覧の中で一人ずつ、一件ずつ呼んでいると、表示するものの数だけ問い合わせが積み上がります。
ダッシュボードのフォロワー一覧がまさにその状態でした。オンライン状態・アイコン・認定マーク・プロフィールへのリンクを一人ずつ組み立てており、それぞれが別々に問い合わせを出していました。フォロワーが 100 人いれば、これだけで数百回になります。
表示を始める前に、対象となるユーザーの情報とその付加情報をまとめて読み込み、以降はその結果を使い回す形に変えました。認定マークの判定結果についても同じように、まとめて読み込むようにしています。手元の環境で数えたところ、ユーザー情報の参照は 4 回から 1 回に、判定結果の参照は 6 回から 0 回になりました。人数が増えるほど差が大きくなる部分です。
投稿一覧のサムネイルについても、画像の情報を一件ずつ取得していたものを、先にまとめて読み込むように変えています。
その他のページ
- サーバー一覧: サーバーごとに状態を問い合わせていたのを、まとめて一度に取得する方式に変えました。まだ結果が来ていないサーバーは読み込み中の表示になり、届き次第その場で切り替わります
- ホーム: 投稿数やタグの集計を 10 分間保存するようにしました
- ニュース: タグごとの記事数の集計を 10 分間保存するようにしました
- タイムライン: 投稿・コメント・画像・新規ユーザーを集める処理を一つにまとめ、3 分間保存するようにしました。以前は表示のたびに画像を 300 件取得し、その一件ずつについて元の投稿を調べ直していました
- 設定: ツアーの背景で毎回走っていたランダム並べ替えを 10 分間保存するようにしました
ダイレクトメッセージの改善
DM は「読み込み中のぐるぐるが長い」「画像がなかなか出ない」という声をいただいていました。今回まとめて手を入れています。
開いた直後の待ち時間をなくしました
これまでは、DM のページを開いてから会話一覧を取りに行き、それが返ってきてから最初の会話を取りに行く、という順番でした。表示までに通信が二往復する形です。
会話一覧と最初のメッセージをページ自体に埋め込んで送るようにしました。開いた時点ですでに手元にあるので、通信を待たずにそのまま表示されます。
会話一覧を作る処理そのものも直しました。以前は会話の相手ごとに未読件数を数えるクエリを投げていたため、会話が 20 件あれば 20 回の問い合わせになっていました。これを一回の集計クエリにまとめ、相手のユーザー情報もまとめて取得するようにしています。
通信を 1 本にまとめました
チャット画面を開いている間は、新着の確認のために定期的にサーバーへ問い合わせています。ここが以前は 4 本に分かれていました。
- 新着メッセージの確認: 3 秒ごと
- 相手が入力中かどうかの確認: 1.5 秒ごと
- リアクションの確認: 5 秒ごと
- 既読状態の確認: 10 秒ごと
単純に合計すると 1 分あたり約 78 回の通信です。開いているだけで回線とサーバーの両方に負荷がかかり、結果として一つひとつの応答も遅くなっていました。
これを 3 秒ごとの 1 本にまとめ、新着・入力中・既読・リアクションを同じ応答でまとめて受け取るように変えました。1 分あたり 20 回になります。加えて、タブが裏に回っている間は問い合わせを止め、前回の応答がまだ返ってきていないときは次を送らないようにしました。他のタブを見ている間の通信はゼロです。
画像の表示を速くしました
これまでは送信された画像をそのままチャットに表示していました。スマートフォンで撮影した写真は数 MB になることもあり、表示までに時間がかかっていました。
アップロードの時点で、長辺 1600 ピクセルの WebP を表示用として別に生成するようにしました。チャットの中ではこちらを表示し、画像をタップして拡大したときだけ元のファイルを読み込みます。アニメーション GIF と、もともと小さい画像は変換せずそのまま使います。画面に入るまで読み込まない設定も入れたので、会話をさかのぼったときの負荷も下がっています。
ファイルのドロップと貼り付けで添付できます
チャット画面にファイルをドラッグして落とすと、そのまま添付されるようになりました。画面全体が受け取り先になるので、細かく位置を合わせる必要はありません。
クリップボードからの貼り付けにも対応しました。スクリーンショットを撮ってそのまま貼り付ければ添付されます。
デザインを一新しました
ページごとに色や形がバラバラだったため、サイト全体のデザインを見直して統一しました。ホーム、投稿一覧、サーバー一覧、ニュース、タイムライン、公式配布・一般配布の一覧、設定、プロフィールページなど、ほぼ全てのページが対象です。ダークモードの色も揃えました。
スマートフォンでは、横スクロールしていたフィルターのボタンをドロップダウンに変えています。
その他の変更
- 運営が固定したタグは、投稿者が編集画面で外して更新しても自動的に付け直されるようになりました
- 鉄道に関する投稿でタグが付いていない場合、確認画面の前に一度だけ確認するようになりました。
- 通報された投稿を運営が削除する際に、理由を選んで投稿者へお知らせを送れるようになりました
- 投稿ページのバージョン履歴を一枚の表にまとめました
- 投稿一覧の一部のフィルターが機能していなかった問題を修正しました
バグなどの報告について
表示がおかしい、動作が以前と変わってしまった、といった点にお気づきの際は、お問い合わせフォームまたは Discord からお知らせください。
記事の評価をお願いします！