צבע תוכן ראשון, בקיצור FCP, הוא מדד ביצועי אינטרנט שמודד את הזמן מרגע תחילת טעינת דף ועד לרגע שבו הדפדפן מציג את פיסת התוכן הגלויה הראשונה, כגון טקסט, תמונה או צבע רקע, על המסך. הוא נמדד בשניות או במילישניות ומשקף את האישור החזותי הראשון של המשתמש שדף אכן נטען, בניגוד לבהייה במסך לבן ריק ותוהה האם קורה משהו בכלל, ולכן הוא מסווג כאחד ממדדי חוויית הטעינה המרכזיים שעוקבים אחריהם בכלים כמו Google Lighthouse ודוח חוויית המשתמש של Chrome. FCP שונה מ-Time to First Byte, שמודד רק את זמן תגובת השרת לפני תחילת כל עיבוד, מכיוון שתגובת שרת מהירה עדיין יכולה להיות מלווה ב-FCP איטי אם סקריפטים או גיליונות סגנונות לחסימת עיבוד מעכבים את הדפדפן מלצייר משהו על המסך.
FCP חשוב משום שמהירות נתפסת משפיעה מאוד על האם מבקר נשאר בדף או נוטש אותו לפני שהוא נטען במלואו. מחקרים של גוגל ומחקרי ביצועים עצמאיים אחרים הראו שוב ושוב שככל שזמן טעינת הדף עולה, הסבירות ליציאה מדף עולה בחדות, כאשר עיכובים של אפילו שנייה עד שלוש שניות מגדילים באופן מדיד את הסבירות שמבקר יעזוב לפני שתוכן כלשהו מופיע על המסך. מכיוון ש-FCP לוכד את הרגע שבו משתמש רואה לראשונה עדויות להתקדמות, הוא מעצב ישירות את הרושם המוקדם של אמינות המותג והאיכות הטכנית שלו, במיוחד עבור מבקרים בפעם הראשונה המגיעים ממודעה בתשלום או מתוצאת חיפוש שאין להם נאמנות או היכרות קודמת, מה ששומרת עליהם סבלנות במהלך טעינה ראשונית איטית ופשוט ינסו קישור של מתחרה במקום זאת.
FCP נמדד באמצעות כלים מבוססי מעבדה, כגון Google Lighthouse או WebPageTest, המדמים טעינת דף תחת תנאי רשת ומכשיר מבוקרים בצורה חוזרת ונשנית, וכלים מבוססי שטח, כגון דוח חוויית המשתמש של Chrome, הנגיש דרך Google Search Console או PageSpeed Insights, אשר צוברים נתוני FCP מהעולם האמיתי שנאספו ממשתמשי Chrome בפועל המבקרים בדף תחת תנאי רשת מגוונים באמת. גוגל מסווגת בדרך כלל FCP מתחת ל-1.8 שניות כטוב, בין 1.8 ל-3 שניות כטעון שיפור, ומעל 3 שניות כגרוע, אם כי ספים אלה משמשים כהנחיות ולא כדרישות מוחלטות, מכיוון שביצועים מקובלים תלויים במידה רבה גם בתנאי המכשיר והרשת האופייניים של קהל היעד האמיתי של אתר בשווקים הספציפיים שלו.
תפיסה מוטעית נפוצה היא ש-FCP לבדו מצביע על כך שדף שמיש לחלוטין, כשלמעשה הוא רק מאשר שתוכן מסוים הופיע, לא שהדף אינטראקטיבי או שהתוכן העיקרי והמשמעותי שלו, כגון תמונת מוצר או כותרת, עדיין לא הוצג בפועל; מדדים קשורים כמו "צבע תוכן גדול ביותר" ו"זמן לאינטראקציה" לוכדים את אבני הדרך המאוחרות והמשמעותיות יותר. טעות נפוצה נוספת היא אופטימיזציה של FCP באמצעות טכניקות המשפרות את הציון שנמדד במעבדה מבלי לשפר את החוויה עבור משתמשים אמיתיים, למשל על ידי עיבוד מסך קל משקל או מסך שלד באופן מיידי, בעוד שהתוכן המשמעותי בפועל עדיין נטען לאט לאחר מכן, מה שיכול לייצר ציון FCP טוב באופן מטעה לצד חוויה מתסכלת באמת בעולם האמיתי עבור המבקר.
בייעוץ CRO וחוויית משתמש, FCP ומדדי ליבה קשורים ל-Web Vitals מוערכים בדרך כלל בשלב מוקדם של כל ביקורת טכנית, מכיוון שדפים שנטענים באיטיות מורידים כל מדד המרה במורד הזרם ללא קשר למידת העיצוב הטוב של הדף, ומכיוון שמאז 2021 אותות חוויית הדף, כולל ביצועי טעינה, נלקחו בחשבון באלגוריתם דירוג החיפוש של גוגל, ומקשרים את עבודת הביצועים ישירות לשיעור ההמרה ולנראות האורגנית בו זמנית. אסטרטגיות תיקון נפוצות כוללות אופטימיזציה ודחיסה של תמונות, הפחתת JavaScript ו-CSS החוסמים רינדור בנתיב הרינדור הקריטי, מינוף אחסון במטמון בדפדפן ושימוש ברשת אספקת תוכן, שכולם בדרך כלל מומלצים לצד, ולא במקום, עבודת CRO מעמיקה יותר המתמקדת בעיצוב ותוכן המתרחשת במקביל באותם דפים. מכיוון שרגרסיות ביצועים זוחלות לעתים קרובות בהדרגה ככל שנוספים סקריפטים ותגיות של צד שלישי חדשים לאורך זמן, בדרך כלל נדרש ניטור מתמשך ולא תיקון חד פעמי כדי לשמור על FCP בטווח מקובל.