هرچه وبسایت سریعتر بارگذاری شود، احتمال باقیماندن بازدیدکننده بیشتر خواهد بود. زمانی که وبسایتها پر از تصاویر و محتوای تعاملی توسط اسکریپتهایی هستند که در پسزمینه اجرا میشوند، بارگذاری یک صفحه وب به سادگی درخواست یک فایل نیست، بلکه شامل درخواست چندین فایل مختلف از سرور به صورت متوالی میباشد. یکی از روشهای افزایش سرعت وبسایت، کاهش تعداد این درخواستها است.
یکی از راههای بهبود عملکرد وبسایت، فعالسازی کش مرورگر است. کش مرورگر به مرورگر اعلام میکند که میتواند فایلهای دانلودشده را مجدداً استفاده کند و دیگر نیازی به درخواست مجدد آنها از سرور نیست. برای این کار باید هدرهای جدیدی به پاسخ HTTP اضافه شود تا رفتار مرورگر مشخص شود.
ماژول هدر Nginx در این فرآیند به شما کمک میکند. با این ماژول میتوانید هر هدر دلخواهی به پاسخها اضافه کنید اما کاربرد اصلی آن در تنظیم صحیح هدرهای کنترل کش است. در این آموزش، با کمک ماژول هدر Nginx کش مرورگر را پیادهسازی میکنیم.
پیشنیازها
- یک سرور Ubuntu 20.04 با کاربر عادی و دسترسی sudo
- نصب Nginx روی سرور
ایجاد فایلهای تست کش مرورگر
در این مرحله چند فایل آزمایشی در مسیر پیشفرض Nginx ایجاد میکنیم تا رفتار اولیه Nginx و سپس عملکرد کش مرورگر را بررسی کنیم.
Nginx برای شناسایی نوع فایل، محتوا را تحلیل نمیکند چون بسیار کند خواهد بود. به جای آن، بر اساس پسوند فایل نوع mime را شناسایی میکند که کاربرد آن را مشخص میکند.
در نتیجه، محتوای فایلهای تست اهمیتی ندارد و فقط با نامگذاری مناسب میتوانیم Nginx را فریب دهیم تا تصور کند مثلاً یک فایل خالی یک تصویر و دیگری یک stylesheet است.
برای ساخت فایل تست HTML:
truncate -s 0 /var/www/html/test.htmlو سپس ساخت فایلهای تست بیشتر (عکس jpg، فایل css و فایل js):
truncate -s 0 /var/www/html/test.jpg
truncate -s 0 /var/www/html/test.css
truncate -s 0 /var/www/html/test.jsبررسی رفتار اولیه Nginx در ارسال هدرهای کش
به طور پیشفرض، تمام فایلها رفتار کش یکسانی دارند. برای بررسی، میتوانیم فایل تست HTML را با دستور زیر درخواست کنیم:
curl -I http://localhost/test.htmlدر خروجی، هدرهای HTTP را مشاهده میکنید. در یکی از خطوط Etag دیده میشود که یک شناسه یکتا برای نسخه فعلی فایل است. اگر دستورات بالا را تکرار کنید مقدار Etag ثابت خواهد بود.
در مرورگر این مقدار Etag ذخیره شده و هنگام درخواست مجدد همین فایل، با هدر If-None-Match به سرور ارسال میشود تا بررسی شود نسخه جدیدی وجود دارد یا خیر.
برای شبیهسازی این رفتار در ترمینال (Etage را با مقدار جایگزین کنید):
curl -I -H 'If-None-Match: "abc123"' http://localhost/test.htmlاین بار پاسخ 304 Not Modified دریافت میکنید که فایل دوباره ارسال نمیشود، بلکه به مرورگر اجازه میدهد فایل کش شده را استفاده کند.
این کار در کاهش ترافیک شبکه مؤثر است اما کافی نیست. مشکل Etag این است که مرورگر همیشه برای تأیید از سرور درخواست میکند و حتی اگر فایل مجدد ارسال نشود، هنوز زمان گرفتن پاسخ صرف میشود.
افزودن هدرهای کنترل کش و استفاده از ماژول هدر
دو هدر مهم کش کنترل داریم: Cache-Control و Expires. Cache-Control نسخه جدیدتر است با امکانات بیشتر و برای کنترل دقیقتر کش پیشنهاد میشود.
اگر این هدرها تنظیم باشند، میتوانند به مرورگر اعلام کنند که فایل خاص تا مدت مشخصی (حتی همیشه) بدون درخواست مجدد از سرور قابل استفاده است. اگر این هدرها نباشند، مرورگر همیشه فایل را از سرور درخواست میکند.
برای تنظیم این هدرها از ماژول هدر (جزو هستهی Nginx و نیاز به نصب جدا ندارد) استفاده میکنیم.
فایل کانفیگ پیشفرض Nginx را با nano یا ویرایشگر مورد علاقه خود باز کنید:
sudo nano /etc/nginx/sites-available/defaultبخش server را پیدا کنید. حالا دو بخش جدید اضافه کنید: یکی قبل از بلاک سرور (برای تعریف مدت کش انواع فایلها)، و یکی داخل آن (برای تنظیم هدرهای کش بر اساس نوع فایل):
map $sent_http_content_type $expires {
default off;
text/html epoch;
text/css max;
application/javascript max;
~image/ max;
~font/ max;
}
server {
...
expires $expires;
...
}در map بالا:
- مقدار پیشفرض off است، یعنی هدرهای کش اضافه نمیشود.
- برای text/html مقدار epoch قرار میگیرد تا کش انجام نشود و مرورگر همیشه صحت صفحه HTML را بررسی کند.
- برای text/css و application/javascript مقدار max تعیین میشود تا مرورگر این فایلها را تا حد امکان کش کند و تعداد درخواستها کاهش یافته و سرعت سایت بیشتر شود.
- برای ~image/ و ~font/ که بر اساس regex تمام MIME typeهای شامل image/ یا font/ را شامل میشوند (مثل image/jpg، image/png یا font/woff2)، مقدار max تعریف شده تا کش طولانیمدت فعال باشد.
توجه: این فقط تعدادی از رایجترینmime type ها هستند. برای فهرست کاملتر به Common MIME types مراجعه کنید و سایر انواع مورد نیاز خود را اضافه نمایید.
داخل بلاک server، دستور expires (متعلق به ماژول هدر) هدرهای کش را تنظیم میکند؛ مقدار آن از متغیر $expires گرفته شده که بر اساس نوع فایل مقدار میگیرد.
تغییرات را ذخیره و خارج شوید.
برای اعمال تنظیم جدید Nginx را ریستارت کنید:
sudo systemctl restart nginxبررسی عملکرد کش مرورگر بعد از تنظیمات
دوباره فایل HTML تست را درخواست کنید:
curl -I http://localhost/test.htmlاین بار دو هدر اضافهٔ HTTP خواهید دید:
- هدر Expires تاریخ گذشتهای دارد
- Cache-Control برابر با no-cache تنظیم شده و مرورگر را ملزم میکند همیشه صحت نسخه را با سرور بررسی کند (مانند قبل با Etag)
برای فایل تصویر این تفاوت را ببینید:
curl -I http://localhost/test.jpgدر این حالت، Expires تاریخی دور و Cache-Control شامل اطلاعات max-age است که مرورگر را راهنمایی میکند فایل را تا مدت طولانی کش کند و عملاً درخواست مجدد نداشته باشد.
نتیجه مشابه برای test.js و test.css خواهد بود چون هر دو با هدرهای کش تنظیم شدهاند.
بنابراین هدرهای کنترل کش را بهدرستی تنظیم کردهاید و وبسایت شما از افزایش سرعت و کاهش درخواستهای سرور به واسطه کش مرورگر بهرهمند خواهد شد. این تنظیمات را بر اساس محتوای سایت خود شخصیسازی کنید اما مقادیر پیشفرض این مقاله نقطه شروع مناسبی هستند.
جمعبندی
ماژول هدر Nginx برای افزودن هر هدر دلخواه به پاسخها کارایی دارد، اما یکی از کاربردهای مهم آن تنظیم هدرهای کنترل کش است که باعث افزایش عملکرد برای کاربران سایت میشود، مخصوصاً در شبکههایی با تأخیر زیاد (مثل شبکه موبایلها). این کار همچنین موجب بهبود جایگاه سایت در موتورهای جستجو میشود که تست سرعت را در نتایج خود لحاظ میکنند. تنظیم هدرهای کش مرورگر یکی از توصیههای مهم Google PageSpeed و ابزارهای تست عملکرد مشابه است.
اطلاعات کاملتر درباره ماژول هدر را در مستندات رسمی ماژول Nginx Headers ببینید.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران