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