সারসংক্ষেপ
Google+ সম্পূর্ণরূপে প্রতিক্রিয়াশীল হয়।
প্রতিক্রিয়াশীল যাচ্ছে
Google+ হল যেখানে লোকেরা ভাগ করা আগ্রহের চারপাশে একত্রিত হয়, Zombie Cats থেকে Vintage Calculators পর্যন্ত৷ সম্প্রতি পর্যন্ত, Google+ তাদের ওয়েবসাইটের দুটি ভিন্ন সংস্করণ ছিল - একটি ডেস্কটপের জন্য, এবং একটি মোবাইল ওয়েবের জন্য যা পুরানো ব্রাউজারগুলির জন্য ডিজাইন করা হয়েছিল৷
চ্যালেঞ্জ
দুটি সাইট রক্ষণাবেক্ষণ তার সাথে এক অনন্য চ্যালেঞ্জ নিয়ে এসেছে। সাইটের আলাদা সংস্করণ থাকার অর্থ হল প্রতিটি বৈশিষ্ট্য দুইবার প্রয়োগ করতে হবে। এর ফলে প্রচুর ডুপ্লিকেট কোড এবং অতিরিক্ত প্রচেষ্টা ডেস্কটপ এবং মোবাইল ওয়েবের জন্য দুটি অভিজ্ঞতা অপ্টিমাইজ করে। এবং ডিভাইসগুলির মধ্যে লাইনগুলি ক্রমবর্ধমানভাবে অস্পষ্ট হয়ে উঠছে - ডেস্কটপগুলি যা স্পর্শ সমর্থন করে এবং শক্তিশালী মোবাইল ডিভাইসগুলিকে আরও বড় স্ক্রীন সহ - ডেস্কটপ এবং মোবাইলের জন্য বিভিন্ন ডিজাইন কম এবং কম অর্থবহ হয়েছে৷
আমরা বৈশিষ্ট্য যোগ করার সাথে সাথে আমাদের লিগ্যাসি ডেস্কটপ সাইটটিও ধীর এবং ফুলে উঠেছে। এই বছরের শুরুতে আমাদের হোমপেজের ওজন ছিল প্রায় 5MB এবং প্রায় 250টি HTTP অনুরোধ তৈরি করেছে৷ এটা ঠিক ভাল পারফরম্যান্স ছিল না. সাইটের চিত্রগুলি ভারী এবং অপ্টিমাইজ করা হয়েছে, পৃষ্ঠাটিকে আরও কমিয়ে দিয়েছে৷ ফলস্বরূপ, আমাদের স্ট্রীম ধীর এবং অস্থির নেটওয়ার্কগুলিতে প্রায় অ্যাক্সেসযোগ্য ছিল না এবং এই ব্যবহারকারীদের জন্য অভিজ্ঞতা সর্বোত্তমভাবে হতাশাজনক ছিল৷ এছাড়াও, মোবাইল ওয়েবে লিগ্যাসি ব্রাউজারগুলিকে সমর্থন করার প্রয়োজনীয়তা আমাদের পুরো সাইট জুড়ে জাভাস্ক্রিপ্টের উপর নির্ভর করা থেকে বিরত রাখে এবং আমাদেরকে অত্যন্ত ইন্টারেক্টিভ বৈশিষ্ট্যগুলি বাস্তবায়ন থেকে বাধা দেয়। আমরা মোবাইল ওয়েব ব্রাউজারগুলির অগ্রগতির উপর নির্ভর করতে পারি না।
সমাধান
আমরা প্রতিক্রিয়াশীল ডিজাইনের উপর ফোকাস দিয়ে শুরু করেছি: একটি বাস্তবায়ন যা মোবাইল, ট্যাবলেট, ডেস্কটপ এবং এর বাইরেও কাজ করবে। আমরা প্রতিটি একক বৈশিষ্ট্য, পৃষ্ঠা, জাভাস্ক্রিপ্ট লাইব্রেরি এবং CSS ক্লাস পুঙ্খানুপুঙ্খভাবে দেখেছি। আমরা এমন একটি সিস্টেম তৈরি করতে চেয়েছিলাম যা নিশ্চিত করবে যে সাইটটি কেবলমাত্র সেইগুলি ডাউনলোড করবে যা কার্যকরী হওয়ার জন্য একেবারে প্রয়োজনীয় ছিল যদি না ব্যবহারকারী আরও অনুরোধ করে। চ্যালেঞ্জটি এমন একটি ওয়েবসাইট তৈরি করা ছিল যা একটি সেলুলার সংযোগ সহ একটি ধীর মোবাইল ফোনে সঠিকভাবে কাজ করে, কিন্তু তারপরও দ্রুত ব্রাউজার এবং বড় স্ক্রিনে একটি দুর্দান্ত নিমজ্জিত অভিজ্ঞতা দেয়৷
সীমাবদ্ধতার এই সেটটির অর্থ হল যে আমাদের প্রতিটি কোড পরিবর্তনকে যাচাই করতে হবে। এটি অর্জনের জন্য আমরা একটি 6^5 নিয়ম প্রতিষ্ঠা করেছি যাতে প্রাথমিক পৃষ্ঠা লোডের সময় আমরা 60K এর বেশি HTML, 60K JavaScript, 60K CSS ডাউনলোড করি না, আমাদের অ্যানিমেশনগুলি সর্বদা 60fps ছিল এবং আমাদের গড় বিলম্বিতা ছিল 0.6 s
এটি অর্জনের জন্য, আমরা জাভাস্ক্রিপ্ট এবং CSS ফ্রেমওয়ার্ক বেছে নিয়েছি যা শুরু থেকেই মডুলারিটি এবং অলস লোডিং তৈরি করে। তাই আমরা নিশ্চিত করি যে ব্যবহারকারীরা কেবলমাত্র JavaScript এবং CSS ডাউনলোড করে যখন তারা প্রকৃতপক্ষে এটির প্রয়োজনীয় বৈশিষ্ট্যটি ব্যবহার করে। এটি একটি টেমপ্লেট চালিত পদ্ধতির মাধ্যমে করা হয় যা আমাদের বিল্ড এবং মডিউল সিস্টেমের সাথে মিলিত হয় যাতে জিনিসগুলি বিকাশকারীদের কাছ থেকে প্রায় কোনও প্রচেষ্টা ছাড়াই কাজ করে।
এই নতুন কাঠামোর সাথে, আমরা ওয়েবে Google+ এর একটি পুনঃপ্রয়োগ করার প্রোটোটাইপ করা শুরু করেছি৷ আমরা "খারাপ" জিনিসগুলিকে অস্বীকার করতে শুরু করেছি এবং উন্নয়নের জন্য কঠোর নিয়ম নির্ধারণ করতে শুরু করেছি। আমাদের প্রধান নিয়মগুলির মধ্যে একটি ছিল যে আমাদের সমস্ত পৃষ্ঠাগুলি সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড উভয়ই রেন্ডার করা দরকার। সার্ভার-সাইড রেন্ডারিংয়ের মাধ্যমে আমরা নিশ্চিত করি যে এইচটিএমএল লোড হওয়ার সাথে সাথে ব্যবহারকারী পড়া শুরু করতে পারে এবং পৃষ্ঠার বিষয়বস্তু আপডেট করার জন্য কোনও জাভাস্ক্রিপ্ট চালানোর প্রয়োজন নেই। একবার পৃষ্ঠাটি লোড হয়ে গেলে এবং ব্যবহারকারী একটি লিঙ্কে ক্লিক করলে, আমরা আবার সবকিছু রেন্ডার করার জন্য সম্পূর্ণ রাউন্ড-ট্রিপ করতে চাই না। এখানেই ক্লায়েন্ট-সাইড রেন্ডারিং গুরুত্বপূর্ণ হয়ে ওঠে - আমাদের কেবল ডেটা এবং টেমপ্লেটগুলি আনতে হবে এবং ক্লায়েন্টে নতুন পৃষ্ঠাটি রেন্ডার করতে হবে। এতে প্রচুর লেনদেন জড়িত; তাই আমরা একটি ফ্রেমওয়ার্ক ব্যবহার করেছি যা সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড রেন্ডারিংকে সহজ করে তোলে সবকিছু দুবার প্রয়োগ করার খারাপ দিক ছাড়াই - সার্ভারে এবং ক্লায়েন্টে।
অন্যান্য নিয়মের মধ্যে রয়েছে উচ্চতা এবং প্রস্থের অ্যানিমেশনের অনুমতি না দেওয়া যা ব্রাউজার রি-লেআউট সৃষ্টি করবে এবং কর্মক্ষমতার উপর নেতিবাচক প্রভাব ফেলবে। DOM ম্যানিপুলেশন এবং অ্যানিমেশনের জন্য আমরা ব্রাউজারের রেন্ডার রিফ্রেশ হারের সাথে ইন-সিঙ্ক করার জন্য কাজগুলি নির্ধারণ করেছি। আমরা সমস্ত পরিমাপের কাজগুলিকে একসাথে গোষ্ঠীবদ্ধ করি যাতে আমরা ব্যয়বহুল পুনরাবৃত্তি শৈলী গণনা এড়াতে পারি। আমরা ক্রোম প্রোফাইলার টুলের উপর অনেক বেশি নির্ভর করেছিলাম যাতে আমরা এগিয়ে গিয়েছিলাম সবকিছু ঠিক মত কাজ করছে। উপরন্তু, আমরা এমন সরঞ্জাম তৈরি করেছি যা JS-পদচিহ্নে কোড পরিবর্তনের প্রভাব গণনা করে তা নিশ্চিত করার জন্য যে আমরা আমাদের পৃষ্ঠার আকার ব্যাপকভাবে বৃদ্ধি করি না।
এতে কিছু সময় লেগেছিল, কিন্তু আমাদের তৈরি করা সমস্যাগুলি চিহ্নিত করার এবং নির্মূল করার ক্ষমতা না থাকলে এটি আরও কঠিন হতো।
আমরা ফেব্রুয়ারি, 2015 এ এই প্রতিক্রিয়াশীল বাস্তবায়নের আমাদের মোবাইল-ওয়েব সংস্করণ চালু করেছি। এটি আমাদের নতুন ডিজাইন এবং আমাদের নতুন প্রক্রিয়া পরীক্ষা করার অনুমতি দিয়েছে। আমরা এই লঞ্চের ডেটা ব্যবহার করেছি যা কাজ করেছে এবং কী করেনি তা যাচাই করতে। আমরা ডিজাইনের উপর পুনরাবৃত্তি করেছি এবং আরও ডিভাইস সমর্থন করার জন্য প্রসারিত করা শুরু করেছি। নভেম্বর, 2015 এ আমরা সমস্ত ডিভাইস জুড়ে এই নতুন বাস্তবায়ন চালু করেছি।
ফলাফল
কর্মক্ষমতা ত্যাগ না করে, Google+ সমৃদ্ধ UI সহ একটি জটিল ওয়েব অ্যাপ তৈরি করতে সক্ষম হয়েছে৷ সাইটটি এখন আগের চেয়ে দ্রুত এবং ক্ষীণ।
| আগে | পরে | |
|---|---|---|
| মোট হোম পেজের ওজন, জিজিপ করা (ছবি সহ) | 22,600 KB | 327 কেবি |
| অনুরোধ গণনা | 251 | 45 |
| এইচটিএমএল (জিজিপ করা হয়নি) | 1,100 KB | 362 KB |
| জাভাস্ক্রিপ্ট এবং সিএসএস (জিজিপড) | 2,768 KB | 111KB |
| গড় সম্পূর্ণ পৃষ্ঠা লোড সময় (লেটেন্সি) | 12 সেকেন্ড প্রথম বাইট থেকে 0.7 সেকেন্ড | 3 সেকেন্ড প্রথম বাইট থেকে 0.1 সেকেন্ড |