প্রতিক্রিয়া চেয়েছিলেন: দীর্ঘস্থায়ী পৃষ্ঠাগুলির জন্য একটি ভাল লেআউট শিফ্ট মেট্রিকের রাস্তা৷

ক্রমবর্ধমান লেআউট শিফট মেট্রিক উন্নত করার জন্য আমাদের পরিকল্পনা সম্পর্কে জানুন এবং আমাদের মতামত দিন।

Annie Sullivan

Michal Mocny

Cumulative Layout Shift (CLS) হল একটি মেট্রিক যা একটি ওয়েব পেজের ভিজ্যুয়াল স্থায়িত্ব পরিমাপ করে। মেট্রিকটিকে ক্রমবর্ধমান বিন্যাস স্থানান্তর বলা হয় কারণ প্রতিটি পৃথক স্থানান্তরের স্কোর পৃষ্ঠার জীবনকাল জুড়ে যোগ করা হয়।

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

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

উচ্চ CLS স্কোর সহ দীর্ঘস্থায়ী পৃষ্ঠাগুলির একটি অভ্যন্তরীণ বিশ্লেষণে দেখা গেছে যে বেশিরভাগ সমস্যাগুলি নিম্নলিখিত নিদর্শনগুলির কারণে হয়েছিল:

• ব্যবহারকারীর স্ক্রোল করার সাথে সাথে অসীম স্ক্রলার সামগ্রী পরিবর্তন করে ।
• কোনো ধরনের স্থানধারক বা কঙ্কাল প্যাটার্ন ছাড়াই ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় UI আপডেট করতে ইনপুট হ্যান্ডলাররা 500 ms-এর বেশি সময় নেয়।

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

একটি নতুন মেট্রিক ভাল হলে আমরা কিভাবে সিদ্ধান্ত নেব?

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

প্রথমত, আমরা বিভিন্ন ওয়েবসাইটের মাধ্যমে 34 জন ব্যবহারকারীর ভ্রমণের ভিডিও এবং ক্রোম ট্রেস রেকর্ড করেছি। ব্যবহারকারীর যাত্রা নির্বাচন করার সময়, আমরা কয়েকটি জিনিসের জন্য লক্ষ্য রেখেছিলাম:

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

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

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

আমরা কি মেট্রিক ধারণা পরীক্ষা করেছি?

জানালা কৌশল

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

• থমকে যাওয়া জানালা
• স্লাইডিং জানালা
• সেশন উইন্ডোজ

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

থমকে যাওয়া জানালা

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

স্লাইডিং জানালা

একটি পদ্ধতি যা আমাদের একই দৈর্ঘ্যের আরও সম্ভাব্য গ্রুপিং দেখতে দেয় তা হল সময়ের সাথে সাথে সম্ভাব্য উইন্ডোটি ক্রমাগত আপডেট করা। উপরের চিত্রটি একবারে একটি স্লাইডিং উইন্ডো দেখায়, তবে আমরা একটি মেট্রিক তৈরি করতে সমস্ত সম্ভাব্য স্লাইডিং উইন্ডো বা তাদের একটি উপসেট দেখতে পারি।

সেশন উইন্ডোজ

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

জানালার মাপ

উইন্ডোগুলি আসলে কত বড় তার উপর নির্ভর করে মেট্রিকটি খুব ভিন্ন ফলাফল দিতে পারে, তাই আমরা একাধিক ভিন্ন উইন্ডো আকারের চেষ্টা করেছি:

• প্রতিটি শিফট তার নিজস্ব উইন্ডো হিসাবে (কোন জানালা নেই)
• 100 ms
• 300 ms
• 1 সেকেন্ড
• 5 সেকেন্ড

সারসংক্ষেপ

আমরা বিভিন্ন উইন্ডো সংক্ষিপ্ত করার জন্য অনেক উপায় চেষ্টা করেছি।

শতকরা

আমরা সর্বাধিক উইন্ডো মান, সেইসাথে 95 তম পার্সেন্টাইল, 75 তম পার্সেন্টাইল এবং মিডিয়ান দেখেছি।

গড়

আমরা গড় উইন্ডো মান তাকান.

বাজেট

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

অন্যান্য কৌশল

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

প্রাথমিক ফলাফল

সামগ্রিকভাবে, আমরা উপরের ধারনাগুলির পরিবর্তনের উপর ভিত্তি করে 145টি ভিন্ন মেট্রিক সংজ্ঞা পরীক্ষা করেছি। প্রতিটি মেট্রিকের জন্য, আমরা মেট্রিকে তাদের স্কোর অনুসারে সমস্ত ব্যবহারকারীর যাত্রাকে র‌্যাঙ্ক করি এবং তারপরে তারা আদর্শ র‌্যাঙ্কিংয়ের কতটা কাছাকাছি ছিল তার ভিত্তিতে মেট্রিকগুলিকে র‌্যাঙ্ক করি।

একটি বেসলাইন পেতে, আমরা সমস্ত সাইটকে তাদের বর্তমান CLS স্কোর অনুসারে র‍্যাঙ্ক করেছি। CLS 32 তম স্থানে রয়েছে, অন্যান্য 13টি কৌশলের সাথে আবদ্ধ, তাই এটি উপরের কৌশলগুলির বেশিরভাগ পরিবর্তনের চেয়ে ভাল ছিল। ফলাফলগুলি অর্থপূর্ণ ছিল তা নিশ্চিত করার জন্য, আমরা তিনটি এলোমেলো ক্রম যুক্ত করেছি। প্রত্যাশিত হিসাবে, র্যান্ডম অর্ডারগুলি পরীক্ষা করা প্রতিটি কৌশলের চেয়ে খারাপ করেছে।

ডেটা সেটের জন্য আমরা ওভারফিটিং করতে পারি কিনা তা বোঝার জন্য, আমাদের বিশ্লেষণের পরে আমরা কিছু নতুন লেআউট শিফট ভিডিও এবং ট্রেস রেকর্ড করেছি, সেগুলিকে ম্যানুয়ালি র‍্যাঙ্ক করেছি এবং দেখেছি যে মেট্রিক র‌্যাঙ্কিং নতুন ডেটা সেট এবং আসলটির জন্য খুব মিল ছিল৷

কয়েকটি ভিন্ন কৌশল র‌্যাঙ্কিংয়ে দাঁড়িয়েছে।

সেরা কৌশল

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

লম্বা উইন্ডোগুলির উচ্চ শতাংশ

কয়েকটি উইন্ডো করার কৌশল দীর্ঘ উইন্ডো আকারের সাথে ভাল কাজ করেছে:

• 1 সেকেন্ডের স্লাইডিং জানালা
• সেশন উইন্ডো 1 সেকেন্ডের ব্যবধানে 5 সেকেন্ডে সীমাবদ্ধ
• সেশন উইন্ডো 1 সেকেন্ডের ব্যবধানে আনক্যাপড

এই সব 95 তম শতাংশ এবং সর্বোচ্চ উভয় সত্যিই ভাল র্যাঙ্ক.

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

দীর্ঘ ফাঁক সহ সেশন উইন্ডোগুলির গড়

তাদের মধ্যে 5 সেকেন্ডের ব্যবধান সহ সমস্ত আনক্যাপড সেশন উইন্ডোগুলির স্কোর গড় সত্যিই ভাল পারফর্ম করেছে। এই কৌশলটির কয়েকটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে:

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

ছোট উইন্ডোর উচ্চ পার্সেন্টাইল

সর্বাধিক 300 ms স্লাইডিং উইন্ডোটি অত্যন্ত উচ্চ র‌্যাঙ্ক করেছে, সেইসাথে 95 তম পার্সেন্টাইল। ছোট উইন্ডোর আকারের জন্য, বৃহত্তর উইন্ডোর আকারের তুলনায় শতকরা কম পারসেন্টাইল ইন্টারপোলেশন আছে, কিন্তু আমরা "পুনরাবৃত্তি" স্লাইডিং উইন্ডো সম্পর্কে উদ্বিগ্ন ছিলাম- যদি দুটি ফ্রেমের উপর লেআউট শিফটের একটি সেট ঘটে, তবে একাধিক 300 ms উইন্ডো রয়েছে যা সেগুলিকে অন্তর্ভুক্ত করে। সর্বাধিক গ্রহণ করা 95 তম পার্সেন্টাইল নেওয়ার চেয়ে অনেক পরিষ্কার এবং সহজ। তাই আবার আমরা সর্বোচ্চ পরীক্ষা করে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

কৌশল যা কাজ করেনি

যে কৌশলগুলি লেআউট শিফ্ট ছাড়া এবং লেআউট শিফ্ট উভয়ের সাথেই অতিবাহিত সময়ের "গড়" অভিজ্ঞতা দেখার চেষ্টা করেছিল সেগুলি খুব খারাপ করেছে৷ কোনো উইন্ডো করার কৌশলের মধ্যম বা 75তম পার্সেন্টাইল সারাংশের কোনোটিই সাইটগুলোকে ভালোভাবে স্থান দেয়নি। সময়ের সাথে সাথে লেআউটের যোগফলও পরিবর্তিত হয়নি।

আমরা গ্রহণযোগ্য লেআউট পরিবর্তনের জন্য বিভিন্ন "বাজেট" মূল্যায়ন করেছি:

• লেআউটের শতাংশ কিছু বাজেটের উপরে স্থানান্তরিত হয়। বিভিন্ন বাজেটের জন্য, এই সবগুলি বেশ খারাপভাবে র‌্যাঙ্ক করা হয়েছে।
• কিছু অতিরিক্ত উপরে গড় লেআউট স্থানান্তর. এই কৌশলের বেশিরভাগ বৈচিত্রগুলি খারাপভাবে কাজ করেছে, কিন্তু একটি বড় ব্যবধানের সাথে একটি দীর্ঘ সেশনে গড় অতিরিক্ত প্রায় একইভাবে দীর্ঘ ব্যবধান সহ সেশন উইন্ডোগুলির গড় করেছে৷ আমরা শুধুমাত্র পরেরটির সাথে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি কারণ এটি সহজ।

পরবর্তী পদক্ষেপ

বৃহত্তর স্কেল বিশ্লেষণ

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

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

আমাদের পদ্ধতির প্রতিক্রিয়া

আমরা এই পদ্ধতিতে ওয়েব ডেভেলপারদের কাছ থেকে প্রতিক্রিয়া পেতে চাই। নতুন পন্থা বিবেচনা করার সময় কিছু জিনিস মনে রাখবেন:

কি পরিবর্তন হয় না

আমরা স্পষ্ট করতে চাই যে একটি নতুন পদ্ধতির সাথে অনেক কিছু পরিবর্তন হবে না:

• আমাদের কোনো মেট্রিক ধারণা পৃথক ফ্রেমের জন্য লেআউট শিফ্ট স্কোর যেভাবে গণনা করা হয় তা পরিবর্তন করে না, শুধুমাত্র আমরা একাধিক ফ্রেমের সংক্ষিপ্তকরণের উপায়। এর মানে হল লেআউট শিফটের জন্য JavaScript API একই থাকবে, এবং ডেভেলপার টুলগুলি ব্যবহার করে Chrome ট্রেসে অন্তর্নিহিত ইভেন্টগুলিও একই থাকবে, তাই WebPageTest এবং Chrome DevTools-এর মতো টুলগুলিতে লেআউট শিফটগুলি একইভাবে কাজ করতে থাকবে৷
• আমরা ডেভেলপারদের জন্য মেট্রিকগুলিকে সহজে গ্রহণ করার জন্য কঠোর পরিশ্রম চালিয়ে যাব, সেগুলিকে ওয়েব-ভিটালস লাইব্রেরিতে অন্তর্ভুক্ত করে, web.dev- এ নথিভুক্ত করা এবং লাইটহাউসের মতো আমাদের ডেভেলপার টুলিং-এ রিপোর্ট করা।

মেট্রিক্সের মধ্যে ট্রেড-অফ

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

আপনি কি স্লাইডিং বা সেশন উইন্ডোগুলি বুঝতে সহজ মনে করেন? পার্থক্য কি আপনার কাছে গুরুত্বপূর্ণ?

কিভাবে মতামত দিতে হয়

আপনি আমাদের উদাহরণ জাভাস্ক্রিপ্ট বাস্তবায়ন বা কোর ওয়েব ভাইটালস এক্সটেনশনের আমাদের ফর্ক ব্যবহার করে যেকোন সাইটে নতুন লেআউট শিফট মেট্রিক্স ব্যবহার করে দেখতে পারেন।

বিষয় লাইনে "[লেআউট শিফট মেট্রিক্স]" সহ আমাদের ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে প্রতিক্রিয়া ইমেল করুন। আমরা সত্যিই আপনি কি মনে করেন শোনার জন্য উন্মুখ!

ক্রমবর্ধমান লেআউট শিফট মেট্রিক উন্নত করার জন্য আমাদের পরিকল্পনা সম্পর্কে জানুন এবং আমাদের মতামত দিন।

Annie Sullivan

Michal Mocny

Cumulative Layout Shift (CLS) হল একটি মেট্রিক যা একটি ওয়েব পেজের ভিজ্যুয়াল স্থায়িত্ব পরিমাপ করে। মেট্রিকটিকে ক্রমবর্ধমান বিন্যাস স্থানান্তর বলা হয় কারণ প্রতিটি পৃথক স্থানান্তরের স্কোর পৃষ্ঠার জীবনকাল জুড়ে যোগ করা হয়।

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

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

উচ্চ CLS স্কোর সহ দীর্ঘস্থায়ী পৃষ্ঠাগুলির একটি অভ্যন্তরীণ বিশ্লেষণে দেখা গেছে যে বেশিরভাগ সমস্যাগুলি নিম্নলিখিত নিদর্শনগুলির কারণে হয়েছিল:

• ব্যবহারকারীর স্ক্রোল করার সাথে সাথে অসীম স্ক্রলার সামগ্রী পরিবর্তন করে ।
• কোনো ধরনের স্থানধারক বা কঙ্কাল প্যাটার্ন ছাড়াই ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় UI আপডেট করতে ইনপুট হ্যান্ডলাররা 500 ms-এর বেশি সময় নেয়।

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

একটি নতুন মেট্রিক ভাল হলে আমরা কিভাবে সিদ্ধান্ত নেব?

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

প্রথমত, আমরা বিভিন্ন ওয়েবসাইটের মাধ্যমে 34 জন ব্যবহারকারীর ভ্রমণের ভিডিও এবং ক্রোম ট্রেস রেকর্ড করেছি। ব্যবহারকারীর যাত্রা নির্বাচন করার সময়, আমরা কয়েকটি জিনিসের জন্য লক্ষ্য রেখেছিলাম:

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

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

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

আমরা কি মেট্রিক ধারণা পরীক্ষা করেছি?

জানালা কৌশল

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

• থমকে যাওয়া জানালা
• স্লাইডিং জানালা
• সেশন উইন্ডোজ

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

থমকে যাওয়া জানালা

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

স্লাইডিং জানালা

একটি পদ্ধতি যা আমাদের একই দৈর্ঘ্যের আরও সম্ভাব্য গ্রুপিং দেখতে দেয় তা হল সময়ের সাথে সাথে সম্ভাব্য উইন্ডোটি ক্রমাগত আপডেট করা। উপরের চিত্রটি একবারে একটি স্লাইডিং উইন্ডো দেখায়, তবে আমরা একটি মেট্রিক তৈরি করতে সমস্ত সম্ভাব্য স্লাইডিং উইন্ডো বা তাদের একটি উপসেট দেখতে পারি।

সেশন উইন্ডোজ

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

জানালার মাপ

উইন্ডোগুলি আসলে কত বড় তার উপর নির্ভর করে মেট্রিকটি খুব ভিন্ন ফলাফল দিতে পারে, তাই আমরা একাধিক ভিন্ন উইন্ডো আকারের চেষ্টা করেছি:

• প্রতিটি শিফট তার নিজস্ব উইন্ডো হিসাবে (কোন জানালা নেই)
• 100 ms
• 300 ms
• 1 সেকেন্ড
• 5 সেকেন্ড

সারসংক্ষেপ

আমরা বিভিন্ন উইন্ডো সংক্ষিপ্ত করার জন্য অনেক উপায় চেষ্টা করেছি।

শতকরা

আমরা সর্বাধিক উইন্ডো মান, সেইসাথে 95 তম পার্সেন্টাইল, 75 তম পার্সেন্টাইল এবং মিডিয়ান দেখেছি।

গড়

আমরা গড় উইন্ডো মান তাকান.

বাজেট

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

অন্যান্য কৌশল

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

প্রাথমিক ফলাফল

সামগ্রিকভাবে, আমরা উপরের ধারনাগুলির পরিবর্তনের উপর ভিত্তি করে 145টি ভিন্ন মেট্রিক সংজ্ঞা পরীক্ষা করেছি। প্রতিটি মেট্রিকের জন্য, আমরা মেট্রিকে তাদের স্কোর অনুসারে সমস্ত ব্যবহারকারীর যাত্রাকে র‌্যাঙ্ক করি এবং তারপরে তারা আদর্শ র‌্যাঙ্কিংয়ের কতটা কাছাকাছি ছিল তার ভিত্তিতে মেট্রিকগুলিকে র‌্যাঙ্ক করি।

একটি বেসলাইন পেতে, আমরা সমস্ত সাইটকে তাদের বর্তমান CLS স্কোর অনুসারে র‍্যাঙ্ক করেছি। CLS 32 তম স্থানে রয়েছে, অন্যান্য 13টি কৌশলের সাথে আবদ্ধ, তাই এটি উপরের কৌশলগুলির বেশিরভাগ পরিবর্তনের চেয়ে ভাল ছিল। ফলাফলগুলি অর্থপূর্ণ ছিল তা নিশ্চিত করার জন্য, আমরা তিনটি এলোমেলো ক্রম যুক্ত করেছি। প্রত্যাশিত হিসাবে, র্যান্ডম অর্ডারগুলি পরীক্ষা করা প্রতিটি কৌশলের চেয়ে খারাপ করেছে।

ডেটা সেটের জন্য আমরা ওভারফিটিং করতে পারি কিনা তা বোঝার জন্য, আমাদের বিশ্লেষণের পরে আমরা কিছু নতুন লেআউট শিফট ভিডিও এবং ট্রেস রেকর্ড করেছি, সেগুলিকে ম্যানুয়ালি র‍্যাঙ্ক করেছি এবং দেখেছি যে মেট্রিক র‌্যাঙ্কিং নতুন ডেটা সেট এবং আসলটির জন্য খুব মিল ছিল৷

কয়েকটি ভিন্ন কৌশল র‌্যাঙ্কিংয়ে দাঁড়িয়েছে।

সেরা কৌশল

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

লম্বা উইন্ডোগুলির উচ্চ শতাংশ

কয়েকটি উইন্ডো করার কৌশল দীর্ঘ উইন্ডো আকারের সাথে ভাল কাজ করেছে:

• 1 সেকেন্ডের স্লাইডিং জানালা
• সেশন উইন্ডো 1 সেকেন্ডের ব্যবধানে 5 সেকেন্ডে সীমাবদ্ধ
• সেশন উইন্ডো 1 সেকেন্ডের ব্যবধানে আনক্যাপড

এই সব 95 তম শতাংশ এবং সর্বোচ্চ উভয় সত্যিই ভাল র্যাঙ্ক.

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

দীর্ঘ ফাঁক সহ সেশন উইন্ডোগুলির গড়

তাদের মধ্যে 5 সেকেন্ডের ব্যবধান সহ সমস্ত আনক্যাপড সেশন উইন্ডোগুলির স্কোর গড় সত্যিই ভাল পারফর্ম করেছে। এই কৌশলটির কয়েকটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে:

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

ছোট উইন্ডোর উচ্চ পার্সেন্টাইল

সর্বাধিক 300 ms স্লাইডিং উইন্ডোটি অত্যন্ত উচ্চ র‌্যাঙ্ক করেছে, সেইসাথে 95 তম পার্সেন্টাইল। ছোট উইন্ডোর আকারের জন্য, বৃহত্তর উইন্ডোর আকারের তুলনায় শতকরা কম পারসেন্টাইল ইন্টারপোলেশন আছে, কিন্তু আমরা "পুনরাবৃত্তি" স্লাইডিং উইন্ডো সম্পর্কে উদ্বিগ্ন ছিলাম- যদি দুটি ফ্রেমের উপর লেআউট শিফটের একটি সেট ঘটে, তবে একাধিক 300 ms উইন্ডো রয়েছে যা সেগুলিকে অন্তর্ভুক্ত করে। সর্বাধিক গ্রহণ করা 95 তম পার্সেন্টাইল নেওয়ার চেয়ে অনেক পরিষ্কার এবং সহজ। তাই আবার আমরা সর্বোচ্চ পরীক্ষা করে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

কৌশল যা কাজ করেনি

যে কৌশলগুলি লেআউট শিফ্ট ছাড়া এবং লেআউট শিফ্ট উভয়ের সাথেই অতিবাহিত সময়ের "গড়" অভিজ্ঞতা দেখার চেষ্টা করেছিল সেগুলি খুব খারাপ করেছে৷ কোনো উইন্ডো করার কৌশলের মধ্যম বা 75তম পার্সেন্টাইল সারাংশের কোনোটিই সাইটগুলোকে ভালোভাবে স্থান দেয়নি। সময়ের সাথে সাথে লেআউটের যোগফলও পরিবর্তিত হয়নি।

আমরা গ্রহণযোগ্য লেআউট পরিবর্তনের জন্য বিভিন্ন "বাজেট" মূল্যায়ন করেছি:

• লেআউটের শতাংশ কিছু বাজেটের উপরে স্থানান্তরিত হয়। বিভিন্ন বাজেটের জন্য, এই সবগুলি বেশ খারাপভাবে র‌্যাঙ্ক করা হয়েছে।
• কিছু অতিরিক্ত উপরে গড় লেআউট স্থানান্তর. এই কৌশলের বেশিরভাগ বৈচিত্রগুলি খারাপভাবে কাজ করেছে, কিন্তু একটি বড় ব্যবধানের সাথে একটি দীর্ঘ সেশনে গড় অতিরিক্ত প্রায় একইভাবে দীর্ঘ ব্যবধান সহ সেশন উইন্ডোগুলির গড় করেছে৷ আমরা শুধুমাত্র পরেরটির সাথে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি কারণ এটি সহজ।

পরবর্তী পদক্ষেপ

বৃহত্তর স্কেল বিশ্লেষণ

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

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

আমাদের পদ্ধতির প্রতিক্রিয়া

আমরা এই পদ্ধতিতে ওয়েব ডেভেলপারদের কাছ থেকে প্রতিক্রিয়া পেতে চাই। নতুন পন্থা বিবেচনা করার সময় কিছু জিনিস মনে রাখবেন:

কি পরিবর্তন হয় না

আমরা স্পষ্ট করতে চাই যে একটি নতুন পদ্ধতির সাথে অনেক কিছু পরিবর্তন হবে না:

• আমাদের কোনো মেট্রিক ধারণা পৃথক ফ্রেমের জন্য লেআউট শিফ্ট স্কোর যেভাবে গণনা করা হয় তা পরিবর্তন করে না, শুধুমাত্র আমরা একাধিক ফ্রেমের সংক্ষিপ্তকরণের উপায়। এর মানে হল লেআউট শিফটের জন্য JavaScript API একই থাকবে, এবং ডেভেলপার টুলগুলি ব্যবহার করে Chrome ট্রেসে অন্তর্নিহিত ইভেন্টগুলিও একই থাকবে, তাই WebPageTest এবং Chrome DevTools-এর মতো টুলগুলিতে লেআউট শিফটগুলি একইভাবে কাজ করতে থাকবে৷
• আমরা ডেভেলপারদের জন্য মেট্রিকগুলিকে সহজে গ্রহণ করার জন্য কঠোর পরিশ্রম চালিয়ে যাব, সেগুলিকে ওয়েব-ভিটালস লাইব্রেরিতে অন্তর্ভুক্ত করে, web.dev- এ নথিভুক্ত করা এবং লাইটহাউসের মতো আমাদের ডেভেলপার টুলিং-এ রিপোর্ট করা।

মেট্রিক্সের মধ্যে ট্রেড-অফ

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

আপনি কি স্লাইডিং বা সেশন উইন্ডোগুলি বুঝতে সহজ মনে করেন? পার্থক্য কি আপনার কাছে গুরুত্বপূর্ণ?

কিভাবে মতামত দিতে হয়

আপনি আমাদের উদাহরণ জাভাস্ক্রিপ্ট বাস্তবায়ন বা কোর ওয়েব ভাইটালস এক্সটেনশনের আমাদের ফর্ক ব্যবহার করে যেকোন সাইটে নতুন লেআউট শিফট মেট্রিক্স ব্যবহার করে দেখতে পারেন।

বিষয় লাইনে "[লেআউট শিফট মেট্রিক্স]" সহ আমাদের ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে প্রতিক্রিয়া ইমেল করুন। আমরা সত্যিই আপনি কি মনে করেন শোনার জন্য উন্মুখ!

ক্রমবর্ধমান লেআউট শিফট মেট্রিক উন্নত করার জন্য আমাদের পরিকল্পনা সম্পর্কে জানুন এবং আমাদের মতামত দিন।

Annie Sullivan

Michal Mocny

Cumulative Layout Shift (CLS) হল একটি মেট্রিক যা একটি ওয়েব পেজের ভিজ্যুয়াল স্থায়িত্ব পরিমাপ করে। মেট্রিকটিকে ক্রমবর্ধমান বিন্যাস স্থানান্তর বলা হয় কারণ প্রতিটি পৃথক স্থানান্তরের স্কোর পৃষ্ঠার জীবনকাল জুড়ে যোগ করা হয়।

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

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

উচ্চ CLS স্কোর সহ দীর্ঘস্থায়ী পৃষ্ঠাগুলির একটি অভ্যন্তরীণ বিশ্লেষণে দেখা গেছে যে বেশিরভাগ সমস্যাগুলি নিম্নলিখিত নিদর্শনগুলির কারণে হয়েছিল:

• ব্যবহারকারীর স্ক্রোল করার সাথে সাথে অসীম স্ক্রলার সামগ্রী পরিবর্তন করে ।
• কোনো ধরনের স্থানধারক বা কঙ্কাল প্যাটার্ন ছাড়াই ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় UI আপডেট করতে ইনপুট হ্যান্ডলাররা 500 ms-এর বেশি সময় নেয়।

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

একটি নতুন মেট্রিক ভাল হলে আমরা কিভাবে সিদ্ধান্ত নেব?

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

প্রথমত, আমরা বিভিন্ন ওয়েবসাইটের মাধ্যমে 34 জন ব্যবহারকারীর ভ্রমণের ভিডিও এবং ক্রোম ট্রেস রেকর্ড করেছি। ব্যবহারকারীর যাত্রা নির্বাচন করার সময়, আমরা কয়েকটি জিনিসের জন্য লক্ষ্য রেখেছিলাম:

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

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

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

আমরা কি মেট্রিক ধারণা পরীক্ষা করেছি?

জানালা কৌশল

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

• থমকে যাওয়া জানালা
• স্লাইডিং জানালা
• সেশন উইন্ডোজ

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

থমকে যাওয়া জানালা

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

স্লাইডিং জানালা

একটি পদ্ধতি যা আমাদের একই দৈর্ঘ্যের আরও সম্ভাব্য গ্রুপিং দেখতে দেয় তা হল সময়ের সাথে সাথে সম্ভাব্য উইন্ডোটি ক্রমাগত আপডেট করা। উপরের চিত্রটি একবারে একটি স্লাইডিং উইন্ডো দেখায়, তবে আমরা একটি মেট্রিক তৈরি করতে সমস্ত সম্ভাব্য স্লাইডিং উইন্ডো বা তাদের একটি উপসেট দেখতে পারি।

সেশন উইন্ডোজ

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

জানালার মাপ

উইন্ডোগুলি আসলে কত বড় তার উপর নির্ভর করে মেট্রিকটি খুব ভিন্ন ফলাফল দিতে পারে, তাই আমরা একাধিক ভিন্ন উইন্ডো আকারের চেষ্টা করেছি:

• প্রতিটি শিফট তার নিজস্ব উইন্ডো হিসাবে (কোন জানালা নেই)
• 100 ms
• 300 ms
• 1 সেকেন্ড
• 5 সেকেন্ড

সারসংক্ষেপ

আমরা বিভিন্ন উইন্ডো সংক্ষিপ্ত করার জন্য অনেক উপায় চেষ্টা করেছি।

শতকরা

আমরা সর্বাধিক উইন্ডো মান, সেইসাথে 95 তম পার্সেন্টাইল, 75 তম পার্সেন্টাইল এবং মিডিয়ান দেখেছি।

গড়

আমরা গড় উইন্ডো মান তাকান.

বাজেট

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

অন্যান্য কৌশল

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

প্রাথমিক ফলাফল

সামগ্রিকভাবে, আমরা উপরের ধারনাগুলির পরিবর্তনের উপর ভিত্তি করে 145টি ভিন্ন মেট্রিক সংজ্ঞা পরীক্ষা করেছি। প্রতিটি মেট্রিকের জন্য, আমরা মেট্রিকে তাদের স্কোর অনুসারে সমস্ত ব্যবহারকারীর যাত্রাকে র‌্যাঙ্ক করি এবং তারপরে তারা আদর্শ র‌্যাঙ্কিংয়ের কতটা কাছাকাছি ছিল তার ভিত্তিতে মেট্রিকগুলিকে র‌্যাঙ্ক করি।

একটি বেসলাইন পেতে, আমরা তাদের বর্তমান সিএলএস স্কোর দ্বারা সমস্ত সাইটগুলিও র‌্যাঙ্ক করেছি। সিএলএস 32 তম স্থানে রেখেছিল, 13 টি অন্যান্য কৌশলগুলির সাথে আবদ্ধ, সুতরাং এটি উপরের কৌশলগুলির বেশিরভাগ পারমুটেশনের চেয়ে ভাল ছিল। ফলাফলগুলি অর্থবহ ছিল তা নিশ্চিত করার জন্য, আমরা তিনটি এলোমেলো ক্রমগুলিতেও যুক্ত করেছি। যেমনটি প্রত্যাশা করা হয়েছিল, এলোমেলো আদেশগুলি পরীক্ষিত প্রতিটি কৌশল থেকে খারাপ করেছে।

আমরা যদি ডেটা সেটটির জন্য অতিরিক্ত মূল্য নির্ধারণ করতে পারি তা বোঝার জন্য, আমাদের বিশ্লেষণের পরে আমরা কিছু নতুন লেআউট শিফট ভিডিও এবং ট্রেস রেকর্ড করেছি, ম্যানুয়ালি সেগুলি র‌্যাঙ্ক করেছি এবং দেখেছি যে মেট্রিক র‌্যাঙ্কিংগুলি নতুন ডেটা সেট এবং মূলটির জন্য খুব মিল ছিল।

কয়েকটি ভিন্ন কৌশল র‌্যাঙ্কিংয়ে দাঁড়িয়েছিল।

সেরা কৌশল

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

দীর্ঘ উইন্ডোগুলির উচ্চ শতাংশ

কয়েকটি উইন্ডোয়িং কৌশল দীর্ঘ উইন্ডো আকারের সাথে ভাল কাজ করেছে:

• 1 সেকেন্ড স্লাইডিং উইন্ডোজ
• সেশন উইন্ডোজ 1 সেকেন্ড ফাঁক দিয়ে 5 সেকেন্ডে ক্যাপড
• সেশন উইন্ডোজ 1 সেকেন্ড ফাঁক দিয়ে আনপ্যাপড

এই সমস্ত 95 তম পার্সেন্টাইল এবং সর্বোচ্চ উভয় ক্ষেত্রেই সত্যই ভাল স্থান পেয়েছে।

তবে এত বড় উইন্ডো আকারের জন্য, আমরা 95 তম পার্সেন্টাইল ব্যবহার করার বিষয়ে উদ্বিগ্ন ছিলাম-প্রায়শই আমরা কেবল 4-6 উইন্ডো দেখছিলাম এবং এর 95 তম পার্সেন্টাইল গ্রহণ করা অনেক বিরতি। ইন্টারপোলেশন মেট্রিক মানের ক্ষেত্রে কী করছে তা এটি অস্পষ্ট। সর্বাধিক মানটি অনেক পরিষ্কার, তাই আমরা সর্বাধিক চেক করে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি।

দীর্ঘ ফাঁক সহ সেশন উইন্ডোজের গড়

তাদের মধ্যে 5 সেকেন্ডের ফাঁক দিয়ে সমস্ত আনপ্যাপড সেশন উইন্ডোগুলির স্কোর গড় করা সত্যিই ভাল পারফর্ম করেছে। এই কৌশলটির কয়েকটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে:

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

সংক্ষিপ্ত উইন্ডোগুলির উচ্চ শতাংশ

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

যে কৌশলগুলি কার্যকর হয়নি

কৌশলগুলি যা লেআউট শিফট ছাড়াই এবং লেআউট শিফটগুলির সাথে উভয়ই ব্যয় করা সময়ের "গড়" অভিজ্ঞতার দিকে নজর দেওয়ার চেষ্টা করেছিল তা খুব খারাপভাবে করেছে। কোনও উইন্ডোইং কৌশলটির মিডিয়ান বা 75 তম পার্সেন্টাইল সংক্ষিপ্তসারগুলির কোনওটিই সাইটগুলিকে ভালভাবে স্থান দেয়নি। সময়ের সাথে সাথে লেআউটের যোগফলও হয়নি।

আমরা গ্রহণযোগ্য লেআউট শিফ্টের জন্য বিভিন্ন "বাজেট" মূল্যায়ন করেছি:

• কিছু বাজেটের উপরে লেআউটের শতকরা শতকরা। বিভিন্ন বাজেটের জন্য, এগুলি সমস্ত বেশ খারাপভাবে স্থান পেয়েছে।
• কিছু অতিরিক্ত উপরে গড় লেআউট শিফট। এই কৌশলটির বেশিরভাগ প্রকরণগুলি খুব খারাপভাবে কাজ করেছিল, তবে একটি বৃহত ব্যবধান সহ দীর্ঘ সেশনের তুলনায় গড় বাড়তি প্রায় পাশাপাশি দীর্ঘ ফাঁক সহ সেশন উইন্ডোগুলির গড় গড় ছিল। আমরা কেবল পরবর্তীকালে এগিয়ে যাওয়ার সিদ্ধান্ত নিয়েছি কারণ এটি সহজ।

পরবর্তী পদক্ষেপ

বৃহত্তর স্কেল বিশ্লেষণ

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

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

আমাদের পদ্ধতির প্রতিক্রিয়া

আমরা এই পদ্ধতির উপর ওয়েব বিকাশকারীদের কাছ থেকে প্রতিক্রিয়া পেতে চাই। নতুন পদ্ধতির কথা বিবেচনা করার সময় কিছু বিষয় মনে রাখতে হবে:

কি পরিবর্তন হচ্ছে না

আমরা স্পষ্ট করতে চাই যে নতুন পদ্ধতির সাথে অনেক কিছুই পরিবর্তন হবে না:

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

মেট্রিকের মধ্যে ট্রেড-অফস

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

আপনি কি স্লাইডিং বা সেশন উইন্ডোগুলি বুঝতে সহজ খুঁজে পান? পার্থক্য কি আপনার কাছে গুরুত্বপূর্ণ?

কিভাবে প্রতিক্রিয়া জানাতে

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

বিষয় লাইনে "[লেআউট শিফট মেট্রিকস]" সহ আমাদের ওয়েব-ভিটালস-প্রতিক্রিয়া গুগল গ্রুপে প্রতিক্রিয়া ইমেল করুন। আমরা সত্যিই আপনি যা ভাবেন তা শোনার অপেক্ষায় রয়েছি!