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

ডেভ গ্যাশ
Dave Gash
ইলিয়া গ্রিগোরিক
জেরেমি ওয়াগনার

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

লাইটওয়েট পেজ জন্য প্রয়োজন

ওয়েবলাইট পরিসংখ্যান

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

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

এই পৃষ্ঠা অপ্টিমাইজেশান জন্য শক্তিশালী যুক্তি.

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

Save-Data রিকোয়েস্ট হেডার

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

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

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

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

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

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

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

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

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

ডেটা সেভার এক্সটেনশনের সাথে চিত্রিত Chrome-এর ডেভেলপার টুলস-এ সেভ-ডেটা হেডার প্রকাশিত হয়েছে।
Chrome ডেস্কটপে ডেটা সেভার এক্সটেনশন সক্রিয় করা হচ্ছে।

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

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

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

রেসিপি

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

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

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

সার্ভার সাইড কোডে Save-Data হেডার সনাক্ত করার জন্য নির্দিষ্ট সিনট্যাক্স ব্যবহৃত ভাষার উপর নির্ভর করে, তবে মৌলিক ধারণাটি যেকোন অ্যাপ্লিকেশনের পিছনের প্রান্তের জন্য একই হওয়া উচিত। পিএইচপি-তে, উদাহরণস্বরূপ, অনুরোধ শিরোনামগুলি HTTP_ দিয়ে শুরু হওয়া সূচীতে $_SERVER সুপারগ্লোবাল অ্যারেতে সংরক্ষণ করা হয়। এর মানে হল আপনি $_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
}

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

আপনি <html> উপাদানে একটি ক্লাস যোগ করে CSS background-image বৈশিষ্ট্যগুলিতে এই ধারণাটি প্রসারিত করতে পারেন:

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

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

অপ্রয়োজনীয় ছবি বাদ দিন

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

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

সারসংক্ষেপ

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

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

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

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