Smartphone スマホ

 
スマホタブレット

Start Renderの重要性に気付いてる?

Start Renderの重要性

サイトが表示されるまでに5秒以上かかると売り上げが1%下がるというデータがあるように、表示速度は重要な指標として浸透しつつあります。表示速度を上げるためには、サーバーとの通信を見直したり、ページ容量の削減などで改善することができますが、それだけでは不十分といえます。
そこで今回は、表示速度の中でも体感として分かる「Start Render」について紹介します。

Start Renderとは?

Start Renderとは、空白ページからコンテンツが初めて表示されるまでの時間をいいます。
例えば、全体の読み込みが終わってからコンテンツが表示されるまで5秒かかるサイトと、全体の読み込みに8秒かかってしまうが、1秒で最初のコンテンツが表示されるサイトでは、どちらが早く表示されていると感じますか? 恐らく、ほとんどの方が後者と答えるはずです。
つまり、表示速度の改善を行う場合には「Start Render」にも意識を持つ必要があります。

Start Renderを調べる

Start RenderはWebPagetestで簡単に調べることができます。

スクリーンショット 2015-11-11 16.28.59

上表は弊社のスマホサイトで計測した結果になりますが、空白ページから最初のコンテンツが表示されるまで3.09秒かかっていることが分かります。また、再訪問の場合には端末にキャッシュが残っていますので、2.29秒と若干早くなっています。
次に、視覚的に分かりやすい「filmstrip」を使って、どのように表示されているのかを確認してみましょう。

filmstrip

filmstripでは、0.5秒ごとのスクリーンキャプチャを確認することができます。上図から、3.0〜3.5秒の間にコンテンツ全体の38%が表示されている状態だということが分かります。

Start Renderをより早くするためには

コンテンツを早く表示させるためには、フロントエンドだけではなくバックエンドも含めた改善が必要になります。ただ、そこまで手が回らない方も多いと思いますので、まずはフロント側だけで出来ることを紹介します。

1.CSS/JavaScriptのインライン化
インライン化は、ファイル管理やソースコードを煩雑にしてしまう点から避けられてきましたが、表示速度を早めるためには有効な手段です。
注意点としては、読み込まれるすべてのファイルをインライン化するのではなく、ファーストビューに必要な部分のみ抜き出してインライン化しましょう。これにより、ファイルを読み込んでから実行するよりも早く処理することができます。

2.JavaScript、画像の圧縮
JavaScriptはgzipで圧縮したりminify化することで容量を削減することができ、画像もPNG、JPGであれば圧縮をかけたり、別の拡張子に変更することで軽くすることができます。具体的な方法については、以下の記事で紹介していますので確認してみてください。

知っていると便利! 圧縮変換サイト3選+1
「gzip」でWebサイトを軽量・高速化!

最後に

表示速度が早いサイトと認識してもらうには、5秒ギリギリで綺麗に表示されても意味はありません。段階的でも何かしらのコンテンツが表示される方が体感的には早いと感じるものです。もし、これから表示速度の改善を行う予定がありましたら「Start Render」を意識して見直してみてはいかがでしょうか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事