টেক্সট-ভিত্তিক অ্যাসেটের এনকোডিং এবং ট্রান্সফার সাইজ অপ্টিমাইজ করুন

Ilya Grigorik

Jeremy Wagner

অপ্রয়োজনীয় রিসোর্স ডাউনলোড করা বন্ধ করার পাশাপাশি, পেজ লোড হওয়ার স্পিড উন্নত করার জন্য আপনি যা করতে পারেন তা হল, বাকি রিসোর্স অপ্টিমাইজ ও কম্প্রেস করে সামগ্রিক ডাউনলোড সাইজ কমানো।

ডেটা কমপ্রেশন ১০১

অব্যবহৃত রিসোর্স ডাউনলোড করা এড়াতে আপনার ওয়েবসাইট সেট-আপ করার পরে, পরবর্তী ধাপ হল ব্রাউজারকে ডাউনলোড করতে হবে এমন বাকি উপযুক্ত রিসোর্স কম্প্রেস করা। রিসোর্সের ধরনের উপর নির্ভর করে—টেক্সট, ছবি, ফন্ট এবং আরও অনেক কিছু—বেছে নেওয়ার জন্য অনেক ধরনের টেকনিক আছে: ওয়েব সার্ভারে চালু করা যেতে পারে এমন জেনেরিক টুল, নির্দিষ্ট কন্টেন্টের ধরনের জন্য প্রি-প্রসেসিং অপ্টিমাইজেশন এবং রিসোর্স-নির্দিষ্ট অপ্টিমাইজেশন যার জন্য ডেভেলপারের থেকে ইনপুট প্রয়োজন।

সেরা পারফর্ম্যান্স ডেলিভার করতে, নিম্নলিখিত সবকটি টেকনিকের কম্বিনেশন প্রয়োজন:

• কম বিট ব্যবহার করে তথ্য এনকোড করার প্রসেসকে কম্প্রেশন বলা হয়।
• অপ্রয়োজনীয় ডেটা মুছে দিলে সবসময় সেরা ফলাফল পাওয়া যায়।
• কম্প্রেশনের অনেক ধরনের টেকনিক ও অ্যালগরিদম আছে।
• সবথেকে ভালোভাবে কম্প্রেস করার জন্য আপনাকে বিভিন্ন ধরনের টেকনিক ব্যবহার করতে হবে।

ডেটার সাইজ কমানোর প্রসেসকে ডেটা কম্প্রেশন বলা হয়। কম্প্রেশন অনুপাত, কম্প্রেশন স্পিড এবং বিভিন্ন কম্প্রেশন অ্যালগরিদমের জন্য প্রয়োজনীয় মেমরি উন্নত করতে অনেক লোক অ্যালগরিদম, কৌশল এবং অপ্টিমাইজেশনে অবদান রেখেছেন।

ডেটা কম্প্রেশন সম্পর্কে সম্পূর্ণ আলোচনা এই গাইডের আওতার বাইরে। তবে, কম্প্রেশন কীভাবে কাজ করে এবং আপনার পৃষ্ঠার জন্য প্রয়োজনীয় বিভিন্ন অ্যাসেটের সাইজ কমাতে আপনি যে কৌশলগুলি ব্যবহার করতে পারেন তা বোঝা গুরুত্বপূর্ণ।

এইসব টেকনিকের মূল নীতি ব্যাখ্যা করতে, একটি সাধারণ টেক্সট মেসেজ ফর্ম্যাট অপ্টিমাইজ করার প্রসেস বিবেচনা করুন যা শুধুমাত্র এই উদাহরণের জন্য তৈরি করা হয়েছে:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. মেসেজে ইচ্ছামতো অ্যানোটেশন থাকতে পারে—কখনও কখনও কমেন্ট হিসেবে উল্লেখ করা হয়—যা "#" প্রিফিক্স দিয়ে দেখানো হয়। অ্যানোটেশন মেসেজের অর্থ বা আচরণকে প্রভাবিত করে না।
2. মেসেজে হেডার থাকতে পারে, যা হল কী-ভ্যালু পেয়ার (আগের উদাহরণে ":" দ্বারা আলাদা করা হয়েছে) যা মেসেজের শুরুতে দেখা যায়।
3. মেসেজে টেক্সট পেলোড থাকে।

আগের মেসেজের সাইজ কমাতে কী করা যেতে পারে, যা ২০০ অক্ষর দিয়ে শুরু হয়?

1. কমেন্টটি আকর্ষণীয়, তবে এটি মেসেজের অর্থকে প্রভাবিত করে না। মেসেজ ট্রান্সমিট করার সময় এটি বাদ দিন।
2. দক্ষতার সাথে হেডার এনকোড করার জন্য ভালো কৌশল আছে। যেমন, আপনি যদি জানেন যে সব মেসেজে "ফর্ম্যাট" এবং "তারিখ" আছে, তাহলে আপনি সেগুলিকে ছোট পূর্ণসংখ্যা আইডিতে কনভার্ট করে শুধু সেগুলি পাঠাতে পারেন। তবে, এটি সঠিক নাও হতে পারে, তাই এখনকার মতো এটি নিয়ে আর কিছু না করাই ভাল।
3. পে-লোড শুধুমাত্র টেক্সট। যদিও আমরা জানি না যে এর কন্টেন্ট আসলে কী (স্পষ্টতই, এটি "secret-cipher" ব্যবহার করছে), শুধু টেক্সট দেখলেই বোঝা যায় যে এতে অনেক অপ্রয়োজনীয় জিনিস আছে। সম্ভবত, বারবার একই অক্ষর পাঠানোর পরিবর্তে, আপনি শুধু বারবার আসা অক্ষরের সংখ্যা গণনা করতে পারেন এবং সেগুলিকে আরও দক্ষতার সাথে এনকোড করতে পারেন। যেমন, "AAA" হয়ে যায় "3A", যা তিনটি A-এর ক্রমকে দেখায়।

এইসব টেকনিক একত্রিত করে নিম্নলিখিত ফলাফল পাওয়া যায়:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

নতুন মেসেজটি ৫৬ অক্ষরের, যার অর্থ হল আপনি আসল মেসেজটি ৭২% ছোট করেছেন। এটি একটি উল্লেখযোগ্য হ্রাস!

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

ছোট করা: প্রিপ্রসেসিং এবং প্রসঙ্গ-নির্দিষ্ট অপ্টিমাইজেশন

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

ছোট করা হল এক ধরনের কন্টেন্ট-নির্দিষ্ট অপ্টিমাইজেশন যা ডেলিভার করা রিসোর্সের সাইজ উল্লেখযোগ্যভাবে কমাতে পারে এবং আপনার বিল্ড ও ডিপ্লয়মেন্ট প্রসেসের অংশ হিসেবে অপ্টিমাইজেশন সবচেয়ে ভালোভাবে প্রয়োগ করা হয়। যেমন, বান্ডলার হল এক ধরনের সাধারণত ব্যবহৃত সফ্টওয়্যার যা কোনও ওয়েবসাইটে নতুন প্রোডাকশন কোড ডেপ্লয় করার ঠিক আগে অটোমেটিক রিসোর্স ছোট করতে পারে।

অপ্রয়োজনীয় বা অতিরিক্ত ডেটা কম্প্রেস করার সবচেয়ে ভালো উপায় হল তা মুছে ফেলা। তবে, আপনি যেকোনও ডেটা মুছে দিতে পারবেন না। তবে, কিছু ক্ষেত্রে যেখানে আমাদের কাছে ডেটা ফর্ম্যাট এবং এর প্রপার্টি সম্পর্কে কন্টেন্ট-নির্দিষ্ট জ্ঞান থাকে, সেখানে এর প্রকৃত অর্থ বা ক্ষমতাকে প্রভাবিত না করেই পেলোডের সাইজ উল্লেখযোগ্যভাবে কমানো সম্ভব।

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

আগের HTML স্নিপেট এবং এতে থাকা তিনটি ভিন্ন ধরনের কন্টেন্ট বিবেচনা করুন:

1. HTML মার্কআপ।
2. কোনও পৃষ্ঠার প্রেজেন্টেশন কাস্টমাইজ করার জন্য CSS।
3. ইন্টার‍্যাকশন ও অন্যান্য উন্নত পৃষ্ঠা সংক্রান্ত ক্ষমতা প্রদান করার জন্য জাভাস্ক্রিপ্ট।

এই ধরনের প্রতিটি কন্টেন্টের ক্ষেত্রে সঠিক কন্টেন্ট কী, কমেন্ট নির্দিষ্ট করার নিয়ম ইত্যাদি সম্পর্কে আলাদা আলাদা নিয়ম আছে। তবে, "এই পৃষ্ঠার সাইজ কীভাবে কমানো যায়?" সেই প্রশ্ন থেকেই যায়।

• কোড কমেন্ট হল একজন ডেভেলপারের সবচেয়ে ভালো বন্ধু, কিন্তু ব্রাউজারের এগুলির প্রয়োজন নেই! CSS (/* ... */), HTML (<!-- ... -->) এবং JavaScript (// ...) কমেন্ট বাদ দিলে পৃষ্ঠার মোট ট্রান্সফার সাইজ এবং এর সাবরিসোর্স কমে যায়।
• একটি "স্মার্ট" CSS কম্প্রেসর লক্ষ্য করতে পারে যে আমরা .awesome-container-এর জন্য নিয়ম সংজ্ঞায়িত করার একটি অদক্ষ উপায় ব্যবহার করছি এবং অন্য কোনও স্টাইলকে প্রভাবিত না করে দুটি ঘোষণাকে একটিতে ভেঙে ফেলতে পারে, আরও বাইট সাশ্রয় করে। CSS নিয়মের একটি বড় সেটের ক্ষেত্রে, এই ধরনের রিডানডেন্সি সরিয়ে দিলে তা যোগ হতে পারে—তবে এটি আগ্রাসীভাবে প্রয়োগ করা নাও যেতে পারে, কারণ সিলেক্টর প্রায়শই বিভিন্ন প্রসঙ্গে ডুপ্লিকেট করা হয়, যেমন মিডিয়া কোয়েরির মধ্যে।
• HTML, CSS ও JavaScript-এ স্পেস ও ট্যাব ডেভেলপারদের সুবিধা প্রদান করে। অতিরিক্ত কম্প্রেসর সব ট্যাব ও স্পেস সরিয়ে দিতে পারে। অন্যান্য ডুপ্লিকেশন কমানোর টেকনিকের মতো নয়, এই ধরনের অপ্টিমাইজেশন বেশ আগ্রাসীভাবে প্রয়োগ করা যেতে পারে, যতক্ষণ না এই ধরনের স্পেস বা ট্যাব পৃষ্ঠার উপস্থাপনার জন্য প্রয়োজনীয় হয়—যেমন, আপনি HTML ডকুমেন্টে টেক্সটের মধ্যে স্পেস সংরক্ষণ করতে চাইবেন, কারণ সেগুলি ব্যবহারকারীর আসলে দেখা কন্টেন্টের পাঠযোগ্যতা নিশ্চিত করে।

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

আগের ধাপগুলি প্রয়োগ করার পরে, পৃষ্ঠার অক্ষর সংখ্যা ৫১৬ থেকে ২০৪ হয়ে যায়, যার অর্থ প্রায় ৬০% সাশ্রয় হয়। অবশ্যই, এটি খুব একটা পাঠযোগ্য নয়, তবে ব্যবহারযোগ্য হওয়ার জন্য এটিকে পাঠযোগ্য হতে হবে না। আধুনিক ডেভেলপমেন্ট প্র্যাকটিস আপনাকে আপনার সোর্স কোডের ভালভাবে ফর্ম্যাট করা এবং পাঠযোগ্য ভার্সন প্রোডাকশনে পাঠানো ভালভাবে অপ্টিমাইজ করা কোড থেকে আলাদা রাখতে দেয়। সোর্স ম্যাপ-এর সাথে যুক্ত—যা আপনার রূপান্তরিত প্রোডাকশন কোডের একটি পাঠযোগ্য উপস্থাপনা প্রদান করে, আপনাকে প্রোডাকশনে আরও সহজে বাগ সমাধান করতে দেয়—ব্যবহারকারীর অভিজ্ঞতার স্বার্থে পারফর্ম্যান্স অপ্টিমাইজ করার সময় আপনি একজন ডেভেলপার হিসেবে ভালো অভিজ্ঞতা পেতে পারেন।

মনে রাখবেন: আগের উদাহরণে দেখানো না হলেও, SVG ছবি হল আরেকটি টেক্সট-ভিত্তিক রিসোর্স। SVG-কে ছোট করা যেতে পারে এবং অন্যথায় SVGO-এর মতো টুল ব্যবহার করে লসি পদ্ধতিতে অপ্টিমাইজ করা যেতে পারে।

আগের উদাহরণটি একটি গুরুত্বপূর্ণ বিষয় তুলে ধরে: একটি সাধারণ-উদ্দেশ্যের কম্প্রেসর—ধরা যাক, একটি ইচ্ছামত টেক্সট কম্প্রেস করার জন্য ডিজাইন করা হয়েছে—আগের উদাহরণের পৃষ্ঠাটি কম্প্রেস করার ক্ষেত্রে বেশ ভালো কাজ করতে পারে, কিন্তু এটি কখনই জানবে না যে কমেন্টগুলি স্ট্রিপ করতে হবে, CSS নিয়মগুলি ভেঙে ফেলতে হবে বা অন্যান্য ডজন ডজন কন্টেন্ট-নির্দিষ্ট অপ্টিমাইজেশন করতে হবে। এই কারণেই প্রিপ্রসেসিং, ছোট করা এবং অন্যান্য প্রাসঙ্গিক সচেতনতা অপ্টিমাইজেশন গুরুত্বপূর্ণ।

মনে রাখবেন: উদাহরণস্বরূপ, জনপ্রিয় ফ্রেমওয়ার্কের আনকমপ্রেসড ডেভেলপমেন্ট ভার্সন প্রোডাকশনে ব্যবহার করার জন্য তৈরি সমতুল্য ভার্সনের চেয়ে অনেক বড় হয়। যেমন, Angular 1.8.3-এর ডেভেলপমেন্ট ভার্সন প্রায় ১.৪ মেগাবাইট। প্রোডাকশন ভার্সন হল ১৭৭ কিলোবাইট। এটি স্পষ্টভাবে এই অপ্টিমাইজেশনের সম্ভাবনা প্রদর্শন করে!

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

সংক্ষেপে, আপনার অ্যাসেটের কার্যকারিতা অপ্টিমাইজ করার প্রথম ধাপ হিসেবে, বিভিন্ন ধরনের কন্টেন্টের একটি ইনভেনটরি তৈরি করুন এবং তাদের সাইজ কমাতে আপনি কী ধরনের কন্টেন্ট-নির্দিষ্ট অপ্টিমাইজেশন প্রয়োগ করতে পারেন তা বিবেচনা করুন। তারপর—সেগুলি কী তা আপনি বুঝে নেওয়ার পরে, আপনার বিল্ড ও রিলিজের ধাপে সেগুলি যোগ করে এই অপ্টিমাইজেশন অটোমেট করুন, যাতে প্রোডাকশনে প্রতিটি নতুন রিলিজের জন্য অপ্টিমাইজেশন ধারাবাহিকভাবে প্রয়োগ করা হয়।

কম্প্রেশন অ্যালগরিদম সহ টেক্সট কম্প্রেশন

টেক্সট-ভিত্তিক অ্যাসেটের সাইজ কমানোর পরবর্তী ধাপ হল সেগুলিতে কম্প্রেশন অ্যালগরিদম প্রয়োগ করা। এটি আরও এক ধাপ এগিয়ে গিয়ে ব্যবহারকারীর কাছে পাঠানোর আগে টেক্সট-ভিত্তিক পেলোডে পুনরাবৃত্তিযোগ্য প্যাটার্ন আগ্রাসীভাবে সার্চ করে এবং ব্যবহারকারীর ব্রাউজারে পৌঁছানোর পরে সেগুলি ডিকম্প্রেস করে। এর ফলে, এইসব রিসোর্স আরও উল্লেখযোগ্যভাবে কমে যায় এবং ডাউনলোড করার সময়ও কমে যায়।

• gzip ও Brotli হল সাধারণত ব্যবহৃত কম্প্রেশন অ্যালগরিদম যা টেক্সট-ভিত্তিক অ্যাসেটে সবচেয়ে ভাল পারফর্ম করে: CSS, JavaScript, HTML.
• সব আধুনিক ব্রাউজার gzip ও Brotli কম্প্রেশন সাপোর্ট করে এবং Accept-Encoding HTTP অনুরোধ হেডারে দুটির জন্যই সাপোর্ট বিজ্ঞাপন করবে।
• কম্প্রেশন চালু করার জন্য আপনার সার্ভার কনফিগার করতে হবে। ওয়েব সার্ভার সফ্টওয়্যার সাধারণত ডিফল্ট হিসেবে টেক্সট-ভিত্তিক রিসোর্স কম্প্রেস করার জন্য মডিউল চালু করে।
• কম্প্রেশনের লেভেল অ্যাডজাস্ট করে কম্প্রেশন অনুপাত উন্নত করার জন্য gzip এবং Brotli, দুটিকেই ফাইন-টিউন করা যেতে পারে। gzip-এর জন্য, কম্প্রেস করার সেটিংসের রেঞ্জ ১ থেকে ৯ পর্যন্ত, যার মধ্যে ৯ হল সবচেয়ে ভালো। Brotli-র ক্ষেত্রে এই রেঞ্জ হল ০ থেকে ১১, যেখানে ১১ হল সবচেয়ে ভাল। তবে, বেশি কম্প্রেশন সেটিংসের জন্য আরও বেশি সময় প্রয়োজন। যেসব রিসোর্স ডায়নামিকভাবে কম্প্রেস করা—অর্থাৎ, অনুরোধ করার সময়ে—রেঞ্জের মাঝামাঝি সেটিংস কম্প্রেস করার অনুপাত ও স্পিডের মধ্যে সবচেয়ে ভালো ট্রেড-অফ অফার করে। তবে, স্ট্যাটিক কম্প্রেশন সম্ভব, যা সময়ের আগেই রেসপন্স কম্প্রেস করে এবং তাই প্রতিটি কম্প্রেশন অ্যালগরিদমের জন্য উপলভ্য সবচেয়ে অ্যাগ্রেসিভ কম্প্রেশন সেটিংস ব্যবহার করতে পারে।
• কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDNs) সাধারণত উপযুক্ত রিসোর্স অটোমেটিক কম্প্রেস করার সুবিধা অফার করে। এছাড়াও, CDN আপনার জন্য ডায়নামিক ও স্ট্যাটিক কম্প্রেশন ম্যানেজ করতে পারে, যার ফলে কম্প্রেশন নিয়ে আপনাকে আর চিন্তা করতে হয় না।

gzip এবং Brotli হল সাধারণ কম্প্রেসর যা যেকোনও বাইট স্ট্রিমে প্রয়োগ করা যেতে পারে। ব্যাকগ্রাউন্ডে, তারা ফাইলের আগে পরীক্ষা করা কিছু কন্টেন্ট মনে রাখে এবং পরে দক্ষ উপায়ে ডুপ্লিকেট ডেটা ফ্র্যাগমেন্ট খুঁজে বের করে তা পরিবর্তন করার চেষ্টা করে।

মনে রাখবেন:  কম্প্রেশন কীভাবে কাজ করে সেই সম্পর্কে আরও বিস্তারিত ব্যাখ্যা জানতে, gzip-এর এই চমৎকার লো-লেভেল ব্যাখ্যা দেখুন। আপনি টেক্সট কম্প্রেশন নিয়ে এক্সপেরিমেন্ট করতে চাইলে, আমাদের gzip এবং Brotli কোডল্যাব ব্যবহার করে দেখুন।

ব্যবহারিক ক্ষেত্রে, gzip এবং Brotli, টেক্সট-ভিত্তিক কন্টেন্টের ক্ষেত্রে সবচেয়ে ভালো পারফর্ম করে, প্রায়শই বড় ফাইলের ক্ষেত্রে ৭০-৯০% পর্যন্ত কমপ্রেশন রেট অর্জন করে। তবে, বিকল্প অ্যালগরিদম ব্যবহার করে আগে থেকেই কম্প্রেস করা অ্যাসেটে এইসব অ্যালগরিদম রান করলে—যেমন, বেশিরভাগ ছবির ফর্ম্যাট যা লসলেস বা লসি কম্প্রেশন টেকনিক ব্যবহার করে—খুবই কম বা কোনও উন্নতিই হয় না।

সব আধুনিক ব্রাউজার Accept-Encoding HTTP অনুরোধ হেডারে gzip এবং Brotli-এর জন্য সহায়তা বিজ্ঞাপন করে। তবে, ক্লায়েন্ট অনুরোধ করলে কম্প্রেস করা রিসোর্স দেখানোর জন্য ওয়েব সার্ভার সঠিকভাবে কনফিগার করা হয়েছে কিনা তা নিশ্চিত করার দায়িত্ব হোস্টিং প্রদানকারীর।

ফাইল	অ্যালগরিদম	কমপ্রেস না করা সাইজ	কম্প্রেস করা সাইজ	কম্প্রেশন রেশিও
angular-1.8.3.js	Brotli	১,৩৪৬ কিবিবাইট	২৫৬ KiB	৮১%
angular-1.8.3.js	gzip	১,৩৪৬ কিবিবাইট	৩২৯ কিবিবাইট	৭৬%
angular-1.8.3.min.js	Brotli	১৭৩ কিবিবাইট	৫৩ কিবিবাইট	৬৯%
angular-1.8.3.min.js	gzip	১৭৩ কিবিবাইট	৬০ কিবিবাইট	৬৫%
jquery-3.7.1.js	Brotli	৩০২ কিবিবাইট	69 KiB	৭৭%
jquery-3.7.1.js	gzip	৩০২ কিবিবাইট	৮৩ কিবিবাইট	৭৩%
jquery-3.7.1.min.js	Brotli	৮৫ কিবিবাইট	২৭ কিবিবাইট	৬৮%
jquery-3.7.1.min.js	gzip	৮৫ কিবিবাইট	৩০ কিবিবাইট	৬৫%
lodash-4.17.21.js	Brotli	৫৩১ কিবিবাইট	৭৩ কিবিবাইট	৮৬%
lodash-4.17.21.js	gzip	৫৩১ কিবিবাইট	৯৪ কিবিবাইট	৮২%
lodash-4.17.21.min.js	Brotli	৭১ কিবিবাইট	২৩ কিবিবাইট	৬৮%
lodash-4.17.21.min.js	gzip	৭১ কিবিবাইট	২৫ কিবিবাইট	৬৫%

উপরের সারণী থেকে জানা যায় যে Brotli এবং gzip কম্প্রেশন, দুটিই কিছু সুপরিচিত জাভাস্ক্রিপ্ট লাইব্রেরির জন্য কতটা সাশ্রয় করতে পারে। ফাইল ও অ্যালগরিদমের উপর নির্ভর করে ৬৫% থেকে ৮৬% পর্যন্ত ডেটা সাশ্রয় করা যায়। রেফারেন্সের জন্য, Brotli এবং gzip, দুটির ক্ষেত্রেই প্রতিটি ফাইলে সর্বাধিক কম্প্রেশন লেভেল প্রয়োগ করা হয়েছে। যেখানে সম্ভব, gzip-এর পরিবর্তে Brotli ব্যবহার করুন।

গুরুত্বপূর্ণ: আগের সারণীটি স্পষ্টভাবে দেখায় যে কীভাবে ছোট করার মতো অপ্টিমাইজেশনের উপরে কম্প্রেশন প্রয়োগ করলে অতিরিক্ত সঞ্চয় প্রদান করতে পারে। সব সময় এমন হয় না যে শুধু কম্প্রেশনই ছোট করার প্রভাবকে অর্থহীন করে তোলে—এটি একটি অ্যাডিটিভ অপ্টিমাইজেশন।

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

কম্প্রেশন অ্যাকশনে দেখার একটি দ্রুত উপায় হল Chrome DevTools খোলা, নেটওয়ার্ক প্যানেল খোলা, আপনার পছন্দের একটি পৃষ্ঠা লোড করা এবং নেটওয়ার্ক প্যানেলের একেবারে নিচে লক্ষ্য করা।

Chrome DevTools-এর নেটওয়ার্ক প্যানেলে দেখানো সমস্ত পৃষ্ঠা রিসোর্সের ট্রান্সফার সাইজ (অর্থাৎ, কম্প্রেস করা) বনাম তাদের আসল সাইজের একটি উপস্থাপনা।

আগের ছবির মতো, আপনি এগুলির ব্রেকডাউন দেখতে পাবেন:

• অনুরোধের সংখ্যা, যা হল পৃষ্ঠার জন্য লোড করা রিসোর্সের সংখ্যা।
• সব অনুরোধের ট্রান্সফার সাইজ। এটি কোনও পৃষ্ঠার রিসোর্সে প্রয়োগ করা কম্প্রেশনের কার্যকারিতা প্রতিফলিত করে।
• সব অনুরোধের রিসোর্স সাইজ। এটি দেখায় যে ডিকম্প্রেস করার পরে পৃষ্ঠার রিসোর্স কতটা বড়।

মনে রাখবেন: কখনও কখনও, কম্প্রেশন অ্যালগরিদম অ্যাসেটের সাইজ বাড়িয়ে দিতে পারে। সাধারণত, এটি তখনই ঘটে যখন আনকমপ্রেসড অ্যাসেট খুব ছোট হয় এবং অ্যালগরিদমের ওভারহেড কম্প্রেশন সেভিংসের চেয়ে বেশি হয়, অথবা যখন রিসোর্সটি ইতিমধ্যেই ভালভাবে কমপ্রেস করা থাকে। এই সমস্যা এড়াতে, কিছু সার্ভার আপনাকে ফাইলের সাইজের ন্যূনতম থ্রেশহোল্ড নির্দিষ্ট করার অনুমতি দেয়, যা সাধারণত চার বা পাঁচ কিলোবাইটের কম হয়।

Core Web Vitals-এর উপর প্রভাব

পারফর্ম্যান্সের উন্নতি পরিমাপ করা যায় না, যদি না এমন মেট্রিক থাকে যা সেই উন্নতিকে প্রতিফলিত করে। Core Web Vitals উদ্যোগ নেওয়া হয়েছে যাতে ব্যবহারকারীর আসল অভিজ্ঞতা প্রতিফলিত করে এমন মেট্রিক তৈরি করা ও সেই সম্পর্কে সচেতনতা বাড়ানো যায়। এটি অন্যান্য মেট্রিকের থেকে আলাদা—যেমন, পৃষ্ঠা লোড হতে কত সময় লাগে—যা ব্যবহারকারীর অভিজ্ঞতার কোয়ালিটি সম্পর্কে স্পষ্ট ধারণা দেয় না।

এই গাইডে উল্লেখ করা অপ্টিমাইজেশন আপনার ওয়েবসাইটের রিসোর্সে প্রয়োগ করলে, অপ্টিমাইজ করা রিসোর্স এবং সংশ্লিষ্ট মেট্রিকের উপর ভিত্তি করে Core Web Vitals-এর উপর প্রভাব আলাদা আলাদা হতে পারে। তবে, এখানে কিছু উদাহরণ দেওয়া হল যেখানে এইসব অপ্টিমাইজেশন প্রয়োগ করলে আপনার ওয়েবসাইটের Core Web Vitals উন্নত হতে পারে:

• HTML রিসোর্স ছোট ও কম্প্রেস করা হলে, সেই HTML লোড হওয়ার সময় ও তার সাবরিসোর্সের ডিসকভারেবিলিটি উন্নত হতে পারে এবং এর ফলে সেগুলি লোড হওয়ার সময়ও উন্নত হতে পারে। এটি কোনও পৃষ্ঠার Largest Contentful Paint (LCP)-এর জন্য সহায়ক হতে পারে। রিসোর্সের খুঁজে নেওয়ার যোগ্যতার উপর প্রভাব ফেলতে rel="preload"-এর মতো রিসোর্স সংক্রান্ত ইঙ্গিত ব্যবহার করা যেতে পারে, তবে এগুলি খুব বেশি ব্যবহার করলে ব্যান্ডউইথ সংক্রান্ত সমস্যা হতে পারে। নেভিগেশন অনুরোধের জন্য HTML উত্তর কম্প্রেস করা হয়েছে কিনা তা নিশ্চিত করার মাধ্যমে, প্রিলোড স্ক্যানার যত তাড়াতাড়ি সম্ভব সেগুলির মধ্যে থাকা রিসোর্স খুঁজে পেতে পারে।
• কম্প্রেশন ব্যবহার করে কিছু LCP ক্যান্ডিডেট আরও দ্রুত লোড করা যেতে পারে। যেমন, LCP ক্যান্ডিডেট হিসেবে SVG ছবির রিসোর্স লোড হওয়ার সময় টেক্সট-ভিত্তিক কম্প্রেশনের মাধ্যমে কমানো যেতে পারে। এটি অন্যান্য ধরনের ছবির ক্ষেত্রে করা অপ্টিমাইজেশনের থেকে আলাদা—যেগুলি অন্যান্য কম্প্রেশন পদ্ধতির মাধ্যমে অন্তর্নিহিতভাবে কম্প্রেস করা হয়—যেমন JPEG ছবি লসি কম্প্রেশন ব্যবহার করে।
• এছাড়াও, টেক্সট নোডও LCP ক্যান্ডিডেট হতে পারে। এই গাইডে বর্ণিত কৌশলগুলি কীভাবে কাজ করবে তা নির্ভর করে আপনি নিজের ওয়েব পৃষ্ঠায় টেক্সটের জন্য ওয়েব ফন্ট ব্যবহার করছেন কিনা তার উপর। আপনি ওয়েব ফন্ট ব্যবহার করলে, ওয়েব ফন্ট অপ্টিমাইজেশনের পেশাদার পদ্ধতি প্রযোজ্য হয়। তবে, আপনি ওয়েব ফন্ট ব্যবহার না করলে—বরং সিস্টেম ফন্ট ব্যবহার করলে যা কোনও রিসোর্স লোড হওয়ার সময় ছাড়াই দেখা যায়—CSS মিনিফাই ও কম্প্রেস করলে এই সময় কমে যায়, যার অর্থ হল সম্ভাব্য LCP টেক্সট নোড আরও দ্রুত রেন্ডার হতে পারে।

উপসংহার

আপনি কীভাবে টেক্সট-ভিত্তিক অ্যাসেটের এনকোডিং এবং ট্রান্সফার অপ্টিমাইজ করেন তা হল একটি বেসলাইন পারফর্ম্যান্স কনসেপ্ট—তবে এটি এমন একটি বিষয় যার একটি বড় প্রভাব রয়েছে। ছোট করা ও কম্প্রেস করার জন্য উপযুক্ত রিসোর্সগুলি যাতে সেইসব অপ্টিমাইজেশন থেকে উপকৃত হয় তা নিশ্চিত করার জন্য আপনি যা যা করতে পারেন তার সবকটিই করছেন কিনা তা নিশ্চিত করুন।

আরও গুরুত্বপূর্ণ হল, এই প্রসেসগুলি অটোমেট করা হচ্ছে কিনা তা নিশ্চিত করুন। ছোট করার জন্য, উপযুক্ত রিসোর্সে ছোট করার সুবিধা প্রয়োগ করতে একটি বান্ডলার ব্যবহার করুন। আপনার ওয়েব সার্ভার কনফিগারেশন যাতে কম্প্রেশন সাপোর্ট করে তা নিশ্চিত করুন, তবে তার থেকেও বেশি, উপলভ্য সবচেয়ে কার্যকর কম্প্রেশন ব্যবহার করুন। এটি যতটা সম্ভব সহজ করতে, আপনার জন্য কম্প্রেশন অটোমেট করতে CDN ব্যবহার করুন, কারণ তারা শুধু আপনার জন্য রিসোর্স কম্প্রেস করতে পারে না, তারা খুব দ্রুত তা করতে পারে।

আপনার ওয়েবসাইটের আর্কিটেকচারে এই বেসলাইন পারফর্ম্যান্সের ধারণাগুলি প্রয়োগ করে, আপনি নিশ্চিত করতে পারেন যে আপনার পারফর্ম্যান্স অপ্টিমাইজেশনের প্রচেষ্টাগুলি একটি ভাল ভিত্তির উপর রয়েছে এবং পরবর্তী অপ্টিমাইজেশনগুলি ভাল বেসলাইন অনুশীলনের একটি শক্ত ভিত্তির উপর নির্ভর করতে পারে।