فلسفة PE: ابدؤوا بـ HTML

التحسين التدريجي (PE) هو أسلوب بناء تجربة قابلة للاستخدام باستخدام HTML وحده، ثم إضافة CSS للتنسيق وJavaScript للتفاعل. تحسّن كل طبقة الطبقة السابقة، ولا تُعد أي طبقة منها ضرورية لعمل الصفحة.

HTML هو الطبقة الأكثر قدرة على الصمود. فهو يُحلَّل جزئيًا حتى عند وجود أخطاء في بنيته، ويتجاهل الوسوم التي لا يفهمها، ويعمل من دون البرامج النصية أو أوراق الأنماط. في المقابل، يؤدي غياب ملف CSS إلى تدهور المظهر، وقد تترك حزمة JavaScript المعطلة الصفحة غير قابلة للاستخدام.

المحتوى (HTML)، والعرض (CSS)، والسلوك (JS). زر الإرسال هو عنصر حقيقي من النوع <button type="submit"> — ويُرسل النموذج حتى عند فشل JS. يجعل CSS مظهره أجمل، وقد يعترض JS عملية الإرسال لتنفيذ AJAX، لكن HTML الأساسي يضمن تنفيذ الإجراء.

قد تنقطع الشبكات، أو تفشل البرامج النصية في التحميل، أو يعطّل المستخدمون JS، أو تنتهي مهلة الاتصالات البطيئة قبل وصول الحزم. تتدهور صفحة PE بسلاسة في كل حالة من هذه الحالات: يظل بإمكان المستخدم القراءة والتنقل والإرسال باستخدام HTML وحده.

تحصل الصفحات التي تعرض HTML قابلًا للاستخدام قبل تحميل البرامج النصية على قيمة أسرع في أول رسم للمحتوى، ووقت أقل حتى التفاعل، ودرجات أفضل في مؤشرات الويب الأساسية. يعرض المتصفح محتوى ذا معنى من دون انتظار بدء تشغيل JS.

تأتي عناصر HTML الحقيقية مزودة بإمكانية وصول مدمجة. يمكن تفعيل <button> باستخدام لوحة المفاتيح، ويحصل <input type="email"> على لوحة المفاتيح الافتراضية المناسبة، ويُعلن قارئ الشاشة عن <a> بوصفه رابطًا. يوفر PE إعدادات افتراضية ميسّرة للجميع دون جهد إضافي.

تفضّل برامج زحف محركات البحث HTML الذي يمكنها تحليله من دون تنفيذ JavaScript. تُفهرس الصفحات المبنية وفق PE بالكامل من دون تنفيذ JS، بينما تعتمد صفحات SPA فقط على قدرة الزاحف على تشغيل البرامج النصية، وغالبًا ما تفوّت بعض المحتوى.

تعرض تطبيقات الصفحة الواحدة كل شيء من جهة العميل، وتتعطل بالكامل عند فشل JS. أما PE فمختلف تمامًا: يرسل الخادم HTML مكتملًا، ويضيف JS تحسينات مثل الجلب المسبق والتحديثات المتفائلة والتحرير داخل الصفحة، من دون أن يمتلك الوظائف الأساسية في أي وقت.

يميل Remix وNext.js Server Components وSvelteKit وAstro جميعًا إلى HTML المعروض من الخادم مع تحسين تدريجي باستخدام JS. ويجعل اختيار إطار عمل من هذا النوع PE المسار الأسهل للتنفيذ.

لا يمكن لواجهات المستخدم شديدة التفاعل، مثل المحررات التعاونية وتطبيقات الرسم والألعاب الفورية، أن تعمل بصورة مفيدة من دون JS. وقد يكون «البديل الذي لا يتطلب JS» لهذه التطبيقات وضعًا ثابتًا للقراءة فقط — وهو أفضل من لا شيء، لكنه يظل محدودًا حتمًا. كن صريحًا بشأن هذه المقايضة.

«اجعله يعمل أولًا، ثم اجعله جميلًا، ثم اجعله سريعًا.» ابنِ نموذج HTML أولًا، وتحقق من عمله باستخدام curl. أضف CSS للتخطيط. ثم أضف JS للتحقق داخل الصفحة، أو التحديثات المتفائلة، أو الإرسال باستخدام AJAX. كل طبقة اختيارية، والنتيجة تجمع تجربة رائعة للجميع.

ما الوعد الأساسي للتحسين التدريجي؟

يبدأ التحسين التدريجي باستخدام HTML دلالي يعمل من دون CSS أو JS، ثم يضيف CSS للعرض وJS للتفاعل. كل طبقة اختيارية، وتتدهور الصفحة بسلاسة عند حدوث الأعطال. يحقق PE مكاسب في الأداء وإمكانية الوصول وتحسين محركات البحث والصمود، مقابل الحاجة إلى مزيد من العمل التصميمي المسبق للتطبيقات شديدة التفاعل.