هرچه بارگذاری وبسایت سریعتر باشد، احتمال باقیماندن کاربر بیشتر میشود. زمانی که سایتها مملو از تصاویر و محتوای تعاملی هستند که توسط اسکریپتها در پسزمینه بارگذاری میشوند، نمایش یک صفحهی وب کار سادهای نیست و شامل درخواست بسیاری از فایلها از سرور بهصورت جداگانه است. کاهش تعداد درخواستها یکی از راههای افزایش سرعت سایت است.
یکی از راههای بهبود عملکرد سایتها، فعال کردن کش مرورگر است. کش مرورگر به مرورگر این امکان را میدهد که نسخههای محلی فایلهایی که قبلاً دانلود شدهاند را مجدد استفاده کند و هر بار آنها را از سرور درخواست نکند. برای این کار باید هدرهای جدیدی را به پاسخهای HTTP اضافه کنید تا به مرورگر نحوه رفتار را اعلام نمایید.
ماژول header پارمین کلود در Nginx به این کار کمک میکند. با استفاده از این ماژول میتوانید هر هدر دلخواهی را به پاسخ اضافه کنید، اما کاربرد اصلی آن تنظیم صحیح هدرهای مربوط به کش است. در این آموزش، از ماژول header برای فعال کردن کش مرورگر استفاده خواهیم کرد.
پیشنیازها
- یک سرور CentOS 8 و یک کاربر sudo غیرریشه داشته باشید.
- Nginx را نصب کرده باشید.
ساخت فایلهای آزمایشی
در این مرحله، چند فایل تست در دایرکتوری پیشفرض Nginx ایجاد میکنیم تا رفتار پیشفرض و بعداً عملکرد کش مرورگر را بررسی کنیم.
Nginx برای تشخیص نوع فایلهایی که در شبکه سرو میشوند، محتویات فایل را آنالیز نمیکند چون این کار بسیار کند خواهد بود. بلکه با توجه به پسوند فایل، نوع MIME آن را مشخص میکند.
پس محتوای فایلهای تست اهمیتی ندارد، فقط کافیست نام فایلها مناسب باشد. مثلاً میتوانیم Nginx را فریب دهیم که یک فایل خالی را تصویر یا استایل بداند.
ساخت فایل test.html در دایرکتوری پیشفرض Nginx با دستور truncate (این پسوند یعنی یک صفحه HTML):
truncate -s 0 /usr/share/nginx/html/test.html
حال چند فایل تست دیگر میسازیم: یک فایل jpg، یک فایل css و یک فایل js:
truncate -s 0 /usr/share/nginx/html/test.jpg truncate -s 0 /usr/share/nginx/html/test.css truncate -s 0 /usr/share/nginx/html/test.js
بررسی رفتار پیشفرض Nginx برای کشینگ
به طور پیشفرض، همه فایلها رفتار کش یکسان دارند. برای بررسی این موضوع، از فایل HTML که ساختیم استفاده میکنیم. البته میتوانید این را روی هر فایل تست اجرا کنید.
آیا test.html با اطلاعاتی در مورد مدت زمان کش در مرورگر سرو میشود؟ فرمان زیر برای درخواست فایل از سرور پارمین کلود و نمایش هدرهای پاسخ:
curl -I http://localhost/test.html
در خروجی، چند هدر HTTP مشاهده میشود. در خط دوم آخر، هدر ETag وجود دارد که یک شناسهی منحصر به فرد برای این نسخه فایل است. با تکرار فرمان قبل، مقدار ETag یکسان میماند.
وقتی با مرورگر وب از سایت بازدید میکنید، مقدار ETag ذخیره شده و همراه با درخواست، هدر If-None-Match به سرور ارسال میشود تا اگر فایل تغییر نکرده بود، سرور دستور دهد مرورگر همان فایل محلی را استفاده کند.
شبیهسازی این فرآیند با فرمان زیر (مقدار ETag را بر اساس پاسخ قبلی قرار دهید):
curl -I -H "If-None-Match: \"\"" http://localhost/test.html
این بار پاسخ متفاوت است:
HTTP/1.1 304 Not Modified ...
در این حالت، سرور فایل را مجدد ارسال نمیکند و فقط به مرورگر اعلام میکند که میتواند فایل قبلی را استفاده کند.
این کار حجم ترافیک شبکه را کم میکند اما برای کشینگ قوی کافی نیست؛ چون مرورگر هر بار باید از سرور اجازه بگیرد. این درخواست-پاسخ زمانبر است.
افزودن هدرهای کنترل کش با header module
علاوه بر هدر ETag، دو هدر Cache-Control و Expires نیز وجود دارند که برای کنترل کشینگ استفاده میشوند. Cache-Control نسخه جدیدتر و با قابلیتهای بیشتر است.
اگر این هدرها ست شوند، مرورگر میتواند فایل را برای مدت معین (حتی دائمی) بدون درخواست مجدد نگه دارد. اگر نباشند مرورگر هر بار از سرور وضعیت جدید را میپرسد.
ماژول header یک هستهای و همیشه همراه Nginx نصب است. برای پیکربندی، فایل server block Nginx را با vi یا هر ویرایشگر دلخواه باز کنید:
vi /etc/nginx/nginx.conf
بخش server را بیابید.
دو بخش جدید اضافه کنید: یک map قبل از سرور برای تعیین مدت کش انواع فایلها، و یک بخش داخل 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 تعیین شده؛ این مقدار مخصوصاً باعث عدم کش شدن میشود تا مرورگر همیشه بررسی کند سایت جدید است یا نه.
- برای متنهای استایل css و کدهای جاوااسکریپت js مقدار max ثبت شده یعنی مرورگر این فایلها را تا حد ممکن کش میکند. این کار تعداد درخواستها را بسیار کم میکند چون معمولاً این فایلها زیاد هستند.
- برای ~image/ و ~font/ (عبارت منظم)، انواع فایلهایی که شامل image/ یا font/ در نام MIME خود هستند، مقدار max تنظیم شده است تا تصاویر و فونتها نیز کش شوند.
توجه: این مقادیر فقط نمونهای از رایجترین MIMEها در وبسایتها هستند. برای مشاهده لیست کامل انواع MIME به این صفحه مراجعه کنید یا سایر موارد را طبق نیاز اضافه کنید.
در داخل بخش server، دستور expires از مقدار متغیر $expires استفاده میکند تا بسته به نوع فایل، هدر مناسب تنظیم شود.
فایل را ذخیره و ببندید.
برای اعمال تغییرات Nginx را ریستارت کنید:
sudo systemctl restart nginx
بررسی صحت تنظیمات کش مرورگر
دوباره با همان درخواست قبلی فایل test.html را بررسی کنید:
curl -I http://localhost/test.html
این بار هدرهای زیر اضافه شدهاند:
- هدر Expires شامل تاریخی در گذشته است.
- Cache-Control مقدار no-cache دارد؛ یعنی مرورگر همیشه برای اطلاع از نسخه جدید با سرور هماهنگ میشود.
فرق پاسخ با فایل تصویر تست به شکل زیر خواهد بود:
curl -I http://localhost/test.jpg
در این خروجی:
- Expires تاریخی دور در آینده دارد.
- Cache-Control با مقدار max-age اعلام میکند مرورگر مدت مشخص فایل را کش کند و بار دیگر آن را از سرور نخواهد خواست.
همین رفتار برای test.js و test.css نیز وجود دارد و هر دو کشینگ فعال دارند.
جمعبندی
هدرهای Cache-Control و Expires اکنون بهدرستی تنظیم شدهاند؛ سایت شما با این کار از مزایای سرعت بالا و کاهش درخواست سرور بهرهمند میشود. این مقادیر را میتوانید بر اساس نوع محتوای سایت شخصیسازی کنید اما تنظیمات این مقاله نقطه شروع مناسبی است.
ماژول header برای افزودن هدرهای دلخواه به پاسخ کاربردی است اما مهمترین استفاده آن تنظیم هدرهای کشینگ است. این کار به افزایش سرعت سایت به خصوص در شبکههایی با تأخیر زیاد (مثل اینترنت موبایل) کمک میکند و میتواند رتبه سایت شما را در موتورهای جستجو که به سرعت سایت اهمیت میدهند بهبود ببخشد. فعالسازی کش مرورگر یکی از توصیههای کلیدی گوگل PageSpeed و ابزارهای سنجش عملکرد است.
اطلاعات بیشتر درباره ماژول header را در مستندات رسمی Nginx بخوانید.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران