وب، با تمام پویایی و تعاملی که امروز دارد، بر پایه یک پروتکل ساده اما قدرتمند بنا شده است: پروتکل انتقال ابرمتن (HTTP) و نسخه امن آن (HTTPS). هر بار که شما لینکی را کلیک می‌کنید، فرمی را ارسال می‌کنید، یا محتوایی را مشاهده می‌کنید، در واقع یک «درخواست HTTP» بین مرورگر شما (کلاینت) و سرور وب در حال وقوع است. درک عمیق این فرآیند و یادگیری نحوه بهینه‌سازی آن، کلید دستیابی به وب‌سایت‌هایی سریع، کارآمد و ایمن است.

درخواست HTTP

HTTP (Hypertext Transfer Protocol) پروتکل اساسی برای انتقال داده‌ها در وب است. این پروتکل به عنوان یک پروتکل درخواست-پاسخ (Request-Response) عمل می‌کند.

فرآیند پایه به این شکل است:

1. درخواست (Request): کلاینت (معمولاً مرورگر وب) یک پیام ساختاریافته (درخواست HTTP) را به سرور وب ارسال می‌کند. این پیام حاوی اطلاعاتی مانند متدی که می‌خواهد اجرا شود (مثلاً دریافت یا ارسال داده)، آدرس منبع مورد نظر (URL)، و متادیتای اضافی (هدرها) است.
2. پاسخ (Response): سرور پس از دریافت و پردازش درخواست، یک پیام ساختاریافته (پاسخ HTTP) را به کلاینت بازمی‌گرداند. این پاسخ شامل کد وضعیت (Status Code) است که نشان می‌دهد درخواست موفقیت‌آمیز بوده یا خیر (مانند ۲۰۰ برای موفقیت یا ۴۰۴ برای یافت نشدن)، و همچنین بدنه پاسخ که حاوی داده‌های درخواستی (مانند کد HTML، تصویر، یا JSON) است.

HTTPS (Hypertext Transfer Protocol Secure) صرفاً نسخه امن HTTP است. در HTTPS، تمام داده‌های مبادله شده بین کلاینت و سرور توسط لایه امنیتی TLS/SSL رمزنگاری می‌شوند. این رمزنگاری از شنود، دستکاری و جعل داده‌ها جلوگیری کرده و اعتماد کاربران را تضمین می‌کند. امروزه، به دلیل ملاحظات امنیتی و SEO، استفاده از HTTPS به یک استاندارد اجباری تبدیل شده است.

انواع متدها

HTTP مجموعه‌ای از «متدها» (Methods) را تعریف می‌کند که هدف یا عملیاتی را که کلاینت می‌خواهد روی منبع مشخص شده انجام دهد، مشخص می‌کنند. متدهای اصلی که در توسعه وب با آن‌ها سروکار داریم عبارتند از:

1. GET:

• هدف: درخواست نمایش یک منبع مشخص شده. این متد فقط برای بازیابی داده‌ها استفاده می‌شود و نباید هیچ تغییری در وضعیت سرور ایجاد کند (عملیات Idempotent و ایمن).
• مثال: درخواست بارگذاری یک صفحه وب، دریافت یک تصویر.

2. POST:

• هدف: ارسال داده‌ها به یک منبع مشخص شده برای پردازش. معمولاً برای ایجاد یک موجودیت جدید یا ارسال داده‌های فرم استفاده می‌شود.
• مثال: ثبت‌نام کاربر جدید، ارسال نظرات.

3. PUT:

• هدف: به‌روزرسانی یک منبع موجود. اگر منبع وجود نداشته باشد، ممکن است آن را ایجاد کند. (Idempotent است، یعنی تکرار آن تأثیری بیشتر از یک بار ندارد).

4. DELETE:

• هدف: حذف منبع مشخص شده.

5. HEAD:

• هدف: مشابه GET است، با این تفاوت که فقط هدرهای پاسخ را برمی‌گرداند و بدنه (Body) پاسخ را نادیده می‌گیرد. این متد برای بررسی وجود یک منبع یا ابعاد یک فایل قبل از دانلود کامل آن مفید است.

6. OPTIONS:

• هدف: برای توصیف گزینه‌های ارتباطی سرور برای منبع هدف استفاده می‌شود. اغلب در CORS (اشتراک‌گذاری منابع متقابل) برای بررسی اینکه آیا کلاینت اجازه دسترسی به منابع خاص را دارد یا خیر، استفاده می‌شود.

فرآیند درخواست HTTP

فرآیند کامل یک درخواست HTTP (یا HTTPS) شامل مراحل زیر است:

1. ایجاد URL: کاربر یک URL را در مرورگر وارد می‌کند (مثلاً https://example.com/page.html).
2. تفکیک URL: مرورگر URL را تجزیه می‌کند تا پروتکل (https)، نام دامنه (example.com) و مسیر منبع (/page.html) را استخراج کند.
3. جستجوی DNS: اگر آدرس IP سرور ناشناخته باشد، مرورگر از طریق سیستم نام دامنه (DNS) آدرس IP مربوط به example.com را پیدا می‌کند.
4. ایجاد اتصال TCP/IP: مرورگر با استفاده از آدرس IP، یک اتصال پایدار به پورت استاندارد سرور (پورت ۴۴۳ برای HTTPS) برقرار می‌کند.
5. دست‌دهی TLS/SSL (فقط برای HTTPS): اگر پروتکل HTTPS باشد، یک فرآیند پیچیده دست‌دهی (Handshake) انجام می‌شود تا کلیدهای رمزنگاری تبادل شده و یک کانال امن ایجاد شود.
6. ارسال درخواست HTTP: مرورگر یک پیام درخواست HTTP ایجاد می‌کند که شامل متد (معمولاً GET)، هدرهایی مانند Host، User-Agent، Accept و در صورت نیاز پارامترها است، و آن را از طریق اتصال امن ارسال می‌کند.
7. پردازش سرور: وب سرور درخواست را دریافت، اعتبار سنجی و پردازش می‌کند (مثلاً با اجرای کد سمت سرور، دسترسی به پایگاه داده یا یافتن فایل استاتیک).
8. ارسال پاسخ: سرور یک پاسخ HTTP با کد وضعیت (مثلاً ۲۰۰ OK) و هدرهای مربوطه، به علاوه بدنه داده (مثلاً فایل HTML) ایجاد کرده و آن را به کلاینت بازمی‌گرداند.
9. رندرینگ توسط کلاینت: مرورگر پاسخ را دریافت کرده و بر اساس محتوای آن (HTML، CSS، JavaScript، تصاویر) شروع به رندر کردن صفحه برای کاربر می‌کند.

علت بالا رفتن درخواست HTTP سایت

وب‌سایت‌های مدرن به ندرت تنها یک درخواست ساده برای بارگذاری یک صفحه انجام می‌دهند. یک صفحه معمولی وب ممکن است منجر به ده‌ها یا حتی صدها درخواست مجزا شود. دلایل اصلی افزایش این تعداد عبارتند از:

1. منابع خارجی (Third-Party Resources):

• اسکریپت‌های تبلیغاتی (Ad Scripts).
• فونت‌های وب (Web Fonts) از سرویس‌هایی مانند Google Fonts.
• تحلیل‌گرها (Analytics) مانند Google Analytics.
• اسکریپت‌های شبکه‌های اجتماعی (مانند دکمه‌های لایک).

هر یک از این منابع نیاز به یک درخواست HTTP/HTTPS جداگانه دارند.

2. تفکیک منابع (Asset Granularity):

• کد جاوا اسکریپت و استایل‌دهی (CSS) اغلب در فایل‌های مجزا برای سازماندهی بهتر نگه داشته می‌شوند. مرورگر باید هر فایل .js و .css را به صورت جداگانه درخواست کند.
• تصاویر کوچک یا آیکون‌ها (که قبلاً با CSS Spriteها مدیریت می‌شدند) اکنون اغلب به صورت جداگانه یا حتی به صورت Base64 (که خود باعث بزرگ شدن کد HTML می‌شود) بارگذاری می‌شوند.

3. بارگذاری تنبل (Lazy Loading):

• اگرچه Lazy Loading برای بهینه‌سازی مفید است، اما اجرای آن به معنای ارسال درخواست‌های GET اضافی به سرور به محض اسکرول کردن کاربر به سمت پایین صفحه یا تعامل با یک عنصر خاص است.

4. API Calls:

• در برنامه‌های تک‌صفحه‌ای (SPA) مانند React یا Vue، محتوای اصلی صفحه ممکن است در یک درخواست بارگذاری شود، اما داده‌های داینامیک (مانند پست‌های فید، نظرات، وضعیت موجودی) از طریق درخواست‌های fetch یا XMLHttpRequest (AJAX) به صورت مجزا از بک‌اند فراخوانی می‌شوند.

بهینه‌سازی درخواست‌های HTTP

کاهش تعداد و بهبود کارایی درخواست‌های HTTP/HTTPS مستقیماً به کاهش زمان بارگذاری اولیه (First Contentful Paint – FCP) و افزایش تعامل‌پذیری (Interactivity) کمک می‌کند.

۱. تجمیع و کوچک‌سازی

• Minification: حذف تمام کاراکترهای غیرضروری (مانند فاصله‌ها، کامنت‌ها و شکست خطوط) از فایل‌های HTML، CSS و JavaScript. این کار حجم فایل را کاهش داده و زمان دانلود را کم می‌کند.
• Concatenation (تجمیع): ترکیب چندین فایل CSS کوچک در یک فایل و چندین فایل JS کوچک در یک فایل. این کار تعداد Round Trips (مجموع زمان رفت و برگشت برای ایجاد اتصال و ارسال درخواست) را به شدت کاهش می‌دهد. (البته با HTTP/2 این استراتژی کمتر حیاتی شده است، اما همچنان برای فریم‌ورک‌های قدیمی یا در شرایط خاص مفید است.)

۲. استفاده از Caching (کش) مرورگر

از هدرهای کش HTTP مانند Cache-Control و Expires به درستی استفاده کنید.

• برای منابع استاتیک (مانند تصاویر، فونت‌ها، فایل‌های CSS/JS که به ندرت تغییر می‌کنند)، تنظیم کش مرورگر برای مدت طولانی (مثلاً یک سال) باعث می‌شود که کاربر در بازدیدهای بعدی، نیازی به دانلود مجدد آن منابع نداشته باشد.
• هنگام تغییر محتوا، از Fingerprinting استفاده کنید (مثلاً style.v20240218.css). این کار باعث می‌شود که مرورگر فایل قدیمی را پاک کرده و نسخه جدید را دانلود کند.

۳. بهینه‌سازی منابع تصویر

تصاویر معمولاً بزرگترین بخش یک صفحه را تشکیل می‌دهند و بیشترین تأثیر را بر تعداد درخواست‌ها دارند:

• فرمت‌های مدرن: استفاده از فرمت‌های نسل جدید مانند WebP که فشرده‌سازی بهتری نسبت به JPEG یا PNG ارائه می‌دهند.
• تگ <picture> و srcset: ارائه چندین نسخه از یک تصویر با ابعاد مختلف و استفاده از تگ <picture> یا صفت srcset در تگ <img>. این کار به مرورگر اجازه می‌دهد تا بر اساس اندازه صفحه نمایش کاربر، کوچکترین و مناسب‌ترین تصویر را درخواست کند.
• فشرده‌سازی و ابعاد صحیح: اطمینان حاصل کنید که ابعاد تصویر بارگذاری شده دقیقاً با ابعاد نمایش داده شده روی صفحه مطابقت دارد.

۴. استفاده از HTTP/2 و HTTP/3

اگر سرور شما از پروتکل‌های مدرن پشتیبانی کند، بهینه‌سازی بسیار ساده‌تر می‌شود:

• HTTP/2: این نسخه مشکل Head-of-Line Blocking در HTTP/1.1 را با استفاده از Multiplexing حل می‌کند. Multiplexing به مرورگر اجازه می‌دهد چندین درخواست و پاسخ را همزمان روی یک اتصال TCP واحد ارسال کند. این امر نیاز به تجمیع (Concatenation) فایل‌ها را کاهش می‌دهد.
• HTTP/3: مبتنی بر پروتکل QUIC است که از UDP استفاده می‌کند و تأخیر (Latency) را در شبکه‌های ناپایدار موبایل به شدت کاهش می‌دهد.

۵. بهینه‌سازی منابع حیاتی (Critical Resources)

از ویژگی‌های جدید HTTP/2 استفاده کنید:

• Server Push: سرور می‌تواند منابعی را که می‌داند مرورگر برای رندر اولیه نیاز دارد (مانند CSS اصلی)، قبل از اینکه مرورگر آن‌ها را درخواست کند، به صورت فعال به کلاینت بفرستد. این کار یک Round Trip کامل را حذف می‌کند.
• Preload/Prefetch: استفاده از هدرهای لینک مانند <link rel="preload" href="..."> برای درخواست فوری منابع حیاتی (مثل فونت‌های مورد نیاز در اولین رندر) یا <link rel="prefetch" href="..."> برای منابعی که احتمالاً در تعاملات بعدی کاربر مورد نیاز خواهند بود.

۶. کاهش وابستگی‌های خارجی (Third-Party Scripts)

هر اسکریپت خارجی یک سربار (Overhead) امنیتی و عملکردی به همراه دارد:

• میزبانی محلی (Self-Hosting): اگر امکانش هست، فونت‌ها و اسکریپت‌های عمومی را در سرور خودتان میزبانی کنید تا وابستگی به سرورهای خارجی و تأخیر ناشی از دست‌دهی TLS اضافی حذف شود.
• بارگذاری تنبل (Lazy Loading) برای اسکریپت‌ها: اسکریپت‌های غیرضروری برای رندر اولیه (مانند ابزارهای تحلیل و تبلیغات) را طوری تنظیم کنید که فقط پس از بارگذاری کامل صفحه یا پس از تعامل کاربر، بارگذاری شوند.

بهینه‌سازی درخواست‌های HTTP یک فرآیند مداوم است که با مانیتورینگ و استفاده از ابزارهای توسعه‌دهنده مرورگرها (مانند تب Network در Chrome DevTools) قابل سنجش و بهبود است. هدف نهایی، به حداقل رساندن تأخیر و مصرف پهنای باند برای ارائه یک تجربه کاربری روان و سریع است.