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

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

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

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

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

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

هدف FID اندازه گیری میزان پاسخگویی سایت در هنگام بارگیری است.

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

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

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

Google علت تأخیر ورودی را اینگونه توصیف می کند:

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

تبلیغات

ادامه مطلب را در زیر بخوانید

نحوه رفع تأخیر ورودی

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

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

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

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

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

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

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

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

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

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

به عنوان مثال ، اگر تجارت شما به Google AdSense (یک اسکریپت مسدودکننده ارائه بزرگ) بستگی دارد ، مشکل برای رقیب شما نیز همین خواهد بود.

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

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

تأثیر JavaScript بر تأخیر ورودی اول

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

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

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

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

ویژگی های تأخیر و Async

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

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

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

در این حالت ، ویژگی های Defer and Async نحوه رفتار یک فایل JavaScript را تغییر می دهد.

یکی از تغییرات مهم این است که آنها به مرورگر می گویند برای JavaScript مکث نکنید. این ویژگی ها به مرورگر می گویند که موضوع اصلی را ادامه دهد.

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

ویژگی Async

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

تبلیغات

ادامه مطلب را در زیر بخوانید

به طور معمول پرونده هنگام شروع بارگیری موضوع اصلی را مسدود می کند. اما نه با ویژگی async.

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

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

ویژگی را موکول کنید

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

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

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

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

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

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

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

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

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

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

چرا اکثر سایت ها از FID باز می مانند

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

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

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

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

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

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

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

پس از معرفی Core Web Vital این عمل به منزله نفوذ کد در نظر گرفته می شود.

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

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

ما با انتقال به طراحی وب همراه اول از همان کار گذشتیم.

تبلیغات

ادامه مطلب را در زیر بخوانید

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

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

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

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

من معتقدم که هر چه بیشتر توسعه دهندگان نرم افزار مسئول CMS ، مضامین و افزونه ها به جلو حرکت می کنند ، به برنامه های کدگذاری با تأخیر در ورودی اول وارد می شوند.

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

استناد

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

بینش PageSpeed

فانوس دریایی Chrome Dev Tools

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

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

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

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

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

سئو PBN | خبر های جدید سئو و هک و سرور