টেলিগ্রাফ মিডিয়া গ্রুপে ক্রমবর্ধমান বিন্যাস পরিবর্তন করা

কয়েক মাসের মধ্যে যুক্তরাজ্যের শীর্ষস্থানীয় সংবাদ ওয়েবসাইটটি তাদের 75 তম পার্সেন্টাইল CLS 0.25 থেকে 0.1 থেকে 250% উন্নত করতে সক্ষম হয়েছে।

Chris Boakes

চাক্ষুষ স্থিতিশীলতা চ্যালেঞ্জ

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

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

টিএমজিতে, আমাদের একাধিক দল রয়েছে যা কোড ক্লায়েন্ট-সাইডে অবদান রাখে:

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

এই দলগুলির প্রত্যেকটি নিশ্চিত করা যে পৃষ্ঠার লেআউটকে ঝাঁকুনি দেয় না তা কঠিন হতে পারে। আমাদের পাঠকদের জন্য এটি কত ঘন ঘন ঘটছে তা পরিমাপ করার জন্য ক্রমবর্ধমান বিন্যাস শিফট মেট্রিক ব্যবহার করে, দলগুলি প্রকৃত ব্যবহারকারীর অভিজ্ঞতা সম্পর্কে আরও অন্তর্দৃষ্টি এবং চেষ্টা করার জন্য একটি স্পষ্ট লক্ষ্য পেয়েছে৷ এর ফলে আমাদের 75 তম পার্সেন্টাইল CLS 0.25 থেকে 0.1 এ উন্নতি হয়েছে এবং আমাদের পাসিং বাকেট 57% থেকে 72% এ বৃদ্ধি পেয়েছে।

যেখানে আমরা শুরু করেছি

CrUX ড্যাশবোর্ড ব্যবহার করে আমরা এটি স্থাপন করতে সক্ষম হয়েছি যে আমাদের পৃষ্ঠাগুলি আমরা চাই তার চেয়ে বেশি স্থানান্তরিত হচ্ছে।

আমরা আদর্শভাবে চেয়েছিলাম যে আমাদের পাঠকদের অন্তত 75% একটি "ভাল" অভিজ্ঞতা লাভ করুক তাই আমরা লেআউট অস্থিরতার কারণগুলি চিহ্নিত করা শুরু করেছি৷

কিভাবে আমরা লেআউট স্থানান্তর পরিমাপ

লেআউটটি পরিবর্তনের কারণ কী তা শনাক্ত করতে সাহায্য করার জন্য আমরা Chrome DevTools এবং WebPageTest এর সংমিশ্রণ ব্যবহার করেছি৷ DevTools-এ, আমরা পারফরম্যান্স ট্যাবের অভিজ্ঞতা বিভাগটি ব্যবহার করেছি লেআউট স্থানান্তরের পৃথক দৃষ্টান্ত এবং কীভাবে তারা সামগ্রিক স্কোরে অবদান রেখেছে তা হাইলাইট করতে।

WebPageTest সহায়কভাবে হাইলাইট করে যেখানে টাইমলাইন ভিউতে লেআউট শিফট ঘটে যখন "হাইলাইট লেআউট শিফট" নির্বাচন করা হয়।

আমাদের সর্বাধিক পরিদর্শন করা টেমপ্লেটগুলির প্রতিটি পরিবর্তন পর্যালোচনা করার পরে আমরা কীভাবে উন্নতি করতে পারি সে সম্পর্কে ধারণাগুলির একটি তালিকা নিয়ে এসেছি৷

বিন্যাস স্থানান্তর হ্রাস

আমরা চারটি ক্ষেত্রে ফোকাস করেছি যেখানে আমরা লেআউট শিফট কমাতে পারি: - বিজ্ঞাপন - ছবি - শিরোনাম - এম্বেড

বিজ্ঞাপন

জাভাস্ক্রিপ্টের মাধ্যমে প্রাথমিক পেইন্টের পরে বিজ্ঞাপনগুলি লোড হয়। তারা যে কন্টেইনারে লোড করেছিল তার মধ্যে কোন সংরক্ষিত উচ্চতা ছিল না।

যদিও আমরা সঠিক উচ্চতা জানি না, আমরা স্লটে লোড করা সবচেয়ে সাধারণ বিজ্ঞাপনের আকার ব্যবহার করে স্থান সংরক্ষণ করতে সক্ষম হয়েছি।

আমরা কিছু ক্ষেত্রে বিজ্ঞাপনের গড় উচ্চতা ভুল ধারণা করেছি। ট্যাবলেট পাঠকদের জন্য, স্লটটি ভেঙে পড়ছে।

আমরা স্লটটি পুনরায় পরিদর্শন করেছি এবং সর্বাধিক সাধারণ আকার ব্যবহার করতে উচ্চতা সামঞ্জস্য করেছি।

ছবি

ওয়েবসাইট জুড়ে অনেক ছবি অলসভাবে লোড করা হয়েছে এবং তাদের জন্য তাদের জায়গা সংরক্ষিত আছে।

যাইহোক, নিবন্ধগুলির শীর্ষে থাকা ইনলাইন চিত্রগুলিতে কন্টেইনারে কোনও স্থান সংরক্ষিত ছিল না বা ট্যাগের সাথে যুক্ত প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলিও ছিল না। এটি লোড করার সাথে সাথে লেআউটটি স্থানান্তরিত করেছে৷

চিত্রগুলিতে কেবল প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি যোগ করা নিশ্চিত করে যে লেআউটটি স্থানান্তরিত হয়নি।

হেডার

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

মার্কআপের শীর্ষে হেডার সরানোর ফলে পৃষ্ঠাটি এই শিফট ছাড়াই রেন্ডার হতে পারে।

এম্বেড

প্রায়শই ব্যবহৃত কিছু এম্বেডের একটি সংজ্ঞায়িত আকৃতির অনুপাত থাকে। যেমন ইউটিউব ভিডিও। প্লেয়ারটি লোড হওয়ার সময়, আমরা YouTube থেকে থাম্বনেইলটি টেনে নিই এবং ভিডিও লোড হওয়ার সময় এটিকে একটি স্থানধারক হিসাবে ব্যবহার করি।

প্রভাব পরিমাপ

আমরা নিবন্ধের শুরুতে উল্লিখিত টুলিং ব্যবহার করে খুব সহজেই বৈশিষ্ট্য স্তরে প্রভাব পরিমাপ করতে সক্ষম হয়েছি। যাইহোক আমরা একটি টেমপ্লেট স্তরে এবং একটি সাইট স্তরে উভয় CLS পরিমাপ করতে চেয়েছিলাম। কৃত্রিমভাবে, আমরা প্রি-প্রোডাকশন এবং প্রোডাকশন উভয় ক্ষেত্রেই পরিবর্তন যাচাই করতে SpeedCurve ব্যবহার করেছি।

কোডটি উৎপাদনে পৌঁছে গেলে আমরা তারপরে আমাদের RUM ডেটাতে ( mPulse দ্বারা সরবরাহ করা) ফলাফলগুলি যাচাই করতে সক্ষম হব।

RUM ডেটা পরীক্ষা করা আমাদের একটি ভাল স্তরের আত্মবিশ্বাস প্রদান করে যে আমরা যে পরিবর্তনগুলি করছি তা আমাদের পাঠকদের জন্য ইতিবাচক প্রভাব ফেলছে।

আমরা যে চূড়ান্ত সংখ্যাগুলি দেখেছি তা হল Google সংগ্রহ করা RUM ডেটার জন্য৷ এটি এখন বিশেষভাবে প্রাসঙ্গিক কারণ তারা শীঘ্রই পৃষ্ঠা র‌্যাঙ্কিংয়ে প্রভাব ফেলবে । প্রারম্ভিকদের জন্য আমরা Chrome UX রিপোর্ট ব্যবহার করেছি, উভয় ক্ষেত্রেই CrUX ড্যাশবোর্ডের মাধ্যমে উপলব্ধ মাসিক উৎপত্তি স্তরের ডেটা, সেইসাথে ঐতিহাসিক p75 ডেটা পুনরুদ্ধার করতে BigQuery-কে জিজ্ঞাসা করে ৷ এইভাবে আমরা সহজেই দেখতে পাচ্ছি যে CrUX দ্বারা পরিমাপ করা সমস্ত ট্র্যাফিকের জন্য, আমাদের 75 তম পার্সেন্টাইল CLS 0.25 থেকে 0.1 থেকে 250% উন্নত হয়েছে এবং আমাদের পাসিং বাকেট 57% থেকে 72% বেড়েছে।

উপরন্তু, আমরা Chrome UX রিপোর্ট API ব্যবহার করতে এবং টেমপ্লেটে বিভক্ত কিছু অভ্যন্তরীণ ড্যাশবোর্ড তৈরি করতে সক্ষম হয়েছি।

CLS রিগ্রেশন এড়ানো

কর্মক্ষমতা উন্নতি করার একটি গুরুত্বপূর্ণ দিক হল রিগ্রেশন এড়ানো। আমরা আমাদের মূল মেট্রিক্সের জন্য কিছু মৌলিক কর্মক্ষমতা বাজেট সেট আপ করেছি এবং সেগুলির মধ্যে CLS অন্তর্ভুক্ত করেছি।

পরীক্ষাটি বাজেটের চেয়ে বেশি হলে এটি একটি স্ল্যাক চ্যানেলে একটি বার্তা পাঠাবে যাতে আমরা কারণটি তদন্ত করতে পারি। আমরা সাপ্তাহিক প্রতিবেদনগুলিও সেট আপ করেছি, যাতে টেমপ্লেটগুলি বাজেটে থেকে গেলেও আমরা নেতিবাচক প্রভাব ফেলেছে এমন কোনও পরিবর্তন সম্পর্কে সচেতন।

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

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

উপসংহার

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

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