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

بنابراین اگر سایت ورپرسی را با استاندارد های گوگل مطابقت ندارد بهتر است تغییراتی در طراحی و بهینه سازی سایت انجام دهید تا مطابق Core Web Vitals قرار بگیرید و سه ویتامین اصلی گوگل را برای رتبه بندی بهتر دریافت کند.

در این مقاله معیار اول Core Web Vital یعنی بزرگترین عنصر صفحات Largest Contentful Paint را بررسی می کنیم و سعی داریم با 7 نکته بارگذاری آن را بهبود دهیم.

  • سنجش سرعت بارگذاری صفحات چیست
  • چگونه بهترین زمان برای LCP را کسب کنیم
  • پیدا کردن بزرگترین زمان و عنصر محتوا در سایت وردپرسی
  • چگونه به LCP در وردپرس سرعت دهیم

سنجش سرعت بارگذاری صفحات ( LCP ) چیست 

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

LCP ابتکار عمل جدید گوگل است که در مقاله Core Web Vitals به طور مفصل راجب آن صحبت کردیم و شما می توانید برای دریافت اطلاعات بیشتر به آن مراجعه کنید.

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

در نهایت بر این اساس امتیاز لازم را به سایت می دهد.

چگونه بهترین زمان برای LCP کسب کنیم

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

و اگر LCP شما بین 2.5 تا 4.0 ثانیه باشد هشدار نیاز به بهبود عملکرد را نشان می دهد. در آخر مدت زمان بیشتر از 4 ثانیه را ضعیف می شمرد.

معمولا سایت هایی که در سئو رتبه بالایی ندارد LCP بیشتر از 4 ثانیه دارند و در نتیجه طبق تعریف تجربه بدی را به کاربر می دهند.

پیدا کردن بزرگترین زمان و عنصر محتوا در سایت وردپرسی

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

  • داده های آزمایشی : این داده های به کمک تحلیل های رایانه ای گوگل بدست آمده است.
  • داده های فیلد : در هر زمان بر اساس بازدیدکنندگان سایت محاسبه می شود.

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

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

چگونه به LCP در وردپرس سرعت دهیم

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

  • هاست بهتری برای سایت خود پیدا کنید، از حافظه کش استفاده کنید و زمان پاسخ گویی سرور را بهبود دهید.
  • بهینه سازی کاهش زمان اجرای کدهای جاوا اسکریپت و CSS را در اولویت قرار دهید.
  • اندازه فایل ها را کاهش دهید ، اگر عنصر LCP یک تصویر است به کمک افزونه های حجم آن را کاهش دهید و فایل هایی که در سرور دارید را به کمک Gzip یا Brotli فشرده کنید.

این نکات به طور خلاصه هستند بنابراین در ادامه این تکنیک ها را با جزئیات بیشتری تحلیل می کنیم تا بتوانیم بهینه سازی LCP را انجام دهیم.

1. هاست بهتری انتخاب کنید.

در ابتدا با فرض اینکه سرور زمان پاسخ گویی بالایی دارد می توانیم به کمک تغییر هاست سرور خود را بهینه کنیم. ( برای اندازه گیری زمان پاسخ گویی سرور می توانیم از روش ( TTFB ) استفاده کنیم )

واقعیت اساسی این است که اگر هاست کند باشد LCP هم همچنان با سرعت پایینی اجرا می شود. پس مثلا اگر هاست شما برای پاسخ دادن موارد ساده ای به بازدیدکنندگان خیلی طول می کشد هیچ کدام از روش های بعدی موثر نخواهد بود و سایت را تحت محدودیت های گوگل قرار می دهد.

2. حافظه کش صفحه را تنظیم کنید

در صورتی که HTML شما ثابت است و نیازی به افزایش درخواست ها ندارد و حافظه کش می تواند از استفاده بی دلیل هاست جلوگیری کند. همچنین حافظه کش می تواند با ذخیره یک نسخه از HTML در دیسک ، TTFB را کاهش داده و استفاده منابع را به حداقل برساند.

اگر هاست وردپرس شما در حال حاضر برنامه کش را در سطح سرور اجرا نمی کند، نیاز به یک افزونه Cashing برای سرعت بخشیدن به LCP دارید. حافظه کش باعث می شود سرور سریعا محتوا را ( بخصوص در زمان های پرترافیک ) به مرورگر تحویل دهد.

برای تنظیم حافظه کش می توانید از افزونه های کش مثل Autoptimize ، WP Rocket ،  Lite Speedو… استفاده کنید.

3. از یک شبکه تحویل ( CDN ) استفاده کنید

شبکه تحویل محتوا ( CDN ) شبکه ای از سرور هاست که در بسیاری از مناطق مختلف توزیع می شود. در واقع استفاده از CDN اطمینان می دهد که کاربران هرگز مجبور نیستند منتظر درخواست شبکه برای سرور های دور بمانند و در نتیجه عملیات های سنگین در سرور کاهش پیدا کند.

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

4. تصاویر و طرح بندی صفحات را بهینه سازی کنید

بسیاری از سایت ها بعد از بارگذاری کامل تصاویر بزرگترین عنصر هستند. تصاویر بنر و کاروسل بزرگ نمونه هایی از تصاویر LCP هستند.

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

همچنین می توانیدآن ها را به فرمت های جدید مثل JPEG 2000 ، JPEG XR یا WebP تبدیل کنید که ضمن حفظ کیفیت حجم تصاویر را تا پایین ترین حد ممکن نگه می دارد و می توانند به سادگی در وردپرس آپلود شوند.

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

5. کد صفحات را بهینه سازی کنید

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

  • تا جای ممکن سعی کنید کدهای CSS فضای کمتری را بگیرید.
  • سرعت لود عنصر LCP خود را با CSS غیرضروری یا جاوا اسکریپت های که می خواهید بعدا در صفحه بارگذاری کنید را پایین نیاورید.
  • برای کاهش حجم HTML ، CSS و JavaScript از افزونه هایی مانند Autoptimize ( رایگان ) استفاده کنید.
  • زمان Render-blocking کدهای جاوا اسکریپت و CSS خود را کاهش دهید. ( انجام این مورد نیاز به دانش برنامه نویسی دارد )
  • برای کاهش حجم کد های جاوا اسکریپت خود از افزونه های رایگان مثل Autoptimize یا WP Rocket استفاده کنید.

اگر بخواهید حجم CSS خود را کاهش دهید کار با افزونه ها آسان است همچنین بارگذاری CSS های غیر ضروری را تا زمانی که عنصر محتوایی LCP لود شود را به تأخیر بیاندازید.  از WP Rocket کمک بگیرید.

6. از فشرده ‌سازی های سطح سرور استفاده کنید

فشرده سازی سطح سرور می‌تواند حجم فایل های سایت را کاهش دهد. gzip رایج‌ترین راه برای فشرده سازی فایل های سرور است و Brotli هم می‌توانید برای کاهش حجم استفاده کنید.

بسیاری از هاست ها به طور خودکار فشرده سازی Gzip را در کار خود دارند و شما می توانید فشرده سازی فایل های خود را به کمک آن پیاده‌سازی کنید.

پایان

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