LCPمخفف کلمه Largest Contentful Paint می باشد. گوگل در سال 2020 یک آپدیت جدید در زمینه هسته مرکزی ارائه داد که دارای سه معیار برای وب مستران و سئو کاران بود. ما در این مقاله قصد داریم به یکی از معیار ها به نام LCP بپردازیم. بهینه سازی LCP به منظور زمانی که وب سایت برای به نمایش گذاشتن محتوا در صفحه خود به کاربر نیاز دارد.
چه مواردی باعث نابودی LCP می شود؟
از مواردی که باعث پایین آمدن LCP می شود و یا زمان بیشتری نیاز می شود شامل موارد زیر است:
- Response time زمان پاسخ آهسته سرور
- جاوا اسکریپت وcss و render-blocking
- Resources بارگذاری آهسته
- Client-side rendering
چگونه می توان LCP را بهینه کنیم؟
بهینه سازی LCP وب سایت نیاز به چندین عمل جداگانه دارد. حال برای آن که به زمان مطلوب 2.5 ثانیه برسید باید بخش های سایت خود را بررسی نمایید و با مطالعه این مقاله نقاط ضعف خود را به دست بیاورید.
بارگزاری محتوا را با سرعت بیشتری انجام دهید
از مهم ترین معیار هایی که LCP دارد زمان ارائه دادن محتوا به کاربران است. پس بهتر است سرور را بررسی کنیم و مواردی که باعث تغییر در سرعت بارگذاری می شود را چک کنیم.
فعال سازی CDN
شبکه توزیع محتوا و یا CDN محتوای سایت شما را در سرورهای بزرگ دنیا ذخیره می کند تا زمانی که کاربری می خواهد وارد سایت شما شود محتوای شما از نزدیک ترین سرور برای او به نمایش گذاشته شود. در این حالت اگر سرور سایت شما ایران باشد و کاربری از کشور کانادا بخواهد وارد سایت شما شود نیازی نیست چند ثانیه بیشتر تحمل کند تا سایت برایش لود شود.
اطلاعات بیشتر در زمینه فعال سازی CDN
راه های گوناگونی برای فعال سازی CDN وجود دارد اما امن ترین سرور و رایگان می باشد که استفاده از آن بسیار ساده است. از شرکت های مورد علاقه گوگل کلودفلر می باشد و استفاده از این خدمات به سئو کاران توصیه می شود. برای استفاده از کلودفلر می توانید وارد وب سایت آن شوید و در آنجا برای خود اکانت بسازید و در قسمت بعد آدرس سایتتان را وارد نمایید. بعد از انتخاب سرویس CDN لیستی از DNS ها که توسط سیستم ها در آن پیدا شده است را می توان مشاهده کرد. بعد از انتخاب و بررسی سوابق DNS آنها را بروز کنید و به سرور کلودفلر انتقال دهید.
HTML را کش کنید
این نوع کش به نام کش وب سایت هم شناخته شده است. که وظیفه آن ذخیره سازی صفحه های سایت شما به صورت استاتیک است. که نتیجه آن بهینه سازی LCP و سرعت بارگذاری است.
برای این که سایت تان را کش کنید دو راه دارید:
- از افزونه های کش استفاده کنید
- اضافه کردن کد کش به فایل Htacceess
اما توجه داشته باشید چندین افزونه کش را به سایت اضافه نکنید زیرا باعث می شود سرعت سایت از گذشته کمتر شود. بهتر است از کد کش استفاده نمایید.
از سرویس دهنده ها برای HTML استفاده کنید
برای سرعت بارگذاری HTML می توانید از یک نوع سرویس دهنده برای محتوای کش سایت استفاده کنید. سرویس دهنده این توانایی را دارد که در پس زمینه مرورگر اجرا شود و درخواست سرورها را بررسی کند. در این حالت محتوا به صورت نهان ذخیره شده و زمانی نیازمند به روز رسانی است که قسمتی از محتوا تغییر داده شود. به این صورت محتوا زودتر از استفاده از CDN برای کاربران به نمایش گذاشته می شود.
استفاده از Third-party connections
درخواست سرور از Third-party connections یکی دیگر از روش هایی است که باعث بهینه سازی LCP می شود. اگر کاربرانتان نیاز به اجرای صفحات مهم شما اشته باشند می توانید reh=preconnect را استفاده نمایید با این کار مروگر متوجه تلاش شما برای اتصال سریع می شود.
رندینگ
برای آن که صفحه ای را رندر کنید باید منابع سایت مورد بررسی قرار بگیرد تا میان سرور و کلاینت ها اتصال به وجود آید. بعد از آن منابع را دانلود و تجزیه و تحلیل می کند و لی اوت ترسیم می شود و به کاربران نشان داده می شود.
هموار کردن مسیر LCP
قبل از آن که محتوا توسط مرورگر رندر شود HTML وDOM را تجزیه کند توسط تجزیه کننده ها بررسی شود و با آن روبرو شود امکان دارد رندینگ آن متوقف شود. البته شیت ها و اسکریپت ها نقش مهمی در بلاک کردن رندینگ ها دارند. که این تاثیرات منفی را می توانید روی LCP و fcp مشاهده نمایید. Defer فایل های CSS و جاوااسکریپت که ضرورت ندارند باعث بهینه سازی LCP می شود.
کاهش زمان
برای آن که زمان رندر کاهش بیابد و از بلاک شدن منابع جلوگیری شود باید موارد زیر را بررسی نماید.
Minify CSS
بیشتر فایل های CSS دارای فضای خالی و کامنت و… هستند. البته این کار برای بهبود در خوانایی ایجاد می شود. باید گفت تمام این کاراکتر ها برای CSS غیر ضروری می باشد. بهتر است این موارد را به سرعت شناسایی نمایید و حذف کنید. در مجموع CSS ها را فشرده سازی کنید.
Defer کردن CSS ها
برای آن که CSS غیر ضروری سایت را پیدا کنید می توانید وارد محیط chrome devtools شده و در بخش coverage تمامی CSS های ضروری و غیر ضروری وب سایت را با رنگ قرمز و آبی مشخص شده اند را به سادگی پیدا کنید.
مرتب سازی CSS ها
برای بهینه سازی LCP باید تمامی CSS های ضروری را EXTRACT کنید و آنها را پست هم نوشته و به صورت فایل آنها را ذخیره نمایید. در این بخش این کلاس ها را در بین بلوک قرار دهید و آنها را در هدر سایت قرار دهید. به این روش به زبان برنامه نویسی EMBED می گویند.
کاهش JS blocking time
برای آن که زمان رندینگ بهینه سازی شود و به صورت موثر زمان بلاک کردن جاوااسکریپت کاهش بیابد باید بتوانید دستورات زیر را به صورت کامل انجام دهید.
Minify فایل های JS
با توجه به پیشنهادات گوگل برای بهینه سازی LCP و کم حجم شدن فایل JS می توانید uglify js را استفاده نمایید.
Defr کردن فایل جاوااسکریپت که کم کاربرد است
Defer کردن این موارد باعث می شود مرورگر در زمان لود شدن نیازی به صبر کردن نداشته باشد. در این میان HTML و DOMها را پردازش کند. در این بازه زمانی اسکریپت در بک گراند مرورگر شما لود می شود و زمان اجرای کامل DOM به کاربر نمایش داده می شود. توجه به این مورد می تواند به مقدار زیادی بهینه سازی LCP را افزایش دهد.
کم حجم سازی المان های گوناگون
طی مواردی که تا به اینجا توضیح داده شد هدف LCP رسیدن سریع کاربران به محتوای وب سایت است. به همین منظور باید بتوانیم فایل های CSSو JS و دیگر فایل ها مانند تصاویر و… را به درستی کم حجم نماییم. برای این که بتوانید حجم تصاویر سایت را کم کنید از روش های زیر استفاده نمایید.
- تصاویر را با استفاده از فرمت های سبک مانند WEBP JPEG2000 ذخیره کنید.
- قبل از بارگذاری تصاویر با استفاده از سایت هایی که حجم تصاویر را به خوبی کم می کنند بهبنه نمایید.
- استفاده از تصاویر ریسپانسیو
- حتما از CDN استفاده نمایید
- SWAP کردن فونت ها
نکته:
یکی از بهترین نوع فرمت ها WEBP می باشد که برای ذخیره سازی و انتشار تصویر ها مناسب است. البته گوگل هم به این مورد اشاره داشته ولی باگ کوچک در این فرمت و عدم پشتیبانی از iOS می باشد. باید قبل از آن که از این فرمت استفاده کنید پر مصرف ترین گوش ی همراه را در وب سایتتان بررسی نمایید و سیستم عامل کاربر را چک کنید. به صورت بسیار سنجیده از این فرمت استفاده کنید تا با مشکل روبرو نشوید.
دیباگ و تحلیل LCP
تحلیل LCP باید ابتدای کار انجام شود تا بدانید برای بهینه سازی LCP باید چه بخش هایی را بازبینی و اصلاح نمایید. در آخر بعد از دیباگ و انجام تغییرات باید به این گونه از ابزار ها متوسل شوید.
