昨年行ったさまざまな現代化プロジェクトにより、FANDOM wikiのデスクトップページの平均的な読み込み時間は2017年末と比べ46%削減されました。しかしそれも氷山の一角に過ぎず、私たちのチームはモバイル版のパフォーマンス向上に向けて重要な取り組みを行っています。私たちは現時点で、モバイルから接続しているユーザーの読み込み時間を数秒早くすることに成功しています。
その経緯をご説明しましょう。
私たちが取った対応策[]
読み込み時間を計測する際、考慮に入れるべきいくつかのファクターがあります。その中でも以下の2つは、モバイルとデスクトップの双方にとって重要な要素になります。
- First Meaningful Paint（最初に表示される意味のある内容）：ページの「切れ目」よりも上、すなわちスクロールせずとも最初に目に入ってくる部分に配置された、そのページにおけるメイン要素が読み込まれるまでの時間。
- Time to Interactive（相互作用が可能になるまでの時間）：そのページを開いた目的である相互作用や、コンテンツの消化ができるようになるまでの時間。
これら2つの向上を図るべく、私たちは多種多様な改善に取り組みました。以下に挙げる通り、既に達成済みのものもあります：
- 活発に使われていないコードを取り除き、モバイルのレイアウトを広範囲に渡って再構築しました。例えば、CSSおよびJSファイルは読み込み時間削減のため大幅にサイズを減らしました。
- ページの読み込みの順序を調整し、最も役に立つ内容を先に表示するようにしました。
- 画像サムネイルのプロバイダーとの関係を始め、“dependencies”（相互関係）と呼ばれる仕組みの最適化を行い、画像の表示を早くしました。
これらの取り組みは、利用者全員にとって有意義な結果に終わりました。以下に、現在の新しいモバイル・エクスペリエンスと、2018年が始まった当時のものの比較動画を掲載しています。この動画は Moto G4 phoneの3Gネットワークで録画されたものです。
結果[]
私たちはさまざまなページで改善点のテストを行いましたが、以下の2点はほとんどのページに共通して見られる内容で、皆さんのモバイル・エクスペリエンスの向上につながっています。
- First Meaningful Paintは60%早くなり、2.8秒から1.1秒に。
- Time to Interactiveは51%早くなり、7秒から3.4秒に。
また、これはモバイル版のwikiに限ったことではありません！ FANDOM editorialやディスカッションも、モバイルやデスクトップと同様に読み込みが早くなりました。モバイル、およびデスクトップにおける2017年の取り組みの結果、全サイト上の読み込み時間は昨年と比べて大幅に早くなりました。
成果と次なるステップ[]
サイトの読み込み時間の削減がもたらす利益は、ユーザーエクスペリエンスの快適化だけには留まりません。同時に、ユーザーが皆さんのコンテンツに費やす時間が長くなることを意味します。私たちが集めたデータから、ページの読み込み時間が短いほど、訪問回数ごとのページビューが増加することが明らかになっています。
もちろん、私たちはこれで満足しているわけではありません――満足する時が来るかは分かりませんが――さらなる向上に向けて計画を進めています：
- ページ上で一番最初に表示される画像の読み込み時間削減、記事部分の読み込み順の単純化、ページ間の移動の快適化に取り組んでいます。
- 広告およびその読み込み時間に関し、さらなる改善を図れないか検討中です。
- サーチエンジンによるクローリングについて研究を進め、検索結果をより高くする方法を模索する予定です。
昨年行ったwikiの現代化の取り組みに加え、ディスカッションとFANDOM editorialの読み込み時間削減により、モバイルユーザーはFANDOMの広範囲のコンテンツにアクセスしやすくなりました。モバイル現代化の試みはまだまだ続きます。次のアップデートの報告を楽しみにしていてください！
- 本ブログは英語版のTurbocharging the Mobile Experienceを翻訳したものです