সংরক্ষণ-ডেটা সহ দ্রুত এবং হালকা অ্যাপ্লিকেশন সরবরাহ করা

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

হালকা পৃষ্ঠার প্রয়োজনীয়তা

সকলেই একমত যে, দ্রুততর এবং হালকা ওয়েব পেজ ব্যবহারকারীদের আরও সন্তোষজনক অভিজ্ঞতা প্রদান করে, বিষয়বস্তু ভালোভাবে বুঝতে ও মনে রাখতে সাহায্য করে এবং এর ফলে কনভার্সন ও রাজস্ব বৃদ্ধি পায়। গুগলের গবেষণায় দেখা গেছে যে, "...অপ্টিমাইজ করা পেজগুলো মূল পেজের চেয়ে চারগুণ দ্রুত লোড হয় এবং ৮০% কম বাইট ব্যবহার করে। যেহেতু এই পেজগুলো অনেক দ্রুত লোড হয়, তাই আমরা এই পেজগুলোতে ট্র্যাফিকের ৫০% বৃদ্ধিও দেখেছি।"

এবং, যদিও ২জি সংযোগের সংখ্যা অবশেষে কমতে শুরু করেছে , ২০১৫ সালেও ২জি-ই ছিল প্রধান নেটওয়ার্ক প্রযুক্তি। ৩জি এবং ৪জি নেটওয়ার্কের প্রসার ও সহজলভ্যতা দ্রুত বাড়ছে, কিন্তু এর সাথে জড়িত মালিকানা খরচ এবং নেটওয়ার্কের সীমাবদ্ধতা এখনও কোটি কোটি ব্যবহারকারীর জন্য একটি গুরুত্বপূর্ণ বিষয়।

এগুলো পেজ অপ্টিমাইজেশনের পক্ষে জোরালো যুক্তি।

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

Save-Data অনুরোধ হেডার

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

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

ব্রাউজার সমর্থন

• যখন ব্যবহারকারী মোবাইলে "ডেটা সেভার" অপশনটি চালু করেন , অথবা ডেস্কটপ ব্রাউজারে "ডেটা সেভার" এক্সটেনশনটি ব্যবহার করেন, তখন ক্রোম ৪৯+ " Save-Data বিজ্ঞাপন দেখায়।
• ডেস্কটপে " Opera Turbo " মোড অথবা অ্যান্ড্রয়েড ব্রাউজারে " Data savings " অপশনটি চালু করলে Opera 35+ " Save-Data এর বিজ্ঞাপন দেখায়।
• ইয়ানডেক্স ১৬.২+ ডেস্কটপ বা মোবাইল ব্রাউজারে টার্বো মোড চালু থাকলে Save-Data বিজ্ঞাপন দেয়।

Save-Data সেটিং সনাক্ত করা

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

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

এছাড়াও, জাভাস্ক্রিপ্টে Save-Data চালু আছে কিনা তা শনাক্ত করা সম্ভব:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

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

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

বাস্তবায়নের পরামর্শ এবং সর্বোত্তম অনুশীলন

1. Save-Data ব্যবহার করার সময়, এটিকে সমর্থন করে এমন কিছু UI ডিভাইস প্রদান করুন এবং ব্যবহারকারীদের অভিজ্ঞতাগুলোর মধ্যে সহজে টগল করার সুযোগ দিন। উদাহরণস্বরূপ:
   • ব্যবহারকারীদের জানান যে Save-Data সমর্থিত এবং এটি ব্যবহার করতে তাদের উৎসাহিত করুন।
   • উপযুক্ত নির্দেশাবলী এবং সহজবোধ্য অন/অফ বাটন বা চেকবক্সের মাধ্যমে ব্যবহারকারীদের মোড শনাক্ত করতে ও বেছে নিতে দিন।
   • যখন ডেটা সাশ্রয় মোড নির্বাচন করা হয়, তখন তা ঘোষণা করুন এবং চাইলে এটি নিষ্ক্রিয় করে সম্পূর্ণ অভিজ্ঞতায় ফিরে যাওয়ার একটি সহজ ও সুস্পষ্ট উপায় প্রদান করুন।
2. মনে রাখবেন যে লাইটওয়েট অ্যাপ্লিকেশনগুলো নিম্নমানের অ্যাপ্লিকেশন নয়। এগুলোতে কোনো গুরুত্বপূর্ণ কার্যকারিতা বা ডেটা বাদ দেওয়া হয় না, বরং এগুলো সংশ্লিষ্ট খরচ এবং ব্যবহারকারীর অভিজ্ঞতার বিষয়ে বেশি সচেতন থাকে। উদাহরণস্বরূপ:
   • একটি ফটো গ্যালারি অ্যাপ্লিকেশন কম রেজোলিউশনের প্রিভিউ দেখাতে পারে, অথবা কম কোড-নির্ভর ক্যারোসেল পদ্ধতি ব্যবহার করতে পারে।
   • একটি সার্চ অ্যাপ্লিকেশন একবারে কম সংখ্যক ফলাফল দেখাতে পারে, মিডিয়া-বহুল ফলাফলের সংখ্যা সীমিত করতে পারে, অথবা পৃষ্ঠাটি রেন্ডার করার জন্য প্রয়োজনীয় নির্ভরতার সংখ্যা কমাতে পারে।
   • সংবাদ-ভিত্তিক কোনো সাইট কম সংখ্যক খবর দেখাতে পারে, কম জনপ্রিয় বিভাগগুলো বাদ দিতে পারে, অথবা সংক্ষিপ্ত মিডিয়া প্রিভিউ প্রদান করতে পারে।
3. Save-Data রিকোয়েস্ট হেডারটি পরীক্ষা করার জন্য সার্ভার লজিক প্রদান করুন এবং এটি সক্রিয় থাকলে একটি বিকল্প, হালকা পেজ রেসপন্স দেওয়ার বিষয়টি বিবেচনা করুন — যেমন, প্রয়োজনীয় রিসোর্স ও ডিপেন্ডেন্সির সংখ্যা কমানো, আরও জোরালো রিসোর্স কম্প্রেশন প্রয়োগ করা, ইত্যাদি।
   • আপনি যদি Save-Data হেডারের উপর ভিত্তি করে কোনো বিকল্প রেসপন্স পরিবেশন করেন, তাহলে এটিকে Vary লিস্টে — Vary: Save-Data — যোগ করতে মনে রাখবেন। এর মাধ্যমে আপস্ট্রিম ক্যাশগুলোকে জানানো হয় যে, শুধুমাত্র Save-Data রিকোয়েস্ট হেডারটি উপস্থিত থাকলেই যেন তারা এই ভার্সনটি ক্যাশ করে এবং পরিবেশন করে। আরও বিস্তারিত জানতে, ক্যাশের সাথে ইন্টারঅ্যাকশনের সেরা অনুশীলনগুলো দেখুন।
4. আপনি যদি একটি সার্ভিস ওয়ার্কার ব্যবহার করেন, তাহলে আপনার অ্যাপ্লিকেশনটি Save-Data রিকোয়েস্ট হেডারের উপস্থিতি পরীক্ষা করে, অথবা navigator.connection.saveData প্রপার্টির মান পরীক্ষা করে ডেটা সেভিং অপশনটি কখন চালু আছে তা শনাক্ত করতে পারে। যদি এটি চালু থাকে, তবে বিবেচনা করুন যে আপনি কম বাইট ফেচ করার জন্য রিকোয়েস্টটি রিরাইট করতে পারেন কিনা, অথবা আগে থেকে ফেচ করা কোনো রেসপন্স ব্যবহার করতে পারেন কিনা।
5. Save-Data অন্যান্য সিগন্যাল দিয়ে আরও উন্নত করার কথা বিবেচনা করুন, যেমন ব্যবহারকারীর কানেকশনের ধরন এবং প্রযুক্তি সম্পর্কিত তথ্য ( নেটইনফো এপিআই দেখুন)। উদাহরণস্বরূপ, Save-Data চালু না থাকলেও আপনি ২জি কানেকশনে থাকা যেকোনো ব্যবহারকারীকে লাইটওয়েট অভিজ্ঞতা দিতে চাইতে পারেন। বিপরীতভাবে, ব্যবহারকারী একটি "দ্রুত" ৪জি কানেকশনে আছেন বলেই যে তিনি ডেটা বাঁচাতে আগ্রহী নন, তা নয় — যেমন, রোমিং করার সময়। এছাড়াও, সীমিত মেমোরিযুক্ত ডিভাইসের ব্যবহারকারীদের সাথে আরও ভালোভাবে খাপ খাইয়ে নিতে আপনি Device-Memory ক্লায়েন্ট হিন্ট দিয়ে Save-Data উপস্থিতি আরও উন্নত করতে পারেন। ব্যবহারকারীর ডিভাইসের মেমোরি navigator.deviceMemory ক্লায়েন্ট হিন্টেও বিজ্ঞাপিত হয়।

রেসিপি

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

সার্ভার সাইড কোডে Save-Data পরীক্ষা করা হচ্ছে

যদিও জাভাস্ক্রিপ্টে navigator.connection.saveData প্রপার্টির মাধ্যমে Save-Data স্টেটটি শনাক্ত করা যায় , তবে কখনও কখনও সার্ভার সাইডে এটি শনাক্ত করাই শ্রেয়। কিছু ক্ষেত্রে জাভাস্ক্রিপ্ট এক্সিকিউট হতে ব্যর্থ হতে পারে । তাছাড়া, ক্লায়েন্টের কাছে পাঠানোর আগে মার্কআপ পরিবর্তন করার একমাত্র উপায় হলো সার্ভার সাইড ডিটেকশন, যা Save-Data এর সবচেয়ে উপকারী কিছু ব্যবহারের ক্ষেত্রে জড়িত।

সার্ভার সাইড কোডে Save-Data হেডার শনাক্ত করার নির্দিষ্ট সিনট্যাক্স ব্যবহৃত ভাষার উপর নির্ভর করে, কিন্তু যেকোনো অ্যাপ্লিকেশনের ব্যাক এন্ডের জন্য মূল ধারণাটি একই হওয়া উচিত। উদাহরণস্বরূপ, PHP-তে রিকোয়েস্ট হেডারগুলো $_SERVER সুপারগ্লোবাল অ্যারেতে HTTP_ দিয়ে শুরু হওয়া ইন্ডেক্সগুলোতে সংরক্ষিত থাকে। এর মানে হলো, আপনি $_SERVER["HTTP_SAVE_DATA"] ভেরিয়েবলের অস্তিত্ব এবং মান পরীক্ষা করে Save-Data হেডারটি শনাক্ত করতে পারেন, যেমনটা নিচে দেখানো হয়েছে:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

ক্লায়েন্টের কাছে কোনো মার্কআপ পাঠানোর আগে যদি আপনি এই চেকটি রাখেন, তাহলে $saveData ভেরিয়েবলটি Save-Data স্টেট ধারণ করবে এবং পেজের যেকোনো জায়গায় ব্যবহারের জন্য উপলব্ধ থাকবে। এই পদ্ধতিটি ব্যাখ্যা করার পর, চলুন ব্যবহারকারীর কাছে পাঠানো ডেটার পরিমাণ সীমিত করতে এটি কীভাবে ব্যবহার করা যায় তার কয়েকটি উদাহরণ দেখি।

উচ্চ রেজোলিউশনের স্ক্রিনের জন্য নিম্ন রেজোলিউশনের ছবি পরিবেশন করুন।

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

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

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

আপনি <html> এলিমেন্টে শুধু একটি ক্লাস যোগ করে এই ধারণাটি CSS background-image প্রপার্টিতেও প্রয়োগ করতে পারেন:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

এখান থেকে, আপনি আপনার CSS-এ <html> এলিমেন্টের save-data ক্লাসটি ব্যবহার করে ছবি প্রদর্শনের পদ্ধতি পরিবর্তন করতে পারেন। উপরের HTML উদাহরণে দেখানো অনুযায়ী, আপনি উচ্চ রেজোলিউশনের স্ক্রিনে নিম্ন রেজোলিউশনের ব্যাকগ্রাউন্ড ছবি পাঠাতে পারেন, অথবা নির্দিষ্ট কিছু রিসোর্স পুরোপুরি বাদ দিতে পারেন।

অপ্রয়োজনীয় চিত্রাবলী বাদ দিন

ওয়েবের কিছু ছবি একেবারেই অপ্রয়োজনীয়। যদিও এই ধরনের ছবি কোনো কন্টেন্টের সাথে সুন্দরভাবে জুড়ে দেওয়া যায়, কিন্তু যারা তাদের সীমিত ডেটা প্ল্যানের সর্বোচ্চ ব্যবহার করতে চান, তাদের কাছে এগুলো কাঙ্ক্ষিত নাও হতে পারে। Save-Data এর সম্ভবত সবচেয়ে সহজ ব্যবহারে, আমরা আগের PHP ডিটেকশন কোডটি ব্যবহার করে অপ্রয়োজনীয় ছবির মার্কআপ পুরোপুরি বাদ দিয়ে দিতে পারি:

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

এই কৌশলটির একটি সুস্পষ্ট প্রভাব থাকতে পারে, যেমনটি আপনি নীচের চিত্রে দেখতে পাচ্ছেন:

অবশ্যই, ছবি বাদ দেওয়াই একমাত্র উপায় নয়। আপনি Save-Data ব্যবহার করে অন্যান্য কম গুরুত্বপূর্ণ রিসোর্স, যেমন নির্দিষ্ট টাইপফেস, পাঠানো থেকেও বিরত থাকতে পারেন।

অপ্রয়োজনীয় ওয়েব ফন্ট বাদ দিন

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

তাহলে এটা যুক্তিযুক্ত হতে পারে যে, যেসব ব্যবহারকারী আরও সরল ইউজার এক্সপেরিয়েন্স চান, তাদের জন্য আপনি অপ্রয়োজনীয় ওয়েব ফন্টগুলো বাদ দিতে চাইতে পারেন। Save-Data এই কাজটি বেশ সহজ করে তোলে।

উদাহরণস্বরূপ, ধরা যাক আপনি আপনার সাইটে গুগল ফন্টস থেকে ফিরা স্যান্স (Fira Sans) অন্তর্ভুক্ত করেছেন। ফিরা স্যান্স মূল লেখার জন্য একটি চমৎকার ফন্ট, কিন্তু যারা ডেটা সংরক্ষণ করতে চান, তাদের জন্য এটি হয়তো ততটা জরুরি নয়। যখন সেভ-ডেটা ( Save-Data হেডারটি উপস্থিত থাকে, তখন <html> এলিমেন্টে save-data -data) ক্লাসটি যোগ করার মাধ্যমে আমরা এমন স্টাইল লিখতে পারি, যা প্রথমে অপ্রয়োজনীয় টাইপফেসটিকে ব্যবহার করবে, কিন্তু Save-Data হেডারটি উপস্থিত থাকলে সেটিকে বাদ দিয়ে দেবে:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

এই পদ্ধতি ব্যবহার করে, আপনি গুগল ফন্টস-এর <link> কোডটি যথাস্থানে রেখে দিতে পারেন, কারণ ব্রাউজার প্রথমে DOM-এ স্টাইল প্রয়োগ করে এবং তারপর কোনো HTML এলিমেন্ট স্টাইল শিটের রিসোর্সগুলোকে ব্যবহার করছে কিনা তা পরীক্ষা করে CSS রিসোর্স (ওয়েব ফন্ট সহ) অনুমানমূলকভাবে লোড করে। যদি কেউ Save-Data চালু করে রাখে, তাহলে Fira Sans কখনোই লোড হবে না, কারণ স্টাইল করা DOM এটিকে কখনোই কল করে না। এর পরিবর্তে Arial চালু হয়ে যাবে। এটি Fira Sans-এর মতো অতটা সুন্দর না হলেও, যারা তাদের ডেটা প্ল্যানের সর্বোচ্চ ব্যবহার করতে চান, তাদের জন্য এটি বেশি সুবিধাজনক হতে পারে।

সারসংক্ষেপ

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

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

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

Save-Data সম্পর্কে আরও বিস্তারিত তথ্য এবং চমৎকার বাস্তব উদাহরণের জন্য, Help Your Users Save Data দেখুন।