افزایش سرعت با ذخیره ساز مرورگر

ذخیره ساز مرورگر چیست؟

  • در حالیکه کاربر یک از صفحه وب بازدید می کند ذخیره ساز مرورگر فایل های منابع وب سایت را بر روی یک کامپیوتر محلی نگهداری می کند.
  • "افزایش سرعت" ذخیره ساز مرورگر زمانی است که یک وب مستر به مرورگرها دستور میدهد که چگونه منابع آنها باید مورد بررسی قرار گیرند.


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


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

هنگامی که شما از افزایش سرعت توسط ذخیره ساز مرورگر «leverage browser caching» استفاده میکنید. صفحات شما بسیار سریعتر برای بازدیدکنندگان تکراری بارگذاری می‌شود و همینطور صفحه های دیگری که از منابع مشابه را به اشتراک میگذارند.

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

 
نحوه استفاده از ذخیره سازی مرورگر

۱. سربرگ های درخواست منابع خود برای استفاده از ذخیره سازی را تغییر دهید.
۲. استراتژی ذخیره سازی خود را بهینه کنید.


سربرگ های درخواست منابع خود برای استفاده از ذخیره سازی را تغییر دهید

برای بیشتر اشخاص، راه فعال کردن ذخیره سازی، افزودن کد به فایلی به نام htaccess. در میزبان/ سرور وبسایت شماست.
این به معنی رفتن به مدیریت فایل ( یا استفاده از کلاینت FTP ) در کنترل پنل میزبان شما بوده و ویرایش فایل htaccess. است، فایلی که وظیفه کنترل چیزهای مهمی برای وبسایت شما را دارد.

 
ذخیره سازی مرورگر برای htaccess.

کد زیر به مرورگرهای شما میگوید که چه چیزهایی را ذخیره سازی کرده و چه زمانی آن‌ها را به "یاد" داشته باشد. این تکه کد باید در بالای فایل htaccess. شما اضافه گردد.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##



فایل htaccess. را ذخیره کرده و وبسایت خود را ریفرش کنید.


چگونگی تنظیم زمان های مختلف ذخیره سازی برای انواع فایل های مختلف

در کد بالا میتوانید ببینید دوره های زمانی مانند ۱سال و یا ۱ ماه وجود دارد. این زمانبندی ها با نوع فایل‌ها مرتبط هستند. به عنوان مثال، کد بالا بیان میکند که یک فایل jpg. (تصویر) باید برای یکسال ذخیره شود.
اگر تمایل دارید این زمانبندی ها را تغییر دهید و مثلاً میخواهید تصاویر jpg شما برای یک ماه کش شوند، به سادگی متوانید ۱ سال را ۱ ماه جایگزین کنید. مقادیر بالا برای اغلب وبسایت ها و وبلاگ ها بهینه شده است.

 
روش ذخیره سازی متناوب برای htaccess.

روش فوق "Expires" نامیده می‌شود و برای اکثر افرادی که از htaccess. استفاده میکنند عملیات ذخیره سازی را انجام می‌دهد.

پس از اینکه با ذخیره سازی راحت‌تر بودید، شاید تمایل داشته باشید Cache-Control (کنترل-ذخیره ساز) را امتحان کنید، یکی دیگر از روش‌های ذخیره سازی که گزینه های بیشتری را در اختیار شما قرار میدهد.
همچنین ممکن است که روش Expires برای سرور شما کار نکند، در این صورت ممکن است بخواهید از Cache-Control استفاده کنید.

 
کنترل-ذخیره ساز Cache-Control

کنترل-ذخیره ساز به ما اجازه میدهد که کنترل بیشتری بر روی ذخیره ساز مرورگر خود داشته باشیم ، هنگامی که تنظیمات انجام شد بسیاری از اشخاص این روش را ساده‌تر می‌بینند.

مثالی برای استفاده در فایل htaccess.


# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

کد بالا یک سربرگ کنترل ذخیره ساز را بسته به نوع فایل تنظیم میکند.


کنترل-ذخیره ساز چگونه عمل میکند


بیایید تکه کد بالا را خط به خط بنویسیم.

# 1 Month for most static assets

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

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

خط بالا میگوید که اگر فایل یکی از این نوع ها باشد، پس ما کاری با آن انجام خواهیم داد…
بخش مهمی از این خط این است که متوجه شوید که فایلهای با پسوندهای مختلفی در لیست وجود دارد (css, js, jpeg, png و غیره) و دستورالعمل های ذخیره سازی که به دنبال آن می‌آید بر روی همین نوع فایل‌ها اعمال می‌شود. به عنوان مثال، اگر شما تمایل ندارید فایل‌های jpg خود را برای این مدت ذخیره سازی کنید، میتوانید jpg را از این خط حذف کنید و یا اگر مایل هستید که html را به این اضافه کنید، میتوانید به سادگی html را به خط اضافه کنید.

Header set Cache-Control "max-age=2592000, public"

در خط بالا جایی است که سربرگ های واقعی وارد شده و مقداردهی می‌شوند.

  • بخش "Header set Cache-Control" سربرگ را تنظیم میکند.
  • بخش "max-age=۲۵۹۲۰۰۰" مشخص میکند چه مدت باید کش شوند (به ثانیه)، در این مورد ما کش را برای یک ماه قرار دادیم که "۲۵۹۲۰۰۰" ثانیه میشود.
  • بخش "public" اعلام میکند که این عمومی است (که خوب است اگر میخواهید این را کش کنید).
</filesMatch>

خط بالا دستورات را بسته و بلوک کد را به پایان می‌رساند.


مشکلات متداول ذخیره سازی

اگر شما html و تصاویر خود را برای کش کردن به مدت یکسال و یا زمان طولانی‌تری لیست کنید، به یاد داشته باشید که این میتواند به این معنی باشد که اگر شما تغییراتی در صفحات خود انجام دهید ممکن است توسط همه کاربران دیده نشوند. چون بجای اینکه فایل‌های اصلی وبسایت شما را ببینند فایل‌های ذخیره شده در مرورگر را نگاه می کنند. اگر فایل‌هایی دارید که گاه به گاه بر روی آن‌ها تغییراتی اعمال میکنید (مثل فایل CSS) می‌توانید با استفاده از URL fingerprinting این مشکل را برطرف کنید.

 
URL fingerprinting

با داشتن یک نام منحصر به فرد، یک فایل جدید(کش نشده) امکان‌پذیر است. برای مثال اگر فایل‌های CSS ما "main.css" نامیده میشود، میتوانیم آن را "main-١.css" نامگذاری کنیم. دفعه بعدی که این فایل را تغییر دهیم میتوانیم آن را "main-٢.css" نامگذاری کنیم. این روش برای فایل‌هایی که گاهی اوقات تغییر میکنند مفید است.


روش‌های ذخیره سازی

بسیار مهم است که یک Expires و یا Cache-Control: max-age ، و یک Last-Modified و یا ETag ، برای تمام منابع قابل ذخیره سازی تعریف شود. بیش از حد لازم است که هر دو Expires و Cache-Control: max-age ، یا Last-Modified و Etag تعریف شود.

اولین شخصی باشید که نظر می دهد

نوشته های مرتبط