2015.10.13スマホサイトが重たい理由とは?2008年にApple社からiPhone3Gが発売されてから早7年。その頃のスマホサイトは、テキストベースで飾り気のないサイトが多く見受けられました。今ではアニメーションやパララックスなどを実装したサイトもあり、PCサイトと比べても見劣りしない綺麗なサイトが多数存在します。それに比例して表示速度が遅いサイトも増えてきたように感じませんか?そこで今回は、表示速度が遅いスマホサイトの原因を探っていきたいと思います。画像がスマホサイトを重たくしているSOASTA.Incの調査によると、2011年から2015年にかけてページ容量の平均が約3倍に膨れ上がっていることがわかりました。出典:SOASTA.Inc2011年時点では390KBが平均値であったのに対し、2015年では1,1180KBにまで増えてきました。その背景としては、OSの性能が上がり処理能力が向上したことで、表現できる幅が広がりページ容量が増えてきたことが言えます。実際にどのファイルが増えてきたのでしょうか。出典:SOASTA.IncHTMLやCSSのファイル容量はほぼ変わりませんが、画像が大幅に増えていることが分かります。Retinaディスプレイの登場により、解像度の低い画像は使われなくなり、解像度の高い画像が使われるようになったことで容量が増えていると考えられます。次点でJavaScriptもじわじわと増えてきています。今では一般的になりましたが、アコーディオンやドロワーメニュー、スライダーなどJavaScriptやプラグインで実装され、Ajaxを絡めた動的配信もできるためページ容量の肥大化を助長しています。Webフォントは重い!Adobe社のTypekitや、Google社のWebフォントを使用しているケースもよく見受けられます。フォントが違うだけで印象がガラッと変わりますので、使用しているサイトも多いのではないでしょうか。綺麗なサイトを表現できる反面、表示速度などのパフォーマンスを犠牲にしていることにも目を向けましょう。出典:SOASTA.IncWebフォントは専用のCSSとJavaScript、そして外部ホスティングを要求してしまいます。上図の例を見ると、Webフォントの読み込みだけで約4秒も必要としています。1秒以内のページ表示を推奨されているにも関わらず、ユーザーに4秒以上も待たせてしまうことはユーザーのストレスとなり、すなわちユーザー満足度の低下にもつながってしまいます。最後に表示領域の小さいスマホにとって、綺麗な画像や滑らかな動作はサイトを印象付けるためには必要なものとなってきました。サイトの見栄えだけに重点を置き、パフォーマンスを疎かにすることはユーザー視点で設計していない証拠です。ページ容量を抑えつつ、リッチな見せ方をする技術は年々増えてきていますので、そういった技術を取り入れる柔軟性も必要になってきます。次回はページ容量を抑えるための方法を紹介します。一瞬のひらめきや感動は手のひらから始まっています。新しいクリエイティブのカタチをここから探してみましょう。タグWebフォントスマホサイトページ容量TweetMobify(モビファイ)とはGoogleが認定しているマルチスクリーン対応のための最適化サービス。デバイスに応じ、専用にデザインされたサイトを表示することができます。ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。新しい発見やTIPS、セミナー&イベント企画を募集しています。あなたの力を待っています。