FID یکی دیگر از معیارهای اندازه گیری در Core Web Vitals می باشد که اولین تعامل و پاسخگویی یک صفحه وب با کاربر را اندازه گیری می کند. FID، بازه زمانی را که یک کاربر برای اولین بار با یک صفحه وب تعامل برقرار می کند تا زمانی که یک مرورگر قادر به پاسخگویی به دستورات کاربر باشد را اندازه گیری می کند. برای اندازه گیری میزان تاخیر در پاسخگویی به دستورات کاربر، به یک تعامل واقعی کاربر نیاز است. برای کسب اطلاعات بیشتر در مورد سه معیار اندازه گیری عملکرد یک صفحه می توانید مطلب LCP و FID و CLS در Web Vitals را مطالعه کنید.

دلیل اصلی یک FID ضعیف، اجرای جاوااسکریپت سنگین می باشد. بهینه سازی نحوه پردازش (Parsing)، کامپایل و اجرای جاوااسکریپت، در کاهش FID، تاثیر مستقیمی دارد.

اجرای جاوااسکریپت های سنگین

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

• تفکیک نمودن task های طولانی
• بهینه سازی صفحه وب برای interaction readiness
• استفاده از Web Workers
• کاهش زمان اجرای جاوااسکریپت

کاهش میزان جاوااسکریپتی که بر روی یک سینگل پیج لود می شود، از طریق شکستن آن به task های کوچیکتر و غیر همزمان، تاثیر بسزایی در کاهش FID خواهد داشت.

شکستن Long Task ها

Long Task ها، بازه های زمانی اجرای جاوااسکریپت می باشند که ممکن است منجر به غیر پاسخگو بودن یک صفحه از دید کاربر شود. هر قطعه کدی که thread اصلی را به مدت 50 میلی ثانیه یا بیشتر بلاک کند، یک task طولانی محسوب می شود. Long Task ها، نشانه لود و اجرای جاوااسکریپت بیش از نیاز یک کاربر در آن صفحه می باشند. بنابراین قطعه بندی جاوااسکریپت ها می تواند در کاهش delay input موثر باشد.

بهینه سازی صفحه وب برای interaction readiness

دلایل زیادی برای ضعیف بودن امتیاز FID در وب اپ ها وجود دارند که به جاوااسکریپت ها بستگی دارند:

تاثیر اجرای اسکریپت های First-party در تاخیر interaction readiness

اجرای اسکریپت های First-party (اسکریپت های اصلی که با فشردن F12 کیبورد می توانیم آنها را در DevTools مشاهده کنیم) می تواند باعث تاخیر interaction readiness شود.
سایز زیاد جاوااسکریپت و دفعات زیاد اجرای فایل های سنگین جاوااسکریپت می تواند زمان پاسخگویی یک صفحه وب به دستورات (تعاملات) کاربر را کاهش داده و بر روی امتیازات FID، Total Blocking Time (TBT) و Time To Interactive (TTI) تاثیر بگذارد. اجرای تصاعدی کدها می تواند باعث بهبود interaction readiness گردد.

در تصویر زیر، امتیازات TBT، قبل و بعد از اپتیمایز کردن لود اسکریپت های First-party برای یک اپلیکیشن آمده است. همانطور که مشاهده می کنید، با انتقال لود اسکریپت های غیر ضروری به مسیرهای غیر بحرانی، کاربران قادر هستند تا با صفحه، خیلی زودتر تعامل پیدا کنند.

تاثیر اجرای اسکریپت های Third-party در افزایش interaction latency

عواملی چون تگ های Third-party و آنالیتکیس که باعث مشغول شدن شبکه و thread اصلی می گردند، نیز می توانند بر روی زمان تاخیر تعاملات کاربر تاثیر بگذارند.

در برخی از موارد، اسکریپت های Third-party به علت اولویت اجرا و پهنای باند مصرفی در thread اصلی، مانع از اجرای اسکریپت های First-party می شوند و همچنین باعث تاخیر در سرعت پاسخگویی به تعامل (interaction) می گردند. بنابراین سعی کنید تا لود اسکریپت ها را به خوبی اولویت بندی کنید تا میزان تاخیر در پاسخگویی به کاربران را به حداقل برسانید.

استفاده از Web Worker

یکی از دلایل اصلی Input delay، مسدود بودن thread اصلی است. استفاده از Web workers این امکان را به وجود می آورد تا جاوااسکریپت ها در یک thread فرعی یا ثانویه اجرا شوند و اینگونه با انتقال عملیات های غیر مرتبط به UI به یک thread جداگانه، مدت زمان مشغول و مسدود بودن thread اصلی کاهش می یابد و بر روی امتیاز FID تاثیر قابل توجهی خواهد داشت.

کاهش زمان اجرای جاوااسکریپت

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

برای کاهش مقدار جاوااسکریپت در یک صفحه می توان جاوااسکریپت هایی که در Above-the-fold صفحه کاربرد ندارند را Defer نمود.

Defer (به تعویق انداختن اجرا) جاوااسکریپت های بدون استفاده

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

Defer کردن هرگونه جاوااسکریپت غیر ضروری از جمله اسکریپت های Third-party با استفاده از defer یا استفاده از async برای جلوگیری از بلاک شدن رندر‎

<script defer src="…"></script>
<script async src="…"></script>

‎همانگونه در ویدیوی زیر مشاهده می کنید، در صورت استفاده از async در تگ <script>، اسکریپت های موجود در صفحه، کاملا مستقل هستند و رندر صفحه برای async scripts ها به تعویق نمی افتد. اسکریپت های که با defer در تگ <script> قرار می گیرند، رندر صفحه را بلاک نمی کنند و هر زمان که DOM آماده بود، اجرا می شوند اما این اتفاق پیش از DOMContentLoaded می افتد.‎‎

با فشردن کلید F12 در گوگل کروم به محیط DevTools بروید، سپس با فشردن کلیدهای Ctrl+Shift+P در ویندوز و Command+Shift+P در مک، باکس run command را باز کنید و پس از آن با سرچ Coverage می توانید این گزینه را به کنسول DevTools اضافه نمایید.

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

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

تب Coverage در DevTools گوگل کروم، جاوااسکریپت هایی را که در صفحه استفاده نمی شوند، به شما نشان خواهد داد.

جمع بندی

FID یکی از معیارهای Core Web Vitals می باشد که مدت زمان اولین تعامل کاربر با یک صفحه وب و پاسخگویی صفحه به درخواست وی را اندازه گیری می کند. هرچه این مدت زمان کوتاهتر باشد، سرعت پاسخگویی به درخواست کاربر، بیشتر بوده و در نتیجه امتیاز FID، بهتر خواد بود. عدم اجرای جاوااسکریپت های غیر ضروری در یک صفحه و دسته بندی باندل جاوااسکریپت به قطعات کوچکتر، تا حد زیادی در امتیاز FID تاثیرگذار هستند.

The post چگونه FID را اپتیمایز کنیم؟ appeared first on وب یوز.

شبیه ساز موبایل گوگل کروم

جهت استفاده از شبیه ساز موبایل مرورگر کروم، ابتدا با فشردن دکمه F12 در گوگل کروم، وارد محیط DevTools شوید و سپس با انتخاب آیکون موبایل و یا فشردن Ctrl+Shift+M در محیط ویندوز و Cmd+Shift+M در سیستم عامل مکینتاش، شبیه ساز موبایل کروم باز خواهد شد و می توان صفحه وب مورد نظر را در ابعاد یک گوشی موبایل، تبلت (با قابلیت انتخاب مدل گوشی و همچنین امکان نوشتن سایز مورد نظر در حالت Responsive) مشاهده نمود.
جهت آموزش دیباگ کردن صفحه با مرورگر گوگل کروم، به صفحه “آموزش شبیه ساز موبایل Google Chrome” مراجعه کنید.

مراحل دیباگ صفحه وب با استفاده از گوشی موبایل

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

مرحله 1: فعال کردن Developer options در دستگاه اندروید

Developer options در اندروید نسخه 4.1 به قبل به طور پیش فرض فعال است و از اندروید 4.2 به بعد، باید آن را به صورت دستی فعال کرد.

نکته: این آموزش بر اساس گوشی Nokia 7.1 با سیستم عامل اندروید تهیه شده است. احتمال دارد که گزینه Build number در مکان دیگری از تنظیمات گوشی وجود داشته باشد. برخی از دستگاه های اندرویدی مانند سامسونگ، ممکن است تنظیمات بیشتری نیاز داشته باشند.

برای انجام این کار ابتدا وارد قسمت About (درباره دستگاه) در تنظیمات گوشی اندروید شده و 7 مرتبه روی Build number (شماره ساخت) ضربه بزنید. سپس پیغامی مبنی بر You are now a developer! به شما نمایش داده خواهد شد.

فعال سازی Developer options در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > About Phone > Build Number

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

System > About Phone > Build Number

سیستم عامل اندروید 7.1 و پایین تر:

Settings > About Phone > Build Number

مرحله 2: فعال کردن USB debugging در دستگاه اندروید

وارد منوی System در تنظیمات اندروید شوید و در Developer options گزینه USB debugging را فعال کنید.

فعال سازی USB debugging در نسخه های مختلف اندروید

سیستم عامل اندروید 9 و بالاتر:

Settings > System > Advanced > Developer Options > USB debugging

سیستم عامل اندروید 8.0.0 و اندروید 8.1.0:

Settings > System > Developer Options > USB debugging

سیستم عامل اندروید 7.1 و پایین تر:

Settings > Developer Options > USB debugging

مرحله 3: صفحه Devices را در گوگل کروم باز کنید.

در مرورگر گوگل کروم به آدرس chrome://inspect/#devices بروید.

نکته: در قبل از گوگل کروم نسخه 80، برای دسترسی به صفحه devices باید از طریق DevTools اقدام می شد ولی از کروم نسخه 80 دسترسی به صفحه مذکور فقط از طریق آدرس chrome://inspect/#devices امکان پذیر است.

مرحله 4: اطمینان از فعال بودن Discover USB devices در صفحه Devices

در صفحه Devices، از فعال بودن گزینه Discover USB devices اطمینان حاصل کنید.

مرحله 5: اتصال گوشی به کامپیوتر

گوشی را با استفاده از کابل USB به کامپیوتر متصل نمایید. سپس پیغام “Allow USB debugging” بر روی گوشی نمایش داده می شود که باید آن را Accept کنید.

در صورت اتصال صحیح، پارت نامبر گوشی و ورژن گوگل کروم در حال استفاده در گوشی موبایل در صفحه Devices گوگل کروم نمایش داده خواهد شد.

نکته: در قسمت تنظیمات صفحه نمایش در موبایل و کامپیوتر، هر دو دستگاه را در وضعیتی قرار دهید که به حالت sleep نروند.

مرحله 6: باز کردن صفحه وب بر روی گوشی موبایل (دستگاه اندرویدی)

صفحه وب مورد نظر را بر روی مرورگر کروم گوشی باز کنید. سپس در صفحه Devices نام همان صفحه به شما نمایش داده خواهد شد.

مرحله 7: باز کردن URL بر روی موبایل توسط DevTools

در DevTools، قسمت New tab یک URL وارد کنید و بر روی Open، کلیک نمایید. سپس مشاهده می کنید که همان URL در گوشی شما بر روی یک تب جدید باز می شود.

مرحله 8: باز کردن DevTools مرورگر کروم موبایل توسط مرورگر گوگل کروم کامپیوتر

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

به قسمت Elements در DevTools جدیدی که باز شده است، بروید. با hover بر روی یکی از المان های صفحه، آن قسمت در گوشی شما هایلایت می شود. با ضربه زدن بر روی یک المان صفحه در گوشی، می توانید آن بخش را در Elements انتخاب کنید. بر روی Select element در DevTools کلیک کرده و پس از آن بر المنت در گوشی اندرویدی خود ضربه بزنید. توجه داشته باشید که پس از هر مرتبه انتخاب، Select element غیرفعال شده و برای استفاده مجدد از آن، باید بر روی Select element کلیک نمایید.

با کلیک بر روی Toggle screencast می توانید محتوای صفحه گوشی خود را بر روی کامپیوتر مشاهده نمایید.

نکته: شما می توانید به امکاناتی مانند reload، focus و close a tab نیز دسترسی داشته باشید.

پرسش های متداول در مورد دیباگ صفحه با گوشی موبایل

1- آیا در صورت موفقیت آمیز بودن تست صفحه در شبیه ساز موبایل گوگل کروم، باز هم نیاز به ریموت دیباگینگ با گوشی اندروید است؟

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

2- آیا امکان ریموت دیباگینگ با کروم برای گوشی یا تبلت اپل و سیستم عامل iOS وجود دارد؟

خیر. در حال حاضر امکان remote debugging با گوگل کروم فقط برای گوشی و تبلت اندرویدی وجود دارد. البته شما می توانید با استفاده از مرورگر Safari و سیستم عامل MAC این کار را انجام دهید.

3- اگر در هنگام اتصال گوشی به کامپیوتر، پیام Allow USB Debugging مشاهده نشد، چه کاری انجام دهیم؟

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

4- گوشی را به کامپیوتر متصل کردم، ولی ویندوز آن را نشناخت. چه کاری باید انجام دهم؟

در صورتیکه کامپیوترتان گوشی شما را نشناخت، درایور گوشی اندرویدی خود را به صورت جداگانه و دستی نصب کنید.

5- آیا می شود جهت اتصال گوشی به کامپیوتر از هاب USB استفاده کرد؟

خیر. به جای استفاده از هاب USB، سعی کنید دستگاه خود را مستقیما به کامپیوتر متصل نمایید.

The post دیباگ صفحه وب توسط گوشی موبایل با مرورگر گوگل کروم appeared first on وب یوز.