همانطور که در مقاله Core web vitals اشاره شد، گوگل در ماه می سال ۲۰۲۰ آپدیت جدیدی برای هسته مرکزی خود ایجاد کرد که نتیجه آن معرفی سه معیار جدید به جامعه وبمستران، سئوکاران و طراحان سایت بود.
یکی از مهم ترین این معیارها که در این مقاله قصد داریم به طور کامل به آن بپردازیم LCP می باشد.
LCP مخفف Largest Contentful Paint بوده و نشاندهنده مدت زمانی است که سایت، برای نشان دادن بزرگترین عنصر (محتوای) صفحه به کاربر نیاز دارد.
LCP معیاری مهم برای مشخص کردن زمان رندرینگ محتوا بر روی سایت می‌باشد.
در ادامه این مقاله من قصد دارم به طور کامل روش های بهبود امتیاز LCP را برای شما بیان کرده و به تشریح هریک از موارد به صورت کاربردی بپردازم.
چه مواردی LCP را نابود می کند!
از مهم ترین عواملی که موجب پایین آمدن امتیاز LCP ما یا به بیانی دیگر افزایش زمان آن می شود می توان به موارد زیر اشاره کرد:
- زمان پاسخ (response time) آهسته سرور
- Render-blocking جاوااسکریپت و css
- بارگزاری آهسته resources
- Client side rendering
آنچه در این نوشته خواهیم داشت
چطور میتوانیم LCP را بهبود ببخشیم؟
بهبود LCP سایت با سه گام اساسی و چندین بخش جداگانه انجام خواهد شد. به شما توصیه می کنم برای رسیدن به امتیاز مطلوب زیر ۲.۵ ثانیه، در ابتدا سایت خود را آنالیز کرده و متناسب با نقاط ضعف خود در هر بخش، از راه حل هایی که در این مقاله ارائه شده است استفاده کنید.
گام ۱: بارگزاری محتوا را سریع تر کنید!
LCP همانطور که گفته شد یکی از معیارهایی است که حساسیت بالایی به زمان ارائه محتوا به کاربر دارد. برای همین بهتر است برای شروع از سرور خود شروع کنیم و مواردی که سرعت بارگزاری محتوای ما را افزایش می‌دهد را با هم بررسی کنیم.
۱) CDN را فعال کنید
CDN یا شبکه ی توزیع محتوا، یک نسخه از محتوای سایت شما را در سرورهای بزرگ دنیا ذخیره می کند تا وقتی یک کاربر قصد دارد وارد سایت شما شود(ازهرجای دنیا)،محتوا از نزدیک ترین سرور برای او بارگزاری میشود.
بنابر این اگر سرور شما در ایران باشد و یک کاربر با IP کانادا بخواهد به سایت شما وارد شود نیاز نیست تا چند ثانیه بیشتر از حدمعمول برای لود سایت شما صبر کند!
از فعال سازی CDN بیشتر بدانید!
برای استفاده و فعال کردن CDN راه ها متفاوتی پیش روی شما وجود دارد اما بهترین و امن ترین سرویس CDN در حال حاضر CDN رایگان cloudflare است که شما می توانید به سادگی آن را فعال کنید.
لازم به ذکراست که کلودفلر یکی از شرکت ها مورد اعتماد گوگل بوده و بنابر این استفاده از خدمات این شرکت به صورت کلی( از دید سئو) توصیه میشود.
برای تنظیم CDN رایگان کلودفلر کافی است به وبسایت Cloudflare وارد شده و یک اکانت در آن بسازید و در مرحله بعد آدرس سایت خود را وارد کنید.
سپس با انتخاب سرویس رایگان CDN کلودفلر لیستی از تمام DNSهایی که توسط سیستم ها آن ها یافت شده است را مشاهده کنید.
پس از انتخاب و تایید سوابق DNS کافی است آن ها را بروز کرده و به سرورهای کلودفلر منتقل کنید.
تمام!
۲) HTML خود را کش کنید
کش HTML که به عنوان کش سایت هم از آن یاد میشود در اصل وظیفه ذخیره سازی صفحات شما به صورت استاتیک را بر عهده دارد. نتیجه این کار در نهایت بهبود سرعت بارگزاری سایت شما خواهد بود.
برای کش کردن HTML شما دو راه اساسی پیش روی خود دارید:
- استفاده از افزونه های کش مثل leverage browser caching
- افزودن کد کش به فایل htacceess
نکته: به هیچ وجه چند افزونه کش به سایت اضافه نکنید چراکه سرعت سایت شما را بدتر از گذشته خواهد کرد. توصیه من به شما استفاده از کد کش می‌باشد. برای اینکار کافی است فایل زیر را دانلود کرده و به .htaccess خود اضافه کنید.
دانلود فایل HTML catch code
۳) استفاده از سرویس دهنده ها برای ارائه HTML
برای بهبود سرعت بارگزاری HTML شما میتوانید همچنین در ابتدا از یک سرویس دهنده برای ارائه محتوا کش شده سایت استفاده کنید. برای مثال اگر LCP شما یک المان تصویری یا ویدئویی است، یک سرویس دهنده میتواند در پس زمینه مرورگر اجرا شده و درخواست های سرور را رهگیری کند.
با اینکار محتوای HTML شما به صورت پنهان ذخیره شده و فقط زمانی نیاز به بروزرسانی دارد که شما بخشی از محتوا را تغییر داده اید.
با این روش محتوای شما حتی سریع تر از استفاده از CDN به کاربر نمایش داده می شود.
در نمودار زیر شما میتوانید گزارش گوگل را که به بررسی زمان ارائه محتوا (LCP) هنگام استفاده از سرویس دهنده ها و بدون استفاده از آن ها را مشاهده کنید.
۴) استفاده از third-party connections
درخواست سرور از شخص سوم یا همان third party origins نیز یکی دیگر از مواردی است که میتواند نقش برجسته ای در بهبود امتیاز LCP شما داشته باشند.
همچنین اگر کاربرشما نیاز به نمایش و اجرای محتواها و صفحات مهم داشته باشند شما میتوانید از rel = “preconnect” استفاده کنید تا مرورگر از تلاش شما برای اتصال هرچه سریع تر آگاه شود.
<link rel="preconnect" href="https://example.com" />
گام ۲: رندرینگ (rendering)
برای رندر کردن یک صفحه وب باید در ابتدا منابع مورد بررسی قرار گیرند سپس بین سرور و کلاینت اتصال برقرار شود. در گام بعد از آن منابع دانلود شده و پس از تجزیه و تحلیل HTMLو CSS و ایجاد DOM و CSSOM، لی اوت صفحه ترسیم شده و سپس به کاربر نمایش داده میشود.
۱) مسیر LCP را هموار کنید
قبل از آنکه مرورگر محتوایی را رندر کند، باید HTML را در DOM تجزیه کند. تجزیه کننده‌ی HTML اگر با Stylesheets های خارجی مثل <link rel=”stylesheet”> و یا synchronous JavaScript tags مثل <script scr=”main.js”> روبرو شود، ممکن است در رندرینگ آن وقفه ایجاد شود.
اسکریپت ها و استایل شیت ها هر دو از مواردی هستند که نقش بسزایی در بلاک کردن رندرینگ منابع ایفا می کنند و شما میتوانید تاثیر منفی آن‌ها را بر روی امتیاز FCP و LCP خود به خوبی مشاهده کنید!
در نتیجه defer کردن فایل های جاوااسکریپت و css های غیر ضروری که در ادامه به آن خواهیم پرداخت، می تواند سرعت سایت شما را به شکل قابل توجهی بهبود ببخشد.
۳) کاهش زمان css blocking
برای کاهش زمان رندرشدن css ها و جلوگیری از بلاک کردن منابع، باید موارد زیر را (که در ادامه به توضیح هریک خواهم پرداخت) به طور کامل انجام دهید:
۴) Minify css
بسیاری از فایل های CSS شامل فضای خالی، کامنت و … می باشد (طراحان سایت معمولا برای بهبود خوانایی اینکار را انجام می‌دهند) حقیقت این است که تقریبا تمام این کاراکترها برای فایل CSS ما غیرضروری می‌باشد پس بهتر است همین حالا این موارد را پیدا کرده و سریعا حذفشان کنید و به اصطلاح cssهای خود را فشرده کنید.
۵) Defer کردن css های غیرضروری
برای پیداکردن CSSهای غیرضروری وبسایت کافی است تا وارد محیط chrome devtools شوید (با فشردن کلید F12) و در بخش coverage، فایل های CSS ضروری و غیرضروری سایت که با رنگ آبی و قرمز مشخص شده اند را پیدا کنید.
حالا cssهای غیرضروری (قرمز رنگ) را به فرمت زیر بنویسید:
<link rel="preload" href = "styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
۶) مرتب کردن cssهای ضروری
برای اینکار تمام cssهای ضروری (سبز یا آبی رنگ) را extract کنید و پشت هم بنویسید و در قالب یک فایل ذخیره کنید.
حال این کلاس ها را داخل یک بلوک <style> قرار دهید و آن را در هد سایت بگذارید.
نکته: به اینکار در اصطلاح برنامه نویسی embed کردن می‌گویند.
نکته: اگر extractکردن و مرتب کردن cssهای ضروری برایتان سخت است. شما می توانید از پکیج های critical، criticalCSS و یا Penthouse بدین منظور استفاده کنید.
۷) کاهش JS blocking time
برای بهینه سازی زمان رندرینگ فایل های js و کاهش موثر زمانی که جاوااسکریپت به بلاک کردن منابع می‌پردازد، باید موارد زیر را به دقت انجام دهید:
Minify کردن فایل های JS
طبق پیشنهادات خود گوگل برای بهینه سازی و کم حجم کردن فایل های JS شما می توانید از Uglify js استفاده کنید.
deferکردن فایل های جاوااسکریپت کم کاربرد
Deferکردن فایل های js بدین معناست که مرورگر برای لودشدن اسکریپت ها دیگر صبر نکند و به جای آن در این مدت، به پردازش html و DOM بپردازد. اسکریپت در این بازه زمانی در بک گراند مرورگر لود شده و زمانی که DOM به شکل کامل اجرا شد، نمایش داده میشود.
این موضوع به شکل قابل توجهی می تواند سرعت سایت و همچنین امتیاز LCP شما را بهبود ببخشد.
مثالی از deferکردن کدهای js:
<p>...content before script...</p> <script defer src="https://example.com/article/script-async-defer/long.js?speed=1"></script> <!-- visible immediately --> <p>...content after script...</p>
نکته: شما میتوانید برای به تاخیر انداختن اجرای فایل های JS از متد async نیز استفاده کنید. در مقالات بعدی حتما به طور کامل به این مورد نیز پرداخته خواهد شد.
گام ۳: بهینه سازی و کم حجم کردن المان های مختلف
همانطور که در همه بخش های این مقاله به این موضوع پرداخته شد، هدف اصلی LCP دستیابی سریع کاربر به محتوای سایت می‌باشد.
برای همین ما باید سعی کنیم که فایل های ساختاری مثل css و js که به آن پرداخته شد و همچنین فایل هایی مثل تصاویر، فونت ها و … را کم حجم کنیم.
برای بهینه سازی حجم تصاویر راه های زیر به شما توصیه میشود:
- تصاویر را به فرمت های سبک مثل: JPEG2000 ، JPEG XR و یا WebP ذخیره کنید.
- تصاویر را قبل از بارگذاری توسط سایت های که وظیفه کم حجم کردن تصاویر را دارند بهینه کنید.
- از تصاویر Responsive استفاده کنید.
- استفاده از CDN را جدی بگیرید.
- فونت های خود را Swap کنید.
نکته بسیار مهم
فرمت Webp یکی از بهترین فرمت ها برای ذخیره سازی و انتشار تصاویر می‌باشد و حتی خود گوگل نیز به این موضوع اشاره داشته است اما یک باگ کوچک این فرمت، عدم پشتیبانی سیستم عامل ios (به جز ورژن ۱۴) از آن می باشد. پس قبل از استفاده از این فرمت حتما پر استفاده ترین تلفن ها همراه را در سایت خود چک کنید و همچنین نسخه سیستم عامل کاربران خود را بررسی کنید و به شکل کنترل شده و با یک استراتژی سنجیده از این فرمت استفاده کنید.
تحلیل و دیباگLCP
تحلیل و بررسی LCP باید در ابتدا انجام گیرد تا شما بدانید چه بخش هایی نیاز به اصلاح و بازبینی مجدد دارد و در انتها نیز پس از اعمال غییرات برای دیباگ کردن و مشاهده نتیجه باید به این ابزارها متوسل شوید.
یکی از بهترین ابزارهای سنجش متریک های core web vitals و همینطور LCP، ابزار Lighthouse6.0 است که شما می توانید هم افزونه آن را نصب کنید و هم از طریق Devtools آن را بررسی کنید.
جدا از این موارد استفاده از سایت هایی مثل GTmetrix که از دیتابیس لایت هوس استفاده میکند می تواند پیشنهاد خوبی برای بررسی LCP و پیدا کردن نقاط ضعف سایت باشد.
نکته: فراموش نکنید که امتیاز بهینه برای LCP، مدت زمان زیر ۲.۵ ثانیه می‌باشد.
منابع علمی مقاله «چطور LCP سایت را بهبود ببخشیم؟» که از سری آموزش های سئو آکادمی آمانج بود سایت های philipwalton، marfeel و web.dev بودند.