چه چیزی با Aurora جدید است؟، چه چیزی با Aurora جدید است؟

کارا اریکسون
Kara Erickson
X

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

با توجه به اینکه از سال 2021 نقشه راه منتشر نکرده ایم، می خواهیم آنچه را که انجام داده ایم و پروژه های هیجان انگیزی را که برای سال 2023 آماده کرده ایم به اشتراک بگذاریم.

نکات برجسته پروژه اخیر

در چند سال گذشته، ما با چارچوب‌هایی مانند Next.js، Angular و Nuxt برای بهینه‌سازی Core Web Vitals همکاری کرده‌ایم. در اینجا برخی از نکات برجسته از آخرین به روز رسانی ما آمده است.

تصاویر

تصاویر اغلب منبع مشکلات عملکرد هستند. در زیر برخی از روش‌هایی است که ما با ذینفعان چارچوب دنبال می‌کنیم تا اطمینان حاصل کنیم که بهترین روش‌ها در دسترس هستند، به طوری که توسعه‌دهندگان هنگام استفاده از چارچوب‌هایی که با آنها شریک هستیم، تصاویر را به‌طور پیش‌فرض ارائه می‌دهند.

دستورالعمل تصویر زاویه ای

ما یک دستورالعمل تصویر پایدار برای فریم ورک Angular منتشر کردیم که در Angular 15 موجود است و به‌طور ویژه به نسخه‌های 13.4 و 14.3 بکپورت شده است. این دستورالعمل بارگذاری تنبل بومی را به طور پیش‌فرض فعال می‌کند، نکات fetchpriority به تصاویر اولویت‌دار اضافه می‌کند و به طور خودکار ویژگی‌های srcset مناسب را برای تصاویر واکنش‌گرا تولید می‌کند.

تأثیر : آزمایش آزمایشگاه فانوس دریایی قبل و بعد از استفاده از دستورالعمل تصویر بر روی محیط QA Land's End انجام شد. در رایانه رومیزی، میانگین بزرگترین رنگ محتوایی (LCP) آنها از 12.0 به 3.0 کاهش یافت که 75 درصد بهبود در LCP داشت.

مقایسه فیلم استریپ: وب سایت یک با برچسب های تصویر بومی در مقابل وب سایت دو با دستورالعمل تصویر انگولار.

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

تغییر next/image

ما همچنین با تیم Next.js کار کردیم تا مؤلفه تصویر را به‌روزرسانی کنیم تا از ویژگی‌های جدید مرورگر مانند بارگیری تنبل بومی و ویژگی HTML fetchpriority استفاده کنیم. نسخه جدید به طور پیش فرض از Next 13 در دسترس است.

تأثیر : شریک ما Leboncoin توانست LCP برخی از صفحات را با تغییر به نسخه جدید next/image تا 60 درصد بهبود بخشد.

فونت های وب

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

ابزار برای جایگزینی فونت بهبود یافته در Next.js، Nuxt و Vite

ما یک ویژگی را در Next 13 ارسال کردیم که ابعاد فونت بازگشتی صفحه را تنظیم می کند تا با فونت وب در هنگام بارگیری بهتر تراز شود. این باعث کاهش CLS مربوط به فونت می شود. ما متدولوژی خود را با تیم Nuxt به اشتراک گذاشتیم، و این الهام بخش ماژول nuxtjs/fontaine و افزونه fontaine Vite شد که هر دو از الگوریتم اصلی یکسانی استفاده می‌کنند.

تأثیر : شریک ما Vox Media با استفاده از این ویژگی توانست CLS در The Verge را در تولید برخی از صفحات به 0 کاهش دهد.

در پست‌های وبلاگ ما درباره ایجاد نسخه‌های جایگزین فونت بهبودیافته و ابزارهای چارچوب جایگزین فونت بیشتر بخوانید.

ماژول nuxtjs/google-fonts

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

اسکریپت های شخص ثالث

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

جزء next/script برای اسکریپت های شخص ثالث

ما یک مؤلفه اسکریپت برای Next 12+ ساخته‌ایم که به‌طور پیش‌فرض اسکریپت‌ها را پس از هیدراتاسیون بارگیری می‌کند تا از مسدود شدن مسیر بحرانی در حین بارگذاری جلوگیری کند. همچنین دارای یک حالت وب کارگر است که Partytown را ادغام می کند تا اسکریپت ها را به طور کامل از موضوع اصلی خارج کند.

تأثیر : در آزمایش‌های آزمایشگاهی Lighthouse، CareerKarma با استفاده از next/script component با فعال کردن حالت کارگر شاهد کاهش 24 درصدی LCP بود.

مقایسه نوار فیلم نشان دهنده بهبود در LCP

در پست وبلاگ ما، بهینه سازی بارگیری اسکریپت شخص ثالث در Next.js بیشتر بخوانید.

متفرقه

مشارکت ما با توسعه دهندگان چارچوب به بهبود Core Web Vitals ختم نمی شود. ما همچنین در حال تلاش برای استفاده بیشتر از موارد جدید هستیم و شروع استفاده از ویژگی‌های پلتفرم وب پیشرفته را برای توسعه‌دهندگان آسان‌تر می‌کنیم.

جستجوی کانتینر polyfill

ما جستجوهای کانتینر polyfill را برای پشتیبانی از مجموعه وسیع‌تری از ویژگی‌های CSS به‌روزرسانی کردیم و عملکرد آن را بهبود بخشیدیم و برای انتشار نسخه 1.0 آن تلاش کردیم.

در پست وبلاگ ما، Inside the Container Query Polyfill بیشتر بخوانید.

آینده شفق قطبی چیست؟

در سال‌های 2023-2024، ما تعدادی پروژه هیجان‌انگیز داریم که برای بهینه‌سازی Core Web Vitals برای توسعه‌دهندگان فریم‌ورک در حال انجام است.

در سال آینده، ما بر روی موارد زیر تمرکز خواهیم کرد:

  • مؤلفه‌های Wrapper شخص ثالث برای Next.js و Nuxt : مؤلفه‌های Wrapper می‌توانند بارگیری کتابخانه‌های محبوب 3P را به روشی بهینه برای LCP و INP تسهیل کنند. برای بارگذاری 3P به جای تگ اسکریپت، یک تگ کامپوننت را در DOM بیندازید و فریم ورک بهترین استراتژی بارگذاری را انتخاب خواهد کرد. برای جزئیات بیشتر به RFC مراجعه کنید.

  • تجربه توسعه دهنده Angular SSR و هیدراتاسیون : ما از نزدیک با تیم Angular در پروژه SSR و هیدراتاسیون کار کرده ایم. تمرکز ما بر ارتقای تجربه توسعه‌دهندگان از استفاده از SSR بوده است و به برنامه‌های بیشتری اجازه می‌دهد از مزایای LCP استفاده کنند. منتظر یک RFC رسمی در مورد ویژگی های دستکاری SSR DOM باشید.

  • راهنمای تصویر زاویه‌ای و ویژگی‌های nuxt/image : ما تعدادی ویژگی هیجان‌انگیز برای Angular برنامه‌ریزی کرده‌ایم، مانند تولید اشاره پیش‌اتصال خودکار، ابزارهای مهاجرت برای کمک به انتقال از عناصر اصلی <img> ، پشتیبانی از عنصر <picture> و مکان‌نماها. ما همچنین با تیم Nuxt در مورد تعدادی ویژگی جدید برای nuxt/image مشورت خواهیم کرد.

  • تحقیقات INP (مقطع متقابل) : از آنجایی که Interaction to Next Paint (INP) در سال 2024 جایگزین اولین تاخیر ورودی (FID) خواهد شد، ما در حال افزایش پشتیبانی برای بهبود INP در چارچوب ها هستیم. این شامل تجزیه و تحلیل علل ریشه ای برای مسائل INP در چارچوب ها و ایجاد راه حل های داخلی برای کاربران فریمورک در صورت امکان است.

  • سرعت سنج 3 : ما همچنین به پیاده سازی نسل بعدی ابزار سنجش سرعت سنج برای نمایش چشم انداز چارچوب وب مدرن 2023 کمک می کنیم.

به روز باشید

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