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