بهبود عملکرد وبسایت، آموزش افزایش سرعت FCP با Gtmetrix

یکی از مهمترین معیارهای Google Vitals در بررسی سرعت و عملکرد سایت، FCP یا First Conterntful Paint است. در ابتدای آموزش افزایش سرعت FCP با Gtmetrix باید گفت: تعریف ساده FCP مدت زمانی است که اولین المان یا محتوای سایت مثل عکس، ویدیو، لوگو یا متن به کاربر نمایش داده می‌شود.

ابزار GTmetrix نیز در هنگام تحلیل و بررسی سایت، مدت زمان FCP را در تب Performance می‌آورد. بر خلاف سایر مولفه‌ها مثل TBT یا CLS، فاکتور FCP معیاری برای اندازه‌گیری مسائل فنی و زمان پاسخگویی سرور نیست. بلکه این مولفه بر روی تجربه کاربری تمرکز کرده است. بنابراین با بهینه‌کردن زمان First Contentful Paint، علاوه بر افزایش سرعت سایت، به بازدیدکنندگان نشان می‌دهید که در حال رسیدگی به درخواست آن‌ها هستید و بارگذاری سایت در حال انجام است.

در این مقاله قصد داریم به بررسی مفهوم FCP پرداخته و روش بهینه کردن آن را توضیح دهیم. همچنین به سوالات رایج در این رابطه پاسخ خواهیم داد.

نکته مهم: برای کاهش مدت زمان FCP باید با کد نویسی و مسائل فنی مربوط به سرور و سایت آشنایی داشته باشید.

FCP یا First Contentful Paint چیست؟

FCP مدت زمانی است که مرورگر اولین المان یا عنصر را در سایت رندر می‌کند؛ این عنصر می‌تواند عکس، متن، ویدیو یا هر چیز دیگری به جز صفحه سفید باشد. به بیان ساده‌، First Contentful Paint به مدت زمانی اشاره دارد که کاربر برای مشاهده اولین المان در انتظار می‌ماند. دقت داشته باشید، اولین المانی که به کاربر نشان داده می‌شود، صرفا اولین چیزی نیست که از سرور درخواست شده است. بلکه اولین المانی است که کاربر آن را در نمایشگر می‌بیند. بنابراین هر چقدر مدت زمان FCP  کم باشد، باعث بهبود تجربه کاربری یا همان UX خواهد شد.

نکته: تغییر رنگ پس زمینه سایت، اولین محتوا به حساب نمی‌آید. چرا که به تغییر رنگ First Paint گفته می‌شود. همچنین محتوای داخل تگ iframe نیز جزو FCP حساب نمی‌شوند.

FCP یکی از مهمترین معیارها به شمار می‌رود. چرا که هر چقدر اولین محتوا در زمان سریع‌تری به کاربر نشان داده شود، کاربر متوجه می‌شود که سایت به سرعت در حال بارگذاری است. با اینکه امکان دارد سایر المان‌ها با سرعت کمی لود شوند، اما اولین محتوا، سرعت لود را در نظر کاربر سریع‌تر جلوه می‌دهد. البته توجه داشته باشید که اینکار برای فریب دادن کاربران نیست. در واقع هر چقدر مدت زمان FCP کم باشد، سرعت لود سایت نیز بهتر خواهد شد. از طرفی روش‌هایی که برای بهینه‌سازی First Contentful Paint انجام می‌شود، بر روی سایر معیارها مثل LCP (Largest Contentful Paint) نیز تاثیر خواهد گذاشت.

First Paint چه تفاوتی با First Contentful Paint دارد؟

با اینکه First Paint و First Contentful Paint در ظاهر شبیه به یکدیگر هستند، ولی تفاوت‌هایی دارند. First Paint زمانی اتفاق می‌افتد که مرورگر چیزی را برای رندر کردن تشخیص داده باشد. (مثل رنگ پس زمینه) بنابراین First Paint قبل از اینکه محتوایی در صفحه وجود داشته باشد، رخ می‌دهد. اما First Contentful Paint از وقتی محاسبه می‌شود که اولین محتوا نمایش داده شود. در تصویر زیر می‌توانید تفاوت این دو را با یکدیگر ببینید.

چطور مدت زمان FCP را به دست آوریم؟

با اینکه این معیار به درک و تجربه کاربران از سایت بستگی دارد، ولی می‌توان با استفاده از ابزارهایی‌، مدت زمان آن را اندازه‌گیری کرد. از آنجایی که ما بررسی معیار FCP را در ادامه آموزش‌های GTmetrix آورده‌ایم، به همین دلیل از این ابزار برای تعیین مدت زمان First Contentful Paint استفاده می‌کنیم. اما شما می‌توانید از سایر ابزارها مثل PageSpeed Insights یا Pingdom نیز برای اینکار استفاده کنید.

بعد از آنالیز سایت در GTmetrix، در تب Summary و تب Performance می‌توانید مدت زمان FCP را مشاهده کنید. به‌عنوان مثال در تصویر زیر مدت زمان این فاکتور برابر با 1.7 ثانیه است.

نکته: اگر با جی تی متریکس و نحوه کارکرد آن آشنا نیستید، مقاله GTmetrix چیست؟ آموزش تست سرعت سایت با جی تی متریکس را مطالعه کنید.

بهترین زمان برای First Contentful Paint چقدر است؟

قبل از پرداختن به بهینه‌سازی سایت و کم کردن مدت زمان FCP، بهتر است بدانیم چه امتیازی برای این معیار مناسب است. گوگل برای درک بهتر موضوع، مدت زمان FCP را در سه دسته خوب، نیاز به بهبود و ضعیف رتبه‌بندی می‌کند. (برای آشنایی بیشتر با دسته‌بندی گوگل، به آدرس Lighthouse tool مراجعه کنید.)

• Good (خوب): اگر مدت زمان بین 0 الی 1.8 ثانیه باشد.
• Needs Improvement (نیاز به بهبود): اگر مدت زمان بین 1.8 الی 3 ثانیه باشد.
• Poor (ضعیف): در صورتی که مدت زمان FCP بیشتر از 3 ثانیه طول بکشد.

بنابراین هر چقدر مدت زمان بارگذاری اولین محتوا زیاد باشد، امتیاز کمی دریافت خواهید کرد. همچنین بازدیدکنندگان هنگامی که لود صفحه خیلی طولانی می‌شود، تمایلی به ماندن در آن سایت ندارند و احتمال دارد از آن خارج شوند. بر طبق تحقیقات انجام شده در این زمینه، 42 درصد از مردم علاقه‌ای به سایت‌هایی که دیر لود می‌شوند، ندارند. (برای کسب اطلاعات بیشتر به این لینک مراجعه کنید.)

تفاوت بین First Contentful Paint و Largest Contentful Paint چیست؟

هنگامی که فاکتورهای GTmetrix برای بهبود سرعت سایت را بررسی می‌کنید، احتمالا با این سوال مواجه شدید که FCP چه تفاوتی با LCP دارد؟ در پاسخ به این سوال باید بگوییم که FCP مدت زمان لود اولین المان را نشان می‌دهد و یکی از معیارهای مهم برای بهبود تجربه کاربری و سرعت سایت است. اما LCP مدت زمان بارگذاری بزرگ‌ترین عنصر یک صفحه را مشخص می‌کند. بنابراین ربطی به اولین المان ندارد.

در حالت کلی می‌توان گفت اهمیت FCP بیشتر از LCP است. چرا که FCP به کاربران نشان می‌دهد صفحه در حال بارگذاری است. در حالی که LCP بیشتر بر روی عملکرد محتوای اصلی صفحه تمرکز دارد. البته دقت داشته باشید که هر دو معیار برای عملکرد بهینه سایت مهم و ضروری هستند و نباید از هیچ‌کدام غافل شوید.

آموزش افزایش سرعت FCP با Gtmetrix: چطور مدت زمان First Contentful Paint را کاهش دهیم؟

برای اینکه بدانید چه چیزی باعث کاهش زمان FCP شده است، می‌توانید از سایت GTmetrix استفاده کنید. بعد از آنالیز وب‌سایت به تب Structure رفته و در بخش Show Audits Relevant to بر روی FCP کلیک نمایید. با اینکار فقط مواردی را به شما نشان داده می‌شود که مربوط به First Contentful Paint است.

در ادامه این نوشته قصد داریم برخی از متداول‌ترین مسائلی که باعث کاهش زمان بارگذاری اولین محتوا می‌شود را با شما در میان بگذاریم.

1. حذف Render Blocking Resources

Render Blocking Resources مهمترین فاکتور در کاهش مدت زمان FCP است. هنگامی که یک کاربر آدرس سایت را در مرورگر وارد می‌کند، مرورگر شروع به خواندن کدهای سایت از بالا به پایین می‌کند. بنابراین قبل از لود فایل‌های HTML، باید فایل‌های CSS, JS و فونت‌ها دانلود شوند. در این میان اگر حجم این فایل‌ها بیشتر باشد، مدت زمان زیادی طول خواهد کشید تا محتوای سایت برای بازدید کننده به نمایش درآید. در واقع این فایل‌ها به هر چیز دیگری در صفحه اولویت دارند و تا زمانی که بارگذاری آن‌ها تمام نشود، متن‌ها، تصاویر و سایر محتوای سایت در حالت تعلیق قرار می‌گیرند.

بنابراین اولین کاری که برای بهبود سرعت FCP باید انجام دهید، کاهش حجم فایل‌های CSS, JS و فونت‌ها و سپس به تعویض انداختن لود آن‌ها است. در ادامه روش‌هایی را خواهیم گفت که می‌توانید Render Blocking Resoures را حذف کنید.

• فایل‌های CSS و JavaScript را فشرده کنید. یعنی باید فضای خالی و کامنت‌های اضافی داخل این فایل‌ها حذف شوند. برای اینکار می‌توانید از سایت‌های cssminifier.com و javascript-minifier.com استفاده کنید.
• همه فایل‌های CSS و JavaScript را در یک فایل ترکیب کنید.
• بارگذاری فایل‌های جاوا اسکریپت را به تعویق بیندازید. از آنجایی که فایل‌های جاوا اسکریپت معمولا حجم زیادی دارند، با اینکار سرعت سایت بالا می‌رود. سعی کنید فایل‌های JS را به جای هدر در فوتر سایت بارگذاری کنید. یعنی بعد از اینکه همه المان‌های سایت لود شدند، فایل‌های JS بارگذاری شوند.
• کدهای CSS مهم و حیاتی را inline کنید.
• برای به تعویض انداختن جاوا اسکریپت، می‌توان از کد زیر استفاده کرد.

<script defer src=”/path/file/script.js”></script>

• برای بارگذاری کدهای CSS غیرضروری، باید مقدار ویژگی media را روی print تنظیم کنید. اینکار موجب می‌شود تا مرورگر، لود سایر المان‌ها را به خاطر css به تعویق نیندازد.

<link rel=”stylesheet” href=”stye.css” media=”print” onload”this.media=all”>

• کدهای جاوا اسکریپت، فونت‌ها و استایل‌هایی که استفاده نمی‌کنید را حذف نمایید.

دقت داشته باشید، اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید، برای انجام کارهایی گفته شده در بالا، می‌توانید از افزونه‌های Autoptimize, wp-optimize یا wp rocket استفاده کنید. برای مثال، در افزونه wp rocket کافی است در قسمت بهینه‌سازی فایل‌ها، فایل‌های CSS و JS را فشرده و ادغام کرده و لود آن‌ها را به تاخیر بیندازید. البته قبل از اینکار حتما از سایت خود بکاپ تهیه کنید تا اگر ظاهر سایت به هم ریخت، مشکلی به وجود نیاید.

2. متن را قبل از لود فونت، نمایش دهید

اگر به مراحل لود سایت‌ها توجه کرده باشید، در برخی از آن‌ها، متن به یکباره در صفحه ظاهر می‌شود. این موضوع به این دلیل است که مرورگر محتوای سایت را تا زمانی که به طور کامل آماده نباشد، به کاربران نمایش نمی‌دهد. اما شاید از خودتان بپرسید، متن که حجم بسیار کمی دارد ولی چرا لود آن طول می‌کشد؟ به خاطر اینکه منتظر می‌ماند تا فونت آماده شود. اما شما می‌توانید به مرورگر بگویید که متن را قبل از آماده شدن فونت لود کند. این مساله موجب می‌شود تا مدت زمان FCP کاهش پیدا کند.

از آنجایی که متن حجم بسیار کمی دارد، اگر به مرورگر بگویید که آن را بدون تاخیر لود کند، احتمال دارد FCP اصلا وجود نداشته باشد. برای اینکار کافی است کد display:swap; را در داخل کدهای @font-face قرار دهید. البته در بسیاری از قالب‌های وردپرس اینکار به صورت پیش‌فرض انجام شده و لازم نیست کاری انجام دهید.

@font-face {
font-family: ‘Pacifico’;
font-style: normal;
font-weight: 400;
src: local(‘Pacifico Regular’), local(‘Pacifico Regular’), url(https://fonts.sample.com/pacifico.woff2) format(‘woff2’);
font-display: swap;
}

3. کاهش Time To First Byte یا TTFB

برای کم کردن زمان FCP، کار بعدی که باید انجام دهید، بهبود زمان اولین بایت است. در واقع این معیار زمانی را نشان می‌دهد که اولین بایت از طرف سرور به مرورگر تحویل داده می‌شود. بنابراین هرچقدر زمان TTFB سریع‌تر باشد، First Contentful Paint زودتر انجام خواهد شد. برای بهبود سرعت TTFB باید کارهای زیر را انجام دهید.

• در اولین فرصت، یک هاست باکیفیت برای سایت تهیه کنید.
• از افزونه‌های کش مثل wp rocket استفاده نمایید. با فعال کردن کش، یک نسخه از موارد تکراری سایت ذخیره می‌شود. بنابراین با هر بار ورود کاربر به سایت، لازم نیست همه فایل‌ها از اول دانلود شوند. بلکه بسیاری از داده‌ها از سیستم کاربر لود شده و در نتیجه سرعت سایت بالا می‌رود.
• از شبکه توزیع محتوا یا CDN برای بالا بردن سرعت لود صفحه استفاده کنید. در حال حاضر یکی از بهترین شبکه‌های توزیع محتوا و رایگان در جهان، Cloudflare است.

اگر سه کاری که در بالا گفتیم را انجام دهید، سرعت TTFB به طور قابل ملاحظه‌ای بهتر خواهد شد.

4. فایل‌های CSS ضروری را Inline کنید

اگر لود همه فایل‌های CSS را به تعویق بیندازید، مرورگر در ابتدا یک صفحه بدون استایل را به کاربران نشان می‌دهد. این موضوع که با نام Flash of Unstyled Content یا FOUC شناخته می‌شود، برای کاربران ناخوشایند است. برای اینکه از بروز این مشکل جلوگیری کنید، نیاز دارید تا کدهای ضروری CSS که مربوط به استایل قسمت بالای سایت است را Inline کنید تا همزمان با بارگذاری HTML، لود شوند.

برای تولید فایل CSS ضروری، می‌توانید از ابزارهای آنلاین مثل sitelocity.com استفاده کنید. بعد از اینکه آدرس سایت خود را در این ابزار وارد کردید، کدهای CSS ضروری را در اختیارتان قرار می‌دهد. این کدها را باید در داخل سند HTML قرار دهید تا مرورگر هنگام لود صفحه، آن‌ها را بارگذاری کند. انجام اینکار به بهبود زمان FCP کمک زیادی خواهد کرد.

نکته: اگر از سیستم مدیریت محتوا وردپرس استفاده می‌کنید، با نصب افزونه wp rocket همه اینکارها به صورت خودکار انجام می‌گیرد. تنها کاری که باید انجام دهید، رفتن به بخش بهینه‌سازی فایل و زدن تیک “بهینه‌سازی تحویل CSS یا Optimize CSS delivery” است. همچنین در این بخش می‌توانید CSSهای ضروری را به صورت دستی نیز وارد کنید.

5. استفاده از جاوا اسکریپت در قسمت بالای صفحه (Above-the-Fold) را به حداقل برسانید

یکی دیگر از کارهایی که برای کم کردن سرعت FCP یا First Contentful Paint باید انجام دهید، کاهش استفاده از جاوا اسکریپت در بالای صفحه است. وقتی صحبت از بهینه‌سازی سایت و افزایش سرعت آن به میان می‌آید، هر میلی ثانیه اهمیت دارد.

بسیاری از قالب‌ها برای ایجاد جلوه‌های خاص در بالای صفحه، از تعداد زیادی اسکریپت استفاده می‌کنند. این مساله باعث افت شدید سرعت سایت و در نتیجه FCP می‌شود. بنابراین تا جای ممکن استفاده از عناصر معرفی شده در پایین را در بالای صفحه به حداقل برسانید.

• انیمیشن‌های سنگین
• پلاگین‌های اسلایدر ساز
• پلاگین‌های اشتراک گذاری محتوا در شبکه‌های اجتماعی
• پلاگین‌های ایجاد مگامنو
• کدهای تبلیغاتی

6. Lazy Load یا بارگذاری تنبل را برای عناصر بالای صفحه غیرفعال کنید

یکی از راه‌های افزایش سرعت سایت، استفاده از قابلیت Lazy Load یا بارگذاری تنبل برای تصاویر و ویدیوهای سایت است؛ به خصوص اگر سایت شما تصاویر زیادی داشته باشد. این قابلیت، بارگذاری تصاویر سایت را به تعویق می‌اندازد و هنگامی که کاربر به سمت پایین اسکرول می‌کند، آن‌ها را بارگذاری کرده و  نمایش می‌دهد.

اما اگر از این قابلیت در بالای صفحه (مثل لوگو) استفاده کنید، به دلیل لود فایل‌های اسکریپت مربوط به Lazy Load، مدت زمان FCP افزایش می‌یابد. بنابراین توصیه می‌کنیم بارگذاری تنبل برای تصاویری که در بالای صفحه قرار دارند را غیرفعال کنید.

در حال حاضر بسیاری از پلاگین‌های Lazy Load این امکان را در اختیار شما قرار می‌دهند. بنابراین کافی است به تنظیمات آن‌ها مراجعه کرده و تصاویر مورد نظر را از حالت بارگذاری تنبل خارج کنید. حذف قابلیت lazy Load از تصاویر با استفاده از نام، کلاس، ID یا ویژگی آن امکان‌پذیر است.

اگر از افزونه wp rocket در سایت استفاده می‌کنید، به بخش رسانه (Media) در این افزونه مراجعه کرده و در قسمت مشخص شده در تصویر، نام عکس، کلاس یا آی دی آن را وارد کنید تا از حالت Lazy Load خارج شود.

نکته: اگر با کد نویسی وردپرس آشنایی داشته باشید، بارگذاری تنبل تصاویر از نسخه 5.5 به هسته آن اضافه شده است. برای کسب اطلاعات بیشتر به این لینک مراجعه کنید.

7. بهینه کردن اندازه DOM در سایت

کار بعدی که برای افزایش مدت زمان FCP می‌توانید انجام دهید، کم کردن تعداد DOM در صفحه است. DOM مخفف عبارت Document Object Model است که مربوط به المان‌های استفاده شده در صفحات سایت می‌شود. در واقع یک صفحه وب از عناصر مختلفی مثل دکمه، فرم‌ها، جداول، لیست، لینک‌ها، چک باکس‌ها و… تشکیل شده است. معمولا افراد برای زیبا کردن و تکمیل محتوای سایت، از المان‌های بیشتری استفاده می‌کنند.

این المان‌ها به صورت درختی از ابتدای صفحه شروع شده و آرام آرام نمایش داده می‌شوند. در نهایت، زمانی که به اتمام می‌رسند، محتوای صفحه کامل می‌شود. بنابراین اگر تعداد این عناصر در صفحه زیاد باشد، باعث کاهش سرعت سایت و در نتیجه افزایش مدت زمان First Contentful Paint خواهند شد. 

نکته: به هر کدام از المان‌های HTML در ساختار درختی DOM، نود یا گره گفته می‌شود. هر کدام از این گره‌ها نیز می‌توانند عناصر مختلفی داشته باشند. هر چقدر المان‌های بیشتری از این گره‌ها انشعاب شود، عمق آن نیز بیشتر خواهد شد.

از مهمترین دلایل تاثیر تعداد زیاد DOM در کاهش سرعت FCP می‌توان به موارد زیر اشاره کرد.

• اگر المان‌های DOM بهینه نشده باشند، مراحل اولیه لود سایت طول خواهد کشید و کاربر چیزی مشاهده نخواهد کرد. در نتیجه مدت زمان FCP بالا خواهد رفت.
• هر چقدر اندازه DOM بزرگ‌تر باشد، یعنی زمان زیادی برای پردازش آن و استایل‌ دادن به المان‌ها نیاز است. در نتیجه مدت زمان رندر بیشتر می‌شود.
• بزرگ بودن اندازه DOM مصرف حافظه را در مرورگر کاربران بیشتر می‌کند.

روش‌های کاهش تعداد عناصر در صفحه (Reduce DOM Size)

در ادامه روش‌هایی را خواهیم گفت که با استفاده از آن‌ها می‌توانید تعداد DOM را در صفحات سایت کاهش داده و در نتیجه به بهبود FCP کمک کنید.

• صفحات بزرگ سایت که تعداد المان‌های بیشتری دارند را به صفحات کوچک‌تر تقسیم کنید.
• حالت Lazy Load را علاوه بر تصاویر، برای المان‌های HTML نیز فعال کنید.
• صفحات وبلاگ، صفحات محصول، نظرات و… را صفحه‌بندی کنید.
• تعداد پست‌ها را در صفحه اصلی و صفحات آرشیو کاهش دهید. مثلا در دسته‌بندی وبلاگ سعی کنید بیشتر از 10 پست را نمایش ندهید.
• اگر المانی را در صفحه احتیاج ندارید، آن را با کدهای CSS پنهان نکنید. بهترین کار حذف آن است.
• از افزونه‌های صفحه‌ساز و قالب‌های بهینه استفاده کنید.

8. Inline کردن تصاویر ضروری سایت

یکی دیگر از روش‌هایی که برای کاهش مدت زمان FCP سایت می‌توانید انجام دهید، inline کردن تصاویر است. هنگامی که تصاویر سایت به صورت Inline نیستند، برای هر تصویر یک درخواست جداگانه به سرور ارسال می‌شود. با افزایش تعداد درخواست‌ها، سرعت سایت کم شده و در نتیجه مشاهده اولین محتوا توسط کاربر به تعویق می‌افتد.

اما اگر عکس‌ها را به روش Inline لود کنید، تصاویر به صورت داده متنی ذخیره خواهند شد و در نتیجه به صورت قسمتی از متن صفحه HTML لود خواهند شد. بنابراین درخواست جداگانه‌ای برای تصاویر به سرور ارسال نمی‌شود. لوگو، تصاویر اسلایدر، پس زمینه و آیکون شبکه‌های اجتماعی از مهمترین مواردی است که باید آن‌ها را Inline کنید.

برای Inline کردن تصاویر می‌توانید از دو روش base64 یا SVG استفاده کنید که در ادامه آن‌ها را توضیح خواهیم داد.

1. استفاده از الگوریتم base64: این الگوریتم دیتاهای مختلفی مثل عکس را به متن تبدیل می‌کند تا بتوانید آن‌ها را در فایل‌های HTML یا CSS قرار دهید. در واقع اینکار یکی از بهترین روش‌ها برای کاهش حجم تصاویر سایت است. برای تبدیل تصاویر به متن با استفاده از الگوریتم base64، می‌توانید از وب‌سایت Base64 Image Encoder استفاده کنید. نحوه قرار دادن آن در سایت نیز به شکل زیر است.

<img src=”data:image/png:base64,” width”100” height”50” alt”this is a base64 img”>

در قسمت Src باید کد دریافتی از سایت بالا را وارد کنید که با عبارت data:image شروع می‌شود. اما در صورتی که می‌خواهید از تصویر در فایل CSS استفاده کنید، نمونه کد زیر را به کار ببرید.

.custom-class {
      background:url(“data:image/jpeg….”);
}

در این کد نیز باید داخل پرانتز، کد دریافتی از سایت بالا را وارد نمایید.

2. یکی دیگر از روش‌های Inline کردن تصاویر در سایت، استفاده از فرمت SVG است. اگر این تصاویر را با ادیتور متن باز کنید، متوجه خواهید شد که عکس در داخل دو تگ SVG قرار گرفته است. بنابراین کافی است تگ‌ها را در محل مورد نظر در فایل HTML قرار دهید.

<body
       <svg xmlns=”http://www.w3.org/2000/svg”)>
           <circle cx=’50’ cy=’25’ r=’20’/>
      <svg>
</body>

البته Inline کردن تصاویر معایبی نیز دارد که برخی از آن‌ها عبارتند:

• این روش بیشتر از 30 درصد باعث کاهش حجم تصاویر نمی‌شود.
• باعث افزایش مدت زمان TTFB می‌شود.
• CDN با تصاویر Inline سازگار نیست.

بنابراین به جای استفاده از تصاویر Inline بهتر است حجم صفحات سایت را کاهش دهید. در حالت کلی، استفاده یا عدم استفاده از این روش بستگی به سایتتان دارد.

9. از ریدایرکت کردن لینک‌ها خودداری کنید

زمانی که صفحات سایت را ریدایرکت می‌کنید، مرورگر هنگام ارسال درخواست به سرور یک پاسخ 301 دریافت می‌کند. در نتیجه مرورگر باید یک درخواست دیگر برای آدرس جدید ارسال کند. بنابراین اینکار باعث می‌شود تا سرعت سایت به مقدار قابل توجهی کاهش پیدا کند.

10. برای افزایش مدت زمان FCP و بیشتر کردن سرعت سایت از افراد حرفه‌ای کمک بگیرید

همانطور که متوجه شدید، برای افزایش زمان First Contentful Paint، باید با کدهای CSS، JavaScript و برخی مسائل فنی دیگر آشنا باشید. اما در صورتی که هیچ آشنایی با این موارد ندارید، توصیه می‌کنیم از افراد و شرکت‌های حرفه‌ای برای افزایش سرعت سایت کمک بگیرید.

وب آنجل با داشتن تجربه‌ای چندین ساله در این زمینه، آماده کمک به شما عزیزان است. برای اینکار به صفحه خدمات افزایش سرعت سایت مراجعه کرده و درخواست خود را ثبت نمایید. کارشناسان ما در اولین فرصت با شما تماس گرفته و مراحل بهینه‌سازی سایت را انجام خواهند داد.

نتیجه‌گیری

در کنار معیارهای مهمی که Web Vitals برای بهتر کردن سرعت سایت و تجربه کاربری در اختیار ما قرار می‌دهد، بهبود سرعت FCP یا First Contentful Paint یکی از ضروریات به شمار می‌رود. در این نوشته سعی کردیم مواردی که برای بهبود مدت زمان FCP نیاز است را با شما عزیزان به اشتراک بگذاریم. در صورتی که از وردپرس استفاده می‌کنید، انجام کارهای بالا به مراتب راحت خواهد بود. در غیر اینصورت باید از کد نویس سایت بخواهید موارد مطرح شده را اعمال کند. البته به غیر از نکات گفته شده در بالا، مواردی دیگری نیز در بهبود First Contentful paint موثر هستند.

در انتها، خوشحال می‌شویم نظرات خود را با ما در میان بگذارید.