ভাগ করা অভিধানের সাথে সুপারচার্জ কম্প্রেশন দক্ষতা

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

যদিও gzip তার নিজের অধিকারে অত্যন্ত কার্যকর, সাম্প্রতিক বছরগুলিতে ওয়েবে কম্প্রেশনের আরও উন্নতি উপলব্ধি করা হয়েছে। 2016 সালে, ক্রোমে ব্রটলি অ্যালগরিদম পাঠানো হয়েছে, যোগ্য সংস্থানগুলির জন্য সামগ্রিকভাবে আরও ভাল কম্প্রেশন অনুপাত সরবরাহ করেছে। 2017 সালের শেষের দিকে, সমস্ত আধুনিক ব্রাউজার ব্রটলিকে সমর্থন করেছিল এবং এর জন্য সার্ভার সমর্থন আরও ব্যাপক হতে শুরু করেছিল। অতি সম্প্রতি, Chrome ZStandard কম্প্রেশন পাঠিয়েছে

যদিও কাজ সেখানে থামে না! Chrome টিম ওয়েবে শেয়ার করা অভিধানগুলিকে ব্যবহারযোগ্য করার জন্য কাজ করছে, যা এখন Brotli এবং ZStandard উভয়ের জন্য একটি অরিজিন ট্রায়ালে উপলব্ধ। শেয়ার করা অভিধানগুলি ব্রোটলি এবং জেড স্ট্যান্ডার্ড কম্প্রেশনের পরিপূরক হতে পারে এমন ওয়েবসাইটগুলির জন্য যথেষ্ট উচ্চ কম্প্রেশন অনুপাত সরবরাহ করতে পারে যেগুলি প্রায়শই আপডেট করা কোড পাঠায় এবং কিছু ক্ষেত্রে - 90% বা আরও ভাল কম্প্রেশন অনুপাত সরবরাহ করতে পারে৷ ভাগ করা অভিধানগুলি কীভাবে কাজ করে এবং কীভাবে আপনি আপনার ওয়েবসাইটে Brotli এবং ZStandard-এর জন্য ব্যবহার করার জন্য অরিজিন ট্রায়ালগুলির জন্য নিবন্ধন করতে পারেন সে সম্পর্কে এই পোস্টটি আরও বিশদে রয়েছে৷

ভাগ করা অভিধান ব্যাখ্যা করা হয়েছে

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

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

একটি কাস্টম কম্প্রেশন অভিধান কতটা কার্যকরী হতে পারে তার একটি উদাহরণ এখানে দেওয়া হল: বলুন আপনার ওয়েবসাইট অ্যাঙ্গুলার ফ্রেমওয়ার্ক ব্যবহার করে এবং আপনি যে বর্তমান সংস্করণটি ব্যবহার করছেন সেটি হল সংস্করণ 1.7.9৷ কৌণিক কাঠামোর এই সংস্করণটি প্রায় 172 KiB আনকম্প্রেসড। ব্রটলির ডিফল্ট সেটিংসের সাথে সংকুচিত হলে, এর আকার প্রায় 53 KiB হয়ে যায়। এটি প্রায় 70% কম্প্রেশন অনুপাত দেয়। যাইহোক, বলুন আপনি পরে Angular 1.8.3 এ আপগ্রেড করার সিদ্ধান্ত নিয়েছেন। প্রদত্ত যে কৌণিকের এই সংস্করণটি প্রায় 1.7.9 সংস্করণের মতো একই আকারের, আপনি পূর্ববর্তী সংস্করণের মতো প্রায় একই কম্প্রেশন অনুপাত আশা করতে পারেন।

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

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

কীভাবে Chrome ভাগ করা অভিধানের জন্য সমর্থনের বিজ্ঞাপন দেয়৷

সমস্ত ব্রাউজার Accept-Encoding অনুরোধ শিরোনামের মাধ্যমে সমর্থন করে এমন কম্প্রেশন অ্যালগরিদমগুলির বিজ্ঞাপন দেয়৷ হেডারের বিষয়বস্তু হল সমর্থিত এনকোডিংগুলির একটি কমা দ্বারা পৃথক করা তালিকা:

Accept-Encoding: gzip, br, zstd

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

যখন ভাগ করা অভিধান সমর্থন সক্ষম করা হয় এবং একটি সম্পদের জন্য একটি প্রাসঙ্গিক অভিধান উপলব্ধ থাকে, তখন অতিরিক্ত টোকেনগুলি Accept-Encoding হেডারে যোগ করা হয়। এই টোকেনগুলি হল ব্রটলির জন্য br-d এবং Zstandard-এর জন্য zstd-d ৷ Chrome একটি উপলব্ধ অভিধানের হ্যাশও অন্তর্ভুক্ত করবে, যা পরবর্তী কভার করা হয়েছে।

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

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

স্থির সম্পদের জন্য ভাগ করা অভিধান কম্প্রেশন

একটি স্ট্যাটিক পেজ রিসোর্স এমন একটি যা সবসময় অনুরোধ করা URL এর জন্য একই প্রতিক্রিয়া তৈরি করে। কম্প্রেসিবল স্ট্যাটিক পেজ রিসোর্সের সাধারণ উদাহরণ হল জাভাস্ক্রিপ্ট এবং CSS ফাইল। এই সম্পদগুলি সাধারণত কিছু উপায়ে ক্যাশিং উদ্দেশ্যে সংস্করণ করা হয় - কখনও কখনও ফাইলের নাম ফাইলের বিষয়বস্তুর হ্যাশ সহ (উদাহরণস্বরূপ styles.abcd1234.css ), বা সংস্থান আঙ্গুলের ছাপ করার অন্য কোনও পদ্ধতি। এই রিসোর্স প্রকারগুলি ডেল্টা কম্প্রেশনের জন্য একটি দুর্দান্ত প্রার্থী যা ভাগ করা অভিধানগুলি প্রদান করে, কারণ স্ট্যাটিক রিসোর্সগুলি প্রায়শই দীর্ঘ সময়ের জন্য ক্যাশ করা হয় এবং কিছু ফ্রিকোয়েন্সি সহ আপডেট করা হয়।

একটি অভিধান একটি স্ট্যাটিক সম্পদের জন্য নির্দিষ্ট করা যেতে পারে এটির জন্য Use-As-Dictionary প্রতিক্রিয়া শিরোনাম সেট করে। শিরোনামটি কয়েকটি কী/মান জোড়ার মধ্যে একটি নেয়, তবে শুধুমাত্র প্রয়োজনীয়টি হল match , যা URLPattern সিনট্যাক্স গ্রহণ করে যেখানে অভিধানটি ব্যবহার করা উচিত রিসোর্স পাথ নির্দিষ্ট করে:

Use-As-Dictionary: match="/dist/styles.*.css"

Use-As-Dictionary হেডারটিকে একটি মেকানিজম হিসেবে ভাবুন যা একটি রিসোর্সের ভবিষ্যত সংস্করণে প্রযোজ্য হয় যা এটির মধ্যে নির্দিষ্ট করা প্যাটার্নের সাথে মেলে। তাই, বলুন আপনার ওয়েবসাইট এর সমস্ত স্টাইল একটি সিএসএস ফাইলে পাঠায়। সরলতার জন্য, বলুন যে সংস্থানটির প্রথম সংস্করণটি /dist/styles.v1.css এ অবস্থিত, এবং /dist/styles.*.css এর match মান ধারণকারী একটি Use-As-Dictionary প্রতিক্রিয়া শিরোনাম সহ পাঠানো হয়েছে।

কিছু সময় অতিবাহিত করার পর, আপনি আপনার ওয়েবসাইটের CSS আপডেট করবেন এবং /dist/styles.v2.css এ অবস্থিত এটির একটি নতুন সংস্করণ পাঠান। যেহেতু পূর্ববর্তী সংস্করণের Use-As-Dictionary প্রতিক্রিয়া শিরোনামে ব্যবহৃত match মান এই অনুরোধের জন্য প্রযোজ্য, ব্রাউজার একটি কাঠামোগত ক্ষেত্র বাইট ক্রম হিসাবে এনকোড করা অভিধানের একটি হ্যাশ সহ একটি Available-Dictionary শিরোনাম পাঠাবে:

Accept-Encoding: gzip, br, zstd, br-d, zstd-d
Available-Dictionary: :pZGm1Av0IEBKARczz7exkNYsZb8LzaMrV7J32a2fFG4=:

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

আপনি যদি আপনার ওয়েবসাইটের জন্য প্রায়ই নতুন কোড পাঠান, তাহলে ডেল্টা কম্প্রেশন অনেক দূর যেতে পারে। যাইহোক, প্রক্রিয়া নমনীয়। যদি ব্রাউজার নির্ধারণ না করে যে ব্যবহারকারীর ব্রাউজার ক্যাশে একটি অভিধান উপলব্ধ আছে, তাহলে এটি Accept-Encoding হেডারে অতিরিক্ত br-d বা zstd-d টোকেন নির্দিষ্ট করবে না । সেই ক্ষেত্রে, স্ট্যান্ডার্ড কম্প্রেশন প্রবাহ প্রযোজ্য।

গতিশীল সম্পদের জন্য ভাগ করা অভিধান কম্প্রেশন

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

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

<link rel="dictionary" href="/dictionary.dat">

যখন Chrome এই <link> উপাদানটির মুখোমুখি হয়, তখন পৃষ্ঠাটি নিষ্ক্রিয় হয়ে গেলে এবং ব্যান্ডউইথ বিতর্ক এড়াতে কম অগ্রাধিকারে এটি অভিধান আনতে পারে । অভিধানের প্রতিক্রিয়ায় অবশ্যই একটি Use-As-Dictionary শিরোনাম নির্দিষ্ট করতে হবে এবং এটি কোন গতিশীল সম্পদ পথের জন্য প্রযোজ্য তা নির্দিষ্ট করতে হবে:

Use-As-Dictionary: match="/product/*"

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

বিল্ড টাইমে স্ট্যাটিক রিসোর্স কম্প্রেস করুন

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

বেশিরভাগ Node.js-ভিত্তিক বান্ডলার যা কম্প্রেশন সমর্থন করে নোডের অন্তর্নির্মিত Zlib লাইব্রেরি ব্যবহার করে। Zlib Brotli এবং বান্ডলারদের জন্য সমর্থন অফার করে যেগুলি এটি ব্যবহার করে সাধারণত Zlib-এ সরাসরি বিকল্পগুলি পাস করার জন্য একটি ইন্টারফেস অফার করে, যা অভিধান-সহায়ক কম্প্রেশন সমর্থন করে । এখানে কয়েকটি বান্ডলার রয়েছে যা অভিধান ব্যবহার করে সমর্থন করে:

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

চেষ্টা কর!

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

  1. আপনি যদি এটি কীভাবে কাজ করে তার জন্য একটি অনুভূতি পেতে শেয়ার করা অভিধান কম্প্রেশনের সাথে টিঙ্কার করতে চান, আপনি chrome://flags পৃষ্ঠায় কম্প্রেশন অভিধান পরিবহন পরীক্ষামূলক বৈশিষ্ট্যটি সক্ষম করতে পারেন৷
  2. আপনি যদি আপনার প্রোডাকশন ওয়েবসাইটে এটি চেষ্টা করে দেখতে আগ্রহী হন এবং দেখুন কিভাবে ভাগ করা অভিধান কম্প্রেশন প্রকৃত ব্যবহারকারীদের উপকার করতে পারে, একটি টোকেন পেতে অরিজিন ট্রায়ালের জন্য নিবন্ধন করুন এবং অরিজিন ট্রায়ালগুলি কীভাবে কাজ করে তা পড়ুন।

উপসংহার

আমরা ওয়েবে কম্প্রেশন প্রযুক্তির এই বড় অগ্রগতি সম্পর্কে এবং লোকেরা প্রতিদিন ব্যবহার করে এমন বিদ্যমান অ্যাপ্লিকেশনগুলিকে কত দ্রুত করতে পারে সে সম্পর্কে আমরা বেশ উত্তেজিত। আমরা আপনাকে এটি চেষ্টা করার জন্য উত্সাহিত করি এবং সবচেয়ে গুরুত্বপূর্ণভাবে, আপনি যদি তা করেন তবে আমরা আপনার চিন্তা শুনতে চাই ! যদি আপনি একটি বাগ খুঁজে পান, crbug.com এ ফাইল করুন । অতিরিক্ত সম্পদ এবং সরঞ্জামের জন্য, use-as-dictionary.com দেখুন। সবশেষে, আপনি যদি এটি সব কাজ করে সে সম্পর্কে গভীরভাবে ডুব দিতে আগ্রহী হন, ব্যাখ্যাকারী একটি ভাল পরবর্তী পদক্ষেপ!