آموزش فعال سازی کش از طریق htaccess - بدون افزونه!

آموزش فعال سازی کش از طریق htaccess – بدون افزونه!

در این مقاله قصد داریم شما را با فعال سازی کش از طریق htaccess آشنا کنیم، همچنین اگر به دنبال فعال کردن کش وردپرس بدون افزونه هستید این بهترین مقاله برای شماست. یکی از فاکتور های مهم امتیاز دهی ابزارهایی مانند GTMetrix و Google PageSpeed Insights فعال بود کش سایت شما است.

این ابزار های معمولا امتیازهایی را بر اساس بهینه سازی تصاویر شما و یا فشرده سازی فایل های html, css, و JavaScript به سایت شما می دهند. اما موردی که تقریبا بیشتر تاثیر را در امتیاز نهایی سایت شما دارد، فعال بودن کش سایت شما است!

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

البته در ابتدا شاید لازم باشد شما با واژه و مفهوم کش آشنا شوید که به همین منظور ما یک مقاله برای شما در این خصوص آماده کرده ایم، همچنین در صورتی که با فایل htaccess آشنایی ندارید پیشنهاد می کنیم مقاله جامع آشنایی با فایل htaccess را نیز مطالعه نمایید.

کش یا حافظه پنهان چیست؟

سایت شما حاوی فایل‌هایی است که اغلب تغییر می کنند اما در خصوص برخی از فایل ها اینگونه نیست تقریبا به مدت زیادی ثابت می مانند برای مثال لوگو سایت شما، تصاویر و تبلیغاتی که ممکن است در سربرگ یا فوتر شما قرار داشته باشند. و همچنین فایل هایی مانند فایل های css, و JavaScript که در تمامی صفحات شما بارگذاری می شوند اما غالبا تغییری نمی کنند.

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

چگونگی عملکرد کش سایت

هر آنچه که باید در مورد کش سایت بدانید + اهمیت Website Cache

با فعال کردن حافظه پنهان مرورگر یا کش، بازدید کننده در بازدیدهای بعدی وقتی روی صفحه دیگری از سایت شما کلیک می کند که از فایل های که در حافظه پنهان ذخیره شده اند استفاده می کند و دیگر درخواستی به سمت سرور ارسال نمی شود. از طرفی در بازدید های بعدی دیگر نیازی به دانلود محتوا برای کاربر نیست که این موجب افزایش چند برابری سرعت سایت شما خواهد شد.

فعال سازی کش از طریق htaccess

روش های گوناگونی برای فعال کردن کش سایت وجود دارد که در این مقاله قصد داریم نحوه فعال سازی کش از طریق htaccess را به شما نشان دهیم. البته فعال سازی کش از طریق htaccess شامل روش های گوناگونی است که ما در این مقاله بهترین روش ها را برای شما گرد آوری کرده ایم.

شما برای فعال سازی کش از طریق htaccess باید فایل htaccess را در شاخه اصلی وب سایت خود ویرایش کنید که مسلما نیاز است تا ابتدا اطلاعاتی در خصوص این فایل و نحوه ویرایش آن داشته باشید پس به شما توصیه می کنیم قبل از ادامه مقاله حتما مقاله زیر را مطالعه نمایید.

و اما در صورتی که در صورتی که مقاله ذکر شده را مطالعه کرده اید و یا با این فایل آشنایی دارید با ما همراه باشید با آموزش روش های مختلف فعال سازی کش از طریق htaccess.

استفاده از Expires headers برای کش سایت از طریق htaccess

آموزش فعال سازی کش از طریق htaccess - بدون افزونه!

پس از بررسی آنالیز ابزارهای امتیاز دهی و وبسایت ها متوجه شدیم که تصاویر کمترین تغییر را داشته و تقریبا سالی یک بار تغییر می کنند، و فایل های javascript و css در زمان کمتری تغییر می کنند به همین دلیل تنظیمات کدهای زیر به صورت کلی قرار داده شده که شما در صورت نیاز می توانید مدت زمان انقضا را تغییر دهید.

لطفا قبل از ویرایش فایل htaccess از فایل خود یک کپی تهیه کنید تا در صورت بروز مشکل نسخه پشتیبان را جایگزین کنید.

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.

پروژه محور - ارتباط مستقیم با مدرس

# BROWSER CACHING USING EXPIRES HEADERS
<IfModule mod_expires.c>
    ExpiresActive On

    # Images
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
  
    # Video
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/mpeg "access plus 1 year"

    # CSS, JavaScript
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"

    # Others
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

این اولین روش برای فعال سازی کش از طریق htaccess است، اما بهترین روش نیست پس با ما همراه باشید، شما می توانید کد بالا را از طریق تغییر مقادیر 1 year , 1 month , 1 week یا 1 day به مقدار مورد نیاز خود شخصی سازی کنید.

استفاده از Cache-Control headers

استفاده از Cache-Control headers

حال در سطر بالا به روش های بهتری برای فعال سازی کش از طریق htaccess اشاره شد، یعنی Cache-Control اما چرا استفاده از روش Cache-Control بهتر است؟ Cache-Control انعطاف پذیری و فرمان پذیری بیشتری نسبت به Expires دارد، یک نمونه کد را در این خصوص با هم ببینیم:

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c> 
    # One year for image and video files
    <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp)$">
        Header set Cache-Control "max-age=31536000, public"
    </filesMatch>

    # One month for JavaScript and PDF files
    <filesMatch ".(js|pdf)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>

    # One week for CSS files
    <filesMatch ".(css)$">
        Header set Cache-Control "max-age=604800, public"
    </filesMatch>
</ifModule>

در این به جای استفاده از مقادیری چون year و غیره از max-age و مقدار آن استفاده می شود در حقیقت مقادیری که مشاهده می کنید با مقادیر کد قبلی یکسان است، حال نحوه محاسبه به چه صورت است؟

60 (ثانیه در دقیقه) x 60 (دقیقه در ساعت) x 24 (ساعت در روز) x 30 (روز در ماه) = 2592000

حتی خود گوگل نیز استفاده از Cache-Control را در Google Developers site توصیه کرده است.

Cache-Control به عنوان بخشی از HTTP/1.1 تعریف شده و عناوین قبلی را جایگزین می کند (Expires). همه مرورگرهای مدرن از Cache-Control پشتیبانی می کنند ، بنابراین شما برای فعال سازی کش از طریق htaccess تنها به استفاده از Cache-Control نیاز دارید.

Google Developers website

روش ایمن برای فعال سازی کش از طریق htaccess

ارائه دهنده میزبانی هلندی Byte توصیه می کند که برای فعال سازی کش از طریق htaccess از Expires و Cache-Control به صورت همزمان در سرورهای خود استفاده کنید، تا اطمینان حاصل شود که حافظه پنهان مرورگر، مناسب سرورهایی است که ممکن است از یکی از موارد پشتیبانی نکنند. این یک روش مناسب برای اعمال این تنظیمات است:

# BROWSER CACHING USING EXPIRES HEADERS
<IfModule mod_expires.c>
    ExpiresActive On
  
    # Images
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType image/x-icon "access plus 1 year"
  
    # Video
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/mpeg "access plus 1 year"

    # CSS, JavaScript
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"

    # Others
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

# BROWSER CACHING USING CACHE-CONTROL HEADERS
<ifModule mod_headers.c> 
    # One year for image and video files
    <filesMatch ".(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp)$">
        Header set Cache-Control "max-age=31536000, public"
    </filesMatch>

    # One month for JavaScript and PDF files
    <filesMatch ".(js|pdf)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesMatch>

    # One week for CSS files
    <filesMatch ".(css)$">
        Header set Cache-Control "max-age=604800, public"
    </filesMatch>
</ifModule>

آیا ETag را غیر فعال کنیم؟

لازم به ذکر است که مقاله Byte همچنین توصیه کرده است که ETag را با اضافه کردن این خطوط به فایل .htaccess غیرفعال کنید، البته در صورتی که شما این کار را انجام دهید با پیغامی مشابه زیر در GTmetrix مواجه خواهید شد.

همه منابع استاتیک باید دارای یک عنوان Last-Modified یا ETag باشند. با این کار مرورگرها می توانند از مزایای کامل حافظه پنهان استفاده کنند.

GTmetrix
# REMOVE AND DISABLE ETAG
Header unset ETag
FileETag None
# Remove Last-Modified
Header unset Last-Modified

غیر فعال کردن کش از طریق htaccess

شما با فعال سازی کش از طریق htaccess آشنا شدید اما گاه نیاز است که این قابلیت را غیر فعال کنید برای غیر فعال سازی کش از طریق htaccess از کد زیر استفاده کنید:

# DISABLE CACHING
<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

<FilesMatch "\.(css|flv|gif|htm|html|ico|jpe|jpeg|jpg|js|mp3|mp4|png|pdf|swf|txt)$">
    <IfModule mod_expires.c>
        ExpiresActive Off
    </IfModule>
    <IfModule mod_headers.c>
        FileETag None
        Header unset ETag
        Header unset Pragma
        Header unset Cache-Control
        Header unset Last-Modified
        Header set Pragma "no-cache"
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
    </IfModule>
</FilesMatch>

جمع بندی

دلیل اصلی انتشار مقاله “فعال سازی کش از طریق htaccess” این بود که بسیاری از کاربران، و مخصوصا کاربرانی که از وردپرس استفاده می کنند تمایلی به استفاده از افزونه ها ندارند، البته در این خصوص به نظر استفاده از کدهای ذکر شده نیز منطقی تر بوده و شما با کدهایی در این مقاله در اختیار شما قرار گرفت می توانید تمام عملکرد یک افزونه را پیاده سازی کنید.

در صورتی که از وردپرس استفاده می کنید و تمایلی به فعال سازی کش از طریق htaccess ندارید می توانید از مقاله بهترین افزونه های کش در وردپرس استفاده کنید.

توصیه ما نیز فعال سازی کش از طریق htaccess با استفاده از Cache-Control است، امیدواریم که این مقاله برای شما مفید واقع شده باشد.

خدمات طراحی سایت

طراحی سایت مطابق با استانداردهای روز برنامه‌نویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان

4 Comments

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

سلام. ممنونم بابت مقاله خوبی که نوشتید. سوال من این هستش که اگر کش مرورگر کاربر غیر فعال باشه آیا این کدها کارایی دارند؟ من خودم چون در حال کد نویسی فایل های سی اس اس بودم برای افزایش سرعت کارم بطور موقت کش مرورگر رو غیر فعال کردم و روشهای بالا رو انجام دادم ولی اطلاعات کش نمیشن. اگر قرار هستش که حتما کش مرورگر فعال باشه در اینصورت مرورگر اتوماتیک خودش کش رو انجام میده پس چه نیازی به کدهای بالا هستش؟ ممنونم موفق باشید.

  • سلام، خواهش میکنم

    اگر کش مرورگر کاربر غیر فعال باشه آیا این کدها کارایی دارند؟

    خیر

    اگر قرار هستش که حتما کش مرورگر فعال باشه در اینصورت مرورگر اتوماتیک خودش کش رو انجام میده پس چه نیازی به کدهای بالا هستش؟

    با استفاده از کدهای بالا شما میتونید نوع فایل و مدت زمان کش شدن فایل‌ها رو تغییر بدید که باعث میشه سرعت سایت شما تا چند برابر افزایش پیدا کنه،