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

Ilya Grigorik

Jeremy Wagner

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

ডেটা কম্প্রেশন 101

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

সর্বোত্তম কর্মক্ষমতা প্রদানের জন্য নিম্নলিখিত সমস্ত কৌশলগুলির সমন্বয় প্রয়োজন:

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

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

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

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

# 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. বার্তাগুলি পাঠ্য পেলোড বহন করে।

200 অক্ষর থেকে শুরু হওয়া আগের বার্তাটির আকার কমাতে কী করা যেতে পারে?

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

এই কৌশলগুলির সংমিশ্রণ নিম্নলিখিত ফলাফলগুলি তৈরি করে:

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

নতুন বার্তাটি 56 অক্ষর দীর্ঘ, যার অর্থ হল আপনি মূল বার্তাটি 72% দ্বারা সংকুচিত করেছেন৷ এটি একটি উল্লেখযোগ্য হ্রাস!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

অনুশীলনে, gzip এবং Brotli উভয়ই টেক্সট-ভিত্তিক বিষয়বস্তুতে সর্বোত্তম কার্য সম্পাদন করে, প্রায়শই বড় ফাইলের জন্য 70-90% পর্যন্ত কম্প্রেশন রেট অর্জন করে। যাইহোক, বিকল্প অ্যালগরিদমগুলি ব্যবহার করে ইতিমধ্যেই সংকুচিত করা এই অ্যালগরিদম সম্পদগুলি চালানো — যেমন বেশিরভাগ চিত্র বিন্যাস যা ক্ষতিহীন বা ক্ষতিকর কম্প্রেশন কৌশল ব্যবহার করে — সামান্য থেকে কোনও উন্নতি করে না৷

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

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

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

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

পূর্ববর্তী চিত্রের মত, আপনি একটি ব্রেকডাউন দেখতে পাবেন:

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

কোর ওয়েব ভাইটালগুলিতে প্রভাব

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

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

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

উপসংহার

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

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

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