افزودن تاریخ انقضا در هدر سایت

افزودن تاریخ انقضا در هدر

تاریخ انقضا در هدر فایل‌ها این اجازه رو به مرورگر می‌دهد تا بداند چه زمانی به جای استفاده از فایل کش شده‌اش به سرور درخواست دریافت فایل را بدهد. مزایای افزودن تاریخ انقضا در هدر فایل:

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

تاریخ انقضا هدر چیست؟

تاریخ انقضا به مرورگرها می‌گوید که بهتر است که یک فایل خاصی را از سرور درخواست کنند و یا از کش خود مرورگر بگیرد. تاریخ انقضا نه تنها برای کاهش بار دانلودها از سرور است (دانلود مرتب و تکراری فایل‌های یکسان از سرور که هیچ‌گونه تغییری درون آن‌ها صورت نگرفته است، تلف کردن زمان بارگذاری سایت و کاهش سرعت سایت است) بلکه برای کاهش تعداد درخواست‌های HTTP از سرور هم هست.

هنگامی که شما از یک سایت بازدید می‌کنید، مرورگر شما مسئول ایجاد ارتباط با وب سرور است تا همه فایل‌های مورد نیاز را دریافت (دانلود) کند. سپس مرورگر باید فایل‌های دریافتی را پردازش (کامپایل) کند تا سایت برای شما به نمایش دربیاید. صفحات سایت‌ها امروزه گرافیکی‌تر می‌شوند، به همین دلیل است که مرورگر شما باید فایل‌های بیشتری از وب سرور دریافت و کامپایل کند.

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

تاریخ انقضا هدر فایل چگونه کار می‌کند؟

تاریخ انقضا هدر عملکرد نسبتاً ساده‌ای دارد. تاریخ انقضا به مرورگرها مقدار زمانی که فایل را در کش خود نگهداری کنند را تعیین می‌کنند، بنابراین برای دیدن دوباره صفحه نیازی به دریافت دوباره فایل‌ها نیست. حق با شماست اگر فکر کنید که تاریخ انقضا در هدر فایل‌ها هیچ کمکی در افزایش سرعت سایت در اولین بازدید ندارد؛ چون در اولین بازدید باید تمامی فایل‌ها دریافت شوند. استفاده از تاریخ انقضا سرعت سایت را در دفعات بعدی بازدید بهبود می‌بخشد.

شما می‌توانید تاریخ انقضا را برای یک یا چند فایل خاص اعمال کنید و یا می‌توانید آن‌ را برای یک نوع خاص فایل اعمال کنید. سپس هنگامی که مرورگر به سایت می‌آید، می‌تواند ببیند که آن نوع فایل خاص را آخرین بار در چه وقتی دریافت کرده است.

اگر به تازگی آن فایل را دریافت کرده است، آن را از حافظه کش خود به نمایش درمی‌آورد و اگر شما خیلی وقت است که از سایت بازدیدی نکرده‌اید و تاریخ انقضا فایل‌ها در کش مرورگر گذشته باشد، مرورگر تمامی فایل‌های سایت را از وب سرور درخواست و جدیدترین نسخه (همراه با تغییرات جدید را) دریافت می‌کند و به شما نشان خواهد داد. ایده‌آل این است که شما برای چیزهایی که زمان زیادی تغییری نمی‌کنند، تاریخ انقضای بلندی (زمان زیادی در حافظه کش بماند) تعیین کنید فایل‌هایی مثل لوگو رنگ و…. برای چیزهایی که در معمولاً در آن‌ها تغییراتی اعمال می‌شود، تاریخ انقضای کوتاهی تعیین کنید.

چرا تاریخ انقضا هدر مهم است؟

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

چطور به هدر فایل‌ها تاریخ انقضا اضافه کنیم؟

نخست شما باید مشخص کنید که کدام یک از فایل‌ها یا چه نوع از فایل‌های سایت هر از چندگاهی به روزرسانی می‌شوند و کدام‌یک تغییری پیدا نمی‌کنند. یک لیست از فایل‌هایی که تقریباً همه سایت‌ها دارند:

• jpg
• gif
• png
• favicon/ico
• javascript
• css

برای اینکه نشان دهیم که چطور به هدر فایل‌ها تاریخ انقضا اضافه کنیم، ما از همین نوع فایل‌هایی که معمول هست استفاده می‌کنیم. معمولاً عکس‌های روی سایت (png,gif,jpg) تغییری نمی‌کنند، favicon تقریباً میشه گفت هرگز تغییری نمی‌کند، فایل‌های جاوا اسکریپت‌ گه‌گاهی تغییر می‌کنند و فایل‌های css تغییرات زیادی می‌بینند.
در این آموزش ما تاریخ انقضا را درون فایل htaccess. تعریف می‌کنیم. فایل htaccess. یک فایل مخفی است که اغلب در ریشه (پوشه public_html) سایت موجود می‌باشد. بهتر است قبل از هرگونه تغییری در این فایل از این فایل نسخه پشتیبان تهیه کنید.
حال فایل htaccess. را ویرایش کنید و کدهای زیر را درونش بنویسید:

<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresDefault "access plus 1 month" 
</IfModule>

فعال کردن قابلیت تاریخ انقضا

خوب اول ما این قابلیت تاریخ انقضا رو فعال می‌کنیم [ExpiresActive On] بعد یک تاریخ انقضای پیش‌فرض تعیین می‌کنیم [ExpiresDefault “access plus 1 month”] این مقدار پیش‌فرض روی فایل‌هایی که تاریخ انقضایی برایشان تعیین نشده باشد، اعمال می‌گردد. حال ما می‌خواهیم خط دستوراتی برای تعیین تاریخ انقضا به این دستورات اضافه کنیم. در ادامه کدی که در قسمت قبل اضافه کردید کد زیر را بنویسید:

ExpiresByType image/x-icon "access plus 1 year" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType text/css "access 1 month" 
ExpiresByType application/javascript "access plus 1 year"

کد [ExpiresByType image/x-icon “access plus 1 year”] برای فایل‌های آیکون مثل favicon تاریخ انقضای یک‌ساله تعریف می‌کند و کد [ExpiresByType image/gif “access plus 1 month”] برای فایل‌های عکس از نوع gif تاریخ انقضای یک‌ماهه تعریف می‌کند و کد [ExpiresByType image/png “access plus 1 month”] برای فایل‌های عکس از نوع png تاریخ انقضای یک‌ماهه تعریف می‌کند و کد [ExpiresByType image/jpg “access plus 1 month”] برای فایل‌های عکس از نوع jpg تاریخ انقضای یک‌ماهه تعریف می‌کند و کد [ExpiresByType image/jpeg “access plus 1 month”] برای فایل‌های عکس از نوع jpeg تاریخ انقضای یک‌ماهه تعریف می‌کند و کد [ExpiresByType text/css “access 1 month”] برای فایل‌های css تاریخ انقضای یک‌ماهه تعریف می‌کند و کد [ExpiresByType application/javascript “access plus 1 year”]  برای فایل‌های جاوا اسکریپت تاریخ انقضای یک‌ساله تعریف می‌کند.

کد پایان درون فایل htaccess. باید شبیه به کد زیر شده باشد:

<IfModule mod_expires.c> 
ExpiresActive On 
ExpiresDefault "access plus 1 month" 
ExpiresByType image/x-icon "access plus 1 year" 
ExpiresByType image/gif "access plus 1 month" 
ExpiresByType image/png "access plus 1 month" 
ExpiresByType image/jpg "access plus 1 month" 
ExpiresByType image/jpeg "access plus 1 month" 
ExpiresByType text/css "access 1 month" 
ExpiresByType application/javascript "access plus 1 year" 
</IfModule>

موفق و سربلند باشید.