First Contentful Paint (FCP) یک معیار عملکردی است که زمان لازم برای ظاهر شدن اولین بخش از محتوا روی یک صفحه وب را اندازه‌گیری می‌کند. برای بهبود FCP، اسکریپت‌های شخص ثالث غیرضروری را به حداقل برسانید، از کش مرورگر استفاده کنید، و تصاویر را فشرده‌سازی کنید. بارگذاری غیرهمزمان منابع غیرضروری و اولویت‌بندی محتوای بالای صفحه نیز به FCP سریع‌تر کمک می‌کنند.
سرور مجازی ارزان و مقرون‌به‌صرفه با جهش سرور!
به دنبال یک راهکار اقتصادی برای میزبانی مجازی هستید؟ سرورهای مجازی ارزان جهش سرور با سخت‌افزارهای بهینه و هزینه مقرون‌به‌صرفه، انتخابی عالی برای کاربران و کسب‌وکارهایی است که به دنبال صرفه‌جویی در هزینه‌ها هستند.
همین حالا سرور مجازی مورد نیاز خود را سفارش دهید و از یک میزبانی سریع و مطمئن لذت ببرید!
FCP چیست؟
FCP زمانی است که مرورگر اولین قطعه از محتوای DOM (مانند تصویر، SVG یا عنصر canvas غیر خالی) را در یک صفحه نشان می‌دهد.
برای قرار گرفتن در منطقه سبز، باید FCP یک صفحه در ۱.۸ ثانیه یا کمتر رخ دهد.
عناصر مختلفی بسته به نوع سایت می‌توانند باعث فعال شدن این معیار شوند، مانند یک انیمیشن بارگذاری یا لوگوی شرکت.
این عناصر ممکن است بی‌اهمیت به نظر برسند، اما برای تجربه کاربری بسیار حیاتی‌اند. آن‌ها به بازدیدکننده می‌گویند: «هی، ورودی شما در حال پردازش است و سایت در حال بارگذاری است.»
اگر یک صفحه چند ثانیه خالی بماند، کاربران نمی‌فهمند آیا چیزی در حال وقوع است یا نه. به همین دلیل FCP یک معیار سرعت بارگذاری ادراکی است.
FCP نشان‌دهنده تأثیر اولیه‌ای است که وب‌سایت شما بر کاربر می‌گذارد.
FCP را می‌توان هم در محیط آزمایشگاهی (با دستگاه و شرایط شبکه مشخص) و هم در محیط واقعی (با بررسی بارگذاری صفحه برای کاربران واقعی) اندازه‌گیری کرد.
هدف اصلی باید بهبود FCP در محیط واقعی باشد، زیرا داده‌های واقعی تجربه کاربران را منعکس می‌کنند.
اما FCP به تنهایی تمام تجربه بارگذاری را پوشش نمی‌دهد. این معیار (مثل همه معیارها) محدودیت‌هایی دارد.
چرا فقط اندازه‌گیری FCP کافی نیست؟
تصور کنید سایتی را باز می‌کنید و چند ثانیه فقط یک صفحه سفید می‌بینید.
در این چند ثانیه هیچ چیز نشان نمی‌دهد که سایت در حال بارگذاری است و همین می‌تواند باعث شود کاربر صفحه را ترک کند.
اینجاست که First Paint (FP) وارد می‌شود.
FP مدت زمانی را اندازه‌گیری می‌کند که مرورگر برای رندر کردن هر چیزی روی صفحه (نه فقط محتوای DOM) نیاز دارد — مثلاً تغییر پس‌زمینه.
این تغییر به کاربر اطلاع می‌دهد که چیزی در حال رخ دادن است. شاید محتوایی هنوز ظاهر نشده باشد، اما کاربر می‌فهمد که در راه است.
در حالت ایده‌آل، FP و FCP باید همزمان یا با تأخیری ناچیز اتفاق بیفتند.
اما برای بررسی کامل تجربه بارگذاری، باید پایان آن را نیز بررسی کرد.
اینجاست که Largest Contentful Paint (LCP) وارد می‌شود.
LCP مدت زمان لازم برای بارگذاری بزرگ‌ترین عنصر محتوایی در بالای صفحه را اندازه‌گیری می‌کند — مثلاً یک تیتر مهم خبری یا تصویر محصول در فروشگاه.
در اکثر موارد، بازدیدکنندگان دقیقاً برای دیدن همین عنصر آمده‌اند. این همان پایان تجربه بارگذاری است.
خلاصه:
-
در آغاز تجربه بارگذاری، FP و FCP به بازدیدکننده اطمینان می‌دهند که ورودی او پردازش شده است.
-
در پایان تجربه بارگذاری، LCP آن چیزی را که کاربر انتظار داشته فراهم می‌کند — بزرگ‌ترین عنصر محتوایی.
چگونه FCP را اندازه‌گیری کنیم
برای درک تجربه واقعی کاربر، باید هر سه معیار paint را بررسی کنید.
ابزارهای زیادی برای اندازه‌گیری FCP وجود دارند. در ادامه به چند ابزار محبوب اشاره می‌کنیم.
توجه: هر ابزار ممکن است به دلیل تفاوت در روش اندازه‌گیری، مکان تست و غیره امتیاز متفاوتی بدهد. تمرکز اصلی باید روی ابزارهایی باشد که داده‌های واقعی کاربر را ارائه می‌دهند، نه فقط داده‌های آزمایشگاهی.
DevTools گوگل کروم
-
صفحه مورد نظر را باز کنید، کلیک راست کنید و «Inspect» را انتخاب کنید.
-
به بخش «Performance» بروید.
-
روی «Reload» کلیک کنید.
-
در بخش «Timings» می‌توانید زمان‌های FP، FCP و LCP را ببینید.
PageSpeed Insights
ابزار گوگل PageSpeed Insights داده‌های آزمایشگاهی و واقعی را درباره زمان‌های FCP و LCP ارائه می‌دهد.
توجه: اگر FCP در داده‌های آزمایشگاهی خوب باشد اما در داده‌های واقعی نه، هنوز مشکل دارید و باید آن را رفع کنید.
GTmetrix
GTmetrix نیز ابزار خوبی برای اندازه‌گیری FCP است. این ابزار داده‌های آزمایشگاهی ارائه می‌دهد (یعنی از کاربران واقعی نیستند).
WebPageTest
WebPageTest به شما اجازه می‌دهد تا عملکرد سایت را از مکان‌های مختلف با شبیه‌سازی دستگاه‌ها و اتصال‌های متفاوت بررسی کنید.
می‌توانید تنظیمات را شخصی‌سازی کرده و با استفاده از Google Analytics مکان کاربران را شناسایی کرده و سایت را از همان مکان تست کنید. اگر در برخی مناطق نتایج ضعیف‌تر بود، بهتر است از یک شبکه توزیع محتوا (CDN) استفاده کنید.
چگونه زمان FCP را بهبود دهیم؟
اگر از PageSpeed Insights یا Lighthouse audit استفاده کنید، ممکن است بخش‌هایی با عنوان Opportunities و Diagnostics ببینید.
بسیاری از این پیشنهادات برای بهبود FCP و سایر معیارها مفیدند. هدف شما باید رفع همه آن‌ها باشد — نه فقط برای بهبود امتیاز، بلکه برای تجربه بهتر کاربر.
در این بخش فقط به بهبود FCP می‌پردازیم.
بهینه‌سازی کش، هاست و CDN
این سه عامل به نوعی مسئله «قبولی یا رد» هستند — باید به آن‌ها رسیدگی کنید.
هنگام انتخاب هاست و CDN، سه عامل کلیدی را در نظر بگیرید:
-
نوع وب‌سایت شما (وبلاگ، فروشگاه، نمونه‌کار و…)
-
بودجه شما
-
میزان ترافیک سایت
بهینه‌سازی کش، هاست و CDN
اگر واقعاً به عملکرد وب‌سایت اهمیت می‌دهید:
از یک هاست مطمئن و سریع استفاده کنید
یک CDN مناسب انتخاب کنید که فایل‌ها را به سرعت از نزدیک‌ترین سرور به کاربر ارائه دهد
از کش مناسب مرورگر برای ذخیره فایل‌ها استفاده کنید و بار سرور را کاهش دهید
زمانی که این اصول پایه‌ای رعایت شوند، می‌توان به سراغ بخش‌های جزئی‌تر برای بهبود FCP رفت.
منابع بلاک‌کننده رندر را حذف کنید
اگر HTML شما در حال بارگذاری CSS و JavaScript باشد که اجازه بارگذاری سایر منابع را نمی‌دهد، این فایل‌ها به عنوان resources that block rendering شناخته می‌شوند.
مرورگر تا بارگیری این منابع نمی‌تواند ادامه بارگذاری را انجام دهد و در نتیجه، زمان FCP افزایش می‌یابد.
برای رفع این مشکل:
فایل‌های CSS و JavaScript غیرضروری را به صورت async یا defer بارگذاری کنید.
فایل‌های CSS حیاتی (برای محتوای بالای صفحه) را به صورت inline در HTML وارد کنید.
فایل‌های JavaScript غیرضروری را در انتهای سند بارگذاری کنید تا مانع نمایش اولیه نشوند.
اسکریپت‌های شخص ثالث را به حداقل برسانید
ابزارهایی مانند چت آنلاین، ابزارهای تحلیلی و تبلیغات معمولاً اسکریپت‌هایی دارند که زمان بارگذاری را افزایش می‌دهند.
برخی از این اسکریپت‌ها حتی می‌توانند از سرورهای کند بارگیری شوند، که این یعنی شما منتظر هستید شخص ثالثی پاسخ دهد.
برای بهینه‌سازی:
تنها از اسکریپت‌هایی استفاده کنید که واقعاً به آن‌ها نیاز دارید.
اسکریپت‌هایی مانند Google Analytics را با استفاده از async بارگذاری کنید.
اگر ممکن است، بارگذاری اسکریپت‌های شخص ثالث را به تأخیر بیندازید تا پس از بارگذاری محتوای اولیه اجرا شوند.
یکی از مفاهیم کلیدی در بهبود رتبه سایت در نتایج گوگل، E-E-A-T است که توجه به آن می‌تواند تأثیر زیادی در سئوی محتوا داشته باشد. برای آشنایی بیشتر، مقاله E-E-A-T در سئو به چه معناست؟ را مطالعه کنید.
اندازه فایل‌ها را کاهش دهید
یکی از مؤثرترین راه‌های بهبود FCP این است که اندازه فایل‌هایی که باید بارگذاری شوند را کاهش دهید. هر چه مرورگر فایل‌های کمتری برای بارگذاری داشته باشد، FCP زودتر اتفاق می‌افتد.
چگونه این کار را انجام دهیم:
فایل‌های HTML، CSS، و JavaScript را minify کنید.
از فشرده‌سازی Gzip یا Brotli در سرور استفاده کنید.
از فرمت‌های تصویر مدرن مانند WebP یا AVIF استفاده کنید.
از بارگذاری تنبل استفاده کنید
Lazy loading یا بارگذاری تنبل به این معناست که تصاویر یا عناصر غیرضروری فقط زمانی بارگذاری شوند که کاربر به آن بخش از صفحه برسد.
مثلاً نیازی نیست هنگام بارگذاری اولیه صفحه، تمام تصاویر پایین صفحه لود شوند. این باعث افزایش زمان FCP می‌شود.
در HTML می‌توانید از ویژگی loading=”lazy” برای تصاویر استفاده کنید:
<img src=”example.jpg” loading=”lazy” alt=”…”>
از فونت‌های سفارشی بهینه استفاده کنید
فونت‌های سفارشی باعث می‌شوند مرورگر تا دریافت فایل فونت، متن را نمایش ندهد. به این پدیده Flash of Invisible Text (FOIT) می‌گویند.
برای جلوگیری از این مشکل:
از فونت‌هایی استفاده کنید که بهینه‌سازی شده‌اند
ویژگی font-display: swap; را در CSS استفاده کنید تا متن ابتدا با فونت سیستمی نمایش داده شود و بعد فونت سفارشی بارگیری شود.
مثلاً:
@font-face {
font-family: ‘MyFont’;
src: url(‘myfont.woff2’) format(‘woff2’);
font-display: swap;
}
نتیجه‌گیری
First Contentful Paint (FCP) یکی از مهم‌ترین معیارهای Core Web Vitals است که مشخص می‌کند چقدر طول می‌کشد تا کاربر اولین محتوای قابل مشاهده را ببیند.
با بهینه‌سازی کش مرورگر، استفاده از CDN سریع، کاهش اندازه فایل‌ها، به تعویق انداختن بارگذاری منابع غیرضروری، و استفاده از lazy loading، می‌توانید به‌طور قابل توجهی زمان FCP سایت خود را کاهش دهید.
هدف این است که در کمتر از ۱.۸ ثانیه محتوای قابل مشاهده‌ای را به کاربر نشان دهید تا تجربه‌ای سریع و روان داشته باشد.