السرعة على نطاق واسع: ما هي الميزات الجديدة في أداء الويب؟

تعرَّف على ثلاث ميزات جديدة تم إطلاقها في مؤتمر I/O لعام 2019 لتحسين أداء الويب.

Addy Osmani
Katie Hempenius
Katie Hempenius
X

خلال جلسة "السرعة على نطاق واسع" في مؤتمر Google I/O لعام 2019، أعلنّا عن ثلاثة أمور نأمل أن تؤدي إلى تحسين أداء الويب خلال العام المقبل.

أداة Lighthouse تتيح الآن وضع ميزانية قائمة على الأداء

LightWallet هي ميزة جديدة في Lighthouse تتيح استخدام الميزانيات القائمة على الأداء. تضع الميزانيات القائمة على الأداء معايير لأداء موقعك الإلكتروني. والأهم من ذلك، تتيح لك تحديد حالات تراجع الأداء وإصلاحها قبل طرحها.

تقرير LightWallet يعرض مواد العرض التي تتجاوز الحد الأقصى لحجم الملفات

تتوفّر LightWallet في أحدث إصدار من Lighthouse CLI، ولا يستغرق إعدادها سوى بضع دقائق. توفّر هذه التعليمات مزيدًا من المعلومات.

ألست متأكدًا من الميزانيات التي يجب تحديدها؟ جرِّب أداة حساب ميزانية الأداء التجريبية التي يمكنها إنشاء إعدادات ميزانية متوافقة مع LightWallet.

إتاحة ميزة "التحميل الكسول" للصور وإطارات iframe على مستوى المتصفّح على الويب

غالبًا ما تحتوي صفحات الويب على عدد كبير من الصور، ما يساهم في زيادة استخدام البيانات وتضخّم الصفحات وبطء تحميلها. العديد من هذه الصور خارج الشاشة، مما يتطلب من المستخدم التمرير لعرضها.

حتى الآن، كان عليك حلّ مشكلة التحميل الكسول للصور باستخدام مكتبة JavaScript، ولكن قد يتغيّر ذلك قريبًا. سيطلق Chrome هذا الصيف ميزة إتاحة سمة التحميل التي توفّر ميزة التحميل الكسول الموحّد لـ <img> و<iframe> على الويب.

&quot;التحميل الكسول&quot; على مستوى المتصفّح يبرز المحتوى خارج الشاشة الذي يتم تحميله عند الطلب

تسمح السمة 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.

يتوفّر تقرير يتضمّن مزيدًا من التفاصيل حول ميزة &quot;التحميل الكسول&quot;.

تتيح خدمة 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 في الرموز التلقائية المضمّنة (كما هو موضّح أدناه). نأمل أن يشجّع ذلك المزيد من المطوّرين على تجربة هذه الإضافة الرائعة.

رمز تضمين Google Fonts مع سمة font-display المضمّنة في عنوان URL كمعلمة طلب بحث

شاهِدوا الفيديو لمزيد من المعلومات

تناولنا أيضًا العديد من دراسات الحالة الإنتاجية لاستخدام أنماط الأداء المتقدّمة لتحسين تجربة المستخدم. وشمل ذلك المواقع الإلكترونية التي تستخدم شبكات توصيل المحتوى (CDN) للصور وضغط Brotli وعرض JavaScript الذكي والجلب المُسبَق لتسريع صفحاتها. شاهِد المحاضرة لمزيد من المعلومات :)