100 في PageSpeed مع WebGL حي، والبوابة الصغيرة وراء ذلك

يعرض موقع استوديونا أغلفة ألعاب حية مرسومة بـ WebGL، ومع ذلك يحصل على 100 في الفئات الأربع لـ PageSpeed Insights، على الهاتف وعلى الحاسوب. أحد التغييرات التي أوصلتنا إلى ذلك أصبح الآن حزمة صغيرة جدًا مفتوحة المصدر: webgl-gate.

Lighthouse يختبر الهاتف على المعالج

يقيس PageSpeed Insights صفحات الهاتف باستخدام SwiftShader، وهو مُرسِم يرسم WebGL بالمعالج بدلًا من بطاقة الرسوميات. وتفعل الشيء نفسه آلات افتراضية كثيرة وأسطح مكتب بعيدة ومتصفحات أُوقف فيها تسريع العتاد. هناك لا يكون مشهد WebGL بطيئًا فحسب: فمجرد تنزيل شيفرته وتحليلها يستهلك وقت الخيط الرئيسي، ويظهر ذلك في Total Blocking Time.

بدأ موقعنا بعد إعادة التصميم بـ 78 على الهاتف، وكانت أكبر صورة تظهر بعد 4.2 ثانية.

ما الذي غيّرناه

• أدرجنا CSS الحرج داخل HTML، فلا شيء يعطّل الرسم الأول.
• WebGL فقط حيث ترسم الصفحةَ بطاقةُ رسوميات حقيقية؛ وفي غير ذلك تعرض الصفحة صورة ثابتة ولا تنزّل PixiJS أصلًا.
• أغلفة AVIF متجاوبة: تحصل الهواتف على صور بعرض 720 بكسل، أخف بنحو ثلاث مرات.
• تنتظر لقطات الألعاب حتى يكتمل تحميل الغلاف الرئيسي.

ارتفعت نتيجة الهاتف إلى 100: أكبر صورة خلال 1.7 ثانية، وTotal Blocking Time صفر ميلي ثانية، ولا إزاحة في التخطيط. وعلى الحاسوب 100 أيضًا، مع أكبر صورة خلال 0.4 ثانية.

كيف تقرر البوابة

تنشئ البوابة سياق WebGL مؤقتًا، وتقرأ اسم المُصيِّر، وتبحث فيه عن SwiftShader وllvmpipe وsoftpipe وBasic Render. خيار failIfMajorPerformanceCaveat وحده لا يكفي: في اختباراتنا ظل Chrome دون واجهة على SwiftShader يمنح سياقًا رغم تفعيله.

الرقم الذي فاجأنا

على بطاقة رسوميات حقيقية يستغرق الفحص من 10 إلى 24 ميلي ثانية. وعلى SwiftShader استغرق إنشاء ذلك السياق الأول من 1.4 إلى 1.7 ثانية من الخيط الرئيسي. الفحص مكلف تحديدًا حيث يكون الجواب لا. لذلك تنتظر webgl-gate اكتمال تحميل الصفحة وفراغ المتصفح قبل أن تسأل، ولا تقف أبدًا في المسار الحرج.

كيف تستخدمها

ثبّتها عبر npm وحمّل مشهدك فقط على بطاقة رسوميات حقيقية. على المعالج لا يُستدعى الاستيراد أبدًا، فلا تُنزَّل الحزمة أصلًا.

npm i webgl-gate

import { loadIfFastWebGL } from 'webgl-gate';

const scene = await loadIfFastWebGL(() => import('./scene'));
if (scene) scene.mount(canvas);

هناك أيضًا خطّاف React هو useFastWebGL، ووصفات جاهزة لـ Next.js وthree.js وReact Three Fiber وVue وSvelte وMapLibre. حجم النواة أقل من 1 كيلوبايت.

ما الذي لا تفعله

تجيب عن سؤال واحد: بطاقة رسوميات أم لا. وإن احتجت إلى معرفة قوة البطاقة، فإن detect-gpu من pmndrs يصنّف البطاقات وفق نتائج اختبارات الأداء. ولا يُحفَظ الحكم بعد بين الزيارات: فالإجابة المحفوظة قد تبقى بعد تغيّر العتاد الذي تصفه.

الحزمة على npm→الشيفرة على GitHub→