اگر شما بدانید که Core Web Vitals چیست قطعا با عبارت LCP که مخفف Largest Contentful Paint است مواجه شدهاید. LCP یک پارامتر از Core Web Vitals گوگل است که به مدت زمان لود شدن بزرگترین المان بصری صفحه (عکس یا متن) اشاره دارد. هدف از ارایه این فاکتور بهبود تجربه کاربری سایت یا همان UX است. حال که متوجه شدید LCP چیست با ما در همراه باشید تا کمی عمیقتر LCP به بررسی این فاکتور بپردازیم.
نحوه اندازه گیری LCP
ابزارهای زیادی برای اندازه گیری مقدار پارامترهای Core Web Vitals وجود دارد. در ادامه لیستی از این ابزارها را آماده کردهایم.
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Chrome DevTools
- Lighthouse
- WebPageTest
چه المانهایی در محاسبه این پارامتر موثر هستند؟
همان طور که در ابتدای این مقاله گفتیم المانهای عکس و متن میتوانند مقدار LCP را افزایش دهند. المانهایی که بر روی این پارامتر تاثیر گذار هستند در زیر لیست شدهاند.
- تگ <img> در کدهای HTML
- تگ <image> استفاده شده در داخل تگ <svg>
- عکس پوستر تگ <video>
- المانهایی با عکس بکگراند که به وسیله URL() در CSS لود شدهاند
نمره مناسب برای Largest Contentful Paint
برای اینکه مطمئن شوید تجربه کاربری سایت شما هنگام لود شدن مناسب است باید LCP کمتر از ۲.۵ ثانیه داشته باشید. اگر این پارامتر در سایت شما کمتر از ۲.۵ ثانیه باشد گوگل به شما نمره Good را برای این بخش میدهد.
راهکارهای بهبود LCP
این پارامتر در وهله اول توسط ۴ مورد ایجاد میشود.
- سروری که تایم ریسپانس زیادی داشته باشد.
- فایلهای CSS و JS که باعث بلاک شدن فرایند رندر میشوند.
- فایلهای که با سرعت کمی لود میشوند
- رندر کردن صفحه سمت کاربر (CSR)
در ادامه به بررسی مفصل تر هر کدام میپردازیم و میگوییم چطور با رفع برخی نواقص به بهینه سازی LCP سایت خود کمک کنید.
مشکلات سمت سرور موثر بر LCP
هرچه مدت زمان بیشتری طول بکشد تا سرور شما اولین پاسخ را بدهد به همام اندازه فرایند رندر کردن صفحه شما به تعویق میافتد.
پس بهتر است تمام تلاش خود را بکنید تا بتوانید یک فرایند بهینه برای پردازش و سِرو کردن درخواستها سمت سرور خود ایجاد کنید.
ما چند پیشنهاد برای شما داریم. مواردی که در ادامه به معرفی آنها میپردازیم بر حسب تجربه به دست آمدهاند.
از CDN استفاده کنید
یا Content delivery network یک شبکهای از سرورهای توزیع یافته در نقاط مختلف جهان است. اگر شما از CDN استفاده کنید مطمئن خواهید بود که درخواست کاربر از نزدیک ترین سرور به او پاسخ داده خواهد شد. علاوه بر این سرویسهای ارائه دهنده CDN خدمات دیگری مانند کش کردن سایت را هم به شما ارائه میدهند.
از کش استفاده کنید
اگر صفحات شما با فرکانس پایینی تغییر میکنند بهتر است از سیستمهای کش در لایههای مختلف استفاده کنید.
شما میتوانید کوئری های دیتابیس خود را کش کنید. یا فایلهای استاتیک سایت خود را مانند عکسها، فایل های css و js را کش کنید.
کش کردن باعث میشود زمان پردازش به شدت کاهش یابد و درخواست کاربر توسط وبسرور زودتر پاسخ داده شود.
با سرورهای دیگر زودتر کانکشن برقرار کنید
برای مثال اگر فایلهای JS سایت شما از سرور دیگری لود میشوند بهتر است با سرور ثالث با استفاده از دستورهای زیر زودتر کانکشن برقرار کنید.
مشکلات ایجاد شده توسط فایلهای بلاک کننده فرایند رندر
قبل از اینکه مرورگر شروع به رندر کردن یک صفحه بکند نیاز دارد تا تگهای نشانه گذاری HTML را به درخت DOM تبدیل کند.
در این فرایند اگر از فایلهای استایل خارجی یا تگ جاوااسکریپتی که به صورت Sync لود شده است استفاده کنیم باعث میشود این فرایند متوقف شود تا این فایلها کامل لود شوند.
فایلهای css و js هر دو میتوانند فرایند رندر کردن را بلاک کنند. این امر باعث میشود تا پارامتر FCP افزایش یابد. در نتیجه باعث افزایش LCP نیز میشود.
در ادامه به معرفی راهکارهایی میپردازیم که باعث بهینه سازی این فرایند میشوند.
فایلهای CSS و JS خود را کم حجم کنید.
فایلهای css و js میتوانند شامل فضای خالی و کامنت گذاری باشند. بهتر است این موارد حذف شوند تا فایلها حجم کمتری داشته باشند.
فایلهای Css غیر ضروری را دیر تر لود کنید
ممکن است هر صفحه شما فایلهای استایلی را لود کند که استفاده نمیشود. این مشکل در قالبهای آماده وردپرس بسیار مشاهده میشود.
بهتر است این فایلها را حذف کنید و یا فرایند لود این فایلها را به تعویق بیاندازید و یا به صورت Async آنها را لود کنید تا LCP صفحه بهینه شود.
از inline critical css استفاده کنید
شما میتوانید قسمتهایی از کد css سایت خود را که حیاتی هستند به صورت درون خطی و بالاتر از هر فایلی لود کنید و باقی فایلهارا به صورت Async لود کنید.
این کار باعث کاهش LCP میشود.
مشکلاتی که فایلها با سرعت لود کم ایجاد میکنند
در بالاتر گفتیم که چه المانهایی بر LCP موثر هستند.
در ادامه راهکارهایی را معرفی میکنیم که میتواند تاثیر منفی این المانها را بر LCP کاهش دهد.
عکسها را فشرده و بهینه کنید
برای سایتهای بسیاری عکسها هستند که بزرگترین و حجیمترین المان صفحه را میسازند.
تصاویر تمام صفحه، بنرهای موجود در صفحه نمونههایی از تصاویری هستند که بر روی مقدار LCP تاثیر میگذارند.
برای اینکه اثر عکسها را بر LCP کم کنیم بهتر است موارد زیر را رعایت کنیم.
- عکسها را فشرده کنیم(میتوانید از سایت Ezgif استفاده کنید)
- از فرمت مناسبیبرای عکسها استفاده کنید.(Webp, JPEG 2000)
- از عکسهای ریسپانسیو استفاده کنید.
- از CDN ویژه عکس استفاده کنید.
فایلهای مهم را پیش بارگذاری کنید
خیلی از عکسها و فایلهایی که در فایلهای Css و JS لود میشوند ممکن است دیر تر از زمان مد نظر شما لود شوند.
اگر شما میدانید که یک فایل باید با اولویت بالاتری لود شود از تگ <link rel=”preload”> استفاده کنید.
فایلها با فرمتها مختلفی میتوانند پیش بارگذاری شوند ولی بسیار مهم ایت که فایلهای حیاتی مانند فونتها، عکسها یا ویدئوهای استفاده شده در سکشن اول سایت و استایلهای ضروری را پیش بارگذاری کنید.
فایلهای متنی را فشرده کنید
الگوریتمهای فشرده سازی مانند Gzip و یا Brotli میتوانند سایز فایلهای متنی را هنگام تبادل اطلاعات بین سرور و مرورگر کم کنند.
نکته قابل توجه این است که تمامی مرورگرها الگوریتم Gzip را پشتیبانی میکنند. البته اکثر مرورگرهای جدید هم از Brotli پشتیبانی میکنند.
شما میتوانید با استفاده از یک CDN مناسب و یا کانفیگ مناسب وب سرور خود این الگوریتمها را برای سایت خود فعال کنید.
کلام آخر
همه مواردی که گفته شد تنها بخشی از فرایند بهینه سازی سایت است. برای بهینه سازی سایت خود باید پارامترهای بسیار زیاد دیگری را نیز بهینه کنید.
تمامی سایتهای طراحی شده توسط مجموعه کدارکس به صورت تضمینی پرفرمنس مناسبی دارند. اگر به یک وبسایت بهینه نیاز دارید میتوانید از کارشناسان کدارکس در این زمینه مشاوره رایگان دریافت کنید.
آیا مقاله مفید بود؟ به ما امتیاز دهید.
دیدگاه شما
دیدگاه خود را درباره این مقاله با ما به اشتراک بگذارید.