サービスを運営しているとサイトのページ表示速度を改善する業務がついてまわります。
今回は、「たとえ１点でもページのスコアをあげたい！」と思い様々な対策を行いました。
ただ、私自身バックエンドのエンジニアではないので、フロントサイドでできる対策についてご紹介できればと思います。
サイトページの表示速度を上げるのは、
- ユーザビリティを改善し、SEOの順位を上げるため
- ユーザーさんにストレスなく、サイトを閲覧・利用してもらうため
などが主な理由だと思います。
サイトスピードを確認、改善する際に便利なツール「PageSpeed Insights」というものがあります。
調べたいサイトのURLを検索ボックスに入力することでサイト表示速度のスコアを調べられるものになっています。
ページは下記の3段階評価 + 点数 で評価されます。
（３段階評価は、最近出るようになりました。）
- Good
- Needs Work
- Poor
またこのツールを使うことで改善すべきポイントを示してくれます。
その① 画像を圧縮する
一番簡単にできる対策が画像の圧縮です。
検索すれば画像を圧縮してくれるWebツールがたくさん出てきます。
その中で圧縮したい画像にあったツールを選び、画像をアップロード圧縮を行うことで素材画像の容量を抑えることができます。
もちろん圧縮しすぎると、画質が悪くなることがあるので注意が必要です。
画像圧縮する際の有名なサービスとして以下のようなサイトがあります。
素材画像が大きすぎる場合はそのまま圧縮するのではなく、一度サイズを落としてから圧縮を行うと良いと思います。
しかし、画像の圧縮を行なったにもかかわらず、「画像の最適化」を求められることがあります。
要因は、
- ブラウザのキャッシュで残っている画像が反応している
- PageSpeed Insightsの基準に圧縮が行われていない（圧縮が足りてない）
などがあげられるます。
そんなこともあり、どうすれば良いかと悩んでいたところ・・・。
見つけました！
PageSpeed Insightsには素晴らしい機能があります。（▼ページの下部イメージ画像）
「画像、JavaScript、CSS リソース」のリンク部分をクリックすることで最適化された素材がダウンロードすることができます。
サイト内にgif形式の画像が存在する場合、gif画像はpng形式に変換されてしまうので注意が必要です。
それ以外は大きな問題はないと思います。
その② レンダリングブロックの排除
対策としては「非同期で読み込ませること」です。
具体的には
javascriptの場合：scriptタグにasyncを記述する。
<script src="http://hogehost.com/hoge-hoge.js" async></script>
cssの場合：htmlの閉じタグの後で読み込む
</body>
</html>
<link rel="stylesheet" href="abc.css">
上記の２つの対策でレンダリングブロックは排除することができると思います。
ただ、htmlタグの後ろでcssを読み込むと一瞬サイトの表示が崩れて表示されることがあります。
これを回避するために「Critical CSS」という手法を用います。
「Critical CSS」とは
クリティカルパスCSSなどとも呼ばれている、CSSにおけるブラウザ表示パフォーマンスを上げるために手法です。
外部ファイルで読み込まれているCSSの中から必要な分のスタイルをHTMLにインライン化することをいいます。
.default-color {
color: #333;
}
.main-color {
color: #dd171f;
}
.point-color {
color: #ec7405;
}
上記のcssの中から該当ページに必要なcssのみをインライン化します。
<meta charset="UTF-8">
<title>Document</title>
<style>
.default-color {
color: #333;
}
</style>
</head>
<body>
こんな感じです。
下記のサイトを利用すると該当するページにインライン化すべきCSSを抽出してくれるので便利です。
Critical Path CSS Generator
その③ gif画像問題の解決策
gif画像は上手く圧縮できない上に「画像の最適化」の対象となるためとても厄介でした。
「全部pngに変えちゃえば良くない？」
と思われるかもしれないですが、サイト全体で同じ画像が使用されているため無闇に変更ができませんでした。
そこで今回はphpの「base64_encode」を使用しました。
$img = base64_encode(file_get_contents($url, false, stream_context_create($arrContextOptions)));
サーバーから取得してきた画像をbase64文字列に変換します。
<img src="data:image/gif;base64,<?php echo $img; ?>" alt="" width="" height="">
imgタグのsrc属性に出力することで画像を表示することができます。
画像データを一度データ化することでこの問題を回避しました。
まとめ
上記で行った対策は必ずしも最善ではないと思います。
gif画像に対する対策もPageSpeed Insightsの検知されなくなりますが、根本的な解決とは言えません。
これからもユーザビリティの改善のためサイトの表示速度を気にしていかなければならないと思います。
今後もより最善の方法を模索していきたいと思います。
また、ユーザーさんにストレスなくサイトをご利用いただけるように努めて参ります。
最後までご覧いただき、ありがとうございました。