カテゴリー
plugin Synology WordPress

[WordPress] Autoptimize プラグインの威力 – ブログ・サイトのスピード改善対策プラグイン – 更にAMP対応まで進めた結果 – ID7804 [2020/05/15]

レンタルサーバーのWordPressには余り考えなくてもよいblogのレスポンス速度ですが、自宅NASに構築したWordPressのレスポンス速度は、クリティカルな問題です。Autoptimizeというプラグインでシンプルな設定で、レスポンス速度の改善が可能です。

[WordPress] Autoptimize プラグインの威力 – ブログ・サイトのスピード改善対策プラグイン – 更にAMP対応まで進めた結果 – ID7804 [2020/05/15]
スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145
スポンサーリンク
by Google Ads ID8603

概要

当サイトのGoogleSpeed Insightsで、サイトのスピードを測定(2020/02)したところ、モバイルでのスピードは、4~5%でした。そこで、サイトスピードを改善するプラグインを検討したところ、「Autoptimize」を基本に、その他キャッシャ関連のプラグインを組み合わせると、10倍程度の劇的な改善(40%程度)が可能でした。

スポンサーリンク
  • Synology DS517 by Amazon ID:22173
  • Synology DS920+ by Amazon ID:22172
  • オムロン BY50S用パック by Amazon ID:22171
  • オムロン BY50S by Amazon ID22170
  • Synology 高機能無線ルーター 800Mbps + 1,733Mbps(11a/b/g/n/ac対応) 高セキュリティ VPN Plus対応 RT2600ac by Amazon ID24327
  • エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタ ホワイト LD-GPA/WH5 by Amazon ID24327

サイトのスピード

スポンサーリンク
by Rakuten ID:15895

自分のサイトのスピードを知るには、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」

スポンサーリンク
by Google Ads ID19417

で確認しました。当サイトの環境ではこのプラグインでは逆効果でした。

最後に、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の設定項目は、以下で行った設定検討の結果を元にして決めた項目にて、測定を行いました。

図1. Autoptimizeの効果 – PageSpeed Insights測定結果

Autoptimizeの効果 – Lighthouse測定

設定項目を、(1)CSS, (2)JavaScriptおよび(3)HTMLの順番で、効果の出そうな順に設定し、Lighthoutsで測定しました。

Autoptimize無し

21%のPerformanceしか出ていません。

Autoptimize有り

以下では、Autoptimizeで各設定項目を段階的に有効化したときのLighthouseでの測定結果です。

連続2回措定しました。cacheが効いているので、2回目の結果は少し良い値が出ています。

  • CSSコードの最適化
  • JavaScriptの最適化
  • HTMLの最適化

(1) CCSコード設定

CCSコード最適化を
Aggregate CSS-files?
インラインのCSSを連結

(1+α) CSSコード設定に更に、データを生成:画像をURI化を追加

CCSコード最適化を
Aggregate CSS-files?
インラインのCSSを連結
データを生成 : 画像をURI化

以上の結果から、「データを生成 : 画像をURI化」は、あまり効果がなさそうなので、このチェックは外すことにします。

(2) +α : JavaScript設定

Aggregate JS-files?

JavaScriptコードの最適化の効果はあるようです。

(3) +α : HTMLオプション – コード最適化

HTMLコード最適化を

HTMLコードの最適化はそこそこ効果があるようです。

最終的に設定した内容

最終的に、以下の通りの設定に落ち着きました。

  • Autoptimize : JavaScript(JS)、CSSの設定のみ(数参照)
  • Cache : WordPress Pluginは不要、DS918+SSD cacheがワークしているものと思われる
  • Google Analytics : 速度性能にそれほど寄与しないが、しばらくミニGoogle Analyticsを使用してみる

プラスアルファ

その他の併用効果

(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
ミニサイズのGoogle Analytics

以下の測定結果は、All in One SEOから、Google Analyticsを外して、代わりにFlying AnalyticsでミニサイズのGoogle Analyticsを設定した場合の測定結果です。

PageSpeed Insightsによる最終的な速度レポート

以上の設定を全て組み込んで、PageSpeed Insightsで測定しました。

当初、1桁だった速度性能が、モバイルで50%程度、今回の取り組み始めには、パソコンでの性能評価は、気にしていなかったため、パソコンの速度性能値は、参考値になりますが、モバイルよりも 高い値のがでます。

モバイル
パソコン

まとめ

指摘を受けなければ気がつかなかった、サイトの速度でしたが、当初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 文言整備

関連記事

plugin, Synology, WordPress
[WordPress] Multibyte patch プラグイン – ID10707 [2020/08/11現在インストール中]

Post Views: 35 WP Multibyte patch WordPressの開発は、世界中でGNUのもと行われています。主導をとっているのは、やはり欧米であるため、日本語はローカル扱いです。Unicodeなど […]

plugin, Synology, WordPress
[WordPress] Scroll Top – Next Previous Post Links – Back…プラグイン ID10805

Post Views: 36 Scroll Top – Next Previous Post Links – Back… プラグイン 機能 投稿やページが長文になるとトップに戻りたいと […]

plugin, Synology, WordPress
[WordPress] Encyclopedia プラグイン – ID10771

Post Views: 37 目次1 Encyclopedia プラグイン2 機能2.1 AMP対応ページで使用できなくなる機能3 設定3.1 目標機能3.2 詳細設定4 注意点 Encyclopedia プラグイン 機 […]

plugin, Synology, WordPress
[WordPress] GT3 Photo & Video Gallery – ID10760

Post Views: 41 目次1 GT3 Photo & Video Gallery2 機能 GT3 Photo & Video Gallery 機能 画像を貼り付けるには良いプラグインだったので、有 […]

plugin, Synology, WordPress
[WordPress] Autoptimize プラグイン – サイト・速度改善 – ID10738

Post Views: 39 Autoptimizeプラグイン 主な機能は、コードの最適化です。JavaScript, CSS, htmlのコードを最適化することで、当サイトでは、劇的な速度の改善がありました。 実は、ど […]

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているが、スタイルはある- ID30216 [2021/05/30]

Post Views: 34 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

plugin, Synology, WordPress
[WordPress] Flex Posts – Widget and Gutenberg Block プラグイン – Gutenberg エディター対応 – ID8804

Post Views: 50 目次1 はじめに2 評価項目3 結果4 結論 はじめに 僕は、WordPress歴が1年とNewcomerなので、余りしがらみも無く新しいエディタ Gutenbergを使用しています。 Sy […]

plugin, Synology, WordPress
[WordPress] Cool Timeline Pro プラグイン (有料版)の導入 – ID2195 [2019/08/07]

Post Views: 39 目次1 Cool Timeline Pro1.1 利用中止 Cool Timeline Pro 有料版のCool Timelineプラグインです。現在利用を中止しています(2020/10/0 […]

Page: 1 2 8
スポンサーリンク
  • by Amazon ID13339
  • by Amazon ID13211
スポンサーリンク
  • 【Amazon.co.jp 限定】HP USBメモリ 128GB USB 3.1 スライド式 金属製 HPFD796L-128 GJP by Amazon - ID 24751
  • 3Dプリンター ダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513
  • 3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|3F1AWXJP00F - XYZプリンティングジャパン by AMAZON ID21511
  • ABS使用可 造形サイズ175×175×175mm オープンフィラメント可 オートキャリブレーション機能付き レーザー刻印機能拡張可 金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
  • zedela 5-in-1 USB-Cハブ【3ポート5Gbps by Amazon - ID 24751
スポンサーリンク

用語の解説、関連タグ付き投稿の抽出

AMP

[WordPress] AMP対応化で、使用しているその他のプラグインによるエラーが出ないようにするために – プラグイン別 [2020/11/16] ID24858
[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン「WP Super Cache」で再構成した- ID22640 [2020/12/11]
[WordPress] 「AMP」まとめ – ID22520 [2021/02/11]
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]
[WordPress] 広告プラグイン – Advanced Ads Pro (有料版)の応用機能(Header/Footerにコードを挿入) – ID15074 [2020/05/03]
[WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – ID14027 [2021/03/07]

autoptimize

[WordPress] WP-Optimizeのキャッシュの設定 – Autoptimizeとの併用効果 – ID14373
[WordPress] Autoptimize プラグインの威力 – ブログ・サイトのスピード改善対策プラグイン – 更にAMP対応まで進めた結果 – ID7804 [2020/05/15]

cache

[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン「WP Super Cache」で再構成した- ID22640 [2020/12/11]
[WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る – ID10304 [2020/09/11]
[WordPress] WP-Optimizer プラグイン – ID10746 [2020/09/24]
[WordPress] Lazy Load Optimize プラグイン – ID10744
[WordPress] EWWW Image Optimize プラグイン – ID10740
[WordPress] Autoptimize プラグイン – サイト・速度改善 – ID10738

Plugin

[Synology] Threat Preventionとファイヤーウォールの連携 – ID28980 [2021/03/22]
[WordPress] 2020年初心者ガイダンス・WordPressを構築し快適に運用するための必須プラグイン一覧 (2020/03/10現在) – ID10673
[WordPress] キャッシュプラグインの比較 – 「WP Fastest Cache」 vs 「WP-Optimize」- ID9787 [2020/07/23]
[WordPress] Google Adsense導入 – 必要な手順とセッティング – 広告プラグインを選ぶ – 運用の実際 – ID9539 [2021/01/04]
[WordPress] PhastPress プラグイン Ver.1.33 – Databaseを不適正にいじってしまう(バックアップ教訓)- ID14393 [2020/1/29]
[WordPress] Autoptimize プラグインの威力 – ブログ・サイトのスピード改善対策プラグイン – 更にAMP対応まで進めた結果 – ID7804 [2020/05/15]
スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID:11145
  • by Google Ads ID23293

Update ID21920

AAV, BIOLOGICS, education
[GT] 遺伝子治療の課題 – H30, 経済産業省より – ID2031△ [2020/01/08]

Post Views: 36 2019現在における遺伝子治療薬の製造課題 Full particleとEmpty Particleの比率の増大化改善 Full Particle定量法の精度改善 効果的なスケールアップ: […]

AAV, AVIGEN, BIOLOGICS, company, COMPANY-FAVOR
気になる企業 – AVIGEN – Genezymeに買収 – ID11266 [2020/03/03]

Post Views: 32 現在は、Avigen社は存在しない。 「気になる企業」シリーズ。バイオ医薬品に関わる企業の情報を取りまとめています。遺伝子治療薬の開発ベンチーであった「Avigen」社は、Genezymeに […]

更新された投稿の最新順

スポンサーリンク
by Google Ads ID19417
スポンサーリンク
  • by Amazon ID19245
  • by Amaozn ID13196
スポンサーリンク

スポンサーリンク
  • by Google Ads ID:11145
  • by Google Ads ID23293
  • by Google Ads ID24747

最新記事(WPプラグイン,ID:14818)

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているが、スタイルはある- ID30216 [2021/05/30]

Post Views: 34 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 15 パンクズリスト パンクズリストは、サイトで移動した履歴です。フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法は多数ありま […]

スポンサーリンク
by Google Ads ID19417
plugin, site setting, WordPress
Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 25 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、 […]

Page: 1 2 20
スポンサーリンク

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145

最新記事(WordPress, ID:14681)

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているが、スタイルはある- ID30216 [2021/05/30]

Post Views: 34 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 15 パンクズリスト パンクズリストは、サイトで移動した履歴です。フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法は多数ありま […]

WordPress
[WP] Ultimate MemberをSimple WP Membershipに変更 – ID29745 [2021/05/13]

Post Views: 19 目次1 はじめに2 編集履歴 はじめに WordPressサイトでメンバーシップ機能を実現するプラグインの話です。Ultimate Member (UM) プラグインについては、当サイトをい […]

スポンサーリンク
by Google Ads ID19417
security, Synology, WordPress
[Synology] Threat Preventionとファイヤーウォールの連携 – ID28980 [2021/03/22]

Post Views: 21 目次1 はじめに2 ルーチンワークの概要3 ルーチンワークの詳細3.1 Threat Preventionの操作3.2 ネットワークセンターの操作4 まとめ5 Alert5.1 ET POL […]

plugin, site setting, WordPress
Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 25 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、 […]

Page: 1 2 24
スポンサーリンク

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145

最新記事(Synology, ID:14676)

security, Synology, WordPress
[Synology] Threat Preventionとファイヤーウォールの連携 – ID28980 [2021/03/22]

Post Views: 21 目次1 はじめに2 ルーチンワークの概要3 ルーチンワークの詳細3.1 Threat Preventionの操作3.2 ネットワークセンターの操作4 まとめ5 Alert5.1 ET POL […]

network, Synology
[Synology] DS918+/DS920+の2つのネットワークインターフェースを一つに束ねると通信速度を早くできるらしい – でも、Windowsとのファイル転送(SMB)で遅くなったのはなぜ? – ID29535 [2021/05/01]

Post Views: 22 目次1 はじめに1.1 Bondの作成1.2 SMBによる転送速度が遅くなった!?2 解決3 まとめと今後4 編集履歴 はじめに Bondの作成 DS918+/DS920+には、2つのLAN […]

folder, Synology
[WP] ブログにおけるメタディスクリプションの意義と設定方法 – ID28775 [2021/03/14]

Post Views: 33 目次1 はじめに2 メタディスクリプションの機能3 メタディスクリプションの設定4 お勧めのプラグイン5 編集履歴 はじめに メタディスクリプションは、検索エンジンで表示されるページの1つの […]

スポンサーリンク
by Google Ads ID19417
app, Synology
[Synology] 写真の管理 / Photo Station & Moments – ID26326 [2020/12/31]

Post Views: 40 目次1 はじめに1.1 必要なもの2 補完的に活用する3 バックアップ4 Windows10のiCloudフォトからバックアップを取る5 MomentsからPhoto Stationのフォル […]

plugin, Synology, WordPress
[WordPress] 高速化プラグイン「AMP」と定期的に全てのページの静的キャッシュ作成プラグイン「WP Super Cache」で再構成した- ID22640 [2020/12/11]

Post Views: 31 目次1 はじめに2 ページのAMP化のみでもレスポンス改善は十分高い3 キャッシュプラグインを追加する4 プラグインは専用機能がいい4.1 WP Super Cacheの設定のほんとのところ […]

Synology
[Synology] 以前からeo光(1Gコース)なのに速度が遅く感じられていた(100Mbps) – 6A型(CAT6)のネットケーブルで改善 (300 ~ 500Mpbs) – ID24316 [2021/03/30]

Post Views: 29 目次1 eo光の速度の測定2 コースごとの測定3 ケーブル交換前の速度4 ケーブル交換後の速度5 その他のコースで測定6 使用したケーブル7 回線テスト eo光の速度の測定 もう数年以来、ネ […]

Page: 1 2 21
スポンサーリンク

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11145

その他記事(ALL-RANDOM, ID:16786)

BIOLOGICS, KNOWLEDGE, patent, vaccine
[特許関連/記事紹介] 新型コロナウイルスに関する特許の概説記事から – ID15052 [2020/05/02]

Post Views: 32 記事へのリンクのみ 新型コロナウイルスの特許について、現状を踏まえて概説している記事です。特許の学習として実務的に参考になります。 SARS-CoV-2 Coronavirus and pa […]

LIFE
[ライフ] お世話になった入社当時の上司が亡くなった – 自分も年齢を重ねて、しみじみ思う[2020/11/13] ID24761

Post Views: 44 目次1 知らない内にお別れしていたのですね2 イノベイティブな方でした3 強い影響4 会うタイミングを逃してしまった5 ご冥福を! 知らない内にお別れしていたのですね 突然の訃報で、落ち着か […]

スポンサーリンク
by Google Ads ID19417
スポンサーリンク

スポンサーリンク
by Google Ads ID:11143(2)

- 以下のツールに敬意を示します -
Support to AMP (Accelerated Mobile Pages) by official AMP plugin for WordPress, and compatible powered by
Post viewing : Flex Posts - Widget and Gutenberg Block