初心者でもできる、PageSpeed insightsのスコア改善

こんにちは、
ブログ初心者、TBです。

今回は

ブログの表示速度の改善です。

表示速度の計測として、最もメジャーなものは
PageSpeed insightsだと思いますが、
このサイトでの計測で、
数日前までのこのブログは

……という状態でした。

ギモンくん

遅い！遅すぎる！

それが、改善試行錯誤の結果、
まだ過程ではありますが、

ここまで改善することができました。

ギモンくん

……がんばったね！

どちらもまだ満点＝100点ではないので
未だ過程ではありますが、
今回は初心者の僕の
試行錯誤と、選択した方法を
書いていきたいと思います。

あわせて読みたい

サイト表示スピードの改善を考えてみた。 今回は サイトスピードをどうにかしたいと思った話です。 WordPressテーマをJinに変えて、色々楽しくて直感的に弄れて良いのですが、ちょっと困ったことが起きました。 …

結論から先に言うと……
目次下広告をあきらめる

このサイトは様々な試行錯誤の過程を経て、
どうにか自分としてはまあまあな
計測スコアになりましたが、

一番大きかったのはコレです。

ギモンくん

１個広告消したくらいで
そんなに変わるの？

単純に広告を消しただけではダメですが、
正直、ビックリするくらい

爆上がりでした。

このブログの状態

何をどうしたかを書いていく前に、
改善前のこのブログの状態を書いた方が
よりわかりやすいと思うので、
書いていきます。

使用テーマ

数日前までも、現在も、
このブログで使用しているWordpressテーマは
SWELLです。

SWELL公式サイト

SWELL | シンプル美と機能性の両立 – 圧倒的な使い心地を追求するWordPressテーマ シンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ – 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ…

使用プラグイン

このブログで使用しているプラグイン一覧です。

色付きの文字で書かれているプラグインは
SWELL公式が推奨しているものではありません。

原因を究明する

素材のステータスが出そろったところで
検証していきたいと思います。

テーマは遅くない

このブログでも
「無料テーマ最強」として紹介していた
Luxeritasの場合、何もしていなくても
PageSpeed insightsで
PC・モバイル両方とも
緑スコアになってしまうような、
超爆速テーマでした。

１つ前に使っていたJINは、
僕がブログを始めたころには
もう既にメジャーで、
発売から結構な時間が経っていました。
そのJINの唯一にして最大の弱点が
表示スピードで、
紹介サイト、レビューサイトでも
決して速くはない
という評価が
もはや固まっているような状態でした。
（デザインやボックスなどは大好きでした）
※今回色々やってみて、
同じ方法でJINも似たようなスコアになるのでは？
と思うのですが、
移行後ですので、もはや確認もできません。

ではSWELLはどうか？
SWELLは発売が去年（2019年）。
発売からまだ
そう時間も経っていないテーマで、
ツイッターなどを見る限りは、

速い

と言われています。

ギモンくん

じゃあ、なんで
キミのサイトは遅いの？

SWELL利用者さんのサイトを
調べてみました

実際にSWELLを使っている、
利用者さんのサイトを見てみるのが
一番早いと思い、
色々な方のサイトを（失礼ですが）
見てみました。

そこで、
素晴らしいスコアのブログを発見しました。

外部リンク

Mizuc ism | ミズシーイズム｜「素の自分を生きる」個人ブログ 水島一輝のウェブサイト・個人ブログです。小説作品の連載やブロガー向け記事、ライフスタイルを日々更新中！

水島一輝さんのサイト、
水輝亭は
PC・モバイル共に緑スコアで

ギモンくん

マジか！

初めて見た時は目を疑いました（失礼）。

同じテーマを使っていて、
どちらも緑表示で、PCの方は満点に近い。

ということは、

SWELL自体は速い

原因は他にある、ということです。

原因は何か？

どうすれば表示スピードが速くなるのか？
どうすれば計測スコアが上がるのか？

答えは PageSpeed insights に書いています。

改善できる項目

PageSpeed insightsには

これらの提案を実施すると、
ページの読み込み時間を短縮できる
可能性があります。

PageSpeed insights

と書かれた、
「改善すべき項目」があります。

ここに書かれている内容を１つずつ、
洗い出していきます。

これらを１個ずつ、確認していく作業です。

ギモンくん

ながっ！

次世代フォーマットでの
画像の配信

要は、圧縮率の高い
JPEG2000、JPEG XR、WebPなどの
画像フォーマットに変えろ、という指摘ですが、
マイナーで、
ブラウザによっては
表示されない形式もあるので
今回はパスしています。

(2020年3月10日追記）

プラグインLiteSpeed Cacheで
画像を圧縮し、同プラグインの
設定
→メディアタブから
WebP 画像への置換設定をオンにすることで
画像を最適化された 、webp バージョンに
置き換えることができます。
ということは知っていたのですが、
上記のように、
表示されないブラウザもあるため、
これまではオフにしていました。
ですが、
よくよく調べてみると、
対応していないブラウザの場合、
元画像で表示される
ということが判明したので、
今回設定をオンにしてみました。

確認したところ、
safariでも表示され、
（＝元画像として）
PageSpeed insightsの
改善できる項目からも
次世代フォーマットでの画像の配信を
消すことができました。

ギモンくん

やったね！

……ですが、
スコアの方の改善には
なりませんでした。

ギモンくん

やってないね！

適切な画像サイズ

意訳すると、

???

画像サイズが大きい、
もっと小さくしろ

という意味だと思われますが、
前回、CANVAで編集した画像を
圧縮してアップロードした上に、
更にLiteSpeed Cacheでも圧縮しているので

あわせて読みたい

ブログのカスタマイズ、いろいろ試してみました。 こんにちは、TBです。 今回の記事で、公開記事としてはちょうど100記事目✨です。 ……そこで、今回は久しぶりに 初心者ブログ道カテゴリーの記事 になります。 あ…

最初は意味が分からず、
一応もう一度圧縮を試みてはみるものの、
全く圧縮されず、困っていたところで
ツイッターで検索してみると
そもそもPNG自体がファイルサイズが大きい
ということがわかって、
画像形式を全部JPGに変えて、
圧縮することにしました。

前回圧縮で半分以下になったファイルサイズが

今回で更に半分以下になりました。

※JPG画像の圧縮の場合、PNGと違って
画像が劣化しやすいので注意が必要です。
今回若干失敗してるかも……

テキスト圧縮の有効化

こちらのサイトで紹介されている方法で
.htaccessファイルを編集して
テキストの圧縮化をしました。

※ルートディレクトリにある
「.htaccess」 ファイルを編集するので
万一に備えてバックアップをしっかりとってください。

結果、
「改善できる項目」には残りましたが、
「短縮できる時間」は短縮されました。

改善できる項目に残るのは、
おそらくやり方が間違っていると思われるので
今後改めて検証します。

ウェブフォント読み込み中の
テキストの表示

外部リンク

「ウェブフォント読み込み中のテキストの表示」問題の解決方法 引き続き，PageSpeed Insights の診断で表示される問題について扱う． いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキ…

こちらのサイトに載っている方法で
解決できそうですが、

初心者の僕には
難解すぎてわかりませんでした。

ということで、
今回はこの項目はパスしています。
いずれ勉強します。

静的なアセットと
効率的なキャッシュポリシーの配信

これも様々な説明サイトがあって、
CSSのコードも書いてあるのですが、
このブログは
キャッシュプラグインLiteSpeed Cacheを
入れているので、
機能が被るのが怖くて入れていません。

ギモンくん

ギャフン！

ですが、そのプラグインの中に
高度な設定のタブで、

ブラウザキャッシュ 、
ブラウザキャッシュ TTL

という項目があります。

ダメで元々で試してみます。

ブラウザキャッシュをオンに設定、
ブラウザキャッシュ TTL は
推奨設定からいじっていないので
2592000秒になっています。

2592000秒 ＝43200分＝720時間＝30日

1ヵ月で設定されているので、これを
説明サイトで書かれている

「１年」

で設定してみます。

つまり、
2592000秒 ×12＝31104000秒です。

ギモンくん

やったか！？

結果、なぜか
逆にスコアが誤差レベルながら下がったので

ギモンくん

ファッ！？

デフォルトの2592000秒 に戻しました。

(2020年３月９日追記）

このブログではキャッシュ管理の設定は

• WordPressテーマ「SWELL」
• LiteSpeed Cache

このふたつで行っています。

そう思っていたのですが、
もうひとつありました。

Cloudflare（クラウドフレア）です。

LiteSpeed Cacheで
キャッシュの設定を変更しても
PageSpeed insightsでは
何の変化もありませんでしたが、
Cloudflareの設定で
キャッシュの有効期間を変更すると
変化がありました。

上記説明サイトでは１年とありましたが、
6カ月以上から変化があったので、
（＝１年と変わりない変化だったので）
とりあえず６カ月で設定しました。

結果、注意表示は消えてはいませんが、
28件あったリソースが４件まで減りました。
（残ったリソースは外部サイトのものです）

メインスレッド処理の最小化
過大なDOMサイズの回避

テーマ関連の部分、子テーマの編集、
ＣＳＳの追加等が必要と思われます。

やってません。

ギモンくん

やれ！

オフスクリーン画像の遅延読み込み

画面外にある画像は遅延して読み込め、
ということ。

lazyload機能があれば良いので、
SWELLの場合は
元からその機能があるのでそのまま、
ない場合は
プラグインなどで対応します。

レンダリングを妨げるリソースの除外

外部リンク

WordPressでレンダリングを妨げるjavascriptを削除・移動させるには PageSpeed Insightsで「レンダリングをブロックしている JavaScript/CSSを除去する」という提案が表示されたことありませんか？ここではWordPressでその問題を解決する方法…

こちらのサイトで書かれている方法で
改善しました。

要は、
ヘッダーで読み込まれている、
処理の重い部分が
レンダリングを妨げるリソースなので、
それを
フッターで読み込まれるようにする、
という方法です。

上記サイトに書いてある方法で、
「改善すべき項目」から消えて、
合格になりました。

CSSの最小化
JavaScriptの最小化

LiteSpeed Cacheの設定で
最適化タブにある項目で、
サイトの表示に問題がない限りの
全ての項目をオンにしています。

このブログでは、

• CSSを非同期ロード
• コメントを削除します

以外のすべて、です。

使用していないCSSを
削除してください

前回テーマの引っ越しをした時に

あわせて読みたい

WordPressテーマの引っ越しについての 感想と、 乗り換え後にしたこと こんにちはTBです。 今回は WordPressテーマの引っ越しについてです。 僕は2019年3月からこのブログを始めて、 今までに、サイトを２回引っ越し、 （うち１回はURLのつ…

記事をブロックで書き直したり、
いらないプラグインを削除したら
合格の方に入っていました。

効率的な画像フォーマット

画像のサイズが大きいと
表示されるようです。
JINの場合、推奨サイズが
760×428pxで、
これまでは表示されていませんでしたが、
テーマを変えた後、画像サイズを変えたら
不合格に表示されるようになったので、
（この記事の前、リンとマグネシウムの記事です）
アイキャッチ画像をリサイズしました。

キーリクエストへのプリロード

外部リンク

Font Awesome使用時に出るキーリクエストのプリロード問題を解決【Webフォント】 | チェス犬趣味日記 サイト運営者なら誰しもが利用するであろうツールの一つに、サイトの速度を計測してくれるGoogleのPageSpeed Insightsがあります。大変便利なんですが、提案される解決方法…

こちらのサイトで説明されている方法を参考に、
（SWELLの場合）
外観カスタマイズ
→高度な設定
→コード挿入から、
上記サイトに書かれている方法で、
コードを挿入します。

このブログでいうと、
SWELLのアイコンが引っかかっていたので、
改善できる項目から

これらを上記サイトで紹介されている
コードに当てはめて、
出来上がったコードを
コード挿入の

<head> 直上の挿入コード

に貼り付けます。

第三者コードの利用

さて、ここまで試行錯誤を繰り返してきて
実はスコア的には

それほど変わっていませんでした。

ギモンくん

な････
なんだってーーーーー！！

一応、この間に、
最初の入れているプラグインの項で書いた、
赤字のプラグイン、

引っ越しのために余計に読み込んでいた
乗り換えサポート用プラグイン JIN用
と
多くのWordpressユーザーにとって
重いと評判の
JetPack

これは削除しました。

JetPackは統計を見るためだけに入れていて、
使いやすくて便利だったのですが、
背に腹は代えられない、
アナリティクスで代用が効くので
断腸の思いで。

それでもあまり変わらない。

スコアで言うと、
PCで70、モバイルで30くらいです。

ギモンくん

絶望しかない！

この項の最後に書いた第三者コード、

実は改善項目の中でもかなり目立っていたので、
初期に試してみたのですが、実感できるほどの、
そして
計測スコア的にも効果が見られなかったのです。

と、思っていました。

ギモンくん

！？

外部リンク

GoogleAdSenseの遅延読込みでページ表示速度を改善 GoogleAdSenseの読込みの遅さを改善する。 問題点と目標 問題点 GoogleAdSenseは、JavaScript/画像/フォント/設定ファイルなどの複数データを読込むため、非常に低速です。…

こちらのサイトで紹介されている方法で
やってみたのですが、

概要を説明すると、
アドセンスコードの最初にある、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

このコードを全部削除して、
上記サイトで紹介されているCSSコードを
（SWELLの場合）
外観カスタマイズ
→高度な設定
→コードの挿入から
</body>直前の挿入コードの欄に
自分のサイト向けに
書き換えるところは書き換えて、コピペします。

※他のテーマの場合でも、
広告コードの同じ部分を削除して
該当箇所に適切にコピペするだけでOK

これで大丈夫なはずなのに、
ほとんど全く変化がなかったので、
理由がわからないながらも
まだ終わっていなかった、
JPG画像への差し替えを続けていました。

そこでどういうタイミングだったか、
直感的な思い付きで、

あっ！

と思わず声が出ました。

コードを全部削除して

広告管理は
最近は有料テーマならどのテーマでも、
無料でも人気のテーマには
管理用の項目があって、
そこで管理していると思うのですが、

1つだけ、
そこじゃないところで管理している
広告がありました。

目次下の広告です。

広告配置について説明しているサイトでは
目次下にリンク広告を配置すると良い、
という内容のことが書かれているのを
よく見かけます。

SWELLもそうですが、
多くのテーマには、
デフォルトでは
その位置に表示するための項目がない
わけです。

なので、僕も、そして多くの人も、
プラグインを使って表示させていて、
それが
プラグインAdvanced Adsなのですが、
アドセンス広告の場合、
アドセンスサイトで管理されている
ユニットの中から選択して挿入します。

これは、普通なら広告コードを
コピペする手間もないので
（１画面でいけるので）便利な機能なのですが、
今回の場合、

コードを編集できない

ということになります。

コードは全部削除しなければならない。

ですが、目次下の広告は編集できない。
＝削除すべきコードが残ったまま

ギモンくん

その前に、キミは
リンクユニットの広告ない
でしょ？

……。

でも、まさか、
たかが１つの広告くらいで、そんな……
と、半信半疑で
目次下広告を消してみたら、

スコアがPCで99点、
モバイルで91点まで上がりました。

ギモンくん

ちょっ･･･、
えええええええ！？

サイトの体感表示スピードも
以前と比べると滅茶苦茶上がりました。

僕の場合、Advanced Adsには、
目次下広告しか入れていなかったので、
このプラグインも削除しました。

プラグインadvanced ads

（2020年3月8日追記）

アドセンス広告を
アドセンスから読み込むのではなく
普通の広告として設置すれば、
コードの編集もできるので、
目次下にも
広告を表示させることができます。

また、このブログには

advanced adsで作った
ショートコードを使った記事

があったことを思い出し、
一旦プラグインを復旧して、
目次下を通常広告にして、
コードを編集して試してみましたが、
スコアは前の

PC　70
モバイル　34

に戻ってしまいました。

そして、診断の項目には
第三者コードの文字が。

ギモンくん

ひゃああああ！

次に
目次下広告だけを削除してみましたが、
それでも変わらず、

advanced adsを削除すると、
また緑スコアに戻りました。

記事内で使っていた、
advanced adsで作ったショートコードは、
SWELLの独自ブロックである、
広告タグブロックを使って復旧しました。

第三者コードだけでも
影響は大きい

Googleのアドセンス広告を貼ることで、
Googleのサイト計測での評価が落ちる

という、
パラドックスのような話ですが、
今回はここを変えるだけで、
格段にスピードも、計測値も上がりました。

時間がない人は、
ここだけでも変えてみると良いかもしれません。

最後に
参考にさせていただいた
サイトの皆様に、感謝を

今回、僕が自分だけでやったことは、
ほとんど

• Advanced adsを削除する

これだけで、

ギモンくん

……ちょっと
ひどいぞ！

その他の全ては
今回紹介させていただいた
サイトの皆様の英知によるものです。

皆様のおかげで、
どうにかこのブログも
表示スピードも上がり、
計測値も
特にモバイルは
改善前最低27点から
改善後90点前後まで、
格段にアップすることができました。

本当にありがとうございました！

ギモンくん

コードの挿入などの前には
必ずバックアップを
とってください！