ホーム   WEBデザイン   【高得点!】PageSpeed Insightsでの点数を上げるために簡単にできること。表示速度を最適化。

 WEBデザイン    363

 

【高得点!】PageSpeed Insightsでの点数を上げるために簡単にできること。表示速度を最適化。

このエントリーをはてなブックマークに追加

お客のサイトの更新の依頼が来たので、ついでにできることを簡単にしよう。

最近はGoogleのページ表示速度採点ツール「PageSpeed Insights」での点数が一つの指針になってしまっているので、対応せざるを得ない。

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

まずは上記が何もする前の状態。
SPが64点、PCが65点という状態。

スポンサーリンク

レンダリングブロックしている要素を排除する。

まずはhead内で読み込んでいたCSSファイルとJavaScriptファイルを「閉じるbody」の前に移動。主にFont AwesomeやグーグルフォントのCDN、グーグルマップのJSファイル等を移動しました。

早速動きが!
SPが80点、PCが67点に上昇。

スポンサーリンク

.htaccessに以下を追加。

ブラウザキャッシュ時間を設定及びgzip圧縮を有効化。
次に.htaccessへ下記を入力して、「ブラウザのキャッシュ活用」及び「圧縮を有効」にします。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

<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|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

こちらのサイトを参考にさせていただきました。
https://qiita.com/yuki_24/items/0a2695f1b6c4130cf68c

しかし上記対策では今回は数字に変化がなかった、残念。

スポンサーリンク

CSSをHTML内にインライン化。

CSSをHTML内にインライン化に関しては便利なプラグインがある。

WordPressのプラグイン、Autoptimizeのプラグインを追加。
有効化して設定画面へ。

Autoptimize

https://ja.wordpress.org/plugins/autoptimize/

右上の「高度な設定を表示」をクリック。

「すべてのCSSをインライン化」をチェック。

SPが83点、PCが73点に上昇。
やりました!しかしまだもう少し上げたい。

画像の最適化。

一応サイトの画像はすべてTinyPNGで圧縮していたつもりだったのですが、忘れていたのかも。

TinyPNG

https://tinypng.com/

PageSpeed Insightsの下部に最適化されたファイルをダウンロードできます。これを開いたらなんと画像ファイルしか出てこなかった(笑)

元のファイルとこのGoogleの最適化された画像ファイルを比べたら数KBですが軽かったので、こちらのGoogleオススメの画像と差し替えてみた。

すると!

SPが99点、PCが83点になりました!!
これより高得点を出したい場合はもっと努力が必要そうですが、とりあえずこのくらい出ていれば私もお客も満足ですって!

 

Twitter でbbpをフォローしよう!

コメント

このエントリーをはてなブックマークに追加

プロフィール

bbb

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。