پارامترهای مختلفی برای اندازه گیری سرعت رندر صفحه یا محتوا وجود دارند. یکی از پارامترها که تا قبل از ماه می 2020 توسط گوگل استفاه می شد، پارامتر FCP یا First Contentful Paint بود که بیانگر مدت زمانی است که اولین محتوای صفحه رندر شود. معیار FCP هنوز برای اندازه گیری Performance صفحه استفاده می شود ولی گوگل در آپریل 2020 پارامتر دیگری به نام LCP که مخفف Largest Contentful Paint را معرفی کرد که کارایی آن از FCP بیشتر است.
LCP چیست؟
پارامتر LCP بیانگر مدت زمانی است که مهمترین المان صفحه در viewport دستگاه کاربر، رندر شود. مهمترین المنت می تواند یک عکس، یک ویدیو و یا یک متن باشد که در حقیقت مهمترین قسمت صفحه از دید کاربر است و در نتیجه هر چقدر سریعتر لود و رندر شود، تاثیر مثبتی در تجربه کاربری یا UX دارد.
LCP بهینه چند ثانیه است؟
با توجه به استانداردی که گوگل در حال حاضر مشخص کرده است و بر اساس آن نیز گزارش Core Web Vitals در گوگل سرچ کنسول را ارائه می کند، در صورتیکه محتوای اصلی صفحه در کمتر از 2.5 ثانیه لود و رندر شود، امتیاز LCP را به صورت کامل دریافت می کنید و اگر این مدت زمان بین 2.5 تا 4 ثانیه باشد، نیاز است که نسبت به بهبود LCP اقدام شود و در صورت بیشتر از 4 ثانیه بودن زمان LCP، وضعیت صفحه از نظر LCP ضعیف است و بهتر است که برای بهبود آن برنامه ریزی جدی داشته باشید.
از کجا بدانیم که کدام المان صفحه در LCP تاثیرگذار است؟
یکی از راه های اینکه متوجه شوید که از نظر Core Web Vitals گوگل، کدام المان صفحه به عنوان مهمترین المان صفحه در نظر گرفته می شود، استفاه از Lighthouse نسخه 6 به بعد است. به عنوان مثال می توانید از سایت WebPageTest برای آنالیز صفحه با Lighthouse استفاده کنید. در نتیجه گزارش Performance لایت هاوس، با توجه به عکس زیر، یک قسمت به نام Largest Contentful Paint element وجود دارد که با کلیک بر روی آن می توانید متوجه شوید که Lighthouse از کدام المان صفحه در محاسبه LCP استفاده کرده است.
ضمنا در DevTools گوگل کروم نیز با توجه به ویدیو زیر در قسمت Performance می توانید با کلیک بر روی LCP، المانی که در viewport به عنوان LCP مد نظر بوده را مشاهده کنید.
مهمترین عوامل تاثیر گذار در LCP
عوامل زیادی در LCP تاثیر گذار هستند که در ادامه در مورد مهترین آنها توضیح داده شده است:
1. کند بودن زمان پاسخ گویی سرور
زمان پاسخ گویی سرور یا همان Slow server response times یکی از عوامل تاثیرگذار در LCP است. هر چقدر مرورگر بتواند محتوا را سریعتر از سرور دریافت کند، صفحه سریعتر رندر خواهد شد و هر چقدر صفحه سریعتر رندر شود، پارامترهایی که برای اندازه گیری سرعت لود صفحه هستند، بهبود می یابند و یکی از آن پارامترها، Largest Contentful Paint است.
یکی از مواردی که برای بهبود سرعت پاسخ گویی سرور باید در نظر داشت، پارامتر TTFB یا Time To First Byte است که برای بهبود آن نیاز است که موارد زیر را مد نظر داشته باشید:
- اپتیمایز کردن سرور از نظر سخت افزاری
- بهینه کردن دیتابیس و کوئری ها
- بهینه کردن کدهای سمت سرور با هدف ارتقا سرعت لود صفحات
- کش کردن صفحات و asset ها به صورت HTML بر روی سرور
- ایجاد کانکشن زودهنگام با third-party ها (به عنوان نمونه با قرار دادن <link> های زیر در <head>)
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">با توجه به تصویر زیر، می توانید متوجه شوید که در صورت استفاده از preconnect، به میزان زمانی که لازم است که به سرور خارجی connect شوید، در سرعت لود صفحه صرفه جویی خواهد شد.
2. وجود جاوااسکریپت و CSS های که رندر را بلاک می کنند
در صورتیکه فایل های JavaScript یا CSS وجود داشته باشند که Render blocker تلقی شوند، باعث به تعویق افتادن رندر صفحه خواهند شد و در نتیجه امتیاز LCP را کاهش می دهند. برای بهبود این موضوع از تکنیک های زیر استفاده کنید:
- فایل های CSS را minify کنید
- فایل های js را minify کنید
- CSS هایی که برای رندر above-the-fold صفحه استفاده می شوند (Critical CSS) را inline کنید.
- لود شدن CSS های non-critical را به تعویق بیندازید (defer کنید)
- لود شدن JavaScript های non-critical را به تعویق بیندازید (defer کنید)
- CSS هایی که در صفحات استفاده نمی شوند را حذف کنید.
3. کند بودن سرعت لود منابع
سرعت لود المان های <img> و <video> به همراه عکس پوستر ویدیو، <image> در <svg>، المان های با بکگراند که از url() استفاده کرده باشند و همچنین المان های Block-level در LCP تاثیرگذار هستند. بنابراین توصیه می کنم که از موارد زیر برای بهینه کردن سرعت بارگذاری موارد ذکر شده استفاده کنید:
- اپتیمایز کردن عکس ها
- استفاده از فرمت های مدرن عکس مانند JPEG 2000 یا JPEG XR یا WebP
- استفاده از عکس های رسپانسیو
- در صورت امکان، استفاه نکردن از یک عکس به عنوان اولین المان مهم صفحه
- کمپرس کردن متن ها با استفاده از تکنیک هایی مانند Gzip یا Brotli
- preload منابع مهم صفحه مانند نمونه های زیر:
<link rel="preload" as="script" href="important-script.js">
<link rel="preload" as="style" href="important-style.css">
<link rel="preload" as="image" href="important-image.png">
<link rel="preload" as="video" href="video.webm" type="video/webm">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
🔗 منبع Web.dev
بسیار ممنون از مقاله جامع و کاملتون، یک سئوال در زمینه عکس داشتم. آیا عکس حجم مشخصی برای بهینه بودن دارد؟ مثلا تا 100KB باشد و بالاتر نرود و برای CSS هایی که استفاده نمیشود ایا راه حلی در سایت های وردپرسی وجود دارد؟
با تشکر
سلام، خیر استاندارد از بابت filesize نیست. صرفا عکس باید با ابعاد مورد نیاز به صورت اپتیمایز شده ذخیره شده باشد. به عنوان نمونه استفاده از پلاگین tinypng برای اپتیمایز کردن عکسهایی که سرور آنها در خارج از ایران است یک تکنیک موثر در بهینه کردن filesize عکس ها است که می تواند در LCP تاثیر مثبت داشته باشد. همین موضوع در مورد ویدیو هم صادق است. پلاگین حرفه ای برای استخراج Unused CSS در حال حاضر نمی شناسم. در مورد CSS ها، در صورت استفاده از پلاگینی مانند Fastest Cache می توانید Critical CSS را در ابتدا لود کنید.
سلام، وقت بخیر
ممنونم بابت مطلب بسیار خوبی که مطرح کردید.
ممنون میشم برای سایت های که با وردپرس کار می کنن، پلاگین های مورد قبول رو معرفی کنید تا LCP رو به حد مطلوب کاهش بدن. با تشکر
سلام و وقت بخیر،
همان طور که در متن اشاره شد، موارد زیادی هستند که در LCP تاثیر دارند که هر کدام از آنها نیز به موارد متعدد دیگر وابسته هستند. ولی اگر بخواهیم در مورد پلاگین صحبت کنیم که قطعا راه حل کلی نیست و فقط به ارتقا برخی موارد کمک میکند، استفاده از پلاگین های کش مانند Fastest Cache یا Autoptimize می تواند به LCP کمک کند. همچنین استفاده از پلاگین هایی که کاربردشان اپتیمایز کردن عکس است نیز در LCP تاثیرگذار هستند.