استفاده از Google LightHouse در عمل!

همانطور که می‌دانیم، لایت‌هاوس قابلیتی به توسعه‌دهندگان ارائه می‌دهد که توسط آن می‌توانند میزان عملکرد سایت خود را از جهات مختلف بسنجند. اگر از طریق developer tools به قسمت مربوطه برویم، گزارشی از عملکرد سایتمان در نمای موبایل یا دسکتاپ به دست می‌آوریم. اگر رنگ سبز را مشاهده کنیم، معمولاً نشانگر عملکرد خوب است و خوشحال می‌شویم. ولی اگر رنگ قرمز ببینیم، کار کمی سخت‌تر خواهد شد.
در این مقاله می‌خواهم تجربیات خود را در بهبود عملکرد سایت، به ویژه در بخش performance، با شما در میان بگذارم تا شما هم بتوانید تجربه کاربری بهتری ایجاد کنید.

ابتدا به عدد Performance دقت می‌کنیم و توضیحات زیر آن را بررسی می‌کنیم. اما نکته مهم‌تر این است که در همان ابتدا روی نمودار یک هاور بکنیم و ببینیم کدام بخش‌ها بیشترین تأثیر را بر کاهش امتیاز عملکرد داشته‌اند.

خب اینجا میبینیم که مشکلات از قسمت TBT و CLS هستش. و هر بخش هم درصدی از این دایره پرفورمنس رو به خودش اختصاص داده که طبق اعلام گوگل، این درصدها به‌طور مداوم در حال تغییر و به‌روزرسانی هستند و ممکن است در آینده تغییر کنند و بعدا شاید دیگه این نباشه :

LCP :

درواقع LCP (بزرگ‌ترین نقاشی محتوایی) یعنی سنگین‌ترین عکس، ویدیو، یا محتوایی که کاربر اولین بار در سایت با آن مواجه می‌شود. اگر این محتوا کمتر از 2.5 ثانیه طول بکشد تا بارگذاری شود، یعنی LCP خوبی داریم.

مواردی که برای بهبود LCP بهتره رعایت کنیم:

** حتما تصاویر استفاده شده فرمت WEBP یا AVIF باشند و تا حد امکان حجم اون رو کاهش بدیم و از فرمت های png , jpeg استفاده نکنیم.

** اگر به عنوان lcp از تگ image استفاده میکنیم حتما ویژگی "loading = "eager را تنظیم کنیم . ولی عکس های پایینتر لندینگ میتوانند به صورت lazy load بارگذاری شوند .

** درصورتی که از backgroundImage استفاده میکنید بهتره که آن رو preload بکنید .چون در غیر اونصورت پریولد نمیشه و روی پرفورمنس اثر منفی میگذاره. به این صورت :

<link rel='preload'  type=&quotimage/webp&quot as=&quotimage&quot href=&quot/images/x.webp&quot/>

لود کردن عکس درست و پریلود کردن بر روی FCP نیز اثر خیلی زیادی داره.

CLS (Cumulative Layout Shift):

یکی از مواردی که به وفور در سایت های تبلیغات دار میبینیم layout shift هست.زمانی که میخواهیم روی یک دکمه کلیک بکنیم و قبل از کلیک ناگهان عکسی در بالای محتوا لود شده و دکمه پایینتر میرود! این مورد خیلی روی تجربه ی کاربری اثر منفی میتونه داشته باشه.و خب یکی از عوامل تاثیرگذار روی پرفورمنس,جلوگیری از layout shift هست.

چه مواردی معمولا layout shift میسازند ؟

1. تصاویر بدون ابعاد :برای [عکس , ویدیو و iframe ] ها width , height و یا aspect ratio تعریف کنید . این کار باعث میشود که فضای متناسب با عکس در مرورگر رزرو شود و هنگام بارگذاری، متن‌ها و عکس ها به پایین نروند.
2. بنر های تبلیغاتی : درصورتی که تبلیغ و بنر قراره نمایش داده بشه برای اون ها هم width height پیشفرض تعریف کنید.
3. تغییر در layout : وقتی میخواهید تغییر و انیمیشنی ایجاد کنید به layout دست نزنید. فرضا اگر اندازه ی بلاکی را در زمان هاور میخواهید تغییر دهید; به جای تغییر در عرض و ارتفاع آن از transform استفاده کنید.
4. لود کردن فایل ها : فونت ها , عکس ها , و css ها رو پریلود کنید.چون گاهی اوقات لود شدن فونت طول میکشد و همین باعث layout shift بسیاری میشود.

درکل پیش بینی فضاها و استفاده از loader خیلی اثرگذار خواهد بود.

TBT (Total Blocking Time):

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

- یکی از اثرگذارترین کارها برای کاهش TBT استفاده از defer و async برای کارهای غیرضروری هست.

اگر اسکریپتی لود میکنید و غیرضروری است defer رو به اون اضافه کنید و یا کد های js برای بخش های غیر قابل مشاهده در ویو اصلی را lazy load کنید:

<Script type=&quotapplication/ld+json&quot dangerouslySetInnerHTML={{__html: JSON.stringify(videoLd)}} defer async/>

- یکی دیگر از موارد third party ها هستند.همونطور که میدونید third party ها سرویس های خارجی هستند که ما به صورت اسکریپت یا کتابخونه با پروژه خودمون ادغام میکنیم مانند گوگل آنالیتیکس, لایو چت ها و ...

تا حد امکان third party ها رو کاهش بدید و یا defer کنید.

لود کردن عکس ها به شیوه های مختلف نیز میتوانند اثر زیادی روی TBT داشته باشند.به زودی در یک پست جدید این مورد رو بررسی خواهم کرد.

Speed Index:

سرعت ایندکس کردن به این برمیگردد که چقدر سریع محتواها نمایش داده میشوند. که یکجورهایی موارد قبلی که گفتیم توی این مورد اثر دارند از جمله defer , lazy loading, preload, ...

ولی یک مورد که خوبه اشاره کنیم استفاده از CDN هاست . ازونجایی که CDN با توزیع محتوای سایت روی سرورهای نزدیکتر به کاربر باعث افزایش سرعت بارگذاری میشه ; تجربه کاربری بهتری هم ایجاد میکنه.

یک موردی که بعد از چندین بار امتحان کردن لایت هاوس احتمال خیلی زیاد بهش برمیخورید ; کم بودن امتیاز پرفورمنس موبایل نسبت به دسکتاپ ; مخصوصا در قسمت TBT هست .که یکی از دلیل های اصلیش تفاوت سخت افزاری ای هست که دیوایس های موبایل از جهات cpu و memory نسبت به سیستم ها دارند.مورد دیگر اینه که لایت هاوس هنگام انجام تست ها بر روی موبایل از محیط شبیه ساز استفاده میکنه و network throttling رو اثر میده و همین موجب کاهش امتیاز میشه.

پس درکل دیدن امتیاز پایینتر در ورژن موبایل منطقیه!

مرسی از توجهتون ! :)