یکی از عواملی باعث تجربه کاربری ضعیف میشود این است که چقدر طول میکشد تا کاربر محتوای ارائه شده روی صفحه را ببیند. First Contentful Paint (FCP) مدت زمانی است که طول میکشد تا اولین عناصر DOM ارائه شود ، اما نشان نمیدهد که چه مدت طول کشیده است تا بزرگترین (معمولاً معنیدارترین) محتوای صفحه نمایش داده شود.
Largest Contentful Paint (LCP) یک معیار Core Web Vitals است و زمانی را اندازه گیری میکند که بزرگترین عنصر محتوا در viewport قابل مشاهده باشد. میتوان از LCP برای تعیین اینکه چه زمانی محتوای اصلی صفحه در صفحه نمایش لود شده است استفاده کرد.
شایع ترین علل ضعف در LCP عبارتند از:
هر چه بیشتر طول بکشد تا مرورگر محتوا را از سرور دریافت کند، زمان بیشتری برای نمایش صفحه نیاز است.سریعتر بودن زمان پاسخگویی سرور مستقیماً هر معیار بارگذاری صفحه از جمله LCP را بهبود میبخشد.
قبل از هر چیزی، نحوه مدیریت بارگذاری سرورتان را بهبود دهید. از Time to First Byte (TTFB) برای اندازه گیری زمان پاسخ دهی سرور خود استفاده کنید. شما میتوانید TTFB خود را به روش های مختلف بهبود بخشید:
آیا سایت شما درخواست های سنگینی به سرور ارسال میکند و زمان زیادی از سرور شما اشغال میکند؟ آیا عملیات پیچیده دیگری در سمت سرور انجام میشود که روند بازگشت محتوای صفحه را به تاخیر میاندازد؟ تجزیه و تحلیل و بهبود کارایی کد سمت سرور شما به طور مستقیم باعث بهبود بارگذاری کند سرور میشود.
بسیاری از پلتفرم های سمت سرور به جای ارائه فوری یک صفحه ثابت در یک درخواست مرورگر، باید صفحه وب را به صورت پویا ایجاد کنند. به عبارت دیگر زمانی که مرورگر یک صفحه را درخواست میکند،، به جای ارسال یک فایل کامل HTML که از قبل آماده ، کد سمت سرور باید برای ساخت صفحه اجرا شود . بسیاری از پلتفرمهایی که روی سرور اجرا میشوند دارای راهنمای بهبود سرعت هستند که میتوانید برای سرعت بخشیدن به این فرآیندها از آنها استفاده کنید.
شبکه تحویل محتوا (CDN) شبکه ای از سرورها است که در مکان های مختلف توزیع شدهاند. اگر محتوای صفحه وب شما روی یک سرور میزبانی شود، وب سایت شما برای کاربرانی که از نظر جغرافیایی دورتر هستند کندتر بارگذاری میشود زیرا درخواست های مرورگر آنها به معنای واقعی کلمه باید به سراسر جهان سفر کنند. استفاده از CDN باعث رفع این مشکل میشود،
امروزه CDN ها امکانات بیسار بیشتری در اختیار صاحبان سایت برای بهبود تجربه کاربری و … میگذارند که بررسی همه آنها از حوصله این مقاله خارج است
اگر صفحه HTML شما ثابت است و نیازی به تغییر در هر درخواست ندارد، ذخیره کش میتواند با ذخیره یک کپی از HTML تولید شده روی دیسک از ایجاد مجدد غیر ضروری آن جلوگیری کند.، کش سمت سرور میتواند TTFB را کاهش دهد و استفاده از منابع را به حداقل برساند.
بسته به ابزارهای شما، روش های مختلفی برای اعمال کش سرور وجود دارد:
service worker یک API است که در پسزمینه مرورگر اجرا میشود و میتواند درخواستهای سرور را رهگیری کند.شما میتوانید برخی یا تمام محتوای صفحه HTML را در حافظه پنهان ذخیره کنید و تنها زمانی حافظه پنهان را به روز کنید که محتوا تغییر کرده باشد.
نمودار زیر نشان میدهد که چگونه توزیع LCP در یک سایت با استفاده از این الگو کاهش یافته است:
نمودار بالا توزیع LCP را از یک سایت در 28 روز گذشته نشان میدهد که بر اساس وضعیت سرویسدهنده تقسیمبندی شده است.
درخواست های سرور به منابع third-party نیز میتواند بر LCP تأثیر بگذارد، به خصوص اگر برای نمایش محتوای مهم در صفحه مورد نیاز باشد. از rel="preconnect"
استفاده کنید تا به مرورگر اطلاع دهید که صفحه شما قصد دارد در اسرع وقت ارتباط برقرار کند.
<link rel="preconnect" href="https://example.com" />
همچنین میتوانید از dns-prefetch برای حل سریعتر جستجوهای DNS استفاده کنید.
<link rel="dns-prefetch" href="https://example.com" />
اگرچه دو روش بالا متفاوت عمل میکنند، اما به دلیل عدم پشتیبانی برخی مرورگرها از preconnect
بهتر از است مانند زیر از هر دو روش باهم استفاده کنید.
<head> … <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> </head>
Signed exchanges (SXGs) یک مکانیسم تحویل هستند که با ارائه محتوا در قالبی که به راحتی قابل ذخیرهسازی است، تجربههای سریعتری را برای کاربر فراهم میکنند. به طور خاص، جستجوی گوگل SXG ها را کش میکند و گاهی اوقات از قبل واکشی میکند. برای سایت هایی که بخش زیادی از ترافیک خود را از جستجوی گوگل دریافت میکنند، SXG ها میتوانند ابزار مهمی برای بهبود LCP باشند.
قبل از اینکه مرورگر بتواند محتوایی را ارائه دهد، باید نشانه گذاری HTML را در یک درخت DOM تجزیه کند.تجزیه کننده HTML در صورت برخورد با شیوه نامه های خارجی (
و تگ های جاوا اسکریپت همزمان (<link rel="stylesheet">
)<script src="main.js">
) متوقف میشود.
اسکریپتها و شیوه نامهها هر دو منابع مسدودکننده رندر هستند که FCP و در نتیجه LCP را به تاخیر میاندازند. برای سرعت بخشیدن به بارگذاری محتوای اصلی صفحه وب خود، هرگونه جاوا اسکریپت و CSS غیر مهم را به تعویق بیندازید.
با روشهای زیر اطمینان حاصل کنید که کمترین مقدار مسدود سازی CSS را دارید:
برای خوانایی راحتتر، فایلهای CSS میتوانند شامل کاراکترهایی مانند فاصله، تورفتگی یا comment ها باشند. همه این کاراکترها برای مرورگر ضروری نیستند و کوچک کردن این فایلها باعث میشود که قسمت های اضافی حذف شود. در نهایت، کاهش میزان مسدود سازی CSS همیشه زمان لازم برای ارائه کامل محتوای اصلی صفحه (LCP) را بهبود میبخشد.
ابزارهای زیادی برای کوچک کردن CSS ها وجود دارد که بسته به پلت فرم و ابزارهای استفاده شده در سایت شما میتواند متفاوت باشد. در تصویر زیر مقدار LCP برای یک سایت مشخص قبل و بعد از کوچک سازی CSS نشان داده شده و میتوان تاثیر Minify CSS بر LCP مشاهده کرد.
با استفاده از تب Coverage در DevTools کروم میتوانید css های استفاده نشده در فایلهای خود را پیدا کنید
برای بهبود مراحل زیر را انجام دهید:
<link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">
css های بحرانی را با قراردادن آن در تگ <style> در تگ <head> به صورت inline بارگذاری کنید، این کار باعث میشود تا درخواست اضافی به سرور برای بارگذاری css ها ارسال نشود.
قراردادن css های مهم در فایل html اصلی نیاز به درخواست رفت و برگشت برای واکشی CSS حیاتی را از بین میبرد. اگر نمیتوانید به صورت دستی استایل های درون خطی را به سایت خود اضافه کنید، از یک کتابخانه برای خودکارسازی فرآیند استفاده کنید. مثل :
حداقل جاوا اسکریپتِ لازم را دانلود و به کاربران ارائه دهید. کاهش میزان مسدود کردن جاوا اسکریپت باعث رندر سریعتر و در نتیجه LCP بهتر میشود. این را میتوان با بهینه سازی اسکریپت های خود به چند روش مختلف انجام داد:
اگرچه افزایش زمان مسدود کردن CSS یا جاوا اسکریپت مستقیماً منجر به سرعت پایین تر سایت میشود، زمان بارگذاری انواع دیگر منابع نیز میتواند بر زمان بارگذاری سایت تأثیر بگذارد. انواع عناصری که بر LCP تأثیر میگذارند عبارتند از:
<img>
<image>
در المان های <svg>
<video>
(تصویر پوستر برای اندازه گیری LCP استفاده میشود)زمانی که طول میکشد تا این عناصر بارگذاری شوند