লক্ষ লক্ষ সাইটের জন্য ওয়েবসাইটের কর্মক্ষমতা উন্নত করার জন্য GoDaddy-এর পরিবর্তনগুলির একটি কেস স্টাডি, তাদের ভাল PageSpeed Insights এবং Core Web Vitals স্কোর অর্জনে সাহায্য করে।
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% উন্নতি!
ব্যবহারকারীরা আমাদের প্ল্যাটফর্মে ফিরে আসার সাথে সাথে তাদের সাইটগুলিকে আপডেট করতে এবং পুনঃপ্রকাশ করার জন্য, তারা সর্বশেষ কর্মক্ষমতার উন্নতি লাভ করে এবং ফলস্বরূপ নীচের চার্টে দেখানো হিসাবে "কোর ওয়েব ভাইটাল পাস করা" সহ সাইটগুলির সংখ্যা ক্রমাগত বৃদ্ধি পাচ্ছে:
উপসংহার
কর্মক্ষমতা উন্নতির জন্য এলাকা খোঁজা এবং সফলভাবে অগ্রগতি ট্র্যাকিং পরিমাপের জন্য কোন সরঞ্জামগুলি ব্যবহার করা হয় তার উপর নির্ভর করে। যদিও লাইটহাউস একটি "ল্যাব সেটিং"-এ ভাঁজের উপরে কর্মক্ষমতা পরিমাপের জন্য উপযোগী ছিল, এটি সঠিকভাবে পারফরম্যান্সের সমস্যাগুলি ক্যাপচার করেনি যা শুধুমাত্র ব্যবহারকারীর মিথস্ক্রিয়া (যেমন পৃষ্ঠার মাধ্যমে স্ক্রোল করা) থেকে ঘটেছিল৷
মেটাডেটা সহ বাস্তব বিশ্বের মূল ওয়েব ভাইটাল ট্র্যাক করা আমাদের উন্নতির প্রভাবকে কল্পনা করতে, লক্ষ্য করতে এবং পরিমাপ করতে দেয়। কোর ওয়েব ভাইটাল স্কোর উন্নত করার যাত্রা দলটিকে আমাদের কোডবেস জুড়ে পাওয়া অ-পারফরম্যান্স প্যাটার্নগুলি সনাক্ত করতে এবং প্রতিস্থাপন করতে দেয়। কখনও কখনও প্রতিশ্রুতিশীল পরিবর্তনগুলি আমাদের প্রত্যাশার মতো প্রভাব ফেলেনি, অন্য সময় বিপরীত ঘটেছে। এটি সেখানে একটি আদিম বিশ্ব নয়, তাই আপনাকে চেষ্টা চালিয়ে যেতে হবে।