منظور از بهینهسازی Core Web Vitals در المنتور اقداماتی است که در جهت بهبود سرعت و تجربه کاربری در وبسایت های المنتوری باید انجام شود. و چون Core Web Vitals یکی از پارامترهای رتبه بندی سئو است و احتمالا قبلا در سرچ کنسول این گزینه را دیده باشید؛ با بهینه سازی این پارامتر سایت المنتوری شما رتبه بهتری در گوگل کسب می کند. در این نوشته با فاکتورهای تشکیل دهنده Core Web Vitals و ارتقای آنها به خصوص در المنتور آشنا می شوید؛ پس باید بگوییم مطالعه این نوشته برای هر طراح سایت علاقه مند به المنتور از واجبات است.
Core Web Vitals چیست و چرا برای سایت المنتوری شما حیاتی است؟
معرفی LCP, FID, CLS و اهمیت آنها
Core Web Vitals از سه پارامتر مهم از جمله LCP، INP (نام جدیدتر FID) و CLS تشکیل شده. اینکه هر یک از این سه مورد به چه مواردی اشاره داره رو مفصل بررسی میکنیم. اما اگر بخواهیم خیلی ساده Core Web Vitals در المنتور را تعریف کنیم این مفهوم درواقع میزان سرعت و رضایت کاربر از کار با سایت المنتوری اشاره دارد. افزونه قدرتمند المنتور در کنار ساده سازی فرآیند طراحی سایت های حرفه ای، فایل های استایل و اسکریپت زیادی را به سایت شما اضافه می کند و در نهایت ممکن است سایت شما کند شود. به همین جهت باید بهینه سازی سرعت المنتور با کمک بهبود پارامترهایی که در ادامه گفته می شود را جدی بگیرید.
معرفی LCP در Core Web Vitals
LCP یکی از پارامترهای اصلی است که در core web vitals مورد توجه قرار میگیرد که خلاصه شده عبارت Largest Contentful Paint می باشد. با این پارامتر اندازه گیری می کنیم از زمانی که روی URL صفحه کلیک می شود چقد طول میکشد تا بزرگترین و مهم ترین قسمت صفحه برای کاربر باز شود. این بخش برای صفحات اصلی معمولا بنر یا اسلایدر و برای نوشته ها معمولا تصویر شاخص می باشد اما به طور کلی ویدیو بلوک های متنی بزرگ هم می توانند LCP باشند. میزان استاندارد برای این پارامتر 2.5 ثانیه است.
بالا بودن میزان LCP باعث می شود کاربران صفحه را بسته و سایت رقبای شما را ترجیح دهند؛ به همین جهت باتوجه به نقش مهم LCP در افزایش سرعت بارگذاری صفحه، به هر میزانی که این پارامتر بهینه شود درصد جذب کاربر بالاتر می رود.
CLS چیست و چه نقشی در Core Web Vitals دارد؟
CLS یا Cumulative Layout Shift پارامتری در Core Web Vitals المنتور محسوب می شود که پایداری صفحه و عدم جابجایی ناگهانی عناصر را در هنگام لود اندازه گیری می کند. در چند ثانیه ابتدایی لود اگر کاربر قصد کلیک روی دکمه ای را داشته باشد و دکمه جابجا شود؛ سایت رتبه CLS بدی دریافت می کند که به معنای ضعیف بودن تجربه کاربری می باشد. CLS در المنتور معمولا با مشخص نبودن ابعاد تصاویر، فونت های خارجی و انیمیشن ها به خطر میفتد.
FID المنتور چیست؟
First Input Delay یا FID میزان تاخیری است که سایت بعد از اولین تعامل کاربر با صفحه دارد. یا به بیان واضح تر اینکه چه زمانی طول میکشد که صفحه به اولین کلیک کاربر واکنش نشان دهد. FID از نظر تجربه کاربری یا UX بسیار حائز اهمیت است و بهتر است زیر صد میلی ثانیه باشد. اما در سایت های المنتوری ویجت هایی که جاواسکریپت بسیار سنگین استفاده می کنند؛ باعث کاهش این فاکتور مهم می شوند.
معرفی ابزارهای اندازهگیری Core Web Vitals
در این بخش به ابزارهایی که برای محک و اندازه گیری core web vitals در المنتور استفاده می شود می پردازیم:
ابزار درجه یک Google search console
سرچ کنسول ابزاری برای سئو المنتور و کلیه وبسایت ها به شمار می رود. اگر سایت خود را به سرچ کنسول گوگل وصل کرده باشید، طبق تصویر در بخش experience گزینه ای تحت عنوان Core Web Vitals دارید که معیارهای گفته شده را در دو دستگاه موبایل و دسکتاپ به صورت جداگانه نمایش می دهد. در هر بخش با کلیک روی open report گزارش کاملی از URL هایی که هر یک از خطاهای LCP،CLS و FID را دارند یا خوب و قابل قبول هستند ؛ دریافت می کنید.
ابزار PageSpeed Insights
گاهی سرچ کنسول دیتا و اطلاعات کاملی برای نمایش core web vitals ندارد و دیتاییی نمایش نمیدهد. در این مواقع page speed insights ابزار کمک کننده دیگری است که می تواند مفید باشد. این ابزار کاملا رایگان است و در دو بخش موبایل و دسکتاپ به صورت جداگانه performance ، SEO و موارد دیگر را بررسی می کند. به صورت جزئی علاوه بر LCP و CLS که فاکتورهای core web vitals هستند آیتم های دیگر مثل FCP و TBT نیز بررسی می شود. علاوه بر این راهکارهایی نیز جهت بهبود هر فاکتور ارائه می شود.
ابزار Light house
Lighthouse یکی دیگر از ابزارهای رایگان گوگل می باشد که می توانید برای تست و بهبود سرعت در المنتور از آن استفاده کنید و پارامترهای core web vitals را نیز بررسی نمایید.
اولین راه برای استفاده از Light House با کمک Chrome DevTools می باشد. صفحه ای که قصد تست آن را دارید در مرورگر کروم باز کنید، راست کلیک کنید و از منوی باز شده inspect را انتخاب کنید. از پنل باز شده وارد تب light house بشید و در قسمت device یکی از گزینه های موبایل یا دسکتاپ را انتخاب کنید. بعد از کلیک روی گزینه analyze page load لایت هوس گزارش کاملی به شما ارائه می کند.
علاوه بر این، شما می توانید اکستنشن مرورگر گوگل کروم مخصوص light house را نصب کنید که برای این منظور کاربرد دارد.
بهینهسازی LCP (Largest Contentful Paint)
تصاویر، فونتها، المنتهای بلوک اول
برای بهینه سازی LCP در المنتور بنر، اسلایدر، تصاویر پس زمینه، بارگذاری درست فونت ها، فایل های css و اسکریپت را باید مد نظر قرار دهید در ادامه راهکارهایی کلی برای این منظور را بررسی می کنیم:
بهینه سازی تصاویر
اگر بزرگترین و اولین المان موجود در صفحه یک تصویر بزرگ است، برای بهبود LCP در المنتور با کمک افزونه بهینه سازی تصویر المنتور عکس ها را تا حدامکان بهینه کنید. از فرمت WEBP استفاده کنید و تصاویر را دقیقا با همان ابعادی که در فضا احتیاج است بارگذاری کنید. درست است که اگر شما یک تصویر خیلی بزرگ آپلود کنید وردپرس خودش عکس را به اندازه فضا کوچک می کند اما در هنگام لود صفحه تصویر با همان ابعاد بزرگ لود می شود.
برای تصاویری که در بالای صفحه نیستند میتوانید از تکنیک lazy load یا لود تنبل استفاده کنید.
نکته: فعال سازی لیزی لود برای تصاویر بالای صفحه باعث بدتر شدن مقدار LCP می شود.
بهینه سازی فونت ها در سایت
اگر فونت های سفارشی زیادی را بدون توجه به نکات بهینه سازی فونت ها برای یک صفحه استفاده کردید؛ حتما این مسئله باعث دیرتر لود شدن متن های موجود در صفحه و افزایش زمان LCP می شود. نکته اول اینکه همیشه فونت ها را از روی هاست خودتون لود کنید و از CDN های خارجی برای لود فونت استفاده نکنید.
در قدم بعدی می توانید به مرورگر بگویید که برای لود متن های صفحه در ابتدای لود از فونت پیش فرض مرورگر استفاده کند و بعد از لود فونت پیش فرض را با فونت سفارشی شما جایگزین کنید. این کار کمک می کند که بلافاصله بعد از باز شدن صفحه متن نمایش داده شود. این کار توسط کد css به صورت font-display: swap پیاده سازی می شود.
بهینهسازی بلوک اول
بلوک اول صفحه بخشی از سایت است که در نگاه اول بدون اسکرول قابل مشاهده است و برای بهینه سازی LCP در المنتور باید به سرعت لود این بخش توجه ویژه داشته باشید.
در درجه اول سعی کنید از انیمیشن و ویجت های پیچیده که کدهای css و جاوااسکریپت زیادی به صفحه اضافه میکند را در نیم صفحه بالایی استفاده نکنید. و تا جایی که امکان دارد DOM size را کنترل کنید یعنی اینکه طراحی بخش ابتدایی سایت را با بخش ها و کانتینرهای تودرتو کمتری انجام دهید.
در قدم بعدی می توانید در جهت افزایش سرعت سایت در المنتور کدهای css و جاوااسکریپت غیرضروری و استفاده نشده را به کمک افزونه های کش از صفحه حذف کنید.
بهینهسازی FID (First Input Delay)
کاهش جاوااسکریپت، بهینهسازی تعاملات
در اکثر مواقع دلیل اصلی افزایش FID یا همان INP تاخیر برای اجرا فایل های جاوااسکریپت می باشد. به این دلیل که کدهای جاواسکریپت تا زمان اجرا کامل خود مانع از عمکرد کامل مرورگر می شود و درنتیجه پاسخ کاربر به تعویق میفتد. برای بهبود و بهینه سازی FID در المنتور از تکنیک های به تعویق انداختن اجرای جاوااسکریپت یا Defer JavaScript و async یا اجرا غیرهمزمان کمک بگیرید. این کار توسط افزونه های کش و بهینه سازی به خوبی اجرا می شود.
بهینهسازی CLS (Cumulative Layout Shift)
حل مشکلات تغییر طرحبندی ناگهانی
برای بهینه سازی CLS در المنتور باید اقداماتی انجام دهید که از تغییر و جابجایی ناگهانی المان ها در هنگام لود جلوگیری شود. برای این منظور در طراحی با المنتور حتما برای تصاویر خود اندازه مشخص کنید؛ فرقی ندارد که برای پس زمینه استفاده می شوند یا برای ویجت تصویر. برای سکشن یا کانتینرهایی که حاوی تصاویر هستند ویژگی min-height را مشخص کنید.
فونت های سفارشی که در نیم صفحه بالایی استفاده شده اند را با Preload کردن بهینه سازی کنید. با این کار به مرورگر می گویید که این فونت را زودتر بارگذاری کند تا باعث لود دیرهنگام متن و جابجایی صفحه هنگام تعامل با کاربر نشود.
نقش کش و CDN در افزایش سرعت Core Web Vitals المنتور
بهترین روشهای پیادهسازی
با فعالسازی کش صفحه، سرور یک مرتبه سایت را لود میکند و در دفعات بعد درخواست کاربر به جای بررسی درخواست به سرعت همان نسخه را به کاربر نمایش می دهد چون همه استایل ها و فایل های تصویر از قبل در حافظه موجود است احتمال جابجایی ناگهانی صفحه نیز به شدت کاهش می یابد. درنتیجه LCP و CLS به اندازه زیادی بهبود پیدا می کنند. یکی از بهترین روش پیاده سازی کش در المنتور استفاده از افزونه های کش می باشد.
علاوه بر استفاده از افزونه های کش، المنتور element cache را نیز در قابلیت های خود گنجانده که می توانید با فعالسازی آن سرعت و عملکرد و درنتیجه Core Web Vitals المنتور را بهبود ببخشید.
از شبکه توزیع محتوا یا CDN هم می توانید علاوه بر کش برای افزایش پارامترهای core web vitals کمک بگیرید مخصوصا اگر فاصله جغرافیایی کاربر تا سرور زیاد است. خیلی از CDN ها حتی فشرده سازی فایل ها را نیز انجام می دهند.
نکات پیشرفته برای بهینهسازی کد المنتور
حذف CSS/JS اضافی، فونت آیکونها
در تیترهای قبلی در خصوص لزوم حذف فایل های css و اسکریپت های غیرضروری یا اضافی گفته شده اما جالب است بدانید که المنتور فایل های استایل و JS خود را در تمامی صفحات سایت لود میکند(این مسئله در خصوص Font Awesome و آیکون های لود شده توسط این کتابخانه نیز صدق می کند)؛ حتی اگر در این صفحات از المنتور یا آیکون های Font Awesome استفاده نشده باشد. کمک گرفتن از افزونه هایی مثل Asset CleanUp و Perfmatters می تواند راه حل هایی برای حذف این فایل ها ارائه کند.
تست و پایش مداوم عملکرد سایت المنتوری
در ابتدای این نوشته راهنما، ابزارهای بررسی core web vitals المنتور را معرفی کردیم. قبل و بعد از هر تست و اقدامی جهت بهبود هر یک از پارامترهای گفته شده حتما با یکی از این ابزارها سرعت و رتبه سایت را چک کنید. این کار باعث می شود که میزان اثربخشی هر تکنیک به خوبی مشخص شود.
باتوجه به احتمال فعال بودن کش مرورگر و سایت جهت دقیق تر بودن تست های عملکرد و سرعت حتما سایت را در نسخه incognito مرورگرها چک کنید.
پیش از انجام بروزرسانی های دوره ای افزونه المنتور یا نصب افزونه جدید تست سرعت و عملکرد را انجام دهید؛ تا میزان تاثیر هر اقدام را مشخص کرده و در صورت بروز مشکل به سرعت بتوانید عیب یابی و رفع مشکل انجام دهید.
