LCP چیست؟

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

چرا LCP مهم است؟

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

امتیاز LCP خوب چیست؟

یک امتیاز LCP خوب، علامت 2.5 ثانیه یا کمتر است.

چگونه LCP را اندازه گیری کنیم؟

راه های مختلفی برای اندازه گیری Largest Contentful Paint وجود دارد.

Page speed Insights

Page speed Insights ابزاری رایگان از Google است که هم داده های آزمایشگاهی و هم در زمینه عملکرد صفحه را ارائه می دهد. این ابزار تعدادی از معیارهای عملکرد از جمله LCP را اندازه گیری می کند.

یکی از مزایای Page speed Insights این است که صفحه را در دو محیط تلفن همراه و دسک تاپ تجزیه و تحلیل می کند و توصیه های خاصی را برای پیشرفت ارائه می دهد. اما توجه داشته باشید که هر بار فقط می توانید یک URL را آنالیز کنید و شاید نیاز داشته باشید که همه این مراحل را برای چندین صفحه از سایت انجام دهید.

گزارش Core Web Vitals سرچ کنسول

سرچ کنسول یک گزارش Core Web Vitals ارائه می دهد که به شما کمک می کند دیدگاه روشنتری از وضعیت سایت داشته باشید. یکی از مزیت های استفاده از گزارش Core Web Vitals سرچ کنسول این است که به صورت گزارش کامل از آدرس صفحاتی که در حالت موبایل و دسکتاپ، وضعیت ضعیف، نیاز به بهبود و وضعیت خوبی دارند را نمایش می دهد.

پیشنهاد مطالعه: TTFB در سئو چیست؟

chrome devtools

Chrome DevTools مجموعه ای از ابزارهای توسعه دهنده وب است که به طور مستقیم در Google Chrome ساخته شده اند. DevTools اطلاعات زیادی در مورد نحوه رفتار یک صفحه، از جمله داده های مربوط به LCP ارائه می دهد.

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

DevTools ابزاری عالی برای تشخیص مشکلات عملکرد و بهینه سازی وب سایت شماست. در عین حال این پروسه می تواند پیچیده باشد و ممکن است برای استفاده مؤثر به سطح خاصی از مهارت فنی نیاز داشته باشد.

WebPagetest

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

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

دلایل اصلی امتیاز پایین LCP

در ادامه به معرفی چند عامل اصلی پایین بودن امتیاز Largest Contentful Paint می پردازیم. چرا که شناخت عامل اصلی درد، نیمی از درمان است و با شناخت عامل اصلی خرابکاری، می توانید برای آن چاره ای بیاندیشید.

سرعت پایین پاسخ سرور 

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

پیشنهاد مطالعه: TBT چیست؟ و چگونه می توان آن را بهینه کرد؟

جاوا اسکریپت و CSS مسدود کننده رندر

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

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

زمان بارگذاری کند منابع

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

رندر سمت کلاینت

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

چگونه LCP را بهینه کنیم؟

راه‌های مختلفی برای بهینه‌سازی Largest Contentful Paint وجود دارد و توصیه می کنیم که سایت هایی که می خواهند رتبه های بهتری در نتایج جستجو داشته باشند، این موارد را به دقت انجام دهند.

استفاده از هاست قابل اعتماد

یک هاست خوب، تضمین می‌کند که سایت شما همیشه در دسترس باشد، با سرعت بالا عمل کند و عملکرد کلی آن بهینه باشد. علاوه بر این، تضمین می‌کند که سایت شما بتواند ترافیک بالا را بدون کرش کردن یا کاهش سرعت مدیریت کند. هنگام انتخاب یک هاست به قابلیت اطمینان سرور، امتیازات آپتایم و سرعت آن توجه کنید.

اطمینان از اندازه‌گیری صحیح تصاویر

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

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

پیشنهاد مطالعه: INP چیست؟ چگونه می توان آن را اندازه گرفت و بهینه کرد؟

بهینه سازی تصاویر

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

• کاهش حجم تصاویر سایت
• استفاده از تصاویر با سایز و ابعاد مورد نیاز در سایت
• تصاویر غیرمرتبط که اغلب مربوط به قالب و دموی اولیه است را حذف کنید.
• سعی کنید تصاویر را با فرمت WebP در سایت بارگزاری کنید.

استفاده از CDN

استفاده از شبکه تحویل محتوا (Content Delivery Network) در کل برای سرعت سایت شما تاثیر مثبت دارد. چرا که محتوای سایت شما از سروری که از لحاظ جغرافیایی به کاربر نزدیک تر است، نمایش داده می شود. ممکن است شما هم به این مورد دقت کرده باشید که در صورتی که سرور سایت شما داخل ایران باشد، سایت برای کاربران ایرانی سریع تر لود می شود و کاربرانی که از خارج از کشور، سایت شما را می بینند، با سرعت پایین تری مواجه هستند. چرا که درخواست این کاربران از مسیر دورتری به سرور ارسال و پاسخ داده می شود. مثل این است زمانی که شما با 115 تماس می گیرید، همواره از نزدیک ترین مرکز به محل شما، آمبولانس اعزام می شود.

پیاده‌سازی کشینگ

کشینگ یک روش مؤثر دیگر برای بهبود امتیاز LCP سایت شما است. این کار شامل ذخیره موقت نسخه‌هایی از فایل‌های سایت شما در یک کش است تا کاربران بتوانند سریعاً به آن‌ها دسترسی پیدا کنند. این امر زمان بارگذاری سایت شما را به‌طور چشمگیری کاهش می‌دهد و امتیاز LCP شما را بهبود می‌بخشد.

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

مینیفای کردن فایل‌های JS، CSS و HTML

مینیفای کردن فایل‌های JS، CSS و HTML نیز می‌تواند امتیاز LCP شما را بهبود بخشد. مینیفیکیشن فرآیندی است که در آن داده‌های غیرضروری یا تکراری در کد شما حذف می‌شوند بدون اینکه عملکرد آن تحت تأثیر قرار گیرد. این شامل حذف فضاهای خالی، شکستن خطوط و کامنت‌ها می‌شود.

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

css های بلااستفاده را حذف کنید و یا اگر فکر می کنید که در صفحات دیگر مورد استفاده قرار می گیرند، آنها را به استایل‌شیت دیگر منتقل کنید.
برای به تاخیر انداختن css که نیازی نیست در ابتدا لود شود، از loadCSS استفاده کنید که موجب لود غیرهمزمان می شود. به این کد توجه کنید:

<“‘html <link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet

اینلاین کردن ‌CSS های ضروری، یعنی css های ضروری را داخل تگ <head> قرار دهید. این کار باعث می شود که دستورات و کدهای ضروری نیازی به درخواست رفت و برگشتی نداشته باشند.

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

فشرده‌سازی فایل های متنی

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