با سه راه‌اندازی جدید عملکرد وب از I/O 2019 آشنا شوید.
در طول سخنرانی «سرعت در مقیاس» در Google I/O 2019، سه مورد را اعلام کردیم که امیدواریم عملکرد وب را در سال آینده بهبود بخشد.
اکنون Lighthouse از Performance Budgeting پشتیبانی می کند
LightWallet یک ویژگی جدید در Lighthouse است که پشتیبانی از بودجه عملکرد را اضافه می کند. بودجه عملکرد استانداردهایی را برای عملکرد سایت شما ایجاد می کند. مهمتر از آن، آنها شناسایی و رفع رگرسیون های عملکرد را قبل از ارسال آسان می کنند.
LightWallet در جدیدترین نسخه Lighthouse CLI موجود است و راه اندازی آن تنها چند دقیقه طول می کشد. این دستورالعمل ها اطلاعات بیشتری را ارائه می دهند.
مطمئن نیستید که بودجه شما چقدر باید باشد؟ ماشین حساب آزمایشی Performance Budget ما را امتحان کنید که می تواند یک پیکربندی بودجه سازگار با LightWallet ایجاد کند.
بارگذاری تنبلی تصویر در سطح مرورگر و iframe به وب می‌آید
صفحات وب اغلب حاوی تعداد زیادی تصویر هستند که به استفاده از داده ها، افزایش حجم صفحه و بارگذاری کندتر صفحه کمک می کند. بسیاری از این تصاویر خارج از صفحه نمایش هستند و برای مشاهده آنها نیاز به پیمایش کاربر دارند.
تا به حال، شما نیاز به حل تصاویر بارگذاری تنبل با استفاده از کتابخانه جاوا اسکریپت داشتید، اما ممکن است به زودی تغییر کند. تابستان امسال، کروم پشتیبانی از ویژگی بارگیری را راه‌اندازی می‌کند که بارگذاری تنبل استاندارد شده <img> و <iframe> را به وب می‌آورد.
ویژگی loading به مرورگر اجازه می‌دهد تا بارگیری تصاویر و آیفریم‌های خارج از صفحه را تا زمانی که کاربران در نزدیکی آنها حرکت کنند به تعویق بیاندازد. loading از سه مقدار پشتیبانی می کند:
-
lazy: کاندید خوبی برای بارگذاری تنبل است. -
eager: کاندیدای خوبی برای بارگذاری تنبل نیست. بلافاصله بارگیری کنید. -
auto: مرورگر تعیین می کند که آیا به صورت تنبل بارگیری شود یا خیر.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
اکتشافی دقیق برای "زمانی که کاربر نزدیک می شود" به مرورگر واگذار می شود. به طور کلی، امید ما این است که مرورگرها کمی قبل از وارد شدن به viewport شروع به واکشی تصاویر معوق و محتوای iframe کنند.
ویژگی loading پشت پرچم‌ها در Chrome Canary پیاده‌سازی می‌شود. می‌توانید با فعال بودن about://flags/#enable-lazy-image-loading و about://flags/#enable-lazy-frame-loading ، این نسخه نمایشی را در Chrome 75+ امتحان کنید.
نوشته ای در مورد ویژگی بارگذاری تنبل با جزئیات بیشتر در دسترس است.
فونت های گوگل اکنون از نمایش فونت به عنوان پارامتر پرس و جو پشتیبانی می کند
ما اعلام کردیم که پشتیبانی از font-display اکنون برای همه فونت‌های Google از طریق پارامتر نمایش query-string در دسترس است:
https://fonts.googleapis.com/css?family=Lobster&display=swap
توصیفگر font-display به شما این امکان را می‌دهد که تصمیم بگیرید که چگونه فونت‌های وب شما بسته به مدت زمانی که بارگذاری می‌شوند، رندر یا جایگزین شوند. از تعدادی مقادیر از جمله auto , block , swap , fallback و optional پشتیبانی می کند .
پیش از این، تنها راه برای تعیین font-display فونت‌های وب از فونت‌های گوگل، میزبانی خودکار آنها بود، اما این تغییر نیاز به انجام این کار را برطرف می‌کند.
اسناد Google Fonts برای گنجاندن font-display در کدهای پیش‌فرض تعبیه‌شده به‌روزرسانی شده است (همانطور که در زیر به نظر می‌رسد). ما امیدواریم که این توسعه دهندگان بیشتری را تشویق کند تا این افزودنی هیجان انگیز را امتحان کنند.
در اینجا نسخه آزمایشی Glitch از استفاده از نمایشگر با خانواده فونت های متعدد است. آن را با شبیه‌سازی شبکه DevTools امتحان کنید تا تأثیر font-display: swap .
بیشتر تماشا کنید
صحبت ما همچنین چندین مطالعه موردی تولید را در مورد استفاده از الگوهای عملکرد پیشرفته برای بهبود تجربه کاربر پوشش داد. اینها شامل سایت هایی بود که از CDN های تصویر، فشرده سازی Brotli ، سرویس دهی هوشمند جاوا اسکریپت و واکشی اولیه برای افزایش سرعت صفحات خود استفاده می کردند. گفتگو را تماشا کنید تا بیشتر بدانید :)