اولین تأخیر ورودی – یک توضیح ساده

اولین تأخیر ورودی (FID) یک معیار تجربه کاربر است که گوگل از آن به عنوان یک عامل رتبه بندی کوچک استفاده می کند.

این مقاله مروری آسان بر FID ارائه می دهد تا به درک موضوع کمک کند.

اولین تأخیر ورودی بیشتر از تلاش برای جلب رضایت Google است. بهبود عملکرد سایت به طور کلی منجر به افزایش فروش ، درآمد تبلیغاتی و امتیازات می شود.

اولین تأخیر ورودی چیست؟

FID اندازه گیری زمانی است که طول می کشد تا مرورگر به بازدیدکنندگان سایت پاسخ دهد اولین تعامل در حالی که سایت در حال بارگیری است با سایت تماس بگیرید. گاهی به این حالت تأخیر ورودی می گویند.

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

پیمایش یا بزرگنمایی به عنوان تعامل محسوب نمی شود زیرا هیچ پاسخی از خود سایت انتظار نمی رود.

هدف FID سنجش میزان واکنش پذیری یک سایت در هنگام بارگیری آن است.

علت اولین تأخیر ورودی

اولین تأخیر ورودی عموماً ناشی از تصاویر و اسکریپت هایی است که به صورت غیر مرتب بارگیری می شوند.

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

این مانند یک ترافیک ایجاد شده توسط یک رایانه رایگان برای همه جایی است که هیچ علائم راهنمایی و رانندگی وجود ندارد. رفع آن به منظور ایجاد نظم در ترافیک است.

گوگل توضیح می دهد علت تأخیر ورودی مثل این:

“به طور کلی ، تأخیر ورودی (به عنوان تأخیر ورودی) به این دلیل اتفاق می افتد که موضوع اصلی مرورگر مشغول انجام کار دیگری است ، بنابراین نمی تواند (هنوز) به کاربر پاسخ دهد.

یکی از دلایل رایج این ممکن است این باشد که مرورگر مشغول تجزیه و اجرای یک فایل جاوا اسکریپت بزرگ است که توسط برنامه شما بارگیری شده است.

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

چگونه می توان تاخیر ورودی را برطرف کرد

از آنجا که علت اصلی تأخیر ورودی اول ، بارگیری نامنظم اسکریپت ها و تصاویر است ، راه حل مشکل این است که نظم و ترتیب را در مورد نحوه ارائه این اسکریپت ها و تصاویر به مرورگر برای بارگیری تنظیم کنید.

حل مشکل FID به طور کلی شامل استفاده از ویژگی های HTML برای کنترل نحوه بارگیری اسکریپت ها ، بهینه سازی تصاویر (HTML و تصاویر) و حذف سنجیده اسکریپت های غیر ضروری است.

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

چرا مرورگرها پاسخگو نیستند

مرورگرها نرم افزاری هستند که وظایف مربوط به نشان دادن یک صفحه وب را انجام می دهند. وظایف شامل بارگیری کد ، تصاویر ، فونت ها ، اطلاعات سبک و اسکریپت ها ، و سپس اجرای (اجرای) اسکریپت ها و ایجاد صفحه وب مطابق دستورالعمل های HTML است.

به این فرآیند رندرینگ می گویند. کلمه render به معنی “ساختن” است و این همان کاری است که یک مرورگر با جمع آوری کد و تصاویر برای ارائه یک صفحه وب انجام می دهد.

وظایف رندرینگ فردی را نخ هایی (Shorts) می گویند که مخفف عبارت “thread of operation” است. این به معنای توالی فردی از اقدامات است (در این مورد ، بسیاری از کارهای فردی که برای ارائه یک صفحه وب انجام می شود).

در مرورگر ، یک موضوع به نام موضوع اصلی وجود دارد و وظیفه ایجاد (ارائه) صفحه وب را که بازدیدکننده سایت می بیند ، بر عهده دارد.

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

برخی از کد ها بزرگ و کند هستند. این باعث می شود سایر وظایف متوقف شده و منتظر بمانند تا کد بزرگ و کند از بزرگراه خارج شود (بارگیری و اجرا را تمام کنید).

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

با استفاده از کد شخص ثالث خواب خود را از دست ندهید

وقتی صحبت از Core Web Vitals و به ویژه با First Inlay Delay به میان می آید ، متوجه می شوید که برخی از کدها روی شما وجود دارد که نمی توانید کار زیادی در مورد آنها انجام دهید. با این حال ، این امر به احتمال زیاد در مورد رقبای شما نیز صادق است.

به عنوان مثال ، اگر کسب و کار شما به Google AdSense وابسته است (یک اسکریپت بزرگ مسدود کننده رندر) ، مشکل برای رقیب شما یکسان خواهد بود. راه حل هایی مانند بارگذاری تنبل با استفاده از Google Ad Manager می تواند کمک کند.

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

در این موارد ، بهتر است بردهای خود را در جایی که می توانید آنها را پیدا کنید ، ببرید. در جاهایی که نمی توانید تغییری ایجاد کنید ، عرق نکنید.

تأثیر جاوا اسکریپت بر تأخیر ورودی اول

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

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

مشکل جاوا اسکریپت این است که نه تنها باید بارگیری کند بلکه باید اجرا شود (اجرا شود). بنابراین اینها دو مورد هستند که به تأخیر ورودی کمک می کنند.

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

به این می گویند مسدود کردن صفحه.

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

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

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

راه حلی برای آن وجود دارد!

Defer and Async Attributes

ویژگی های Defer و Async HTML مانند سیگنال های ترافیکی هستند که شروع و توقف نحوه بارگیری و اجرای جاوا اسکریپت را کنترل می کنند.

ویژگی HTML چیزی است که یک عنصر HTML را تغییر می دهد ، مانند گسترش هدف یا رفتار عنصر.

مانند زمانی است که شما یک مهارت را یاد می گیرید ؛ این مهارت به ویژگی شما تبدیل می شود.

در این حالت ، ویژگیهای Defer و Async به مرورگر می گویند که هنگام بارگیری تجزیه HTML را مسدود نکند. این ویژگی ها به مرورگر می گویند تا هنگام بارگیری جاوا اسکریپت موضوع اصلی را ادامه دهد.

ویژگی Async

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

به طور معمول ، هنگامی که فایل شروع به بارگیری می کند ، موضوع اصلی را مسدود می کند. اما نه با ویژگی async (یا defer).

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

ویژگی async برای فایلهای جاوا اسکریپت شخص ثالث مانند تبلیغات و اشتراک گذاری اجتماعی مفید است-فایلهایی که ترتیب اجرا مهم نیست.

تعویق ویژگی

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

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

اسکریپت هایی با ویژگی defer برای فایل های جاوا اسکریپت که بستگی به بارگذاری عناصر صفحه و زمان اجرای آنها دارد ، مفید هستند.

به طور کلی ، از ویژگی defer برای اسکریپت هایی استفاده کنید که برای ارائه خود صفحه ضروری نیستند.

تاخیر ورودی برای همه کاربران متفاوت است

مهم است که بدانید نمرات تاخیر ورودی اول متغیر و ناسازگار هستند. نمرات از بین بازدیدکنندگان به بازدیدکنندگان متفاوت است.

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

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

گوگل اینگونه توصیف می کند:

“همه کاربران هر بار که از سایت شما بازدید می کنند با آن ارتباط برقرار نمی کنند. و همه تعاملات مربوط به FID نیست … “

علاوه بر این ، اولین تعاملات برخی از کاربران در زمان های بد (هنگامی که موضوع اصلی برای مدت زمان طولانی مشغول است) خواهد بود و برخی از اولین تعاملات کاربران در زمان های خوب (زمانی که موضوع اصلی کاملاً بیکار است) خواهد بود.

این بدان معناست که برخی از کاربران هیچ مقدار FID نخواهند داشت ، برخی از کاربران دارای مقادیر FID پایین و برخی از کاربران احتمالاً دارای مقادیر FID بالا خواهند بود. “

چرا اکثر سایت ها FID شکست می خورند

متأسفانه ، بسیاری از سیستم های مدیریت محتوا ، تم ها و افزونه ها برای مطابقت با این معیار نسبتاً جدید ساخته نشده اند.

به همین دلیل است که بسیاری از ناشران از اینکه متوجه شوند سایت های آنها در آزمون تأخیر ورودی اول قبول نشده اند ، ناامید می شوند.

اما با تغییر جامعه توسعه نرم افزار وب به خواسته های استانداردهای مختلف برنامه نویسی از سوی جامعه انتشارات ، این وضعیت در حال تغییر است.

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

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

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

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

بلوک ها انواع مختلفی دارند که به شکل های مختلف به نظر می رسند و رفتار می کنند. هر بلوک جداگانه دارای یک کد سبک مربوطه (CSS) است ، که بیشتر آن مختص به آن بلوک فردی است.

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

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

قبل از Core Web Vitals (CWV) ، این روش استاندارد برای بسته بندی CSS در نظر گرفته شد.

از زمان معرفی Core Web Vitals ، این عمل کد نفخ محسوب می شود.

این به معنای اندکی علیه توسعه دهندگان وردپرس نیست. آنها کار فوق العاده ای انجام دادند.

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

ما با گذار به طراحی وب برای اولین بار در موبایل ، همین مورد را پشت سر گذاشتیم.

گوتنبرگ 10.1 بهبود عملکرد

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

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

زمان رفع اولین تأخیر ورودی اکنون است

با پیشروی ، می توان انتظار داشت که بیشتر و بیشتر توسعه دهندگان نرم افزار مسئول CMS ، تم ها و افزونه ها به شیوه های برنامه نویسی با تأخیر ورودی اول ورود پیدا کنند.

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

استناد

گزارش تجربه کاربر Chrome

بینش های PageSpeed

Chrome Dev Tools Lighthouse

کنسول جستجوی Google (گزارش Core Web Vitals)

بهینه سازی اولین تأخیر ورودی

اولین تأخیر ورودی

معیارهای عملکرد کاربر محور

اسکریپت GitHub برای اندازه گیری ویتامین های اصلی وب