FANDOM


昨年行ったさまざまな現代化プロジェクトにより、FANDOM wikiのデスクトップページの平均的な読み込み時間は2017年末と比べ46%削減されました。しかしそれも氷山の一角に過ぎず、私たちのチームはモバイル版のパフォーマンス向上に向けて重要な取り組みを行っています。私たちは現時点で、モバイルから接続しているユーザーの読み込み時間を数秒早くすることに成功しています。

その経緯をご説明しましょう。

私たちが取った対応策編集

読み込み時間を計測する際、考慮に入れるべきいくつかのファクターがあります。その中でも以下の2つは、モバイルとデスクトップの双方にとって重要な要素になります。

  • First Meaningful Paint(最初に表示される意味のある内容):ページの「切れ目」よりも上、すなわちスクロールせずとも最初に目に入ってくる部分に配置された、そのページにおけるメイン要素が読み込まれるまでの時間。
  • Time to Interactive(相互作用が可能になるまでの時間):そのページを開いた目的である相互作用や、コンテンツの消化ができるようになるまでの時間。

これら2つの向上を図るべく、私たちは多種多様な改善に取り組みました。以下に挙げる通り、既に達成済みのものもあります:

  • 活発に使われていないコードを取り除き、モバイルのレイアウトを広範囲に渡って再構築しました。例えば、CSSおよびJSファイルは読み込み時間削減のため大幅にサイズを減らしました。
  • ページの読み込みの順序を調整し、最も役に立つ内容を先に表示するようにしました。
  • 画像サムネイルのプロバイダーとの関係を始め、“dependencies”(相互関係)と呼ばれる仕組みの最適化を行い、画像の表示を早くしました。

これらの取り組みは、利用者全員にとって有意義な結果に終わりました。以下に、現在の新しいモバイル・エクスペリエンスと、2018年が始まった当時のものの比較動画を掲載しています。この動画は Moto G4 phoneの3Gネットワークで録画されたものです。

MobilePagePerformance

結果編集

私たちはさまざまなページで改善点のテストを行いましたが、以下の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を翻訳したものです