عملکرد بار اولیه برای توسعه دهندگان React: غواصی عمیق تحقیق

This point in time is what we know as First Paint (FP). It’s the very first time the user has an opportunity to see something on the screen. Whether it will happen or not depends on the HTML the server sent. If there is something meaningful there, like a text or an image, then this point will also be when the First Contentful Paint (FCP) happened. If the HTML is just an empty div, then the FCP will happen later.

First Contentful Paint (FCP) is one of the most important performance metrics since it measures perceived initial load. Basically, it is the user’s first impression of how fast your website is.

Until this moment, the users are just biting their nails while staring at the blank screen. According to Google, a good FCP number is below 1.8 seconds. After that, the users will start losing interest in what your website can offer and might start leaving.

However, FCP is not perfect. If the website starts its load with a spinner or some loading screen, the FCP metric will represent that. But it’s highly unlikely that the user navigated to the website just to check out the fancy loading screen. Most of the time, they want to access the content.

For this, the browser needs to finish the work it started. It waits for the rest of the non-blocking JavaScript, executes it, applies changes that originated from it to the DOM on the screen, downloads images, and otherwise polishes the user experience.

Somewhere during this process is when the Largest Contentful Paint (LCP) time happens. Instead of the very first element, like FCP, it represents the main content area on the page – the largest text, image, or video visible in the viewport. According to Google, this number ideally should be below 2.5 seconds. More than that, and the users will think the website is slow.

همه این معیارها بخشی از وب سایت های Google هستند – مجموعه ای از معیارهایی که نشان دهنده تجربه کاربر در یک صفحه است. LCP یکی از این سه است ویتای اصلی وب – سه معیار که بخش های مختلف تجربه کاربر را نشان می دهد. LCP مسئول عملکرد بارگیریبشر

این معیارها را می توان با استفاده از لایت هاوس اندازه گیری کرد. Lighthouse یک ابزار عملکرد Google است که در Chrome Devtools یکپارچه شده است و همچنین می تواند از طریق اسکریپت پوسته ، رابط وب یا ماژول گره اجرا شود. شما می توانید از آن به صورت ماژول گره استفاده کنید تا آن را در داخل ساخت خود اجرا کنید و رگرسیون را قبل از تولید آنها تشخیص دهید. از نسخه یکپارچه DevTools برای اشکال زدایی و آزمایش محلی استفاده کنید. و نسخه وب برای بررسی عملکرد رقبا.

همه موارد فوق توضیحی بسیار مختصر و ساده در مورد روند است. اما این در حال حاضر مخفف و تئوری زیادی برای چرخش سر شخص است. برای من شخصاً ، خواندن چیزی شبیه به این فایده ای ندارد. من فوراً همه چیز را فراموش می کنم مگر اینکه بتوانم آن را در عمل ببینم و با دست خودم با آن بازی کنم.

برای این موضوع خاص ، من ساده ترین راه برای درک کامل مفاهیم ، شبیه سازی سناریوهای مختلف در یک صفحه نیمه واقعی و دیدن چگونگی تغییر نتیجه هستند. بنابراین بیایید قبل از انجام تئوری حتی بیشتر این کار را انجام دهیم (و چیزهای بیشتری وجود دارد!).

راه اندازی پروژه

در صورت تمایل می توانید تمام شبیه سازی های زیر را در پروژه خود انجام دهید – نتایج باید کم و بیش یکسان باشد. برای یک محیط کنترل شده تر و ساده تر ، با این حال ، توصیه می کنم از یک پروژه مطالعه ای که برای این مقاله آماده کرده ام استفاده کنید. می توانید به اینجا دسترسی پیدا کنید: https://github.com/developerway/initial-load-performance

با نصب همه وابستگی ها شروع کنید:

npm install

ساخت پروژه:

npm run build

و شروع سرور:

npm run start

شما باید یک صفحه داشبورد خوب را در “http: // localhost: 3000” مشاهده کنید.

کاوش در مورد devtools لازم

وب سایتی را که می خواهید در Chrome تجزیه و تحلیل کنید باز کنید و Devtools Chrome را باز کنید. پانل های “عملکرد” ​​و “فانوس دریایی” را در آنجا پیدا کنید و آنها را به هم نزدیک کنید. ما به هر دوی آنها احتیاج خواهیم داشت.

همچنین ، قبل از انجام هر کار دیگری در این مقاله ، حتماً کادر انتخاب “Disable Cache” را فعال کرده اید. این باید در صفحه شبکه در بالا باشد.

این به گونه ای است که ما می توانیم بازدید کنندگان بار اول را تقلید کنیم – افرادی که قبلاً در وب سایت ما نبوده اند و هنوز هیچ منابعی را که توسط مرورگر ذخیره نشده اند ، ندارند.

کاوش در صفحه فانوس دریایی

اکنون صفحه فانوس دریایی را باز کنید. شما باید چند تنظیمات را در آنجا مشاهده کنید و دکمه “تجزیه و تحلیل صفحه بار” را مشاهده کنید.

حالت “ناوبری” روشی است که ما برای این بخش به آن علاقه مندیم – تجزیه و تحلیل مفصلی از بار اولیه صفحه را اجرا می کند. این گزارش نمرات مانند این را به شما می دهد:

عملکرد محلی عالی است ، جای تعجب ندارد – همه چیز همیشه “روی دستگاه من کار می کند”.

معیارهایی مانند این نیز وجود خواهد داشت:

مقادیر FCP و LCP که برای این مقاله به آن نیاز داریم درست در بالا است.

در زیر ، لیستی از پیشنهادات را مشاهده خواهید کرد که می تواند به شما در بهبود نمرات خود کمک کند.

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

با این حال ، Lighthouse فقط اطلاعات سطح سطح را به شما می دهد و به شما امکان نمی دهد سناریوهای مختلف مانند یک شبکه آهسته یا CPU کم را شبیه سازی کنید. این فقط یک نقطه ورود عالی و ابزاری عالی برای ردیابی تغییرات عملکرد در طول زمان است. برای حفر عمیق تر به آنچه اتفاق می افتد ، ما به “عملکرد” پانل.

کاوش در صفحه عملکرد

هنگامی که برای اولین بار بارگیری شد ، پانل عملکرد باید چیزی شبیه به این باشد:

این سه معیارهای اصلی وب ویتامان را نشان می دهد که یکی از آنها LCP ما است ، به شما امکان شبیه سازی شبکه آهسته و CPU و امکان ضبط جزئیات عملکرد در طول زمان را می دهد.

کادر انتخاب “تصاویر” را در بالای صفحه پیدا کرده و بررسی کنید ، سپس بر روی دکمه “ضبط و بارگیری مجدد” کلیک کنید و وقتی وب سایت خود را بارگیری مجدد می کند – ضبط را متوقف کنید. این گزارش دقیق شما در مورد آنچه در صفحه در طول بار اولیه اتفاق می افتد خواهد بود.

این گزارش چند بخش خواهد داشت.

در بالاترین سطح ژنرال “جدول زمانی نمای کلی “ بخش

شما می توانید در اینجا ببینید که اتفاقی در وب سایت رخ می دهد ، اما خیلی بیشتر نیست. هنگامی که روی آن شناور می شوید – تصویر آنچه اتفاق می افتد ظاهر می شود و شما قادر خواهید بود تا به یک محدوده خاص انتخاب و بزرگنمایی کنید تا ظاهری دقیق تر داشته باشید.

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

اگر در حال کار بر روی پروژه مطالعه هستید ، دقیقاً همان تصویر را مشاهده خواهید کرد ، و این تصویر مطابق با آنچه در بخش قبلی از آن عبور کرده ایم مطابقت دارد:

• در ابتدا ، بلوک آبی وجود دارد – درخواستی برای دریافت HTML برای وب سایت
• پس از اتمام بارگیری ، پس از کمی مکث (برای تجزیه HTML) ، دو درخواست برای منابع بیشتر بیرون می روند.
• یکی از آنها (زرد) برای JavaScript است – مسدود کردن.
• یکی دیگر (بنفش) برای CSS است ، و این یکی مسدود شده است.

اگر کد پروژه مطالعه خود را اکنون باز کرده و به داخل نگاه کنید dist پوشه ، کد منبع با این رفتار مطابقت دارد:

• وجود خواهد داشت index.html پرونده .css وت .js پرونده های داخل assets پوشه
• در داخل index.html پرونده در section, there will be a برچسب آن را به پرونده CSS نشان دهید. همانطور که می دانیم ، منابع CSS در مسدود کننده هستند ، به طوری که بررسی می شود.
• همچنین ، داخل وجود دارد