Google Adsenseの成績を見ていたら、「サイトの状況」なる項目があって、PageSpeed Insightからアドバイスみたいなものが出ていた。せっかくなのでPage Speed Insightを覗いていて見ると、そこには恐ろしい光景があった。
モバイル：45点
パソコン：70点
なにやらこのブログが採点されていて、もっと修正しろ！とGoogle様に怒られている。モバイルの45点なんて、表示が真っ赤だった。結構な時間を投入してとりあえず及第点くらいにはスコアが改善したので、スコア改善のためにやったことを備忘録含めて書いておきます。たくさんやったので、忘れてしまったのもあるかもですが・・・
①Apacheにがんばってもらう高速化
■ブラウザのキャッシュ
まず真っ赤に怒られていたのが、「ブラウザのキャッシュ」を活用しなさいということ。
キャッシュなんてクライアントの設定だろ！と思ったら、Apacheの.htaccessで設定するものだったようです。知らなかった。ということで、次の記述を.htaccessに追記して、キャッシュを有効にしました。
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 months"
ExpiresDefault "access plus 7 days"
</IfModule>
解説
mod_expires.cは、Apacheに含まれる機能のようで、たいていのレンタルサーバで、.htaccessに記入しておけば使えるもののようです。
この記述によって、Apacheがクライアントにデータを渡す際に、きっとキャッシュの設定をしてくれるのでしょう・・・ ExpireByTypeは、ファイル形式毎に、いつまでキャッシュを残しておくのか設定しています。
キャッシュを残す期間が短いとGoogle様に怒られるので、特に指定しない限りは7日間残すようにしました。
参考にさせていただいたサイト：
.htaccessでwordpressの圧縮、キャッシュ設定をやってみた！
■サーバーのPHPの設定
意味はよくわからないが、サーバーのコントロールパネルとかから、Document Rootに「php.ini」を置いて、これを書いておくといいらしい。
zlib.output_compression=1
※追記：このブログのインフラだと効果がありませんでした。
解説
おそらく、サーバー側でzlibという圧縮機能を使って、クライアントに送るデータを自動で圧縮して送信する機能。
でも、機能しているかどうかが確認できなかったし、SiteSpeed Insightのスコアも反応しなかったので、気休めな感じ。
参考にさせていただいたサイト：phpのzlibモジュールでコンテンツを圧縮
■大きいcssやjacascriptを圧縮する
これが一番苦労しました。検索するとすぐ出てくるのですが、紹介記事のコードをコピペしただけだと動かなかった。
理由は、圧縮によって文字化けが発生していたので、対策として文字コードの対応をする必要があった。
まず、.htaccessに書くコード//もし圧縮ファイルがあれば圧縮した.gzファイルを読み込むという処理
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(css|js|svg)$"
RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
//ここから下は、圧縮した.gzファイルがutf-8なので、utf-8であることをApacheにわからせる記述。たぶん。
AddType "text/html;charset=utf-8" .gz
AddType "text/javascript;charset=utf-8" .gz
AddType "text/css" .gz
AddEncoding x-gzip .gz
参考にさせていただいたサイト：
改行削除するくらいなら gzip したらいいじゃない
さくらインターネットでサイトの表示速度高速化設定
.htaccessにおける{REQUEST_FILENAME}の意味
ウェブサイトをgzip圧縮で高速化する
②「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」
ここまでで、モバイルが70点、PCが80点くらいになりました。
あとは、サイトにアクセスを頂いたときにはじめに見えるページ、いわゆる「ファーストビュー」の高速化。
「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する」というアドバイスへの対応です。
■cssとjavascriptの読み込みを非同期にする
プラグインを入れて、設定を有効にすればOKという簡単な話でした。
入れたプラグインは「Aync JS and CSS」という、その名の通りJSとCSSを非同期にするもの。
このプラグインを入れる前に、JSやCSSをフッターに持っていったり、削除したりみたいな対応をしたんですが、サイトデザインは壊れるわ、むしろ表示が遅くなるわで効果がありませんでした。
プラグインで非同期にするという簡単な処理で解決したなんて、時間返して！って感じになるレベルで効果が出ます。
だいたいここまでで、モバイルが80点、PCが90点になりました。やったね！
あとは、jpgで保存していた画像をpngに直したり、pngでも最適化していない大きすぎるファイルは最適化をしてアップロードし直すなどの処理をして、モバイル87点、PC93点にもっていきました。
wordpressで、あまりコーディングをしないでお手軽に、だとこれくらいがいい頃合いではないでしょうか。
それにしても、大手のまとめサイトなどをみると、当たり前のようにスコアが99点や100点になっていて、さすがプロだなぁと思いました。自分でやってみないと見えてこない、地味に大変な部分が見えて勉強になります。