概要
当サイトのGoogleSpeed Insightsで、サイトのスピードを測定(2020/02)したところ、モバイルでのスピードは、4~5%でした。そこで、サイトスピードを改善するプラグインを検討したところ、「Autoptimize」を基本に、その他キャッシャ関連のプラグインを組み合わせると、10倍程度の劇的な改善(40%程度)が可能でした。
- サイトのレスポンス改善プラグインを未導入: モバイル・スコアは4~5%
- Autoptimizeプラグイン導入 : モバイル・スコアは40%
サイトのスピード
自分のサイトのスピードを知るには、Google Search Consoleを使っているなら、速度(試験運用版: PageSpeed Insights)で測定してくれます。
お知り合いになっていただいている観音寺さんから、当サイトの速度が遅いことのご指摘を頂き、測定してみたところ、その結果は、4~5%とさんざんでした。
これでは、誰もみてくれませんね。
また、Chromeの拡張機能(Windows版)の「Lighthouse」でもサイトの速度を測定してくれます。Lighthouseでは、50%程度の結果でした。
(Google Search Consoleは、どうやらLighthouseのエンジンを使っているようですが、測定結果は少し異なっているようです)
そこで、対策としてプラグイン (Plugin)を探してみました。試したのは、
「Autoptimize」
です。
PageSpeed Insightsの測定で、4~5%であった性能が、20~30%に劇的に改善しました。
その後は、微調整を行いました。キャッシュ(cache)も当然良いのでは無いかと思って、キャッシュ・プラグイン (cache plugin) の併用効果として、
「WP Fastest Cache」
で確認しました。当サイトの環境ではこのプラグインでは逆効果でした。
最後に、Google Analyticsが、時間を食っているのがわかったので、
「Flying Analytics」
https://wpspeedmatters.com/how-to-optimize-google-analytics-in-wordpress/
で、Google Analyticsをミニ化してその改善具合を確認しました。
詳細は、以下ご覧ください。
サイトの測定結果の概要
Autoptimizeの有無での測定概要は、以下の通りです。
- PageSpeed Insightsでは、モバイルでの速度が4~5%、それが25%に改善 (これでは、まだまだですが、改善度は高いです)
- Lighthouseでは、50%から90%、更に100%に改善
さらなるスピードアップには、その他プラスアルファのPluginをリコメンドしてくれています。
以下は、JavaScript関連、CSS関連、HTML関連について設定の有無で、どれだけ効果があったかをテストしてみました。
Autoptimizeの効果 – Page Speed Insights測定
Page Speed Insightsでの測定に際して、Autoptimizeの設定項目は、以下で行った設定検討の結果を元にして決めた項目にて、測定を行いました。
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/984E07C5-B6D3-479A-887E-41C552F11BC4.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/CEBF4FAC-A553-42BE-B2E6-3EBD232B6707-1024x668.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/1EFFF209-C51E-4357-8966-44E036B069E4-1024x668.jpg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/9E3C2059-8C38-4579-8032-F0DC13AA4A50-1024x668.jpg)
図1. Autoptimizeの効果 – PageSpeed Insights測定結果
Autoptimizeの効果 – Lighthouse測定
設定項目を、(1)CSS, (2)JavaScriptおよび(3)HTMLの順番で、効果の出そうな順に設定し、Lighthoutsで測定しました。
Autoptimize無し
21%のPerformanceしか出ていません。
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/da185975eb71dd28b082b7741e78e83e-1024x683.png)
Autoptimize有り
以下では、Autoptimizeで各設定項目を段階的に有効化したときのLighthouseでの測定結果です。
連続2回措定しました。cacheが効いているので、2回目の結果は少し良い値が出ています。
- CSSコードの最適化
- JavaScriptの最適化
- HTMLの最適化
(1) CCSコード設定
CCSコード最適化を☑️
Aggregate CSS-files?☑️
インラインのCSSを連結☑️
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/EEBC8BBD-E770-4CA7-87B5-07D837755DD6-791x1024.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/09ac0b565081b3af74b775a219888a4d-1024x683.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/1e98909eadac5c623d7b1cdb429646d0-1024x683.png)
(1+α) CSSコード設定に更に、データを生成:画像をURI化を追加
CCSコード最適化を☑️
Aggregate CSS-files?☑️
インラインのCSSを連結☑️
データを生成 : 画像をURI化☑️
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/C4FE2AAF-F77A-483C-BE67-1BBC3D05999D-834x1024.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/da75cb276c334b574d4b23db7fd9639e-1024x683.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/21d156cbc59bbb9fa5834cbc6749da15-1024x683.png)
以上の結果から、「データを生成 : 画像をURI化」は、あまり効果がなさそうなので、このチェックは外すことにします。
(2) +α : JavaScript設定
Aggregate JS-files?☑️
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/B30ECB39-33FC-446D-A0E6-A51A79297DAF-837x1024.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/8e1b831cc1b2fb946e6037bc92c623dc-1024x683.png)
JavaScriptコードの最適化の効果はあるようです。
(3) +α : HTMLオプション – コード最適化
HTMLコード最適化を☑️
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/097DD331-CC48-41A3-A6CF-8D74578FD674-827x1024.jpeg)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/0f504d8daafd929905a1c2e250cebde7-1024x683.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/48311159d6194c380415e3e21c042f47-1024x683.png)
HTMLコードの最適化はそこそこ効果があるようです。
最終的に設定した内容
最終的に、以下の通りの設定に落ち着きました。
- Autoptimize : JavaScript(JS)、CSSの設定のみ(数参照)
- Cache : WordPress Pluginは不要、DS918+のSSD cacheがワークしているものと思われる
- Google Analytics : 速度性能にそれほど寄与しないが、しばらくミニGoogle Analyticsを使用してみる
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/B8979800-8CA1-474C-BB32-EFC6FDC1AA8F-1024x91.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/38CDBA4F-9AC7-440E-A3F2-4CE327A33398-1024x964.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/C51E0435-F9D8-418F-9425-D3CB29F083AC-1024x979.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/DD5F5847-F109-4045-870C-454D855102C6-1011x1024.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/496F7882-DAE9-4509-80F3-996A3C97B892-1024x637.png)
プラスアルファ
その他の併用効果
(1) WP Fastest cache
キャッシュの併用も試してみました。WP Fastest Cacheです。Fee版でも多数の設定項目があります。色々設定して、Page Speed Insightsで測定してみました。結局、無い方がスコアが高く出ることがわかりました。
当サイトのWordPressはSynology DS918+に立てています。SSD cacheも追加で積んでいます。WP Fastest cacheの効果が出なかったのは、おそらく、SSD cacheがあるためと考えれます。二重のcacheは必要ないということですね。
(2) Flying Analytics by WP Speed Matters
最適な設定の組み合わせを探して、試行錯誤で設定、PageSpeed Insightsで測定を繰り返し、その結果を眺めていると、Google Analyticsが結構じゃましているようなレポートがあるのに気が付きました。
以下の測定結果は、All in One SEOに、Google Analyticsを設定した条件で測定した結果です。
以下の測定結果は、All in One SEOに、Google Analyticsを設定した条件で測定した結果です。レペートの診断結果の項目に「第三者のコードの影響・・・」とあります。次の図には、その詳細を示していますが、Google Analyticsが866msも使っています。
デフォルトのGoogle Analytics
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/222056F1-09FA-42E5-BFCD-88388F992FE8-1024x262.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/A4793042-3D19-4377-8296-8CCF043C1E2A-1024x262.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/5C08C798-E48E-419F-B7EA-59E1EB0738D2-1024x541.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/DCA11643-DE71-4BB3-A4E1-FAD190AEAF18-1024x436.png)
ミニサイズのGoogle Analytics
以下の測定結果は、All in One SEOから、Google Analyticsを外して、代わりにFlying AnalyticsでミニサイズのGoogle Analyticsを設定した場合の測定結果です。
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/CB8FC3EE-4047-4D44-8AB3-BDDD690CD583-1024x361.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/D08C48F5-6A95-4FAC-B6A5-EF0FDB26A976-1024x262.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/29087CDF-50A3-45D6-BB77-3CFEB305D5AD-1024x261.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/F1E1669A-9A8C-491A-B48F-5B90F52CF9BA-1024x154.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/65469806-DA67-4E61-AD11-7A4A10FDAE47-1024x533.png)
PageSpeed Insightsによる最終的な速度レポート
以上の設定を全て組み込んで、PageSpeed Insightsで測定しました。
当初、1桁だった速度性能が、モバイルで50%程度、今回の取り組み始めには、パソコンでの性能評価は、気にしていなかったため、パソコンの速度性能値は、参考値になりますが、モバイルよりも 高い値のがでます。
モバイル
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/CC3119D4-1134-48DC-8FB9-D37CC553ACED-1024x584.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/B5519909-60D1-4471-A882-F6736A0A1320-1024x609.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/5355C536-716D-4111-8002-4F0BC10CD778-1024x532.png)
パソコン
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/A1B2FC5F-1B36-42CE-8505-3534344255CA-1024x572.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/C79EA76D-6ABB-4F81-8812-34692ECBD6F8-1024x598.png)
![](https://harikiri.diskstation.me/myblog/wp-content/uploads/2020/01/08ED7A5C-5D63-4A6B-992B-35B8DD70D7C9-1024x559.png)
まとめ
指摘を受けなければ気がつかなかった、サイトの速度でしたが、当初1桁であったのが、50%まで速度性能を改善することができました。約10倍です。
- JavaScriptの最適化
- CSSの最適化
- HTMLの最適化
- Cacheの設置(Synology NASにSSD搭載のため、プラグインは逆効果)
- Google Analyticsは、1/10にしたミニ化も少し寄与
- Google Font: 削除設定で、モバイルが5~10ポイント早くなることを確認。測定毎に約半分の確率でスコア50を超えるようになった(ページの作りも簡素化していることも良い影響がでている)。しばらくこの設定で運用することにした(2020/02/13)
今後
更なる速度改善は、以下の項目が考えられますが、個人サイトで出来るものとそうでないものもリストしました。
- WordPressのDatabase関連 : 最適化でできるらしい
- 別のCache Plugin : WP Optimizeはすでにためしてみました
- PHPバージョン : Ver.5よりVer.7が早らいしい
- Budget.json: よくわからないキーワードですが。
- DOM : 1500以下に抑えなさいと言われますが、綺麗に見せるstyleにするとトレードオフです。
- CDN : 個人では無理?
- インフラ頼み : 5G、今回のこんな苦労は要らなくなるかも
追記
その後、いろいと調べていると、Googleは、Mobile Firstであり、モバイルに対して特化したページ作りを求めていることが分かりました。
既存のページをAMP(Accelerate Mobile Page)という技術で、速度改善を可能にする開発を行なっていることも分かりました。
結局のところ、現在のページは、今後、生き残らないと判断し、AMP対応ページに移行することにしました。
2020/2/3からAMPプラグインをインストールして、セッティングを開始しましたが、2ヶ月経過した時点で、広告の表示やページ表示の不具合なども解消できました。
AMPプラグインにより、ページの表示速度は、GoogleSpeed Insightsのモバイルのスコアで、キャッシュプラグインを有効にしてですが、60~70%にまで改善しました。
AMP対応にするには、プラグインを使用しますが、これを使うと、「Autoptimize」プラグインの使用は、必要無くなります。
編集履歴
2020/01/25 はりきり(Mr)
2020/02/13 追記 (Google Fontの削除設定)
2020/02/23 AMPに対応
2020/04/15 「追記」を追記
2020/05/15 文言整備