Harikir blog and DataBase

ブログ

  • [WP]プラグイン- PhastPress Ver.1.33はDatabaseを不適正にいじってしまう

    [WP]プラグイン- PhastPress Ver.1.33はDatabaseを不適正にいじってしまう

    Post Views: 614

    はじめに

    この記事は、2020/01当時の古い情報です。プラグインをインストールする前にはバックアップを取っておく必要があることの戒めとして当時の記録として以下に残しています。

    前回までに、(0)「Autoptimize Ver. 2.6.1」プラグイン(CSS, JavaScript, HTMLの最適化)をペースとして、(1)キャッシュ・プラグイン、(2)画像遅延ローダー・プラグイン、(3)画像最適化・プラグイン、およびFlying Analyticsでとりあえずの最適化を完了した。

    今回は、「Autoptimize Ver. 2.6.1」プラグインの代替プラグインとして「PhastPress Ver. 1.33」を試してみた。

    システム構成

    Synology NAS

    • 2020/07現在
    • DS920+ (DS918+からWordPressを載せ替え, 2020/07)
    • Disk Station Manager, Version 6.2.3-25426 Update 2 (2020/09/16現在)

    WordPress

    • Version : 5.5.1-ja
    • Theme : Twenty Twenty
    • Editor : Gutenberg (標準エディタ)

    方法

    1. 「Updraftplus Ver. 1.16.21」プラグインで、全てをバックアップ。以下の種類がバックアップされる
      1. プラグイン
      2. テーマ
      3. アップロード
      4. その他
      5. データベース
    2. 「PhastPress」プラグインをインストール、有効化
    3. なにも設定せず、PageSpeed Insightsで速度スコアを測定
      1. 1回目 : 40
      2. 2回目 : 45
      3. 3回目 : 56
    4. 50代のスコアに喜ぶ
    5. Safariでブラウズ
      1. あるはずの画像が1つもない
      2. 画像はリンクを貼っていたので、タップすると→画像が現れた
      3. 画像が無いため、その分のスピードが速くなったものと解釈
    6. 投稿をエディタで確認
      1. 画像は表示されている
    7. 元に戻すことにした
    8. 「Updraftplus」プラグインで復元
      1. まず、プラグイン、テーマの2つを復元。1分以内で完了
      2. Safariでブラウズ→画像が見えない
      3. 更に、アップロード、その他の2つを復元。1分以内で完了
      4. Safariでブラウズ→まだ、画像は見えない
      5. 最後に、データベースを復元。1分以内で完了
      6. Sarariでブラウズ→アイキャッチゃ画像、記事内の画像、最近の投稿に付属の小さい画像の全てが見えるように復元できた
    9. スコア確認: やはり50代には乗らない
      1. 1回目 : 37
      2. 2回目 : 46
      3. 3回目 : 47
    10. 1つバグがあれば、多数のバグがあると考えられる。もう少し熟成するまで「PhastPress (現バージョン 1.33」は使用しないこととした。

    結論(教訓)

    1. クリティカルな影響を及ぼすと考えられる機能のプラグインは、あまり若いVersionは危険であると承知すべし。
    2. 「UpdraftPlus Ver.1.16.21」プラグインのバックアップと復元機能は、正常であることが確認できた。
    PhastPress
    PhastPress

    2020/01/29 ばりきり(Mr)

    WP] Autoptimizeの威力 – ブログ・サイトのスピード改善対策プラグイン

    https://harikiri.diskstation.me/wordpress/7804/

    Google Console Search – Page Speed Insightsを使う

    https://harikiri.diskstation.me/wordpress/4372/

    [WP] WP-Optimizeのcache設定 – Autoptimizeとの併用効果

    https://harikiri.diskstation.me/wordpress/8049/

    WP] 遅延読込プラグインはどれがいい? (2020)

    https://harikiri.diskstation.me/wordpress/8071/

    編集履歴

    2020/01/29, Mr.Harikiri

  • [WordPress] PhastPress プラグイン Ver.1.33 – Databaseを不適正にいじってしまう(バックアップ教訓)

    [WordPress] PhastPress プラグイン Ver.1.33 – Databaseを不適正にいじってしまう(バックアップ教訓)

    Post Views: 865

    注意

    この記事は、2020/1現時点での記事です。PhastPressプラグインで起きた問題は、当時のものなので、現時点では改善されていると思われます。このプラグインでの不具合は、今後のプラクインの導入時にはバックアップを取ることをお勧めする教訓を含みます。そのために、あえて不具合の詳細を示しています。

    前回までに、(0)「Autoptimize Ver. 2.6.1」プラグイン(CSS, JavaScript, HTMLの最適化)をペースとして、(1)キャッシュ・プラグイン、(2)画像遅延ローダー・プラグイン、(3)画像最適化・プラグイン、およびFlying Analyticsでとりあえずの最適化を完了した。

    1. Autoptimize Ver.2.6.1
    2. キャッシュブラグイン
    3. 画像遅延ローダー
    4. 画像最適化プラグイン
    5. Flying Analytics

    システム構成

    Synology NAS

    • 2020/07現在
    • DS920+ (DS918+からWordPressを載せ替え, 2020/07)
    • Disk Station Manager, Version 6.2.3-25426 Update 2 (2020/09/16現在)

    WordPress

    • Version : 5.5.1-ja
    • Theme : Twenty Twenty
    • Editor : Gutenberg (標準エディタ)

    今回は、「Autoptimize Ver. 2.6.1」プラグインの代替プラグインとして「PhastPress Ver. 1.33」を試してみた。

    方法

    1. 「Updraftplus Ver. 1.16.21」プラグインで、全てをバックアップ。以下の種類がバックアップされる
      • プラグイン
      • テーマ
      • アップロード
      • その他
      • データベース
    2. 「PhastPress」プラグインをインストール、有効化
    3. なにも設定せず、PageSpeed Insightsで速度スコアを測定
      • 1回目 : 40
      • 2回目 : 45
      • 3回目 : 56
    4. 50代のスコアに喜ぶ
    5. Safariでブラウズ
      • あるはずの画像が1つもない
      • 画像はリンクを貼っていたので、タップすると→画像が現れた
      • 画像が無いため、その分のスピードが速くなったものと解釈
    6. 投稿をエディタで確認
      • 画像は表示されている
    7. 元に戻すことにした
    8. 「Updraftplus」プラグインで復元
      • まず、プラグイン、テーマの2つを復元。1分以内で完了
      • Safariでブラウズ→画像が見えない
      • 更に、アップロード、その他の2つを復元。1分以内で完了
      • Safariでブラウズ→まだ、画像は見えない
      • 最後に、データベースを復元。1分以内で完了
      • Sarariでブラウズ→アイキャッチゃ画像、記事内の画像、最近の投稿に付属の小さい画像の全てが見えるように復元できた
    9. スコア確認: やはり50代には乗らない
      • 1回目 : 37
      • 2回目 : 46
      • 3回目 : 47
    10. 1つバグがあれば、多数のバグがあると考えられる。もう少し熟成するまで「PhastPress (現バージョン 1.33」は使用しないこととした。

    結論(教訓)

    1. クリティカルな影響を及ぼすと考えられる機能のプラグインは、あまり若いVersionは危険であると承知すべし。
    2. バックアッププラグインである「UpdraftPlus Ver.1.16.21」プラグインのバックアップ機能と復元機能は、正常であることが確認できた。

    2020/01/29 ばりきり(Mr)

    WP] Autoptimizeの威力 – ブログ・サイトのスピード改善対策プラグイン

    https://harikiri.diskstation.me/wordpress/7804/

    Google Console Search – Page Speed Insightsを使う

    https://harikiri.diskstation.me/wordpress/4372/

    [WP] WP-Optimizeのcache設定 – Autoptimizeとの併用効果

    https://harikiri.diskstation.me/wordpress/8049/

    WP] 遅延読込プラグインはどれがいい? (2020)

    https://harikiri.diskstation.me/wordpress/8071/
  • [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) [2020/01/27]

    [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) [2020/01/27]

    Post Views: 731

    画像遅延プラグインの効果

    以下の3つの画像遅延ローダーをGoogleのPageSpeed Insightsのスコアで比較しました。

    Lazy Loader
    LazyLoad Plugin – Lazy Load Images, Videos, and Iframes
    a3 Lazy Load

    画像遅延処理のPluginの有無でPageSpeed Insightスコアは、以下のように改善できた。

    結論

    結論から言うと今回の結果から、採用したPluginは、 「Lazy Load – Optimize Images Ver.2.3.2」です。

    評価方法

    例えば、以下のアドレスをGoogle Page Speed Insightsに入力して測定します。(https://harikiri.diskstation.me/wordpress/7804/)

    結果は、モバイル : 40程度　→ 50程度

    少し長文のページのスコアも測定しました。

    結果は、モバイル : 25程度 → 35程度

    比較検討したPluginのバージョン

    • Lazy Loader Ver.5.1.2
    • Lazy Load – Optimize Images Ver.2.3.2
    • a3 Lazy Load Ver 2.2.2

    結果の概要

    Lazy Load と Lazy Loader

    Lazy Load >= Lazy Loaderと、PageSpeed Insightsスコアで若干の差があったが、ほぼ同等。

    ただし、Lazy Loadでは、連続でスコアを測定すると、だんだん良くなる傾向がある。cache関係で相性が良いのかもしれない。

    a3 Lazy Load

    パソコンでのPageSpeed Insightsスコアが高く出る傾向がある。長文の投稿ページでは、スコアの改善が殆どなかった。これからのPage作りは、モバイル・オリエンテッドなどで、パソコンでのスコアは、以下の通り良かったが、採用を見送ることにした。

    ルート(myblog) モバイル

    • モバイル : 35⇨57
    • パソコンで91が最大値。その他のPluginでは、モバイル55が最大/パソコンでは、90を超えない(87程度)

    ルート(myblog) 長文ページ

    • モバイル : 25⇨25
    • パソコン : 65⇨91

    まとめ

    これまでに、Autoptimize プラグインによるCSS, JavaScriptなどの最適化、WP-Optimizeによるcacheのによる最適化、EWWW Image Optimizerによる画像の軽量化を検討してきました。今回は、画像の遅延表示によるPageSpeed Insightsスコアの改善を検討しました。

    1. Autoptimizeプラグイン (Java Script, CSSおよびhtml最適化)
    2. WP-Optimize プラグイン(キャッシュのみ有効化)
    3. EWWW Image Optimizer (画像の縮小化)

    総合改善度

    まとめに記載したように、ごく最近まで速度に関するスコアについて知識がなかったため、関連するプラグインは、何も入れていなかった。そのときのスコアから現在までのスコアの改善度は、以下の通りです。

    まだまだですが、当初のことを思えば、劇的な改善度です。

    PageSpeed Insightsスコア: Plugin導入前からの変遷

    ルート(myblog)

    長文のページ

    • モバイル : 2~3 → 50程度
    • モバイル : (未測定) → 35程度

    以上

  • [用語] DOM; Document Object Model

    [用語] DOM; Document Object Model

    Post Views: 628

    DOM; Document Object Model

  • [用語] CDN ; Content Delivery Network – ネットワークサービス用語

    [用語] CDN ; Content Delivery Network – ネットワークサービス用語

    Post Views: 618

    Content Delivery Network

  • [WordPress] WP-Optimizeのキャッシュの設定 – Autoptimizeとの併用効果

    [WordPress] WP-Optimizeのキャッシュの設定 – Autoptimizeとの併用効果

    Post Views: 1,166

    ID14373

    AutoptimizeとWP-Optimizeの併用

    前回のAutoptimizeの設定では、cacheは逆効果でした。

    (当時の記事の補足。原理をよく考えるとわかりますが、キャッシュは複数あるとコンフリクトを起こしてしまうため、複数のキャッシュ・プラグインの使用は避けるべきです。導入した結果がよかったとしても, 2021/10/30 by Mr. Harikiri)

    ページのスピードアップをするには、以下の知識が必要です。この記事の中では、このことを知らずにテストしていた頃の記事なので、以下の知識について先ずは知っておいてください。

    Googleは、モバイル・ファーストとしてAMPという技術/ルールを提唱しています。このルールは、過度なJava, CSSなどのコードをシンプルにするように求めています。それによって、軽量化されてページの読み込みスピードが向上します。AMPに対応させるにはプラグインを使用することができます。その場合、この記事の中で評価しているAutoptimizeプラグインは、使用を避けてください。その理由は、AutoptimizeがAMPに対応していないからです。AutoptimizeもAMPと同様の目的にJava, CSSのコードを軽量化する独自の方法を使っています。おそらくコンフリクトします。blogをAMPに対応させない場合は、Autoptimizeプラグイン、または、その他の同様のプラグインを、AMPに対応させるには、AMPプラグインを使う用にして、それぞで使い分ける必要があります。

    キャッシュ・プラグインは、AMPプラグイン、Autoptimizeプラグインとは異なる原理で動いているので、併用は可能です。その場合、AMPプラグインに適するキャッシュ・プラグインがあるとでしょう。同様に、Autoptimizeプラグインに適したするキャッシャ・プラグインがあるはずです。

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

    PageSpeed Insights

    https://pagespeed.web.dev

    WordPressのdatabaseの最適化に、WP-Optimizeをインストールしました。

    このプラグインには、cache機能もあります。cacheをONにしてPageSpeed Insightsで測定しました。

    WP-Optimizeには、画像の遅延読み込み「Lazy Load」機能があるため、EWWW Image Optimizerなどを使っている場合、同じ機能がdefaultで有効になっているので、どちらかを無効に設定します。コンフリクトするとPageSpeed Insights (PSI)のスコアが5ポイント程低下します。

    その他の設定は、前回の記事を継承しています。

    結果

    WP-Optimizeプラグインのcache機能をONにしてSPIモバイル・スコアを測定した結果、更なる速度改善の効果があり、Autoptiizeプラグインとの併用効果が確認できました。

    WP-OptimizeプラグインのPage cachingをしない場合、ページスピードは、モバイル/パソコンそれぞれ40/68でした。

    1E5ED779-BEC4-4081-B65B-E843B42BD4FF
    D9408D1E-0710-40E4-8726-784D7376882B

    WP-OptimizeのPage cachingをONすると、ページスピードは、モバイル/パソコンそれぞれ52/82となり少し速度が改善しました。

    • cache: off – SPIスコア:
      • モバイル : 40
      • パソコン : 68
    • cache: on – SPIスコア:
      • モバイル : 68
      • パソコン : 82

    まとめ

    PageSpeed Insightsによるモバイル・スコアは、cacheをONにすることで、モバイル40→52、パソコン68 → 82にスピードアップしました(2020/01/25現在)。

    編集履歴

    2020/01/25 はりきり(Mr)
2020/05/29 文言整備、追記(まとめ)
2021/11/20,修正(モバイル/パソコンの測定データのソース写真取り違え)
  • [Town] イチョウ・難波宮跡公園（なにわのみやあと公園）[2020/01/25]

    [Town] イチョウ・難波宮跡公園（なにわのみやあと公園）[2020/01/25]

    Post Views: 595

    イチョウ

    1昨年(2018)の台風で、難波宮跡のイチョウが弱ってしまいました。いつまた、このスライドのように元気になるでしょうか。1年でしょうか、3年でしょうか、5年、10年? また、元気な枝葉を見せて欲しいです。

    2020/01/25

    現在のイチョウ

    難波宮跡

    イチョウは、史跡 難波宮跡がある辺りの街路樹です。この辺りにはNHK大阪や、その他官庁が集積しています。

    編集履歴

    2020/02/06, Mr.はりきり
2021/06/20,追記(2020/04頃の難波宮跡の写真)
  • [Patent] アメリカの特許法は2011年からやっと先発明主義から先願主義になった – ID7979 [2020/01/25]

    [Patent] アメリカの特許法は2011年からやっと先発明主義から先願主義になった – ID7979 [2020/01/25]

    Post Views: 646

    先発明主義

    世界の特許制度は、先願主義であったがアメリカは2011年まで先発明主義であり、かつ、公表制度がなかったため、「ステルス特許」と呼ばれる特許が問題になっていた。

    米国の特許制度 – ウィキペディアより

    https://ja.wikipedia.org/wiki/米国の特許制度

    今では、すべてのの国で先願主義となり、アメリカでもこ出願後1年以内に公表される。日本では、1.5年後に公表され3年以内に審査請求しない場合、それは特許性を失い公知となる。

    日本の特許検索

    J-Plat Pat

    編集履歴

    2020/01/25 Mr.はりきり
  • Google Search Console – PageSpeed Insightsを使う

    Google Search Console – PageSpeed Insightsを使う

    Post Views: 522

    Google Search Console

    日々のアクセス状況(検索での表示回数、クリック回数、クリック率など)をグラフやテーブルで示してくれます。

    Google Search Consoleへの登録の仕方は、他のBlogerの皆さんに任せて、ここでは述べませんが、最近特に気になっている、ユーザーエクスペリエンスの向上のためのページの反応性の測定です。その測定のために、Google Search Consoleを頻繁に使っています。

    サイトの賑わいは、記事の内容、読み易さ、タイムリー性、あと、表示速度が主に考えられると思います。

    表示速度については、Googleは、スマートフォンを中心にページをデザインすべきであると言っています。どんどんPCではネットサーフィンしなくなり、スマフォかタブレットになっていますね。

    当サイトも、Synology NASにWordPressサーバーを立ち上げて、1年になりますが、GoogleにIndexしてもらうという意味もようやく分かり、この記事を書いています。

    Page Speed Insightの使い方

    まだ試験運用版とのことですが、サイトのペード毎に速度を測定できます。

    方法

    Google Search Consoleに飛び、左タグから「速度(試験運用版)を探しタップすると、「Page Speed Insights」のリンクが現れる。

    入力欄にサイトのページアドレスを入力し、分析をタップする。

    結果の見方

    しばらくすると、円グラフで、ページの総合的な速度評価(速度スコアは、Lighthouseでの測定に基くとあります)が表される。

    下方にスクロールすれば、測定結果と改善可能な問題に対する対策が示されています。自分のサイトの速度的な弱点を客観的に知ることができる。

    • フィールドデータ
    • Origin Summary
    • ラボデータ
      • First Contentful Paint (秒)
      • First Meaningful Paint (秒)
      • 速度インデックス(秒)
      • CPUの初回アイドル(秒)
      • インタラクティブになるまでの時間(秒)
      • 初回入力遅延の最大推定時間(ミリ秒)
      • ページが表示される様子を写真のスナップショットのように左か右へ10枚の画像で表示される(表示が早いと、左側から表示が始まる)
    • 改善できる項目 (改善可能な項目が表示される、短縮できる推定時間)
      • オフスクリーン画像の遅延読み込み(sec)
      • レンダリングを妨げるリソースの除外(sec)
      • 適切なサイズの画像(sec)
      • 使用していないCSSを削除指定ください(sec)
    • 診断 (減らせるデータ量)
      • ウェブフォント読み込み中のテキストの表示 (ms)
      • 静的なアセットと効率的なキャッシュポリシーの配信(ms)
      • メインスレッド処理の最小化(ms)
      • 過大なDOMサイズの回避(値)
      • JavaScriptの実行にかかる時間の低減(sec)
      • クリティカルなリクエストの深さの最小化(ms)
      • リクエストの数を少なく、転送サイズを小さく維持してください(KB)
    • 合格した監査(数)

    当サイトは、Synology NASでWordPressサーバーを個人的に立てているので、管理の行き届いたレンタルサーバーではないため、自分で反応速度などのユーザービリティを調整しないといけません。

    当サイトの反応速度の改善記事は、以下をご参照ください。

    [WP] Autoptimizeの威力 – ブログ・サイトのスピード改善対策プラグイン

    https://harikiri.diskstation.me/wordpress/7804/
  • [用語] Blockbuster drug – 医薬品開発企業が開発した医薬品のうち・・・

    [用語] Blockbuster drug – 医薬品開発企業が開発した医薬品のうち・・・

    Post Views: 591

    他を圧倒する薬効効果により、多大な利益をもたらす医薬品。