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

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

Katie Hempenius
Katie Hempenius

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

تتيح أداة Lighthouse الآن ميزة "الميزانية المستندة إلى الأداء".

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

تقرير LightWallet يعرض مواد العرض التي تتجاوز ميزانية حجم الملف

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

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

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

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

حتى الآن، كان عليك حلّ مشكلة تحميل الصور بشكل بطيء باستخدام مكتبة JavaScript، ولكن قد يتغيّر ذلك قريبًا. هذا الصيف، سيتيح Chrome استخدام سمة loading التي توفّر تحميلًا بطيئًا موحّدًا للعناصر <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>

تُترك الأساليب الاستقرائية الدقيقة لـ "عندما ينتقل المستخدم بالقرب من" للقم browser. بشكل عام، نأمل أن تبدأ المتصفّحات في جلب الصور المُؤجّلة ومحتوى iframe قبل قليل من ظهوره في إطار العرض.

يتم تنفيذ السمة loading من خلال ميزة الإصدارات التجريبية في Chrome Canary. يمكنك تجربة هذه النسخة التجريبية في Chrome 75 والإصدارات الأحدث مع تفعيل العلامتَينabout://flags/#enable-lazy-image-loading و about://flags/#enable-lazy-frame-loading.

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

تتيح "خطوط Google" الآن استخدام مَعلمة font-display كمَعلمة طلب بحث.

لقد أعلنّا أنّ font-display أصبح متاحًا الآن في الإصدار العلني لجميع خطوط Google من خلال مَعلمة سلسلة طلب العرض:

https://fonts.googleapis.com/css?family=Lobster&display=swap

يتيح لك العنصر الوصفي font-display تحديد كيفية عرض خطوط الويب أو الرجوع إليها، استنادًا إلى الوقت الذي يستغرقه تحميلها. وهي تتيح عددًا من القيم، بما في ذلك auto وblock وswap وfallback وoptional.

في السابق، كانت الطريقة الوحيدة لتحديد font-display لخطوط الويب من Google Fonts هي استضافتها ذاتيًا، ولكن هذا التغيير يزيل الحاجة إلى ذلك.

تم تعديل مستندات Google Fonts لتضمين font-display في عمليات تضمين الرموز البرمجية التلقائية (كما هو موضّح أدناه). نأمل أن يؤدي ذلك إلى تشجيع المزيد من المطوّرين على تجربة هذه الميزة المشوّقة.

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

في ما يلي عرض توضيحي على Glitch لاستخدام display مع مجموعات خطوط متعددة. جرِّب هذه الميزة باستخدام محاكي الشبكة في DevTools لمعرفة تأثير font-display: swap.

مشاهدة المزيد

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