WHO こんな人は高速化できるかも
- フロントエンドの速度を全く気にせず書いている
- 画像の遅延読み込み？やってない
- 600x600くらいの画像がページに20個ほどある
- なんとなくjsはheadに書いている
- なんとなくfont awesomeを使っている
WHAT 何をやったのか
- 個人開発のWebサービスを高速化した
- SpeedCurveを使ってページ読み込みの速度を計測
- 計測結果から、取得に時間がかかっているリソースを探す
- そのリソースに注目して、特にページの表示が始まるまでの（真っ白な）時間を短縮
WHY なぜ高速化？
- 遅いと離脱率が高くなるから
- 色々データがあるみたいですが、とりあえず速くなればOKという考え
手順
では早速やっていきましょう
1. Speed Curveへの登録
まずは、Speed Curveの無料枠に登録しましょう。Speed CurveはWebサイト速度計測ツールです。クレカなしで登録できて、30日間無料です。この登録が簡単で、URLを入れて、メールアドレスとパスワードを入れるだけで登録できます。
2. 計測
左のメニューから、settingsを選択します
Sites > + ADD SITE をクリックして、計測したいサイトを追加するページにとびます。
すると以下のページに飛ぶので、ここで計測したいサイトを追加します
ハンバーガーメニューのdeployから、計測します。
下図の右上の「TEST NOW」を押します
すると、テストするサイトやラベル（テストの名前）を入力するフォームがでてくるので、入力して、「Kick off test now!」を押してテストを開始しましょう。
こんな感じで結果が出ます。何度かテストをすると、前の結果（直前ではない）との比較（x% faster など）がでます。
で、どこをみたらいいの？という話ですが、左のサイドバーにある「improve」を選択しましょう。
「improve」の「performance」をみてみましょう。
「Eliminate render-bloking resources」を見てみましょう。
このリンクをクリックすると、
「Browser waterfall」という項目が出てきます。
これは、サイトが表示されるまでに
- どのファイルが
- どのタイミングで（どの順番で）
- どれくらいの時間で
読み込まれるかがわかるので、それぞれ以下のことがわかります
- どのファイルが: どのファイルがボトルネック（速度低下の主な原因になるもの）になっているか
- どのタイミングで、: 特に、ページの表示が始まるよりも先に読み込まれているかを見ましょう
- どれくらいの時間で: 時間がかかっている＝ボトルネックになっているということです
2. 改善する
それでは、改善しましょう。先ほどの「Browser waterfall」をみます
縦に伸びている線が時系列で重要なポイントを表しています。
実際に、DOM Content Loadedあたりに縦の線が集中していますが、ここがちょうどページが表示され始める部分です。ここまでくると、ユーザにとっては「もうすぐ表示されるな」と思わせることができます。
ここまで来てしまえば、ユーザからはページが見えてきてストレスがなくなってくるので、とりあえずここより後ろは無視します。
逆にここに行き着くまでの速度が非常に重要になってくると考えています。
というわけで、まずはこの「DOM Content Loaded」あたりより前に読み込まれるファイルが少なくなるように改善していきます。
ここのゾーンで読み込まれるファイルには、だいたい以下のようなものがあります。
- cssファイル
- html（imgなどがある場合、画像などを含む）
- 同期的に読み込むjsファイル
cssファイル
基本的に、cssはページの表示が始まった時には適用された状態である必要があります。なので、表示したいページに必要なCSSファイルは先に読み込んでおく必要があります。これは仕方ありません。
html（imgなどがある場合、画像などを含む）
imgタグを含んでいる場合、普通にimgタグを使う場合はページの表示前に画像を読み込んでしまいます。これはかなり速度の低下につながります。
非同期に読み込むようにすることで、 ページを表示しながら画像を読み込んでくれるようになるので、ページの表示開始までの速度が大幅に改善できます。
jsファイル
ページの初期表示に必要のないjsファイル（レイアウトなどに問題を与えないものなど）は、非同期に読み込むことで、ページの表示開始を速くすることができます。
速度を上げる方法
- 非同期で読み込む
- 不要なファイルを削る
- ファイル数を減らす
- ファイルのサイズを小さくする
今回やったこと
1. 画像を非同期読み込みにする
今回は、lazysizesというライブラリを使いました。
https://github.com/aFarkas/lazysizes
導入が簡単で、以下をlazysizes.min.jsとして保存して読み込むだけで使うことができます。
<body>
<!-- 略 -->
<script src="lazysizes.min.js" async=""></script>
</body>
imgタグの書き方を以下のようにちょっと変えるだけで、非同期読み込みが行われます。
<img data-src="image.jpg" class="lazyload" />
これだけで割とスコアが上がるので、ぜひ試してみましょう！
ただ、全ての画像を非同期にしてしまうと、最初にaltの文字が出てしまったり、ちょっとユーザを心配させる挙動になるかもしれないので、リスト表示などの画像や、画面の下の方にあるスクロールしないと見えない画像を非同期にするとよいでしょう。
（この時点でぜひ一度計測をし直してみましょう）
2. 不要なファイル・重複ファイルの削除
サイズの大きいファイルの見つけ方
先ほどの「Browser waterfall」をみると、横方向に緑やオレンジ色のバーが並んでいると思います。これが長いものは、読み込みに大きな時間がかかっています。基本的には、この長くなっているものがサイズの大きいファイルであったり、遅いcdnで読み込んでいたりという感じになります。
僕の場合は、cdnで使っていたfont awesomeが結構大きいファイルになっていました。（この図は改善後ですが）
font awesomeの一部のアイコンだけを使う
ここでは、font awesomeの一部のアイコンだけを使うことでファイルサイズを減らす方法をご紹介します。
といっても、以下のサイトが詳しかったので、これの通りにやればOKです。笑
IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法
http://www.nowhere.co.jp/blog/archives/20170321-191521.html
これで生成されたzipの中にある、fontsフォルダとstyle.cssを同じディレクトリに配置して、htmlファイルでstyle.cssを読み込めば、font awesomeと同じ使い方ができるので簡単です。（<link>タグだけを書き換えればOK）
3. jsの読み込み
非同期で読み込む
https://developers.google.com/speed/docs/insights/BlockingJS?hl=ja によると、以下のようにasync属性をつけるとページの表示を妨げないので、表示速度が速くなります。
<script async src="my.js">
また、defer属性を使うと、jqueryなどの先に読み込みたいものは先に読み込みつつ、ページの表示を妨げないようになるようです。
<script type='text/javascript' src='/js/jquery.min.js' defer></script>
<script type='text/javascript' src='/js/bootstrap.min.js' defer></script>
<script type='text/javascript' src='/js/script.js' defer></script>
読み込み位置を適切にする
恥ずかしい話ですが、jsの読み込みは適当な場所でやっていました。
jsの読み込みは、基本的に閉じタグ </body> の直前に書くのが一般的らしいです。
ブラウザはファイルの上から解釈するので、容量の大きいjsをファイルの上の方で読み込んでしまうと、その後の処理が遅くなってしまうので、閉じタグ </body> の直前に書くとよいらしいです。
（しかしこれに関しては、それほど効果は高くないという話もあります。）
結果
だいたい上記のことを試した結果、以下のように改善されました！（apple iphone7）
ちなみに一番効いたのは、「画像の遅延読み込み」でした。
また、計測値に多少誤差がある感じなので、異常値が出たらもう一回やってみるのもよいかもしれません。
まとめ
- 個人開発のWebサービスを高速化した
- SpeedCurveを使ってページ読み込みの速度を計測した
- ページの表示が始まる前の速度を改善できた
- 特にlazysizesを使った画像の遅延読み込みが