কিভাবে দ্য ইকোনমিক টাইমস কোর ওয়েব ভাইটাল থ্রেশহোল্ড অতিক্রম করেছে এবং সামগ্রিকভাবে 43% ভালো বাউন্স রেট অর্জন করেছে

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

Anshu Sharma

Prashant Mishra

Sumit Gugnani

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

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

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

সামগ্রিকভাবে, CLS 0.25 থেকে 0.09 এ 250% উন্নত হয়েছে । সামগ্রিকভাবে, LCP 4.5 সেকেন্ড থেকে 2.5 সেকেন্ডে 80% বৃদ্ধি পেয়েছে ।

আরও, অক্টোবর 2020 থেকে জুলাই 2021 পর্যন্ত "দরিদ্র" পরিসরে LCP মানগুলি 33% হ্রাস পেয়েছে:

উপরন্তু, "দরিদ্র" পরিসরে CLS মানগুলি 65% হ্রাস পেয়েছে এবং "ভাল" পরিসরে CLS মান একই সময়সীমার মধ্যে 20% বৃদ্ধি পেয়েছে:

ফলাফল হল যে দ্য ইকোনমিক টাইমস-যা আগে কোর ওয়েব ভাইটাল থ্রেশহোল্ডগুলি পূরণ করেনি-এখন তার সমগ্র উত্স জুড়ে কোর ওয়েব ভাইটালস থ্রেশহোল্ড অতিক্রম করেছে এবং সামগ্রিকভাবে 43% বাউন্স রেট কমিয়েছে ।

দ্য ইকোনমিক টাইমসের আর্টিকেল পেজের আগে এবং পরে অ্যানিমেশন।

এলসিপি কী এবং আমরা কীভাবে এটিকে উন্নত করেছি?

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

একটি দ্রুত DNS প্রদানকারীতে স্যুইচ করা এবং ইমেজ অপ্টিমাইজ করার পাশাপাশি, এখানে কিছু কৌশল রয়েছে যা আমরা LCP উন্নত করতে কভার করেছি।

সমালোচনামূলক অনুরোধ প্রথম

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

টেক্সট চেহারা

আমরা font-display সম্পত্তি নিয়ে পরীক্ষা করেছি কারণ এটি LCP এবং CLS উভয়কেই প্রভাবিত করে। আমরা font-display: auto; এবং তারপর font-display: swap; . এটি প্রাথমিকভাবে পাঠ্যটিকে সেরা মিল এবং উপলব্ধ ফন্টে রেন্ডার করে, তারপরে এটি ডাউনলোড হয়ে গেলে ফন্টে স্যুইচ করে। এর ফলে আমাদের টেক্সট দ্রুত রেন্ডারিং হয়েছে, নেটওয়ার্ক গতির থেকে স্বাধীন।

ভাল কম্প্রেশন

Brotli হল Gzip এবং Deflate-এর বিকল্প কম্প্রেশন অ্যালগরিদম যা Google দ্বারা তৈরি করা হয়েছে। আমরা আমাদের ফন্ট এবং সম্পদ প্রতিস্থাপন করেছি এবং একটি ছোট পদচিহ্ন অর্জনের জন্য Gzip থেকে Brotli-তে সার্ভার কম্প্রেশন পরিবর্তন করেছি:

• জাভাস্ক্রিপ্ট ফাইল Gzip এর তুলনায় 15% ছোট।
• HTML ফাইলগুলি Gzip-এর তুলনায় 18% ছোট।
• CSS এবং ফন্ট ফাইল Gzip এর তুলনায় 17% ছোট।

থার্ড-পার্টি ডোমেনে প্রি-কানেক্ট করুন

preconnect সাবধানে ব্যবহার করা উচিত কারণ এটি এখনও মূল্যবান CPU সময় নিতে পারে এবং অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলিকে বিলম্বিত করতে পারে, বিশেষত সুরক্ষিত সংযোগগুলিতে।

যাইহোক, যদি এটি জানা যায় যে একটি তৃতীয় পক্ষের ডোমেনে একটি সম্পদের জন্য একটি আনয়ন ঘটবে, তাহলে preconnect ভাল। এটি শুধুমাত্র একটি উচ্চ ট্রাফিক ওয়েবসাইটে মাঝে মাঝে ঘটলে, preconnect অপ্রয়োজনীয় TCP এবং TLS কাজ শুরু করতে পারে। এইভাবে dns-prefetch তৃতীয়-পক্ষের সংস্থানগুলির জন্য একটি ভাল ফিট ছিল—উদাহরণস্বরূপ, সোশ্যাল মিডিয়া, অ্যানালিটিক্স ইত্যাদি।

খণ্ডে কোড বিভক্ত

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

আরও ভালো ক্যাশিং

সমস্ত ফ্রন্ট-এন্ড রুটের জন্য, আমরা একটি রেডিস স্তর যোগ করেছি যা ক্যাশে থেকে টেমপ্লেট পরিবেশন করে। এটি সার্ভারে গণনার সময় হ্রাস করে এবং প্রতিটি অনুরোধে সম্পূর্ণ UI তৈরি করে, এইভাবে পরবর্তী অনুরোধগুলিতে LCP হ্রাস পায়।

এলসিপি লক্ষ্য এবং অর্জনের সারসংক্ষেপ

অপ্টিমাইজেশন প্রজেক্ট শুরু করার আগে, দলটি তাদের LCP স্কোরকে 4.5 সেকেন্ডে বেঞ্চমার্ক করেছে (CrUX রিপোর্ট ফিল্ড ডেটার উপর ভিত্তি করে তাদের ব্যবহারকারীদের 75 তম পার্সেন্টাইলের জন্য)। অপ্টিমাইজেশন প্রকল্পের পরে, এটি 2.5 সেকেন্ডে হ্রাস করা হয়েছিল।

সূত্র: দ্য ইকোনমিক টাইমস সামগ্রিক LCP-এর CrUX রিপোর্ট

সিএলএস কী এবং আমরা কীভাবে এটিকে উন্নত করেছি?

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

দ্রষ্টব্য: CLS সম্পর্কে আরও তথ্যের জন্য, CLS মেট্রিক পৃষ্ঠাটি পড়ুন।

আমরা দ্য ইকোনমিক টাইমস ওয়েবসাইটে CLS-এর উন্নতির জন্য যে ব্যবস্থা গ্রহণ করেছি তা কভার করতে যাচ্ছি।

স্থানধারক ব্যবহার করুন

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

সংজ্ঞায়িত ধারক মাত্রা

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

CLS লক্ষ্য এবং অর্জনের সারসংক্ষেপ

অপ্টিমাইজেশান প্রকল্প শুরু করার আগে, দলটি তাদের CLS স্কোর 0.25 এ বেঞ্চমার্ক করেছে। আমরা এটি উল্লেখযোগ্যভাবে 90% থেকে 0.09 কমাতে সক্ষম হয়েছি।

ফার্স্ট ইনপুট বিলম্ব (এফআইডি) কী এবং আমরা কীভাবে এটিকে উন্নত করেছি?

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

দীর্ঘ জাভাস্ক্রিপ্ট টাস্ক আপ ব্রেক আপ

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

অব্যবহৃত জাভাস্ক্রিপ্ট বিলম্বিত করুন

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

পলিফিল কমিয়ে দিন

আমরা নির্দিষ্ট পলিফিল এবং লাইব্রেরির উপর আমাদের নির্ভরতা কমিয়েছি, যেহেতু ব্রাউজারগুলি আধুনিক APIগুলির জন্য সমর্থন প্রদান করে এবং কম ব্যবহারকারীরা লিগ্যাসি ব্রাউজার ব্যবহার করছেন, যেমন ইন্টারনেট এক্সপ্লোরার৷

অলস লোড বিজ্ঞাপন

অলসভাবে ভাঁজের নিচে বিজ্ঞাপন লোড করা মূল থ্রেড ব্লক করার সময় কমাতে সাহায্য করেছে এবং এর ফলে FID উন্নত হয়েছে।

FID লক্ষ্য এবং কৃতিত্বের সারসংক্ষেপ

রুটিন পরীক্ষা থেকে, আমরা আমাদের FID 200 ms থেকে 50 ms-এর নিচে কমাতে সক্ষম হয়েছি।

রিগ্রেশন প্রতিরোধ

ইকোনমিক্স টাইমস পৃষ্ঠার কর্মক্ষমতা রিগ্রেশন এড়াতে উৎপাদনে স্বয়ংক্রিয় কর্মক্ষমতা পরীক্ষা চালু করার পরিকল্পনা করেছে। তারা ল্যাব পরীক্ষা স্বয়ংক্রিয় করার জন্য Lighthouse-CI মূল্যায়ন করার পরিকল্পনা করেছে, যা তাদের উৎপাদন শাখায় রিগ্রেশন প্রতিরোধ করতে পারে।