pertama Contentful Paint (FCP)
Apa pertama Contentful Paint measures, apa sebuah baik FCP score, mengapa ini tidak sebuah Core Web Vital, bagaimana ini differs dari pertama Paint dan LCP, dan cara perbaiki sebuah slow satu.
Bahasa
pertama Contentful Paint (FCP) adalah time dari ketika sebuah halaman dimulai memuat untuk ketika apa pun bagian dari -nya konten — text, image, SVG, atau non-white canvas — pertama renders. baik adalah ≤1,8 s di 75th percentile dari pengguna nyata. ini adalah Tidak sebuah Core Web Vital: sinyal peringkat adalah LCP, INP, dan CLS. FCP adalah sebuah diagnostic metric (lab dan field) itu's sebuah membangun block dari LCP — ini happens di atau sebelum LCP — so ini adalah mainly berguna untuk catching render-blocking resources dan slow TTFB. di Lighthouse 10 ini adalah 10% dari performa score. Perbaiki ini oleh eliminating render-blocking CSS/JS, cutting TTFB, inlining critical CSS, menggunakan font-display: tukar, dan preconnecting untuk diperlukan origins.
TL;DR — pertama Contentful Paint (FCP) adalah moment sebuah pengunjung sees pertama bit dari Anda halaman — apa pun text, image, atau graphic — alih-alih sebuah blank white screen. Lebih cepat adalah better; di bawah 1,8 seconds adalah “good” (terjemahan) “baik” mark. ini adalah sebuah berguna speed periksa, tetapi ini adalah tidak satu dari metrics Google menggunakan untuk peringkat.
Apa FCP sebenarnya adalah
Ketika seseorang clicks sebuah tautan untuk Anda halaman, ada sebuah pendek stretch di mana mereka’re staring di tidak ada apa pun — sebuah blank screen — sementara browser fetches dan memproses Anda halaman. pertama Contentful Paint adalah instant itu blank screen turns ke sesuatu nyata: sebuah headline, sebuah logo, sebuah photo, apa pun pengunjung dapat sebenarnya see.
itu’s seluruh idea. FCP jawaban satu sederhana pertanyaan: “Bagaimana long until itu user sees itu halaman adalah alive dan melakukan sesuatu?” (terjemahan) “Bagaimana panjang until pengguna sees halaman adalah alive dan melakukan sesuatu?” sebuah halaman itu paints konten di half sebuah kedua feels fast. sebuah halaman itu sits blank untuk three seconds feels rusak — dan orang leave.
Evidence for this claim FCP measures from navigation until the first text, image, SVG, or non-white canvas content is rendered. Scope: Current web.dev FCP definition and qualifying content types. Confidence: high · Verified: web.dev: First Contentful PaintApa yang termasuk sebagai “content” (terjemahan) “isi halaman”
FCP fires ketika browser draws apa pun dari ini onto screen:
- Text (sebuah heading, sebuah paragraf, sebuah nav tautan)
- Images, including background images
<svg>graphics- sebuah non-white
<canvas>element
sebuah plain background color oleh itself melakukan tidak count — itu’s sebuah berbeda, sebelumnya hal called pertama Paint. FCP hanya counts ketika nyata konten menampilkan up.
apa sebuah baik score?
Google’s bands, diukur di seluruh nyata pengunjung:
| FCP time | Rating |
|---|---|
| 1,8 seconds atau lebih sedikit | baik |
| 1,8 – 3,0 seconds | perlu improvement |
| di atas 3,0 seconds | Poor |
Anda’ll see Anda FCP di alat like PageSpeed Insights dan Lighthouse — yang sama reports itu tampilkan Anda Core Web Vitals.
melakukan FCP memengaruhi my Google rankings?
Tidak — tidak secara langsung. ini adalah bagian sebagian besar orang mendapatkan wrong. metrics Google sebenarnya menggunakan untuk peringkat adalah three Core Web Vitals: LCP, INP, dan CLS. FCP tidak satu dari them.
tetapi di sini’s mengapa ini adalah masih worth watching: hal itu membuat FCP slow — sebuah sluggish server, big stylesheets dan scripts itu block halaman dari drawing — adalah sering sama hal itu hurt Largest Contentful Paint (LCP), yang adalah sebuah peringkat sinyal. So memperbaiki FCP’s root penyebab frequently helps LCP too — tetapi ini adalah tidak sebuah jaminan, since LCP memiliki penyebab dari -nya own ( size dan muat priority dari -nya spesifik largest element). Think dari FCP sebagai smoke alarm: worth memeriksa, tetapi tidak proof fire’s out.
quick memperbaiki
jika Anda FCP adalah slow, biasa suspects (dan apa untuk melakukan):
- Render-blocking files. CSS dan JavaScript di Anda halaman’s
<head>dapat berhenti browser dari drawing apa pun until mereka finish memuat. ini adalah #1 penyebab. - sebuah slow server. jika Anda server takes sebuah panjang time untuk respond (tinggi Time untuk pertama Byte), browser dapat’t paint until bytes arrive.
- Fonts itu hide Anda text. beberapa font setups leave text invisible untuk up untuk three
seconds sementara sebuah web font memuat. Switching aturan untuk
font-display: swapmenampilkan fallback text immediately.
ingin teknis versi — lab-vs-field kesenjangan, FCP/LCP diagnostic chain, dan penuh perbaiki list? Switch untuk Advanced tab.
TL;DR — FCP adalah time dari navigation mulai untuk ketika apa pun halaman konten (text, image,
<svg>, atau non-white<canvas>) pertama renders. ini adalah tidak sebuah Core Web Vital — ini adalah sebuah supplementary, lab-dan-field diagnostic metric, dan sebuah membangun block dari LCP (FCP happens di atau sebelum LCP). Field thresholds (p75): baik ≤ 1,8 s, perlu-improvement ≤ 3,0 s, poor > 3,0 s. di Lighthouse 10 ini adalah 10% dari performa score. Karena FCP’s clock dimulai di navigation — ini mencakup redirect time, connection setup, dan TTFB — lab (Lighthouse) dan field (CrUX) angka sering diverge. Perbaiki ini di mana ini lives: render-blocking CSS/JS pertama, lalu TTFB, lalu fonts.
Apa FCP measures (precisely)
Google’s definition, dari Philip Walton’s web.dev artikel, adalah accuracy spine di sini:
“Pertama Contentful Paint (FCP) measures itu time dari ketika itu user pertama navigated untuk
itu halaman untuk ketika any part dari itu halaman’s konten adalah dirender pada itu screen.” (terjemahan) “pertama Contentful Paint (FCP) measures time dari ketika pengguna pertama navigated untuk
halaman untuk ketika apa pun bagian dari halaman’s konten adalah dirender pada screen.” “Konten,” (terjemahan) “konten,”
per dokumentasi yang sama, berarti “text, images (including background images), <svg> elements,
or non-white <canvas> elements.” (terjemahan) “teks, gambar (termasuk gambar latar),
elemen <svg>, atau elemen <canvas> non-putih.”
kata itu melakukan semua berfungsi adalah apa pun. FCP tidak care apa renders — sebuah 40-pixel logo counts yang sama sebagai sebuah penuh hero image. ini adalah “adalah apa pun pada screen namun?” (terjemahan) “adalah apa pun pada screen namun?” sinyal, yang adalah persis mengapa ini adalah sebuah early indicator alih-alih sebuah completion metric.
Evidence for this claim FCP measures from navigation until the first text, image, SVG, or non-white canvas content is rendered. Scope: Current web.dev FCP definition and qualifying content types. Confidence: high · Verified: web.dev: First Contentful PaintSatu detail itu’s easy untuk miss dan perubahan bagaimana Anda baca angka: FCP’s clock dimulai di navigation, so ini bundles di semuanya itu happens sebelum Anda HTML adalah bahkan parsed. Google’s own Key poin: “FCP includes any unload time dari itu sebelumnya halaman, connection set up time, redirect time, dan Waktu hingga byte pertama (TTFB) yang dapat menjadi significant ketika measured di itu field.” (terjemahan) “FCP mencakup apa pun unload time dari sebelumnya halaman, connection siapkan time, redirect time, dan Time untuk pertama Byte (TTFB) yang dapat menjadi significant ketika diukur di lapangan.” sebuah server itu takes 1,5 s untuk respond memiliki sudah burned sebagian besar dari Anda 1,8 s budget sebelum browser memiliki processed sebuah single byte.
FCP adalah Tidak sebuah Core Web Vital
Let me menjadi blunt tentang ini karena sebagian besar halaman hedge ini: FCP adalah tidak sebuah Core Web Vital dan adalah tidak bagian dari Google’s sinyal peringkat. Core Web Vitals adalah LCP, INP, dan CLS — dan FCP tidak mentioned anywhere pada Google’s Penelusuran peringkat Core Web Vitals halaman.
Apa FCP adalah, di Google’s taxonomy, adalah sebuah “Other Web Vital” (terjemahan) “lainnya Web Vital” — sebuah supplementary metric itu’s berguna untuk diagnosis. web.dev menjelaskannya begini: “itu metrics Waktu hingga byte pertama (TTFB) dan Pertama Contentful Paint (FCP) adalah keduanya vital aspects dari itu loading experience, dan adalah keduanya useful di diagnosing issues dengan LCP (slow server response times atau render-blocking resources, respectively).” (terjemahan) “ metrics Time untuk pertama Byte (TTFB) dan pertama Contentful Paint (FCP) adalah keduanya vital aspects dari memuat experience, dan adalah keduanya berguna di diagnosing issues dengan LCP (slow server respons times atau render-blocking resources, respectively).”
So honest framing untuk stakeholders adalah dua-sided, dan Anda harus state keduanya halves tanpa flinching:
- FCP melakukan tidak memengaruhi rankings secara langsung. jangan mengoptimalkan FCP “untuk SEO.” (terjemahan) “untuk SEO.”
- FCP adalah sebuah great diagnostic untuk LCP, yang melakukan memengaruhi rankings. Render-blocking resources tampilkan up di FCP pertama.
FCP vs pertama Paint (FP)
ini mendapatkan conflated constantly:
- pertama Paint (FP) fires ketika browser paints apa pun di semua — including sebuah bare background color dengan Tidak sebenarnya konten.
- FCP fires hanya ketika eligible konten renders: text, images (including
background images),
<svg>elements, atau non-white<canvas>elements. itu’s sebuah spesifik, spec-didefinisikan list — tidak sebuah longgar “any DOM konten” (terjemahan) “apa pun DOM konten” aturan — dan ini adalah worth mempertahankan precise, since sebuah background image counts bahkan though ini tidak text di DOM.
So FP ≤ FCP, selalu. pada sebagian besar halaman mereka’re nearly identical, karena painting sebuah
background color dengan tanpa konten pada top adalah rare. Ketika di sana adalah sebuah bermakna kesenjangan, ini
biasanya berarti sebuah cosmetic background painted sebelum apa pun nyata konten melakukan. Paint
Timing API mengembalikan keduanya first-paint dan first-contentful-paint entries — tetapi FCP adalah
satu worth analyzing; FP rarely tells Anda apa pun actionable.
FCP vs LCP
lainnya pair orang gabungkan:
- FCP = ketika apa pun konten paints. Fires early. dapat menjadi sebuah tiny logo atau sebuah nav tautan.
- LCP = ketika largest element di viewport renders. Fires di atau setelah FCP.
Google’s wording: FCP measures ketika apa pun konten adalah painted dan LCP ketika main konten adalah painted, so LCP adalah yang dimaksud untuk menjadi lebih selective. Baca itu sebagai “lebih selective,” (terjemahan) “lebih selective,” tidak “certified correct” (terjemahan) “certified correct” — neither metric proves halaman’s sebenarnya main konten adalah menyelesaikan atau berguna untuk pengunjung. FCP hanya mengonfirmasi sesuatu eligible painted; LCP mengonfirmasi largest eligible candidate melakukan. sebuah halaman dapat memiliki sebuah fast FCP (logo di 0,5 s) dan sebuah slow LCP (hero image di 4 s) — itu kesenjangan adalah itself sebuah berguna diagnostic. dan jika Anda FCP adalah close untuk Anda LCP, itu’s sering sebuah baik sign: ini berarti pertama hal painted adalah juga largest satu, dengan Tidak wasted early-paint pada chrome itu tidak penting untuk pengguna.
Evidence for this claim FCP answers when any eligible content first appears, while LCP tracks the largest eligible viewport candidate; neither metric proves the page's main content is complete or useful. Scope: field and lab Confidence: high · Verified: First Contentful Paint (FCP)Satu pengukuran oddity worth knowing: karena security restrictions pada cross-origin image timing, browser API dapat di rare cases report LCP sebelumnya daripada FCP. itu’s sebuah pengukuran artifact, tidak sesuatu itu physically happened.
Thresholds — dan mengapa lab dan field disagree
Field thresholds (CrUX, p75): baik ≤ 1,8 s · perlu improvement ≤ 3,0 s · poor > 3,0 s. Google’s guidance adalah untuk mengukur di 75th percentile dari halaman memuat, split di seluruh mobile dan desktop.
Evidence for this claim A good FCP is 1.8 seconds or less at the 75th percentile; above 3 seconds is poor. Scope: Current web.dev FCP field thresholds. Confidence: high · Verified: web.dev: First Contentful Painttetapi Lighthouse desktop menggunakan berbeda, stricter cutoffs — green adalah roughly 0–0,9 s, orange 0,9–1,6 s, red di atas 1,6 s — karena lab berjalan sebuah bersih, throttled Chrome pada sebuah simulated device, tidak dunia nyata conditions. (itu bands, like score weights di bawah, adalah Lighthouse-versi-spesifik — ini reflects saat ini audit doc sebagai dari ini writing.) Lighthouse FCP score adalah “a perbandingan dari Anda halaman’s FCP time dan FCP times untuk real websites, based pada data dari itu HTTP Archive.” (terjemahan) “sebuah perbandingan dari Anda halaman’s FCP time dan FCP times untuk nyata situs web, berdasarkan data dari HTTP Archive.”
ini adalah single sebagian besar umum sumber dari FCP confusion, so internalize ini:
** 1,8 s “good” (terjemahan) “baik” line adalah field (CrUX p75) threshold. Lighthouse desktop’s “green” (terjemahan) “green” line adalah ~0,9 s. mereka adalah berbeda scales untuk berbeda jobs.**
Field dan lab angka diverge mainly karena mereka sample berbeda populations, tidak karena satu adalah universally “lebih benar.” (terjemahan) “lebih benar.” Lighthouse berjalan sebuah single bersih session pada fixed device/network conditions. Field/CrUX aggregates nyata devices, nyata networks, cache status, dan navigation jenis — including back/forward-cache restores dan prerendered halaman, yang jangan secara otomatis mendapatkan sebuah fresh FCP cara sebuah wajar navigation melakukan; mereka perlu mereka own lifecycle menangani ( web-vitals library melakukan ini untuk Anda). pada sebagian besar situs field angka melakukan baca lebih tinggi — pengguna nyata carry rantai pengalihan, sebelumnya- halaman unload time, dan cold connections sebuah lab jalankan skips — tetapi itu’s sebuah tendency, tidak sebuah aturan. sebelum reading sebuah lab/field kesenjangan sebagai sebuah masalah, periksa Anda’re comparing like-untuk-like (sama device class, sama network conditions). gunakan data lapangan untuk Anda dunia nyata angka dan Lighthouse untuk diagnosis.
Di mana FCP sits di Lighthouse score
di Lighthouse 10 — saat ini versi sebagai dari ini writing, tidak sebuah permanent figure — FCP adalah 10% dari performa score. penuh weighting:
| Metric | Weight |
|---|---|
| Total Blocking Time (TBT) | 30% |
| Largest Contentful Paint (LCP) | 25% |
| Cumulative Layout Shift (CLS) | 25% |
| pertama Contentful Paint (FCP) | 10% |
| Speed indeks | 10% |
performa score adalah sebuah weighted average dari individual metric scores, dan Google notes weightings perubahan di atas time sebagai mereka research evolves — FCP memiliki held di 10% dari Lighthouse 8 melalui 10, tetapi konfirmasi terhadap whatever versi Anda’re berjalan sebelum treating “10%” (terjemahan) “10%” sebagai timeless. practical baca: sebuah perfect FCP dapat hanya move Anda Lighthouse angka so far — dan sebuah buruk FCP sering poin di sebuah buruk LCP too (mereka share root penyebab), though itu’s sebuah overlap worth memeriksa, tidak sesuatu score jaminan.
Apa penyebab sebuah slow FCP
di rough priority order:
- Render-blocking resources — #1 killer. CSS dan synchronous JS di
<head>force browser untuk tunggu: ini dapat’t bangun CSSOM dan render tree, so ini dapat’t paint apa pun, until itu files adalah downloaded dan parsed. - tinggi TTFB — FCP dapat’t fire sebelum bytes arrive. sebuah slow server adalah pertama domino, dan ini adalah di dalam FCP pengukuran.
- rantai pengalihan — setiap redirect adalah sebuah penuh round-trip ditambahkan sebelum pertama byte.
- Webfont memuat strategy —
font-display: block(atau Tidak aturan) dapat leave text invisible untuk up untuk ~3 seconds. bahkan jika paint technically fires pada sebuah background, pengguna sees tidak ada apa pun berguna.
cara perbaiki ini
penuh list, tetapi dengan sebuah priority order docs jangan memberikan Anda. ini adalah umum levers, tidak universal ones — periksa Anda own trace atau filmstrip pertama untuk see yang resource atau phase adalah sebenarnya delaying Anda FCP candidate sebelum reaching untuk memperbaiki (preconnect, preload, sebuah font-display perubahan) itu dapat tidak apply untuk Anda halaman:
melakukan ini pertama (biggest wins):
- Eliminate render-blocking CSS dan JavaScript. Inline critical, di atas—fold
CSS secara langsung di
<head>; muat rest asynchronously; tambahkanasync/deferuntuk non-critical scripts. Repositioning sebuah<link>tag melakukan tidak help — browser tidak akan paint until semua CSS adalah dimuat dan parsed regardless dari di mana tag sits. - Reduce TTFB (server respons time). Caching, sebuah CDN, sebuah lebih cepat origin — apa pun itu mendapatkan pertama byte out sooner secara langsung shaves FCP.
- Perbaiki font memuat. gunakan
font-display: swap(menampilkan fallback text immediately, swaps di web font ketika ready) ataufont-display: optional(skips web font jika ini tidak sudah cached). hindarifont-display: blockuntuk critical text — ini adalah worst untuk FCP.
lalu tidy up rest:
- Preconnect untuk diperlukan origins dengan
<link rel="preconnect">— establishing early connections untuk penting ketiga-party origins dapat save 100–500 ms. - Preload key permintaan (
<link rel="preload">) untuk sebuah critical font atau LCP image. - Minify CSS, hapus unused CSS, hapus unused JavaScript — lebih kecil files parse dan unblock paint lebih cepat.
- hindari multiple redirects, hindari enormous network payloads, sajikan static assets dengan sebuah efficient cache policy, hindari sebuah excessive DOM size, dan minimize critical permintaan depth. umum payload hygiene itu semua feeds pertama paint.
FCP → TTFB → LCP diagnostic chain
ini adalah bagaimana I’d sebenarnya gunakan FCP, dan ini adalah framing docs gesture di tetapi jangan develop. Treat three memuat metrics sebagai satu workflow:
- FCP adalah tinggi → periksa untuk render-blocking resources (CSS/JS di
<head>). itu’s sebagian besar umum penyebab dan fastest win. - juga periksa TTFB — karena FCP mencakup ini, sebuah slow server inflates FCP sebelum apa pun render-blocking bahkan enters picture. web.dev’s guidance: karena TTFB precedes keduanya FCP dan LCP, Anda server seharusnya respond fast cukup itu 75th percentile dari pengguna hit sebuah “good” (terjemahan) “baik” FCP.
- ini sama masalah sering cascade ke LCP — metric itu’s sebenarnya sebuah peringkat sinyal — karena FCP dan LCP frequently share root penyebab. itu’s sebuah overlap worth memeriksa, tidak sebuah jaminan: LCP memiliki factors dari -nya own ( size, priority, dan muat path dari -nya spesifik largest element), so memperbaiki FCP’s penyebab tidak promise sebuah fixed LCP. ini adalah right pertama place untuk look, tidak terakhir langkah.
itu’s nilai dari FCP untuk sebuah SEO: ini adalah sebuah cheap, early baca pada apakah memuat path adalah healthy, sebelum lebih selective LCP pengukuran bahkan menyelesaikan.
AI summary
sebuah condensed take pada Advanced versi:
- FCP = time dari navigation mulai untuk ketika apa pun konten pertama renders — text,
images (incl. background),
<svg>, atau non-white<canvas>. ini adalah “adalah apa pun pada screen namun?” (terjemahan) “adalah apa pun pada screen namun?” sinyal. - FCP adalah Tidak sebuah Core Web Vital. sinyal peringkat adalah LCP, INP, CLS. FCP adalah sebuah supplementary, lab-dan-field diagnostic metric — tidak sebuah direct peringkat factor.
- ini adalah sebuah membangun block dari LCP (FCP happens di atau sebelum LCP), so ini sering catches yang sama render-blocking resources dan slow TTFB itu hurt LCP — yang melakukan memengaruhi rankings — tetapi memperbaiki FCP’s penyebab tidak jaminan LCP adalah fixed; LCP memiliki factors dari -nya own.
- Field thresholds (CrUX p75): baik ≤ 1,8 s · perlu improvement ≤ 3,0 s · poor > 3,0 s.
- Lab ≠ field, dan “field adalah selalu lebih tinggi” (terjemahan) “field adalah selalu lebih tinggi” adalah sebuah tendency, tidak sebuah aturan. Lighthouse desktop’s ~0,9 s “green” (terjemahan) “green” line adalah stricter daripada 1,8 s field threshold karena ini adalah satu bersih jalankan pada fixed conditions; field/CrUX aggregates nyata devices, networks, cache status, dan navigation jenis (including bfcache restores dan prerendered halaman). Match populations sebelum reading sebuah kesenjangan sebagai sebuah masalah — gunakan field untuk Anda dunia nyata angka, lab untuk diagnosis.
- FCP vs FP: pertama Paint fires pada apa pun paint (bahkan sebuah background color); FCP perlu eligible konten (text, images incl. background images, SVG, non-white canvas). FP ≤ FCP selalu.
- FCP vs LCP: FCP = apa pun eligible konten; LCP = largest eligible candidate. Neither proves halaman’s nyata main konten adalah menyelesaikan atau berguna — mereka’re proxies. Fast FCP + slow LCP adalah sebuah nyata, umum kesenjangan.
- Lighthouse 10 (saat ini sebagai dari ini writing) weight: 10% — TBT 30%, LCP 25%, CLS 25%, FCP 10%, Speed indeks 10%; weights shift antara Lighthouse versi.
- Top memperbaiki, di order: eliminate render-blocking CSS/JS → reduce TTFB → perbaiki fonts
(
font-display: swap/optional) → preconnect/preload → minify/cache/DOM hygiene.
Dokumentasi resmi
Utama-sumber documentation pada FCP dari Google.
web.dev (Google)
- pertama Contentful Paint (FCP) — Philip Walton’s canonical definition, “what counts as content” (terjemahan) “apa counts sebagai konten” list, 1,8 s threshold, Key poin tentang TTFB/redirects, dan cara mengukur FCP dengan Paint Timing API dan web-vitals library.
- Web Vitals — di mana FCP sits: sebuah “Other Web Vital,” (terjemahan) “lainnya Web Vital,” supplementary untuk Core Web Vitals (LCP, INP, CLS), berguna untuk diagnosing LCP.
- Largest Contentful Paint (LCP) — FCP-vs-LCP pembedaan dan bagaimana dua relate.
- Time untuk pertama Byte (TTFB) — mengapa TTFB precedes (dan adalah disertakan di) FCP.
- pengguna-centric performa metrics — FCP’s classification sebagai keduanya sebuah lab dan sebuah field metric.
Lighthouse / Chrome Developers
- pertama Contentful Paint audit — Lighthouse desktop rating bands (green ≤ 0,9 s) dan bagaimana FCP score adalah computed terhadap HTTP Archive data.
- Lighthouse performa scoring — metric weights, including FCP di 10% dari performa score di Lighthouse 10.
Google Search Central
- Core Web Vitals & Google Search — peringkat halaman; lists LCP, INP, dan CLS. FCP adalah tidak pada ini, yang adalah poin.
Quotes dari sumber
pada—record statements dari Google’s documentation. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.
web.dev — definition
- “First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen.” (terjemahan) “pertama Contentful Paint (FCP) measures time dari ketika pengguna pertama navigated untuk halaman untuk ketika apa pun bagian dari halaman’s konten adalah dirender pada screen.” — Philip Walton, pertama Contentful Paint (FCP), web.dev (diperbarui Dec 6 2023). Jump untuk quote
web.dev — threshold
- “sites should strive to have a First Contentful Paint of 1.8 seconds or less.” (terjemahan) “situs seharusnya strive untuk memiliki sebuah pertama Contentful Paint dari 1,8 seconds atau lebih sedikit.” — sama sumber. Jump untuk quote
web.dev — apa FCP mencakup ( Key poin)
- “FCP includes any unload time dari itu sebelumnya halaman, connection set up time, redirect time, dan Waktu hingga byte pertama (TTFB) yang dapat menjadi significant ketika measured di itu field.” (terjemahan) “FCP mencakup apa pun unload time dari sebelumnya halaman, connection siapkan time, redirect time, dan Time untuk pertama Byte (TTFB) yang dapat menjadi significant ketika diukur di lapangan.” — sama sumber.
web.dev — FCP’s role relative untuk Core Web Vitals
- “the metrics Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital aspects of the loading experience, and are both useful in diagnosing issues with LCP (slow server response times or render-blocking resources, respectively).” (terjemahan) “metrik Time to First Byte (TTFB) dan First Contentful Paint (FCP) merupakan aspek penting dari pengalaman memuat, dan berguna untuk mendiagnosis masalah LCP (waktu respons server yang lambat atau resource yang memblokir rendering).” — Web Vitals, web.dev. Jump untuk quote
Lighthouse — bagaimana FCP score adalah computed
- “Anda FCP score adalah a perbandingan dari Anda halaman’s FCP time dan FCP times untuk real websites, based pada data dari itu HTTP Archive.” (terjemahan) “Anda FCP score adalah sebuah perbandingan dari Anda halaman’s FCP time dan FCP times untuk nyata situs web, berdasarkan data dari HTTP Archive.” — pertama Contentful Paint audit, developer.chrome.com.
Lighthouse — bagaimana performa score berfungsi
- “The Performance score is a weighted average of the metric scores.” (terjemahan) “ performa score adalah sebuah weighted average dari metric scores.”
- “The weightings have changed over time because the Lighthouse team is regularly doing research and gathering feedback to understand what has the biggest impact on user-perceived performance.” (terjemahan) “ weightings memiliki changed di atas time karena Lighthouse team adalah regularly melakukan research dan gathering feedback untuk memahami apa memiliki biggest impact pada pengguna-perceived performa.” — Lighthouse performa scoring, developer.chrome.com.
#:~:text= deep tautan; konfirmasi them terhadap langsung halaman sebelum treating apa pun quote sebagai akhir. Lighthouse weights adalah quoted untuk Lighthouse 10 — re-verify jika sebuah newer Lighthouse versi memiliki shipped. Slow-FCP triage checklist
Ketika FCP adalah tinggi, berfungsi down ini list di order — ini adalah roughly biggest-win-pertama:
- periksa field angka, tidak hanya Lighthouse. Baca CrUX/PageSpeed Insights p75 untuk nyata FCP; gunakan Lighthouse hanya untuk diagnose.
- Hunt render-blocking resources. CSS dan synchronous JS di
<head>adalah #1 penyebab — Lighthouse’s “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit lists them. - Inline critical di atas—fold CSS; muat rest asynchronously.
- tambahkan
async/deferuntuk non-critical scripts; move ketiga-party tags setelah pertama paint. - mengukur TTFB. ini adalah di dalam FCP — sebuah slow server inflates FCP sebelum apa pun else. tambahkan caching / sebuah CDN / sebuah lebih cepat origin.
- Kill rantai pengalihan — setiap hop adalah sebuah penuh round-trip sebelum pertama byte.
- Perbaiki fonts: gunakan
font-display: swapatauoptional; tidak pernahblockuntuk critical text. Preload critical font file. - Preconnect untuk diperlukan ketiga-party origins; preload LCP image / key permintaan.
- Trim payload: minify CSS, hapus unused CSS/JS, efficient cache policy, lebih kecil DOM, lebih singkat critical permintaan depth.
- Re-periksa LCP afterward — yang sama memperbaiki seharusnya memiliki moved ini, dan LCP adalah satu itu memengaruhi rankings.
FCP cheat sheet
Field thresholds (CrUX, 75th percentile)
| FCP time | Rating |
|---|---|
| ≤ 1,8 s | baik |
| 1,8 – 3,0 s | perlu improvement |
| > 3,0 s | Poor |
Lighthouse desktop rating (lab — note: stricter daripada field)
| FCP time | Color |
|---|---|
| 0 – 0,9 s | Green (fast) |
| 0,9 – 1,6 s | Orange (moderate) |
| di atas 1,6 s | Red (slow) |
Lighthouse 10 performa-score weights (saat ini sebagai dari ini writing — weights shift antara Lighthouse versi)
| Metric | Weight |
|---|---|
| Total Blocking Time | 30% |
| Largest Contentful Paint | 25% |
| Cumulative Layout Shift | 25% |
| pertama Contentful Paint | 10% |
| Speed indeks | 10% |
** three memuat metrics, untangled**
| Metric | Fires ketika… | Core Web Vital? |
|---|---|---|
| pertama Paint (FP) | browser paints apa pun, bahkan sebuah background color | Tidak |
| pertama Contentful Paint (FCP) | apa pun nyata konten paints (text/image/SVG/canvas) | Tidak (diagnostic) |
| Largest Contentful Paint (LCP) | largest viewport element renders | Ya |
Order dari events: FP ≤ FCP ≤ LCP.
What counts as “content” (terjemahan) “Apa yang termasuk sebagai konten” untuk FCP
text · images (incl. background images) · <svg> elements · non-white <canvas> elements
Fast facts
- FCP’s clock dimulai di navigation — ini mencakup redirect time, connection setup, dan TTFB.
- FCP adalah measurable di keduanya lab dan field.
font-display: gunakanswap/optional; hindariblock(invisible text up untuk ~3 s).- Preconnect untuk ketiga-party origins dapat save 100–500 ms.
alat untuk measuring FCP
Field (nyata-pengguna) data
- PageSpeed Insights — menampilkan Anda URL’s CrUX p75 FCP (field) alongside sebuah Lighthouse (lab) jalankan.
- Chrome pengguna Experience Report (CrUX) — nyata-pengguna dataset behind field angka, melalui API atau BigQuery.
- web-vitals JavaScript library — drop
onFCP(console.log)(atau kirim ini untuk Anda analytics) untuk capture FCP dari Anda own pengunjung; ini menangani bfcache dan background-tab edge cases.
Lab (simulated) data
- Lighthouse — di Chrome DevTools, PageSpeed Insights, atau CLI. gunakan ini untuk diagnose FCP ( “Eliminate render-blocking resources” (terjemahan) “Eliminate render-blocking resources” audit adalah key satu).
- Chrome DevTools performa panel — see persis ketika pertama paint dan pertama contentful paint fire pada sebuah recorded muat.
mengukur ini yourself dengan Paint Timing API
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});atau gunakan web-vitals library (recommended)
import {onFCP} from 'web-vitals';
onFCP(console.log);sebuah sedikit caveats mentah API tidak tangani itu web-vitals library melakukan: ini ignores
FCP fired untuk background tabs, masih reports FCP ketika sebuah halaman adalah restored dari
back/forward cache (sebuah fresh navigation event tidak secara otomatis fire untuk sebuah
bfcache restore, so ini perlu jelas menangani), dan menggunakan activationStart alih-alih
navigation mulai sebagai clock origin untuk prerendered halaman. Cross-origin iframe
paint timing tetap sebuah known kesenjangan — sebuah halaman milik siapa main konten renders di dalam satu dapat tampilkan
sebuah misleadingly fast FCP.
FCP mistakes itu hide nyata bottleneck
- Treating FCP sebagai sebuah Core Web Vital. FCP adalah sebuah berguna diagnostic, tetapi LCP, INP, dan CLS adalah Core Web Vitals digunakan di Google’s peringkat sistem. gunakan FCP untuk investigate blank-screen phase, tidak sebagai sebuah substitute untuk field CWV data.
- Optimizing sebuah tiny logo karena ini becomes pertama paint. sebuah sebelumnya tetapi meaningless paint dapat meningkatkan FCP sementara berguna halaman konten masih arrives late. periksa LCP dan filmstrip alongside FCP so perubahan improves apa sebuah pengunjung sebenarnya sees.
- Starting dengan image compression ketika halaman adalah blank. jika tidak ada apa pun dapat paint, biasa blockers adalah server respons time, render-blocking CSS, synchronous JavaScript, atau fonts. ikuti permintaan waterfall sebelum mengubah unrelated assets.
- Comparing unrelated Lighthouse berjalan. Device emulation, network conditions, cache state, dan jalankan-untuk-jalankan variation semua move sebuah lab FCP. Bandingkan repeated berjalan di bawah yang sama settings dan konfirmasi hasil dengan data lapangan di mana tersedia.
blank-screen budget
Break FCP ke three consecutive pertanyaan alih-alih treating akhir angka sebagai satu masalah:
- Bagaimana panjang sebelum HTML arrives? Inspect TTFB. sebuah slow respons berarti browser cannot begin berguna berfungsi, so mulai dengan server, cache, redirects, atau connection setup.
- Bagaimana panjang sebelum browser dapat render? Inspect render-blocking stylesheets, synchronous scripts, dan font perilaku. HTML dapat menjadi present sementara main utas atau render path adalah masih blocked.
- Apa sebenarnya becomes pertama konten? gunakan filmstrip atau trace untuk konfirmasi itu pertama paint adalah bermakna text atau imagery, tidak sebuah token element itu membuat metric look better tanpa improving experience.
kerangka kerja mempertahankan memperbaiki di order: pengiriman pertama, rendering kedua, usefulness ketiga. Re-jalankan yang sama lab profile setelah setiap perubahan so Anda know yang phase moved.
Uji pemahaman Anda: pertama Contentful Paint
Five quick pertanyaan pada apa FCP measures dan cara diagnose ini. Pick sebuah jawaban untuk setiap, lalu periksa.
Resources worth Anda time
Google / web.dev
- pertama Contentful Paint (FCP) — canonical reference: definition, thresholds, pengukuran code, dan penuh optimization list.
- Web Vitals — bagaimana FCP relates untuk Core Web Vitals dan mengapa ini adalah sebuah diagnostic metric.
- Largest Contentful Paint (LCP) — metric FCP helps Anda diagnose, dan sebuah Core Web Vital.
- Time untuk pertama Byte (TTFB) — server-respons metric itu lives di dalam FCP.
Lighthouse
- pertama Contentful Paint audit — desktop rating bands dan bagaimana score adalah computed.
- Lighthouse performa scoring — metric weights, FCP di 10%.
My related writing
- Beginner’s Guide untuk SEO teknis — di mana kecepatan halaman fits di bigger picture.
- Core Web Vitals: Apa mereka adalah & cara meningkatkan Them — peringkat-sinyal metrics FCP feeds ke.
dari sekitar industry
- pertama Contentful Paint (FCP) — Philip Walton’s canonical Google artikel: definition, thresholds, Paint Timing API code, dan penuh optimization list.
- Web Vitals — Google’s kerangka kerja explaining di mana FCP sits (sebuah “Other Web Vital,” (terjemahan) “lainnya Web Vital,” supplementary untuk Core Web Vitals) dan -nya role di diagnosing LCP.
- pertama Contentful Paint audit — Chrome Developers doc covering Lighthouse desktop rating bands dan bagaimana FCP score adalah computed terhadap HTTP Archive data.
- Time untuk pertama Byte (TTFB) — Google’s guide pada mengapa TTFB precedes dan adalah disertakan di FCP, dan bagaimana sebuah slow server eats Anda FCP budget sebelum browser paints sebuah single pixel.
- Eliminate render-blocking resources — Chrome Developers guide pada #1 FCP killer: CSS dan synchronous JS di <head> itu block browser dari painting.
- Ensure text tetap terlihat selama webfont muat — Chrome Developers audit explaining font-display nilai dan mengapa
blockdelays FCP sementaraswapatauoptionalmempertahankan text terlihat. - pertama Contentful Paint — NitroPack’s practical FCP guide dengan CMS-spesifik optimization tips dan sebuah jelas field-vs-lab explanation.
Stats worth citing
- baik FCP = ≤ 1,8 s di 75th percentile dari pengguna nyata; perlu-improvement up untuk 3,0 s; poor beyond itu (field/CrUX thresholds). Sumber
- Lighthouse desktop adalah stricter: ~0–0,9 s adalah “green,” (terjemahan) “green,” karena lab berjalan sebuah throttled, simulated environment alih-alih dunia nyata conditions. Sumber
- FCP adalah 10% dari Lighthouse 10 performa score (saat ini sebagai dari ini writing — weights shift antara Lighthouse versi) — alongside TBT 30%, LCP 25%, CLS 25%, dan Speed indeks 10%. Sumber
- Preconnecting untuk ketiga-party origins dapat save 100–500 ms dari muat time oleh establishing early connections. Sumber
Log perubahan
Diperbarui 8 Agu 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.
Diperbarui 17 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.