MR.HARIKIRI-INSIGHTS

タグ: PageSpeed Insights

  • [WordPress] ページスピード評価に使うPageSpeed Insightsの測定指標について – 少し解説

    [WordPress] ページスピード評価に使うPageSpeed Insightsの測定指標について – 少し解説

    初めに

    2021/12/04
    サイトのスピードを評価するには、GoogleのPage Speed Insights (PSI)が使われます。PSIでは、以下の指標が測定されます。これらの指標の1〜4までは、以下に解説されている順にそのイベントが発生し測定されて行きます。指標5は、1〜4の合計です。指標6は、2021年に追加された画面の表示状態に関する指標で、スピードを直接的に測定するものではなく、「見た目の指標」であることを測定する指標になっています。

    2023/10現在，WordPressを使用しているなら，GoogleのSite Kit プラグインをインストールするとPage SpeedをWordPress内で使用できるようになる．フル機能版のWeb Siteにもリンクが張られるので，アドレスを忘れても問題ない．

    測定すべき重要な指標

    以下の解説は、web.devの解説の和訳ですが、分かりにくい部分があったので少し修正追記しています。

    ユーザーを指標としたパフォーマンス指標 – web.dev –

    https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured
    1. First Contentful Paint (視覚コンテンツの初期表示時間、FCP): この指標は、ページの読み込みが開始されてから、ページのコンテンツのいずれかの部分が画面にレンダリング(が完了)されるまでの時間を測定します。(ラボ環境, 実際のユーザー環境)
    2. Largest Contentful Paint (最大視覚コンテンツの表示時間、LCP): この指標は、ページの読み込みが開始されてから、最もサイズの大きいテキスト ブロックまたは画像要素が画面にレンダリング(が完了)されるまでの時間を測定します。(ラボ環境, 実際のユーザー環境)
    3. First Input Delay (初回入力までの遅延時間、FID): この指標は、ユーザーが最初にサイトを操作したとき (リンクをクリックしたり、ボタンをタップしたり、JavaScript を使用して実装されたカスタム コントロールを使用したりしたとき) から、その操作に実際に応答するまでの時間を測定します。(実際のユーザー環境)
    4. Time to Interactive (操作可能になるまでの時間、TTI): この指標は、ページの読み込みが開始されてから視覚的なレンダリングが完了し、初期スクリプトが (あれば) 読み込まれ、ユーザーの入力に対してすばやく確実に応答できるようになるまでの時間を測定します。(ラボ環境)
    5. Total Blocking Time (合計ブロック時間、TBT): この指標は、長時間に渡りメイン スレッドがブロックされ、入力の応答性が妨げられることで発生する FCP と TTI の間の(各指標の)時間の合計を測定します。(ラボ環境)
    6. Cumulative Layout Shift (累積レイアウト シフト数、CLS): この指標は、ページの読み込みが開始されてからページのライフサイクルの状態が hidden に変わるまでの間に発生した予期しないレイアウト シフトの累積スコアを測定します。(ラボ環境, 実際のユーザー環境)

    編集履歴

    2021/12/04, Mr. Harikiri
    2023/10/08, 追記(WordPress pluginであるGoogle Site Kit)

  • [WO] Google PageSpeed Insights以外のPage測定 – WEB PAGE TEST、更なる速度改善サービス:criticalcss

    [WO] Google PageSpeed Insights以外のPage測定 – WEB PAGE TEST、更なる速度改善サービス:criticalcss

    サイトのレスポンス改善

    Google PageSpeed Insightsは、とても良い測サイトだが、使い込んでいくと何がわるいのか、もっと知りたくなってくる。

    JavaScriptやCSSのコードの最適化プラグインであるAutoptimizeの設定をよく見てみると、Criticalcss.comでcriticalcssを作れば、更に速度が速くなるとある。

    システム構成

    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 (標準エディタ)

    Criticalcss.com

    Criticalcss.comのサービスは以下の通り

    • Regular : 2£ (2×150円程度)/月
    • WordPress : 7£
    • 30日間のお試し期間がある(クレジットカード登録が必要)

    どれだけ効果があるか、試してみないとわからないが、今回は、退散することにした。

    そのHome Pageには、「WebPageTest」が最初に記載されていて、「GoogleのPageSpeed Insights」が次に記載されていた。

    WebPageTestは、老舗のサイトのだろうと推察した。

    criticalcss.com

    WebPageTest

    WEB PAGE TEST

    https://www.webpagetest.org

    リンクにゆけば、URLの入力画面があるので、調べたいURLを入力する

    3回測定されるまで30秒程度待つ。

    どの回でもよいので、クラフをクリックすると、グラフ(Water fall graph)が出てくる。

    通信要素のHeader, JavaScript, CSS, imageなどが、どのタイミングから、どのくらいの時間を要しているかがシーケンス図により分かりやすい。

    一度、自分のブログページもお試しあれ。

    PSI-1
    PSI-2
    PSI-3
    PSI-4
    PSI-5
    PSI-6
    PSI-7
    PSI-8
    PSI-9
    PSI-10
    PSI-11
    PSI-12
    PSI-13
    PSI-14
  • [WP]プラグイン- PhastPress Ver.1.33はDatabaseを不適正にいじってしまう

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

    はじめに

    この記事は、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/myblog/wordpress/7804/

    Google Console Search – Page Speed Insightsを使う

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

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

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

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

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

    編集履歴

    2020/01/29, Mr.Harikiri