یکی از موضوعاتی که امروزه صاحبان وب سایت های مختلف برای داشتن عملکرد بهتر در نتایج جستجو باید به آن دقت داشته باشند، سرعت سایت است. گوگل به عنوان اصلی ترین موتور جستجو مورد استفاده کاربران اینترنتی صراحتاً اعلام کرده که سرعت سایت به عنون یک معیار بسیار مهم روی رتبه بندی وب سایت ها تاثیر مستقیم دارد. در همین راستا ابزارهای آنلاین مختلفی معرفی شده که با استفاده از آنها می توان عملکرد وب سایت را به شکلی کاملاً مناسب بهببود بخشید. هر یک از این ابزارها قابلیت ها و امکانات مربوط به خود را دارند و افراد با توجه به نیازهای خود آنها را مورد استفاده قرار می دهند. سایت جی تی متریکس نیز یکی از این ابزارهای آنلاین بشمار می رود و به دلیل دقت بالایی که دارد در میان صاحبان وب سایت ها از محبوبیت بالایی برخوردار است.
یکی از نشانه‌های تجربه کاربری ضعیف، زمان زیادی‌ست که طول می‌کشد تا کاربر بتواند محتوا را روی صفحه ببیند.
تصور کنید عجله دارید و می‌خواهید سایتی را برای پیدا کردن جوابتان باز کنید؛ اما دقایق طولانی به صفحه زُل زده‌اید و هیچ چیز به شما نشان داده نمی‌شود.
زمان رندر شدن محتوا روی سایت اهمیت زیادی دارد. برای اندازه‌گیری این زمان از FCP (First Contentful Paint) استفاده می‌شود، اما این معیار مشخص نمی‌کند که دقیقا چقدر طول می‌کشد تا حجیم‌ترین (و معمولا بامعناترین) محتوا روی صفحه رندر شود.
برای این کار از LCP استفاده می‌کنیم. LCP (Largest Contentful Paint) یکی از معیارهای کلیدی وب (Core Web Vitals) است که نشان می‌دهد چه مدت طول می‌کشد تا بزرگ‌ترین محتوا، برای کاربر قابل نمایش شود. از این معیار برای مشخص شدن زمان رندر کامل عنصر اصلی محتوا روی صفحه استفاده می‌شود.
روشهای بهبود LCP در Core Web Vitals
دلایل مختلفی برای پایین آمدن LCP وجود دارد که متداول‌ترین آنها شامل موارد زیرند:
- سرعت کند پاسخ سرور
- جاوااسکریپ و CSS بلاک کننده رندر (Render-blocking)
- سرعت پایین لود شدن منابع
- رندر در سمت کلاینت
Lcp و نحوه بهینه سازی آن
core web vitals گوگل گزارشی ارائه می دهد که در آن با استفاده از داده های واقعی به نحوه عملکرد سایت اشاره می کند، به نوعی مانند نشانگر تجربه کاربری در سایت عمل می کند؛ core web vitals دارای سه معیار مهم و تاثیر گذار در سئو سایت و بهینه سازی آن است که یکی از آن ها LCP است؛ به خصوص در سال 2021 این معیار از اهمیت بیشتری برخوردار است. حال در ادامه می خواهیم بررسی کنیم که Lcp چیست؟ و چگونه می توانیم آن را مطابق با قوانین و جدیدترین الگوریتم گوگل بهینه کنیم.
چنانچه سایت وردپرسی دارید و قصد بهینه سازی آن و سئو کردنش را دارید، بایستی ان را مطابق با این سه معیار اصلی core web vitals طراحی و بهینه کنید. اولین و مهم ترین معیار LCP است که در این مطلب در رابطه با آن و نحوه بهینه سازی آن برای سایت را بررسی خواهیم کرد.
چه المان‌هایی بررسی می‌شوند؟
طبق آنچه اخیراً در API بزرگ‌ترین عنصر محتوی صفحه مشخص‌شده است، انواع المان‌های موردبررسی برای LCP از قرار زیر است:
- المان‌های <img>
- المان‌های <image> در داخل یک المان <svg>
- المان‌های <video> (تصویر پوستر استفاده‌شده است)
- یک المان با بارگذاری تصویر پس‌زمینه از طریق عملکرد url (در مقایسه با گرادیان CSS)
- المان‌های block-level شامل گره‌های متنی یا دیگرزیر مجموعه‌های المان‌های inline- level متنی
به یاد داشته باشید، منحصر کردن این المان‌ها در این مجموعه محدود عمدی است تا همه‌چیز در ابتدا ساده نگه‌داشته شود. المان‌های دیگری (مانند: <svg> و <video>) ضمن تحقیقات بیشتر در آینده، ممکن است به این مجموعه اضافه گردد. با ادامه مقاله LCP چیست و تفاوت‌های بین Metric و API باما همراه باشید.
چگونه سایز یک المان مشخص می‌گردد؟
سایز گزارش‌شده یک المان برای LCP معمولاً سایز قابل‌مشاهده آن برای کاربر در نقطه نمایش است. اگر المانی تا بیرون از نقطه نمایش گسترش یابد یا اگر هر المانی بریده‌بریده باشد یا overflow (سرریز) غیرقابل مشاهده داشته باشد، این قسمت‌ها در بحث سایز المان محاسبه نمی‌شوند.
برای المان‌های عکس از سایز واقعی خود تغییر سایز داده می‌شوند، سایز قابل‌مشاهده یا سایز واقعی، هرکدام که کوچک‌تر باشد، گزارش داده می‌شود. به‌عنوان‌مثال، عکس‌هایی که از اندازه واقعی خود خیلی کوچک‌تر شده باشند تنها سایزی که در آن نمایش داده‌شده‌اند، گزارش می‌شود و عکس‌هایی که کشیده یا پهن‌شده‌اند تنها با سایز واقعی‌شان گزارش می‌شوند.
برای المان‌های متنی تنها سایز گره‌های متنی بررسی می‌شود (کوچک‌ترین مستطیلی که تمام گره‌های متنی را در بردارد)
برای تمام المان‌ها حاشیه، لایی گذاری یا لبه ایجادشده از طریق CSS بررسی نمی‌شود.
برخی اوقات مشخص کردن اینکه کدام گره‌های متنی به کدام المان‌ها تعلق دارد می‌تواند مشکل باشد، به‌ویژه المان‌هایی که زیرمجموعه‌شان شامل المان‌های inline و گره‌های متنی ساده و همچنین المان‌های block-level است. نکته کلیدی این است که همه گره‌های متنی فقط و فقط به نزدیک‌ترین المان سرشاخه block-level خود تعلق دارند. در شرایط خاص: هر گره متنی به المانی تعلق دارد که بلوک حاوی آن را ایجاد کند.
اگر تصاویر باعث کند شدن بارگذاری صفحات شود تاثیر منفی در تعداد بازدیدکنندکان خواهد گذاشت و ممکن است بازدیدکنندگان از مشاهده وب سایت شما خسته شوند و از ادامه مطالعه صفحات شما منصرف شوند پس مدیریت بارگذاری تصاویر امری مهم است
کش کردن عناصر
اگر HTML ایستا باشد و لازم نباشد برای هر درخواست، تغییر کند؛ کش کردن، از دوباره ساخته شدن غیرضروری آن جلوگیری می‌کند. با ذخیره کردن یک کپی از HTML تولید شده روی دیسک، کش کردن سمت سرور می‌تواند TTFB را کاهش داده و استفاده از منابع را به حداقل برساند.
با توجه به ابزارهایی که استفاده می‌کنیم، روشهای متفاوتی برای به کار بردن کش کردن سرور وجود دارد:
- تنظیم پروکسی‌های معکوس (Varnish، nginx) برای ارائه محتوای کش شده یا عمل کردن به عنوان یک سرور کش وقتی که جلوی سرور اپلیکیشن نصب شود
- آموزش جی تی متریکس
- تنظیم و مدیریت رفتار کش در تامین‌کننده کلود (Firebase، AWS، Azure)
- استفاده از یک CDN که سرورهای حاشیه‌ای در اختیار وبسایت گذاشته و به این ترتیب محتوا در جایی نزدیک‌تر به کاربر کش و ذخیره می‌شود
صفحات HTML متکی بر کش
برای اینکه بتونیم سرعت سایت خودمون رو افزایش بدیم ابتدا باید با استفاده از ابزارهای آنلاینی که وجود داره ببینیم اصلا سرعت صفحات سایت ما به چه صورتی هست؟ و وقتی یک صفحه را باز می‌کنیم دقیقا اتفاقاتی که در لود این صفحه رخ میده چیه؟
بهتر است صفحات وب، اول به سراغ چیزهایی بروند که در مرورگر کش شده است و در صورتی که این دیتاها در کش موجود نبود، به اینترنت مراجعه کنند. در واقع وقتی سرویس ورکر (service worker) نصب و در بک‌گراند مرورگر اجرا شود، می‌تواند درخواست‌های سمت سرور را قطع کند. این سطح از کنترل کش با برنامه‌نویسی، به وبسایت امکان می‌دهد تمام محتوای صفحه HTML یا بخشی از آن را کش کرده و فقط وقتی که محتوا تغییر می‌کند، کش را به روز رسانی کند.
نمودار زیر به ما نشان می‌دهد وقتی در یک سایت از این الگو استفاده شده، چطور توزیع LCP کاهش یافته است