بزرگترین محتوای چاپ شده یا LCP، یکی از شاخص‌های اصلی عملکرد (Core Web Vitals) که یک شاخص مهم برای گوگل است می باشد، LCP سرعت بارگذاری حس شده توسط یک کاربر را اندازه می‌گیرد. این معیار کاربر محور در مقایسه با سایر معیارهای Core Web Vitals بیشترین توجه را جلب می‌کند و زمان سپری شده برای نمایش بزرگترین محتوای یک صفحه وب قابل مشاهده برای بیننده قبل از اسکرول را اندازه‌گیری می‌کند.
این مقاله جنبه‌های فنی LCP را بررسی خواهیم کرد.
Largest Contentful Paint چیست؟
LCP به بزرگترین بخش بصری صفحه اشاره دارد. این شاخص زمان رندر بزرگترین عنصر قابل مشاهده (اغلب تصاویر) قبل از اینکه کاربر به پایین اسکرول کند یا بر روی دکمه‌ای ضربه بزند را گزارش می‌دهد.
LCP عمدتاً فقط به اشیایی که در بالای صفحه قرار دارند یعنی محتوایی که کاربر بدون اسکرول می‌تواند مشاهده کند توجه دارد. این اشیاء معمولاً شامل عناصری مانند تصاویر، متن‌های یک بلاک یا تصاویر کاور ویدیو می‌شوند. LCP به چیزی که خارج از صفحه نمایش اولیه (منطقه قابل مشاهده یک صفحه وب که می‌تواند بر اساس دستگاه استفاده شده برای مرور تغییر کند) قرار دارد، توجه نمی‌کند.
تفاوت Largest Contentful Paint و First Contentful Paint
برخلاف زمان بارگذاری بزرگترین عنصر (LCP)، اولین محتوای نقاشی شده (FCP) به زمانی که اولین عنصر بصری در پنجره مشاهده ظاهر می‌شود اشاره دارد.
چرا LCP برای سئو مهم است؟
در حالی که در مورد رابطه بین بهینه‌سازی موتور جستجو (SEO) و LCP فکر می‌کنید، به یاد داشته باشید که الگوریتم موتور جستجوی گوگل LCP را یک سیگنال رتبه‌بندی مهم برای اندازه‌گیری تجربه صفحه در نظر می‌گیرد. اگر یک وبسایت دارای طراحی پیچیده، محصولات جذاب و محتوای خوب باشد اما بارگذاری آن زمان زیادی طول بکشد، تجربه کاربری بدی ایجاد خواهد کرد. هر چه سایت سریع‌تر بارگذاری شود، رتبه آن در صفحه نتایج جستجوی گوگل بهتر خواهد بود.
چطور LCP را اندازه گیری کنیم؟
انواع عناصر فردی که معمولاً برای LCP در نظر گرفته می‌شوند عبارتند از:
تصاویر پیش‌زمینه :
- عناصر تصویر (<img>)
- عناصر تصویر داخل کد SVG (<image>)
- تصاویر پس‌زمینه
تصاویر پس‌زمینه با CSS (background: url(‘example.png’)) یعنی تصاویری که با خاصیت های CSS تنظیم شده اند
عناصر ویدیویی : فقط تصاویر کوچک ویدیو یا عناصر ویدیویی با تصاویر زمینه (thumbnails)
عناصر متنی : بلوک تگ‌های پاراگراف متن (<p>)، لیست‌ها (<ol>, <ul>) یا عناوین (<h1>, <h2>).
لازم به ذکر است که تا زمان نگارش این مقاله، عناصر svg و ویدیویی برای محاسبه امتیاز LCP استفاده نمی‌شوند، اما ممکن است در آینده اضافه شوند.
اندازه عنصر چگونه تعیین می شود؟
معمولاً اندازه عنصری که برای LCP با چشم غیرمسلح در viewport مشاهده قابل مشاهده است گزارش می‌شود.
اندازه = عرض × ارتفاع
حاشیه خارجی (margin)، فاصله داخلی(padding) و مرز ها (border) بخشی از محاسبه اندازه نیستند.
به یاد داشته باشید که بین اندازه ذاتی (اندازه اصلی عنصر آپلود شده) و اندازه قابل مشاهده عنصر تمایز قائل شوید. گوگل هر اندازه پیکسلی که بین اندازه‌های قابل مشاهده و ذاتی کوچکتر باشد را برای محاسبه اندازه عنصر در نظر می‌گیرد.
ابزارهای اندازه گیری LCP
شما می‌توانید LCP را با استفاده از دو روش اصلی اندازه‌گیری کنید:
ابزارهای آزمایشگاهی | Lab tools (ابزار نظارت مصنوعی مانند WebPageTest): این ابزارها به شبیه‌سازی عملکرد وبسایت بر اساس الگوریتم‌ها اشاره دارند.
ابزارهای میدانی | Field tools (نظارت بر کاربران واقعی): این ابزارها به طور مستقیم بر روی وبسایت زنده و بر اساس ترافیک واقعی اندازه‌گیری می‌شوند. ابزارهایی که برای این اندازه‌گیری استفاده می‌شوند شامل کنسول جستجوی گوگل (گزارش جدید Core Web Vitals) و کتابخانه جاوااسکریپت Web Vitals هستند.
برای یافتن سریع بزرگترین عنصر با استفاده از WebPageTest مراحل زیر را دنبال کنید:
به این آدرس مراجعه کنید: www.webpagetest.org/webvitals
آدرس URL صفحه وب مورد نظر خود را وارد کنید.
روی دکمه “Start Test” کلیک کنید و چند دقیقه برای دریافت نتایج نهایی صبر کنید.
برای دیدن تمام مراحل تست به صورت فریم به فریم، گزینه “View as Filmstrip” را انتخاب کنید یا برای مشاهده از تجربه کاربر در حین بارگذاری صفحه گزینه “View Video” را انتخاب کنید. این دو ویژگی منحصر به WebPageTest بوده و عامل تمایز اصلی آن نسبت به سایر روش‌های اندازه‌گیری است.
امیدواریم این آموزش نیز مورد توجه شما قرار گرفته باشد و اگر سوالی در خصوص این آموزش داشتید حتما می توانید در بخش کامنت ها آن را با ما در میان بگذارید.
