কত বড় DOM সাইজ ইন্টারঅ্যাক্টিভিটিকে প্রভাবিত করে এবং আপনি এটি সম্পর্কে কী করতে পারেন

বড় DOM মাপের ইন্টারঅ্যাকটিভিটির উপর আপনার ধারণার চেয়ে বেশি প্রভাব পড়ে। এই নির্দেশিকা ব্যাখ্যা করে কেন, এবং আপনি কি করতে পারেন।

Jeremy Wagner

এটির আশেপাশে কোন উপায় নেই: আপনি যখন একটি ওয়েব পৃষ্ঠা তৈরি করেন, সেই পৃষ্ঠাটিতে একটি ডকুমেন্ট অবজেক্ট মডেল (DOM) থাকবে। DOM আপনার পৃষ্ঠার HTML এর গঠনকে উপস্থাপন করে এবং একটি পৃষ্ঠার গঠন এবং বিষয়বস্তুতে JavaScript এবং CSS অ্যাক্সেস দেয়।

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

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

কখন একটি পৃষ্ঠার DOM খুব বড় হয়?

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

লাইটহাউসের মতে , একটি পৃষ্ঠার DOM আকার অত্যধিক যখন এটি 1,400 নোড অতিক্রম করে। যখন একটি পৃষ্ঠার DOM 800 নোড অতিক্রম করে তখন বাতিঘর সতর্কতা নিক্ষেপ করা শুরু করবে৷ উদাহরণস্বরূপ নিম্নলিখিত HTML নিন:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

উপরের কোডে, চারটি DOM উপাদান রয়েছে: <ul> উপাদান, এবং এর তিনটি <li> চাইল্ড উপাদান। আপনার ওয়েব পৃষ্ঠায় প্রায় নিশ্চিতভাবেই এর চেয়ে অনেক বেশি নোড থাকবে, তাই এটি বোঝা গুরুত্বপূর্ণ যে আপনি DOM সাইজ চেক করার জন্য কী করতে পারেন — সেইসাথে রেন্ডারিং কাজটি অপ্টিমাইজ করার জন্য অন্যান্য কৌশলগুলি একবার আপনি একটি পৃষ্ঠার DOM যতটা ছোট হয়ে গেলে এটা হতে পারে.

কিভাবে বড় DOM পৃষ্ঠা কর্মক্ষমতা প্রভাবিত করে?

বড় DOM গুলি কয়েকটি উপায়ে পৃষ্ঠার কার্যক্ষমতাকে প্রভাবিত করে:

1. পৃষ্ঠার প্রাথমিক রেন্ডারের সময়। যখন একটি পৃষ্ঠায় CSS প্রয়োগ করা হয়, তখন DOM-এর অনুরূপ একটি কাঠামো তৈরি হয় যা CSS অবজেক্ট মডেল (CSSOM) নামে পরিচিত। CSS নির্বাচকদের সুনির্দিষ্টতা বাড়ার সাথে সাথে CSSOM আরও জটিল হয়ে ওঠে এবং ওয়েব পৃষ্ঠাটিকে পর্দায় আঁকতে প্রয়োজনীয় লেআউট, স্টাইলিং, কম্পোজিটিং এবং পেইন্টের কাজ চালানোর জন্য আরও বেশি সময় প্রয়োজন। এই যোগ করা কাজটি পৃষ্ঠা লোডের সময় প্রথম দিকে ঘটতে থাকা মিথস্ক্রিয়াগুলির জন্য মিথস্ক্রিয়া বিলম্বিত করে।
2. যখন ইন্টারঅ্যাকশনগুলি DOM-কে পরিবর্তন করে, হয় উপাদান সন্নিবেশ বা মুছে ফেলার মাধ্যমে, অথবা DOM বিষয়বস্তু এবং শৈলীগুলি সংশোধন করে, সেই আপডেটটি রেন্ডার করার জন্য প্রয়োজনীয় কাজের ফলে খুব ব্যয়বহুল লেআউট, স্টাইলিং, কম্পোজিটিং এবং পেইন্ট কাজ হতে পারে। পৃষ্ঠার প্রাথমিক রেন্ডারের ক্ষেত্রে যেমন, CSS নির্বাচকের নির্দিষ্টতা বৃদ্ধি রেন্ডারিং কাজে যোগ করতে পারে যখন একটি মিথস্ক্রিয়ার ফলাফল হিসাবে এইচটিএমএল উপাদানগুলি DOM-এ প্রবেশ করানো হয়।
3. যখন JavaScript DOM-কে জিজ্ঞাসা করে, DOM উপাদানের রেফারেন্স মেমরিতে সংরক্ষণ করা হয়। উদাহরণস্বরূপ, যদি আপনি একটি পৃষ্ঠায় সমস্ত <div> উপাদান নির্বাচন করতে document.querySelectorAll কল করেন, ফলাফলটি প্রচুর পরিমাণে DOM উপাদান প্রদান করলে মেমরি খরচ যথেষ্ট হতে পারে।

Chrome DevTools-এ কর্মক্ষমতা প্রোফাইলারে দেখানো একটি দীর্ঘ কাজ। জাভাস্ক্রিপ্টের মাধ্যমে একটি বড় DOM-এ DOM এলিমেন্ট ঢোকানোর ফলে দেখানো দীর্ঘ টাস্ক হয়।

এই সবগুলি ইন্টারঅ্যাক্টিভিটি প্রভাবিত করতে পারে, তবে উপরের তালিকার দ্বিতীয় আইটেমটি বিশেষ গুরুত্ব বহন করে। যদি কোনো ইন্টারঅ্যাকশনের ফলে DOM-এ পরিবর্তন হয়, তাহলে এটি অনেক কাজ বন্ধ করে দিতে পারে যা একটি পৃষ্ঠার একটি দুর্বল INP-তে অবদান রাখতে পারে।

আমি কিভাবে DOM আকার পরিমাপ করব?

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

একটি সহজ পদ্ধতিতে যেকোনো বড় ব্রাউজারে ডেভেলপার টুলে জাভাস্ক্রিপ্ট কনসোল ব্যবহার করা জড়িত। DOM-এ HTML উপাদানের মোট সংখ্যা পেতে, পৃষ্ঠাটি লোড হওয়ার পরে আপনি কনসোলে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

document.querySelectorAll('*').length;

দ্রষ্টব্য: মনে রাখবেন যে উপরের কোড স্নিপেটে শুধুমাত্র DOM-এ HTML উপাদানের সংখ্যা অন্তর্ভুক্ত রয়েছে। এটি DOM-এ সমস্ত নোড অন্তর্ভুক্ত করে না।

আপনি যদি রিয়েলটাইমে DOM আকারের আপডেট দেখতে চান, আপনি পারফরম্যান্স মনিটর টুলটিও ব্যবহার করতে পারেন। এই টুলটি ব্যবহার করে, আপনি বর্তমান DOM আকারের সাথে লেআউট এবং স্টাইলিং অপারেশন (এবং অন্যান্য কর্মক্ষমতার দিকগুলি) পারস্পরিক সম্পর্ক স্থাপন করতে পারেন।

Chrome DevTools-এ কর্মক্ষমতা মনিটর। এই দৃশ্যে, পৃষ্ঠার বর্তমান DOM নোডের সংখ্যা লেআউট অপারেশন এবং প্রতি সেকেন্ডে সম্পাদিত শৈলী পুনঃগণনা সহ চার্ট করা হয়।

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

আমি কিভাবে একটি মিথস্ক্রিয়া দ্বারা প্রভাবিত DOM উপাদানের সংখ্যা পরিমাপ করতে পারি?

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

শৈলী পুনর্গণনা কাজের ফলাফল হিসাবে DOM-এ প্রভাবিত উপাদানের সংখ্যা পর্যবেক্ষণ করা। নোট করুন যে ইন্টারঅ্যাকশন ট্র্যাকের মিথস্ক্রিয়াটির ছায়াযুক্ত অংশটি 200 মিলিসেকেন্ডের বেশি ইন্টারঅ্যাকশন সময়কালের অংশকে উপস্থাপন করে, যা INP-এর জন্য মনোনীত "ভাল" থ্রেশহোল্ড ।

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

আমি কিভাবে DOM আকার কমাতে পারি?

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

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

আপনি যখন এই ধরনের নিদর্শনগুলি দেখতে পান, তখন আপনি সম্ভবত আপনার DOM কাঠামো সমতল করে সেগুলিকে সরল করতে পারেন। এটি করলে DOM উপাদানের সংখ্যা হ্রাস পাবে এবং সম্ভবত আপনাকে পৃষ্ঠা শৈলী সহজ করার সুযোগ দেবে।

DOM গভীরতা আপনার ব্যবহার করা ফ্রেমওয়ার্কগুলির একটি উপসর্গও হতে পারে। বিশেষ করে, কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্ক—যেমন যেগুলি JSX- এর উপর নির্ভর করে—আপনাকে একটি প্যারেন্ট কন্টেনারে একাধিক উপাদান নেস্ট করতে হবে।

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

• প্রতিক্রিয়া
• প্র্যাক্ট
• Vue
• স্বেল্ট

আপনার পছন্দের কাঠামোতে টুকরো ব্যবহার করে, আপনি DOM গভীরতা কমাতে পারেন। স্টাইলিংয়ের উপর সমতলকরণ DOM কাঠামোর প্রভাব সম্পর্কে আপনি যদি উদ্বিগ্ন হন, তাহলে আপনি আরও আধুনিক (এবং দ্রুত) লেআউট মোড যেমন ফ্লেক্সবক্স বা গ্রিড ব্যবহার করে উপকৃত হতে পারেন।

অন্যান্য কৌশল বিবেচনা করা

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

একটি সংযোজন পদ্ধতি বিবেচনা করুন

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

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

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

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

CSS নির্বাচক জটিলতা সীমিত করুন

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

আরও জানতে পড়ুন: শৈলী গণনার সুযোগ এবং জটিলতা হ্রাস করুন ।

content-visibility বৈশিষ্ট্য ব্যবহার করুন

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

আরও জানতে পড়ুন: content-visibility : নতুন CSS প্রপার্টি যা আপনার রেন্ডারিং কর্মক্ষমতা বাড়ায় ।

উপসংহার

আপনার DOM সাইজ কমিয়ে শুধুমাত্র যা কঠোরভাবে প্রয়োজন তা হল আপনার ওয়েবসাইটের INP অপ্টিমাইজ করার একটি ভাল উপায়। এটি করার মাধ্যমে, আপনি DOM আপডেট করার সময় লেআউট এবং রেন্ডারিং কাজ সম্পাদন করতে ব্রাউজারটির যে সময় লাগে তা কমাতে পারেন। এমনকি যদি আপনি অর্থপূর্ণভাবে DOM আকার কমাতে না পারেন, তবে কিছু কৌশল রয়েছে যা আপনি একটি DOM সাবট্রিতে রেন্ডারিং কাজকে আলাদা করতে ব্যবহার করতে পারেন, যেমন CSS কন্টেনমেন্ট এবং content-visibility CSS বৈশিষ্ট্য।

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

আনস্প্ল্যাশ থেকে হিরো ইমেজ, লুই রিড দ্বারা।