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