https://virgool.ir/feed/@sameti.kimiaبرنامه نویس Front End و همچنین علاقه مند به تجربه های کاربران در محصول!fa2026-11-10 21:54:42https://files.virgool.ir/upload/users/462191/avatar/c52O7a.jpeghttps://virgool.ir/@sameti.kimiahttps://virgool.ir/@sameti.kimia/استفاده-از-google-lighthouse-در-عمل-gpuuuvvdlyfwهمانطور که می‌دانیم، لایت‌هاوس قابلیتی به توسعه‌دهندگان ارائه می‌دهد که توسط آن می‌توانند میزان عملکرد سایت خود را از جهات مختلف بسنجند. اگر از طریق 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="image/webp" as="image" href="/images/x.webp"/>لود کردن عکس درست و پریلود کردن بر روی FCP نیز اثر خیلی زیادی داره.CLS (Cumulative Layout Shift):یکی از مواردی که به وفور در سایت های تبلیغات دار میبینیم layout shift هست.زمانی که میخواهیم روی یک دکمه کلیک بکنیم و قبل از کلیک ناگهان عکسی در بالای محتوا لود شده و دکمه پایینتر میرود! این مورد خیلی روی تجربه ی کاربری اثر منفی میتونه داشته باشه.و خب یکی از عوامل تاثیرگذار روی پرفورمنس,جلوگیری از layout shift هست.چه مواردی معمولا layout shift میسازند ؟تصاویر بدون ابعاد :برای [عکس , ویدیو و iframe ] ها width , height و یا aspect ratio تعریف کنید . این کار باعث میشود که فضای متناسب با عکس در مرورگر رزرو شود و هنگام بارگذاری، متن‌ها و عکس ها به پایین نروند. بنر های تبلیغاتی : درصورتی که تبلیغ و بنر قراره نمایش داده بشه برای اون ها هم width height پیشفرض تعریف کنید. تغییر در layout : وقتی میخواهید تغییر و انیمیشنی ایجاد کنید به layout دست نزنید. فرضا اگر اندازه ی بلاکی را در زمان هاور میخواهید تغییر دهید; به جای تغییر در عرض و ارتفاع آن از transform استفاده کنید.لود کردن فایل ها : فونت ها , عکس ها , و css ها رو پریلود کنید.چون گاهی اوقات لود شدن فونت طول میکشد و همین باعث layout shift بسیاری میشود.درکل پیش بینی فضاها و استفاده از loader خیلی اثرگذار خواهد بود.TBT (Total Blocking Time):درواقع TBT نشان دهنده زمانی است که صفحه وب به دلیل اجرای سنگین جاوااسکریپت غیر قابل تعامل میماند. - یکی از اثرگذارترین کارها برای کاهش TBT استفاده از defer و async برای کارهای غیرضروری هست. اگر اسکریپتی لود میکنید و غیرضروری است defer رو به اون اضافه کنید و یا کد های js برای بخش های غیر قابل مشاهده در ویو اصلی را lazy load کنید:<Script type="application/ld+json" 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 رو اثر میده و همین موجب کاهش امتیاز میشه.پس درکل دیدن امتیاز پایینتر در ورژن موبایل منطقیه!مرسی از توجهتون ! :)کیمیا ثامتیکیمیا ثامتیTue, 10 Sep 2024 11:05:30 +0330https://virgool.ir/@sameti.kimia/مونوریپو-چیست-و-در-react-چگونه-آن-را-پیاده-سازی-کنیم-z2xalchpayezرویکرد مونوریپو در دهه ی گذشته اولین بار توسط گوگل پیشنهاد شده ولی در چند سال اخیر بسیار پر استفاده تر شده.مونوریپو چیست؟مونوریپو یک مفهوم ساختاریه در راستای اینکه شما به جای مدیریت چندین ریپازیتوری میتوانید کد های ایزوله شده ی خود را در یک ریپازیتوری نگهداری بکنید.این به این معنا نیست که لزوما پروژه های شما "باید" از لحاظ منطقی و کاربردی به هم مربوط باشند.فرض کنید کار شما به سمتی کشیده شده که دارای وب اپلیکیشن جداگانه,IOS app و android app مخصوص به خود و موارد دیگر است(هرچند که اگر به این حد رسید بهتره شاید یه تجدید نظر بکنید:دی) .در این حالت monorepo بودن پروژه بسیار کمک کننده است.تیم ما در وب اپلیکیشن خود چرا نیازمند این شد که به سمت monorepo بره؟ وب اپلیکیشن ما دارای دو مفهوم متفاوت از buyer و seller داشت که باید کاملا از همدیگر جدا میبودند و بیلد جداگونه گرفته میشد . از طرفی تا حد زیادی دارای کامپوننت های مشترک بودند و نیاز داشتیم اکثر اوقات این دو قسمت پروژه رو به صورت همزمان توسعه بدیم. حال ما توسط مونوریپو میتونستیم قسمت seller ,buyer رو به صورت دو پکیج جداگونه در نظر گرفته و علاوه بر اون پکیچی به اسم common برای کامپوننت ها و چیز های مشترک بسازیم و در هر دو استفاده کنیم.حالا اگر از این مفهوم استفاده نکنیم چی؟این به این معنیه که برای هرپکیج باید یک سری کانفیگ هارو کپی کنیم و فرض کنید هر بار اضافه کردن تغییرات مثل هم, ساخت مرج ریکوست و بیلد و ... بسیار طاقت فرسا!چگونه پیاده سازی کنیم؟یکی از بهترین روش ها و معمول ترین روش ها استفاده از Lerna هست که ما در اینجا بهش میپردازیم.با این حال روش دیگری با استفاده از خود yarn هم وجود داره.استفاده از Lerna:ایده اصلی لرنا اینه که پروژه ی شما یک فولدری به نام packages داره که شامل تیکه کد (پروژه) های ایزوله شما هست .لرنا یکی از قابلیت های خوبی که داره bootstrap هست.با بوت استرپ این پروژه ها توانایی اینو دارند که همدیگر رو ایمپورت بکنند بدون اینکه چیزی توی npm پابلیش بشه.مراحل پیاده سازی:ابتدا توی فولدر جدیدی که ساختین yarn init رو میزنینyarn initهمونطور که میدونید بعد زدن دستور از ما سوالایی میپرسه که فعلا میتونیم رد بکنیم.حال که package.json ما ساخته شد لرنا رو اضافه میکنیمyarn add -D lernaپس از اون :lerna init*حواستون باشه اگر ویندوز هستید و دستور رو نمیشناسه npx lerna init رو بزنین.اسکریپت زیر رو به package.json اضافه کنین"scripts": { "bootstrap": "lerna bootstrap", "build": "lerna run build", "start": "lerna run start --stream" },yarn bootstap: اتصال پروژه ها به یکدیگرyarn build: همه ی پروژه های داخل فولدر پکیج بیلد گرفته میشهyarn start: ران شدن پروژهفایل lerna.json هم همچین شکلی تقریبا باید باشه{"packages": ["packages/*"], "version": "0.0.0", "npmClient": "yarn", "useWorkspaces": true}در حال حاضر باید فولدر packages رو بتونید ببینید.حال زمان این رسیده که دو پروژه ری اکت تست بسازید! داخل فولدر packages برید و دستور زیر رو طبق چیزی که میخواید تغییر بدید .npx create-react-app app --template typescriptحال زمان ارتباط گیری پروژه ها توسط بوت استرپ هست که باید توی فولدر root صدا زده بشه نه پکیجز:lerna bootsrapدقت کنید اگر ارورerror Workspaces can only be enabled in private projects. میخورید باید"private":"true"به package.json اضافه کنید.حال اگر yarn start رو بزنین باید پروژه های شما با هم ران بشه:)!ولی احتمال هم داره نشه؟ چرا؟ چون دوتاشون میخوان رو پورت 3000 بالا بیان. پس داخل package.json یکی از پروژه ها قسمت "scripts" دستور start رو به این صورت تغییر بدید://for windows "start": "set PORT=3006 && react-scripts start", //for linux "start": "PORT=3006 react-scripts start"تموم! حالا دوتا پروژه ها با هم ران میشن. اگر هم بخواید جداگونه ران بکنیدشون داخل هر فولدر جداگونه yarn start رو بزنین.خسته نباشید شما موفق شدید :)کیمیا ثامتیکیمیا ثامتیSat, 23 Jul 2022 21:01:55 +0430