このページで: [隠れる]
最初の満足のいくペイント (FCP) 特定のサイトの速度ランキングを評価するために使用される、Googleによって追跡されるメトリックです.
重要なパフォーマンス測定として, ウェブサイトの管理者はそれについて精通している必要があります, それを評価して最適化する方法. この記事では、この値について知っておく必要があるすべての概要を説明します.
最初の満足のいくペイントとは何ですか (FCP)?
FCP, またはその長い名前 最初の満足のいくペイント は、ブラウザに配信される実際の表示コンテンツの速度パフォーマンスを評価するパフォーマンスメトリックの名前です。.
これは、基本的なページ構造を構築するために必要なWebブラウザによるリソースのロードとは対照的です。.
素人の用語では、これは、この値が訪問者の観点からページがどれだけ速く読み込まれるかを表すことを意味します. この指標に含まれるものを理解するために、この点で成果物と見なされるコンテンツの種類を示します。:
- マルチメディアコンテンツ
- 画像と動画
- フォント付きのレンダリングされたテキスト
- 背景画像
- SVGとラスター画像
- 非白いキャンバス要素
- インタラクティブなフィールドとフォーム
ページが要求されたときにブラウザによってレンダリングされるすべてのタイプのコンテンツは、FCPとしてラベル付けされます.
これは、それと他のパフォーマンスメトリックとの重要な違いを示しています, 定義により, これはと見なされます ユーザー-中道政治.
この値により、 ディファレンシャルスピードパフォーマンスランキング そのような要素の負荷に応じて. 現時点では、行われた測定に基づいて3つの速度カテゴリがあります: 速い (FCP <1s), 適度 (FCP <3s), and 遅い (FCP> = 3s)>>.
FCPランキングを評価する方法
特定のサイトを測定する最も簡単な方法 (またはページ) グーグル自身に依存することによってです PageSpeed Insights.
出力結果と同様に, オンラインサービスは、他の有用なパフォーマンスメトリックと値も測定します, 最初の入力遅延を含む, 最大の満足のいくペイント, および累積レイアウトシフト.
このGoogleツールには、2つの重要なセクションもあります: 機会 ページをより速くロードする方法についてアドバイスを提供します, と 診断 リソースに関する詳細情報を明らかにする.
それらは全体的なパフォーマンススコアに影響を与えないことに注意することが重要です.
この値は、実際には、Googleのツールによって判断された全体的なパフォーマンススコアの一部にすぎません。.
これは、このメトリックの高度な最適化が速度ランキングの向上につながることを意味します. でも, PageSpeed Insightsは、 フィールドツール, 値の測定に使用.
その他の手法には、Chromeユーザーエクスペリエンスレポートが含まれます, Google検索コンソール (独自のスピードレポート付き), そしてその ウェブバイタル JavaScriptライブラリ. さまざまなデータラボのサードパーティツールおよびフレームワークも使用できます.
最も簡単な方法の1つは、 GoogleChromeWebブラウザ. すばやく簡単なステップバイステップのアプローチは、このガイドに従うことです:
- Google Chrome Webブラウザーを開き、指定されたサイトまたはページに移動します.
- 右クリックしてを押します ナビゲート ボタン. これにより、 DevTools パネル.
- トップパネルには特定のタブが表示されます, 開く パフォーマンス. クリックしてください 記録 オプション, それから 更新 ページ, その後、録音を停止します.
- 表示されるタイミングセクションに値メトリックが表示されます.
の一部として ラボツール Web管理者がFCP値を測定するために使用できる, 最も一般的に使用されるものは灯台です, Chrome DevTools, およびPageSpeedInsights (これは、フィールドツールとラボツールの両方と見なされます).
灯台 は、Googleが開発したオープンソースツールであり、 Webページの品質を向上させる.
監査を作成することで機能し、ChromeDevToolsから両方を実行できます (それはそれに統合されています), コマンドライン, またはノードモジュールとして (パッケージ). この記事で示したGoogleChromeWebブラウザーのアプローチは、このテクノロジーを利用しています。.
戦略を立てて最適化を開始する
FCP速度の最適化に関する最善のアドバイスは、 PageSpeedInsightsツール.
そうする理由は、これがGoogleが開発した製品であり、Web開発者の論理を示しているという事実です。, Webブラウザがコンテンツを実行する方法, そしてこれが検索エンジンによってどのように認識されるか.
シンプルな Google検索 全体的なスコアを改善するために使用できる多くのページ速度の最適化と手法を明らかにします. それらの多くは実装されるかもしれませんが, 最適なアプローチは最初に 分析する と 分類する サイトの種類とターゲットの目標, だけでなく、訪問者の大多数.
これにより、ウェブマスターは最初に何に焦点を合わせるかについて明確な戦略を立てることができます。.
これは、ウェブマスターができるようになるため、非常に重要であると見なされています, 後で, 結果を比較対照する. The 最初の出発点 最適化が始まる前のウェブサイトです. 後で, 実装されたすべての手順が 最終最適化サイト 分析することができます.
Webホスティング固有のFCP最適化
広く使用されている最適化手法のほとんどは、 一般的なテクニック ターゲットサイトの読み込みを高速化する.
でも, グーグルとユーチューブで利用可能なすべてのガイドに従うためにジャンプする前に、あなたが以下の処方箋を理解して従うことを確認してください 実行されたすべてのアクションを分析して計測する必要があります 全体的な効率を計算するには. 多くの場合, 小さな “修正” 実行に数日かかる可能性のある大規模なオーバーホールよりも、特定のサイトのパフォーマンスにはるかに大きな影響を与える可能性があります.
また、一部の最適化はアクションに依存しない可能性があることを理解してください, むしろ ウェブホスティングプロバイダー そしてその インストールされたサービスとアプリケーション. 一般的, 特定のアプリケーションにより適した特定のホスティングプランがあります. 彼らの側の全体的な積載速度に影響を与える可能性のある他の基準は、次のとおりです。:
- データセンターの場所
- ホスティングリソースの割り当て
- Webホスティングアプリケーション固有の最適化
- 実装されたキャッシング機能
- コンテンツ配信ネットワークの可用性
- Webリソースの最適化
最高のFCP速度最適化ウェブホスティング
Googleが追跡する指標であるFCPサイト速度に関する前述のすべての基準を達成するため, したがって、それはあなたのウェブサイトにSEOの影響を及ぼします, 信頼性が高く高速なウェブホスティングプロバイダーに移行する必要があります.
最も推奨されるものの1つ, 最速, また、最も信頼できるWebホスティングプロバイダーはSiteGroundです。.
同社は、次のようなさまざまな速度最適化ツールを提供しています SiteGround SuperCacher, それはで動作します Cloudflare CDN, また、メインのサーバーはドイツのフランクフルトにあるため、世界中にサーバーがあります。 (中央インターネットエクスチェンジポイント).
SiteGroundは、最高のWordPressホスティングソリューションを提供するために、WordPress自体が最も推奨するホスティング会社の1つです。.
SiteGroundの最高の機能の1つは、無料のマネージドマイグレーションです。. あなたのを終えるために ウェブサイトの速度 最適化 無料でSiteGroundに移行する 彼らのチームが数分であなたのウェブサイトをセットアップするので.
1. FCP最適化手法 (Ttfb値の調整)
ほとんどの最適化は、通常、次のようにして行われます。 技術的な改訂 サイトとページの操作方法. これは簡単でも複雑でもかまいません, 現在の状態とウェブマスターの専門知識に応じて.
ウェブマスターによって設定された意図された目標は、最適化が実装される前後に測定することができます. そうすることにより、結果を追跡および分析することができます.
最も重要な手順の1つは ttfb値の調整.
これは実際には 最初のバイトまでの時間, 訪問者が認識したネットワーク遅延の指標 (グーグルのような検索エンジン). これは、訪問者がコンテンツにアクセスして対話したいときにWebサーバーがどのように動作するかについてかなり良い見積もりを提供します.
ttfb値を減らすことにより、ターゲットサイトの速度を向上させる方法はたくさんあります。. ほとんどのウェブサイト管理者の間で人気のある効果的な戦略は次のとおりです:
- コンテンツ配信ネットワークの展開 — 静的ファイルと一般的に読み込まれるリソースをクラウドサーバーでホストする, 地理的に異なる場所からそれらをロードするのはアスターになります.
- Webホスティングサーバーの最適化 — 減速が発生した場合, Webホスティングプロバイダーと話し合い、ハードウェアサーバーで提案された最適化を有効にすることをお勧めします. グーグルやアマゾンによって宣伝されているようなクラウドホスティングサーバーへの移行も、トラフィックの多いサイトで人気のある選択肢です.
- Webキャッシング –サーバー側のキャッシュは、多くの場合、Webホスティングサービスの一部として提供されます. これを有効にすると、サーバーの読み込みがはるかに高速になります, 同時にリソースを節約します.
さらにTtfb値を下げる提案も利用できることに注意することが重要です. この値の最適化は、全体的なページ速度の全体的なスコアに大きな影響を与えます.
2. FCP最適化手法 (レンダリングブロッキングを排除する)
レンダリングブロックリソースは、 不適切なコード これにより、特定のWebサイトの読み込みが大幅に遅くなる可能性があります, または実際に “壊す” 特定の機能を無効にすることで.
最近のほとんどのWebサイトでは、レンダリングをブロックするリソースは主にJavaScriptとCSSコードです。. この理由は, 意図的に, そのコードの一部はWebブラウザによってロードされます.
彼らは不適切に書かれているので, ブラウザは “下がる” コードが意図した方法で機能しないため、セクションをロードするか、実際に動作を停止します. そのようなコードは排除されるべきです すべてのページで徹底的に.
がある 2つの主なアプローチ そのようなリソースが表示される可能性を減らすために行うことができます, または未解決の問題を修正する:
- コードを書き直す — 古いコードを更新して書き直すことにより、このような問題が発生する可能性が低くなります.
- コードを縮小する — これは、コードの実際の最適化を指します, 未使用のコードが延期されるように. CSSコードに関しては、関連するデザインのみを特定のページに適用する必要があります. 大きなファイルでCSSコードを呼び出す必要はありません.
コードはそれに応じて圧縮および縮小することもできます。. 確かにあります WordPressプラグイン このコンテンツ管理システムのユーザーが使用できる.
3. FCP最適化手法 (コンテンツの圧縮に依存する)
画像は、ほぼすべてのWebページで最も広く使用されているリソースを構成します. このために, それらの最適化は、全体的なページ速度の向上中に不可欠です. ほとんどの場合、一般的なアドバイスは 非可逆圧縮を適用する, これは、画像のファイルサイズを目立った品質で下げるタイプの画像最適化です。.
これにより、ファイルサイズが大幅に小さくなります, 最新の圧縮アルゴリズムと手法のほとんどは、実際にはほぼ同じ外観の画像を生成します. 正しい設定が適用されている場合、訪問者は元のバリアントと最適化されたバリアントの大きな違いを確認できません。.
画像はグラフィックソフトウェアで作成することをお勧めします。 Web用にエクスポート/保存 オプション (利用可能な場合) これは通常、そのような使用法に最も適切なアルゴリズムを選択するためです.
ビデオやその他のビジュアルコンテンツの圧縮も実行できます, サイトにアクセスするユーザーの大多数を考慮に入れることによって. これにより、ウェブマスターはどの圧縮方法を適用するかを知ることができます。.
結論
すべてのサイトのコンテンツが異なるという事実を考えると, 目標, と訪問者, すべての人に役立つ単一のガイドはありません.
FCPは、サイトの速度を決定する最も重要な値の1つと見なされています. さらに, 検索エンジンの場合 (特にGoogle) 特定のページとそのスコアにインデックスを付ける, これは、ランキングを決定する最も重要な値の1つでもあります.
これはそれを改善するための追加のインセンティブを与えます.
このトピックに関する重要なアドバイスは、常にWebサイトを改善し、パフォーマンスを積極的に分析することです。. コンテンツとトラフィックの蓄積として, そのため、速度調整を実行する必要が生じます.
Webテクノロジーも時間の経過とともに向上します, したがって、私たちが提供できる追加のヒントは、動的コンテンツとインストールされたアプリケーションを合理化および最適化する方法を認識することです。.
このHowtohosting.guideの記事は、Googleの情報を提供しています。 Web.dev guide under the CC Attribution 4.0 license.
また読む:
ミラーホスティングとウェブサイトバックアップの違いは何ですか?
What is wp-config.php (WordPress Configuration File)