iyuichiの私的開発ログ

渋谷で働くWebエンジニアのログ. Java, Android, iOS, Docker, GCP, AWS, ゲーム開発

PageSpeed Insightsによる診断結果と対策

開発

Googleが提供しているPageSpeed Insightsを使ってこのサイトを診断してみました。

するとチューニングポイントがたくさん表示されます。

その中から今回は以下の項目に対応してみましたので実際に実施した内容を紹介します！

スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する

まずこいつですが、

検索すると以下のようなプラグインがあることがわかりましたのでWordpressのプラグインで対応しました。

* Async JS and CSS

* Asynchronous Javascript

前者ですが、こちらの記事で表示が崩れたとの記載があったので今回はパス。

Asynchronous Javascriptを入れました。

わたしの場合は２つほど対象のjsファイルが減りました。

ブラウザのキャッシュを活用する

こちらは、Apacheのモジュールを適用することで対応してみます。mod_expiresを使います。

わたしの環境ではmod_expiresはロード済みでした。

httpd.confなどで"LoadModule expires_module modules/mod_expires.so"されているか確認してみてください。

設定は以下のように記載。



    <ifModule mod_expires.c>


            ExpiresActive On


            ExpiresDefault "access plus 1 seconds"


            ExpiresByType image/x-icon "access plus 1 days"


            ExpiresByType image/vnd.microsoft.icon "access plus 1 days"


            ExpiresByType image/jpeg "access plus 1 days"


            ExpiresByType image/png "access plus 1 days"


            ExpiresByType image/gif "access plus 1 days"


            ExpiresByType text/css "access plus 1 days"


            ExpiresByType text/javascript "access plus 1 days"


            ExpiresByType application/x-javascript "access plus 1 days"


            ExpiresByType text/html "access plus 600 seconds"


            ExpiresByType application/xhtml+xml "access plus 600 seconds"


    </ifModule>

アフィリエイトサイト用のjs(他ドメイン)のもの以外はキャッシュが効くようになりました。

これは表示速度に効果ありそうです。

圧縮を有効にする

こちらもApacheのモジュールで対応します。mod_deflateををつかいます。

mod_deflateでgzip圧縮してコンテンツを配信できます。

サーバのCPUを使うのでその点だけ注意ですが、今のところこのサイトでは全く問題無し。

設定は以下のように記載。



    <IfModule mod_deflate.c>


            SetOutputFilter DEFLATE


            BrowserMatch ^Mozilla/4 gzip-only-text/html


            BrowserMatch ^Mozilla/4\.0[678] no-gzip


            BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html


            SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary


            Header append Vary User-Agent env=!dont-vary


   </IfModule>

こいつも効果ありそうです。

サイトのレスポンスが悪くなると内容の善し悪しの前にみてもらえなくなると思います。

上記のApacheの設定は入れておいて損はないかなと。

設定内容はサイトの内容に応じてまだまだ改善の余地はあるかと思います。

またチューニングやったら記事にしていこうと思います。

ではまた。