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