تعرَّف على تفاصيل ثلاث عمليات إطلاق جديدة حول أداء الويب من مؤتمر I/O لعام 2019.
خلال محاضرة"السرعة على نطاق واسع" في مؤتمر Google I/O لعام 2019، أعلنّا عن ثلاثة إجراءات نأمل أن تؤدي إلى تحسين أداء الويب في العام المقبل.
تتوافق أداة Lighthouse الآن مع ميزة "ميزانيات الأداء"
LightWallet هي ميزة جديدة في Lighthouse تتيح استخدام ميزانيات الأداء. تحدّد ميزانيات الأداء معايير لأداء موقعك الإلكتروني والأهم من ذلك، أنها تجعل من السهل تحديد انحدارات الأداء وإصلاحها قبل الشحن.
تتوفّر Light Wallet في أحدث إصدار من Lighthouse CLI، وتستغرق عملية الإعداد هذه بضع دقائق فقط. تقدّم هذه التعليمات المزيد من المعلومات.
ألست متأكدًا من الميزانية المطلوبة؟ جرِّب الآلة الحاسبة لميزانية الأداء التجريبية التي يمكنها إنشاء إعدادات ميزانية متوافقة مع Light Wallet.
إتاحة تحميل الصور على مستوى المتصفّح والتحميل الكسول لإطار iframe على الويب
تحتوي صفحات الويب غالبًا على عدد كبير من الصور، ما يؤدي إلى زيادة معدّل استخدام البيانات وفتح الصفحة وتحميل الصفحات بشكل أبطأ. تظهر العديد من هذه الصور خارج الشاشة، ما يتطلب من المستخدم الانتقال إليها لعرضها.
إلى الآن، كان عليك حلّ مشكلة التحميل الكسول للصور باستخدام مكتبة JavaScript، إلا أنّ ذلك قد يتغيّر قريبًا. خلال فصل الصيف هذا، سيصبح Chrome متوافقًا مع السمة loading التي توفر إمكانية التحميل الكسول للسمة <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. يمكنك تجربة هذا العرض التوضيحي في الإصدار 75 من Chrome والإصدارات الأحدث
مع تفعيل علامتَي about://flags/#enable-lazy-image-loading وabout://flags/#enable-lazy-frame-loading.
تتوفّر معلومات إضافية حول ميزة "التحميل الكسول" بمزيد من التفاصيل.
تتيح خدمة Google Fonts الآن عرض الخطوط كمَعلمة طلب بحث.
لقد أعلنّا أنّ ميزة عرض الخطوط أصبحت الآن متاحة في مرحلة الإنتاج لجميع 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 حول استخدام
شاشة عرض مع مجموعات خطوط متعددة. ننصحك بتجربتها من خلال محاكاة شبكة "أدوات مطوري البرامج"
لمعرفة تأثير font-display: swap.
المشاهدة لعرض المزيد
تناولت حديثنا أيضًا العديد من دراسات الحالة الإنتاجية حول استخدام أنماط الأداء المتقدمة لتحسين تجربة المستخدم. وتشمل هذه المواقع الإلكترونية التي تستفيد من شبكات توصيل المحتوى (CDN) للصور وضغط Butli وعرض JavaScript الذكي والجلب المسبق لزيادة سرعة الصفحات. مشاهدة الحديث لمعرفة المزيد :)