আজ থেকে, Lighthouse, PageSpeed Insights, এবং Chrome UX রিপোর্ট সহ Chrome-এর ওয়েব টুলিং সারফেসগুলির একটি সংখ্যা জুড়ে CLS-এ একটি পরিবর্তন আনা হয়েছে৷
আজ আমরা শেয়ার করতে চাই কিভাবে আমরা ক্রোমের ওয়েব টুলিং সারফেস জুড়ে ক্রমবর্ধমান লেআউট শিফট (CLS) মেট্রিক পরিমাপ করছি। বিকাশকারীদের জন্য, এই পরিবর্তনগুলি দীর্ঘস্থায়ী পৃষ্ঠাগুলির জন্য ব্যবহারকারী-অভিজ্ঞতাকে আরও ভালভাবে প্রতিফলিত করবে (যেমন অসীম স্ক্রোল বা একক-পৃষ্ঠার অ্যাপগুলির সাথে)। CLS-এর এই আপডেটগুলি লাইটহাউস, পেজস্পিড ইনসাইটস এবং ক্রোম ইউএক্স রিপোর্ট সহ টুলগুলিতে রোল আউট করা হবে৷
আমরা সবাই আশা করি যে আমরা ওয়েবে কম লেআউট স্থানান্তর দেখি। এখানেই CLS মেট্রিক একটি ওয়েব পৃষ্ঠার ভিজ্যুয়াল স্থায়িত্ব পরিমাপ করতে কার্যকর প্রমাণিত হয়েছে। এটি সাইটগুলিকে বিষয়বস্তুর জন্য আরও ভাল মাত্রা সেট করতে উত্সাহিত করতে সাহায্য করে, যেমন ছবি বা বিজ্ঞাপন, যা তাদের ব্যবহারকারীদের জন্য সামগ্রীর আশ্চর্যজনক লাফ দিতে অবদান রাখতে পারে।
মেট্রিকটির নামকরণ করা হয়েছে "ক্রমবর্ধমান" কারণ প্রতিটি পৃথক স্থানান্তরের স্কোর একটি পৃষ্ঠার জীবনকাল জুড়ে যোগ করা হয়। যদিও ওয়েবে সমস্ত লেআউট পরিবর্তনের কারণে ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়, দীর্ঘজীবী পৃষ্ঠাগুলি যেমন একক-পৃষ্ঠা অ্যাপস (এসপিএ) বা অসীম স্ক্রোল অ্যাপগুলি স্বাভাবিকভাবেই সময়ের সাথে সাথে আরও বেশি CLS জমা করে। শিফটের সবচেয়ে খারাপ 'উইন্ডো'-এ সমষ্টিকে ক্যাপ করার মাধ্যমে, CLS এখন সেশনের সময়কাল নির্বিশেষে আরও ধারাবাহিকভাবে পরিমাপ করা যেতে পারে।
আমরা যেমন CLS মেট্রিক বিকাশে ঘোষণা করেছি, আমরা CLS মেট্রিককে 1 সেকেন্ডের ব্যবধানে সর্বাধিক সেশন উইন্ডোতে সামঞ্জস্য করছি, 5 সেকেন্ডে সীমাবদ্ধ , এই আপডেটটি দীর্ঘজীবী পৃষ্ঠাগুলির জন্য ব্যবহারকারীর অভিজ্ঞতাকে আরও ভালভাবে প্রতিফলিত করে। এই পরিবর্তনের সাথে সাথে, 70% অরিজিন 75 তম পার্সেন্টাইলে কোন CLS পরিবর্তনের আশা করা উচিত নয়, এবং অবশিষ্ট 30% উত্স একটি উন্নতি দেখতে পাবে।
সিএলএস-এ উইন্ডিং অ্যাডজাস্টমেন্ট রোল আউট করা হচ্ছে
আমরা আপডেট হওয়া CLS সংজ্ঞাটি 1 সেকেন্ডের ব্যবধান সহ সর্বাধিক সেশন উইন্ডো, 5 সেকেন্ডে সীমাবদ্ধ হওয়ার বিষয়ে কথা বলেছি। যে টুলস জন্য মানে কি?
আজ থেকে, CLS-তে এই পরিবর্তনটি Lighthouse, PageSpeed Insights, এবং Chrome UX রিপোর্ট সহ Chrome-এর বেশ কয়েকটি ওয়েব টুলিং সারফেস জুড়ে চালু করা হয়েছে। নীচে আপনি CLS উইন্ডোজ অ্যাডজাস্টমেন্ট রোলআউটের একটি সারাংশ দেখতে পারেন, সেইসাথে কোন টুলগুলি এখনও মূল বাস্তবায়নের বিপরীতে বেঞ্চমার্ক করার ক্ষমতা প্রদান করে।
| টুল | CLS জানালা সমন্বয় 'লাইভ' | "পুরাতন" CLS উপলব্ধতা |
|---|---|---|
| Lighthouse DevTools প্যানেল | ক্যানারি চ্যানেল, ২ জুন ২০২১ | N/A |
| বাতিঘর CLI | v8, 1 জুন 2021 এ প্রকাশিত হয়েছে | লাইটহাউস v8-এ টোটাল কিউমুলেটিভ লেআউটশিফ্ট হিসাবে উপলব্ধ |
| বাতিঘর CI | v0.7.3, 3 জুন 2021 | N/A |
| পেজস্পিড ইনসাইট (PSI) | 1 জুন 2021 | এন.এ |
| PSI API | 1 জুন 2021 | lighthouseResult totalCumulativeLayoutShift হিসেবে পাওয়া যায়। অভিজ্ঞতার ডেটা loadingExperience ক্ষেত্রে উপলব্ধ নয়৷ |
| Chrome UX রিপোর্ট (CrUX) - BigQuery | 202105 ডেটাসেট, 8 জুন 2021 প্রকাশিত হয়েছে | 202111 পর্যন্ত experimental.uncapped_cumulative_layout_shift হিসাবে উপলব্ধ |
| Chrome UX রিপোর্ট (CrUX) - API | 1 জুন 2021 | 1 জুন 2021-এর পর, 14 ডিসেম্বর, 2021 তারিখে experimental_uncapped_cumulative_layout_shift হিসাবে উপলব্ধ |
শীঘ্রই উইন্ডো অ্যাডজাস্টমেন্ট সমর্থন করার জন্য Chrome DevTools আপডেট করা হবে। CLS-এর আপডেটটি Search Console- এও করা হয়েছে এবং এটি 1 জুন, 2021 থেকে প্রতিফলিত হবে।
বেশিরভাগ বিকাশকারীদের জন্য, এই পরিবর্তনটি নির্বিঘ্নে ঘটবে বলে আশা করা হচ্ছে ফিক্স থেকে ডেটার সুবিধা নেওয়ার জন্য কোনও পদক্ষেপের প্রয়োজন নেই৷
"পুরাতন" CLS
একটি অনুস্মারক হিসাবে, "পুরানো" CLS পৃষ্ঠার সমগ্র জীবনকালের উপর লেআউট পরিবর্তন পরিমাপ করে। যেহেতু কিছু বিকাশকারী উইন্ডোজ-অ্যাডজাস্টমেন্টের পাশাপাশি CLS-এর পুরানো সংজ্ঞা নিরীক্ষণ করতে ইচ্ছুক হতে পারে, আমাদের কাছে ভাগ করার জন্য ভাল খবর রয়েছে: আমরা Lighthouse এবং CrUX-এ "পুরানো CLS" প্রকাশ করছি৷
Lighthouse v8-এ, এটি JSON-এ audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift হিসেবে পাওয়া যায়।
আপনি এটি CrUX API-এ experimental_uncapped_cumulative_layout_shift হিসেবে এবং CrUX BigQuery-এ experimental.uncapped_cumulative_layout_shift হিসেবে পাবেন।
১লা জুনের পরে, CrUX API অনুরোধগুলি "পুরানো CLS" মেট্রিক ফেরত দেবে:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
৮ জুনের পরে, নিম্নলিখিত CrUX BigQuery পুরানো এবং নতুন CLS তুলনা করবে:
WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start
14 ই ডিসেম্বর, 2021-এ "পুরানো CLS" অবসর নেওয়ার সাথে আপনি 6 মাস পর্যন্ত উপস্থিত থাকার জন্য এই ডেটার উপর নির্ভর করা চালিয়ে যেতে পারবেন।
লাইটহাউসে CLS ওয়েটিং আপডেট করা হচ্ছে
CLS যখন Lighthouse-এ প্রথম চালু হয়েছিল, তখন এটি ছিল একেবারে নতুন স্পার্কলি মেট্রিক। যেমন, ডেভেলপারদের পরীক্ষা, বেঞ্চমার্ক এবং এর বিপরীতে অপ্টিমাইজ করার সময় ছিল তা নিশ্চিত করার জন্য, CLS পারফরম্যান্স স্কোরে কম ওজন করা হয়েছিল।
এখন, ডেভেলপারদের হাতে কিছু সময় থাকার পর, Lighthouse স্কোর CLS-এর ওজন 5% থেকে বাড়িয়ে 15% করেছে, কোর ওয়েব ভাইটালগুলি লাইটহাউস স্কোরের সবচেয়ে বেশি ওজনযুক্ত মেট্রিক্স হওয়ার পদ্ধতির সাথে সামঞ্জস্যপূর্ণ।
আপনি স্কোরিং ক্যালকুলেটরে লাইটহাউস v8-এ মেট্রিক্সের আপডেট করা ওজন খুঁজে পেতে পারেন।
Lighthouse 8.0-এর CLS বাস্তবায়নে সাবফ্রেম থেকে জানালা এবং CLS অবদান উভয়ই অন্তর্ভুক্ত। 8.0-এর আগে, Lighthouse-এর CLS মেট্রিক গণনার মধ্যে সাবফ্রেমের CLS অন্তর্ভুক্ত করত না, কিন্তু এখন করে। এবং শুধুমাত্র নিশ্চিতকরণের জন্য, CrUX দ্বারা পরিমাপ করা ক্ষেত্র CLS একইভাবে উইন্ডো এবং সাবফ্রেমগুলি পরিচালনা করে।
তবুও, ল্যাব এবং ফিল্ড সিএলএস-এর মধ্যে প্রাথমিক পার্থক্য হল যে ল্যাব সিএলএস-এর পর্যবেক্ষণ উইন্ডো ল্যাব অবস্থার অধীনে নির্ধারিত "সম্পূর্ণ লোড" এ শেষ হয়, যেখানে ক্ষেত্রে, পর্যবেক্ষণের উইন্ডোটি পুরো পৃষ্ঠার জীবনকাল পর্যন্ত প্রসারিত হয়, যার মধ্যে পোস্ট-লোড কার্যকলাপ সহ . এটি বলেছে, উইন্ডোর সামঞ্জস্য এই পার্থক্যটিকে উল্লেখযোগ্যভাবে প্রশমিত করে।
নিজেই মাঠে মাপছেন
আপনি যদি সর্বশেষ CLS বাস্তবায়ন পরিমাপ করতে চান তবে আপনি নিম্নলিখিত PerformanceObserver স্নিপেট ব্যবহার করে RUM এর মাধ্যমে আপনার ফিল্ড ডেটার জন্য এটি রেকর্ড করতে পারেন।
অথবা সরাসরি Web Vitals JavaScript লাইব্রেরির উপর নির্ভর করে, যা এই পরিবর্তনের সাথে আপডেট করা হয়েছে।
অতিরিক্ত আপডেট
Cumulative Layout Shift-এর আপডেটের বাইরে, আমাদের ওয়েব টুলিং-এ নিম্নলিখিত মেট্রিক্স-সম্পর্কিত আপডেটগুলিও করা হয়েছে:
- আমরা সর্ববৃহৎ সামগ্রীপূর্ণ পেইন্ট মেট্রিকের সবচেয়ে সাম্প্রতিক সংজ্ঞা আপডেট করছি। CrUX API, PSI, PSI API, Search Console 1 জুন, 2021-এ আপডেট হবে। CrUX BigQuery 8 জুন, 2021-এ আপডেট হবে।
- CrUX-এ, ফার্স্ট কনটেন্টফুল পেইন্ট ট্রাই-বিনিং থ্রেশহোল্ড আপডেট করা হয়েছে, ভালো: [0-1.8s], উন্নতি প্রয়োজন: (1.8s-3s), খারাপ: [3s-∞]
উপসংহার
আমরা আশা করি যে এই পরিবর্তনটি বেশিরভাগ সাইটের জন্য একটি মসৃণ রূপান্তর প্রতিফলিত করবে এবং কীভাবে আপনার লেআউট পরিবর্তনগুলি পরিমাপ এবং অপ্টিমাইজ করা যায় সে সম্পর্কে টিপস এবং কৌশলগুলির জন্য ওয়েব ভাইটাল এবং অপ্টিমাইজ সিএলএস পরীক্ষা করতে উত্সাহিত করবে৷ বরাবরের মতো, মেট্রিক্স সম্পর্কে প্রতিক্রিয়া এবং লাইটহাউসের জন্য আমাদের টুলিং নির্দিষ্ট প্রতিক্রিয়া ফোরাম এবং টুলিং সমস্যাগুলির জন্য Chrome UX রিপোর্ট সম্পর্কে প্রতিক্রিয়ার জন্য ওয়েব-ভিটালস-ফিডব্যাক গোষ্ঠীতে নির্দ্বিধায় যোগাযোগ করুন৷ চিয়ার্স!
জোহানেস হেঙ্কেল, রিক ভিসকোমি, বিবেক শেখর, রাচেল অ্যান্ড্রু, মিলিকা মিহাজলিজা, জেফ জোস এবং পল আইরিশকে তাদের প্রতিক্রিয়ার জন্য ধন্যবাদ।
Unsplash- এ Barn Images / @barnimages-এর হিরো ছবি