アニメ情報系サービス開発で実践した、体感速度を改善する4つの工夫

はじめに

こんにちは。
個人で「mireruu」というアニメ情報サービスを開発・運用しています。

mireruuは、最新アニメがどの配信サービスやテレビ局で見られるかをひと目で確認できるサービスで、
「どこで何が見られるのか？」という悩みを、少しでも減らすことを目的にしています。
シンプルで直感的なUIと、スムーズな操作感を大切にしており、
特に“体感速度”にはこだわってきました。(まだまだ改善は必要ですが)

今回は、その体感速度を改善するために実際に行った施策の中から、
特に効果が大きかったものを4つご紹介します。

「ページが速い」と感じてもらうために、どんな小さな工夫を積み重ねてきたのか。
自分の経験が、同じようにUXを大切にしている方のヒントになれば嬉しいです。

1. 画像のWebP変換で読み込みを高速化

今回ご紹介する中でも、最も効果を実感できたのがこの施策です。

WebP(うぇっぴー)は画像を高効率で圧縮できるファイル形式で、
対応ブラウザも増えてきたことから最近目にすることが増えてきました。

以下はサンプルとして用意したpng画像です。容量は2.3MBです。

※このイラストはAI（ChatGPT+DALL·E）により生成されたもので、実在の作品やキャラクターとは関係ありません。

これをWebPに圧縮した画像がこちらです。

容量が92KBに圧縮されたにも関わらず、ある程度の表示に耐えうる画質のままです。

mireruuの初期表示では、50作品以上のアニメのキービジュアルを一覧表示するため、
1枚1MB前後のpngやjpgを使うと一度に 50MB前後 の読み込みが必要になりますが、
画像をすべてWebPに圧縮することでその容量を 5MB前後 に抑え、読み込みを高速化させています。

ユーザーがいつでも高速な回線を使えるとは限りません。
だからこそ、4Gなどやや遅めの環境でもサクッと表示されるように工夫しています。

圧縮自体はブラウザのHTMLCanvasElement: toBlob() メソッドを用いて手軽に処理をしています。
(Safariは toBlob('image/webp') に対応していないため、代替手段やフォールバックの用意が必要です)
横幅の最大を750px、品質を0.75に設定することで容量を100kb前後に圧縮しています。

WebP自体はSquooshなどの変換サイトが多くありますので、
試しに様々なパターンで変換をしてみては如何でしょうか。

2. キャッシュ戦略で無駄なリクエストを削減

こちらも定番の手法ですが、定番だけあってその効果は強力です。

サーバーから取得するコンテンツ情報(アニメ情報やキービジュアル)は、
全てキャッシュをする様にしています。
また、リクエストはクエリー単位でキャッシュを設定しているため、
同じ検索を行った際もキャッシュからデータを読み出します。

各情報の取得は概ね300msかかるのですが、
2回目以降の取得は数msで完了するため、
まるでローカルファイルを扱っているような高速体験を実現します。

これはChromeのDevToolsで計測した実際の読み込み時間です。
1行目は初回読み込みで、約250msかかっています。
2行目はリロード時の読み込みで、キャッシュが効いているため1msになっています。

この戦略はサービスの性質によって適用範囲が限られますが、
mireruuは更新頻度の少ない情報系サービスのため殆どのリクエストにキャッシュを設定しています。

3. ローディング表示で体感速度を最適化

出典：https://lukehaas.me/projects/css-loaders/

地味な工夫ではありますが、大きく差を体感できる工夫です。

初期表示など読み込みに時間がかかる場面では、
ローディングを表示し「読み込んでいる状態」を明示しています。

このローディング表示には体感速度を速める効果があるため、
多少時間がかかる処理でもユーザーの「待たされている感」を軽減でき、
ユーザー体験の低下を抑制することができます。

これは同じ画面に対するローディング表示有無の表示サンプルです。
左右を見比べて頂くと、ローディング表示が無い場合は
以下のようなユーザー体験の低下を感じると思います。

• ずっと画面が白いままなのは不安を感じる(壊れているかもしれないなどの不安)
• 2秒未満にも関わらず、待たされている感が強い

また、個人的にはローディングのぐるぐる回る表示を眺めるのは楽しくも感じます。
スマホゲームではよくある演出ですが、
楽しさに重きをおいたローディング表示を実装することで、
待つことすらも楽しさに変換できると思います。

4. 無限スクロールと先読みで“待ち”を感じさせない

一部の画面では必要な情報を全て読み込まず、
無限スクロールで段階的に読み込ませる設計にしています。

無限スクロールを用いた段階的な読み込み設計はユーザー体験の向上につながる工夫ではありますが、
スクロールしきってから読み込みを待つのはあまり気分がよくありません。
そのため、読み込みの発火ポイントを「スクロールが終わる位置よりももっと上」に設定し、
あたかも「もとから読み込み済みだった」ようなユーザー体験を与えるように設計しています。

スクロール監視にはIntersection Observer APIを使用しており、
要素の下部から600px上の位置にスクロールした際に自動でデータ取得を行うよう実装しています。

おわりに

今回紹介したのは、どれも地味な工夫ですが、積み重ねることで確かな効果がありました。
「もう少し速くしたい」と感じている方のヒントになれば嬉しいです。