First Input Delay معیار تجربه کاربر است که گوگل معرفی کرده و به زودی از آن به عنوان یک عامل رتبه بندی استفاده خواهد کرد. این مقاله برای درک بهتر موضوع می تواند نمای کلی FID را برای شما توضیح بدهد.
تأخیر اولین ورودی چیزی فراتر از تلاش برای جلب رضایت Google است. بهبود عملکرد سایت به طور کلی منجر به افزایش فروش و بازدهی تبلیغات می شود.
تعریف تاخیر اولین ورودی (First Input Delay)
FID اندازه گیری مدت زمانی است که مرورگر به اولین تعامل بازدید کننده سایت (در هنگام بارگیری سایت) پاسخ می دهد. آن را گاهی تأخیر اولین ورودی می نامند. تعامل می تواند کلیک کردن روی یک دکمه یا یک پیوند باشد. مناطق text input یا dropdown lists و یا checkbox ها انواع دیگری از نقاط تعامل هستند که FID اندازه گیری می کند.
پیمایش سایت یا بزرگنمایی به عنوان تعامل محسوب نمی شود زیرا از خود سایت هیچ پاسخی انتظار نمی رود. هدف First Input Delay اندازه گیری میزان پاسخگویی (responsive بودن) سایت در هنگام بارگیری است.
علت تأخیر اولین ورودی
تأخیر اولین ورودی معمولاً به دلیل تصاویر و اسکریپت هایی است که به صورت غیر منظم دانلود می شوند. این کد گذاری بی نظم باعث می شود بارگیری صفحه وب بیش از حد متوقف و سپس load شود. این امر باعث می شود سایت دیگر برای بازدید کنندگان responsive نباشد و تلاش آن ها برای تعامل با صفحه وب با شکست مواجه شود.
این مانند یک ترافیک است در جایی که علائم راهنمایی و رانندگی وجود ندارد که باعث تصادفات و کندی سرعت می شود. رفع آن مربوط به ایجاد نظم در ترافیک است. Google علت تأخیر ورودی را اینگونه توصیف می کند:
“به طور کلی تأخیر ورودی به این دلیل اتفاق می افتد که رشته اصلی مرورگر مشغول انجام کار دیگری است، بنابراین (فعلا) نمی تواند به کاربر پاسخ دهد. یکی از دلایل عمده این اتفاق می تواند این موضوع باشد که مرورگر مشغول تجزیه و اجرای یک فایل بزرگ JavaScript است که توسط برنامه شما بارگذاری شده است. در حالی که این کار را انجام می دهد، نمی تواند رویداد دیگری را اجرا کند زیرا اگر JavaScript بارگیری شد ممکن است به او بگوید کار دیگری انجام دهد. “
نحوه رفع تأخیر ورودی
دلیل اصلی First Input Delay، دانلود نامنظم اسکریپت ها و تصاویر است. راه حل رفع این مشکل این است که با تأمل و نظم، به نحوه ارائه آن اسکریپت ها و تصاویر برای دانلود شدن در مرورگر، نظم دهیم. حل مسئله FID معمولاً شامل استفاده از ویژگی های HTML برای کنترل نحوه دانلود اسکریپت ها، بهینه سازی تصاویر (HTML و تصاویر) و حذف متفکرانه اسکریپت های غیر ضروری است.
برای از بین بردن مکث ها و سرعت ضعیف دانلود صفحات نا منظم، هدف این است که چیز هایی که قرار است دانلود شوند را بهینه کنید.
چرا مرورگر ها از حالت responsive خارج می شوند؟
مرورگر ها نرم افزاری هستند که برای نشان دادن یک صفحه وب کارهایی را انجام می دهند. وظایف مرورگر ها شامل بارگیری کد، تصاویر، فونت ها، اطلاعات css و اسکریپت ها هستند و سپس اسکریپت ها را اجرا می کنند و صفحه وب را طبق دستورالعمل های HTML می سازند.
این فرآیند ارائه (rendering) نامیده می شود. کلمه render به معنی ساختن است و این همان کاری است که یک مرورگر با جمع آوری کد و تصاویر برای ارائه یک صفحه وب انجام می دهد. به هر کدام از کار هایی که برای ارائه سایت انجام می شوند، نخ یا thread می گویند. کلمه thread مخفف “thread of execution” است که به معنی صف اجراست (در این مورد، بسیاری از کار های منفرد که برای ارائه یک صفحه وب انجام می شود).
در یک مرورگر یک رشته (thread) وجود دارد که به آن رشته اصلی گفته می شود. رشته اصلی مسئول ایجاد (ارائه) صفحه وب است که بازدید کننده سایت آن را مشاهده می کند. رشته اصلی را می توان به بزرگراه تشبیه کرد که در آن اتومبیل ها که نمادی از تصاویر و اسکریپت هایی است که هنگام مراجعه و بازدید از وب سایت توسط شخص، دانلود و اجرا می شوند.
برخی از کد ها بزرگ و کند هستند. این امر باعث می شود که سایر کار ها متوقف شوند و منتظر بمانند تا این کد بزرگ و کند از بزرگراه خارج شود. هدف این است که صفحه وب را به این روش تنظیم کنید: کدی که در ابتدا باید اجرا شود حتما بهینه شده باشد تا هنگام اجرای کد مرورگر با صفحه منظمی مواجه شود تا آن را به سریع ترین حالت بارگیری کند.
روی کد هایی که قابل تغییر نیستند تمرکز نکنید.
هنگامی که صحبت از core web vitals و به ویژه First Input Delay می شود، کد هایی وجود دارند که کار های کمی برای آن ها می توان انجام داد. با این حال احتمالاً این مورد برای رقبای شما نیز وجود دارد. به عنوان مثال اگر تجارت شما به Google AdSense (یک اسکریپت بزرگ مسدود کننده render) بستگی دارد، این مشکل برای رقیب شما هم وجود خواهد داشت.
در بسیاری از موارد انجام بهترین کاری که قادر به انجام آن هستید، کافی است زیرا ممکن است رقبای شما نیز نتوانند عملکرد بهتری داشته باشند. بنابراین در این موارد بهتر است در جایی که می توانید تغییرات ایجاد کنید، تمرکز کنید نه در جایی که امکان ایجاد تغییر وجود ندارد.
تأثیر JavaScript بر تاخیر اولین ورودی
جاوا اسکریپت مانند موتور کوچکی است که اتفاقاتی را رقم می زند. وقتی نامی در فرم وارد می شود، یک جاوا اسکریپت برای اطمینان از وارد کردن نام و نام خانوادگی در آن فرم وجود دارد. با فشار دادن یک دکمه، یک جاوا اسکریپت وجود دارد تا به مرورگر بگوید یک پیام تشکر در یک پنجره باز کند.
مشکل جاوا اسکریپت این است که نه تنها باید بارگیری شود بلکه باید اجرا شود. بنابراین این دو موردی هستند که به تأخیر ورودی می افزایند. اگر یک فایل بزرگ JavaScript در بالای صفحه قرار داشته باشد، آن فایل بقیه صفحه را تا پایان بارگیری و اجرای آن اسکریپت مسدود می کند. این روند، مسدود کردن صفحه نامیده می شود.
راه حل واضح این است که این نوع اسکریپت ها را از بالای صفحه جابجا کرده و در انتهای صفحه قرار دهید تا با سایر عناصر صفحه که منتظر ارائه شدن هستند تداخل نداشته باشد.
اما اگر این فایل در انتهای یک صفحه وب طولانی قرار گیرد، این کار می تواند مشکل ساز باشد. دلیلش هم این است که به محض بارگیری آن صفحه طولانی و آماده شدن کاربر برای تعامل با آن، مرورگر همچنان سیگنال loading می دهد، زیرا اجرای فایل JavaScript هنوز در حال انجام است. صفحه ممکن است سریع تر بارگیری شود اما هنگام انتظار برای اجرای JavaScript متوقف می شود. برای این مسئله یک راه حل وجود دارد!
ویژگی های تأخیر و Async
ویژگی های Defer و Async در HTML مانند سیگنال های ترافیکی هستند که شروع و توقف نحوه بارگیری و اجرای JavaScript را کنترل می کنند. ویژگی HTML چیزی است که یک عنصر HTML را تغییر می دهد، مانند گسترش هدف یا رفتار یک عنصر. مثل این است که اگر مهارتی را یاد بگیرید این مهارت به ویژگی شما تبدیل می شود.
ویژگی های Defer و Async به مرورگر می گوید که هنگام بارگیری، روال تجزیه HTML را مسدود نکند. این ویژگی ها به مرورگر می گویند تا هنگام بارگیری JavaScript، رشته اصلی را ادامه دهد.
ویژگی Async
فایل های جاوا اسکریپت با ویژگی Async به محض بارگیری، دانلود و سپس اجرا می شوند. هنگامی که شروع به اجرا می کند، زمانی است که فایل JavaScript رشته اصلی را مسدود می کند. معمولا این فایل ها هنگام شروع دانلود، رشته اصلی را مسدود می کنند، اما فایل هایی که ویژگی async (یا defer) دارند اینگونه نیستند.
این دانلود ناهمگام نامیده می شود، دانلودی که به طور مستقل از رشته اصلی و به موازات آن انجام می شود. ویژگی async برای پرونده های جاوا اسکریپت شخص ثالث مانند تبلیغات و به اشتراک گذاری اجتماعی، فایل هایی که در آن ها ترتیب اجرا اهمیتی ندارد، مفید است.
ویژگی Defer (تاخیر)
فایل های جاوا اسکریپت با ویژگی “defer” نیز به صورت ناهمگام دانلود می شوند. اما فایل های جاوا اسکریپتی که این ویژگی را دارند، تا زمانی که کل صفحه بارگیری و ارائه نشده باشد، اجرا نمی شود. اسکریپت های به تعویق افتاده نیز به ترتیب قرارگیری در یک صفحه وب اجرا می شوند.
اسکریپت های دارای ویژگی defer برای فایل های جاوا اسکریپت که به عناصر دانلود شده در صفحه وب بستگی دارند و آن هایی که ترتیب اجرا برایشان مهم است، مفید هستند. به طور کلی از ویژگی defer برای اسکریپت هایی که برای ارائه خود صفحه ضروری نیستند، استفاده کنید.
تأخیر ورودی برای همه کاربران متفاوت است
مهم است که بدانید که نمره First Input Delay متغیر است. امتیازات از بازدید کننده به بازدید کننده دیگر متفاوت است. واریانس نمرات اجتناب ناپذیر است زیرا این امتیاز به تعاملات شخص بازدید کننده از یک سایت بستگی دارد.
برخی از بازدید کنندگان ممکن است حواسشان پرت شود و تا لحظه ای که همه عناصر بارگیری نشده و آماده اجرا نباشند، تعامل برقرار نکنند. Google اینگونه توصیف می کند:
همه کاربران قرار نیست هر بار که از سایت شما بازدید می کنند با آن ارتباط برقرار کنند و همه تعاملات هم با FID مرتبط نیستند. علاوه بر این برخی از اولین تعاملات کاربران در مواقع بد صورت می گیرد (زمانی که رشته اصلی برای مدت زمان طولانی مشغول است) و برخی از اولین تعاملات کاربران در زمان های خوب (زمانی که رشته اصلی کاملاً بیکار است) انجام می شود. این بدان معناست که برخی از کاربران هیچ مقدار FID ندارند، برخی از کاربران دارای مقادیر FID پایین هستند و برخی از کاربران احتمالاً مقادیر FID بالایی دارند.
چرا First Input Delay بیشتر سایت ها از کار می افتد؟
متأسفانه بسیاری از سیستم های مدیریت محتوا، قالب ها و افزونه ها برای مطابقت با این معیار نسبتاً جدید ساخته نشده اند. به همین دلیل است که بسیاری از ناشران از کشف اینکه سایت های آن ها از آزمون تأخیر اولین ورودی عبور نمی کنند، نا امید می شوند.
اما این چیزی است که در حال تغییر است همانطور که جامعه توسعه نرم افزار وب در پاسخ به تقاضا برای استاندارد های مختلف کد گذاری از جامعه انتشارات است. البته اینگونه نیست که توسعه دهندگان نرم افزارهایی که سیستم های مدیریت محتوا را تولید می کنند مقصر در تولید محصولاتی هستند که با این معیار ها اندازه گیری نمی شوند.
به عنوان مثال وردپرس نقصی را در ویرایشگر گوتنبرگ برطرف کرد که باعث شده امتیاز کمتری از حد ممکن داشته باشد. گوتنبرگ یک روش بصری برای ساخت سایت با استفاده از بلوک ها است، بلوک ابزارک، بلوک فرم تماس و بلوک پاورقی و … در آن وجود دارد.
بنابراین روند ایجاد یک صفحه وب بیشتر بصری است و از طریق بلوک های ساختاری انجام می شود. انواع مختلفی از بلوک ها وجود دارد که به طرق مختلف ظاهر می شوند و رفتار می کنند. هر بلوک منفرد دارای کد استایل مربوطه (CSS) است که بیشتر آن مختص آن بلوک منفرد است.
روش استاندارد کد گذاری این استایل ها ایجاد یک stylesheet که شامل استایل هایی است که مختص هر بلوک است. منطقی است که این کار را به این روش انجام دهید زیرا شما یک بخش مرکزی دارید که تمام کد های مخصوص بلوک ها در آن وجود دارد. نتیجه این است که در صفحه ای که ممکن است شامل بیست بلوک باشد، وردپرس استایل های مربوط به آن بلوک ها را به اضافه تمام بلوک های دیگری که استفاده نمی شوند بارگیری می کند.
گوتنبرگ 10.1 با عملکرد بهبود یافته
همانطور که گفتیم گوتنبرگ استایل بلوک هایی را که استفاده نمی شدند نیز بارگذاری می کرد. در ورژن جدید گوتنبرگ دیگر خبری از این اتفاق نیست. این یک پیروزی بزرگ برای وردپرس است، همچنین برای ناشرانی که به وردپرس اعتماد می کنند و البته کاربرانی که از سایت های وردپرسی بازدید می کنند.
منبع: searchenginejournal.com
دیدگاهی بنویسید