অপ্রয়োজনীয় ডাউনলোড দূর করা

Ilya Grigorik

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

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

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

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

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

কোর ওয়েব ভাইটালগুলিতে প্রভাব

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

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)

বৃহত্তম কন্টেন্টফুল পেইন্ট (LCP) পরিমাপ করে যখন সবচেয়ে বড় সামগ্রী (উদাহরণস্বরূপ একটি নায়কের ছবি, বা একটি শিরোনাম) লোড করা হয়। এটি একটি গুরুত্বপূর্ণ উপলব্ধিগত মেট্রিক হিসাবে বিবেচিত হয় যা ব্যবহারকারীকে ধারণা দেয় যে একটি সাইট দ্রুত লোড হচ্ছে।

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

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

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

ক্রমবর্ধমান লেআউট শিফট (CLS)

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

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

নেক্সট পেইন্টের সাথে মিথস্ক্রিয়া (INP)

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

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

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

উপসংহার

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

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

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