موتورهای جستجو در سال های اخیر سیاست های رتبه بندی خود را بر اساس جلب هر چه بیشتر رضایت کاربران گذاشته اند. بنابراین هر معیاری که با تجربه کاربری در ارتباط باشد، تاثیر مستقیمی بر روی رتبه بندی یک سایت می گذارد و باید آنرا در سایت خود بهینه کنیم. LCP یا Largest Contentful Paint نیز یکی از فاکتورهایی است که گوگل بر اساس آن تجربه کاربری یک سایت را اندازه گیری می کند، بنابراین بهینه سازی آن برای موتورهای جستجو داراری اهمیت زیادی است و در این مقاله می خواهیم به طور تمام و کمال به آن بپردازیم.
LCP چیست؟
LCP یا Largest Contentful Paint به مدت زمانی که طول می کشد تا بزرگترین المان در صفحه Paint شود، می گویند. این یکی از فاکتورهای مهم است که با آن سرعت بارگذاری یک صفحه را می سنجند.
اگر به تازگی از ابزار Gtmetrix استفاده کرده باشید، بی شک متوجه تغییرات آن به نسبت گذشته شده اید. این ابزار با بروزرسانی هایی که انجام داده است، عملکردی بسیار تخصصی تر و پیشرفته تر از گذشته دارد و دلیل آن رویکرد جدید Largest Contentful Paint می باشد. در واقع این معیار به جای اینکه کل زمان بار گذاری سایت را اندازه گیری کند، زمان لود شدن بزرگترین عنصر سایت را اندازه گیری می کند. در ادامه عناصری که گوگل برای اندازه گیری تجربه کاربری محاسبه می کند را معرفی کرده ایم.
عناصر مهم در محاسبه LCP چیست؟
همانطور که گفتیم LCP به مدت زمان بارگذاری بزرگترین عنصر صفحه گفته می شود. این عناصر می توانند موارد زیر باشند:
- تصاویر <img>
- تگ های مربوط به تصاویر <image> ، <svg>
- تصاویر شاخص ویدیو
- تصاویر پس زمینه ی ایجاده شده با CSS
- متن های درون خطی در سطح دوم یا عناصر محتوای درون متنی
لازم به ذکر این عناصر جزو عناصر اصلی است و همان طور که می دانید محتوا و ساختار صفحات یک سایت با سایت دیگر متفاوت است، بنابراین تمامی موارد ذکر شده قرار نیست برای همه سایت ها یکسان باشد.
اندازه یک المان چگونه تعیین می شود؟
دو حالت وجود کلی برای اندازه گیری وجود دارد: اندازه گیری المان های تصویری و اندازه گیری المان های متنی.
در واقع اندازه المان های تصویری گزارش شده در LCP، معمولا به همان اندازه ای است که در صفحه نمایش کاربر دیده می شود. در صورتی که عنصری خارج از دید بوده یا به جای یک تکه بودن از چند تکه تشکیل شده بود، بخش های اضافه در اندازه گیری محاسبه نمی شود.
همچنین اندازه گیری المان های تصویری که اندازه ی واقعی شان دچار تغییر شده است، به صورت زیر می باشد:
- تصاویری که به نسبت اندازه اصلی خود، گسترش پیدا کرده و بزرگ تر شده اند، اندازه واقعی آن در LCP گزارش می شوند.
- تصاویری که به نسبت اندازه اصلی خو کوچک تر شده اند، با اندازه ای که به نمایش گذاشته می شوند گزارش می شوند.
برای المان های متن نیز، گره های متنی در نظر گرفته می شود. یعنی برای اندازه گیری LCP در عناصر متنی، به کوچک ترین مستطیلی که همه گروه های متن را در بر می گیرد، توجه می شود.
امتیاز مناسب برای LCP چقدر است؟
منظور از طراحی LCP، درک بهتر از تجربه کاربری است. سایت های برای اینکه بهترین رنک محتوایی را کسب کنند، باید تلاش کنند این معیار را به 2.5 ثانیه یا کمتر برسانند. برای سنجش میزان موفقیت در این معیار، امتیاز بارگذاری صفحه در دستگاه های دسکتاپ و تلفن همراه باید باید بیش از 75 درصد باشد.
آیا LCP روی سئو تاثیر می گذارد؟
همانطور که می دانید سرعت بارگذاری صفحات هم برای کاربران و هم برای سئو سایت، اهمیت زیادی دارد. در واقع بازدید کنندگان زمان و حوصله کافی برای اینکه سایت شما به آرامی و با تاخیر لود شود را ندارند. بنابراین با مواجهه شدن با یک تاخیر چند ثانیه ای آنرا ترک کرده و سایت دیگری را جایگزین می کنند. گوگل به خوبی متوجه نارضایتی کاربران شده و رتبه بندی آنرا کاهش می دهند.
گوگل برای مشخص کردن این نارضایتی، شاخص های مختلفی را اندازه گیری می کند و از آنجایی که شاخص LCP نیز نشان دهنده مدت زمان انتظار کاربران در سایت شماست، یکی از این معیارهایی است که گوگل به آن توجه می کند.
چگونه این معیار را اندازه‌گیری کنیم؟
برای اندازه گیری LCP از دو روش می توانید عمل کنید:
- با استفاده از روش فیلد به طور مستقیم آنرا در سایت اندازه گیری کنید.
- عملکرد انجام شده توسط الگوریتم ها برای اندازه گیری این شاخص را شبیه سازی کنید.
اندازه گیری این موارد با استفاده از ابزارها صورت می گیرد و در بخش بعدی به معرفی این ابزارها می پردازیم.
ابزار های کاربردی برای تعیین مقدار Largest Contentful Paint
ابزارهایی که در ادامه معرفی کردیم، پیشنهادهای گوگل برای اندازه گیری LCP می باشد:
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Chrome User Experience Report
کار با دو مورد اول بسیار ساده می باشد. اما برای استفاده از مورد آخر به یک حساب کاربری گوگل و Google Cloud Project نیاز دارید.
نحوه افزایش سرعت LCP سایت
همانطور که گفتیم این معیار تاثیر بسیاری در رتبه بندی یک صفحه دارد، بنابراین بسیار مهم ست که آنرا در بهینه ترین حالت ممکن نگه دارید. حال اگر LCP سایت تان را اندازه گیری کردید و کمتر از میزان بهینه بود باید چه کرد؟ با ما همراه باشید تا در راهکارهایی که با آن می توان Largest Contentful Paint را بهینه کرد، بررسی کنیم.
بهینه سازی و فشرده سازی عکس ها
همان طور که اشاره کردیم تصاویر یکی از عناصری است که ممکن است با تاخیر بارگذاری شده و LCP سایت را کاهش دهد. به طور متوسط ۶۰ درصد از کل حجم صفحه را تصاویر اشغال می کند، بنابراین باید آنها را به صورت بهینه بر روی سایت بارگذاری کرد. در ادامه نکات مربوط به سئو تصاویر که با رعایت آن می توان سرعت صفحات را افزیش داد، آورده ایم.
1. تصاویر تکراری آپلود نکنید
این مشکل بیشتر در سایت های که چند نویسنده دارند به چشم می خورد. در واقع در این سایت ها ممکن است یک عکس چندین بار توسط نویسنده ها آپلود شود. آپلود کردن تصاویر تکراری، حجم زیادی را اشغال کرده و بر روی سرعت لود سایت، تاثیر می گذارد. برای جلوگیری از این اتفاق، توضیحات و اسم تصاویر را به خوبی انتخاب کرده تا با قابلیت سرچ درون تصاویر از بارگذاری مجدد آنها پیشگیری کنید.
2. تصاویر را فشرده کنید
تصاویری که حجم بالایی دارند بر روی سرعت بارگذاری سایت تاثیر گذاشته و باعث خطا در LCP می شوند. در واقع ممکن است تا این تصاویر بارگذاری شوند، مدت زمانی طول بکشد و تجربه بدی برای کاربران ساخته شود. برای فشرده سازی تصاویر می توانید از ابزارهایی که برای این کار وجود دارند همچون ImageRecycle، Kraken.io، Optimizilla و JPEG Optimizer استفاده کنید.
3. فرمت مناسب را انتخاب کنید
فرمت تصاویری که بر روی سایت تان بارگذاری می کنید، بر روی سئو و سرعت بارگذاری سایت تان تاثیر گذار است، بنابراین باید در انتخاب فرمت مناسب دقت کنید. ما در یک مقاله به طور اختصاصی در مورد فرمت تصاویر و تاثیری که بر روی سئو سایت می گذار صحبت کرده ایم و خواندن آن را برای رفع سردرگرمی در انتخاب قالب مناسب، پیشنهاد می کنیم.
4. از CDN استفاده کنید
سرویس های CDN به بارگذاری سریعتر تصاویر کمک می کنند. ابزار ImageEngine تمام کارهای مربوط به آپلود بهتر تصاویر را با در نظر گرفتن تمامی عوامل موثر مانند اندازه فایل، دسترسی دستگاه و مکان کاربر انجام می دهد.
5. از جاوا اسکریپت استفاده نکنید
اگر می خواهید LCP سایت تان در حد میانگین باقی بماند، بهتر است جاوا اسکریپیت را بارگذاری نکنید، چراکه استفاده از جاوا اسکریپت، روند لود صفحات را کاهش می دهد. پیشنهاد می شود این کار را به مرورگر خود بسپارید.
کاهش سرعت پاسخ گویی سرور
هر چه مدت زمان پاسخ سرور به درخواست مرورگر برای دریافت محتوا بیشتر طول بکشد، رندر کردن عناصر مختلف صفحه نیز بیشتر زمان می برد. بنابراین با افزایش سرعت پاسخ سرور، معیارهایی که مربوط به سرعت بارگذاری صفحه همچون LCP مربوط اند نیز بهینه می شوند. پس اگر می خواهید سایت تان امتیاز خوبی در Largest Contentful Paint باشد، باید نحوه پردازش محتوا در سرور را بهبود دهید. برای اندازه گیری این معیار از TTFB (Time to First Byte)استفاده می شود و راه های بهینه سازی آن عبارت اند از:
- کش کردن عناصر (Cache assets)
- صفحات HTML متکی بر کش
- بهینه سازی سرور
- روت کردن کاربران به یک CDN نزدیک
- به وجود آوردن اتصال های ثالث (third-party connections)
- حذف منابع مسدود کننده رندر
رندر کردن سمت کلاینت
سایت هایی که توسط سمت کلاینت رندر شده اند، برای بارگذاری در مرورگر به مقدار قابل توجهی جاوا اسکریپت نیاز دارند. همانطور که پیشتر اشاره داشتیم، این مورد اصلا برای بهینه سازی LCP خوب نیست و آنرا کاهش می دهد. بنابراین بسیار مهم است که جاوا اسکریپت ارسال شده به مرورگر را بهینه کنید.
اگر می خواهید سایت تان در سمت کلاینت رندر شود، بهتر است بهینه سازی های زیر را اعمال نمایید:
- از رندر سمت سرور استفاده کنید.
- جاوا اسکریپت ضروری را به حداقل برسانید.
- پیش-رند کنید.
سخن آخر
در این مقاله با یکی از فاکتورهای تاثیر گذار بر روی تجربه کاربری که توسط گوگل سنجیده می شود، یعنی LCP آشنا شدیم. سپس چگونگی اندازه گیری و راه های بهینه سازی Largest Contentful Paint را بررسی کردیم.