タグ: 速度最適化

  • [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は、老舗のサイトのだろうと推察した。

    WebPageTest

    WEB PAGE TEST

    https://www.webpagetest.org

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

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

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

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

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

  • Google Search Console – PageSpeed Insightsを使う

    Google Search Console – PageSpeed Insightsを使う

    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/myblog/wordpress/7804/
  • [WordPress] Lazy Loader プラグイン – 画像の読み込み遅延によるサイト・レスポンスの改善

    [WordPress] Lazy Loader プラグイン – 画像の読み込み遅延によるサイト・レスポンスの改善

    Lazy Loader

    Lazy Loaderをインスールした。参考にしたblog siteは、に画像の遅延読み込み系プラグインで一番有能なのはコレ!

    機能の意味

    サイト閲覧時の画像表示を一旦停止しておき、文字などを先に表示して、ユーザーがスクロールなどの操作が可能になってから、画像のロードを開始します。この機能によりユーザービリティを向上できます。

    この機能は、画像関連プラグインにも含まれていることが多いので、多重に機能させないように、その他のプラグインの同機能を確認して無効にしておく必要があります。