カテゴリー
plugin Synology WordPress

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

本編 >

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

by Google Ads ID:8603

概要

当サイトのGoogleSpeed Insightsで、サイトのスピードを測定(2020/02)したところ、モバイルでのスピードは、4~5%でした。そこで、サイトスピードを改善するプラグインを検討したところ、「Autoptimize」を基本に、その他キャッシャ関連のプラグインを組み合わせると、10倍程度の劇的な改善(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の設定項目は、以下で行った設定検討の結果を元にして決めた項目にて、測定を行いました。

図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を使用してみる

プラスアルファ

スポンサーリンク

by Google Ads ID:19417(C)

その他の併用効果

(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)

今後

スポンサーリンク
  • WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311
  • FIDECO M.2 NVMe PCIE SSDケース USB3.1 Gen2 by AMAZON ID20626
  • Onvian【2個セット】USB A to USB C 3.1オス-Type-Cメス usb type c 変換アダプタ 両面USB3.1 10Gbps高速データ伝送 高交換性 合金製 by AMAZON - ID20727

更なる速度改善は、以下の項目が考えられますが、個人サイトで出来るものとそうでないものもリストしました。

  • 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] Flex Posts – Widget and Gutenberg Block プラグイン – Gutenberg エディター対応 – ID8804

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

plugin, Synology, WordPress
[WordPress] Gutenbergエディター対応のプラグイン – 2020/01現在で使用していたプラグイン・リスト – ID6597

WordPressのテーマ(theme)をTwenty Twenyにしてから、標準のエディタをGutenbergに完全移行した。クラシックのエディタは、iPadで編集している場合、指でのクリックミスの多さに苦しんでいた。 […]

plugin, WordPress
[WordPress] 会員限定ページや会員のみが閲覧できるページやページ内のブロックを作る – 調査編 – ID3866 [2019/12/08]

調査を結果、Ultimate Memberプラグインをインストールしています。 当サイトは、Ultimate Memberプラグインを試験的に導入しています。よろしければ、「いたずら」してみて下さい。使い勝手などがわかる […]

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

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

plugin, Synology, WordPress
[WordPress] その昔憧れた、パーソナル・データベース生活を実現できる – イベント・プラグイン – を選定/導入する – ID18377 [2020/05/23]

目次1 イベント・プラグインの使用目的1.1 背景1.2 目的2 イベント・プラグインを選ぶ理由3 検討したイベント・プラグイン4 イベントプラグイン5 Events Make Easy5.1 選定理由5.2 使い方6 […]

plugin, Synology, WordPress
[WordPress] Adminimize プラグイン — ログイン・ユーザー毎に表示するメニュー項目を選択的に非表示にできる – ID11816

目次1 課題2 結果3 編集履歴 課題 WordPressの編集時に、邪魔なメニューを消します。そのプラグインが、「Adminimize」です。 バックエンド・メニューの表示数を少なくしたり、必要でないものを消したりでき […]

Page: 1 2 8
スポンサーリンク
WD 内蔵 SSD M.2 2280 / WD BLACK SN750 NVMe 500GB / WDS500G3X0C by AMAZON - ID14311

ここまで

< 本編はここまで。

Update ID21920

Raid, Synology, WordPress
[Synology] DS918+ , 3 x 8TB HDD Raid 5に最後の1台のHDDを追加する – ID16478 [2020/05/30]

目次1 RAID5 (3 x 8TB HDD)へHDD追加2 準備3 ストレージマネージャ4 「概要」画面5 「ボリューム」画面6 「ストレージプール」画面7 「HDD/SSD」画面8 ストレージプール画面に戻る8.1 […]

BIOLOGICS, company, moderna, mRNA, vaccine
[Vc] Moderna – COVID-19 ワクチン臨床(Phase I, dose-escalation, open-label trial, 45 healthy adults) プレリミナリー結果 ID19527 [2020/07/24]※

Moderna社のCOVID-19/Phase I Preliminary Report HomePage An mRNA Vaccine against SARS-CoV-2 — Preliminary Report […]

BIOLOGICS, equipment-harvest, merckmillipore, process, production
[Bio-Equi] TFF – MerckMillipore – ID23123 [2020/9/19]

MerckMillipore TFF タンジェンシャル・フロー・フィルトレーションによるバッファー置換と濃縮を行う機材 Merck site 種類 Pellicon sigle pass TFF 循環をせずに一定量のろ液 […]

AAV, BIOLOGICS, BioReliancd, brammer, catalent, CMO, company, Lonza, TAKARA BIO, WuXi, Yposkesi
[Bio-rAAV] 遺伝⼦治療における代表的な委託製造施設 (CMO) – ID1881 [2020/07/17]

rAAV vectorを製造するCMOリスト 企業サイト サイト 製造サイト 特徴 関係 WuXi Advanced Therapies US 1,000L 遺伝子治療医薬品の開発と製造、AAV vector suspe […]

AAV, BIOLOGICS, equipment-chromato, purification, resin, thermo
[Bio-Equip] Thermo Fisher 「CaptureSelect」 – AAV1~AAXをキャプチャリングできるAffinity resin – ID2320

Bio-Equipment 動画による説明 : CaptureSelect AAV8, AAV9, AAVX ラクダ抗体を利用したAffinity Resin技術 Binding Capacity: >10e13~ […]

BIOLOGICS, company, material, supplier
[Bio-Membrane] Clarification, Sterile, UF/DF – Supplierまとめ – ID18241 [2020/06/30]

Membrane/System Supplierのまとめ 総合メーカーとしては、2強のMerckMilliporeとSartoriusが残っています。Sartoriusは、CDMOサービスを開始しています。 PALLと3 […]

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

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

Page: 1 2 18

最新記事(WordPress, ID:14681)

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

plugin, WordPress
[WordPress] blogに載せる写真のメタデータは、EWWW Image Optimizerで取り除く – ID321 [2020/08/20]※

EWWW Image Optimizerプラグイン WordPressのblogで載せる写真は、そのままのサイズでアップしてはいけません。メタデータはそのまま残っているためです。メタデータのGeotabには、位置情報が記 […]

IT, Synology, WordPress
[Synology] RT2600acのVPN Plus Serverの導入 – 個人でも高いセキュッリティが得られる高速WiFiルーター – ID37

目次1 出先からRT2600acにアクセスするには1.1 VPN経由1.2 VPNのインストール(VPN Server側)1.3 L2TPの設定 (VPN Server側)1.4 iPhoneの設定 出先からRT2600 […]

Page: 1 2 22

最新記事(Synology, ID:14676)

plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

security, Synology
[Synology] 自宅に設置したNASにWordPressを構築してblog配信する場合、高まるネット・リスクとその対策 – ID22342 [2020/09/11]

目次1 はじめに2 ドコモ口座の不正引き落としサイバー事件3 ドコモ口座について4 考えられるパスワードの漏出5 Synology NAS製品での対策6 まとめ はじめに これまで、DS918+を導入しblogを公開して […]

Synology
[Synology製品紹介] NVR DVA3219 – 顔認識システム – これからのセキュリティ対策は、中小企業でも顔認識も可能かも – ID22315 [2020/09/10]

目次1 NVR DVA32192 用途3 セキュリティ4 コスト5 システム構築6 用途7 管理方法8 能力 NVR DVA3219 NVR DVA3219は、Synology Surveillance Stationの […]

Page: 1 2 20

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

key-word, medicine
[用語] HSCT; 造血幹細胞移植 – ID21271 [2020/08/11]

HSCT; Hematopoietic stem-cell transplantation; 造血幹細胞移植 目次1 定義2 課題2.1 同種造血幹細胞移植 定義 Global Hematopoietic Stem Ce […]

KNOWLEDGE
[用語] 角膜上皮幹細胞疲弊症 – ID23088 [2020/09/18]

結膜と角膜の境界にある角膜輪部(黒目の最も外側)には、角膜上皮幹細胞が存在している。先天的または、後天的に失われて角膜再生が低下し透明性が悪くなり視力を低下させる。 ジャパン・ティッシュ・エンジニアリング(J-TEC)は […]

BIOLOGICS, company, COMPANY-FAVOR, Shire, TAKEDA
気になる企業 (だった) – Shire plc – 買収で大きくなり、関連する「のれん代」も含めてTAKEDAが2019年に買収 ID20763 [2020/07/14]

Shire plc アイルランドにHeadquarterを置く希少疾患に注力する企業でした 多数のベンチャー企業を買収して大きくなった その買収に関連する「のれん代」は2兆円 TAKEDAからの買収前で、血液事業の減損処 […]

LIFE
悪運が強い人のはなし – ID16190

その人は、大型トラックを整備していました。フロント周りの点検をしていた時、向かい合わせに停車していたもう一台の大型トラックが動き出しました。その人は、びっくりして突差に肩をすぼめ両肩で挟まる形で体の位置をとりました。両手 […]

english
今日の英語 – We would be grateful – 感謝します – ID12868

As long as you kindly process the payment, we would be grateful.二ワンス : 支払い、よろしくお願いします 要素(1) as long as : 限り要素( […]

BIOLOGICS, equipment-culture
[Bio-Equip] 試薬・培地の包装 – ID4631

Charge Bag ILC Dover Bag Media Sodium Bicarbonate, Dextrose, Glutamine, Sodium PHosphateDxycycline Sodium Carb […]

Page: 1 2 135

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