1. Home
  2. Website Speed Up
  3. Html
  4. ব্রাউজার ক্যাশিং

ব্রাউজার ক্যাশিং

Thought for 1 secondThought for 1 secondওয়েবসাইটের জন্য ক্যাশিং প্রয়োগ করার একটি সহজ এবং কার্যকরী পদ্ধতি হল ব্রাউজার ক্যাশিং। এটি কিভাবে কাজ করে এবং কিভাবে আপনি এটি প্রয়োগ করতে পারেন, তা নিচে বিস্তারিতভাবে ব্যাখ্যা করা হলো:

ব্রাউজার ক্যাশিং কি?

ব্রাউজার ক্যাশিং হল একটি প্রক্রিয়া যেখানে ওয়েব ব্রাউজার আপনার ওয়েবসাইটের কিছু অংশ (যেমন ইমেজ, CSS ফাইল, JavaScript ফাইল) নির্দিষ্ট সময়ের জন্য সংরক্ষণ করে রাখে। এর ফলে, পরবর্তী বার যখন কোন ব্যবহারকারী আপনার ওয়েবসাইট ভিজিট করে, তখন এই ফাইলগুলি আবার ডাউনলোড করার প্রয়োজন হয় না, যা ওয়েবসাইটের লোড হওয়ার সময় কমিয়ে দেয়।

কিভাবে ব্রাউজার ক্যাশিং প্রয়োগ করবেন?

ব্রাউজার ক্যাশিং প্রয়োগ করার জন্য আপনাকে আপনার ওয়েব সার্ভারের কনফিগারেশন পরিবর্তন করতে হবে। এটি করার দুটি প্রধান উপায় আছে:

  1. .htaccess ফাইল ব্যবহার করে (Apache সার্ভারের জন্য)
  2. web.config ফাইল ব্যবহার করে (IIS সার্ভারের জন্য)

আমরা এখানে Apache সার্ভারের জন্য .htaccess ফাইলের উদাহরণ দেখব, কারণ এটি বেশি ব্যবহৃত হয়।

.htaccess ফাইলে ক্যাশিং কনফিগারেশন

  1. প্রথমে, আপনার ওয়েবসাইটের রুট ডিরেক্টরিতে একটি .htaccess ফাইল তৈরি করুন (যদি আগে থেকে না থাকে)।
  2. এই ফাইলে নিম্নলিখিত কোড যোগ করুন:
<IfModule mod_expires.c>
  ExpiresActive On

  # ইমেজের জন্য ক্যাশ
  ExpiresByType image/jpg "access plus 1 year"
  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"

  # CSS, JavaScript, এবং টেক্সট ফাইলের জন্য ক্যাশ
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType text/plain "access plus 1 month"

  # HTML এবং XML ফাইলের জন্য ক্যাশ
  ExpiresByType text/html "access plus 0 seconds"
  ExpiresByType text/xml "access plus 0 seconds"

  # অন্যান্য সকল ফাইলের জন্য ডিফল্ট ক্যাশ
  ExpiresDefault "access plus 2 days"
</IfModule>

কোড ব্যাখ্যা:

  1. <IfModule mod_expires.c>: এই লাইনটি চেক করে যে mod_expires মডিউল সক্রিয় আছে কিনা। এই মডিউলটি ক্যাশিংয়ের জন্য প্রয়োজনীয়।
  2. ExpiresActive On: এই লাইনটি ক্যাশিং সক্রিয় করে।
  3. ExpiresByType: এই ডিরেক্টিভ ব্যবহার করে আমরা বিভিন্ন ধরনের ফাইলের জন্য আলাদা আলাদা ক্যাশ সময়সীমা সেট করতে পারি।

উদাহরণ: ExpiresByType image/jpg "access plus 1 year"
এর মানে হল JPG ইমেজগুলি 1 বছরের জন্য ক্যাশ করা হবে।

  1. ExpiresDefault: যেসব ফাইল টাইপের জন্য নির্দিষ্ট করে কিছু বলা হয়নি, সেগুলির জন্য এই ডিফল্ট ক্যাশ সময় প্রযোজ্য হবে।

ব্যবহারিক উদাহরণ:

ধরুন, আপনার একটি HTML ফাইল আছে যেখানে একটি CSS ফাইল এবং একটি ইমেজ ব্যবহার করা হয়েছে:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ক্যাশিং উদাহরণ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>ব্রাউজার ক্যাশিং উদাহরণ</h1>
    <img src="example-image.jpg" alt="উদাহরণ ছবি">
</body>
</html>

উপরের .htaccess কনফিগারেশন অনুযায়ী:

  1. styles.css ফাইলটি 1 মাস পর্যন্ত ক্যাশ করা হবে।
  2. example-image.jpg ফাইলটি 1 বছর পর্যন্ত ক্যাশ করা হবে।
  3. HTML ফাইলটি ক্যাশ করা হবে না (0 seconds), যাতে কন্টেন্ট আপডেট হলে তা তৎক্ষণাৎ দেখা যায়।

সতর্কতা:

  1. ক্যাশিং সময়সীমা সেট করার সময় সাবধান থাকুন। যেসব ফাইল ঘন ঘন পরিবর্তন হয়, সেগুলির জন্য কম সময়ের ক্যাশ ব্যবহার করুন।
  2. যদি আপনি কোন ক্যাশ করা ফাইল আপডেট করেন, তবে ফাইলের নাম পরিবর্তন করুন (যেমন: styles.css to styles.v2.css)। এটি নিশ্চিত করবে যে ব্যবহারকারীরা নতুন সংস্করণ পাচ্ছে।

এভাবে ব্রাউজার ক্যাশিং প্রয়োগ করে আপনি আপনার ওয়েবসাইটের পারফরমেন্স উল্লেখযোগ্যভাবে বাড়াতে পারেন।

How can we help?