نور تدير متجر قرطاسية في سوسة، ولها صفحة واحدة فيها العنوان والأسعار وصورتان. قاست زمنها من لوحة الشبكة في المتصفح على هاتف وشبكة جيل رابع: الخادم رد أول بايت بعد 90 مللي ثانية، وأكبر عنصر ظهر على الشاشة بعد 5.8 ثانية.
الرقمان لا يقيسان الشيء نفسه، والمسافة بينهما هي هذا الموضوع كله. من قرأ الرقم الأول وحده يستنتج أن الخادم سريع وأن الصفحة سريعة، ثم لا يفهم شكوى الزبائن.
المتصفح لا يطلب صفحة، يطلب قائمة ثم يطلب ما فيها
المتصفح يطلب الصفحة مرة، ثم يطلب كل ملف تسميه الصفحة. ما يعود في الطلب الأول ليس صفحة مرسومة، هو نص فيه بنية الصفحة وأسماء ملفات أخرى: ورقة أنماط، وخط، وصورتان، وربما ملف كود. كل اسم منها طلب جديد، وله دوره في الطابور ونصيبه من الشبكة.
وTTFB زمن الخادم وحده، وLCP كل ما بعده. الأول ينتهي عند أول بايت يخرج من الخادم، ولا يعرف شيئا عما جرى بعده. والثاني يقاس على الشاشة، بعد أن ينزل ما يلزم لرسم أكبر عنصر مرئي. تسعون مللي ثانية على الأول تعني أن الخادم لم يكن هو المشكلة. 5.8 ثانية على الثاني تعني أن المشكلة كانت في الملفات التي سماها الخادم.
ولهذا السبب تفشل أول محاولة يقوم بها أكثر الناس. يشترى خادم أسرع أو تنقل الاستضافة إلى منطقة أقرب، فينزل الرقم الأول من 90 إلى 40، ولا يتحرك الثاني.
ورقة الأنماط في الرأس تشتري شاشة بيضاء
ورقة أنماط في الرأس توقف الرسم حتى تصل. المتصفح يملك النص وبنية الصفحة ويستطيع رسمها، لكنه لا يرسم، لأنه يعرف أن الورقة قد تغير كل شيء ولا يريد أن يعرض صفحة ثم يقلبها أمام القارئ. فيقف. وما تراه في تلك الثواني ليس بطء خادم، هو انتظار مقصود.
والخط أسوأ من الورقة، لأن المتصفح لا يعرف أنه يحتاجه إلا بعد قراءة الورقة. فالخط طلب ثالث في الترتيب: الصفحة، ثم الورقة، ثم الخط. على صفحة عربية هذا الطلب الثالث هو أثقل ملف في الصفحة عادة، وهو آخر ما يبدأ.
الخط العربي ليس خطا لاتينيا بحروف أخرى
الحرف العربي يتصل بما قبله وما بعده، فيرسم بأربع صور: مبتدئة ووسطى ونهائية ومنفردة. الحرف العربي يكتب بأربع صور، فملف الخط أثقل من نظيره اللاتيني قبل أن يتدخل المصمم في شيء. ثمانية وعشرون حرفا في أربع صور، ثم اللامات والتراكيب فوقها، مقابل أبجدية لاتينية بصورتين لكل حرف.
ويضاف إلى هذا حمل قديم لا تستعمله الصفحة أصلا. كتلتا أشكال العرض العربية في يونيكود، من U+FB50 إلى U+FDFF ومن U+FE70 إلى U+FEFF، فيهما 832 موضعا لصور جاهزة كانت تلزم أنظمة قديمة وملفات PDF. المتصفح لا يقرأ منها شيئا، هو يشكل الحروف بنفسه. وكثير من الخطوط العربية يشحنها كاملة.
على صفحة نور أربعة أوزان من خط عربي واحد، مجموعها 1.1 ميغابايت بصيغة woff2، أي أثقل من الصورتين معا. والإصلاح سطر واحد في إعلان الخط:
@font-face { font-family: Rubik; src: url(rubik.woff2); unicode-range: U+0600-06FF, U+0030-0039; }
وقطعت الملفات نفسها على هذا المدى بأداة pyftsubset، فصارت الأربعة 190 كيلوبايت. الوزنان اللذان لا يظهران على الشاشة حذفا، والباقي نزل بمقدار ما فيه من صور لا تعرض. هذا الإصلاح لا يوجد في أي دليل أداء مكتوب لصفحة لاتينية، لأن الصفحة اللاتينية لا تدفع هذا الثمن.
أربع طبقات، وأسفلها عقد على السلك لا كود
ما فوق يستند إلى ما تحت. إطار المكونات في الأعلى، وتحته الأنماط، وتحتها البنية، وتحت الجميع العقد الذي يجري على السلك: الطلبات ورموز الرد والتخزين المؤقت. والعطل في طبقة يسقط على كل ما فوقها، ولا يصعد.
وأصغر مثال على ذلك التحويل. 301 دائم و302 غير دائم، والمتصفح يخزن الدائم. من كتب 301 على عنوان مؤقت أثناء تجربة ثم غير رأيه يجد المتصفح ما يزال يذهب إلى العنوان القديم بعد أسبوع، ولا يصلحه تعديل في الخادم، لأن الرد محفوظ عند الزائر لا عند صاحب الموقع. ولا يظهر هذا لصاحب الصفحة أبدا إذا كان يجرب في نافذة خاصة.
وهذه الطبقة السفلى هي التي تشرحها واجهات التطبيقات، وهي أقل الأربع حظا من المادة العربية وأكثرها تكرارا في العمل اليومي.
البنيان
ما الذي يجب أن يثبت قبل أن تعني الطبقة التي فوقه شيئا
تقرأ من القمة نزولا. كل طبقة تستند إلى ما تحتها، والعطل يسقط على كل ما فوقه.
- إطار المكوناتحيث يبدأ أكثر الناس، وأقصر الطبقات عمرا
- الأنماطالتخطيط والمظهر، وأكبر باب في هذا الموضوع، والاتجاه يقرر فيه مرتين
- البنيةالمعنى وسطر dir، وما إذا كان قارئ الشاشة يقرأ شيئا أصلا
- العقد على السلكالطلبات ورموز الرد والتخزين المؤقت، وترثها الثلاث التي فوقها
لا تقول كم سطرا في كل طبقة. الطبقتان السفليان أقلها كتابة وأغلاها خطأ، لأن كل ما فوقهما يفترض أنهما كتبتا مرة واحدة بشكل صحيح.
الجدار: الاتجاه كتب في آخر المشروع
الصفحة العربية تبنى في أكثر الحالات بالإنجليزية أولا، ثم يبدل النص. وعند التبديل يظهر أن التخطيط كله مكتوب بلغة اليمين واليسار: هامش من اليسار، وحشو إلى اليمين، وعنصر عائم يمينا. فيبدأ صاحب الصفحة يقلب هذه الخصائص واحدة واحدة، ويفوته منها ما لا يظهر إلا على شاشة هاتف.
والمخرج قرار يتخذ في أول يوم لا في آخر يوم. dir وlang يكتبان على وسم html لا على عنصر داخل الصفحة، لأن الاتجاه يورث، ولأن قارئ الشاشة والمدقق الإملائي وفاصلة الأرقام كلها تقرأ من هناك. ثم تكتب الأنماط بالخصائص المنطقية:
margin-inline-start: 16pxبدلmargin-leftpadding-inline-endبدلpadding-righttext-align: startبدلtext-align: left
margin-inline-start تنقلب مع الاتجاه، وmargin-left لا تنقلب. الصفحة المكتوبة بالخصائص المنطقية تعمل بالاتجاهين من ملف أنماط واحد، ولا تحتاج ورقة ثانية للعربية. والصفحة المكتوبة بالخصائص الأخرى تحتاج مراجعة يدوية كاملة، وثمنها يوم أو يومان في مشروع صغير، وأسابيع في مشروع فيه مكونات كثيرة. وهذا هو الفرق بين قرار يتخذ في الساعة الأولى وقرار يؤجل.
ويبقى نصف الجدار الثاني: الأرقام والنص اللاتيني داخل الجملة العربية. سعر مكتوب هكذا، ورمز منتج، واسم علامة، كل واحد منها مقطع باتجاه مخالف داخل سطر عربي، وترتيبه على الشاشة يقرره المتصفح لا الملف. القاعدة العملية أن يترك للمتصفح، وأن يقرأ السطر على الشاشة قبل تسليمه، لا في المحرر.
أداتان في كل متصفح، وثالثة تنزل مرة واحدة
لوحة الشبكة في المتصفح هي التي أعطت الرقمين في أول هذه الصفحة، وهي مفتوحة في كل متصفح منذ سنوات، بلا حساب ولا اشتراك ولا فرق بين بلد وبلد. حلت محل التخمين في أي ملف كان بطيئا ثم حذف الأشياء حتى تسرع الصفحة. وأنفع عمود فيها ليس الزمن، هو الحجم مرتبا تنازليا: الخط العربي يقفز إلى الأعلى في أول نظرة.
وLighthouse داخل أدوات المطور في Chrome، وهي مجانية أيضا. حلت محل الحديث عن سرعة الصفحة بوصفها رأيا. وفيها فخ يخص القارئ العربي: تشغيلها من حاسوب مكتبي على شبكة ثابتة يعطي رقما لا يشبه ما يراه زبون نور على هاتفه، فالوضع المحاكي للهاتف هو الوضع الوحيد الذي يستحق النظر هنا.
والثالثة pyftsubset من حزمة fonttools، وهي التي قطعت الخط. حلت محل شحن الخط كاملا ورجاء أن يخزنه المتصفح. تنصب بأمر واحد، وتعمل بلا شبكة بعد ذلك، ومخرجها ملف يوضع مع الصفحة.
الثمانية تحت هذه الصفحة، والسؤال الذي يليها
الطبقات الأربع تقابل أبوابا تحت هذه الصفحة. HTML هي البنية والمعنى، وفيها يكتب سطر الاتجاه الذي بني عليه نصف هذه الصفحة. وCSS أكبرها وأطولها، وفيها الخصائص المنطقية ومحاور التخطيط في الاتجاهين. والواجهة الخلفية هي النصف الذي لا يراه الزائر، ومنه خرج رقم التسعين. وأداء الصفحة يأخذ المسافة بين الرقمين ويفصلها بندا بندا.
وترتيب القراءة ليس ترتيب الطبقات. البنية ثم الأنماط أولا، لأنهما ما يراه الزائر ويشتكي منه، ثم أطر الواجهة بعدهما لا قبلهما، لأن الإطار يخفي الطبقتين ولا يلغيهما، ومن بدأ به يصلح أعطالا في طبقة لا يعرف أنها موجودة. ومن يعنيه شكل الصفحة على شاشة هاتف قبل شكل كودها يجد ذلك تحت التصميم المتجاوب، ومن يعنيه أن تصل هذه الصفحة إلى من يبحث عنها يجده تحت السيو التقني، والرقمان في أول هذه الصفحة يقرآن هناك بوصفهما إشارة ترتيب لا إشارة راحة.
ويبقى سؤال يصل بعد هذه الصفحة مباشرة. صفحة نور تفتح من متصفح، والزبون الذي يفتحها ثلاث مرات في الأسبوع سيسأل لماذا ليس لها تطبيق. ما الذي يتغير حين ينتقل الشيء نفسه إلى جهاز يحمل في الجيب، وما الذي يصير مستحيلا وما الذي يصير ممكنا؟ جوابه في برمجة التطبيقات.