タグ: 速度改善

  • 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は、に画像の遅延読み込み系プラグインで一番有能なのはコレ!

    機能の意味

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

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