自社WEBサイトのパフォーマンステスト

MotherHeadsのディレクションとデザインを担当しているDJKazuです。今回、自社のWEBサイトをリニューアルいたしましたので、そのWEBサイトがどれだけのパファーマンスがでているのかをチェックしました。WEBサイトを制作をしたら必ずやるテストだと思います。弊社では必ずやります。今回はクライアントワークでは題材にできないのですが今回は自社サイトなのでなにもしない状態からを検証して、どのように改善していったことをここで発表できるのではないかと思って、改善工程をあえて踏んでみました。なにもしない状態から改善までやった結果を発表したいという軽い気持ちのはずが「限界に挑戦」というカタチになりました。というわけで今回は如何にしてパフォーマンスをあげていったのかを経緯として綴ってみました。自社サイトなので、ぶっちゃけた内容でおおくりいたします。楽しんで読んでいだければ幸いです。

自社サイトの構成について

PCでのWEBサイト構成について

PCでの場合はメインビュジュアルが動画であること、さらに動画の上でSVGでMotherHeadsのロゴと名前を書くように走らせています。ニュースはテキストのみ、サービス内容はPNG画像とテキスト（背景画像あり）、WEBパックはJPG画像とテキスト、制作実績はJPG画像とテキスト（背景画像あり）、ブログはJPG画像とテキスト、フッター部分はテキストのみとなります。JSに関してはヘッダーがメインビュジュアル以降下がると固定、ページトップがある、動画部分は読み込まれたら動画スタートでSVGが走って表現するという内容になっています。

SPでのWEBサイト構成について

SPでの場合はメインビュジュアルが静止画のJPG画像になり動画は読み込まれないようにJSで制御してします。SVGはMotherHeadsのロゴと名前が書くように走りサブ見出しがフェードで浮かび上がります。ニュースはテキストのみ、サービス内容はPNG画像とテキスト（背景画像あり）、WEBサイトパックはJPG画像とテキストですがカルーセル（スライダー）になり、制作実績はJPG画像とテキスト（背景画像あり）、ブログはJPG画像とテキスト、フッター部分はテキストのみとなります。

懸念点について

こういった仕様になっています。JSに関して負荷があると思われるところはPCの動画とSVG部分、SPの動画を読み込み停止、SVG部分、カルーセルの出現ではないかと思っていました。このぐらいではないかと思っていました。

初回の結果発表

想定外の結果に

まずテストをするときはPageSpeedInsightsを使います。

ん？と固まりました。SEOとAcceasibiityはもちろんやっていますので大丈夫と思っていましたがPefomanceが思っていたより低くないかと思いました。そのあとに押し寄せる感情は「これは低すぎるだろう！！」となりましたね。なにもしないとここまで低いということに驚きました。
というわけで、PageSpeedInsightのいうとおり改善していってみましょう。

改善の方法とは

画像圧縮の改善

画像圧縮サイトでJPGやPNGの画像が圧縮できて便利です。
使い方は圧縮したい画像をドラッグ＆ドロップするだけで自動的に圧縮してくれます。あとはダウンロードするだけです。
画像選定を気をつけてやらないと、必要以上に圧縮されてせっかくの画像が荒くなったりします。画像圧縮後に再テストすると劇的に変わりました。画像圧縮は、かなり効果はあります。

ソースコードの改善

<a href="<?php the_permalink(); ?>">
  <p class="image"><?php
  if(has_post_thumbnail()) {
    the_post_thumbnail("medium");
  } else {
    echo '<img src="' . get_template_directory_uri() . '/img/works_no_img.png" alt="No Image">';
  }
  ?></p>
  <h3 class="js-mh-worksTitle"><?php the_title(); ?></h3>
</a>

パフォーマンス設定では「medium」にしています。「full」と「medium」ではだいぶかわってきます。テストで「full」でも試しましたが「medium」と違いました。上記の画像圧縮に伴い、ファイルサイズはクリティカルに効きます。 ファイルサイズは正義とも言えます。このときのテストの画像をとっていなかったので割愛させていただきます。

あえてやっていないこと

PageSpeedInsightで問題がある箇所を調べるとでてくる「オフスクリーン画像の遅延読み込み」、「次世代フォーマットでの画像の配信」などがあります。
問題視するのはこの2つに注力を注ぎこんだほうがいいと思われます。それ以外の項目は工数がかかる割にはパフォーマンス向上の改善には微々たる数値しかないので、あまり貢献しないと思います。

ファイルの圧縮について

弊社ではCSSファイルやJSファイルの圧縮はgulpを使っていますので既に完了しています。
他での方法で圧縮したい方はこちらを使えばいいと思います。
CSSの圧縮
https://cssminifier.com/
JavaScriptの圧縮
https://jscompress.com/

「オフスクリーン画像の遅延読み込み」について

「オフスクリーン画像の遅延読み込み」ではlazyというjQueryを使って改善するというのがよくでてきます。弊社では対応していません。無駄にjQueryのライブラリを追加して逆に遅くなるのを嫌うからです。ただlazyはGoogleが認めているケースもあるような噂は聞いています。

「次世代フォーマットでの画像の配信」について

「次世代フォーマットでの画像の配信」では画像の書き出し形式をJPEG 2000、JPEG XR、WebPなどにすることでJPEGやPNGより圧縮率が高く、読み込み時のダウンロード時間やデータ使用量を抑えることができるので推奨してきます。弊社ではまだ対応していません。
対処方法としてはpictureタグにしてすることまでは調べていますが、自社ではしていません。運用時に画像制作や登録の手間がかかるためです。純粋に運用をしてのパフォーマンスを計測したいからです。調査はしたのでやり方だけは記載しておきます。

画像フォーマットの改善

WebP（ウェッピー）という画像フォーマットにすることにしました。
Googleが開発している次世代の静止画フォーマットであるからでした。今回のPageSpeedInsightがGoogleの中でのテストでもあるということもあり、世のシェアと影響力の関係からGoogleのWebPが主流になるのではないかという見解でみています。ファイルの拡張子は「.webp」となります。詳しくはWebPの効果が記載されています。
Google Developers「WebP Gallery」
他の理由としては、ブラウザ対応がより多くしていた。
Can I useで確認しました。
圧縮に関してもWebPによりPNG画像で約26%（可逆圧縮）、JPEG画像で約25から34%（非可逆圧縮）容量を小さくできるとしているということもあり他のフォーマットよりもパフォーマンスがいいのでWebPがいいのだろうと感じています。

WebPの書き出し方法

Photoshopではプラグインをいれないと使えません。そこでWebPプラグインを使います。アプリケーションのPhotoshopのPlug-ins中にいれるだけでなので簡単です。
github.com
https://github.com/fnordware/AdobeWebM

WebPのコードの書き方

<picture>
   <source type="image/webp" srcset="sample.webp" />
   <img src="sample.png" />
</picture>

WebPを使うときは、対応ブラウザにはWebP画像を表示させ未対応ブラウザに対してはJPEG、PNGの画像を表示させるためのpicture要素を使った記述方法があります。以下のように記述することでWebP対応のブラウザに対しては、WebP画像が優先されて表示されます。Safariは対応していないのでJPEG、PNGの画像が表示されます。

ここまでの経過

ということで、ここまでの結果発表になります。

画像の圧縮、ファイルサイズ、コード修正でPefomanceは大幅に改善されました。工数はかからずに、これだけの改善ができました。これは対応する価値はあります。

最終仕上げ

さらに絞りあげてみた結果

普段使われない翻訳ファイルをキャッシュ化しました。これで最終ここまでのパフォーマンスをただき出せました。大幅改善です。参考にやってみてください。

最後に

長くなったのでまとめます。自社でおこなったのは画像ファイルの圧縮を重点的におこない、ファイルサイズの改善、ソースコードの圧縮、ファイルのキャッシュとなります。
結果として、あまり工数をかけずにPageSpeedInsightでのスピード改善はできることができました。普段の制作の対応の中でスピード対応はできていました。また画像圧縮やソースコードに関しては通常の制作でしていることなので問題はありませんでした。
スピードも大切ですが、弊社では制作部分のスピードやフロー、品質のクオリティーを重視しています。ここの部分はクリアしておかないとスピードテストなんて言っていられません。制作スピードと品質の担保ができるように弊社では常に心がけています。