یک الگوی تکراری: سایت روی سرور تست سریع است، در ابزارهای سنجش نمره‌ی خوبی می‌گیرد، ولی کاربر می‌گوید کند باز می‌شود. و بدتر: گاهی کند باز می‌شود.
آن «گاهی» سرنخ اصلی است.
مسئله چیست
بیشتر قالب‌ها و کتابخانه‌های آماده، فایل‌هایشان را از CDNهای بین‌المللی می‌گیرند، فونت، آیکون، کتابخانه‌ی جاوااسکریپت، فایل CSS. در شرایط عادی این یک تصمیم درست است: CDN نزدیک‌ترین سرور را به کاربر می‌دهد و فایل احتمالاً از قبل در کش مرورگر هست.
در ایران این فرض برقرار نیست. دسترسی به این دامنه‌ها غیرقابل پیش‌بینی است: گاهی سریع، گاهی کند، گاهی اصلاً نه. و مسئله فقط کندی نیست، مسئله نوع شکست است.
چرا یک فایل می‌تواند کل صفحه را نگه دارد
فایل CSS و فونت مسدودکننده‌ی رندر هستند. مرورگر تا CSS را نگرفته باشد، چیزی نمایش نمی‌دهد، چون نمی‌داند صفحه چه شکلی است و نمی‌خواهد محتوای بی‌قواره نشان بدهد.
پس اگر یک فایل CSS از دامنه‌ای بیاید که پاسخ نمی‌دهد، مرورگر منتظر می‌ماند تا مهلت اتصال تمام شود، که می‌تواند چند ثانیه باشد. در این چند ثانیه کاربر یک صفحه‌ی سفید می‌بیند.
نتیجه: سایتی که سرورش در 200 میلی‌ثانیه جواب می‌دهد، برای کاربر پنج ثانیه سفید می‌ماند. و ابزارهای سنجش که از خارج تست می‌کنند، این را نمی‌بینند.
چطور تشخیص دهید
مرورگر را باز کنید، F12 بزنید، به تب Network بروید و صفحه را دوباره بارگذاری کنید. ستون دامنه را نگاه کنید:
- چند درخواست به دامنه‌ای غیر از سایت خودتان می‌رود؟
- کدامشان
cssیاfontهستند؟ - ستون زمان برای آن‌ها چه می‌گوید؟
هر فایل CSS یا فونتی که از دامنه‌ی دیگری می‌آید، یک ریسک است. اسکریپت‌های تحلیلی معمولاً مشکل کمتری دارند چون async بارگذاری می‌شوند.
راه‌حل: همه‌چیز روی سرور خودتان
تصمیمی که ما در پروژه‌ها می‌گیریم ساده است: همه‌ی فونت‌ها، CSS و JavaScript روی سرور خود سایت. بدون استثنا.
در یکی از فروشگاه‌هایی که ساختیم، این یکی از چهار عدد اصلی پروژه است: صفر وابستگی به CDN خارجی. فونت IRANSansX روی سرور خود سایت است، هیچ کتابخانه‌ای از بیرون نمی‌آید.
هزینه‌اش چیست؟ چند صد کیلوبایت بیشتر روی سرور خودتان، و اینکه کش مشترک مرورگر را از دست می‌دهید. سودش چیست؟ رفتار قابل پیش‌بینی. سایت یا سریع است یا کند، ولی «گاهی چند ثانیه سفید» نمی‌شود.
سه کار دیگر که واقعاً اثر دارند
فونت را محلی و با font-display: swap بدهید. یعنی متن با فونت جایگزین نمایش داده می‌شود تا فونت اصلی برسد، نه اینکه صفحه خالی بماند.
تصاویر را در چند اندازه بدهید. تصویری که 2000 پیکسل عرض دارد و در 400 پیکسل نمایش داده می‌شود، چهار برابر لازم داده منتقل کرده.
کش کنید، ولی محافظه‌کارانه. صفحات محتوایی را کش کنید و سبد خرید، تسویه و حساب کاربری را هرگز. کش کردن این‌ها بدترین نوع باگ فروشگاهی را می‌سازد: کاربر سبد کس دیگری را می‌بیند.
و یک نکته‌ی سئویی
سرعت مستقیم رتبه نمی‌آورد، ولی صفحه‌ای که کاربر قبل از دیدنش برمی‌گردد، هیچ سیگنال مثبتی تولید نمی‌کند. اگر برای هر بازدید تبلیغات پول می‌دهید، این کندی مستقیم هزینه‌ی شماست.
دیدگاه‌ها
هنوز دیدگاهی ثبت نشده است؛ اولین نفر باشید.