https://virgool.io/feed/@mehrad_dm یک عدد توسعه دهنده fa 2026-07-03 09:50:56 https://files.virgool.io/upload/users/19286/avatar/xk1GTO.png?height=120&width=120 https://virgool.io/@mehrad_dm https://virgool.io/@mehrad_dm/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%85%D8%AD%D8%B5%D9%88%D9%84%DB%8C-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-%DA%A9%D9%87-%D9%85%D8%AE%D8%A7%D8%B7%D8%A8-%D8%B1%D8%A7-%D8%B4%D8%A8%D8%A7%D9%86%D9%87-%D8%B1%D9%88%D8%B2-%D8%AF%D8%B1%DA%AF%DB%8C%D8%B1-%DA%A9%D9%86%D8%AF-q8dl74mcro2v تا به حال به این فکر کردید که چطور هر روز بدون اینکه متوجه باشیم اسیر و درگیر استفاده از یک محصول خاص میشم؟! مثلا یک برنامه روی تلفن همراهتون که هر روز و یا حتی روزی چند بار چکش می‌کنید.خب توی این نوشته می‌خوایم عواملی که باعث میشه ما به قول معروف معتاد یک محصول بشیم و نتونیم ازش دست بکشیم رو بررسی کنیم و با یک مدلی که بهش می‌گن "قلاب" یا "Hooked" آشنا بشیم. این نوشته به شدت برای طراحان محصول و کسانی که درگیر فروش محصولاتشون هستند و یا به بازاریابی و فروش علاقه دارند می‌تونه جذاب باشه و اونا رو به فکر فرو ببره. بعد از خوندن این نوشته با یک دید دیگه به محصولات نگاه خواهید کرد.توی این مدل بیشتر تمرکز بر روی اصول طراحی محصول با استفاده از دیدگاه روانشناسی شناختی است. اجرای پی ‌در ‌پی چرخه قلاب باعث درگیر کردن مشتری و انگیزه‌اش و استفاده مکررش از محصولتون بدون تبلیغات پر هزینه خواهد شد.۷۹٪ از کسانی که تلفن‌ هوشمند دارند هر روز صبح حداکثر تا ۱۵ دقیقه پس از بیدار شدن به دستگاهشون سر می‌زنند(که این آمار هر روز بیشتر هم خواهد شد.) و ما در طول روز به طور میانگین حدود ۳۴ مرتبه به گوشی‌هامون سر می‌زنیم که بعضی از آمارها نشون میده که برای برخی افراد به ۱۵۰ مرتبه هم میرسه. خب این آمار نشون میده که ما همگی عادت به استفاده از تلفن‌های هوشمند و برنامه‌های داخلشون کردیم.دانشمندان روانشناسی شناختی، عادت رو رفتار‌های خودکاری که با نشانه‌های موقعیتی به جریان می‌افتند تعریف می‌کنند: کار‌هایی که بدون تفکر آگاهانه یا با حداقل آگاهی انجام میدیم.برای خیلی از محصولات ایجاد وابستگی شرط بقاست. شرکت‌های عادت‌ساز به جای تکیه به بازاریابی پر هزینه، خدماتشون رو به احساسات و کار‌های روزمره کاربران پیوند می‌زنند؛ مثلا وقتی ما کمی حوصلمون سر میره بلافاصله توییتر و اینستاگرام و ... باز ‌می‌کنیم، پس پای عادتی درمیونه.اما بریم سراغ چهارچوب مدل قلاب و ببینیم که چه چرخه‌ای رو باید طی کنیم تا مشتری/کاربر رو درگیر استفاده از محصولاتمون کنیم.مدل قلابمحرک(Trigger)اولین عنصر این چرخه محرکه و محرک‌ها فعال کننده رفتارند. محرک‌ها به دو دسته محرک‌های درونی و محرک‌های بیرونی تقسیم می‌شوند.انگیزه/محرک بیرونی: همون نیروی محرکی که باعث میشه برای دست‌یابی به پاداش یا جلوگیری از تنبیه شدن، طور خاصی رفتار کنیم و یا کار خاصی انجام بدیم. مثال: زمانی که برای دریافت تایید از رئیس خودمون اضافه کاری می‌کنیم.انگیزه/محرک درونی: این نوع از محرک به خاطر رسیدن به رضایت درونی در شما ایجاد میشه و در واقع اعمال و رفتار برای شما مهم هستند و به عامل خارجی مرتبط نیست.فناوری‌های عادت ساز تغییر رفتار را با هدایت کاربر از طریق "فراخوان اقدام"(call-to-action) شروع می‌کنند. دقت کنید که محرک‌های خارجی در خودشون "اطلاعاتی" دارند که به کاربر میگه چه کار بکند و این رو به شکل شفاف و روشن بیان می‌کنند. به عنوان مثال وقتی وارد سایتی میشید در نوار بالایی سایت نوشته شده "۶۰ درصد تخفیف" و یک دکمه مشاهده تخفیف‌ها(call-to-action) در کنارش دیده میشه که به ما اطلاع میده برای استفاده از این فرصت روی دکمه کلیک کنیم.اما محرک‌های درونی به چه شکل هسنتد؟! فردی رو درنظر بگیرید که به اشتراک گذاری عکس‌های جذاب از محیط اطرافش در اینستاگرام عادت کرده. این فرد چه زمانی عکسی را به اشتراک میذاره؟ زمانی که می‌ترسه لحظه خاصی رو از دست بده و بنابراین به سرعت از اون لحظه عکسی می‌گیره و به اشتراک میذاره. یا اینکه ما پس از شنیدن در خصوص برنامه‌ای به نام Clubhouse سریعاً اون رو نصب می‌کنیم که نکنه یکوقت چیزی رو از دست بدیم ناشی از یک نوع ترس اجتماعی است که به اون FOMO یا Fear of missing out گفته میشه.این اتفاق به این دلیل می‌افته که احساسات، بخصوص احساسات منفی، محرک‌های درونی قدرمتندی‌اند و تاثیر زیادی در رفتار‌های روزمره ما دارند. احساس کسلی، تنهایی، نا‌امیدی، سردرگمی و دودلی معمولا درد یا آزردگی جزئی ایجاد میکنه و باعث بروز رفتاری تقریبا آنی و اغلب بدون تفکر برای از بین بردن اون احساس منفی میشه.اقدام(Action)مرحله بعدی مدل قلاب مرحله اقدامه. محرک که سرنخ‌های داخلی یا خارجی فعالش می‌کنند، به کاربر میگه که چه کاری بکنه؛ اما اگر کاربر دست به اقدام نزنه، محرک بی‌فایده‌ست. برای دست به اقدام زدن، عمل کردن باید ساده‌تر از فکر کردن باشه. به یاد داشته باشید، عادت رفتاری است که با حداقل تفکر آگاهانه صورت می‌گیره. هر چه تلاش بیشتری، چه فیزیکی و چه ذهنی برای اقدام لازم باشه، احتمال وقوع آن کمتره.جالبه بدونید که شرکت‌ها از دو اهرم اساسی در رفتار انسانی برای افزایش احتمال وقوع اقدام بهره می‌گیرند: سهولت انجام دادن اقدام و انگیزش روان‌شناختی برای انجام دادن آن. اگر اقدام بخش اصلی عادت‌سازی‌ست، طراح محصول چطور میتونه کاری کنه که کاربران دست به اقدام بزنند؟! آیا فرمولی برای رفتار وجود داره؟در جواب باید بگم که بله همچین فرمول‌هایی وجود دارند و یکی از این فرمول‌ها، نظریه دکتر فاگ(Fog) از دانشگاه استنفورده. فاگ ادعا میکنه که سه عنصر برای شروع هر رفتاری لازمه: ۱- کاربر باید انگیزه کافی داشته باشه. ۲- کاربر باید توانایی انجام اقدام مطلوب رو داشته باشه. ۳- محرکی باید وجود داشته باشه تا رفتار را به جریان بندازه. این مدل در فرمولی خلاصه می‌شود: رفتار = انگیزه x توانایی x محرک؛ یعنی رفتار خاص وقتی بروز پیدا میکنه که انگیزه، توانایی و محرک به طور هم‌زمان و به اندازه کافی وجود داشته باشند.بیایید مثالی را با هم بررسی کنیم. فرض کنید تلفن‌همراهتون زنگ می‌خوره اما به اون جواب نمی‌دید. چرا پاسخ ندادید؟ شاید تلفنتون در کیف شما و بین وسایل دیگه باشه و نتونید به راحتی اون رو پیدا کنید که در این حالت نداشتن توانایی برای پاسخ دادن آسون به تلفن‌همراهتون مانع از اقدام شده. اما تو حالت دیگه‌ای شخصی به شما زنگ میزنه که دوست ندارید جواب اون رو بدید(مثلا شماره‌ای ناشناس، تماس‌های تبلیغاتی و ... ) بنابراین نداشتن انگیزه باعث شده تماس رو نادیده بگیرید. یا شاید تماس مهمی بوده و تلفن هم دم دستتون بوده اما تلفن شما رو حالت بی‌صدا(silent) بوده و تماس رو از دست دادید که در این حالت هیچ محرکی وجود نداشته. پیش‌تر راجب عنصر محرک صحبت کردیم اما کمی هم در مورد توانایی و انگیزه بگیم.محرک سرنخ اقدام رو به دست کاربر میده و انگیزه میزان تمایل به انجام دادن اون اقدام رو تعیین میکنه. فاگ درباره انگیزه معتقده که تمایل ما به اقدام از سه انگیزه‌ دهنده کلیدی تشکیل شده. فاگ میگه همه انسان‌ها برای: ۱- رفتن به دنبال لذت و اجتناب از درد ۲- رفتن به دنبال امید و اجتناب از ترس ۳- رفتن به دنبال پذیرش اجتماعی و اجتناب از طرد شدن انگیزه دارند. هر دوجنبه این سه انگیزه دهنده کلیدی رو می‌تونیم اهرم‌های افزایش یا کاهش انگیزه شخص برای افزایش یا کاهش احتمال انجام دادن اقدامی خاص بدونیم. دنیس هاپتلی در کتاب "چیزی کاملا تازه: سه گام ساده تا خلق محصولات نوآورانه" فرآیند نوآوری رو به سه گام اساسی تجزیه کرده: دلیل استفاده مردم از محصول رو پیدا کنید.مراحلی که کاربر باید طی کنه رو ترسیم کنید.در نهایت، وقتی به درک درستی از مجموعه اقدامات لازم برای رسیدن از فکر به عمل رسیدید، شروع کنید به حذف مراحل تا جایی که به ساده‌ترین فرآیند ممکن دست پیدا کنید.پاداش متنوع(Variable Reward)مرحله سوم مدل قلاب پاداش متنوع است. یکی از وجه تمایز‌های مدل قلاب با حلقه بازخورد ساده، توانایی اون در ایجاد هوس و کششه. حلقه‌های بازخورد دور تا دور ما رو گرفته‌اند، اما حلقه‌هایی که قابل پیش‌بینی‌‌اند اشتیاق ایجاد نمی‌کنند. به عنوان مثال چراغ داخل یخچال رو در نظر بگیرید که در پاسخ به باز کردن در آن روشن میشه، اما اگه کمی تنوع به این ترکیب اضافه کنیم مثلا هر بار که در یخچال رو باز می‌کنیم خوراکی‌های لذیذ متفاوتی در یخچال ظاهر شوند، اینجاست که کشش ایجاد میشه. پاداش‌های متنوع یکی از قدرتمند‌ترین ابزار‌های شرکت‌ها برای قلاب کردن کاربرهاست.طبق یافته‌های پژوهشی، وقتی مغز منتظر پاداشه، سطح انتقال دهنده عصبی دوپامین افزایش ناگهانی داره. اضافه کردن تنوع، تاثیر رو چند برابر میکنه. به این دلیل حالت متمرکزی ایجاد میکنه، که ناحیه‌های مربوط به قضاوت و استدلال رو در مغز سرکوب میکنه و از طرفی ناحیه‌هایی رو فعال میکنه که مربوط به خواست و اشتیاق‌اند. به عنوان نمونه‌ای از پاداش‌های متنوع، می‌تونیم به بخت‌آزمایی و دستگاه‌های سکه‌ای کازینو‌ها اشاره کنیم. در دهه ۱۹۵۰، روان‌شناسی به نام اسکینر(Skinner) آزمایش‌هایی رو برای درک تاثیر تنوع در رفتار حیوانات انجام داد. اسکینر ابتدا کبوتر‌هایی رو داخل جعبه‌ای قرار داد و کاری کرد که با هر بار فشرده شدن اهرمی تکه‌ای غذا برای کبوتر‌ها انداخته بشه، کبوتر‌ها رابطه‌ی بین فشار دادن اهرم و غذا گرفتن رو یاد گرفتند(ایجاد عادت). اسکینر در بخش بعدی آزمایش، تنوع رو هم اضافه کرد و دستگاه رو طوری تنظیم کرد که به جای اینکه هر بار کبوتر اهرم را فشار داد تکه‌ای غذا انداخته بشه، بعد از تعداد تصادفی ضربه غذا رو بندازه. اسکینر دریافت که متنوع بودن پاداش باعث افزایش چشمگیر تعداد دفعاتی میشه که کبوتر‌ها اهرم رو فشار میدن. بعد‌ها آزمایش‌هایی نشون دادن که تنوع باعث افزایش فعالیت در هسته آکومبِنس(nucleus accumbens) میشه و سطح دوپامین مغز را بالا میبره و باعث جستجوی حریصانه پاداش میشه.انواع پاداش پاداش‌های متنوع رو در هر نوع محصول و تجربه‌ای که توجه ما رو جلب میکنه می‌تونیم پیدا کنیم. همین پاداش‌ها هستند که ما رو وادار به بررسی ایمیل‌، چرخ زدن در اینترنت و یا خرید کالاهای تخفیف‌دار میکنه. این پاداش‌ها به چند دسته زیر تقسیم میشن.انواع پاداش متنوعپاداش‌های قبیله‌ایما انسان‌ها گونه‌ای از جانداران هستیم که به یکدیگر وابسته‌ایم. پاداش‌های قبیله‌ای، یا همون پاداش‌های اجتماعی، از هم بستگی با دیگران ناشی میشن. در واقع مغز به دنبال پاداش‌هایی میره که به ما حس پذیرفته شدن، جذابیت، اهمیت و به حساب اومدن میدن. در نتیجه جست‌و‌جو برای پاداش‌های اجتماعی، ناشی از علاقه آدم‌ها به پیوستگی با سایر انسان‌ها است.به عنوان مثال از شرکت‌هایی که از پاداش‌های قبیله‌ای/اجتماعی استفاده می‌کنند، می‌تونیم به توییتر، فیسبوک، اینستاگرام و ... اشاره کنیم. نیاز به احساس همبستگی اجتماعی، ارزش‌های ما رو شکل میده و سهم زیادی در تعیین نحوه گذروندن اوقات ما داره. ما از هر پست و توییتی در این نرم‌افزار‌ها، انتظار تایید اجتماعی داریم که این تایید‌ها همان like کردن و بازنشر دادن و retweet و ... است که به عنوان پاداش‌های قبیله‌ای باعث بازگشت مکرر ما میشه. همچنین در نظر داشته باشید طبق نظریه "یادگیری اجتماعی" آلبرت باندورا، کسانی که شاهد پاداش گرفتن شخص دیگه‌ای به خاطر رفتار خاصی باشن احتمالا باور‌ها و اقدامات بعدی خودشون رو تغییر میدن. برای مثال می‌تونیم به الگو برداری ما از افراد موفق و تاثیرگذار اشاره کنیم. پاداش‌های شکاریماشین‌های قمار یکی از مثال‌های پاداش متنوع شکاریه. در کازینو‌های آمریکا سالانه ۱ میلیارد دلار درون ماشین‌های قمار ریخته میشه که قدرت این ماشین‌ها رو برای وسوسه کردن کاربرانش نشون میده که تازه این در صورتیه که همه‌ اون‌ها میدونند برنده همیشگی قمار‌‌خونه‌ست. در کازینو‌ها بازی‌های شانسی با اعطای پول در بازه‌های زمانی تصادفی بازیکنان رو که چشم انتظار برنده شدن‌ هستن وسوسه می‌کنند. در واقع در زمان تعقیب ‌و ‌گریز، خود تعقیب باعث انگیزش شکارچی میشه و درست همین اتصال ذهنی مستقیم، سرنخ‌هایی برای رسیدن به منشأ اشتیاق‌های سیری‌ناپذیر امروز ماست.پاداش‌های نفسیما همیشه برای غلبه به موانع انگیزه داریم، حتی اگه بخاطر رضایت ناشی از صِرف غلبه کردن باشه. آدم‌ها برای به انتها رسوندن کاری حاضرن به هرگونه رفتاری ادامه بدن. جالب اونجاست که ما این پاداش‌ها رو حتی وقتی ظاهرا دیگه لذتی ندارن هم دنبال می‌کنیم. منشأ پاداش‌های نفسی "انگیزه‌ درونی" است که در نظریه خود تعیین‌گری، ادوارد دسی(Edward Deci) و ریچارد رایان(Richard Ryan) این طور بیان می‌کنند: آدم‌ها میل رسیدن به "احساس شایستگی" دارن. افزودن عنصر معما به این هدف تکاپو برای اون رو جذاب‌تر میکنه.در بازی‌های رایانه‌ای، پاداش‌های نفسی مؤلفه‌ای تأیین کننده‌ هستن. رفتن به مرحله بالاتر، بازکردن قفل قدرت‌های ویژه و سایر ساز و کار‌‌های بازی، پیشرفت بازیکنان و به سرانجام رسیدن تلاش‌هاشون رو به نمایش میذاره و عطش کسب شایستگی اون‌ها رو سیراب میکنه.اما در نظر داشته باشید شرکت‌ها فقط با درک چیزی که واقعا برای کاربران اهمیت داره می‌تونن پاداش متنوع رو به درستی بر رفتار مورد نظرشون منطبق کنن. پاداش‌های متنوع گَرد جادویی نیستند که طراحان محصول اون رو روی محصولی بپاشن و جذابیت اون رو فوراً بیشتر کنن. پاداش باید با چرایی استفاده از محصول همخونی داشته باشه و در راستای انگیزه‌ها و محرک‌های درونی کاربران باشه.سرمایه‌گذاری(Investment)سرمایه‌گذاری آخرین مرحله مدل قلابه. اما سرمایه‌گذاری کاربر به چه شکله؟! این مرحله وقتیه که کاربر چیزی مثل زمان، انرژی، سرمایه اجتماعی و یا پول رو صرف محصول میکنه. اقداماتی مثل دعوت از دوستان، ثبت نظر و... از انواع سرمایه‌گذاری‌های کاربره. به عنوان مثال کاربرانی رو در نظر بگیرید که وارد وبلاگ شما میشن و شروع به خوندن پست‌های شما می‌کنن و مقاله‌هایی که براشون جالب بوده رو با دوستاشون به اشتراک میذارن و یا در مورد مطلبی که با اون ارتباط برقرار کردن نظری برای شما می‌نویسن و این رفتار‌ها سرمایه‌گذاری کاربر‌ نامیده میشه و باعث میشه چرخه قلاب سریعتر بشه. پژوهشگران متوجه شدند که یکی از عوامل مهم در عادت‌سازی، تغییر رویکرد شرکت کننده به اون رفتاره. اما برای تغییر رویکرد، درک کاربران از اون رفتار باید تغییر کنه.چرا برای زحمت‌های خودمون ارزش بیشتری قائلیم؟اصل روانشناسی به نام تشدید تعهد(escalation of commitment) وجود داره که ثابت شده میتونه ذهن ما رو وادار به همه جور کار خنده‌داری بکنه. قدرت تعهد باعث میشه برخی افراد اونقدر بازی کامپیوتری کنند تا افقی بشن و بمیرن (: . از این اصل برای افزایش کمک‌های مردم به خیریه‌ها هم استفاده شده. حتی برای مجبور کردن زندانی‌های جنگی به دست کشیدن از وفاداری هم به کار رفته. تعهد‌ها اثری قوی در ما دارند و نقش مهمی در کار‌هایی که انجام می‌دیم، محصولاتی که می‌خریم و عادت‌هایی که در ما شکل می‌گیرن ایفا می‌کنن. هرچه کاربران زمان و انرژی بیشتری در محصول یا خدمتی سرمایه‌گذاری کنن، بیشتر برای اون ارزش قائل میشن. شواهد محکمی وجود داره که نشون میده زحمات ما منجر به ایجاد عشق میشه. یکی از نمونه‌های موفق تو این زمینه شرکت آیکیا(IKEA) است. آیکیا برخلاف رقباش که کالا‌های آماده می‌فروشن، مشتریانش رو در فرآیند تولید به کار میگیره. آیکیا محصولات خونه رو به صورت قطعاتی سرهم نشده برای مشتریاش ارسال میکنه و مصرف‌کنندگان رو مجبور به سرمایه‌گذاری فیزیکی در سرهم کردم محصول میکنه و وقتی مصرف‌کنندگان محصول رو سرهم می‌کنن عشق نامعقولی به محصولی پیدا می‌کنن که خودشون ساخته‌اند. چرا به دنبال این هستیم که مثل قبل رفتار کنیم؟رفتار‌های قبلی ما چقدر در تصمیمات آینده ما اثر گذارند؟ ما دوست داریم فکر کنیم آزادیم که هرجور دوست داریم عمل کنیم و قضاوتمون ربطی به اقدامات گذشته‌ ما نداره. اما مطالعات نشون داده که در عمل، گذشته پیش‌بینی کننده بسیار خوبی از آینده‌ست.پژوهشگران از دو گروه از ساکنان حومه شهر خواستند که تابلو‌های بزرگ و زشتی رو جلوی خونه‌هاشون نصب کنن که روی اون‌ها نوشته شده بود "با احتیاط رانندگی کنید". در گروه اول فقط ۱۷ درصد این درخواست رو پذیرفتن و در گروه دوم ۷۶ درصد این درخواست رو پذیرفتن. دلیل این تفاوت چی بود؟ دو گروه کاملا مشابه بودن، با این تفاوت که پژوهشگران دو هفته قبل به سراغ گروه دوم رفته بودن و از اون‌‌ها خواسته بودن که تابلوی بسیار کوچکی رو که فقط ۸ سانتی‌متر بود با نوشته "ایمن برانید!" پشت پنجره خونه‌هاشون نصب کنن. این تفاوت تنها با انجام یک درخواست کوچک‌تر نشون میده که سرمایه‌گذاری‌های کوچک، از قبیل نصب تابلوی کوچکی پشت پنجره، میتونه منجر به تغییرات بزرگی در رفتار‌‌های آینده بشه. برای مطالعه بیشتر درخصوص این مورد می‌توانید نوشته تکنیک متقاعدسازی: پای خود را لای درِ فروش بگذارید! را بخوانید که به یکی از هفت اصل متقاعد‌سازی دکتر رابرت چالدینی(Robert Cialdini) اشاره میکنه.چرا از ناهنجاری شناختی گریزانیم؟شاید اولین سوالی که برای ما پیش میاد این باشه که، اصلا ناهنجاری شناختی یعنی چی؟ اولین باری که غذای تند خوردید رو بخاطر بیارید. خوش‌مزه بود؟ بعیده. بدن‌ ما طوری طراحی شده که کپسایسین(capsaicin)، ترکیب ایجاد کننده احساس تندی غذا‌‌های فلفی، رو دفع میکنه. واکنش ذاتی ما به این طعم‌های اکتسابی دفعه، با این حال به مرور و با مواجهه‌ مکرر یاد می‌گیریم که دوستشون داشته باشیم. دیگران رو می‌بینیم که از این غذا‌ها لذت می‌برن، مقدار بیشتری امتحان می‌کنیم و به مرور زمان خودمون رو وفق میدیم. ما به تدریج ادراکمون رو از چیزی که زمانی برای ما لذت بخش نبوده تغییر میدیم تا از هنجار‌های شناختی دوست نداشتن چیزی که دیگران از اون لذت زیادی میبرن اجتناب کنیم. با اینکار درک خودمون از غذا‌های تند رو تغییر میدیم که باعث میشه درد ناشی از چیزی که روان‌شناسان اسمش رو "ناهنجاری شناختی" گذاشتن رو تسکین بدیم. مجموع سه گرایشی که بالاتر در موردشون صحبت کردیم اقدامات ما رو تحت تأثیر قرار میدن: هرچی انرژی بیشتری صرف کنیم احتمالا ارزش بیشتری برای اون قائلیم؛ رفتار ما معمولاً بر رفتار‌های قبلیمون تطابق بیشتری داره؛ و نهایتاً ما ترجیحاتمون رو تغییر میدیم تا دچار ناهنجاری شناختی نشیم. در مجموع، گرایش‌های ما منجر به فرآیند ذهنی‌ای به نام "توجیه عقلی" میشه، که به ما کمک میکنه برای رفتار‌هامون دلیل پیدا کنیم، حتی وقتی که این دلیل رو دیگران طراحی کرده باشن.مدل قلاب برای ساختن محصولاتی که نیاز‌های کاربران رو از طریق تعامل بلند مدت با اون‌ها برطرف میکنه طراحی شده تا ارتباطی بین صورت مسئله کاربر و راه‌حل طراح ایجاد کنه و این ارتباط اونقدر تکرار میشه تا عادتی شکل بگیره. وقتی کاربران چرخه‌های مدل قلاب رو تکرار می‌کنن، یادمیگیرن که نیاز‌هاشون رو با محصول عادت‌‌ساز خاصی برطرف کنن. شما اکنون به مدل قلاب مجهزید و برای ساختن قلاب‌های اثربخش باید این پنج سوال اساسی رو از خود بپرسید: کاربر‌ها واقعا چه‌ می‌خواهند؟ محصول شما چه دردی را تسکین می‌دهد؟(محرک داخلی)چه چیزی کاربران را به سوی محصولتان می‌کشاند؟(محرک خارجی)ساده‌ترین اقدامی که کاربران در انتظار پاداش انجام می‌دهند چیست و چطور می‌توانید محصولتان را ساده‌تر کنید تا این اقدام آسان‌تر شود؟(اقدام)آیا کاربران از پاداش داده شده راضی‌اند و همچنان هم طالب مقدار بیشتری از آن‌ هستند؟کاربران چه "خرده‌کاری" را در محصولتان سرمایه‌گذاری می‌کنند؟ آیا این کار محرک را بارگذاری می‌کند و باعث انباشته شدن ارزش می‌شود و محصول را به مرور بهتر می‌کند؟(سرمایه‌گذاری)توجه داشته باشید که فقط وقتی می‌تونید یک محصول عادت‌ساز بسازید که به یکی از کاربران خودتون تبدیل بشید و راه‌حل‌هایی برای رفع نیاز‌های اون‌ها طراحی کنید. سعی کنید تسهیل‌گر باشید؛ تسهیل‌گر‌ها تغییری رو که میخوان در جهان ببینن می‌سازن. وقتی چیزی می‌سازید که هم خودتون حاضرید از اون استفاده کنید و هم باور دارید که زندگی کاربر رو بهتر میکنه، دارید عادت سالمی رو تسهیل می‌کنید. دقت کنید که باید همیشه پا‌به‌پای خواسته‌های کاربراتون که مدام تغییر میکنن بدوید.این نوشته برداشت من از کتاب فوق‌العاده Hooked: How to Build Habit-Forming Products نوشته Nir Eyal بوده و قطعا نمیتونه جایگزین خوندن این کتاب بشه و اگر دوست دارید نسخه ترجمه شده اون رو مطالعه کنید می‌تونید قلاب رو از سایت انتشارات آریانا قلم تهیه کنید. امیدوارم که تونسته باشم مدل قلاب و مفاهیم پیرامون اون رو به درستی منتقل کنم و مفید بوده باشه براتون. ممنون میشم اگه هرگونه نظر، انتقاد و پیشنهادی دارید رو برای من توی بخش نظرات این نوشته بنویسید تا به بهتر شدن اون کمک کنید. موفق باشید. مهراد دلداده مهراد دلداده Thu, 22 Apr 2021 15:54:37 +0430 https://virgool.io/@mehrad_dm/%DA%86%D8%B7%D9%88%D8%B1-%D8%B3%D8%B1%D8%B9%D8%AA-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A8-%D8%B1%D8%A7-%D8%A8%D9%87-%D8%AF%D8%B1%D8%B3%D8%AA%DB%8C-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87%DA%AF%DB%8C%D8%B1%DB%8C-%DA%A9%D9%86%DB%8C%D9%85lab-data-vs-field-data-geedxayln6in امروزه ابزار‌های(Tools) زیادی برای اندازه‌گیری سرعت وب‌سایت‌ها وجود دارد اما چطور میتوانیم به درستی از این ابزار‌ها استفاده کنیم و اطلاعات درستی از این بررسی‌ها به دست بیاوریم.در این مطلب کوتاه، میخواهیم با هم بررسی کنیم که اصلاً منظور از سرعت صفحات وب چیست و تفاوت داده‌های میدانی و داده‌های آزمایشگاهی چیست و ابزار‌های(Tools) مناسب کدامند.برای مشاهده لینک‌ها و مثال‌ها به دلیل اینکه تحریم هستیم ): فیلتر شکن خودتون را روشن کنید. چرا سرعت وب‌سایت اهمیت دارد؟طی این سال‌ها استفاده کاربر‌ها از تلفن های همراهشون برای بهره بردن از محتوا و خدمات‌ای که در اینترنت است رشد خیلی زیادی داشته که همه‌ی ما متوجه آن شده‌ایم :) . اگر دقت کرده باشید در چند سال اخیر توجه گوگل به نسخه‌ موبایل وب‌سایت‌ها خیلی بیشتر شده و حتی ایندکس کردن محتوا رو هم براساس نسخه موبایل وب‌سایت ها انجام میده(در بیشتر موارد) و سرعت بارگذاری(load) اولیه هم در موبایل از فاکتور‌های مهم به حساب میاد.امروزه حتی مشتری‌های قدیمی ما در استفاده از محصول یا خدمتی که ما ارائه میدهیم شروع به مقایسه کردن سایت‌ ما می‌کنند که این مقایسه تنها با سایت های رقیب ما نیست بلکه با بهترین سایت هایی که در طول روز از خدمات آن‌ها استفاده می‌کنند است.وقتی صحبت از تجربه کاربر می‌شود‌، سرعت یکی از فاکتور‌های با اهمیت به حساب میاد. تأخیرهای ناشی از سرعت موبایل فقط ناامید کننده نیست‌، بلکه می توانند بر نتایج کسب و کار نیز تأثیر منفی بگذارند. به عنوان مثال ما دیده‌ایم که یک ثانیه تاخیر در بارگذاری صفحه می‌تواند تا 20٪ نرخ تبدیل(Conversion Rate) را تحت تأثیر قرار دهد. سرعت چیست؟بنابراین ، سرعت اهمیت دارد ، اما منظور ما از سرعت دقیقاً چیست؟ منظور از داشتن سایت سریع چیست؟معمولا وقتی از کسی سرعت وب‌سایتش را می‌پرسیم به عنوان مثال میگه سایت من تو ۴ ثانیه بارگذاری میشه در صورتی که سرعت یک وب‌سایت دیگر یک شاخص ثابت نیست و ما نمی‌توانیم فقط با یک عدد اون رو توصیف کنیم. بلکه باید تمامی اتفاقاتی که در طول این چند ثانیه که زمان میبره تا صفحه‌ي ما بارگذاری شود را بررسی کنیم و ببینیم که چه اتفاقاتی در حال رخ دادن.هنگامی که یک کاربر وارد یک صفحه وب می‌شود، ما بازخورد‌های خاصی رو باید بررسی کنیم:مراحل بازخورد سرعت صفحات وبدر تصویر بالا(از سمت چپ به راست) اینکه بدانیم سرور ما در چه زمانی پاسخگو درخواست کاربر بوده و یا اینکه محتوایی که برای کاربر در چند لحظه اول بارگذاری شده جذاب بوده یا خیر یا اینکه کاربر در چندمین ثانیه میتواند در صفحه ما تعامل(interact) داشته باشد(مثل کلیک کردن روی یک منو) و این تعامل بدون وجود باگ و یا خطایی بوده یا نه از این رو شاخص‌های دیگه‌ای معرفی شدند که برخی از آن‌ها را بررسی می‌کنیم.شاخص‌های(metrics) قدیمی مثل زمان بارگذاری(load time) و DOMContentLoaded time(مدت زمانی است که طول می‌کشد تا فایل HTML بارگذاری و parse شود و درخت DOM یا همان Document Object Model ساخته شود) دیگر کافی نیستند تا بتوانیم تحلیل درستی از سریع یا کند بودن سایت خود داشته باشیم بنابراین فاکتور‌های دیگری نیز اضافه شدند تا بتوانیم به راحتی زمان بارگذاری را بررسی کنیم و آن را بهبود بدهیم.شاخص‌های بارگذاری صفحات‌ وبشاخص‌هایی که در تصویر بالا میبینید را می‌توان به شرح زیر تعریف کرد:اولین ترسیم/نمایش(First Paint): اولین تغییری که بعد از ورود کاربر به صفحه اتفاق می‌افتد مانند تغییر رنگ زمینه صفحه.اولین نمایش محتوا(First Contentful Paint): مدت زمانی که طول می‌کشد تا اولین متن(حتی متن هایی که در انتظار بارگذاری فونت هستند) یا تصویر(image, background-image) و همچنین SVG و canvas‌ها روی صفحه نمایش داده شود را می‌گویند.اولین نمایش محتواي معنی‌دار(First meaningful Paint): مدت زمانی که طول می‌کشد تا محتوای اصلی(معنادار) صفحه دیده شود. محتوای اصلی وابسته به نوع صفحه است به عنوان مثال در وبلاگ‌ها منظور عنوان مقاله و متن اصلی است و در صفحه گالری، تصاویر محتوای اصلی هستند.زمان تعامل(Time to Interactive): به مدت زمانی گفته می‌شود که بعد از ورود کاربر به صفحه طول می‌کشد تا صفحه برای کاربر کاملاً قابل تعامل باشد یعنی با کلیک بر روی المان هایی مثل دکمه‌ها به درستی کار کنند.می‌توانید برخی از این شاخص‌های مهم اندازه‌گیری رو در User-centric performance metrics مطالعه کنید.حال بعد از آنکه درک درستی از سرعت صفحات و شاخص‌ها(metrics) پیدا کردیم وقت آن رسیده که ببینیم چطور می‌توانیم سرعت صفحات وب رو اندازه‌گیری کنیم.چگونه سرعت را اندازه گیری کنیم؟سرعت در دنیای واقعی به دلیل متفاوت بودن دستگاه‌های کاربران، اتصالات شبکه و سایر عوامل بسیار متغیر است. به عنوان مثال‌، اگر وب‌سایت خود را با استفاده از WiFi منزلتون چک بکنید و همچنین آن را با استفاده از WiFi در کافی شاپ مقایسه کنید‌، به احتمال زیاد تجربیات بسیار متفاوت خواهد بود. ابزارهای زیادی وجود دارد که می‌تواند به شما در جمع آوری داده‌های آزمایشگاهی(Lab data) و داده‌های میدانی(Field data) برای ارزیابی عملکرد صفحات وب کمک کند.داده‌های آزمایشگاهی در مقابل داده‌های میدانی(Lab data vs Field data)داده‌های آزمایشگاهی(Lab data) در واقع به داده‌های جمع‌آوری شده در یک محیط کنترل شده، با دستگاه‌ها(موبایل و کامپیوتر‌ و....) و تنظیمات شبکه مشخص گفته می‌شود. در حالی که داده‌های میدانی(Field data) به داده‌هایی که از تجربه کاربر‌ها در هنگام استفاده از وب‌سایت ما جمع آوری شده گفته می‌شود که هرکدام از آن‌ها نقاط ضعف و قوتی دارند.داده‌های آزمایشگاهی یا Lab data در واقع محیطی برای رفع خطا‌ها است و با استفاده از آن شما می‌توانید براساس دستگاه(Device) و تنظیمات شبکه کاربرانتان در محیطی مشابه، سایت خود‌ را آزمایش کنید و همچنین این نکته را هم در نظر داشته باشید که حتی کاربرانی که از اینترنت 4G استفاده می‌کنند هم ممکن در موقعیت هایی مثل آسانسور و مکان هایی که آنتن دهی مناسبی وجود ندارد قرار بگیرند و در نتیجه سرعت و کارایی خوبی رو تجربه نکنند.داده‌های میدانی یا Field data هم که به آن "نظارت بر کاربر واقعی" یا Real User Monitoring)RUM) گفته می‌شود تجربیات واقعی کاربر در صفحات وب‌سایت شما رو ثبت می‌کند و می‌تواند برای کسب و کار شما بسیار مفید باشد.ابزار‌های اندازه‌گیریبرای Lab data شما می‌توانید از ابزاری به نام Lighthouse استفاده کنید که به سادگی با وارد کردن ‌URL وب‌سایت گزارش کاملی از کارایی سایت را در اختیار شما قرار میدهد. راه های مختلفی برای استفاده از این ابزار وجود داره مانند نصب extension آن بر روی مرورگرتون و یا از طریق Chrome DevTools(فشردن کلید F12 و مراجعه به بخش audits). ما در اینجا قصد نداریم این ابزار را آموزش بدهیم اما شما می‌توانید به راحتی با مراجعه به Lighthouse می‌توانید به راحتی کارکرد آن را یاد ‌بگیرید و اگر به دنبال نسخه فارسی برای یادگیری آن هستید میتوانید از Google Lighthouse راهنمای کامل از صفر تا ۱۰۰ استفاده کنید.نمونه گزارش ابزار Lighthouseبرای Field data یا داده‌های میدانی شما می‌توانید از ابزاری که گوگل معرفی کرده است به نام CrUX یا Chrome User Experience Report استفاده کنید که شاخص‌هایی را ارائه می‌دهد که نشان‌دهنده این است که چگونه کاربران Chrome در دنیای واقعی سایت‌های محبوب را در وب تجربه می‌کنند.در واقع Chrome User Experience Report یک پروژه عمومی در Google BigQuery(که یک data warehouse) است که برای دسترسی به آن شما تنها کافیست یک اکانت گوگل و یک پروژه Google Cloud داشته باشید که می‌توانید آن را از آموزش مرحله به مرحله Google BigQuery در سایت گوگل پیش ببرید که مراحل بسیار ساده‌ای دارد و برای استفاده از آن همانند مثال‌هایی که در لینک بالا آمده برای Query‌های خود باید از سینتکس SQL استفاده کنید که مثال‌هایی برای آن وجود دارد و همچنین میتوانید از Standard SQL Query Syntax با تعدادی از این دستورات آشنا شوید.در تصویر زیر محیط این ابزار را مشاهده می‌کنید:Google BigQueryدیگر ابزار‌های اندازه‌گیریابزار PageSpeed Insights هم داده‌های میدانی و هم داد‌های آزمایشگاهی صفحه‌ی وب شما را بررسی می‌کند. این ابزار از Lighthouse برای جمع‌آوری و ارزیابی داده‌های آزمایشگاهی صفحه استفاده می‌کند و برای داده‌های میدانی از CrUX یا Chrome User Experience Report که پیش تر بررسی کردیم استفاده می‌کند.ابزار Chrome Developer Tools نیز مجموعه‌ای از ابزار ها را در اختیار توسعه دهندگان قرار می‌دهد تا یک صفحه‌ی وب را در حال اجرا به طور کامل بررسی کنید و خطاهای پیش آمده را حل کنید.امیدوارم که بعد از خواندن این مطلب درک درستی از سرعت صفحات وب و روش‌های اندازه‌گیری آن پیدا کرده باشید. ممنون میشوم اگر نقصی در این مطلب مشاهده می‌کنید و اگر نظری دارید اون رو برای من در بخش کامنت‌ها بنویسید چون برای من خیلی با ارزش خواهد بود (; . مهراد دلداده مهراد دلداده Wed, 29 Apr 2020 14:33:15 +0430 https://virgool.io/@mehrad_dm/%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%B5%D9%81%D8%AD%D9%87-%D9%88%D8%A8-%D8%B1%D8%A7-render-%D9%85%DB%8C%DA%A9%D9%86%D8%AF%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-critical-rendering-path-tlob3bymspwv در این مطلب می‌خواهیم با هم ببینیم از لحظه‌ای که وارد یک سایت می‌شویم چه اتفاقاتی در مرورگر ما رخ میدهد و مراحل render شدن و همچنین Critical Rendering Path را بررسی کنیم. دانستن این مراحل برای توسعه‌ دهنده‌های وب میتواند خیلی مفید باشد و درک درستی به ما بدهد تا بتوانیم منابع خود را بهتر مدیریت کنیم و کارایی(Performance) صفحات وب خود را بهبود بدیم.بنابراین ما بر روی اینکه چه اتفاقاتی برای منابع ما(CSS, JS, HTML,...) در مرورگر رخ می‌دهد متمرکز ‌می‌شویم. اما نکاتی که لازم است در نظر داشته باشید:عملیات ارسال درخواست و دریافت فایل از سرور رو یک roundtrip می‌نامیم.برای مشاهده آنلاین مثال‌ها فیلتر شکن هاتون رو روشن کنید تا با صفحه‌ی403 روبرو نشوید ): .حالا بیایید با یک مثال ساده شروع کنیم. https://gist.github.com/MeHrAd-Deldadeh/7419a14c3617503c98bd4e68fff2439f#file-critical-path-no-style-html دیدن مثالبه قطعه کد بالا نگاه کنید ما تنها یک فایل HTML داریم که در آن یک پیام و یک عکس وجود دارد و هیچ فایل CSS و JS ای وجود ندارد. حالا اگر لینک بالا رو باز کنید با استفاده از developer tools می‌توانید در بخش network ببینید که ابتدا فایل HTML (که در اینجا فایل basic_dom_nostyle.html است) بارگذاری می‌شود و سپس فایل عکسی که ضمیمه آن شده. حالا به بخش waterfall نگاه کنید ناحیه‌ی سبز رنگ TTFB و یا Time To First Byte است که مدت زمانی رو که مرورگر ما منتظر میماند تا اولین Byte داده بهش برسد است و بخش آبی رنگ نیز Content Download یا مدت زمانی که صرف دانلود فایل شده است رو نشان میدهد.و آن خط آبی رنگ عمودی نیز نشان دهنده مدت زمانی است که طول کشیده تا فایل HTML بارگذاری و parse شود و درخت DOM یا همان Document Object Model ساخته شود که به‌ آن DOMContentLoaded گفته می‌شود گه در نوار پایین مدت زمان(446ms) آن مشخص شده است.اما نکته ای که باید به آن توجه کنیم این است که فایل عکس‌ما رویداد DOMContentLoaded را block نکرده و این نشان دهنده این است که ما می‌توانیم render tree رو بدون نیاز به بارگذاری چنین فایل هایی مثل تصاویر و… بسازیم اما بارگذاری عکس رویداد بارگذاری(load event) رو مسدود کرده است که این رویداد با یک خط عمودی قرمز رنگ نمایش داده می‌شود.اضافه کردن CSS و JavaScriptحالا بریم سراغ مثال بعدی که می‌خواهیم شرایطی رو بررسی کنیم که فایل های CSS و JS نیز رو هم در صفحه داریم. به مثال زیر توجه کنید. https://gist.github.com/MeHrAd-Deldadeh/23d617e9b4ef8d30db3154fc4d56e97c#file-critical-path-measure-script دیدن مثالقبل از اضافه کردن CSS:بدون وجود فایل‌های CSS و JS در صفحهبعد از اضافه کردن CSS و JS: با وجود فایل‌های CSS و JS در صفحههمانطور که در تصاویر بالا میبینید بعد از اضافه کردن فایل‌های CSS و JS در بخش waterfall دو request دیگر اضافه شد. نکته مهم‌ای که باید به آن توجه کنیم این است اگر دقت کنید میبینید که زمان فراخوانی رویداد domContentLoaded و رویداد load به هم نزدیکتر شده است.چه اتفاقی افتاد؟نکته اول اینکه برخلاف مثال اول در این بخش ابتدا فایل css ما fetch(واکشی) و parse(تجزیه) میشود و سپس CSSOM و یا همان CSS Object Model ساخته می‌شود، زیرا برای ساخت render tree به DOM و CCSOM نیاز است.نکته دوم اینکه ما یک فایل JS هم در صفحه داریم که آن یک parser blocking file است بنابراین رویداد domContentLoaded متوقف می‌شود تا فایل CSS دانلود و parse شود چونکه ممکن است فایل js به CSSOM نیاز داشته باشد.حالا اگر فایل جاوا اسکریپت external رو بصورت inline در فایل HTML قرار بدهیم چه اتفاقی می افتد؟ باز هم مرورگر قادر به اجرای آن ها نیست و باید ابتدا فایل CSS دانلود و parse شود تا CSSOM ساخته شود. بنابراین کدهای جاوا اسکریپت inline هم، همچنان parser blocking هستند.اما با این وجود بیایید ببینیم که inline کردن کدهای js باعث می‌شود که صفحه سریعتر بارگذاری شود یا خیر؟با فایل جاوا اسکریپت خارجی: external فایل جاوا اسکریپتبا کدهای جاوا اسکریپت به صورت inline: inline کدهای جاوا اسکریپتخب همانطور که میبینید در تصویر دوم ما بخاطر inline کردن فایل js یک درخواست کمتر به سرور داریم اما اگر به مدت زمان load آن ها نگاه کنید میبینید که تقریبا برابر هستند. اما چرا؟ اول اینکه ما می‌دانیم در هر شرایطی مرورگر نیاز دارد که ابتدا CSSOM را بسازد و سپس فایل های جاوا اسکریپت را بارگذاری کند و همچنین به این نکته توجه کنید که در مثال اول مرورگر فایل‌های CSS و JS را به طور موازی دانلود کرده و در واقع در این مثال خیلی تفاوتی احساس نمی‌کنیم اما راه‌های زیادی وجود دارد که بتوانیم سرعت load صفحه را بهتر کنیم.اول اینکه به یاد داشته باشید که جاوا اسکریپت های inline ما نیز parser blocking هستند اما برای فایل های جاوا اسکریپت external می‌توانیم با اضافه کردن پارامتر "async" به صورت زیر آن را به یک فایل تبدیل کنیم که فرایند parse رو متوقف نمی‌کند. https://gist.github.com/MeHrAd-Deldadeh/cc4cdba4ddf0d30bebb2266ee9d2637f#file-critical-path-measure-async-html دیدن مثالفایل جاوا اسکریپت خارجی(Parser-blocking):فایل جاوا اسکریپت خارجی(async):خب همانطور که میبینید خیلی بهتر شد ;) اگر دقت کنید بعد از بارگذاری فایل HTML رویداد domContentLoaded فراخوانی شده و مرورگر متوجه شده که نباید بخاطر فایل جاوا اسکریپت عملیات را متوقف کند و بنابراین بارگذاری فایل CSS و JS را به صورت موازی انجام میدهد.و همچنین میتوانیم CSS و JS رو به صورت inline قرار بدهیم. https://gist.github.com/MeHrAd-Deldadeh/f040fef599ba6eabbb177845dfe425dc#file-critical-path-measure-inlined-html دیدن مثالخب همانطور که میبینید تقریبا domContentLoaded با مثال قبل برابر است. در این روش هرچند حجم فایل HTML زیاد میشود اما دیگر نیازی به این نیست که مرورگر زمانی را صرف واکشی(fetch) فایل‌های CSS و JS بکند.با توجه به مثال هایی که تا به اینجا بررسی کردیم حتما متوجه شده اید که درک درست این فرآیند ها چقدر مهم خواهند بود اما حالا بریم سراغ الگوهای عملکرد تا درک بهتری در خصوص critical rendering path و روش‌های بهینه سازی آن داشته باشیم.الگو‌های عملکرد(Performance patterns)برمیگردیم به مثال اول‌ که داشتیم. ساده ترین حالت این است که صفحه ما یک فایل HTML دارد و هیچ فایل CSS و JS و منابع دیگه ای ندارد. برای render شدن همچین صفحه ای ابتدا مرورگر درخواستی را برای دریافت فایل HTML ارسال می‌کند و سپس منتظر میماند تا فایل برسد بعد از رسیدن آن را parse میکند و DOM را میسازد و در آخر آن را بر روی صفحه render میکند. https://gist.github.com/MeHrAd-Deldadeh/7419a14c3617503c98bd4e68fff2439f#file-critical-path-no-style-html دیدن مثالدر تصویر بالا در مدت زمان بین T0 تا T1 پردازش های شبکه و سرور انجام می‌شود. در بهترین حالت(اگر حجم فایل HTML کم باشد) ما فقط یک roundtrip در شبکه برای واکشی فایل‌ خواهیم داشت. با توجه به نحوه کارکرد پروتکل انتقال TCP فایل‌های بزرگتر ممکن است بیش از یک roundtrip داشته باشند. بنابراین در مثال بالا ما در بهترین حالت یک roundtrip در critical rendering path خواهیم داشت.حالا بیایید همین صفحه رو با وجود یک فایل CSS نیز بررسی کنیم: https://gist.github.com/MeHrAd-Deldadeh/aa031303abe83ac5cb5868b1211a0ef0#file-critical-path-has-style-html دیدن مثالدر این حالت همانطور که در تصویر میبینید ما ابتدا یک roundtrip در شبکه برای دریافت فایل HTML داریم و در هنگام ساخت DOM مرورگر متوجه میشود که به یک فایل CSS نیز احتیاج دارد بنابراین یک بار دیگر باید به سرور مراجعه کند و فایل CSS را نیز بگیرد(این خود یک roundtrip دیگر است) تا بتواند صفحه را نمایش دهد. بنابراین در اینجا ما حداقل دو roundtrip داریم که البته باز هم باید یادآوری کرد که به حجم فایل بستگی دارد و ما در اینجا فقط به حداقل آن اشاره میکنیم.پس باید دقت کنید که فایل‌های HTML و CSS ما critical resources هستند یعنی فایل‌هایی که ممکن است فرآیند render شدن صفحه را متوقف کنند تا بارگذاری شوند.حالا اگر یک فایل JS هم در صفحه داشته باشیم این فرآیند به چه شکل خواهد بود؟ https://gist.github.com/MeHrAd-Deldadeh/798533c0cc85a45d049805b83923b039#file-critical-path-css-js-html دیدن مثالدر این مثال همانطور که میبینید ما یک فایل app.js نیز اضافه کردیم که همانطور که گفتیم فایل های جاوا اسکریپت parser blocking هستند و برای اجرا(execute) شدن می‌بایست منتظر فایل ‌CSS و ساخت CSSOM باشیم. اما نکته دیگری که باید به آن توجه کنید این است که ما در این مثال ۳ فایل داریم اما تنها ۲ roundtrip داریم که در تصویر مشخص است فایل های CSS و JS به صورت موازی واکشی میشوند.در نظر داشته باشید که اگر نیازی به بلاک کردن صفحه برای فایل های JS خود ندارید همانطور که قبل از این توضیح داده شد میتوانید از پارامتر "async" برای فایل جاوا اسکریپت external خود استفاده کنید. https://gist.github.com/MeHrAd-Deldadeh/073bd471e2794b0fe82b39526d691d67#file-critical-path-css-js-async-html دیدن مثالمزیت‌های بارگذاری فایل JS به صورت غیر همزمان(asynchronous):فایل JS ما دیگر parser blocking نیست.چون دیگر فایل اسکریپت ضروری وجود ندارد فایل CSS نیازی به متوقف کردن رویداد domContentLoaded ندارد.در صورت فراخوانی سریعتر رویداد domContentLoad منطق(logic) برنامه نیز سریعتر اجرا میشود.در نتیجه صفحه‌ی ما در بهینه ترین حالت خواهد بود. و نکته‌ای که شاید نیاز باشد ذکر کنیم این است که ممکن است فایل CSS ما فقط برای یک سایز خاص و یا حالت خاص مثل حالت print نیاز باشد که می‌توانیم آن را به صورت زیر با افزودن media="print" از حالتی که فرایند render را متوقف می‌کند خارج کنیم. https://gist.github.com/MeHrAd-Deldadeh/0faaf861be97bd8cf40c971c9c27545e#file-critical-path-css-print-html دیدن مثالدر نتیجه همانطور که در تصویر میبینید بعد از ساخته شدن DOM صفحه render می‌شود و سپس CSSOM ساخته می‌شود و فایل های JS اجرا می‌شوند و ما فقط یک critical resources خواهیم داشت.این مطلب برداشت من(به صورت خلاصه و با ایجاد تغییراتی) از Analyzing Critical Rendering Path Performance بوده و امیدوارم که توانسته باشم مطلب رو به درستی انتقال بدهم و درک خوبی از مفهوم critical rendering path پیدا کرده باشید و بتوانید منابع خود رو به درستی مدیریت کنید و بهینه ترین صفحات وب رو داشته باشید. و همچنین ممنون میشم اگر نقصی در این مطلب میبینید اون رو برای من کامنت کنید تا در کامل‌ کردن این مطلب به من کمک کرده باشید. مهراد دلداده مهراد دلداده Tue, 07 Apr 2020 09:28:41 +0430