PageSpeed Insightsで指摘されたブログの高速化に取り組んでみた

目安時間:約 22分
ブログの高速化

こんにちは、えるこです。

 

ブログ運営をしていると、「勉強のため」と称して

 

他の人のブログを「ブログを運営する側の視点」から見ることがあると思います。

 

そしてさらに勉強のためになりそうなメルマガを読んだりもしますよね。

 

色んなメルマガを長期間読み続けていると、

 

ちょっとした流れに気づいてくるのですが、

 

一時「ブログの表示速度について」のお話が盛んにされていたことがありました。

 

最近はまた違う話題に移り変わっているので、もう誰も高速化について触れてはいませんが・・・。

 

その頃、メルマガ運営者さんがこぞって紹介していたのが「PageSpeed Insights」。

 

これはGoogleが無料で提供しているサービスで、

 

モバイル端末やパソコン向けのページの実際のパフォーマンスや、速度の改善方法を調べられるんです。

 

あなたのブログの表示スピードの最適化がどれくらいできているのかを100点満点中何点か?

 

と、ブログ表示速度の最適化具合を採点してくれます。

 

もちろんワタシもさっそくそのページで自分のブログはどんな感じか調べてみました。

 

するとその時は確かモバイルが80点くらい、パソコンは75点くらい・・・だったかな?

 

可もなく不可もなく?といったところだったので、とりあえずそのまま手を付けずに放置していました。

 

 

ですが、

 

 

「表示速度の早い遅いが2018年9月から検索結果の反映に影響し始める」

 

ということが地味に気になっていたので、最近再び調べてみたんですね。

 

すると・・・・・・。

 

モバイルの最適化の点数が赤点!?パソコンの最適化の点数も下がってる!!!

 

ずーっと気になっていたブログの表示速度を久しぶりに計測してみると、

 

こんな結果が出てしまいました。

pagespeedinsights (1)

 

まず「ページの速度」についてなんですが、Unavailableとはつまり「利用できません」ということ。

 

これはなぜかというはっきりした理由はわかりませんが、

 

個人レベルの小さなサイトやブログでは測れないそうです。

 

ですが、これはあくまで「速度を数値化することができない」というだけのこと。

 

なのでたいていの方は「Unavailable」と出ていますのでご心配なく(^_-)-☆

 

 

 

次にいよいよ「最適化」についてですが、

 

これはブログの表示速度が早いのか、普通なのか、それとも遅いのかという評価です。

 

ワタシのブログの場合、

 

モバイル 42点、パソコン 67点て・・・orz

 

放置していた間に悪い方向へ進行していました。

 

何が原因なのかということを親切に教えてくれるのですが、

 

いかんせん専門的過ぎてさっぱりわからないんですよ~ ┐(´д`)┌ヤレヤレ

 

と、前回はこれでそっとフェードアウトしてしまいましたが、

 

今回はそうはいきません(「赤点」ついちゃってるし)

 

ちなみにこの最適化の評価は、

 

Good : 80点以上

Medium : 60~79点

Low : 59点以下

 

だそうです。

 

画像を最適化する

 

記事に使用している画像のサイズが大きかったりすると、

読み込むのに時間がかかるそうなんですね。

 

だから使用する画像は圧縮してサイズを変更するといいよ!

 

と教えてくれていました。

 

でも、ワタシのブログでは画像を自動で圧縮してくれるプラグインを

ブログ開設時にインストール済みなので

 

「もうしてるんですけど・・・」

 

って感じです。

 

で、改めて「詳細を表示」を見てみると、

 

どうやらブログのサイドバーに設置したASPの広告の画像が引っかかってるようなんですよ。

 

なのでワタシが手を施すとすれば、「この広告を外す」しかないということ。

 

サイドバーに広告を3つ設置していたのですが、

 

試しに1つ削除して様子を見ることにしました。

 

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

 

これはブログのURLにアクセスして、一番最初に表示される部分について言っているようです。

 

タイトルや背景などに装飾を施していたりしていると、

何もしていないブログよりも表示し終わるのがどうしても遅くなりますよね。

 

でもワタシは素人で、そこまでコッテコテにカスタマイズなんかできないし、

していないのに「遅ぇ~んだよ!」とご指摘が。

 

なのでこれも「詳細を表示」を見てみると、

 

なにやらずら~っと並んじゃってます。

 

pagespeedinsights (2).2

 

実は以前、「次のCSS配信を最適化してください」の上にもう一つ、

 

「レンダリングをブロックするJavaScriptを除去してください」というのも表示されていたことがあるのですが、

 

わけのわからないまま、ダッシュボード「外観」→「テーマの編集」→「テーマのための関数(functions.php)」というところに

 

========================================

 

// ヘッダー記載のものをフッターへ移動(2018年2月追加)
function init_parent_action_child() {
remove_action('wp_head','wp_print_head_scripts',9);
add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('init','init_parent_action_child');

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

 

========================================

 

このようなソースを入れていたおかげで、いつのまにか消えていました^^;

 

CSS配信を最適化

 

「CSS配信を最適化」するにはどーしたらいいのかを調べていくと、

 

自分で何とかするにはちょっと高度なテクニックを要するみたいなんですよ。

 

そんなこと言われたって~(ノД`)・゜・。

 

と困りつつ、さらに調べていくと

 

どうやら簡単に解決できるプラグインがあるとの情報をキャッチ!

 

そのプラグインの名は「Autoptimize」。

 

さっそくインストール・・・とその前に、一応バックアップは取っておきましょうね!

 

pagespeedinsights (3)

 

「有効化」したら「設定」に進みます。

 

pagespeedinsights (4)

 

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

 

pagespeedinsights (5)

 

「CSSオプション」を設定します。

 

ワタシは詳しいところはわからなかったので、色々な方の情報を参考に以下のように設定しました。

 

・CSSコードを最適化

・インラインのCSSを連結

 

pagespeedinsights (6).2

 

※実は最初「すべてのCSSをインライン化」にもチェックをつけていたのですが、

これにチェックを付けてしまうと大きなデータもすべてインライン化してしまい、

そのせいでスクロールせずに見える範囲のCSSサイズが大きくなってしまい、

その結果ページが表示されるまでに時間がかかる可能性が高くなるということがわかりました。

で、慌ててバックアップデータを復元してAutoptimizeの設定をし直してから

PageSpeed Insightsにかけてみたら、モバイルが2点アップしました。

ということで、「すべてのCSSをインライン化」はくれぐれもチェックなしにしましょう!

 

 

 

Autoptimizeでは、「HTMLオプション」「JavaScriptオプション」「CDNオプション」「キャッシュ情報」「その他のオプション」を設定できるようになっていまして、

 

ワタシは HTMLオプション : HTMLコードを最適化

JavaScriptオプション : JavaScriptコードを最適化

 

にそれぞれ「チェック」を入れた以外はデフォルトの状態で使用することにしました。

 

設定が終わったら「変更を保存してキャッシュを削除」のほうをクリックしましょう。

 

pagespeedinsights (7)

 

なぜ単なる「変更を保存」じゃだめなのか?というと、

 

最新版を適用するためにはキャッシュを削除する必要があるからだそうです。

 

(じゃあ「変更を保存」のボタンはいらない気もしますが・・・)

 

ここでブログの表示が崩れていないか一度確認してみましょう。

 

もし崩れていたら設定を一つ一つ見直してみてください。

 

※JSファイルの圧縮は不具合が出やすいそうです。

 

 

 

再びPageSpeed Insightsのページでチェックしてみると・・・

 

pagespeedinsights (8).2

 

モバイル : 42点 → 58点

パソコン : 67点 → 70点

 

やった!改善してる!!

 

で、結果どうなったかというと、

 

pagespeedinsights (23).3

 

残った3つのうち1つ目は、「すべてのCSSをインライン化」をやり直した(チェック付→チェック無)ことで出てきたので、

これは大きなサイズのデータなんだということがわかりました。

 

2つ目は、ワタシのブログで使用している子テーマのスタイルシートと、

3つ目は、プラグインのスタイルシート?

 

これ以上ワタシにはいじいじできない部分なので、これで良しとします。

 

 

 

 

※Autoptimizeはブログのテーマによって相性があるようなので、

 

くれぐれもインストール前にバックアップを取ることを忘れずに!

 

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

 

画像ファイルやCSSファイルやJSファイルなどの有効期限を設定することで

一度ブログを訪問してくれた人にはキャッシュを利用して素早く表示してあげよう!

 

ということみたいです。

 

ということで「詳細を表示」をクリックしてみると、

でるわでるわ「有効期限が指定されていません」の嵐。

 

pagespeedinsights (9).2

 

もしかして、これを解決するのにも便利なプラグインがあるかも(´艸`*)

 

と思い調べてみたんです。

 

でも確かにプラグインはあることはあるみたいなんですが、

 

キャッシュ系のプラグインは、時にブログに大きなトラブルを引き起こす可能性があるそうです。

 

それはちょっと・・・ですよねぇ。

 

ですが、ブラウザのキャッシュを活用するための対策は、

 

調べてみると、それほど難しいこともなくできちゃいました。

 

.htaccessの編集

 

キャッシュを活用するためには「.htaccess」というファイルを編集することになります。

 

となるとサーバーにアクセスして云々・・・ということをしなければならないのですが、

 

ワタシ、ファイルのアップロードとかってちょっと苦手なんですね・・・。

 

パソコンにFFFTPも入れてはいるものの、怖くていじれないんですよ。

 

でもエックスサーバーのほうでいじいじしたら意外と簡単にできました♪

 

まずエックスサーバーのサーバーパネルにログインします。

 

pagespeedinsights (10)

 

pagespeedinsights (11)

 

画面左下方にある「設定対象ドメイン」で設定したいドメインを指定して「設定する」をクリック。

 

pagespeedinsights (12)

 

次に画面中央あたりにある「ホームページ」の「.htaccessの編集」をクリック。

 

pagespeedinsights (13)

 

編集するドメインが正しいか確認しましょう。

 

pagespeedinsights (14)

 

.htaccessファイルはとっても重要なものなので、いったんコピーしてメモ帳にバックアップとして避けておきます。

 

ファイルの中身を「Ctrl + A」で全てを選択して青く反転させたら

 

「Ctrl + C」でコピーします。

 

pagespeedinsights (15).2

 

メモ帳を呼び出して「Ctrl + V」で貼り付けます。

 

 

pagespeedinsights (16).2

 

で、ここからが本題。

 

.htaccessファイルの一番下に、以下のソースを追記します。

 

========================================

 

# BEGIN Browser Cache
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
</ifModule>
# END Browser Cache

 

========================================

 

pagespeedinsights (17).2

 

「.htaccessを編集する(確認)」をクリックし、問題がないか確認をしたら、

 

「.htaccessを編集する(確定)」をクリック。

 

pagespeedinsights (18)

 

無事、.htaccessを編集できました。

 

pagespeedinsights (19)

 

では、再びPageSpeed Insightsで計測してみます。

 

pagespeedinsights (20).2

 

モバイル : 58点 → 72点

パソコン : 70点 → 75点

 

おお~!確実に改善の効果がでてます!詳細を見てみると、

 

pagespeedinsights (21)

 

4つ残ってはいますが、これはサイドバーに設定しているASPの広告2つと、

グーグルアナリティクス関係が2つ。

 

(ちなみにアドセンスを貼っているとさらに、ここの数が増えるみたいです。)

 

 

 

これを解消するには広告を削除して、アナリティクスを外さなければいけないということなので、ここもこれで良しとします。

 

CSSを縮小する

 

「CSSコードを縮小すると、データサイズを大きく削減でき、ダウンロードや解析の速度を向上させることができます。」

 

とありまして、そこの「詳細を表示」をクリックしてみると、

 

どうやらプラグイン関連のものが1つだけ出てきたので、

 

ここもこれで良しということにしようと思います。

 

さいごに

 

ということで、素人えるこがブログの高速化に挑戦してみました。

 

高速化に取り組んだ次の日に、あらためてPageSpeed Insightsにて計測してみると、

 

このようになってました。

 

pagespeedinsights (24)

 

キャッシュの有効期限の関係もあって昨日より数値が上がったようです。

 

モバイルがギリギリ「Good」に昇格できました~((((oノ´3`)ノ

 

パソコンも「Good」を目指して広告をもう一つ外しちゃおうか悩むえるこなのでした。

最近の投稿
よく読まれている記事
アーカイブ
カテゴリー
メタ情報