آموزش *جدید* افزایش سرعت بارگیری صفحه وب 2021 - قسمت 6: پنل شبکه و آبشار (ابزارهای توسعه دهنده)
*NEW* Speed Up Webpage Loading 2021 - Part 6: Network Panel & Waterfall (DevTools)
به این کلاس اشتراک مهارت در پانل شبکه خوش آمدید
این بخش 6 از مجموعه اسرار کامل وب من است
چه چیزی را در این کلاس خاص پوشش می دهیم؟
ما تعداد زیادی از اطلاعات را در این مجموعه پوشش خواهیم داد، اما برای قسمت ششم در حال بررسی نحوه مشاهده و تجزیه و تحلیل منابع یک سایت هستیم (منظور از منابع، همه دارایی های دریافت شده از یک سرور است، از جمله فایل های html، فایل های css ، فایل ها و تصاویر js).
شناسایی و رفع تنگناهای عملکرد مسیر رندر حیاتی مستلزم دانش خوب از مشکلات رایج است.
و یک راه عالی برای دیدن مشکلات این است که بدانید چگونه از DevTools به نفع خود و به طور خاص از پنل شبکه استفاده کنید.
به همین دلیل است که من زمان زیادی را در این کلاس صرف آموزش پنل شبکه (که برای یافتن و حل مشکلات شبکه برای بهینه‌سازی وب‌سایت‌ها استفاده می‌شود) و نمودار آبشار (نمایشی بصری از نحوه همه چیز به ما می‌دهد) می‌گذارم. دارایی‌های وب‌سایت شما، از جمله CSS، جاوا اسکریپت، HTML، تصاویر، افزونه‌ها و محتوای شخص ثالث، بارگیری می‌شوند.
برای هر منبع، یک پشته زمانی وجود دارد که نشان می‌دهد هر بخش از فرآیند چقدر طول کشیده است . برای مثال، زمانی که یک منبع طول می‌کشد تا بارگیری شود به زمان صف، زمان توقف، زمان درخواست S ، TTFB و زمان بارگیری محتوا تقسیم می‌شود.
چیزهای زیادی برای پوشش دادن، درست است. اما با من همراه باشید زیرا قرار است خیلی خوش بگذرانیم.
بیایید وارد آن شویم.
کل این مجموعه چه چیزی را پوشش می دهد؟
چرا 1 ثانیه بسیار مهم است؟
یک ثانیه تأخیر در زمان بارگذاری صفحه به دست می‌آید:
- 10% بازدید صفحه کمتر
- رضایت کمتر مشتری
- ضرر در تبدیل
به‌جز تأثیرگذاری بر رتبه‌بندی خوب در Google، چند ثانیه اضافی تفاوت زیادی در توجه بیننده، علاقه، تبدیل‌ها و در نتیجه سود ایجاد می‌کند.
درک مسیر رندر بحرانی شما را قادر می سازد تا به یک برنامه نویس عالی تبدیل شوید. از طریق درک کنترل را در دست بگیرید. ارائه یک تجربه وب سریع نیاز به کار زیادی توسط مرورگر دارد. بیشتر این کار از دید توسعه‌دهندگان وب پنهان است: ما نشانه‌گذاری را می‌نویسیم و یک صفحه زیبا روی صفحه ظاهر می‌شود. اما دقیقاً چگونه مرورگر از مصرف HTML، CSS و جاوا اسکریپت ما به پیکسل های رندر شده روی صفحه می رود؟ با درک این موضوع، می‌توانید کد بهتری بنویسید تا ترافیک وب‌سایت خود را افزایش دهید، بدانید که چگونه رفتار و عملکرد را به‌طور دقیق اصلاح و تغییر دهید، نفوذ بازار و حاشیه‌های خود را بهبود بخشید. همچنین نسبت به سایر توسعه دهندگانی که به نظر می رسد فقط دکمه ها را فشار می دهند بدون درک کامل از اتفاقات، مزایایی کسب خواهید کرد.
در این دوره آموزشی با Critical Rendering Path آشنا خواهید شد. این به مجموعه مراحلی اشاره دارد که مرورگرها باید برای واکشی و سپس تبدیل HTML، CSS و جاوا اسکریپت به وب‌سایت‌های زنده و زنده انجام دهند. از آنجا، شما شروع به کاوش و آزمایش ابزارهایی برای اندازه گیری عملکرد خواهید کرد. استراتژی‌های ساده و در عین حال بسیار قدرتمندی را یاد خواهید گرفت تا اولین پیکسل‌ها را در اسرع وقت به صفحه نمایش دهید.
دانش CRP برای درک اینکه چگونه عملکرد یک سایت را می توان بهبود بخشید، بسیار مفید است. مراحل مختلفی برای CRP وجود دارد، مانند ساخت DOM، ساخت CSSOM، اجرای جاوا اسکریپت، ایجاد درخت رندر، تولید Layout و در نهایت رنگ آمیزی پیکسل ها روی صفحه. همانطور که می بینید، این سری Skillshare مجموعه کاملی از مطالب جالب را پوشش می دهد.
در پایان این سری Skillshare CRP، می‌توانید با به دست آوردن درک درستی از نحوه واکشی داده‌ها از یک سرور و سپس دریافت آن داده‌ها در سریع‌ترین زمان ممکن، CRP را «گفته» کنید. ما در هر سخنرانی عمیق‌تر می‌شویم و در مورد چیزهایی مانند HTTP، TCP، بسته‌های داده، منابع مسدودکننده رندر و کلی چیزهای دیگر یاد می‌گیریم! این دوره دارای سخنرانی‌های اضافی است که پایه دانش شما را گسترش می‌دهد و مهارت‌های شما را آزمایش می‌کند.
این دوره از طریق مثال‌های عملی به شما کمک می‌کند تا CRP را تکه تکه درک کنید. و ما از جدیدترین و بهترین ویژگی‌های جاوا اسکریپت و مرورگرها (مانند Fetch API) در طول مسیر استفاده می‌کنیم تا بتوانید پیشتاز باشید.
آیا این دوره برای شماست؟
کاملاً.
مهم نیست در مسیر توسعه وب خود کجا هستید. برای همه سطوح مناسب است.
هنوز مطمئن نیستید؟ اگر در هر یک از این دسته ها قرار دارید، این دوره برای شما مناسب است:
دانش آموز شماره 1: شما می خواهید در دنیای برنامه نویسی فعالیت کنید: یادگیری اصول HTTP، AJAX، بسته های داده و رندر به شما امکان می دهد این دانش را به هر زبانی گسترش دهید
دانش آموز شماره 2: شما می خواهید درک کاملی از عملکرد وب به دست آورید
دانشجوی شماره 3: می‌خواهید از فریم‌ورک‌های باطنی مانند Node.js استفاده کنید، که به شدت به داشتن دانش عمیق‌تر در مورد نحوه ایجاد درخواست‌های AJAX، دستکاری پاسخ و سپس تحویل آن به صفحه نمایش
دانش آموز شماره 4: شما می دانید مسیر رندر بحرانی چیست، اما اطلاعات کمی در مورد نحوه عملکرد آن در پشت صحنه، و نحوه پیاده سازی عملی آن در کد خود دارید
دانش‌آموز شماره 5: شما دوره‌های دیگری را در زمینه توسعه وب گذرانده‌اید، اما احساس نمی‌کنید که آن را درک کرده‌اید
منتظر چه چیزی هستید. اجازه دهید کرک را دریافت کنیم
شما یک قهرمان هستید! آفرین به این کلاس
قبل از تخصیص، اجازه دهید
را خلاصه کنیمشناسایی و رفع تنگناهای عملکرد مسیر رندر حیاتی نیازمند دانش خوب از مشکلات رایج است.
و یک راه عالی برای دیدن مشکلات این است که بدانید چگونه از DevTools به بهترین نحو استفاده کنید. به همین دلیل است که ما زمان زیادی را در این بخش صرف یادگیری در مورد پنل شبکه (که برای یافتن و حل مسائل شبکه برای بهینه سازی وب سایت ها استفاده می شود) و نمودار آبشار (نمایشی بصری از نحوه بارگیری تمام دارایی های وب سایت شما، از جمله شما به ما می دهد. CSS، جاوا اسکریپت، HTML، تصاویر، افزونه‌ها و محتوای شخص ثالث).
برای هر منبع، یک پشته زمانی وجود دارد که نشان می‌دهد هر قسمت از فرآیند چقدر طول کشیده است. به عنوان مثال، زمانی که یک منبع طول می کشد تا بارگذاری شود به زمان صف، زمان توقف، زمان ارسال درخواست، TTFB و زمان دانلود محتوا تقسیم می شود.
اکنون وقت آن است که یک قهوه بنوشید و وارد کار شوید. به یاد داشته باشید، هیچ فشاری برای درستی 100٪ این موارد وجود ندارد. آنها به نفع شما اینجا هستند.
تکلیف چیست؟
برای این تمرین پروژه:
- من یک پی دی اف پیوست کرده ام
- سوالات چند گزینه ای وجود دارد
- صادق باشید و سعی کنید قبل از رفتن به صفحه بعدی به هر سوال چند گزینه ای پاسخ دهید
- مهمتر از همه، لذت ببرید.
به زودی می بینمت،
کلاید
p.s. اگر از این کلاس لذت برده اید، لطفاً فراموش نکنید که یک بررسی عالی برای من بگذارید - بسیار کمک می کند.
درس ها Lessons
-
ستون زمان و آبشار Time column and the waterfall
-
مقدمه دوره Course intro
-
مراحل زمانی توضیح داده شد Time phases explained
-
پنل شبکه Network panel
-
بستن نظرات Closing Comments
-
زمان بارد - 3 چیز که باید مراقب آنها بود Time bards - 3 things to watch out for
-
زمان جدایی Breaking up time
-
هدرهای پاسخ و درخواست Response and request headers
-
CDN چیست؟ What is a CDN
-
آبشار - جزئیات بیشتر Waterfall - more detail
-
پنل شبکه - معرفی آبشار Network panel - waterfall intro
درس ها Lessons
-
مقدمه دوره Course intro
-
آبشار - جزئیات بیشتر Waterfall - more detail
-
CDN چیست؟ What is a CDN
-
پنل شبکه - معرفی آبشار Network panel - waterfall intro
-
پنل شبکه Network panel
-
بستن نظرات Closing Comments
-
زمان بارد - 3 چیز که باید مراقب آنها بود Time bards - 3 things to watch out for
-
مراحل زمانی توضیح داده شد Time phases explained
-
هدرهای پاسخ و درخواست Response and request headers
-
زمان جدایی Breaking up time
-
ستون زمان و آبشار Time column and the waterfall
https://donyad.com/d/a1e468
CM Code_Zone
نادرست | خنده دار است، زیرا حقیقت دارد
موفقیت قربانی می خواهد.
و فداکاری چیزی است که من در مورد آن بسیار می دانم.
من یک توسعه دهنده خودآموخته هستم، بنابراین می دانم که برای یک تازه وارد چقدر می تواند دشوار و دلهره آور باشد.
امروز، من همچنان به کدنویسی ادامه می‌دهم و از آخرین فناوری‌ها و زبان‌های برنامه‌نویسی مطلع می‌مانم.
وقت آن است که دانشی را که به دست آورده‌ام به اشتراک بگذارم و به موفقیت دیگران کمک کنم.
نمایش نظرات