দীর্ঘজীবী পৃষ্ঠাগুলিতে আরও ন্যায্য হতে CLS মেট্রিক উন্নত করার পরিকল্পনা।
প্রকাশিত: এপ্রিল 7, 2021
আমরা (Chrome Speed Metrics Team) সম্প্রতি আমাদের প্রাথমিক গবেষণার রূপরেখা দিয়েছি যাতে CLS মেট্রিককে দীর্ঘ সময়ের জন্য খোলা পৃষ্ঠাগুলির জন্য আরও ন্যায্য করে তোলা যায় ৷ আমরা অনেক সহায়ক প্রতিক্রিয়া পেয়েছি এবং বড় আকারের বিশ্লেষণ শেষ করার পরে, আমরা মেট্রিকে যে পরিবর্তন করার পরিকল্পনা করছি তা চূড়ান্ত করেছি: 1 সেকেন্ডের ব্যবধান সহ সর্বাধিক সেশন উইন্ডো, 5 সেকেন্ডে সীমাবদ্ধ ।
বিস্তারিত জানার জন্য পড়ুন!
আমরা কিভাবে বিকল্পগুলি মূল্যায়ন করেছি?
আমরা বিকাশকারী সম্প্রদায় থেকে প্রাপ্ত সমস্ত প্রতিক্রিয়া পর্যালোচনা করেছি এবং এটিকে বিবেচনায় নিয়েছি।
আমরা Chrome-এ শীর্ষ বিকল্পগুলিও প্রয়োগ করেছি এবং লক্ষ লক্ষ ওয়েব পৃষ্ঠাগুলির মেট্রিক্সের একটি বড় আকারের বিশ্লেষণ করেছি৷ আমরা প্রতিটি বিকল্পের কোন ধরনের সাইট উন্নত হয়েছে এবং বিকল্পগুলি কীভাবে তুলনা করা হয়েছে তা পরীক্ষা করে দেখেছি, বিশেষ করে বিভিন্ন বিকল্পের দ্বারা ভিন্নভাবে স্কোর করা সাইটগুলির দিকে তাকাচ্ছি। সামগ্রিকভাবে, আমরা খুঁজে পেয়েছি যে:
- সমস্ত বিকল্প পৃষ্ঠায় ব্যয় করা সময় এবং লেআউট শিফট স্কোরের মধ্যে পারস্পরিক সম্পর্ককে হ্রাস করেছে।
- বিকল্পগুলির মধ্যে কোনটিই কোন পৃষ্ঠার জন্য খারাপ স্কোর তৈরি করেনি। তাই উদ্বিগ্ন হওয়ার দরকার নেই যে এই পরিবর্তনটি আপনার সাইটের স্কোরকে আরও খারাপ করবে।
সিদ্ধান্ত পয়েন্ট
কেন একটি সেশন উইন্ডো?
আমাদের আগের পোস্টে , আমরা লেআউট শিফটগুলিকে একত্রে গোষ্ঠীবদ্ধ করার জন্য কয়েকটি ভিন্ন উইন্ডো করার কৌশল কভার করেছি যখন স্কোর সীমাহীন বৃদ্ধি না পায় তা নিশ্চিত করে। ডেভেলপারদের কাছ থেকে আমরা যে প্রতিক্রিয়া পেয়েছি তা সেশন উইন্ডো কৌশলকে অত্যধিক সমর্থন করেছে কারণ এটি লেআউটটিকে সবচেয়ে স্বজ্ঞাতভাবে একসাথে স্থানান্তরিত করে।
সেশন উইন্ডোগুলি পর্যালোচনা করতে, এখানে একটি উদাহরণ দেওয়া হল:
উপরের উদাহরণে, ব্যবহারকারী পৃষ্ঠাটি দেখার সাথে সাথে সময়ের সাথে সাথে অনেক লেআউট পরিবর্তন ঘটে। প্রতিটি একটি নীল বার দ্বারা প্রতিনিধিত্ব করা হয়. আপনি উপরে লক্ষ্য করবেন যে নীল বারগুলির বিভিন্ন উচ্চতা রয়েছে; এগুলি প্রতিটি পৃথক লেআউট শিফটের স্কোর প্রতিনিধিত্ব করে। একটি সেশন উইন্ডো প্রথম লেআউট শিফট দিয়ে শুরু হয় এবং লেআউট শিফ্ট ছাড়া একটি ফাঁক না থাকা পর্যন্ত প্রসারিত হতে থাকে। পরবর্তী লেআউট শিফট হলে, একটি নতুন সেশন উইন্ডো শুরু হয়। যেহেতু লেআউট শিফট ছাড়া তিনটি ফাঁক আছে, উদাহরণে তিনটি সেশন উইন্ডো আছে। CLS-এর বর্তমান সংজ্ঞার অনুরূপ, প্রতিটি শিফটের স্কোর যোগ করা হয়, যাতে প্রতিটি উইন্ডোর স্কোর তার পৃথক লেআউট শিফটের সমষ্টি হয়।
প্রাথমিক গবেষণার উপর ভিত্তি করে, আমরা সেশন উইন্ডোগুলির মধ্যে একটি 1 সেকেন্ডের ব্যবধান বেছে নিয়েছি, এবং সেই ব্যবধানটি আমাদের বড় আকারের বিশ্লেষণে ভাল কাজ করেছে। সুতরাং উপরের উদাহরণে দেখানো "সেশন গ্যাপ" হল 1 সেকেন্ড।
কেন সর্বাধিক সেশন উইন্ডো?
আমরা আমাদের প্রাথমিক গবেষণায় সংক্ষিপ্তকরণ কৌশলগুলিকে দুটি বিকল্পে সংকুচিত করেছি:
- খুব বড় সেশন উইন্ডোগুলির জন্য সমস্ত সেশন উইন্ডোর গড় স্কোর (তাদের মধ্যে 5 সেকেন্ডের ব্যবধান সহ আনক্যাপড উইন্ডো)।
- ছোট সেশন উইন্ডোগুলির জন্য সমস্ত সেশন উইন্ডোর সর্বোচ্চ স্কোর (5 সেকেন্ডে সীমাবদ্ধ, তাদের মধ্যে 1 সেকেন্ডের ব্যবধান সহ)।
প্রাথমিক গবেষণার পর, আমরা প্রতিটি মেট্রিককে Chrome-এ যোগ করেছি যাতে আমরা লক্ষ লক্ষ ইউআরএল-এর উপর একটি বড় আকারের বিশ্লেষণ করতে পারি। বৃহৎ আকারের বিশ্লেষণে, আমরা লেআউট শিফ্ট প্যাটার্ন সহ অনেক ইউআরএল পেয়েছি:
নীচে ডানদিকে, আপনি দেখতে পাচ্ছেন সেশন উইন্ডো 2-এ শুধুমাত্র একটি একক, ক্ষুদ্র লেআউট শিফট রয়েছে, এটিকে খুব কম স্কোর দিচ্ছে। তার মানে গড় স্কোর বেশ কম। কিন্তু ডেভেলপার সেই ক্ষুদ্র লেআউট শিফট ঠিক করলে কি হবে? তারপর স্কোরটি শুধুমাত্র সেশন উইন্ডো 1-এ গণনা করা হয়, যার অর্থ হল পৃষ্ঠার স্কোর প্রায় দ্বিগুণ হয়ে যায় । এটি সত্যিই বিভ্রান্তিকর এবং নিরুৎসাহিত করার জন্য ডেভেলপারদের তাদের লেআউট পরিবর্তনগুলিকে উন্নত করার জন্য শুধুমাত্র স্কোর খারাপ হয়েছে। এবং এই ছোট লেআউট স্থানান্তর অপসারণ ব্যবহারকারীর অভিজ্ঞতার জন্য স্পষ্টতই সামান্য ভাল, তাই এটি স্কোর খারাপ করা উচিত নয়।
গড় নিয়ে এই সমস্যার কারণে, আমরা ছোট, ক্যাপড, সর্বাধিক উইন্ডোগুলির সাথে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি। সুতরাং উপরের উদাহরণে, সেশন উইন্ডো 2 উপেক্ষা করা হবে এবং শুধুমাত্র সেশন উইন্ডো 1-এ লেআউট শিফটের সমষ্টি রিপোর্ট করা হবে।
৫ সেকেন্ড কেন?
আমরা একাধিক উইন্ডোর আকার মূল্যায়ন করেছি এবং দুটি জিনিস পেয়েছি:
- সংক্ষিপ্ত উইন্ডোগুলির জন্য, ধীরে ধীরে পৃষ্ঠা লোড এবং ব্যবহারকারীর মিথস্ক্রিয়াগুলির ধীর প্রতিক্রিয়া একাধিক উইন্ডোতে লেআউট পরিবর্তনগুলিকে ভেঙে দিতে পারে এবং স্কোর উন্নত করতে পারে। আমরা উইন্ডোটি যথেষ্ট বড় রাখতে চেয়েছিলাম যাতে এটি মন্থরতাকে পুরস্কৃত না করে!
- ছোট লেআউট পরিবর্তনের একটি ক্রমাগত স্ট্রিম সহ কিছু পৃষ্ঠা আছে। উদাহরণস্বরূপ, একটি স্পোর্টস স্কোর পৃষ্ঠা যা প্রতিটি স্কোর আপডেটের সাথে কিছুটা পরিবর্তন করে। এই পরিবর্তনগুলি বিরক্তিকর, কিন্তু সময়ের সাথে সাথে তারা আরও বিরক্তিকর হয় না। তাই আমরা নিশ্চিত করতে চেয়েছিলাম যে এই ধরনের লেআউট শিফটের জন্য উইন্ডোটি সীমাবদ্ধ ছিল।
এই দুটি বিষয় মাথায় রেখে, অনেক বাস্তব-বিশ্বের ওয়েব পৃষ্ঠাগুলিতে বিভিন্ন উইন্ডোর আকারের তুলনা করে, আমরা এই সিদ্ধান্তে পৌঁছেছি যে উইন্ডোর আকারের জন্য 5 সেকেন্ড একটি ভাল সীমা হবে।
এটা কিভাবে আমার পৃষ্ঠার CLS স্কোরকে প্রভাবিত করবে?
যেহেতু এই আপডেটটি একটি পৃষ্ঠার CLS ক্যাপ করে, তাই এই পরিবর্তনের ফলে কোনো পৃষ্ঠার স্কোর খারাপ হবে না ।
এবং আমাদের বিশ্লেষণের উপর ভিত্তি করে, 55% উৎপত্তি 75 তম পার্সেন্টাইলে CLS-এ কোনো পরিবর্তন দেখতে পাবে না । এর কারণ হল তাদের পৃষ্ঠাগুলিতে বর্তমানে কোনো লেআউট শিফট নেই বা তাদের যে শিফটগুলি রয়েছে তা ইতিমধ্যেই একটি সেশন উইন্ডোতে সীমাবদ্ধ।
বাকি অরিজিনগুলি এই পরিবর্তনের সাথে 75 তম পার্সেন্টাইলে উন্নত স্কোর দেখতে পাবে। বেশিরভাগই কেবল সামান্য উন্নতি দেখতে পাবে, কিন্তু প্রায় 3% তাদের স্কোর "উন্নতির প্রয়োজন" বা "দরিদ্র" রেটিং থেকে "ভাল" রেটিং পেতে দেখতে পাবে। এই পৃষ্ঠাগুলিতে অসীম স্ক্রলার ব্যবহার করার প্রবণতা রয়েছে বা অনেক ধীর UI আপডেট রয়েছে, যেমনটি আমাদের আগের পোস্টে বর্ণিত হয়েছে৷
আমি কিভাবে এটা চেষ্টা করতে পারেন?
আমরা শীঘ্রই নতুন মেট্রিক সংজ্ঞা ব্যবহার করার জন্য আমাদের সরঞ্জামগুলি আপডেট করব! ততক্ষণ পর্যন্ত, আপনি জাভাস্ক্রিপ্ট ইমপ্লিমেন্টেশন বা ওয়েব ভাইটালস এক্সটেনশনের কাঁটা ব্যবহার করে যেকোন সাইটে CLS-এর আপডেটেড সংস্করণ ব্যবহার করে দেখতে পারেন।
ধন্যবাদ সবাইকে যারা সময় নিয়ে আগের পোস্টটি পড়েছেন এবং তাদের মতামত দিয়েছেন!