فروشگاه چای فرزانه اکبری در لاهیجان روی موبایل ۷٫۴ ثانیه طول می‌کشد تا اسم محصول‌ها را نشان بدهد. سرورش در ۱۲۰ میلی‌ثانیه جواب داده است. تمام هفت ثانیه باقی‌مانده بعد از رسیدن آن جواب خرج می‌شود، روی کارهایی که سرور دیگر در هیچ‌کدامشان نقشی ندارد، و همین شکاف اولین چیزی است که این موضوع برای آن وجود دارد.
وب دو ماشین است و یک قرارداد میانشان، و تقریباً هر پرسشی که اینجا بایگانی می‌شود در واقع می‌پرسد مسئله در کدام طرف قرارداد است. برای یک صفحه فارسی یک جواب سوم هم هست که در هیچ راهنمای انگلیسی‌زبانی نمی‌آید، و در پرونده فرزانه جواب درست هم همان بود: مسئله در قلم است.
آنچه واقعاً میان لمس کردن و ظاهر شدن متن می‌گذرد
گوشی نشانی را پیدا کرده، اتصالی باز و امن کرده، یک خط درخواست فرستاده و یک فایل نشانه‌گذاری گرفته است. آن فایل صفحه نیست؛ فهرستی است از هر چیز دیگری که صفحه لازم دارد. صفحه فرزانه بیست و شش چیز نام می‌برد و دو تایشان قلم‌اند.
برای یک صفحه انگلیسی این دو تا کوچک‌اند، چون سرویس‌های قلم فایل را به ده‌ها تکه می‌شکنند و مرورگر فقط تکه‌ای را می‌آورد که حرف‌هایش روی صفحه هستند. برای فارسی این حساب به هم می‌خورد: unicode-range برای فارسی تقریباً کاری نمی‌کند، چون یک جمله فارسی تمام بلوک را می‌خواهد. صفحه فارسی قلم را کامل می‌گیرد، و قلم فارسی چون برای هر حرف چند شکل اتصالی دارد از قلم لاتین هم‌اندازه‌اش سنگین‌تر است.
کاری که فرزانه کرده بود درست بود و نصفه: قلم را با rel="preload" جلو انداخته بود. preload یک قلم بدون crossorigin، همان قلم را دو بار دانلود می‌کند، چون درخواست قلم همیشه بدون هویت فرستاده می‌شود و درخواست preload بدون آن صفت این‌طور نیست، پس مرورگر آن دو را یک چیز حساب نمی‌کند. یک کلمه، و نصف بار قلم از صفحه رفت.
<link rel="preload" as="font" type="font/woff2" href="/f/vazirmatn.woff2" crossorigin>pyftsubset vazirmatn.ttf --unicodes=U+0600-06FF,U+200C,U+0020-007E --flavor=woff2
خط دوم چیزی است که فایل را دوباره کوچک می‌کند: هر نویسه‌ای که سایت به کار نمی‌برد از قلم بیرون می‌رود. دو چیز باید داخل فهرست بماند و یکی‌شان همیشه فراموش می‌شود، چون آنجایی نیست که به نظر می‌رسد: نیم‌فاصله بیرون از بلوک عربی است و در زیرمجموعه‌سازی جا می‌ماند، و بازه لاتین هم لازم است چون شماره تلفن و نشانی و نام محصول‌ها همان‌جا هستند. خروجی را همیشه با یک بند فارسی واقعی نگاه کنید، نه با یک کلمه.
سومی انتخابی است که هر دو طرفش هزینه دارد. font-display: swap متن را زودتر نشان می‌دهد و جای آن را بعد از رسیدن قلم جابه‌جا می‌کند، و در فارسی این جابه‌جایی از انگلیسی بزرگ‌تر است، چون قلم جانشین سیستمی عرض و ارتفاع دیگری دارد و یک بند کامل بعد از رسیدن قلم یک خط بالا یا پایین می‌رود. چیزی که هزینه هر دو طرف را کم می‌کند این است که قلم از همان دامنه صفحه بیاید، تا فاصله میان دو حالت کوتاه بماند.
و آخری هیچ ربطی به سرعت ندارد و در همان شکاف زندگی می‌کند: جهت صفحه صفت dir روی html است، نه یک قاعده در CSS. شیوه‌نامه فرزانه روی یک CDN خارجی بود و از شبکه موبایل ایران همیشه نمی‌رسید، و آن دفعه‌ها صفحه‌اش نه فقط بی‌قالب که چپ‌به‌راست بود. lang="fa" کنارش می‌نشیند و تعیین می‌کند مرورگر برای متنی که قلمش نرسیده کدام قلم سیستمی را بردارد.
صفت dir یک همراه دارد که کار دو برابری را حذف می‌کند. خصوصیت‌های منطقی از جهت سند پیروی می‌کنند و شیوه‌نامه راست‌به‌چپ دوم را حذف می‌کنند: margin-inline-start در یک سند فارسی سمت راست است و در همان فایل، در یک سند انگلیسی، سمت چپ. شیوه‌نامه‌ای که با left و right نوشته شده باشد برای فارسی یک نسخه دوم لازم دارد و آن نسخه دوم است که همیشه از قالب اصلی عقب می‌ماند.
ترتیبی که خود مرورگر دارد، و آنچه با برعکس گرفتنش می‌شکند
ترتیبی که جواب می‌دهد همان ترتیب مرورگر است. ساختاری که زیر هر صفحه‌ای هست اول می‌آید، چون هر چیز دیگری به آن وصل می‌شود و سندی که ساختارش درست باشد پیش از یک خط قالب هم خواندنی و ایندکس‌شدنی است. بعد اینکه یک صفحه چطور چیده می‌شود و چه شکلی است که بزرگ‌ترین موضوع این صفحه است، و اینکه چرا یک صفحه کند حس می‌شود و چه چیزی واقعاً درستش می‌کند که پنج بند بالا نمونه‌ای از آن بود.
برعکس گرفتن این ترتیب یک شکست مشخص دارد و در فارسی یک نشانه اضافه. کسی که از فریمورک کامپوننتی شروع می‌کند رابط می‌سازد و نمی‌تواند بگوید یک عنصر چیست؛ و قالب آماده‌ای که کارش را با آن شروع کرده انگلیسی بوده، پس صفحه‌اش نه dir دارد نه lang، و فریمورک هیچ‌کدام را به او یادآوری نمی‌کند. ساختن یک رابط از جنس کامپوننت جایش بعد از آن دو است و نه پیش از آن‌ها، و همین ترتیب در برنامه‌نویسی، از اولین متغیر تا سیستمی که بالا آمده است تنها جایی است که ترتیب ماشین و ترتیب درس با هم می‌خوانند.
ساختار
چه چیزی باید بایستد تا لایه بالای آن معنایی داشته باشد
از نوک به پایین خوانده می‌شود. هر لایه روی لایه زیرش سوار است، و خرابی هر لایه به همه لایه‌های بالایش می‌ریزد.
- فریمورک کامپوننتیجایی که بیشتر آدم‌ها شروع می‌کنند، و لایه‌ای با کوتاه‌ترین عمر
- قالب و قلمچیدمان و ظاهر، و در فارسی جایی که بیشتر وزن صفحه هم همان‌جاست
- نشانه‌گذاریساختار، معنا، جهت و زبان سند، و اینکه صفحه‌خوان چیزی می‌خواند یا نه
- قرارداد روی سیمدرخواست، کد وضعیت و کش، که هر سه لایه بالا آن را به ارث می‌برند
درباره حجم کد هر لایه چیزی نمی‌گوید. دو لایه پایین کمترین کد را دارند و گران‌ترین خرابی را، چون هر چیزی بالای آن‌ها فرض کرده که انجام شده‌اند.
جایی که کار می‌ایستد: انتخاب میزبان، که تصمیم فنی نیست
هر آموزشی با یک قدم تمام می‌شود که می‌گوید این را روی فلان سرویس بالا ببرید. از ایران همان قدم آخر است که یا کامل نمی‌شود یا سایتی می‌سازد که مخاطب خودتان به سختی بازش می‌کند. طرف دیگرش میزبان ایرانی است که برای بازدیدکننده داخل ایران سریع است، دامنه را با هویت ثبت‌شده می‌دهد، و ابزارش یک کنترل پنل است نه یک خط فرمان.
این ایست معمولاً ماه چهارم می‌رسد، درست وقتی سایت آماده است، و اصلاً شبیه یک مسئله فنی دیده نمی‌شود؛ شبیه سه هفته بی‌حرکت دیده می‌شود. تصمیمش را زودتر بگیرید، چون شکل کارهای دیگر را هم عوض می‌کند: نیمه‌ای از وب که بازدیدکننده هرگز نمی‌بیندش روی یک کنترل پنل شکل دیگری دارد تا روی ماشینی که خودتان واردش می‌شوید، و بیرون بردن کد از دستگاه خودتان، و زنده نگه داشتنش برای هر کدام یک مسیر جداگانه است.
سه چیزی که در ۲۰۲۶ برای یک صفحه فارسی باز می‌کنید
Vazirmatn یک قلم فارسی متن‌باز با مجوز SIL OFL است و جای عادتی را گرفت که سال‌ها روی سایت‌های فارسی رایج بود: گذاشتن قلمی روی وب که پروانه‌اش اجازه این کار را نمی‌داد. رایگان است، خودتان میزبانش می‌شوید، و همان یک تصمیم دو مسئله را با هم حل می‌کند، چون قلمی که روی دامنه خودتان است هم پروانه‌اش روشن است و هم به شبکه‌ای بیرون از دسترس گره نخورده.
pyftsubset بخشی از fonttools است، متن‌باز و رایگان، و جای فرستادن قلم کامل برای هر بازدیدکننده را گرفت. یک بار از مخزن بسته نصب می‌شود و بعد از آن آفلاین کار می‌کند، که برای این کار مهم است: زیرمجموعه‌سازی چیزی است که هر بار قلم عوض می‌شود دوباره لازمش دارید. خروجی‌اش را همیشه با یک جمله فارسی واقعی نگاه کنید، نه با یک کلمه.
پنل شبکه در ابزار توسعه‌دهنده مرورگر جایی است که هر بیست و شش درخواست به ترتیب دیده می‌شود، با اینکه هرکدام منتظر کدام مانده، و جای حذف کردن فایل‌ها تا وقتی صفحه سریع شود را گرفت. رایگان است و از قبل نصب. Lighthouse که در همان پنل است هم محلی اجرا می‌شود؛ نسخه میزبانی‌شده PageSpeed Insights باید سایت را از بیرون باز کند، و برای سایتی که روی میزبان ایرانی است این همیشه اتفاق نمی‌افتد، پس عدد نگرفتن از آن حرفی درباره سایت شما نیست.
پرسش بعدی این است که وقتی همان صفحه به جای نشان دادن چای، پول یا شماره تلفن کسی را قبول کند چه چیزی عوض می‌شود، و آنجا حمله‌هایی که هر سایت عمومی دریافت می‌کند از جای دیگری شروع می‌شود: نه از سرعت، از اینکه چه کسی می‌تواند چه چیزی را بفرستد. همین پرسش روی برنامه‌هایی روی دستگاهی که آدم‌ها با خود می‌برند جواب دیگری دارد، چون آنجا قلم از قبل داخل خود برنامه است.