LCP یا Largest Contentful Paint چیست + راهکارهای بهبود آن

برای این کار شما می‌توانید اقدام به این‌لاین کردن کدهای سی‌اس‌اس خود کنید. این مسئله به شما کمک می‌کند تا زمان بارگذاری فایل‌های سی‌اس‌اس کاهش پیدا کند و به راحتی بتوانید به افزایش سرعت بارگذاری سایت خود و همچنین بهینه‌سازی LCP کمک کنید. زیرا این‌لاین کردن بیش از حد کدها خودش به تنهایی می‌تواند سرعت بارگذاری سایت راه کاهش دهد. گاهی اوقات حجم اطلاعات سایت بسیار زیاد است و همین مسئله باعث می‌شود تا زمان بارگذاری آن تا حد زیادی طولانی شود! برای آن که کاربر هر بار نخواهد محتوای تکراری یک صفحه را بارگذاری کند، قابلیت بسیار خوبی به نام Cache یا حافظه پنهان وجود دارد.

یکی از مهم‌ترین شاخص‌های این مجموعه، LCP (Largest Contentful Paint) است که نشان‌دهنده زمان بارگذاری بزرگ‌ترین المان محتوایی قابل مشاهده در صفحه است. در این مقاله، به بررسی LCP، روش‌های بهبود آن، و تأثیر آن بر تجربه کاربری و سئو سایت می‌پردازیم. برای بهبود LCP در Core Web Vitals، روش‌های متعددی وجود دارد که می‌تواند تأثیر مستقیمی بر کارایی وب‌سایت داشته باشد. استفاده از فرمت‌های فشرده مانند JPEG 2000، JPEG XR، و WebP که حجم کمتری دارند، می‌تواند زمان بارگذاری تصاویر را کاهش دهد.

اما Largest Contentful Paint چیست؟ آیا با آن آشنا هستید؟ ما در این مقاله قصد داریم به شما Largest Contentful Paint را بشناسانیم و راه‌هایی برای بهینه سازی LCP ارائه دهیم. Largest Contentful Paint یکی از معیارهای تجربه کاربری گوگل است که در سال ۲۰۲۱ به یکی از فاکتورهای مهم رتبه‌بندی سایت تبدیل شد. ما در این مقاله به شما نحوه سنجش آن و روش بهبود نمره Core Web Vitals را آموزش می‌دهیم. اگر فایل‌های CSS خود را تا حد امکان فشرده‌سازی کردید اما هنوز هم LCP راضی‌کننده ندارید، راه حل دیگری برای کدهای CSS شما وجود دارد.

گاهی اوقات هم دلایل دیگری نظیر دور بودن لوکیشن سرور باعث کند شدن پاسخ سرور می‌شود! بنابراین یکی از مهم‌ترین دلایلی که باعث می‌شود تا LCP بهینه نداشته باشید، سرعت کند پاسخ دادن سرور است. راه‌کارهای مختلفی برای این موضوع وجود دارد که مهم‌ترین آن‌ها بهینه‌سازی سرور، استفاده از CDN نزدیک به کاربران، کش کردن عناصر سایت و… شما با هریک از راهکاری فوق می‌توانید در سایت خود تغییرات مثبت اساسی را در جهت بهینه سازی LCP ایجاد کنید.

LCP تو نسخه قبلی GTmetrix جایگاهی نداشت و حالا به لطف Google Lighthouse وارد GTmetrix جدید شده. ابزارهای اندازه گیری سرعت هر کدوم به شکل خاصی LCP رو محاسبه می‌کنن. اما GTmetrix جدید بزرگترین محتوایی که در نیمه بالایی صفحه (Above the Fold) باشه رو به‌عنوان LCP در نظر می‌گیره. قبلا یک سری سنجش‌ها بود مثل Load یا DOMContentLoaded که الان خوب نیستن، چون بیشتر وقت‌ها آنچه که کاربر می‌بینه با اون چیزی که این سنجش‌ها نشون میدن مطابقت نداشت. این ابزار یک ابزار قدرتمند برای تست عملکرد وبسایت است که اجازه میدهد تستها از مکانها و دستگاههای مختلفی انجام شود.

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

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

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

با کلیک بر روی ردیف مربوط به این url، وارد صفحه‌ای می‌شویم که لیست URL هایی را که باید اصلاح شوند، ارائه می‌کند. پس از باز کردن گزارش Core Web Vitals، خواهیم دید که صفحات سایت ما با توجه به مقادیر استاندارد lcp چگونه عمل می‌کنند؛ خوب، نیاز به بهبود یا ضعیف. در نهایت اگر منبع LCP شما بزرگ نیست، منطقی است که منابع را به‌عنوان URL داده درج کنید تا درخواست‌های اضافی شبکه حذف شوند. چرا که منابع نمی‌توانند کَش شوند و ممکن است به‌دلیل هزینهٔ مرزگشایی اضافی باعث تأخیرهای طولانی‌تر در رندر شود. در مقاله بهینه‌سازی تصاویر به‌طور کامل دربارهٔ این‌ راه‌کارها صحبت کرده‌ایم. این یعنی هر چیزی که thread اصلی را بلاک کند می‌تواند باعث تأخیر رندر المان شود.

کاهش زمان انسداد CSS

به عبارت دیگر، LCP مشخص می کند که چه مدت طول می کشد تا بخش اعظم محتوایی که کاربر برای درک اولیه صفحه نیاز دارد، بر روی صفحه نمایش داده شود. LCP مخفف عبارت Largest Contentful Paint است و زمان بارگذاری بزرگترین المان بصری صفحه را اندازه گیری می‌کند. تا زمانی که محتوای lcp بارگذاری نشود، تقریباً چیزی در صفحه نخواهید دید. زیرا عنصر LCP همیشه در بالای صفحه قرار دارد و اولین المانی است که بارگیری می‌شود.

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

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

برای افرادی که به ‌تازگی در مسیر آموزش سئو قرار گرفته‌اند، پیشنهاد ما استفاده از PageSpeed Insights و Search Console است. در ادامه همراه با مثال و تصویر، نحوه استفاده از این ابزارها را به شما آموزش می‌دهیم. رندر کل صفحه به‌دلیل لود شدن همزمان شیوه‌نامه‌ها و اسکریپت‌ها در متوقف شده‌ است. خوشبختانه منبع LCP باید درست همزمان با اولین منبع صفحه شروع به لود شدن کند.

درحالی‌که زمان بارگذاری، زمانی است که طول می‌کشد محتوا صرفاً قابل دیدن باشند. این لود سریع با سه‌فاکتور LCP و CLS و FID که به معیارهای Core Web Vitals یا فاکتورهای حیاتی وب مشهور هستند، سنجیده می‌شود. امان از این سه‌حرفی‌های اختصاری که حرف‌های زیادی هم برای گفتن دارند! LCP از فاکتورهای اصلی پرفورمنس وب‌سایت، یکی از همین سه‌حرفی‌هاست که اتفاقاً جزییات زیادی دارد.

پیشنهاد می‌کنیم برای رسیدن به امتیاز قابل اتکا، از ابزارهای PageSpeed Insights و Search Console استفاده کنید. ولی اگر به این دو ابزار دسترسی ندارید، از گزارش جی تی متریکس هم می‌توانید کمک بگیرید. می‌شود گفت هرگز لازم نیست اسکریپت‌های همزمان (اسکریپت‌های بدون ویژگی‌های async یا defer) به صفحات خود اضافه کنید. پس از تشخیص استایل‌های ضروری، آن‌ها را به حداکثر ممکن فشرده‌سازی کنید. حالا به‌هردلیلی که در دام Render-blocking ها افتاده باشید، با روش‌های بخش بعدی می‌توانید آن‌ها را برطرف کنید.

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

تمام نکات بالا و نحوه بهینه سازی سایت ها نه تنها در دوره آموزش سئو ما بلکه در آموزش طراحی سایت در کرج و دیگر مناطقی که برگزار می‌کنیم آموزش کامل داده می‌شود. آکادمی دی ام روم، مرجع حرفه‌ای برای آموزش‌های تخصصی دیجیتال مارکتینگ، طراحی وب‌سایت، سئو، و راه‌اندازی کسب‌وکارهای اینترنتی است. با ارائه دوره‌های جامع، کاربردی و پشتیبانی مستمر کمک می‌کنیم تا در مسیر رشد پایدار گام بردارید. برای بهینه سازی گروهی تصاویر، می‌توانیم از ابزاری مانند ImageOptim استفاده کنیم. همچنین اگر می‌خواهیم تصاویر خیلی بیشتری را به‌صورت انبوه بهینه سازی کنیم، افزونه Imagify یک راه‌حل عالی است که حجم و ابعاد تصاویر را به‌طور هم زمان کاهش می‌دهد. این گزارش عملکرد lcp را بر اساس وضعیت، نوع مشکل و URL ها گروه بندی می‌کند.

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

با بهبود LCP، می‌توانید تجربه کاربری بهتری ارائه دهید، نرخ پرش را کاهش دهید و شانس خود را برای رسیدن به رتبه‌های برتر گوگل افزایش دهید. بنابر دلایل امنیتی، برچسب زمانی رندر تصاویر برای تصاویری که از منابع مختلف هستند و هدر Timing-Allow-Origin ندارند، قابل رویت نیست. اما در صورت امکان، همیشه توصیه می‌شود که هدر Timing-Allow-Origin تنظیم شود تا معیارهای شما دقیق‌تر باشند. توجه به این نکته حائز اهمیت است که یک المان تنها در صورتی به عنوان بزرگ‌ترین المان محتوایی در نظر گرفته می‌شود که رندر شده و برای کاربر قابل رویت باشد.

راههای حل مشکل سرعت صفحات برای بهبود LCP

• این مسئله تاثیر بسیار زیادی در LCP شما دارد و به راحتی می‌توانید با این کار زمان بارگذاری حجیم‌ترین فایل را کاهش دهید که در نهایت منجر به بهینه‌سازی LCP می‌شود.
• Module Bundler یا Built Tool شامل پلاگین‌هایی می‌شوند که می‌توانید با کمک آن‌ها CSS خود را تا حد امکان کوچک‌تر کنید.
• این گزارش عملکرد lcp را بر اساس وضعیت، نوع مشکل و URL ها گروه بندی می‌کند.
• اگر از روش‌های بهینه‌ سازی نرخ تبدیل استفاده نکنید، کاربر پیش از استفاده و ارتباط با وبسایت شما، باید منتظر بماند تا تمامی جاوا اسکریپت‌های ضروری دانلود و اجر شوند.

به‌طور خلاصه، در این به‌روزرسانی، به صفحات سایتهایی که تجربه‌ای بسیار فوق العاده ای را برای کاربران خود ارائه می‌دهند، امتیازهایی داده می‏شود. کیفیت تجربه کاربری سایت با کمک تعداد زیادی از معیارها، از جمله موردسنجش قرار می‌گیرد. پری – رندرینگ در مقایسه با رندرینگ Server – side یک روش ساده‌تر است. از یک مرورگر بی‌سر که یک مرورگر بدون رابط کاربری است، می‌توانید برای ساخت فایل HTML استاتیک برای هر روت در طول Build Time استفاده کنید. از این فایل‌ها می‌توان در کنار باندل‌های جاوا اسکریپتی که برای وبسایت نیاز است استفاده کرد.

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

این ابزار ارائهدهنده ابزارهای مختلفی برای توسعه دهندگان وب است که در مرورگر Google Chrome تعبیه شدهاند. از طریق بخش Performance، میتوانید LCP و دیگر شاخصهای مربوط به بارگذاری صفحه را مشاهده کنید. سروری که پاسخ‌دهی کندی داشته باشد، می‌تواند مدت‌زمان بارگذاری محتوا را افزایش دهد. گوگل به طور فزاینده‌ای بر تجربه کاربری تأکید دارد و Largest Contentful Paint (LCP) یکی از معیارهای کلیدی برای بهبود این تجربه است.

مشکل نمایش تگ h1 به جای عنوان (title) در نتایج گوگل

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

Largest Contentful Paint یا LCP چیست و چرا برای سئو اهمیت دارد؟

به همین دلیل است که LCP طولانی می‌شود و تجربه کاربری سایت شما را به خطر می‌اندازد. در چنین شرایطی بهتر است از CDN نزدیک به کاربر مگ سئو استفاده کنید تا به جای فراخوانی اطلاعات از سرور اصلی، از سرور CDN بارگذاری شود تا زمان بارگذاری محتوای صفحه تا حد زیادی بهینه‌سازی شود. هنگامی که کاربران وارد یک سایت می‌شوند، انتظار دارند که محتوای آن صفحه در کم‌ترین زمان ممکن بارگذاری شود! حال محتوا زمان زیادی طول بکشد که بارگذاری شود، کاربران آن سایت را ترک می‌کنند و این مسئله تنها به دلیل تجربه کاربری بد اتفاق می‌افتد.

اگر این زمان بین ۲.۵ تا ۴ ثانیه باشد باید برای بهبود آن اقدام کنید اما باز هم قابل قبول است. اما اگر این زمان بیش از ۴ ثانیه بشود باید حتما برای بهینه سازی LCP اقدام کنید تا ضرری به سایت شما وارد نشود. WebPageTest یک ابزار قدرتمند برای تحلیل دقیق‌تر عملکرد سایت است که قابلیت‌های پیشرفته‌ای برای بررسی LCP چیست ارائه می‌دهد. Google PageSpeed Insights یکی از محبوب‌ترین ابزارهای تحلیل عملکرد سایت است که مستقیماً داده‌های Core Web Vitals، از جمله LCP چیست، را ارائه می‌دهد. برای درک اهمیت LCP و جایگاه آن در سئو، پیشنهاد می‌کنیم مقاله سئو چیست و چگونه سایت خود را بهینه‌سازی کنیم را مطالعه کنید تا با ارتباط این معیار با بهینه‌سازی سایت آشنا شوید. بهبود امتیاز LCP به این معنی است که وب سایت شما سریعتر بارگذاری شده و برای تعامل سریعتر با کاربران آماده می‌شود.

جمع‌بندی: LCP چیست و چرا برای سئو اهمیت دارد

شما همیشه باید بخشی از رندر وبسایت خود را در سمت سرور قرار دهید تا LCP شما نیز بهبود پیدا کند. زمانی که اکثر بخش‌های وبسایت شما از طرف مشتری رندر شود و حجم باندل جاوا اسکریپت بالا باشد، باید بسیار مراقب تأثیر آن بر LCP وبسایت خود باشید. اگر از روش‌های بهینه‌ سازی نرخ تبدیل استفاده نکنید، کاربر پیش از استفاده و ارتباط با وبسایت شما، باید منتظر بماند تا تمامی جاوا اسکریپت‌های ضروری دانلود و اجر شوند. بسیاری از وبسایت‌ها از جاوا اسکریپت client-side برای رندر مستقیم صفحات در مرورگر استفاده می‌کنند. فریم‌ورک‌ها و لایبراری‌های مختلفی همانند React، Angular و همچنین Vue ساخت SPA را ساده‌تر می‌کند.

در این جدول به تفاوت سرعت LCP بعد از اعمال Cache-first HTML دقت کنید. این کار را می‌توان با استفاده از API زمان‌بندی المان (Element Timing API) انجام داد که در مقاله‌ی معیارهای سفارشی توضیح داده شده است. تصاویر و ویدیوها، منابع CSS و JavaScript، سرعت سرور و تنظیمات کشینگ مرورگر. فایل‌های CSS و JavaScript می‌توانند زمان بارگذاری صفحه را افزایش دهند، به خصوص اگر این فایل‌ها بزرگ و غیر فشرده باشند. برای مشاهده آخرین آموزش و تکنیک سئو، طراحی وب‌سایت و سایر زمینه‌های دیجتال مارکتینگ اینستاگرام آکادمی دی‌ام‌روم را دنبال کنید. بنابراین اگر Prerendering با معماری سایت شما سازگاری دارد، SSG بهترین راه‌کار برای بهبود پرفورمنس است.

بهینه‌سازی سرعت سایت یکی از اولویت‌های تمام کسب و کارهای اینترنتی است. زیرا همه افراد می‌خواهند تجربه کاربری بهتری را به مخاطبان خود ارائه دهند. Largest Contentful Paint یا LCP نیز یکی از معیارهای مهم برای رسیدن به این هدف به حساب می‌آید.

LCP معمولاً یک تصویر یا یک بلوک متنی است، ولی می‌تواند یک ویدیو یا حتی انیمیشن هم باشد. جالب است بدانید، مقدار lcp بین نسخه موبایل و دسکتاپ سایت در اغلب موارد متفاوت است. اگر در استفاده از جاوا اسکریپت مهارت دارید، حتی می‌توانید از Largest Contentful Paint API استفاده کنید. با اینکه داده های مربوط به پیدا کردن LCP در هریک از این منابع و ابزارها مفید هستند، می‏توان گفت استفاده از منابعی که در آن‌ها از اطلاعات کاربران واقعی استفاده شده است، اهمیت زیادی دارد. زیرا می‌توانید اطلاعات ارزشمندی را در مورد تجربه کاربری صفحات سایت خود کسب کنید که در منابع تست خودکار کنترل شده وجود ندارند.

به همین دلیل است که بهتر است اگر از فایل‌هایی که روی سرور دیگری وجود دارند استفاده می‌کنید، حتماً آن‌ها را بررسی کنید و در صورت امکان، آن را بر روی سرور خود میزبانی کنید. البته گاهی اوقات مشکل از منابع نیست و نیاز به بهینه‌سازی یا کاهش حجم فایل دارید! بنابراین ابتدا باید دلیل اصلی مشکل را پیدا کنید و سپس اقدام به رفع مشکل کنید. اندازه‌گیری LCP دلایل مختلفی دارد که همگی به بهبود تجربه کاربری و عملکرد وب‌سایت مربوط می‌شوند. در ادامه به بررسی چند مورد از مهم‌ترین دلایل اصلی اندازه‌گیری این شاخص خواهیم پرداخت. اگر اخبار و اطلاعات مربوط به سئو را دنبال کرده باشید، احتمالاً به اطلاعاتی در مورد به روز رسانی معیارهای تجربه کاربری گوگل رسیده اید.

اندازه گیری امتیاز LCP

همچنین توصیه‌هایی را برای بهبود عملکرد lcp در سئو و بهنیه سازی مقدار آن ارائه می‌نماید. این واقعیت که گوگل lcp را به ‌عنوان یکی از معیارهای مهم ارزیابی سرعت سایت توصیه کرده است، به خودی خود اهمیت آن را نشان می‌دهد. به علاوه اینکه، از ماه می ‌سال ۲۰۲۰ هم lcp به عاملی پیش فرض برای ارزیابی عملکرد سایت تبدیل شد. به یاد داشته باشید که ممکن است بارگیری یک تصویر بزرگ بیش از بزرگترین المان Block-Level متن طول بکشد. در این حالت اتفاقی که می‌افتد این است که یک PerformanceEntry برای بزرگترین المان Block-Level متن وارد می‌شود.

در عکس بالا مشاهده می‌کنیم زمانی که به‌عنوان FCP تعیین میشه، کاربر چیزی رو در صفحه نمی‌بینه. Lazy Loading یا بارگذاری تنبل، یکی از تکنیک‌های محبوب برای بهبود زمان بارگذاری است، اما اگر به‌درستی انجام نشود، می‌تواند LCP چیست را تحت تأثیر منفی قرار دهد. کدهای جاوااسکریپت و CSS غیرضروری می‌توانند عملکرد صفحه را مختل کرده و زمان LCP چیست را افزایش دهند. این ابزارها به شما کمک می کنند تا LCP وب سایت خود را اندازه گیری کرده و راه هایی برای بهبود آن پیدا کنید. اگر شما هم مدت زمانی است که در حوزه سئو یا طراحی سایت کار می‌کنید، ممکن است گاهی اوقات عبارات و کلماتی به گوشتان بخورد که برایتان عجیب و جدید به نظر برسد.

با استفاده از تکنیک‌ها و روش‌های مطرح شده در این مقاله، می‌توانید LCP وبسایت خود را بهبود بخشید و تجربه کاربری بهتری برای کاربران خود فراهم کنید. توجه به جزئیات و اجرای بهینه‌سازی‌های لازم، می‌تواند تأثیر زیادی بر سرعت بارگذاری و رضایت کاربران از وبسایت شما داشته باشد. همان‌طور که در ابتدای مقاله توضیح دادیم؛ LCP مخفف Largest Contentful Paint است و یکی از ۳ شاخص اصلی Core Web Vitals محسوب می‌شود. Largest Contentful Paint (LCP) یکی از معیارهای کلیدی در بهبود تجربه کاربری و ارتقاء رتبه‌بندی صفحات در نتایج جستجوی گوگل است. بهینه‌سازی این شاخص نیازمند توجه به چندین جنبه متفاوت از طراحی و توسعه وبسایت است.

به‌طور کلی توصیه می‌کنیم از استایل inline تنها در صورتی استفاده کنید که استایل‌شیت‌ کوچک باشد. زیرا محتوای اینلاین شده نمی‌تواند برای بارگذاری‌های بعدی در صفحه ذخیره شود. اگر استایل‌شیت به‌قدری بزرگ است که لود شدنش بیش از لود LCP طول بکشد، اینلاینینگ نمی‌تواند روش خوبی باشد. به‌اندازه‌ٔ کافی دربارهٔ معیار LCP می‌دانیم که بتوانیم وارد بهینه‌سازی فاکتور LCP سایت شویم. پس آستین‌ها را بالا بزنید و آماده شوید که تأخیر رندرینگ و لود را با آموزش‌های زیر بهینه‌سازی کنید. ممکن است این‌طور به‌نظر برسد که به دلیل کوتاه‌تر بودن زمان لود نسبت به زمان رندر، احتمالاً با درج نکردن Timing-Allow-Origin برد می‌کنید.

همچنین از Server Worker ها می‌توان برای کش کردن هر نوع منبع استاتیک استفاده کنید. این منابع را می‌توان در شرایط ریکوئست‌‌های تکراری، به مرورگر ارائه نمود. اگر Assets بزرگی دارید که در هنگام رندر ابتدایی ضروری هستند، باید بر اساس ارتباط و نوع دستگاه کاربر، از انواع مختلف آن در یک منبع استفاده کنید. به‌عنوان مثال زمانی که کانکشن کاربر شما ضعیف‌تر از 4G باشد، به جای فیلم، تصاویر ثابت به نمایش در بیاورید. این مکانیزم برای چنین کاری محتوا را در فرمتی ارائه می‌دهد که به‌راحتی قابل کش شدن باشد. این مسئله ممکن است به‌خاطر نتایج معوقه یک دیتابیس کوئری باشد یا اینکه حتی شاید اجزایی وجود دارند که باید در ساختار UI ایجاد شود.

به طور کلی، مقدار startTime آخرین ورودی خارج شده همان مقدار LCP است. همه‌ی ورودی‌های بزرگ ترین ترسیم محتوایی صفحه برای اندازه‌گیری LCP معتبر نیستند. مهم نیست که کاربران ما کجا باشند، CDN اطلاعات سایت را در کوتاه‌ترین زمان ممکن برای آنها ارسال می‌کند و باعث بهبود تجربه کاربران می‌شود. با بررسی گزارش Core Web Vitals در Search Console گوگل می‌توانیم عملکرد سایت خود را ارزیابی و هر مشکلی را شناسایی کنیم.

جلسه ۳ – بررسی گزارش Summary در GTmetrix جدید

اگر ناشر تصویری با طول ۲۰۴۸ پیکسل و عرض ۱۱۵۲ پیکسل را بارگذاری کند، آن طول و عرض که به شکل ۲۰۴۸ x 1152 نمایش داده می‌شود، اندازه ذاتی آن عکس در نظر گرفته خواهد شد. حال اگر ناشر تصویر دارای ابعاد ۲۰۴۸ x 1152 پیکسل را به ۶۴۰ x 360 پیکسل تغییر دهد، ابعاد تصویر با اندازه ۶۴۰ x 360 را اندازه دیداری آن می‌گویند. گوگل برای محاسبه اندازه تصویر، بین اندازه ذاتی و دیداری عکس، موردی را مد نظر قرار می‌دهد که ابعاد کوچکتری دارد. بد نیست اشاره کنیم که کم کردن حجم تصویر در بهینه سازی سرعت سایت تاثیر قابل توجهی دارد. یکی دیگر از مشکلاتی که باعث می‌شود تا زمان LCP طولانی باشد، این است که لوکیشن سرور از کاربران بسیار دور است! به عنوان مثال اگر سرور شما آمریکا باشد، قطعاً مدت زمان بیشتری را نسبت به سروری که در ایران قرار دارد طول می‌کشد تا اطلاعات فراخوانی شود.

طراحی سایت خبری اقتصاد آنلاین

با ما تماس بگیرید و تیمی از متخصصان ما به شما خدمات با کیفیت ارائه خواهند کرد. در حال حاضر پلاگین حرفه‌ای برای استخراج Unused CSS معرفی نشده، ولی می‌توانید از پلاگینی مانند Fastest Cache استفاده کنید تا Critical CSS ابتدا لود شوند. المان  LCP توسط برخی کدهای دیگر (مثل کتابخانهء تست A/B) پنهان می‌شود.

هدف این مرحله کاهش زمان انتقال اولین بایت داده و ارائه HTML در سریع‌ترین زمان ممکن است. این مرحله را برای پایان نگه‌داشتیم، چرا که معمولاً توسعه‌دهنده‌ها به آن توجه کافی را دارند. با این وجود اقدام بسیار مهمی است زیرا بر تمام مراحل بعدی کار تأثیر می‌گذارد.

ولی با توجه به اینکه Server response time با بهبود ttfb بهینه می‌شود، پس باید مقدار هر دو عامل را بهبود دهیم. در هر حالتی غیر از این دو متن همیشه در حین بارگذاری هم قابل مشاهده خواهد بود. در مرحلهٔ اول با این هدف فعالیت می‌کنیم که مطمئن شویم منابع LCP هرچه سریع‌تر بارگذاری شوند. از لحاظ تئوری، اولین منبع بلافاصله بعد از TTFB (دریافت اولین بایت داده از وب‌سرور) شروع به بارگذاری می‌کند. اما درواقع بین دریافت اولین بایت داده از وب‌سرور و شروع لود منابع توسط مرورگر هم تأخیر وجود دارد. اما اگر در هدر صفحه Timing-Allow-Origin وجود نداشته باشد، زمان رندر در نظرگرفته نمی‌شود.

معمولاً فایل‌های سی‌اس‌اس و جاوا اسکریپت با این مشکل مواجه می‌شوند و بهتر است با بهینه‌سازی کدهای خود از بروز چنین مشکلی جلوگیری کنید. در هر سایت دو نوع جاوا اسکریپت و CSS وجود دارد که دسته اول ضروری و دسته دوم غیر ضروری هستند! قبل از توضیح در مورد پیدا کردن LCP ابتدا به برای ارتقای رتبه بندی صفحات سایت می‌پردازیم. همانطور که گفتیم LCP یکی از المان های Core Web Vital گوگل است که به زمان بارگذاری بزرگترین عنصر محتوایی در سایت اشاره دارد. این عنصر بر اولین تجربه کاربر از سایت بسیار موثر است و به همین دلیل بهینه سازی LCP میتواند به طور قابل توجهی در ارتقای تجربه کاربری و افزایش رضایت از سایت شما تاثیر بگذارد. این معیار نشان می‌دهد که چه مدت طول می‌کشد تا محتوای اصلی صفحه قابل‌مشاهده شود، و مستقیماً بر رضایت کاربران تأثیر می‌گذارد.

Largest Contentful Paint (LCP) چیست؟

این SPA ها می‌توانند به‌خوبی وجوه مختلف یک صفحه وب را بر اساس کاربر نهایی و نه سرور مدیریت کنند. تصاویری که هنوز بارگذاری نشده‌اند را نمی‌توان رندر شده در نظر گرفت. همچنین، گره‌های متنی که از فونت‌های وب در بازه‌ی بلوک فونت استفاده می‌کنند را هم نمی‌توان در نظر گرفت. در چنین مواردی، یک المان کوچک‌تر ممکن است به عنوان بزرگ‌ترین المان محتوایی گزارش شود اما به محض این که رندر المان بزرگ‌تر به پایان رسد و کامل شود، یک PerformanceEntry جدید ارسال خواهد شد. LCP یا همان Largest Contentful Paint یکی از مهم‌ترین عوامل تعیین‌کننده تجربه واقعی کاربر و سئو سایت است.

در واقع سرعت دریافت و ارائه محتوای درخواستی توسط مرورگر، امتیاز lcp و سرعت را تعیین می‌کند و باید بهینه شود. تصور کنید مرورگر درخواست خود را ارسال و محتوا را از سرور دریافت کرد. در این مرحله، مرورگر محتوا را رندرگیری کرده و نمایش می‌دهد؛ ولی کُند! برای ارائه هر محتوا، مرورگر باید HTML صفحه را تحلیل و به محتوایی قابل خواندن تبدیل کند. ولی اگر برخی از اسکریپت‌ها و شیوه‌نامه‌های تجزیه HTML مسدود یا بلاک شده باشند، این تحلیل و تبدیل به تأخیر می‌افتد و باز هم محتوای درخواستی کاربر با تأخیر نمایش داده می‌شود.

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

برای حل این مشکلات، می‌توانید از تکنیک‌های بهینه‌سازی کدهای JavaScript استفاده کنید. برای رصد مشکلات شاخص مذکور در کدهای جاوا اسکریپت هم می‌توانید از ابزارها و تکنیک‌های مختلفی (مانند Google PageSpeed Insights یا Lighthouse در Chrome DevTools و…) کمک بگیرید. Largest Contentful Paint (LCP) یکی از سه معیار اصلی Core Web Vitals است که گوگل برای ارزیابی کیفیت تجربه کاربری در وب‌سایت‌ها استفاده می‌کند. این معیارها شامل LCP، First Input Delay (FID) و Cumulative Layout Shift (CLS) هستند. هر سه این معیارها تأثیر مستقیم بر رضایت کاربران و رتبه‌بندی گوگل دارند.

با کمک این ابزار می‌توانیم عملکرد lcp در موبایل و دسکتاپ را به ‌صورت مجزا بررسی کنیم. برای کاهش زمان LCP بایستی زمان لود و بارگیری منابع را به‌ حداقل برسانیم. با اعمال برخی بهینه‌سازی‌ها در اسکریپت‌ها و افزایش سرعت TTFB می‌توانید امتیاز بهتری از این فاکتور دریافت کنید. تجربه‌ٔ رضایت‌بخش کاربران از سایت شما تا حد قابل‌توجهی به سرعت سایت بستگی دارد. اگر دقیقاً نمی‌دانید منظور از پرفورمنس چیست، پیشنهاد می‌کنیم به مقاله‌ای که پیش‌تر در مجله لیمو منتشر کرده‌ایم سری بزنید. «LCP» پیچیده است و زمان‌بندی آن می‌تواند تحت تاثیر عوامل متعددی قرار گیرد.

ابزارهایی مانند Google PageSpeed Insights، Lighthouse، و WebPageTest بهترین انتخاب‌ها برای اندازه‌گیری LCP و دریافت پیشنهادات بهینه‌سازی هستند. از آنجایی که از پری – لود در کروم ۷۳ می‌توان هم زمان با تصاویر ریسپانسیو استفاده کرد، می‌توانید هر دو الگو را با هم ترکیب کنید تا تصاویر با سرعت بیشتری بارگذاری شوند. به جای آنکه بدون فوت وقت از یک صفحه استاتیک بر روی ریکوئست یک مرورگر استفاده کنید، باید بدانید که بسیاری از چارچوب‌های نرم‌افزاری تحت وب باید یک صفحه وب را به‌صورت پویا و دینامیک ارائه دهند.

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

می‌توانیم از فرمت‌های مناسب تصاویر مانند JPEG و WebP استفاده کنیم و حجم تصاویر را به کمتر از ۱۰۰ کیلوبایت برسانیم. به تعویق انداختن بارگذاری فایل‌های جاوا اسکریپت، راه حل این مشکل است. اگر به یاد داشته باشید در بخش معرفی عواملی که باعث افت lcp می‌شوند، گفتیم که مرورگر فایل‌های JS را تنها پس از تجزیه و تحلیل فایل‌های HTML و ساخت درخت DOM پردازش و بارگذاری می‌کند. قبل از اینکه به سراغ حل مشکلات ناشی از این ۳ عامل و آموزش روش‌های بهینه سازی lcp برویم، در بخش بعدی می‌خواهیم ببینیم که با چه ابزارهایی و چگونه می‌توانیم عنصر LCP را اندازه گیری کنیم.

از آنجا که تصاویر معمولاً بزرگ‌ترین عناصر قابل‌مشاهده در یک صفحه وب هستند، اندازه و نوع آن‌ها اهمیت زیادی دارد. LCP مخفف عبارت Largest Contentful Paint است و یکی از معیارهای اصلی در Core Web Vitals به شمار می‌رود. این معیار نشان‌دهنده مدت‌زمانی است که بزرگ‌ترین بخش قابل‌مشاهده در صفحه، مانند تصویر یا بلوک متن، برای کاربر بارگذاری می‌شود. اگر بخواهم شخصا این دو را با هم مقایسه کرده و نظر شخصی در موردش بدهم، از نظر من LCP فاکتور بهتری برای بررسی تعامل یک صفحه با کاربران است.