ডেটা-সেভারের মাধ্যমে দ্রুত ও হালকা অ্যাপ্লিকেশন ডেলিভার করা

Dave Gash
Dave Gash
Ilya Grigorik
Jeremy Wagner

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

লাইটওয়েট পৃষ্ঠার প্রয়োজনীয়তা

Weblight পরিসংখ্যান

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

এবং, যদিও 2G কানেকশনের সংখ্যা অবশেষে কমে যাচ্ছে, 2015 সালে 2G এখনও প্রভাবশালী নেটওয়ার্ক প্রযুক্তি ছিল। 3G এবং 4G নেটওয়ার্কের অনুপ্রবেশ এবং উপলভ্যতা দ্রুত বৃদ্ধি পাচ্ছে, কিন্তু এর সাথে যুক্ত মালিকানার খরচ এবং নেটওয়ার্কের সীমাবদ্ধতা এখনও কোটি কোটি ব্যবহারকারীর জন্য একটি গুরুত্বপূর্ণ বিষয়।

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

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

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 অবজেক্টের উপস্থিতি চেক করা গুরুত্বপূর্ণ, কারণ এটি নেটওয়ার্ক তথ্য API-কে দেখায়, যা শুধুমাত্র Chrome, Android-এর জন্য Chrome এবং Samsung ইন্টারনেট ব্রাউজারে প্রয়োগ করা হয়। সেখান থেকে, আপনাকে শুধু চেক করতে হবে যে navigator.connection.saveData, true-এর সমান কিনা এবং আপনি সেই অবস্থায় যেকোনও ডেটা সেভিং অপারেশন প্রয়োগ করতে পারবেন।

Chrome-এর ডেভেলপার টুলে Save-Data হেডার দেখানো হয়েছে, সাথে ডেটা সেভার এক্সটেনশনের ছবিও আছে।
Chrome ডেস্কটপে ডেটা সেভার এক্সটেনশন চালু করা।

আপনার অ্যাপ্লিকেশন সার্ভিস ওয়ার্কার ব্যবহার করলে, এটি রিকোয়েস্ট হেডার পরীক্ষা করতে এবং অভিজ্ঞতা অপ্টিমাইজ করার জন্য প্রাসঙ্গিক লজিক প্রয়োগ করতে পারে। বিকল্প হিসেবে, সার্ভার 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 বাড়ানোর কথা বিবেচনা করুন, যেমন ব্যবহারকারীর কানেকশনের ধরন এবং প্রযুক্তি সম্পর্কে তথ্য (NetInfo API দেখুন)। যেমন, Save-Data চালু না থাকলেও, আপনি হয়ত 2G কানেকশন ব্যবহারকারীকে লাইটওয়েট অভিজ্ঞতা প্রদান করতে চাইবেন। আবার, ব্যবহারকারী "দ্রুত" 4G কানেকশন ব্যবহার করছেন মানেই যে তিনি ডেটা সাশ্রয় করতে চান না, তা নয় — যেমন, রোমিংয়ে থাকার সময়। এছাড়াও, আপনি Save-Data-এর উপস্থিতি Device-Memory ক্লায়েন্ট হিন্টের মাধ্যমে বাড়াতে পারেন যাতে সীমিত মেমরি সহ ডিভাইসে ব্যবহারকারীদের সাথে আরও মানিয়ে নেওয়া যায়। ব্যবহারকারীর ডিভাইসের মেমরিও navigator.deviceMemory ক্লায়েন্ট হিন্টে বিজ্ঞাপন দেওয়া হয়।

রেসিপি

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

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

Save-Data স্টেট এমন কিছু যা আপনি navigator.connection.saveData প্রপার্টির মাধ্যমে জাভাস্ক্রিপ্টে শনাক্ত করতে পারবেন, সার্ভার সাইডে এটি শনাক্ত করা কখনও কখনও বেশি সুবিধাজনক। কিছু ক্ষেত্রে JavaScript কাজ নাও করতে পারে। এছাড়াও, সার্ভার-সাইড শনাক্তকরণ হল ক্লায়েন্টকে পাঠানোর আগে মার্কআপ পরিবর্তন করার একমাত্র উপায়, যা 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) জন্য একটি ছবি এবং হাই রেজোলিউশন স্ক্রিনের (যেমন, Retina ডিসপ্লে) জন্য দ্বিগুণ বড় (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
}

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

এছাড়াও, আপনি <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-এর সাহায্যে এই কাজটা অনেকটা সহজে করা যায়।

যেমন, ধরুন আপনি নিজের সাইটে Google Fonts থেকে Fira Sans অন্তর্ভুক্ত করেছেন। Fira Sans হল একটি চমৎকার বডি কপি ফন্ট, কিন্তু ডেটা সেভ করার চেষ্টা করা ব্যবহারকারীদের জন্য এটি হয়তো ততটা গুরুত্বপূর্ণ নয়। Save-Data হেডার উপস্থিত থাকলে <html> এলিমেন্টে save-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;
}

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

সারাংশ

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

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

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

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