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

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. হেডারগুলোকে কার্যকরভাবে এনকোড করার ভালো কৌশল আছে। উদাহরণস্বরূপ, যদি আপনি জানেন যে সমস্ত মেসেজে "format" এবং "date" আছে, তাহলে আপনি সেগুলোকে শর্ট ইন্টিজার আইডিতে রূপান্তর করে শুধু সেগুলোই পাঠাতে পারেন। তবে, বাস্তবে এমনটা নাও হতে পারে, তাই আপাতত বিষয়টি এভাবেই রেখে দেওয়া ভালো।
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. এইচটিএমএল মার্কআপ।
2. একটি পৃষ্ঠার উপস্থাপনা কাস্টমাইজ করার জন্য CSS।
3. জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন এবং পেজের অন্যান্য উন্নত কার্যকারিতা পরিচালনা করে।

এই প্রতিটি কন্টেন্ট টাইপের জন্য বৈধ কন্টেন্ট কী হবে, মন্তব্য নির্দিষ্ট করার নিয়ম এবং আরও অনেক কিছুর আলাদা নিয়ম রয়েছে। তবে প্রশ্ন থেকে যায়, "এই পেজটির আকার কীভাবে কমানো যায়?"

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

<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 ইমেজ হলো আরেকটি টেক্সট-ভিত্তিক রিসোর্স। SVGO- এর মতো টুল ব্যবহার করে SVG-কে মিনিফাই করা এবং লসি পদ্ধতিতে অপ্টিমাইজ করা যায়।

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

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

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

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

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

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

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

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

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

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

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

ফাইল	অ্যালগরিদম	অসংকুচিত আকার	সংকুচিত আকার	সংকোচন অনুপাত
অ্যাঙ্গুলার-১.৮.৩.জেএস	ব্রোটলি	১,৩৪৬ কিলোবাইট	২৫৬ কিলোবাইট	৮১%
অ্যাঙ্গুলার-১.৮.৩.জেএস	জিজিপ	১,৩৪৬ কিলোবাইট	৩২৯ কিলোবাইট	৭৬%
অ্যাঙ্গুলার-১.৮.৩.মিন.জেএস	ব্রোটলি	১৭৩ কিলোবাইট	৫৩ কিলোবাইট	৬৯%
অ্যাঙ্গুলার-১.৮.৩.মিন.জেএস	জিজিপ	১৭৩ কিলোবাইট	৬০ কিলোবাইট	৬৫%
jquery-3.7.1.js	ব্রোটলি	৩০২ কিলোবাইট	৬৯ কিলোবাইট	৭৭%
jquery-3.7.1.js	জিজিপ	৩০২ কিলোবাইট	৮৩ কিলোবাইট	৭৩%
jquery-3.7.1.min.js	ব্রোটলি	৮৫ কিলোবাইট	২৭ কিলোবাইট	৬৮%
jquery-3.7.1.min.js	জিজিপ	৮৫ কিলোবাইট	৩০ কিলোবাইট	৬৫%
লোডাশ-৪.১৭.২১.জেএস	ব্রোটলি	৫৩১ কিলোবাইট	৭৩ কিলোবাইট	৮৬%
লোডাশ-৪.১৭.২১.জেএস	জিজিপ	৫৩১ কিলোবাইট	৯৪ কিলোবাইট	৮২%
লোডাশ-৪.১৭.২১.মিনিট.জেএস	ব্রোটলি	৭১ কিলোবাইট	২৩ কিলোবাইট	৬৮%
লোডাশ-৪.১৭.২১.মিনিট.জেএস	জিজিপ	৭১ কিলোবাইট	২৫ কিলোবাইট	৬৫%

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

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

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

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

ক্রোম ডেভটুলস-এর নেটওয়ার্ক প্যানেলে প্রদর্শিত সমস্ত পেজ রিসোর্সের প্রকৃত আকারের তুলনায় তাদের স্থানান্তরিত (অর্থাৎ, সংকুচিত) আকারের একটি চিত্র।

পূর্ববর্তী ছবির মতোই, আপনি নিম্নলিখিত বিষয়গুলির একটি বিশদ বিবরণ দেখতে পাবেন:

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

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

কোর ওয়েব ভাইটালসের উপর প্রভাব

কর্মক্ষমতার উন্নতি পরিমাপ করা যায় না, যদি না এমন কোনো মেট্রিক থাকে যা সেই উন্নতিকে প্রতিফলিত করে। ‘কোর ওয়েব ভাইটালস’ উদ্যোগটির লক্ষ্য হলো এমন মেট্রিক তৈরি করা এবং সে সম্পর্কে সচেতনতা বৃদ্ধি করা, যা ব্যবহারকারীর প্রকৃত অভিজ্ঞতাকে প্রতিফলিত করে। এটি সেইসব মেট্রিকের বিপরীত—যেমন, উদাহরণস্বরূপ, সাধারণ পেজ লোড হওয়ার সময়—যা ব্যবহারকারীর অভিজ্ঞতার গুণমানকে স্পষ্টভাবে নির্দেশ করে না।

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

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

উপসংহার

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

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

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