カテゴリー
plugin Synology WordPress

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

本編 >

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

概要

当サイトの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 高機能無線ルーター VPN Plus対応 日本正規代理店アスク サポート対応 保証2年 NT934 RT2600ac by Amazon ID24327
  • エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタ ホワイト LD-GPA/WH5 by Amazon ID24327

サイトのスピード

自分のサイトのスピードを知るには、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の設定項目は、以下で行った設定検討の結果を元にして決めた項目にて、測定を行いました。

図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を連結

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

(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を使用してみる
スポンサーリンク

by Google Ads ID23409

プラスアルファ

その他の併用効果

(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 文言整備

関連記事

スポンサーリンク
  • by Amazon ID13339
  • by Amazon ID13211
スポンサーリンク

ここまで

< 本編はここまで。

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

Update ID21920

anime, LIFE
[アニメ] ザ・サード〜蒼い目の少女〜 (2006) – 3つ目の眼を額にもつ「ザ・サード」が人類を管理している世界 – ID2480 [2020/10/20]

ザ・サード 2006年、TV全24話、人類が犯した過ちを2度と起こさせないために、3つ目の眼を額に持つ「ザ・サード」と呼ばれる存在から管理されている人類。ソードダンサーと呼ばれる少女がいました。この世界では、技術革新は許 […]

anime, LIFE
[アニメ] ヒロイック・エイジ – 宇宙戦闘物語 – ID24353 [2020/10/20]

目次1 ヒロイック・エイジ2 キーワード ヒロイック・エイジ 2007年、TV全26話、宇宙物/宇宙戦艦物/宇宙や人類の発祥の不思議を描いています。3話くらいまでは我慢して視聴してください。おそらく、TVで毎週リアルタイ […]

anime, LIFE
[アニメ] 終わりのセラフ – 人対吸血鬼 – 大人の事情と子供の理想は相ゆずれない – ID2444 [2020/10/28]

終わりのセラフ 2015年、TV全24話、吸血鬼が世界を支配している世界と、一部の人の軍組織は、人の世界を取り戻そうとしている攻防を背景に、家族というテーマを描いてます。しかし、大人の事情は、子供たちの家族の理想にはお構 […]

スポンサーリンク
by Google Ads ID19417
english
今日の英語 – we are excited to announce ~ – 報告できることを嬉しく思っている表現 [2020/10/28]

We are excited to announce {目的句}  「目的句」に対してエキサイトしています。例文 : Today we are excited to announce the launch of a ne […]

BIOLOGICS, education, guidance
[Bio-Edu] Bio Safety Levelとは – 遺伝子組換え実験と輸送など – カルタヘナ法に関わる – ID144 [2020/10/28]

目次0.1 Bio Safety Level0.2 関係法令1 カルタヘナ法に従う承認申請手続き Bio Safety Level Bio Safety Level (BSL)とは、細菌やウイルスの取り扱いについて、その […]

BIOLOGICS, production, vaccine
[Bio-Edu] Plasmid DNA (pDNA)の製造方法 – ID24375 [2020/10/25]※

目次1 plasmid DNAの抽出方法2 生産フロー3 plasmidの培養方法 plasmid DNAの抽出方法 plasmid DNA (pDNA)の製造で最もクリティカルな工程は、その抽出である。pDNAを生産す […]

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

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

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

plugin, WordPress
[Data Link] WordPress blog URLを引越しする時に必要なリダイレクトの種類について、まとめられたサイトのリンク – ID3276

URLを引越しする時に必要なリダイレクトの種類について – TCD WordPress Themeより 種々のリダイレクト法についてまとめられている。

plugin, WordPress
[WordPress] ソーシャルボタン・プラグイン – どれがいい? – AMP対応の「AddThis」を使用 – ID2943 [2020/09/28]※

目次1 WordPressでシェアボタンは何がいい?2 AMP対応 WordPressでシェアボタンは何がいい? 参考の記事は2016年のもので少し古いですが,WordPressのソーシャル投稿用のボタン・プラグインとし […]

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

目次1 Cool Timeline Pro1.1 利用中止 Cool Timeline Pro 有料版のCool Timelineプラグインです。現在利用を中止しています(2020/10/04) 時系列でスタイリッシュに […]

plugin, Synology, WordPress
[WordPress] SPAM Management – Throws SPAM away プラグイン – スパムコメントの排除 – ID4016

Throw SPAM away Throws SPAM away プラグインのインストール 機能 日本語が無いコメントは無視する 設定 コメント入力欄の近くに、”Please copy and paste Japanes […]

スポンサーリンク
by Google Ads ID19417
Page: 1 17 18 19
スポンサーリンク

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

最新記事(WordPress, ID:14681)

security, Synology, WordPress
[Synology] RT2600ac – Threat Prevention ユーティリティで重大度が高いパケットのドロップ設定、ポリシー設定でローカルネットワークを守る – ID3461 [2019/11/22]

目次1 Synology Router RT2600ac2 Threat Prevention3 Web Application Attackとは(参考1)3.1 1. Web Applicationの仕組み3.2 2. […]

スポンサーリンク
by Google Ads ID19417
Synology, WordPress
[Synology] DS Note for iOS – ID3326

DS Note Synology NASのOSはDSM6ですが、そのApp群は結構豊富にあります。DS Noteは、マイクロソフトのOne Noteの代わりになると当初、ユーザーの皆さんからは、期待を込めて褒めちぎられて […]

plugin, WordPress
[Data Link] WordPress blog URLを引越しする時に必要なリダイレクトの種類について、まとめられたサイトのリンク – ID3276

URLを引越しする時に必要なリダイレクトの種類について – TCD WordPress Themeより 種々のリダイレクト法についてまとめられている。

Synology, WordPress, YouTube
[Synology] NAS – Photo Stationに保管しているファイルをYouTubeにアップする機能を試してみた – 「ロンドンからスカボロ城へ行く(2016)」- ID3200

目次1 ‪PhotoStation1.1 YouTubeへのアップロード1.2 ブログからのリンク方法2 編集履歴 ‪PhotoStation 以前旅行した時の写真のスライドショーは、Synology NASに保管してい […]

adsense, WordPress
[WordPress] アフィリエイト/グールグル・アドセンス – アドセンス狩り – ID226

目次1 アフィリエイト2 Google AdSense アフィリエイト アフィリエイトは、Web上の広告システム。登録サイトも色々あるらしい。登録申請が必要。 アフィb A8 iTunes Amazon Google A […]

plugin, WordPress
[WordPress] ソーシャルボタン・プラグイン – どれがいい? – AMP対応の「AddThis」を使用 – ID2943 [2020/09/28]※

目次1 WordPressでシェアボタンは何がいい?2 AMP対応 WordPressでシェアボタンは何がいい? 参考の記事は2016年のもので少し古いですが,WordPressのソーシャル投稿用のボタン・プラグインとし […]

Page: 1 17 18 19 22
スポンサーリンク

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

最新記事(Synology, ID:14676)

Synology, WordPress
[Synology] NAS上に暗号化された共有フォルダーの設定と運用方法、その考え方 – ID2758 [2020/04/18]※

目次1 暗号化の意義1.1 データ流出のケースは大きく2つ1.1.1 1. ローカル・ネットワークからの流出1.1.2 2. 物理的な流出2 暗号化方式2.1 用語2.1.1 暗号キー2.1.2 キーマネージャ2.1.3 […]

Synology, WordPress
[Synology] Photo Stationの鍵の掛かったアルバム共有方法 – ID17 [2020/10/06] 工事中

目次1 はじめに2 アルバムにパスワードを掛ける2.1 DS Photoから行う2.2 DSMから行う はじめに Synoloyg NASを導入すると無料のパッケージに「Photo Station」という写真の管理・共有 […]

Synology, WordPress
[Synology] NASの証明書の期限がきれたので更新したのに、前の証明書の内容が残って証明できなかった件 – ID1947

証明書 httpsのページとして公開可能にするには、証明書が必要です。 今日で証明書期限がきれるので、Let’s Encriptionの更新をマニュアルで実施した。更新した証明書の期限は、3ヶ月後の日付に更新されていたが […]

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

目次1 Cool Timeline Pro1.1 利用中止 Cool Timeline Pro 有料版のCool Timelineプラグインです。現在利用を中止しています(2020/10/04) 時系列でスタイリッシュに […]

plugin, Synology, WordPress
[WordPress] SPAM Management – Throws SPAM away プラグイン – スパムコメントの排除 – ID4016

Throw SPAM away Throws SPAM away プラグインのインストール 機能 日本語が無いコメントは無視する 設定 コメント入力欄の近くに、”Please copy and paste Japanes […]

Synology, WordPress
iPhone/iPadでWordPressの管理する場合、動画ファイルで標準でないmovファイルはどうするか – ID1152

iPhone/iPadの写真をスライドショーにするとmov形式になるが、WordPressでは、標準ではmovを再生はできないので、プラグイン (TinyMCE Advance)やフォーマット変換Appなどを使用しなけれ […]

スポンサーリンク
by Google Ads ID19417
Page: 1 17 18 19 20
スポンサーリンク

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

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

AAV, BIOLOGICS, key-word
[用語] AAV; Adeno Associated Virus – ID18717

AAV Adeno Associated Virus; アデノ随伴ウイルス、アデノウイルス(Adenovirus)とともに発見されることが多かったことからこのように命令された。 編集履歴 2020/07/11 Mr.HA […]

AAV, AveXis, BIOLOGICS, drug, Novartis
[遺伝子治療薬] ZOLGENSMA – スイスのノバルティス社(AveXis)が開発した遺伝子治療薬 – ID23156 [2020/06/22]

目次1 ZOLGENESMA1.1 薬価収載1.2 Drug Product2 審査報告書 ZOLGENESMA スイスのノバルティス社(売上高約500億ドル, Investing.com調べ)が買収したAveXis社の […]

BIOLOGICS, equipment-culture
[Bio-Equip] Xuri Cell Expansion System W25 – ID8624

ロッキング方式の細胞の拡大培養システム Xuri Cell Expansion System W25, GE Healthcare – https://www.gelifesciences.co.jp/cat […]

スポンサーリンク
by Google Ads ID19417
AAV, BIOLOGICS, company, COMPANY-FAVOR, Yposkesi
気になる企業 – Yposkesi (イポスケシ) – ヨーロッパ最大のAAV/Lentivirus Vectorの生産能力を謳う – ID12817

YposkesiはフルサービスCDMOである。 フランス Genenthonのスピンオフ, 2016 患者団体 AFM-Telethon (イタリア) SPI投資ファンド 50,000 ft2 (5,000m2) up […]

KNOWLEDGE
[Kw] 日本で起こっている大雨と突風の被害は前線に沿っている – ID18680 [2020/07/09]

梅雨前線 この1週間で、九州全域での豪雨による河川の氾濫・決壊が起こり、大きな被害が起こっています。今後も心配です。 気象予報士が、よく天気図を見ながら前線がどうしたとか言っていますが、その本当の意味が分かっていませんで […]

Page: 1 17 18 19 141
スポンサーリンク

スポンサーリンク
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