Preloading، Prefetching و Preconnecting: تکنیک‌های بهبود سرعت لود سایت
سرعت بارگذاری صفحات وب یکی از مهم‌ترین عوامل در موفقیت یک وب‌سایت است. کاربران معمولاً صبر کمی دارند و اگر لود شدن یک صفحه بیش از چند ثانیه طول بکشد، احتمال زیادی وجود دارد که آن را ترک کنند. این موضوع نه‌تنها به تجربه کاربری آسیب می‌زند، بلکه بر سئو و رتبه سایت در موتورهای جستجو نیز تأثیر منفی دارد. به همین دلیل، استفاده از تکنیک‌های بهینه‌سازی سرعت لود به یک ضرورت تبدیل شده است.
در میان تکنیک‌های مختلفی که برای این هدف استفاده می‌شوند، سه روش نسبتاً ساده اما بسیار موثر به نام‌های Preloading، Prefetching و Preconnecting وجود دارند که مرورگر را از نیازهای آینده یا فوری آگاه می‌سازند و باعث می‌شوند منابع با تأخیر کمتر و سرعت بیشتری در اختیار کاربر قرار بگیرند. این سه روش هرکدام کاربرد متفاوتی دارند و بهینه‌سازی لایه‌های مختلفی از فرآیند بارگذاری سایت را هدف قرار می‌دهند.
Preloading: بارگذاری پیش‌دستانه منابع حیاتی
Preloading یک روش برای بارگذاری منابعی است که مرورگر به صورت پیش‌فرض ممکن است آن‌ها را دیرتر لود کند، اما ما می‌دانیم که برای نمایش درست و سریع صفحه ضروری هستند. با استفاده از این تکنیک، ما به مرورگر اعلام می‌کنیم که این منابع را در اولویت قرار دهد.
برای مثال، اگر در طراحی سایت از فونت خاصی استفاده کرده‌ایم که بلافاصله پس از بارگذاری باید نمایش داده شود، استفاده از Preloading باعث می‌شود این فونت بدون تأخیر در اختیار مرورگر قرار گیرد و از پدیده‌ای به نام "Flash of Unstyled Text (FOUT)" جلوگیری شود. همچنین در مواردی که فایل‌های CSS یا اسکریپت‌های مهمی داریم که در ابتدای بارگذاری صفحه مورد نیازند، Preloading به ما کمک می‌کند آن‌ها را زودتر بارگذاری کنیم.
Prefetching: آماده‌سازی منابع آینده
برخلاف Preloading که برای منابع همین صفحه به‌کار می‌رود، Prefetching برای منابعی است که در آینده ممکن است مورد استفاده قرار بگیرند. این تکنیک معمولاً در زمان‌های بیکاری مرورگر اجرا می‌شود تا منابعی را که احتمال استفاده از آن‌ها وجود دارد در حافظه موقت (cache) ذخیره کند.
یکی از کاربردهای مهم Prefetching در بارگذاری صفحات بعدی سایت است. فرض کنید کاربری در صفحه اصلی سایت قرار دارد و احتمال زیادی وجود دارد که روی یکی از لینک‌ها کلیک کرده و وارد صفحه بعدی شود. با Prefetching می‌توان محتوای آن صفحه را از قبل آماده کرد تا در زمان کلیک کاربر، صفحه تقریباً به‌صورت آنی نمایش داده شود. این موضوع تجربه کاربری را بسیار سریع و روان می‌کند و رضایت کاربران را افزایش می‌دهد.
Preconnecting: برقراری اتصال زودهنگام با سرور
Preconnecting یک تکنیک سطح پایین‌تر است که روی مرحله‌ی برقراری ارتباط بین مرورگر و سرور تمرکز دارد. وقتی مرورگر می‌خواهد به یک دامنه‌ی خاص متصل شود، باید چند مرحله پشت سر بگذارد: ترجمه نام دامنه (DNS lookup)، ایجاد اتصال TCP، و در صورت نیاز، راه‌اندازی اتصال امن (TLS). هر یک از این مراحل ممکن است چند صد میلی‌ثانیه زمان ببرد و به جمع کل زمان لود صفحه اضافه شود.
با استفاده از Preconnecting، مرورگر این مراحل را زودتر انجام می‌دهد، حتی پیش از آنکه فایل یا منبعی از آن دامنه درخواست شود. این کار باعث می‌شود به‌محض نیاز به منبع خارجی، همه‌چیز آماده باشد و انتقال داده بلافاصله شروع شود. این تکنیک مخصوصاً برای منابعی مثل فونت‌های گوگل، APIهای خارجی یا فایل‌هایی که از CDNها بارگذاری می‌شوند، بسیار مفید است.
چرا این تکنیک‌ها مهم‌اند؟
در ظاهر، این تکنیک‌ها جزئی و ساده به‌نظر می‌رسند، اما در عمل می‌توانند زمان لود یک صفحه را به شکل محسوسی کاهش دهند. در دنیای دیجیتال، حتی چند صدم ثانیه می‌تواند تفاوت بزرگی در تجربه کاربر ایجاد کند. استفاده‌ی ترکیبی و هوشمندانه از Preloading، Prefetching و Preconnecting به توسعه‌دهندگان این امکان را می‌دهد که کنترل بیشتری روی فرآیند لود منابع داشته باشند و عملکرد سایت را از دید کاربر بهبود دهند.
اگر بخواهیم سایت‌هایی سریع، حرفه‌ای و کاربرمحور طراحی کنیم، استفاده از این تکنیک‌ها دیگر یک انتخاب نیست، بلکه یک ضرورت است.
