কীভাবে GoDaddy-এর ওয়েবসাইট + মার্কেটিং পরিষেবা গ্রাহকের কোর ওয়েব ভাইটালকে 75% উন্নত করেছে

লক্ষ লক্ষ সাইটের জন্য ওয়েবসাইটের কর্মক্ষমতা উন্নত করার জন্য GoDaddy-এর পরিবর্তনগুলির একটি কেস স্টাডি, তাদের ভাল PageSpeed ​​Insights এবং Core Web Vitals স্কোর অর্জনে সাহায্য করে।

Simon Le Parc

GoDaddy হল বিশ্বজুড়ে উদ্যোক্তাদের জন্য বিশ্বের বৃহত্তম পরিষেবা প্ল্যাটফর্ম৷ আমরা আমাদের 20 মিলিয়নেরও বেশি গ্রাহকের বিশ্বব্যাপী সম্প্রদায়কে — এবং সর্বত্র উদ্যোক্তাদের — তাদের অনলাইনে বৃদ্ধির জন্য প্রয়োজনীয় সমস্ত সহায়তা এবং সরঞ্জামগুলি দিয়ে ক্ষমতায়নের মিশনে রয়েছি৷

2019 সালে GoDaddy ব্যবহার করা সহজ এবং ব্যবসার মালিকদের তাদের লক্ষ্য অর্জনে সহায়তা করার জন্য একটি প্রতিশ্রুতি সহ ওয়েবসাইট + মার্কেটিং চালু করেছে। ওয়েবসাইট + মার্কেটিং ওয়েবসাইট বিল্ডিংকে মার্কেটিং এবং ই-কমার্স টুলের সাথে একীভূত করে এবং গ্রাহকদের তাদের নতুন উদ্যোগের সাথে সাফল্য অর্জনে সহায়তা করার জন্য তাদের সেরা-শ্রেণীর দিকনির্দেশনার সাথে যুক্ত করে।

ওয়েবসাইট + মার্কেটিং চালু হওয়ার পর থেকে, কর্মক্ষমতা পণ্যের একটি গুরুত্বপূর্ণ অংশ এবং এমন কিছু যা সক্রিয়ভাবে পর্যবেক্ষণ করা হয়েছে এবং কাজ করা হয়েছে। এই নিবন্ধে, আমরা GoDaddy-এর ল্যাব পারফরম্যান্স টেস্টিং ব্যবহার থেকে শুরু করে Core Web Vitals-এর সাথে বাস্তব বিশ্বের ডেটা ব্যবহার করার যাত্রা পর্যালোচনা করব এবং আমাদের গ্রাহকের সাইটগুলির জন্য খুব উচ্চ পাস রেট পেতে পণ্যটিতে করা উন্নতিগুলির ধারাবাহিকতা পর্যালোচনা করব।

Lighthouse সঙ্গে কর্মক্ষমতা ট্র্যাকিং

পারফরম্যান্স ট্র্যাকিংয়ের জন্য আমরা লাইটহাউস ডেটার উপর নির্ভর করেছি। প্ল্যাটফর্মে যখনই কোনো ওয়েবসাইট প্রকাশিত হয়, আমরা "Lighthouse4u" নামের আমাদের অভ্যন্তরীণ টুল ব্যবহার করে তার কার্যক্ষমতা পরিমাপ করি, যা Google Lighthouse কে একটি পরিষেবা হিসেবে প্রদান করে https://github.com/godaddy/lighthouse4u । এটি আমাদের একটি ভাল ইঙ্গিত দিয়েছে যে সাইটগুলি সাধারণত একটি ল্যাব সেটিংয়ে কীভাবে পারফর্ম করছে৷

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

উদাহরণস্বরূপ, এটি আমাদের সনাক্ত করতে সাহায্য করেছে যে "পপআপ মডেল" পৃষ্ঠার গতিতে নেতিবাচক প্রভাব ফেলছে; বৈশিষ্ট্য সহ সাইটগুলি ছাড়ার তুলনায় 12 পয়েন্ট কম পারফর্ম করেছে৷ জাভাস্ক্রিপ্টের লোডিং স্থগিত করার জন্য কোডে আপডেট করার পরে, আমরা আমাদের লাইটহাউস স্কোর 2 পয়েন্ট দ্বারা উন্নত করেছি। আমরা এই শিক্ষাটি অন্যান্য বৈশিষ্ট্যগুলিতে প্রয়োগ করতে সক্ষম হয়েছি যেমন "কুকি ব্যানার" যা পৃষ্ঠা লোড হওয়ার পরেই রেন্ডার হয়৷

বৈশিষ্ট্যগুলির উপর ভিত্তি করে সমস্যাযুক্ত সাইটগুলি দেখার পাশাপাশি, আমরা আমাদের জাভাস্ক্রিপ্ট বান্ডেলের একটি বিশ্লেষণ পরিচালনা করেছি এবং দেখেছি যে এর আকারের একটি বড় অংশ বাহ্যিক নির্ভরতা (অপরিবর্তনীয়.js এবং draft.js) থেকে এসেছে। আমরা চাহিদার উপর অলস লোড নির্ভরতার জন্য ভোক্তাদের পুনর্গঠন করে বান্ডিলের আকার কমিয়েছি। এর ফলে সাধারণ জাভাস্ক্রিপ্ট বান্ডেলের আকার 50% কমে গেছে, যা 200 KB থেকে প্রায় 90 KB (মিনিফাইড) হয়েছে। ছোট বান্ডেলের আকার ব্রাউজারকে বাহ্যিক সম্পদ লোড করতে এবং প্রাথমিক সাইট লোডিং লাইফসাইকেলের আগে সমালোচনামূলক স্ক্রিপ্ট চালানোর অনুমতি দেয়, যার ফলে সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) এবং প্রথম ইনপুট বিলম্ব (FID) লাভ হয়।

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

Core Web Vitals সহ প্রকৃত ব্যবহারকারীর ডেটা ট্র্যাক করা

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

আমাদের দুর্বলতম লিঙ্কে ফোকাস করা: ক্রমবর্ধমান লেআউট শিফট (CLS)

নতুন ডেটা বিশ্লেষণ আমাদের ওয়েবসাইটের গতি উন্নত করতে কী করতে হবে সে সম্পর্কে একটি নতুন দৃষ্টিভঙ্গি দিয়েছে। লাইটহাউস স্কোর উন্নত করার জন্য করা কাজের কারণে, আমাদের 75 তম পার্সেন্টাইল LCP ছিল 860 ms এবং একই থ্রেশহোল্ডে আমাদের FID ছিল 10 ms এর নিচে, তাই আমরা আমাদের গ্রাহকের সাইটগুলিতে এই মেট্রিকগুলির জন্য উচ্চ পাস রেট উপভোগ করেছি: যথাক্রমে 78% এবং 98%৷ যাইহোক, Cumulative Layout Shift (CLS) সংখ্যাগুলি লাইটহাউসের সাথে আমরা যা ব্যবহার করতাম তার থেকে বেশ ভিন্ন দেখায়। 75 তম পার্সেন্টাইলে আমাদের CLS ছিল 0.17–"পাস" হওয়ার 0.1 থ্রেশহোল্ডের উপরে–এবং আমাদের পাসের হার আমাদের সমস্ত সাইটের তুলনায় মাত্র 47% ছিল৷

সেই মেট্রিকটি আমাদের সামগ্রিক পাসের হারকে 40% এ টেনে এনেছে, তাই আমরা 2021 সালের আগস্টের শেষ নাগাদ সেই সংখ্যাটিকে 60%-এর উপরে নিয়ে যাওয়ার জন্য একটি উচ্চাভিলাষী লক্ষ্য নির্ধারণ করার সিদ্ধান্ত নিয়েছি। এটি করতে, আমাদের CLS-এ ফোকাস করতে হবে ।

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

সমস্ত কোর ওয়েব ভাইটাল পাস করার রাস্তা

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

ছবি লোড করার জন্য স্থান সংরক্ষণ করা আমাদের CLS স্কোরকে ব্যাপকভাবে উন্নত করেছে কারণ এটি ছবির নিচের বিষয়বস্তুকে স্থানান্তরিত হতে বাধা দেয়। আমরা এটি সমর্থন করে এমন ব্রাউজারগুলিতে এটি মোকাবেলা করার জন্য CSS aspect-ratio বৈশিষ্ট্য ব্যবহার করেছি। যারা করেন না তাদের জন্য, আমরা একটি স্বচ্ছ প্লেসহোল্ডার ইমেজ লোড করেছি যা ক্যাশে করা হয়েছে এবং মাত্র কয়েক বাইট আকারের, এইভাবে প্রায় তাত্ক্ষণিকভাবে লোড হচ্ছে।

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

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

CLS উন্নতির উপর ফোকাস করার সময়, আমরা LCP-তে কাজ চালিয়ে যাচ্ছি। অনেক ওয়েবসাইটে, চিত্রগুলি LCP-তে অবদান রাখার সবচেয়ে বড় অপরাধী এবং আমাদের জন্য এটি উন্নতির একটি সুস্পষ্ট ক্ষেত্র ছিল। আমরা IntersectionObserver ব্যবহার করে অলস লোড চিত্রগুলিতে উন্নতি করেছি কিন্তু বুঝতে পেরেছি যে প্রতিটি ব্রেকপয়েন্ট (মোবাইল, ট্যাবলেট, ডেস্কটপ, বড় ডেস্কটপ) এর জন্য চিত্রের আকারগুলি সবচেয়ে অনুকূল উপায়ে সেট করা হয়নি, তাই আমরা ব্রেকপয়েন্ট প্রতি চিত্রগুলিকে ক্ল্যাম্প এবং স্কেল করার জন্য আমাদের ইমেজ জেনারেশন কোড আপডেট করেছি এবং তারপরে পিক্সেল ঘনত্বের উপর ভিত্তি করে আবার রেজোলিউশন স্কেল করেছি। উদাহরণ হিসেবে, এটি একটি নির্দিষ্ট বৃহৎ চিত্রের আকার 192 KB থেকে 102 KB-এ হ্রাস করেছে।

দুর্বল নেটওয়ার্ক সংযোগ সহ ডিভাইসগুলিতে ওয়েবসাইটগুলিকে দ্রুত রেন্ডার করতে, আমরা সংযোগের গতির উপর ভিত্তি করে চিত্রের গুণমানকে গতিশীলভাবে স্কেল করার জন্য কোড যুক্ত করেছি। এটি navigator.connection দ্বারা প্রত্যাবর্তিত downlink সম্পত্তি ব্যবহার করে করা যেতে পারে। আমরা সেই নেটওয়ার্ক অবস্থার উপর ভিত্তি করে আমাদের সম্পদ API এর মাধ্যমে ছবির গুণমান কমাতে URL-ভিত্তিক ক্যোয়ারী প্যারামিটার প্রয়োগ করি।

আমাদের গ্রাহক সাইটগুলির কয়েকটি বিভাগ গতিশীলভাবে লোড করা হয়। যেহেতু আমরা জানি একটি প্রদত্ত সাইটে প্রকাশিত হলে কোন বিভাগগুলি রেন্ডার করা হবে, তাই আমরা সংযোগ শুরু করার জন্য rel=preconnect রিসোর্স ইঙ্গিতটি ব্যবহার করেছি এবং সময়ের আগে প্রয়োজনীয় হ্যান্ডশেক করেছি৷ আমরা ফন্ট এবং অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলি দ্রুত লোড করতে সংস্থান ইঙ্গিতগুলিও ব্যবহার করি।

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

ফলাফল

CLS-এর প্রতি আমাদের প্রচেষ্টাকে কেন্দ্রীভূত করে, আমাদের কোর ওয়েব ভাইটাল পাসের হার প্রায় 40% থেকে প্রায় 70%-এ পৌঁছেছে: 75% উন্নতি!

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

উপসংহার

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

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

লক্ষ লক্ষ সাইটের জন্য ওয়েবসাইটের কর্মক্ষমতা উন্নত করার জন্য GoDaddy-এর পরিবর্তনগুলির একটি কেস স্টাডি, তাদের ভাল PageSpeed ​​Insights এবং Core Web Vitals স্কোর অর্জনে সাহায্য করে।

Simon Le Parc

GoDaddy হল বিশ্বজুড়ে উদ্যোক্তাদের জন্য বিশ্বের বৃহত্তম পরিষেবা প্ল্যাটফর্ম৷ আমরা আমাদের 20 মিলিয়নেরও বেশি গ্রাহকের বিশ্বব্যাপী সম্প্রদায়কে — এবং সর্বত্র উদ্যোক্তাদের — তাদের অনলাইনে বৃদ্ধির জন্য প্রয়োজনীয় সমস্ত সহায়তা এবং সরঞ্জামগুলি দিয়ে ক্ষমতায়নের মিশনে রয়েছি৷

2019 সালে GoDaddy ব্যবহার করা সহজ এবং ব্যবসার মালিকদের তাদের লক্ষ্য অর্জনে সহায়তা করার জন্য একটি প্রতিশ্রুতি সহ ওয়েবসাইট + মার্কেটিং চালু করেছে। ওয়েবসাইট + মার্কেটিং ওয়েবসাইট বিল্ডিংকে মার্কেটিং এবং ই-কমার্স টুলের সাথে একীভূত করে এবং গ্রাহকদের তাদের নতুন উদ্যোগের সাথে সাফল্য অর্জনে সহায়তা করার জন্য তাদের সেরা-শ্রেণীর দিকনির্দেশনার সাথে যুক্ত করে।

ওয়েবসাইট + মার্কেটিং চালু হওয়ার পর থেকে, কর্মক্ষমতা পণ্যের একটি গুরুত্বপূর্ণ অংশ এবং এমন কিছু যা সক্রিয়ভাবে পর্যবেক্ষণ করা হয়েছে এবং কাজ করা হয়েছে। এই নিবন্ধে, আমরা GoDaddy-এর ল্যাব পারফরম্যান্স টেস্টিং ব্যবহার থেকে শুরু করে Core Web Vitals-এর সাথে বাস্তব বিশ্বের ডেটা ব্যবহার করার যাত্রা পর্যালোচনা করব এবং আমাদের গ্রাহকের সাইটগুলির জন্য খুব উচ্চ পাস রেট পেতে পণ্যটিতে করা উন্নতিগুলির ধারাবাহিকতা পর্যালোচনা করব।

Lighthouse সঙ্গে কর্মক্ষমতা ট্র্যাকিং

পারফরম্যান্স ট্র্যাকিংয়ের জন্য আমরা লাইটহাউস ডেটার উপর নির্ভর করেছি। প্ল্যাটফর্মে যখনই কোনো ওয়েবসাইট প্রকাশিত হয়, আমরা "Lighthouse4u" নামের আমাদের অভ্যন্তরীণ টুল ব্যবহার করে তার কার্যক্ষমতা পরিমাপ করি, যা Google Lighthouse কে একটি পরিষেবা হিসেবে প্রদান করে https://github.com/godaddy/lighthouse4u । এটি আমাদের একটি ভাল ইঙ্গিত দিয়েছে যে সাইটগুলি সাধারণত একটি ল্যাব সেটিংয়ে কীভাবে পারফর্ম করছে৷

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

উদাহরণস্বরূপ, এটি আমাদের সনাক্ত করতে সাহায্য করেছে যে "পপআপ মডেল" পৃষ্ঠার গতিতে নেতিবাচক প্রভাব ফেলছে; বৈশিষ্ট্য সহ সাইটগুলি ছাড়ার তুলনায় 12 পয়েন্ট কম পারফর্ম করেছে৷ জাভাস্ক্রিপ্টের লোডিং স্থগিত করার জন্য কোডে আপডেট করার পরে, আমরা আমাদের লাইটহাউস স্কোর 2 পয়েন্ট দ্বারা উন্নত করেছি। আমরা এই শিক্ষাটি অন্যান্য বৈশিষ্ট্যগুলিতে প্রয়োগ করতে সক্ষম হয়েছি যেমন "কুকি ব্যানার" যা পৃষ্ঠা লোড হওয়ার পরেই রেন্ডার হয়৷

বৈশিষ্ট্যগুলির উপর ভিত্তি করে সমস্যাযুক্ত সাইটগুলি দেখার পাশাপাশি, আমরা আমাদের জাভাস্ক্রিপ্ট বান্ডেলের একটি বিশ্লেষণ পরিচালনা করেছি এবং দেখেছি যে এর আকারের একটি বড় অংশ বাহ্যিক নির্ভরতা (অপরিবর্তনীয়.js এবং draft.js) থেকে এসেছে। আমরা চাহিদার উপর অলস লোড নির্ভরতার জন্য ভোক্তাদের পুনর্গঠন করে বান্ডিলের আকার কমিয়েছি। এর ফলে সাধারণ জাভাস্ক্রিপ্ট বান্ডেলের আকার 50% কমে গেছে, যা 200 KB থেকে প্রায় 90 KB (মিনিফাইড) হয়েছে। ছোট বান্ডেলের আকার ব্রাউজারকে বাহ্যিক সম্পদ লোড করতে এবং প্রাথমিক সাইট লোডিং লাইফসাইকেলের আগে সমালোচনামূলক স্ক্রিপ্ট চালানোর অনুমতি দেয়, যার ফলে সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) এবং প্রথম ইনপুট বিলম্ব (FID) লাভ হয়।

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

Core Web Vitals সহ প্রকৃত ব্যবহারকারীর ডেটা ট্র্যাক করা

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

আমাদের দুর্বলতম লিঙ্কে ফোকাস করা: ক্রমবর্ধমান লেআউট শিফট (CLS)

নতুন ডেটা বিশ্লেষণ আমাদের ওয়েবসাইটের গতি উন্নত করতে কী করতে হবে সে সম্পর্কে একটি নতুন দৃষ্টিভঙ্গি দিয়েছে। লাইটহাউস স্কোর উন্নত করার জন্য করা কাজের কারণে, আমাদের 75 তম পার্সেন্টাইল LCP ছিল 860 ms এবং একই থ্রেশহোল্ডে আমাদের FID ছিল 10 ms এর নিচে, তাই আমরা আমাদের গ্রাহকের সাইটগুলিতে এই মেট্রিকগুলির জন্য উচ্চ পাস রেট উপভোগ করেছি: যথাক্রমে 78% এবং 98%৷ যাইহোক, Cumulative Layout Shift (CLS) সংখ্যাগুলি লাইটহাউসের সাথে আমরা যা ব্যবহার করতাম তার থেকে বেশ ভিন্ন দেখায়। 75 তম পার্সেন্টাইলে আমাদের CLS ছিল 0.17–"পাস" হওয়ার 0.1 থ্রেশহোল্ডের উপরে–এবং আমাদের পাসের হার আমাদের সমস্ত সাইটের তুলনায় মাত্র 47% ছিল৷

সেই মেট্রিকটি আমাদের সামগ্রিক পাসের হারকে 40% এ টেনে এনেছে, তাই আমরা 2021 সালের আগস্টের শেষ নাগাদ সেই সংখ্যাটিকে 60%-এর উপরে নিয়ে যাওয়ার জন্য একটি উচ্চাভিলাষী লক্ষ্য নির্ধারণ করার সিদ্ধান্ত নিয়েছি। এটি করতে, আমাদের CLS-এ ফোকাস করতে হবে ।

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

সমস্ত কোর ওয়েব ভাইটাল পাস করার রাস্তা

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

ছবি লোড করার জন্য স্থান সংরক্ষণ করা আমাদের CLS স্কোরকে ব্যাপকভাবে উন্নত করেছে কারণ এটি ছবির নিচের বিষয়বস্তুকে স্থানান্তরিত হতে বাধা দেয়। আমরা এটি সমর্থন করে এমন ব্রাউজারগুলিতে এটি মোকাবেলা করার জন্য CSS aspect-ratio বৈশিষ্ট্য ব্যবহার করেছি। যারা করেন না তাদের জন্য, আমরা একটি স্বচ্ছ প্লেসহোল্ডার ইমেজ লোড করেছি যা ক্যাশে করা হয়েছে এবং মাত্র কয়েক বাইট আকারের, এইভাবে প্রায় তাত্ক্ষণিকভাবে লোড হচ্ছে।

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

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

CLS উন্নতির উপর ফোকাস করার সময়, আমরা LCP-তে কাজ চালিয়ে যাচ্ছি। অনেক ওয়েবসাইটে, চিত্রগুলি LCP-তে অবদান রাখার সবচেয়ে বড় অপরাধী এবং আমাদের জন্য এটি উন্নতির একটি সুস্পষ্ট ক্ষেত্র ছিল। আমরা IntersectionObserver ব্যবহার করে অলস লোড চিত্রগুলিতে উন্নতি করেছি কিন্তু বুঝতে পেরেছি যে প্রতিটি ব্রেকপয়েন্ট (মোবাইল, ট্যাবলেট, ডেস্কটপ, বড় ডেস্কটপ) এর জন্য চিত্রের আকারগুলি সবচেয়ে অনুকূল উপায়ে সেট করা হয়নি, তাই আমরা ব্রেকপয়েন্ট প্রতি চিত্রগুলিকে ক্ল্যাম্প এবং স্কেল করার জন্য আমাদের ইমেজ জেনারেশন কোড আপডেট করেছি এবং তারপরে পিক্সেল ঘনত্বের উপর ভিত্তি করে আবার রেজোলিউশন স্কেল করেছি। উদাহরণ হিসেবে, এটি একটি নির্দিষ্ট বৃহৎ চিত্রের আকার 192 KB থেকে 102 KB-এ হ্রাস করেছে।

দুর্বল নেটওয়ার্ক সংযোগ সহ ডিভাইসগুলিতে ওয়েবসাইটগুলিকে দ্রুত রেন্ডার করতে, আমরা সংযোগের গতির উপর ভিত্তি করে চিত্রের গুণমানকে গতিশীলভাবে স্কেল করার জন্য কোড যুক্ত করেছি। এটি navigator.connection দ্বারা প্রত্যাবর্তিত downlink সম্পত্তি ব্যবহার করে করা যেতে পারে। আমরা সেই নেটওয়ার্ক অবস্থার উপর ভিত্তি করে আমাদের সম্পদ API এর মাধ্যমে ছবির গুণমান কমাতে URL-ভিত্তিক ক্যোয়ারী প্যারামিটার প্রয়োগ করি।

আমাদের গ্রাহক সাইটগুলির কয়েকটি বিভাগ গতিশীলভাবে লোড করা হয়। যেহেতু আমরা জানি একটি প্রদত্ত সাইটে প্রকাশিত হলে কোন বিভাগগুলি রেন্ডার করা হবে, তাই আমরা সংযোগ শুরু করার জন্য rel=preconnect রিসোর্স ইঙ্গিতটি ব্যবহার করেছি এবং সময়ের আগে প্রয়োজনীয় হ্যান্ডশেক করেছি৷ আমরা ফন্ট এবং অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলি দ্রুত লোড করতে সংস্থান ইঙ্গিতগুলিও ব্যবহার করি।

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

ফলাফল

CLS-এর প্রতি আমাদের প্রচেষ্টাকে কেন্দ্রীভূত করে, আমাদের কোর ওয়েব ভাইটাল পাসের হার প্রায় 40% থেকে প্রায় 70%-এ পৌঁছেছে: 75% উন্নতি!

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

উপসংহার

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

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

লক্ষ লক্ষ সাইটের জন্য ওয়েবসাইটের কর্মক্ষমতা উন্নত করার জন্য GoDaddy-এর পরিবর্তনগুলির একটি কেস স্টাডি, তাদের ভাল PageSpeed ​​Insights এবং Core Web Vitals স্কোর অর্জনে সাহায্য করে।

Simon Le Parc

GoDaddy হল বিশ্বজুড়ে উদ্যোক্তাদের জন্য বিশ্বের বৃহত্তম পরিষেবা প্ল্যাটফর্ম৷ আমরা আমাদের 20 মিলিয়নেরও বেশি গ্রাহকের বিশ্বব্যাপী সম্প্রদায়কে — এবং সর্বত্র উদ্যোক্তাদের — তাদের অনলাইনে বৃদ্ধির জন্য প্রয়োজনীয় সমস্ত সহায়তা এবং সরঞ্জামগুলি দিয়ে ক্ষমতায়নের মিশনে রয়েছি৷

2019 সালে GoDaddy ব্যবহার করা সহজ এবং ব্যবসার মালিকদের তাদের লক্ষ্য অর্জনে সহায়তা করার জন্য একটি প্রতিশ্রুতি সহ ওয়েবসাইট + মার্কেটিং চালু করেছে। ওয়েবসাইট + মার্কেটিং ওয়েবসাইট বিল্ডিংকে মার্কেটিং এবং ই-কমার্স টুলের সাথে একীভূত করে এবং গ্রাহকদের তাদের নতুন উদ্যোগের সাথে সাফল্য অর্জনে সহায়তা করার জন্য তাদের সেরা-শ্রেণীর দিকনির্দেশনার সাথে যুক্ত করে।

ওয়েবসাইট + মার্কেটিং চালু হওয়ার পর থেকে, কর্মক্ষমতা পণ্যের একটি গুরুত্বপূর্ণ অংশ এবং এমন কিছু যা সক্রিয়ভাবে পর্যবেক্ষণ করা হয়েছে এবং কাজ করা হয়েছে। এই নিবন্ধে, আমরা GoDaddy-এর ল্যাব পারফরম্যান্স টেস্টিং ব্যবহার থেকে শুরু করে Core Web Vitals-এর সাথে বাস্তব বিশ্বের ডেটা ব্যবহার করার যাত্রা পর্যালোচনা করব এবং আমাদের গ্রাহকের সাইটগুলির জন্য খুব উচ্চ পাস রেট পেতে পণ্যটিতে করা উন্নতিগুলির ধারাবাহিকতা পর্যালোচনা করব।

Lighthouse সঙ্গে কর্মক্ষমতা ট্র্যাকিং

পারফরম্যান্স ট্র্যাকিংয়ের জন্য আমরা লাইটহাউস ডেটার উপর নির্ভর করেছি। প্ল্যাটফর্মে যখনই কোনো ওয়েবসাইট প্রকাশিত হয়, আমরা "Lighthouse4u" নামের আমাদের অভ্যন্তরীণ টুল ব্যবহার করে তার কার্যক্ষমতা পরিমাপ করি, যা Google Lighthouse কে একটি পরিষেবা হিসেবে প্রদান করে https://github.com/godaddy/lighthouse4u । এটি আমাদের একটি ভাল ইঙ্গিত দিয়েছে যে সাইটগুলি সাধারণত একটি ল্যাব সেটিংয়ে কীভাবে পারফর্ম করছে৷

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

উদাহরণস্বরূপ, এটি আমাদের সনাক্ত করতে সাহায্য করেছে যে "পপআপ মডেল" পৃষ্ঠার গতিতে নেতিবাচক প্রভাব ফেলছে; বৈশিষ্ট্য সহ সাইটগুলি ছাড়ার তুলনায় 12 পয়েন্ট কম পারফর্ম করেছে৷ জাভাস্ক্রিপ্টের লোডিং স্থগিত করার জন্য কোডে আপডেট করার পরে, আমরা আমাদের লাইটহাউস স্কোর 2 পয়েন্ট দ্বারা উন্নত করেছি। আমরা এই শিক্ষাটি অন্যান্য বৈশিষ্ট্যগুলিতে প্রয়োগ করতে সক্ষম হয়েছি যেমন "কুকি ব্যানার" যা পৃষ্ঠা লোড হওয়ার পরেই রেন্ডার হয়৷

বৈশিষ্ট্যগুলির উপর ভিত্তি করে সমস্যাযুক্ত সাইটগুলি দেখার পাশাপাশি, আমরা আমাদের জাভাস্ক্রিপ্ট বান্ডেলের একটি বিশ্লেষণ পরিচালনা করেছি এবং দেখেছি যে এর আকারের একটি বড় অংশ বাহ্যিক নির্ভরতা (অপরিবর্তনীয়.js এবং draft.js) থেকে এসেছে। আমরা চাহিদার উপর অলস লোড নির্ভরতার জন্য ভোক্তাদের পুনর্গঠন করে বান্ডিলের আকার কমিয়েছি। এর ফলে সাধারণ জাভাস্ক্রিপ্ট বান্ডেলের আকার 50% কমে গেছে, যা 200 KB থেকে প্রায় 90 KB (মিনিফাইড) হয়েছে। ছোট বান্ডেলের আকার ব্রাউজারকে বাহ্যিক সম্পদ লোড করতে এবং প্রাথমিক সাইট লোডিং লাইফসাইকেলের আগে সমালোচনামূলক স্ক্রিপ্ট চালানোর অনুমতি দেয়, যার ফলে সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) এবং প্রথম ইনপুট বিলম্ব (FID) লাভ হয়।

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

Core Web Vitals সহ প্রকৃত ব্যবহারকারীর ডেটা ট্র্যাক করা

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

আমাদের দুর্বলতম লিঙ্কে ফোকাস করা: ক্রমবর্ধমান লেআউট শিফট (CLS)

নতুন ডেটা বিশ্লেষণ আমাদের ওয়েবসাইটের গতি উন্নত করতে কী করতে হবে সে সম্পর্কে একটি নতুন দৃষ্টিভঙ্গি দিয়েছে। লাইটহাউস স্কোর উন্নত করার জন্য করা কাজের কারণে, আমাদের 75 তম পার্সেন্টাইল LCP ছিল 860 ms এবং একই থ্রেশহোল্ডে আমাদের FID ছিল 10 ms এর নিচে, তাই আমরা আমাদের গ্রাহকের সাইটগুলিতে এই মেট্রিকগুলির জন্য উচ্চ পাস রেট উপভোগ করেছি: যথাক্রমে 78% এবং 98%৷ যাইহোক, Cumulative Layout Shift (CLS) সংখ্যাগুলি লাইটহাউসের সাথে আমরা যা ব্যবহার করতাম তার থেকে বেশ ভিন্ন দেখায়। 75 তম পার্সেন্টাইলে আমাদের CLS ছিল 0.17–"পাস" হওয়ার 0.1 থ্রেশহোল্ডের উপরে–এবং আমাদের পাসের হার আমাদের সমস্ত সাইটের তুলনায় মাত্র 47% ছিল৷

সেই মেট্রিকটি আমাদের সামগ্রিক পাসের হারকে 40% এ টেনে এনেছে, তাই আমরা 2021 সালের আগস্টের শেষ নাগাদ সেই সংখ্যাটিকে 60%-এর উপরে নিয়ে যাওয়ার জন্য একটি উচ্চাভিলাষী লক্ষ্য নির্ধারণ করার সিদ্ধান্ত নিয়েছি। এটি করতে, আমাদের CLS-এ ফোকাস করতে হবে ।

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

সমস্ত কোর ওয়েব ভাইটাল পাস করার রাস্তা

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

ছবি লোড করার জন্য স্থান সংরক্ষণ করা আমাদের CLS স্কোরকে ব্যাপকভাবে উন্নত করেছে কারণ এটি ছবির নিচের বিষয়বস্তুকে স্থানান্তরিত হতে বাধা দেয়। আমরা এটি সমর্থন করে এমন ব্রাউজারগুলিতে এটি মোকাবেলা করার জন্য CSS aspect-ratio বৈশিষ্ট্য ব্যবহার করেছি। যারা করেন না তাদের জন্য, আমরা একটি স্বচ্ছ প্লেসহোল্ডার ইমেজ লোড করেছি যা ক্যাশে করা হয়েছে এবং মাত্র কয়েক বাইট আকারের, এইভাবে প্রায় তাত্ক্ষণিকভাবে লোড হচ্ছে।

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

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

CLS উন্নতির উপর ফোকাস করার সময়, আমরা LCP-তে কাজ চালিয়ে যাচ্ছি। অনেক ওয়েবসাইটে, চিত্রগুলি LCP-তে অবদান রাখার সবচেয়ে বড় অপরাধী এবং আমাদের জন্য এটি উন্নতির একটি সুস্পষ্ট ক্ষেত্র ছিল। আমরা IntersectionObserver ব্যবহার করে অলস লোড চিত্রগুলিতে উন্নতি করেছি কিন্তু বুঝতে পেরেছি যে প্রতিটি ব্রেকপয়েন্ট (মোবাইল, ট্যাবলেট, ডেস্কটপ, বড় ডেস্কটপ) এর জন্য চিত্রের আকারগুলি সবচেয়ে অনুকূল উপায়ে সেট করা হয়নি, তাই আমরা ব্রেকপয়েন্ট প্রতি চিত্রগুলিকে ক্ল্যাম্প এবং স্কেল করার জন্য আমাদের ইমেজ জেনারেশন কোড আপডেট করেছি এবং তারপরে পিক্সেল ঘনত্বের উপর ভিত্তি করে আবার রেজোলিউশন স্কেল করেছি। উদাহরণ হিসেবে, এটি একটি নির্দিষ্ট বৃহৎ চিত্রের আকার 192 KB থেকে 102 KB-এ হ্রাস করেছে।

দুর্বল নেটওয়ার্ক সংযোগ সহ ডিভাইসগুলিতে ওয়েবসাইটগুলিকে দ্রুত রেন্ডার করতে, আমরা সংযোগের গতির উপর ভিত্তি করে চিত্রের গুণমানকে গতিশীলভাবে স্কেল করার জন্য কোড যুক্ত করেছি। এটি navigator.connection দ্বারা প্রত্যাবর্তিত downlink সম্পত্তি ব্যবহার করে করা যেতে পারে। আমরা সেই নেটওয়ার্ক অবস্থার উপর ভিত্তি করে আমাদের সম্পদ API এর মাধ্যমে ছবির গুণমান কমাতে URL-ভিত্তিক ক্যোয়ারী প্যারামিটার প্রয়োগ করি।

আমাদের গ্রাহক সাইটগুলির কয়েকটি বিভাগ গতিশীলভাবে লোড করা হয়। যেহেতু আমরা জানি একটি প্রদত্ত সাইটে প্রকাশিত হলে কোন বিভাগগুলি রেন্ডার করা হবে, তাই আমরা সংযোগ শুরু করার জন্য rel=preconnect রিসোর্স ইঙ্গিতটি ব্যবহার করেছি এবং সময়ের আগে প্রয়োজনীয় হ্যান্ডশেক করেছি৷ আমরা ফন্ট এবং অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলি দ্রুত লোড করতে সংস্থান ইঙ্গিতগুলিও ব্যবহার করি।

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

ফলাফল

CLS-এর প্রতি আমাদের প্রচেষ্টাকে কেন্দ্রীভূত করে, আমাদের কোর ওয়েব ভাইটাল পাসের হার প্রায় 40% থেকে প্রায় 70%-এ পৌঁছেছে: 75% উন্নতি!

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

উপসংহার

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

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

লক্ষ লক্ষ সাইটের জন্য ওয়েবসাইটের পারফরম্যান্স উন্নত করতে প্রয়োগ করা গডাড্ডি পরিবর্তনের একটি কেস স্টাডি, তাদের ভাল পেজস্পিড অন্তর্দৃষ্টি এবং কোর ওয়েব ভিটাল স্কোর অর্জনে সহায়তা করে।

Simon Le Parc

গোডাডি হ'ল বিশ্বজুড়ে উদ্যোক্তাদের জন্য বিশ্বের বৃহত্তম পরিষেবা প্ল্যাটফর্ম। আমরা আমাদের বিশ্বব্যাপী 20 মিলিয়নেরও বেশি গ্রাহক - এবং সর্বত্র উদ্যোক্তারা - তাদের অনলাইনে বাড়ার জন্য প্রয়োজনীয় সমস্ত সহায়তা এবং সরঞ্জাম সরবরাহ করে আমাদের বিশ্বব্যাপী সম্প্রদায়কে ক্ষমতায়নের মিশনে আছি।

2019 সালে গডাডি ওয়েবসাইটগুলি + বিপণন চালু করেছিলেন এমন সরঞ্জাম এবং পরিষেবাগুলি সরবরাহ করার প্রতিশ্রুতিবদ্ধ যা ব্যবসায়ের মালিকদের তাদের লক্ষ্য অর্জনে সহায়তা করতে এবং সহায়তা করতে সহায়তা করে। ওয়েবসাইটগুলি + বিপণন বিপণন এবং ইকমার্স সরঞ্জামগুলির সাথে ওয়েবসাইট বিল্ডিংকে সংহত করে এবং গ্রাহকদের তাদের নতুন উদ্যোগের সাথে সাফল্য অর্জনে সহায়তা করার জন্য তাদের সেরা শ্রেণির দিকনির্দেশের সাথে জুড়ি দেয়।

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

বাতিঘর সহ ট্র্যাকিং পারফরম্যান্স

আমরা পারফরম্যান্স ট্র্যাকিংয়ের জন্য বাতিঘর ডেটার উপর নির্ভর করেছি। প্ল্যাটফর্মে প্রতিবার কোনও ওয়েবসাইট প্রকাশিত হওয়ার পরে, আমরা "লাইটহাউস 4 ইউ" নামে আমাদের অভ্যন্তরীণ সরঞ্জামটি ব্যবহার করে এর কার্যকারিতা পরিমাপ করি, যা গুগল বাতিঘরটি পরিষেবা হিসাবে https://github.com/godaddy/lighthouse4u হিসাবে সরবরাহ করে। এটি আমাদের কীভাবে কোনও ল্যাব সেটিংয়ে সাইটগুলি সম্পাদন করছিল তার একটি ভাল ইঙ্গিত দিয়েছে।

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

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

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

আমাদের অব্যাহত প্রচেষ্টার জন্য ধন্যবাদ, গড় গ্রাহক সাইট বাতিঘর স্কোর 2020 সালের নভেম্বরের প্রায় 40 পয়েন্ট থেকে 2021 সালের মে মাসে 70 পয়েন্টের উপরে চলে গেছে However তবে, আমাদের সমস্ত প্রচেষ্টা কার্যকর হয়নি এবং স্থানীয় পরীক্ষার পরিবেশে যা পরীক্ষা করা হয়েছিল এবং ফলাফলগুলি আমরা ক্ষেত্রের মধ্যে পেয়েছি তার মধ্যে ফলাফলগুলি সর্বদা সামঞ্জস্যপূর্ণ না হলে আমরা মাঝে মাঝে অবাক হয়েছি। ল্যাব ফলাফলগুলি সত্যিই সহায়ক ছিল, তবে ক্ষেত্রটিতে পর্যবেক্ষণ করা বাস্তব ব্যবহারকারীর অভিজ্ঞতার দিকে মনোনিবেশ করার সময় হয়েছিল।

কোর ওয়েব ভাইটালগুলির সাথে প্রকৃত ব্যবহারকারীর ডেটা ট্র্যাক করা

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

আমাদের দুর্বলতম লিঙ্কটিতে ফোকাস করা: ক্রমবর্ধমান লেআউট শিফট (সিএলএস)

নতুন ডেটা বিশ্লেষণ করা আমাদের ওয়েবসাইটের গতি উন্নত করতে কী করতে হবে সে সম্পর্কে একটি নতুন দৃষ্টিভঙ্গি দিয়েছে। বাতিঘর স্কোরকে উন্নত করার জন্য কাজ করার কারণে, আমাদের 75 তম পার্সেন্টাইল এলসিপি 860 এমএস ছিল এবং একই প্রান্তিকের আমাদের এফআইডি 10 এমএসের নীচে ছিল, তাই আমরা আমাদের গ্রাহকের সাইটগুলিতে যথাক্রমে 78% এবং 98% এই মেট্রিকগুলির জন্য একটি উচ্চ পাস হার উপভোগ করেছি। যাইহোক, ক্রমবর্ধমান লেআউট শিফট (সিএলএস) সংখ্যাগুলি বাতিঘরটি দিয়ে আমরা যা ব্যবহার করেছি তার থেকে একেবারেই আলাদা দেখাচ্ছে। 75 তম পার্সেন্টাইলের আমাদের সিএলএস ছিল 0.17 - "পাস" এর 0.1 প্রান্তিকটি - এবং আমাদের পাসের হার আমাদের সমস্ত সাইটের তুলনায় কেবল 47% ছিল।

এই মেট্রিক আমাদের সামগ্রিক পাসের হারকে 40% এ টেনে নিয়েছে, তাই আমরা 2021 সালের আগস্টের মধ্যে এই সংখ্যাটি 60% এর উপরে স্থানান্তরিত করার জন্য একটি উচ্চাভিলাষী লক্ষ্য নির্ধারণের সিদ্ধান্ত নিয়েছি। এটি করার জন্য, আমাদের সিএলএসে মনোনিবেশ করতে হবে ।

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

সমস্ত কোর ওয়েব ভাইটাল পাস করার রাস্তা

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

চিত্রগুলি লোড করার জন্য স্থান সংরক্ষণ করা আমাদের সিএলএস স্কোরকে মারাত্মকভাবে উন্নত করেছে কারণ এটি চিত্রগুলি স্থানান্তরিত হতে বাধা দেয়। আমরা ব্রাউজারগুলিতে এটি সমর্থন করার জন্য সিএসএসের aspect-ratio সম্পত্তি ব্যবহার করেছি যা এটি সমর্থন করে। যাঁরা তা করেন না তাদের জন্য, আমরা একটি স্বচ্ছ স্থানধারক চিত্র লোড করেছি যা ক্যাশে করা হয়েছিল এবং আকারে কয়েকটি বাইট আকারে প্রায় তাত্ক্ষণিকভাবে লোড করা হয়েছিল।

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

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

সিএলএসের উন্নতির দিকে মনোনিবেশ করার সময়, আমরা এলসিপিতে কাজ চালিয়ে যাচ্ছি। অনেক ওয়েবসাইটে, চিত্রগুলি এলসিপিতে অবদান রাখে বৃহত্তম অপরাধী এবং আমাদের জন্য এটি উন্নতির একটি সুস্পষ্ট ক্ষেত্র ছিল। আমরা IntersectionObserver ব্যবহার করে অলস লোড চিত্রগুলিতে উন্নতি করেছি তবে বুঝতে পেরেছি যে প্রতিটি ব্রেকপয়েন্ট (মোবাইল, ট্যাবলেট, ডেস্কটপ, লার্জ ডেস্কটপ) এর জন্য চিত্রের আকারগুলি সবচেয়ে অনুকূল উপায়ে সেট করা হয়নি, তাই আমরা ব্রেকপয়েন্টের প্রতি ক্ল্যাম্প এবং স্কেল চিত্রগুলিতে আমাদের চিত্র প্রজন্মের কোডটি আপডেট করেছি এবং তারপরে আবার পিক্সেলের ঘনত্বের ভিত্তিতে রেজোলিউশন স্কেল করে। উদাহরণস্বরূপ, এটি 192 কেবি থেকে 102 কেবি থেকে একটি নির্দিষ্ট বৃহত চিত্রের আকার হ্রাস করেছে।

দুর্বল নেটওয়ার্ক সংযোগগুলি সহ ডিভাইসে দ্রুত ওয়েবসাইটগুলি রেন্ডার করতে, আমরা সংযোগের গতির ভিত্তিতে চিত্রের গুণমানকে গতিশীলভাবে স্কেল করতে কোড যুক্ত করেছি। navigator.connection দ্বারা ফিরে আসা downlink সম্পত্তি ব্যবহার করে এটি করা যেতে পারে। আমরা সেই নেটওয়ার্ক অবস্থার উপর ভিত্তি করে আমাদের সম্পদ এপিআইয়ের মাধ্যমে চিত্রের গুণমান হ্রাস করতে ইউআরএল-ভিত্তিক ক্যোয়ারী প্যারামিটারগুলি প্রয়োগ করি।

আমাদের গ্রাহক সাইটের বেশ কয়েকটি বিভাগ গতিশীলভাবে লোড করা হয়। যেহেতু আমরা জানি যে এটি প্রকাশিত হওয়ার সময় কোনও নির্দিষ্ট সাইটে কোন বিভাগগুলি রেন্ডার করা হবে, তাই আমরা সময়ের আগে সংযোগটি এবং প্রয়োজনীয় হ্যান্ডশেকগুলি সূচনা করতে rel=preconnect ইঙ্গিতটি ব্যবহার করি। আমরা ফন্ট এবং অন্যান্য গুরুত্বপূর্ণ সংস্থানগুলি দ্রুত লোড করতে রিসোর্স ইঙ্গিতগুলিও ব্যবহার করি।

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

ফলাফল

সিএলএসের উপর আমাদের প্রচেষ্টাকে কেন্দ্র করে, আমাদের মূল ওয়েব ভাইটালস পাসের হার প্রায় 40%থেকে প্রায় 70%এ চলে গেছে: 75%এর উন্নতি!

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

উপসংহার

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

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