‏سرعت سایت یه تصمیم طراحیه، نه فقط مهندسی

نویسنده می‌گه الان ساختن یه پورتفولیو یا لندینگ پیج فقط یه پاراگراف تو باکس پرامپته. ولی کسی تو پرامپت نمی‌نویسه «بزرگ‌ترین عکس رو lazy-load نکن» یا «HTML رو از جایی نزدیک کاربر سرو کن». سایت روی لپ‌تاپ سازنده که همه‌چیز کش شده خوب به نظر میاد، ولی بدترین حالت یه کاربره که با گوشی سه‌ساله تو قطار برای اولین بار سایت رو باز می‌کنه. به گفتهٔ نویسنده، ساختن ارزون شده ولی صفحهٔ کُند هنوز هزینه داره و این هزینه رو کاربر با منتظر موندن می‌ده.

فاصله: نور تو فیبر نوری حدود ۲۰۰ کیلومتر در هر میلی‌ثانیه می‌ره و یه اتصال HTTPS تازه چند رفت‌وبرگشت لازم داره. مسیر سیدنی تا یه سرور تو ویرجینیا و برگشت حدود ۱۶ هزار کیلومتره، یعنی کاربر تقریباً یه ثانیه منتظر می‌مونه. هیچ فریم‌ورکی اینو درست نمی‌کنه، ولی CDN (یعنی شبکه‌ای از دیتاسنترها که یه کپی از فایل‌هات رو نزدیک کاربر نگه می‌داره) مثل Cloudflare یا Fastly این فاصله رو کم می‌کنه.

HTML از کجا میاد: سه راه هست. یا موقع deploy یه بار ساخته می‌شه و مثل فایل سرو می‌شه (سایت نویسنده با Astro همین‌طوره)، یا سرور برای هر درخواست صفحه رو می‌سازه، یا سرور یه صفحهٔ تقریباً خالی با یه عالمه JavaScript می‌فرسته و گوشی کاربر خودش صفحه رو می‌سازه. نویسنده می‌گه خیلی از اپ‌سازهای هوش مصنوعی با راه سوم شروع می‌کنن. برای اپی که پشت لاگینه شاید اشکالی نداشته باشه، ولی برای بلاگ و مستندات یعنی گوشی کاربر کاری رو انجام می‌ده که build می‌تونست بکنه و موتورهای جستجو هم ممکنه صفحه رو خالی ببینن.

کش و ترتیب لود: قانون نویسنده اینه که اسم هر فایل با تغییر محتواش عوض بشه و مرورگر یه سال نگهش داره، ولی خود HTML عمر کوتاهی داشته باشه. سایت خودش تا همین ماه همه‌چیز رو با max-age=0 می‌فرستاد، یعنی مرورگر برای حدود چهل فایل هر بار از سرور می‌پرسید. هر لینک داخلی هم اول به آدرسی با اسلش آخر فرستاده می‌شد و این تغییر مسیر حدود ۸۰۰ میلی‌ثانیه روی گوشی کُند هدر می‌داد. مشکل دیگه این بود که بزرگ‌ترین چیز صفحه روی گوشی، یعنی کارت اول کاروسل، با loading="lazy" و اولویت پایین لود می‌شد و حدود ۲.۵ ثانیه طول می‌کشید تا برسه.

ترد اصلی: وقتی JavaScript در حال اجراست صفحه به تپ جواب نمی‌ده. Google به این می‌گه Interaction to Next Paint و معیار خوبش زیر ۲۰۰ میلی‌ثانیه‌ست. انیمیشن هیروی سایت نویسنده حتی بعد از اسکرول شدن به بیرون صفحه هم کشیده می‌شد و حدود ۴۴۶ میلی‌ثانیه از هر پنج ثانیه رو روی دسکتاپ هدر می‌داد. نویسنده معتقده بیشتر تصمیم‌های گرون مثل ویدیوی autoplay، فونت سفارشی با چهار وزن یا ۵۰۰ کیلوبایت JavaScript تصمیم‌های طراحی‌ان، پس طراح باید تو اتاق باشه وقتی دربارهٔ این هزینه‌ها تصمیم گرفته می‌شه.

نویسنده شش سؤال پیشنهاد می‌ده که از ایجنتت بپرسی: HTML از کجا میاد، از کجا سرو می‌شه، چی و تا کی کش می‌شه، بزرگ‌ترین چیز صفحه کی می‌رسه، چقدر JavaScript فرستاده می‌شه و روی یه گوشی کُند چه حسی داره. بعدش یه بودجهٔ عددی بنویس و جایی بذار که پرامپت بعدی ببینه. سایت خودش روی گوشی کُند LCP برابر ۱.۳۲ ثانیه داره، ولی تو دو مورد از بودجه بیرون زده: جواب سرور ۳۸۱ میلی‌ثانیه و طولانی‌ترین task برابر ۷۸ میلی‌ثانیه.

نکات کلیدی:

• بودجهٔ نویسنده برای Largest paint زیر ۲.۵ ثانیه‌ست و مقدار واقعیش ۱.۳۲ ثانیه شده.
• حجم کل صفحهٔ اصلی ۴۸۸ کیلوبایت و JavaScript اون ۲۰۹ کیلوبایته، با بودجهٔ ۱ مگابایت و ۲۵۰ کیلوبایت.
• سرو کردن همهٔ فایل‌ها با max-age=0 باعث می‌شد برای حدود ۴۰ فایل هر بار یه رفت‌وبرگشت جدا انجام بشه.
• فرستادن هر لینک داخلی به نسخهٔ با اسلش آخر حدود ۸۰۰ میلی‌ثانیه به هر جابه‌جایی روی گوشی کُند اضافه می‌کرد.
• عکسی که بزرگ‌ترین چیز صفحهٔ اوله نباید loading="lazy" داشته باشه.
• معیار خوب Interaction to Next Paint تو Core Web Vitals زیر ۲۰۰ میلی‌ثانیه‌ست.