سرمایه گذاری اکواسمارت

سلام. امیر کرابی مشاور سئو سایت شما هستم و امروز در این مقاله ترجمه شده درباره اینکه LCP سایت چیست - در 2023 چگونه بزرگترین رنگ محتوا را بهینه کنیم و در گوگل رتبه بالاتری بگیریم. با شما سخن خواهم گفت. لطفا تا انتها با من همراه باشید؛

LCP سایت چیست

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

اگر در حال مطالعه این صفحه هستید، احتمالا دغدغه های شما از این جنس باشد:

ای کاش وب سایت شما در گوگل رتبه بالاتری داشت؟

آیا وب سایت شما به دلیل زمان زیادی برای بارگذاری، ترافیک خود را از دست می دهد؟

آیا نمی دانید که چگونه سرعت سایت خود را افزایش دهید و در همان زمان در بالای صفحه های نتایج گوگل یا همان SERP ها ظاهر شوید؟

یک وب سایت سریع نه تنها کاربران شما را خوشحال می کند و احتمال بیشتری برای تبدیل شدن دارد، بلکه می تواند به شما در رتبه بهتر در گوگل کمک کند.

در واقع، گوگل سرعت وب‌سایت را به‌عنوان یک عامل رتبه‌بندی می‌شناسد ، مخصوصاً وقتی صحبت از نحوه تأثیرگذاری آن در Core Web Vitals می‌شود.

در Core Web Vitals گوگل، سرعت بزرگترین رنگ محتوایی وب سایت شما (LCP) مهمترین معیار سرعت سایت است – همچنین این معیاری است که بیشتر وب سایت ها با آن دست و پنجه نرم می کنند.

این مقاله نحوه تست سرعت وب سایت خود را توضیح می دهد و وب سایت خود را سریعتر بارگذاری می کند.

روشهای بهبود LCP در Core Web Vitals

بزرگترین رنگ محتوایی (LCP) سرعت ظاهر شدن محتوای صفحه اصلی پس از باز کردن یک صفحه وب را اندازه گیری می کند .

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

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

در زیر می بینید که LCP این وب سایت در 1.6 ثانیه پس از باز شدن صفحه وب اتفاق می افتد.

بلافاصله پس از رفتن کاربر به صفحه، هیچ محتوایی قابل مشاهده نیست.

پس از حدود یک ثانیه، متن و یک تصویر کوچک به عنوان اولین رنگ محتوایی ظاهر می شود .

با این حال، تصویر بزرگ در صفحه تا 1.6 ثانیه پس از شروع ناوبری ارائه نمی شود. سپس این نقطه عطف رندر به عنوان بزرگترین رنگ محتوایی ثبت می شود .

چرا بزرگترین رنگ محتوایی برای سئو مهم است؟

Largest Contentful Paint یکی از سه معیار اصلی Web Vitals است که گوگل از آن به عنوان فاکتور رتبه بندی استفاده می کند.

اگر وب سایت شما کند بارگذاری می شود، می تواند باعث شود رتبه آن در گوگل پایین بیاید.

Google از داده‌های کاربران واقعی Chrome استفاده می‌کند تا تصمیم بگیرد که آیا سایت شما با معیارهای Core Web Vitals مطابقت دارد یا خیر. برخی از این داده‌ها نیز به‌عنوان بخشی از گزارش تجربه کاربر Chrome ( CrUX ) منتشر می‌شوند .

از بین سه معیار Core Web Vitals، LCP یکی از مواردی است که وب سایت ها بیشتر با آن دست و پنجه نرم می کنند. بر اساس داده‌های کلی، تنها 49.8 درصد از وب‌سایت‌های تلفن همراه تجربه بارگذاری خوبی را ارائه می‌کنند.

بهترین زمان رنگ آمیزی محتوا چه زمانی است ؟

بهترین زمان رنگ آمیزی محتوا باید کمتر از 2.5 ثانیه باشد . اگر یک وب سایت این الزام را برآورده کند، رتبه "خوب" را دریافت می کند.

اگر LCP شما بیش از 4 ثانیه باشد، این امتیاز به عنوان یک نمره "بد" رتبه بندی می شود که بیشترین تاثیر منفی را بر رتبه بندی دارد.

امتیازات بین 2.5 ثانیه تا 4 ثانیه به عنوان "نیاز به بهبود" رتبه بندی می شوند.

چگونه می توان بزرگترین رنگ محتوای وب سایت خود را اندازه گیری کرد

تست سرعت وب سایت رایگان را برای پیدا کردن آن اجرا کنید . سرعت LCP شما بلافاصله نمایش داده می شود.

نتایج تست سرعت به شما می گوید که:

• آستانه LCP برآورده شده است.
• شما باید هر Core Web Vital دیگری را بهینه کنید.

بزرگترین رنگ محتوایی چگونه محاسبه می شود؟

گوگل به صدک 75 تجربیات نگاه می کند - این بدان معناست که 25٪ از بازدیدکنندگان واقعی وب سایت زمان بارگذاری LCP 3.09 ثانیه یا بالاتر را تجربه می کنند، در حالی که برای 75٪ از کاربران LCP کمتر از 3.09 ثانیه است.

در این مثال، LCP کاربر واقعی به صورت 3.09 ثانیه نشان داده شده است.

نتایج آزمایش آزمایشگاهی در داده‌های اصلی وب حیاتی من چیست؟

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

1. به محض اینکه وب سایت خود را بهبود بخشید، معیارها به روز می شوند، در حالی که به روز رسانی کامل داده های Google در زمان واقعی 28 روز طول می کشد.
2. علاوه بر معیارها، گزارش های دقیقی دریافت می کنید که می تواند به شما در بهینه سازی وب سایت شما کمک کند.

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

محتوایی خود را پیدا می کنید ؟

تست سرعت صفحه را با DebugBear اجرا می کنید ، عنصر LCP در نتیجه آزمایش برجسته می شود.

گاهی اوقات، عنصر LCP ممکن است یک تصویر بزرگ باشد، و گاهی اوقات، ممکن است بخش بزرگی از متن باشد.

صرف نظر از اینکه عنصر LCP شما یک تصویر است یا یک قطعه متن، محتوای LCP تا زمانی که صفحه شما شروع به رندر کند ظاهر نمی شود.

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

اسکرین شات DebugBear.com، نوامبر ۲۰۲۲

در مقابل، LCP این صفحه یک پاراگراف از متن است.

اسکرین شات DebugBear.com، نوامبر ۲۰۲۲

برای بهبود بزرگترین رنگ محتوایی (LCP) وب سایت خود، باید اطمینان حاصل کنید که عنصر HTML مسئول LCP به سرعت ظاهر می شود.

چگونه می توان بزرگترین رنگ پر محتوا را بهبود بخشید

برای بهبود LCP باید:

1. دریابید که چه منابعی برای ظاهر شدن عنصر LCP لازم است.
2. ببینید چگونه می توانید آن منابع را سریعتر بارگذاری کنید (یا اصلاً).

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

پس از اجرای تست سرعت DebugBear ، می‌توانید روی هر معیار عملکرد کلیک کنید تا اطلاعات بیشتری درباره نحوه بهینه‌سازی آن مشاهده کنید.

تصویری از بزرگترین تجزیه و تحلیل رنگ محتوا در DebugBear.com، نوامبر 2022

منابع رایجی که بر LCP تأثیر می گذارند عبارتند از:

• منابع مسدودکننده رندر
• تصاویری که بهینه نشده اند.
• فرمت های تصویر قدیمی
• فونت هایی که بهینه نشده اند.

چگونه منابع مسدود کننده رندر را کاهش دهیم

منابع مسدودکننده رندر فایل هایی هستند که قبل از اینکه مرورگر بتواند محتوای صفحه را روی صفحه بکشد باید دانلود شوند. شیوه نامه های CSS معمولاً مانند بسیاری از تگ های اسکریپت رندر-مسدود کننده هستند.

برای کاهش تأثیر عملکرد منابع مسدودکننده رندر می‌توانید:

1. شناسایی منابعی که رندر مسدود می شوند.
2. اگر منبع لازم است بررسی کنید.
3. بررسی کنید که آیا منبع باید رندر را مسدود کند.
4. ببینید آیا می توان منبع را سریعتر بارگذاری کرد، مثلاً با استفاده از فشرده سازی.

راه آسان: در DebugBear درخواست آبشار ، درخواست‌ها برای منابع مسدودکننده رندر با تگ «Blocking» مشخص می‌شوند.

نحوه اولویت بندی و سرعت بخشیدن به درخواست های تصویر LCP

اولویت واکشی » بر روی تصاویر استفاده می کنیم تا به مرورگرهای بازدیدکننده شما کمک کنیم تا به سرعت تشخیص دهند چه تصویری باید ابتدا بارگیری شود.

از این ویژگی در عنصر LCP خود استفاده کنید.

چرا؟

وقتی فقط به HTML نگاه می کنیم، مرورگرها اغلب نمی توانند بلافاصله تشخیص دهند که چه تصاویری مهم هستند. یک تصویر ممکن است یک تصویر پس زمینه بزرگ باشد، در حالی که یکی دیگر ممکن است بخش کوچکی از پاورقی وب سایت باشد.

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

با این حال، این می تواند به این معنی باشد که مرورگر فقط نسبتا دیر شروع به دانلود تصویر LCP می کند.

جدید Priority Hints به صاحبان وب سایت اجازه می دهد تا اطلاعات بیشتری را برای کمک به مرورگرها در اولویت بندی تصاویر و سایر منابع ارائه دهند.

در مثال زیر، می بینیم که مرورگر زمان زیادی را در انتظار صرف می کند، همانطور که با نوار خاکستری نشان داده شده است.

اسکرین شات از یک تصویر LCP با اولویت پایین در DebugBear.com، نوامبر ۲۰۲۲

ما این تصویر LCP را انتخاب می کنیم تا ویژگی “ fetchpriority ” را به آن اضافه کنیم.

نحوه افزودن ویژگی FetchPriority به تصاویر

به سادگی با افزودن ویژگی fetchpriority =”high” به یک تگ img HTML ، مرورگر دانلود آن تصویر را در سریع ترین زمان ممکن در اولویت قرار می دهد.

< img src ="photo.jpg" fetchpriority "high" />

نحوه استفاده مناسب از فرمت ها و اندازه تصاویر مدرن

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

در نتیجه تست سرعت زیر می توانید با نگاه کردن به نواحی سایه دار آبی تیره متوجه شوید. هر خط نشان دهنده قسمتی از تصویر است که به مرورگر می رسد.

دو روش برای کاهش اندازه تصویر وجود دارد:

1. اطمینان حاصل کنید که وضوح تصویر تا حد امکان پایین است. بسته به اندازه دستگاه کاربر، تصاویر را با رزولوشن های مختلف ارائه دهید.
2. از یک فرمت تصویر مدرن مانند WebP استفاده کنید که می تواند تصاویری با همان کیفیت را در اندازه فایل کمتر ذخیره کند.

نحوه بهینه سازی زمان بارگذاری فونت

اگر عنصر LCP یک عنوان یا پاراگراف HTML است، بارگذاری سریع فونت برای این تکه متن بسیار مهم است.

یکی از راه‌های رسیدن به این هدف، استفاده از تگ‌های پیش بارگذاری است که می‌تواند به مرورگر بگوید فونت‌ها را زود بارگذاری کند.

font -display: swap قاعده CSS همچنین می‌تواند رندر سریع را تضمین کند، زیرا مرورگر بلافاصله قبل از تغییر به فونت وب، متن را با یک فونت پیش‌فرض ارائه می‌کند.

تصویری از فونت های وب که LCP را در DebugBear.com به تاخیر می اندازند، نوامبر 2022

وب سایت خود را برای سریع نگه داشتن LCP نظارت کنید

نظارت مستمر وب‌سایت خود نه تنها به شما امکان می‌دهد تأیید کنید که بهینه‌سازی LCP شما کار می‌کند، بلکه مطمئن می‌شود که در صورت بدتر شدن LCP، هشدار دریافت می‌کنید.

DebugBear می تواند Core Web Vitals و سایر معیارهای سرعت سایت را در طول زمان نظارت کند. این محصول علاوه بر اجرای آزمایش‌های عمیق مبتنی بر آزمایشگاه، معیارهای کاربر واقعی Google را نیز پیگیری می‌کند.

این زمانی از سال است که سازندگان محتوا محتوای خود را که عملکرد خوبی داشته است می گیرند و آن را از نسخه 2022 به نسخه 2023 به روز می کنند. اما به‌روزرسانی منابع سال 2022 به 2023 کافی نیست و گوگل می‌گوید تنها زمانی این کار را انجام دهید که به‌روزرسانی قابل توجهی در آن محتوا انجام دهید.

این موضوع هر سال مطرح می شود، سئوکارانی که به نوعی از سئو اسکریپت استفاده می کنند، به طور پیش فرض فقط این کار را انجام می دهند، آنها فقط نسخه های 2022 را به نسخه های 2023 با برخی تغییرات جزئی در محتوا به روز می کنند. اما باز هم، گوگل سال‌هاست که نسبت به تغییر نام محتوای قدیمی به عنوان جدید هشدار می‌دهد و می‌گوید فقط زمانی که HYPERLINK "https://www.seroundtable.com/old-content-as-new-seo-hack-26220.html" تغییر قابل توجهی در محتوا ایجاد می‌شود، تاریخ‌ها را به‌روزرسانی کنید . گوگل حتی گفت که اکثر محتوای همیشه سبز به هیچ وجه نیازی به تغییر تاریخ ندارند .

بنابراین موضوع دوباره مطرح شد، بگذارید آن را نسخه 2023 بنامیم. از جان مولر از گوگل در مورد آن در توییتر پرسیده شد و گفت: "آیا محتوای جدید قابل توجهی وجود دارد؟ سپس تاریخ ها را به روز کنید. آیا محتوای جدید قابل توجهی وجود ندارد؟ سپس تاریخ ها را به روز نکنید. ما شاهد تعداد زیادی محتوای هرزنامه و با کیفیت پایین هستیم. که فقط خودسرانه تاریخ ها را به روز می کند ("بهترین دستگاه فکس برای سال 2023")، بسیار واضح و شرم آور است." او اضافه کرد: "به روز رسانی محتوا مشکلی ندارد، و وقتی تغییرات قابل توجهی ایجاد می کنید، تاریخ را به روز کنید (یا از تاریخ به روز رسانی استفاده می کنید). سایت های جدی این کار را انجام می دهند. فقط تغییر دادن و گفتن "اوه، هنوز در سال 2023 معتبر است" نیست یک به روز رسانی قابل توجه."

این توییت هاست:

اما من مطمئن هستم که شما خواهید شنید، اما کار می کند - مطمئنا - ممکن است. اما این یک فرصت عالی برای بهبود قابل توجهی نسخه 2022 است - بنابراین شاید از این فرصت استفاده کنید؟

بحث انجمن در توییتر .

منبع محتوا:

How To Optimize The Largest Contentful Paint & Rank Higher In Google