サイトパフォーマンスを改善するためのTipsを紹介します。
実際に改善するかはサイトの状況によるので1つの手法として受け取っていただけたら幸いです。
【こんな方にオススメ！】
・パフォーマンスを低下している原因がわからず打ち手がない…
・あまり工数がかけられないので、改善が滞っている…
小さなことですが意外な改善効果が見込めるかもしれませんのでよろしければ一読ください！
画像の最適化
imgタグに属性を付与することでメインスレッドのブロックを抑えられます。
loading="lazy"
画像がビューポートに達するまで画像の読み込みを遅延させます。
それによりレンダリングブロックを防ぐのでファーストビューに入らない画像にはloading="lazy"を付与することでコンテンツのパフォーマンスを向上できます。
loading="lazy"の対応状況は下記の通りです。
対応状況からおおよそのブラウザには対応していますが、Safariには対応できてないので
decoding="async"
画像を非同期的に読み込みます。
非同期的に読み込みレンダリングブロックを防ぐことでパフォーマンスの向上が期待できます。
decoding="async"の対応状況は以下の通りです。
現在のブラウザシェア(日本)は下記の通りでした。
どんなサイドでもモバイルユーザーの方が多いと仮定するとdecoding="async"をつけておく方が無難な気がします。
ファーストビューはdecoding、それ以外はloadingをつける運用が良いと思いました！
decodingとloadingは併用することが可能です。
ただ、スクロールで対象画像の位置に達したとしてもdecodingが終わるまでは画像が表示されないことが発生するそうなので検討の必要はありそうです…。
画像をWebPにする
画像の圧縮はもちろんですが、最新のフォーマットであるWebP形式にすることです。
全てを一度に置き変えることは難しいと思いますが、メインのページからでも置き換えていくのも良いと思います。
フォントの最適化
日本語も含まれるフォントファイルは意外にページパフォーマンスのネックになることがあります。
最小フォーマットを使用することやサブセット化することでファイルサイズを減らし読み込みの負担を減らせます。
フォントファイルの最新フォーマットを使う
一番軽いとされるのがwoff2でフォーマットされたファイルです。
IEに対応する必要がなければwoff2だけで十分なことがわかるのでもしそれ以外のフォーマットを読み込んでいるのであれば改善ポイントだと考えます。
@font-faseを使ってフォントファイルの読み込みを指定します。
リスト内で始めに定義されたフォーマットを読み込むので記述の順番には注意して下さい。
@font-face {
font-family: 'hoge';
src: url('hoge.woff2') format('woff2'),
url('hoge.woff') format('woff');
font-display: swap;
}
font-displayが指定されていないとフォントのダウンロードしている間文字が表示されなくなってしまうので必ず指定してください。値はいくつかありますがswapの指定が無難だと考えています。
font-displayの説明は下記の記事が分かりやすかったです。
フォントのサブセット化
フォントのサブセット化とは、必要な分だけを分離して小さいファイルにして先に読み込むことを言います。
フォントをサブセットするには下記のwebサービスを利用するのが良いと思います。
日本語の場合は考慮すべきことが多いので効果のほどはやってみないとわかりませんが、パフォーマンス改善の手立ての1つとして検討されても良いと考えます。
CSSやJavaScriptへの対策
レガシーなサイトではCSSやJavaScriptはサイトパフォーマンスの悪化の原因になることが多いです。
肥大がしたCSSやJavaScriptへの対策のヒントにしていただければと思います。
CSSの分割読み込み
いわゆる「CriticalCSS」と言われる対策です。
必要なCSSを先に読み込んで、それ以外は後で読み込むことでレンダリングブロックを防ぎます。
やり方はいろいろありますが、一般的なものはファーストビューのCSSを抽出して<style>タグで<head>の中に記載する方法です。
npmやwebサービス、gulpでも抽出可能です。
状況にあった方法で実施していただければと思います。
時間がかかってもnpmやgulpなどで変更に応じて自動で抽出する仕組みを作ることをオススメします。
自力で抽出して貼り付ける運用は必ず忘れますし、そうなると表示が一瞬くずれてしまうのでCLSの原因になります。
とはいえ自動抽出をレガシーな環境で実現させるのには難しいと思うので、一番簡単なのはwebpackやgulpでファースビューに必要なCSSだけをコンパイルしてhead内で読み込みそれ以外をbodyの閉じタグ付近で読み込ませるのが手軽です。
元のCSSファイルサイズが大きい場合はこれでも十分に効果が出るので試してみてください！
scriptタグにdefer属性の付与
サイトの状況にもよりますが、defer属性をつけるのがベターではないかと考えています。
設定の説明は下記の記事が非常にわかりやすいかったです。
実際試したところbodyの閉じタグ付近で読み込んでいたのですが、さらにタイミングを遅らせられました。
処理の実行が遅れるので、ファーストビューでJSの処理が必要になる場合は考慮が必要です…。
まとめ
まだやっていないことがいくつかあったなら幸いです。
恥ずかしながら画像については盲目的にlazyloadやっとけばとりあえずいいでしょ！って思っていたので盲点でした…。
画像の多いページであればそれほど工数がかからず一定の効果がでると考えています。
レガシーなサイトでは肥大化したCSSやJSに注目しがちですが、フォントや画像も意外に侮れないです。
小さいかもしれませんが積み重ねることで今より10点以上は改善できるのではないかと思います。
一度試してみてください！