حذف دانلودهای غیر ضروری

Ilya Grigorik

سریعترین و بهینه ترین منبع، منبعی است که ارسال نشده است. شما باید منابع غیر ضروری را از برنامه خود حذف کنید. این یک تمرین خوب است که با تیم خود، مفروضات ضمنی و صریح را زیر سوال ببرید و به طور دوره ای مجدداً مرور کنید. در اینجا چند نمونه هستند:

• شما همیشه منبع X را در صفحات خود گنجانده اید، اما آیا هزینه دانلود و نمایش آن ارزشی را که به کاربر ارائه می دهد جبران می کند؟ آیا می توانید ارزش آن را اندازه گیری و اثبات کنید؟
• آیا منبع (به خصوص اگر منبع شخص ثالث باشد) عملکرد ثابتی را ارائه می دهد؟ آیا این منبع در مسیر بحرانی قرار دارد یا باید باشد؟ اگر منبع در مسیر بحرانی باشد، آیا ممکن است یک نقطه از شکست برای سایت باشد؟ یعنی اگر منبع در دسترس نباشد، روی عملکرد و تجربه کاربری صفحات شما تأثیر می گذارد؟
• آیا این منبع به SLA نیاز دارد یا دارد؟ آیا این منبع از بهترین شیوه‌های عملکرد پیروی می‌کند: فشرده‌سازی، حافظه پنهان و غیره؟

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

• سایت A تصمیم گرفته است تا یک چرخ فلک عکس را در صفحه اصلی خود نمایش دهد تا به بازدیدکننده اجازه دهد چند عکس را با یک کلیک سریع پیش نمایش کند. همه عکس ها هنگام بارگذاری صفحه بارگذاری می شوند و کاربر از طریق عکس ها پیشرفت می کند.
  • سوال: آیا اندازه گیری کرده اید که چند کاربر چند عکس را در چرخ فلک مشاهده می کنند؟ ممکن است با دانلود منابعی که اکثر بازدیدکنندگان هرگز آنها را مشاهده نمی کنند، هزینه های زیادی را متحمل شوید.
• سایت B تصمیم گرفته است که ویجت شخص ثالثی را برای نمایش محتوای مرتبط، بهبود تعامل اجتماعی یا ارائه خدمات دیگری نصب کند.
  • سوال: آیا ردیابی کرده اید که چه تعداد بازدیدکننده از ویجت یا کلیک روی محتوایی که ویجت ارائه می دهد استفاده می کنند؟ آیا تعاملی که این ویجت ایجاد می کند برای توجیه هزینه های بالای آن کافی است؟ بعلاوه، آیا برای شما امکان پذیر است که از استراتژی بارگیری استفاده کنید تا اطمینان حاصل کنید که اسکریپت تا زمانی که نیاز نباشد بارگیری نمی شود ؟

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

تأثیرات بر روی Core Web Vitals

ابتکار Core Web Vitals توسط Google معرفی شد تا مجموعه‌ای از معیارها را ارائه دهد که نشان‌دهنده آنچه کاربران در هنگام استفاده از وب تجربه می‌کنند، ارائه شود. در حالی که استراتژی‌های بهینه‌سازی زیادی برای Core Web Vitals وجود دارد، سوال در مورد بارگیری یک منبع خاص در یک صفحه ممکن است مسیری را برای بهبود این معیارها در وب‌سایت خود روشن کند. در زیر چند نمونه وجود دارد - گروه بندی شده بر اساس هر Core Web Vital - که ارزش توجه شما را دارد. اگرچه این فهرست کاملی از نمونه ها نیست (و تعداد زیادی وجود دارد!)، خواندن آنها ممکن است به شما فرصتی برای تفکر بدهد.

بزرگترین رنگ محتوایی (LCP)

بزرگ‌ترین رنگ محتوایی (LCP) زمانی را اندازه‌گیری می‌کند که بزرگترین محتوا (مثلاً یک تصویر قهرمان یا یک عنوان) بارگیری شود. این یک معیار ادراکی مهم در نظر گرفته می شود که به کاربر این تصور را می دهد که سایت به سرعت بارگذاری می شود.

به طور کلی، دانلود منابع کمتر به این معنی است که پهنای باندی که کاربر دارد به منابع کمتری اختصاص می یابد و ممکن است به بهبود LCP منجر شود. یک مثال کلاسیک بارگذاری تنبل است، که در آن تصاویر خارج از ویوپورت در حین بارگذاری صفحه دانلود نمی شوند تا زمانی که مرورگر تشخیص ندهد که کاربر احتمال بیشتری دارد آنها را ببیند. اگر یک گالری بندانگشتی از مثلاً 50 تصویر داشته باشید، بارگیری تنبل همه آنها به جز ده تصویر برتر به این معنی است که مرورگر می تواند از پهنای باند در دسترس خود استفاده موثرتری داشته باشد و اولین تصاویری که کاربر مشاهده می کند بیشتر بارگذاری می شود. به سرعت.

با این حال، لزوماً فقط بارگذاری تصاویر کمتر نیست. مرورگر دارای یک طرح اولویت بندی داخلی است که تعیین می کند هر منبع چه مقدار پهنای باند باید دریافت کند. با این حال، حتی با وجود این، همه منابع - به ویژه آنهایی که با اولویت بالا دانلود می شوند - این پتانسیل را دارند که منبع وابسته یک عنصر LCP بالقوه را از بین ببرند. این امر به ویژه در اتصالات شبکه کند صادق است. این منبع وابسته ممکن است یک فایل تصویری باشد که عنصر LCP صفحه را نشان می‌دهد، اما همچنین می‌تواند منبع فونت وب باشد که مرورگر برای ارائه یک گره متنی که ممکن است به عنوان عنصر LCP صفحه تعیین شود به آن نیاز دارد.

اگر وب سایت شما دارای متن سنگین است، ممکن است عنصر LCP صفحه یک گره متنی باشد. در حالی که بسیاری از استراتژی‌های بهینه‌سازی و بارگذاری فونت خوب وجود دارد، ممکن است ارزش این را داشته باشد که آیا فونت سیستم برای نیازهای وب‌سایت شما کافی است یا خیر، به طوری که عناصر LCP که گره‌های متنی هستند می‌توانند بدون وابستگی به منبع فونت وب بارگیری شوند و تقریباً بلافاصله به عنوان رنگ آمیزی شوند. CSS و HTML از سرور می آید.

تغییر چیدمان تجمعی (CLS)

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

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

تعامل با رنگ بعدی (INP)

Interaction to Next Paint (INP) میزان پاسخگویی به ورودی های کاربر را در طول عمر صفحه اندازه گیری می کند. INP یک صفحه می تواند تا حد زیادی تحت تأثیر جاوا اسکریپت بارگیری شده باشد، زیرا جاوا اسکریپت چیزی است که بیشتر تعاملی را که فرد در سراسر وب تجربه می کند هدایت می کند. به ویژه، مقدار منابع اسکریپت دانلود شده در حین بارگذاری صفحه می تواند کار بالقوه گران قیمتی را که در ارزیابی و تدوین اسکریپت وجود دارد، آغاز کند. هرچه جاوا اسکریپت کمتری را در حین راه اندازی بارگذاری کنید، مرورگر در آن نقطه بحرانی تجربه صفحه، جایی که کاربران در تلاش برای تعامل با آن هستند، کار کمتری انجام می دهد.

در حالی که استراتژی‌هایی برای کاهش حجم منابع جاوا اسکریپت دانلود شده در حین راه‌اندازی وجود دارد - مانند تقسیم کد و تکان دادن درخت - ارزش آن را دارد که بسته‌هایی را که در پروژه‌های خود استفاده می‌کنید بررسی کنید تا ببینید آیا اصلاً ضروری هستند یا خیر. به عنوان مثال، lodash روش‌های زیادی دارد که امروزه هنوز مفید هستند، اما با روش‌هایی ارسال می‌شود که مرورگر خارج از جعبه ارائه می‌کند، مانند توابع Array برای نگاشت ، کاهش ، و فیلتر کردن ، و بسیاری دیگر .

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

نتیجه

ممیزی وب سایت شما برای دانلودهای غیر ضروری ممکن است تنها یکی از جنبه های ارائه تجربیات سریع کاربر باشد، اما یکی از مواردی است که پتانسیل تأثیرگذاری بالایی دارد. برای جمع بندی:

• دارایی های خود و دارایی های شخص ثالث را در صفحات خود موجودی کنید.
• اندازه گیری عملکرد هر دارایی: ارزش و عملکرد فنی آن.
• تعیین کنید که آیا منابع دارای ارزش کافی هستند یا خیر.
• تأثیر دانلودهای غیرضروری بر Core Web Vitals و معیارهای پشتیبانی را درک کنید.

با بهینه‌سازی کارایی محتوا به این روش، نه تنها عملکرد کلی را بهبود می‌بخشید، بلکه مراقب هستید که پهنای باند کاربران را هدر ندهید، همچنین معیارهای کاربر محور را بهبود می‌بخشید و تجربه کاربری بهتری را ارائه می‌کنید.