ウェブサイトの表示高速化が注目されるようになり、今回は改めてサイト高速化のためのアプローチを行なっていきたいと思います。当ウェブサイトもフロントエンドの方にこだわりすぎてしまい、なかなかサイト表示高速化に目を向けてきませんでしたが本格的に着手していきます。   前回記事「オンラインツールでウェブサイトのページ表示速度をチェック」ではウェブサイトの表示速度をチェックできるオンラインツールを紹介しました。今回はそれらのツールを使って提案された改善策を順番に見ていきたいと思います。   まずは、PageSpeed InsightsとMobile Website Speed Testing Toolなどのサイト表示スピードツールにて診断を行います。スコアと共に今回は次のような最適化のための改善提案をいただきました。 ・ブラウザのキャッシュを活用する ・gzipでリソースを圧縮する ・サーバーの応答時間を短縮する ・レンダリングをブロックしている JavaScript/CSS を排除する ・画像の最適化   ちなみに下記の施策については既に対応済みだったので今回は省略しました。これらは全てgulpのタスクで処理しています。詳しくは過去記事「gulpをローカルにインストールしてプロジェクト内で使用する」にて紹介しています。 ・CSSの圧縮（minify化） ・javascriptの圧縮（minify化） ・画像の圧縮 それでは改善提案に向けた具体的な施策を行なっていきます。  

「ブラウザのキャッシュを活用する」への対応

apacheを使用している場合には、.htaccessファイルにキャッシュ時間の設定を行います。ただしあまり短いとスコア対象外となるので1週間くらいを設定します。必要なファイルタイプは全て指定しておきます。ただしグーグルアナリティクスを使用している場合には仕様上どうしてもクリアできないので諦めてください、、 【.htaccess】

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 weeks"
  ExpiresByType text/html "access plus 1 weeks"
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpg "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType image/svg+xml "access plus 1 weeks"
  ExpiresByType font/woff "access plus 1 month"
  ExpiresByType application/font-woff "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
</ifModule>

   

gzipでリソースを圧縮する

サイトデータをサーバー側でgzipという技術を使って圧縮させ、クライアント側に送信するようにすることで表示速度が速くなります。こちらも.htaccessファイルに指定することで適用できます。 【.htaccess】

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch bMSIEs(7|8) !no-gzip !gzip-only-text/html
  SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

  gzipで圧縮されているかはブラウザのデベロッパーツールでhttpレスポンスヘッダーの「Content-Encoding」の値にgzipがあればOKです。  

サーバーの応答時間を短縮する

サーバーからのレスポンスに時間がかかっている状態です。改善するにはいくつか方法はありますが、サーバーのスペックに依存することが大きいようです、、応答時間は0.2秒以内を目指します。主な改善案を下記にまとめておりますので参考にどうぞ。   1. サーバーのスペックを上げる 今使っているサーバーのスペックを上げ、軽快に動作する環境を整えていきます。メモリの数値なども確認するようにします。比較的安価なレンタルサーバーの場合はやはり難しいようです。   2. PHPのバージョンを上げる 現在はPHPのバージョンが7系が主流となっており、5系を使っている場合と比べて高速に動作するようになっています。5系を使っている場合には7系に切り替えることをオススメします。   3. WordPressで動作が重いプラグインを停止する WordPressを使っている場合、各種プラグインを導入しているケースもあるかと思いますが、中にはページ速度に影響する動作が重くなるプラグインもあります。「P3（Plugin Performance Profiler）」といったプラグインの速度を計測できるプラグインもありますので、こういったツールを使って原因となっているプラグインを停止します。  

レンダリングをブロックしている JavaScript/CSS を排除する

これはブラウザのページレンダリング（ページ描画）にjavascriptやCSSが読み込み速度に影響しているために指摘される項目です。ケースごとにいろんな対応方法がありますので、それぞれに適した施策を行なってきます。   1. async属性やdefer属性を指定したjavascriptの非同期読み込み scriptタグにasync属性やdefer属性を付与することで、javascriptを非同期に読み込むことができます。こうすることでページのHTMLとは別に非同期でjavascriptファイルの読み込みが始まるのでその分速くなります。ただしasync属性では読み込み順がランダムになりますので、jQuery何かを使っているとエラーを起こす場合もあります。そんな時にはdefer属性を使うことで読み込み順が維持されるようになります。

<script async src="./sample-async.js">
<script defer src="./sample-defer.js">

  2. javascriptはbody終了タグ直前に記述する ページの上部から順に読み込まれていくので、headタグ内にjavascriptが記述されている場合にはファーストビューの描画される前に読み込まれることになります。そのためファーストビューの描画が遅くなります。javascriptの読み込みよりもページ描画を優先させるためにjavascriptはbody終了タグ直前に記述するようにします。

    <script src="./sample.js">
  </body>
</html>

  3. headタグ内にCSSをインラインで記述する 先ほどと同じような感じでCSSが影響してファーストビューの描画が遅くなっている状態です。そのためファーストビューの描画に必要はCSSに関してはheadタグ内にCSSをインラインで記述する方法が推奨されているようです。ただしメンテナンスの観点から見るとあまり好ましくないのですが、、必要に応じて取り入れるのが良さそうです。

<head>
  // 〜省略
  <style>body { margin: 0 auto; width: 100%; height: auto; font-size: 16px; color: #333; …}</style>
</head>

   

画像の最適化

これは画像の圧縮以外でも、要素サイズに対して画像サイズが大きい場合にも指摘されるようです。ですので画像サイズはできるだけ要素の大きさに近いサイズにしておく必要があります。特にレスポンシブの場合には画像のサイズを大きめにしてCSSでサイズ調整していることも多いので見直してみるといいかもしれません。   これで施策前後の数値を見てみますと、それぞれの指標で数値が向上しているのが確認できます。ただし、ページ速度を意識しすぎてデザインやコンテンツが損なわれるようでは本末転倒ですので、あくまで意識する程度にとどめておいた方がいいかもしれませんね。当サイトではやはりページ内の情報やサイト設計上、完璧に施策を行うことは難しいと判断しました。     いかがでしょうか、Googleもページ表示速度はSEOに影響してくると公式にアナウンスしているので、これらのスコアも重要視した方がいいかもしれませんね。