#perfmatters: পারফরম্যান্স নিনজার জন্য টুলিং কৌশল
আপনার বিকাশের সরঞ্জামগুলির চারপাশে আপনার উপায় জানা একজন পারফরম্যান্স বিশেষজ্ঞ হওয়ার চাবিকাঠি। কোল্ট পারফরম্যান্সের তিনটি স্তম্ভের মধ্য দিয়ে ধাপে ধাপে এগিয়েছে: নেটওয়ার্ক, কম্পিউট এবং রেন্ডার, প্রতিটি এলাকার মূল সমস্যা এবং সেগুলি খুঁজে বের করার এবং নির্মূল করার জন্য উপলব্ধ সরঞ্জামগুলির একটি সফর প্রদান করে।
- আপনি এখন ডেস্কটপ থেকে আপনার পরিচিত ও পছন্দের DevTools দিয়ে Android-এ Chrome প্রোফাইল করতে পারেন।
- পারফরম্যান্স কাজের জন্য পুনরাবৃত্তি লুপ হল: ডেটা সংগ্রহ করুন, অন্তর্দৃষ্টি অর্জন করুন, পদক্ষেপ নিন।
- আপনার পৃষ্ঠাগুলির জন্য গুরুত্বপূর্ণ রেন্ডারিং পাথে থাকা সম্পদগুলিকে অগ্রাধিকার দিন৷
- পেইন্টিং এড়িয়ে চলুন; এটা সুপার ব্যয়বহুল.
- আপনার অ্যাপে গুরুত্বপূর্ণ সময়ে মেমরি মন্থন এবং এক্সিকিউটিং কোড এড়িয়ে চলুন।
#perfmatters: নেটওয়ার্ক কর্মক্ষমতা অপ্টিমাইজ করা
নেটওয়ার্ক এবং লেটেন্সি সাধারণত একটি সাইটের মোট পৃষ্ঠা লোড সময়ের 70% জন্য দায়ী। এটি একটি বৃহৎ শতাংশ, কিন্তু এর অর্থ এই যে আপনি সেখানে যে কোনো উন্নতি করলে আপনার ব্যবহারকারীদের জন্য বিশাল সুবিধা হবে। এই আলোচনায় ইলিয়া ক্রোমের সাম্প্রতিক পরিবর্তনগুলির মধ্য দিয়ে পদক্ষেপ করেছেন যা লোডিং সময়কে উন্নত করবে, সেইসাথে নেটওয়ার্ক লোডকে সর্বনিম্ন রাখতে সাহায্য করার জন্য আপনি আপনার পরিবেশে কিছু পরিবর্তন করতে পারেন৷
- Chrome M27 এর একটি নতুন এবং উন্নত রিসোর্স শিডিউলার রয়েছে৷
- Chrome M28 SPDY সাইটগুলিকে (এমনকি) দ্রুততর করেছে৷
- Chrome এর সাধারণ ক্যাশে একটি ওভারহল পেয়েছে।
- SPDY/HTTP/2.0 বিশাল স্থানান্তর গতির উন্নতি অফার করে। nginx, Apache এবং Jetty এর জন্য পরিপক্ক SPDY মডিউল উপলব্ধ রয়েছে (মাত্র তিনটির নাম)।
- QUIC হল একটি নতুন এবং পরীক্ষামূলক প্রোটোকল যা UDP-এর উপরে নির্মিত; এটা প্রথম দিন কিন্তু যদিও এটা কাজ করে ব্যবহারকারীরা জিতবে।
#perfmatters: 60fps লেআউট এবং রেন্ডারিং
আপনার প্রজেক্টে 60fps হিট করা সরাসরি ব্যবহারকারীর ব্যস্ততার সাথে সম্পর্কযুক্ত এবং এর সাফল্যের জন্য অত্যন্ত গুরুত্বপূর্ণ। এই আলোচনায় ন্যাট এবং টম ক্রোমের রেন্ডারিং পাইপলাইন, ড্রপ ফ্রেমগুলির কিছু সাধারণ কারণ এবং কীভাবে সেগুলি এড়ানো যায় সে সম্পর্কে কথা বলেছেন৷
- একটি ফ্রেম 16ms দীর্ঘ। এতে জাভাস্ক্রিপ্ট, শৈলী গণনা, পেইন্টিং এবং কম্পোজিটিং রয়েছে।
- পেইন্টিং অত্যন্ত ব্যয়বহুল। একটি পেইন্ট স্টর্ম যেখানে আপনি অপ্রয়োজনীয়ভাবে ব্যয়বহুল পেইন্ট কাজের পুনরাবৃত্তি করেন।
- স্তরগুলি আঁকা উপাদান ক্যাশে ব্যবহার করা হয়.
- ইনপুট হ্যান্ডলার (টাচ এবং মাউসহুইল লিসেনার) প্রতিক্রিয়াশীলতাকে মেরে ফেলতে পারে; আপনি যদি পারেন তাদের এড়িয়ে চলুন. যেখানে আপনি তাদের ন্যূনতম রাখতে পারবেন না।
#perfmatters: তাত্ক্ষণিক মোবাইল ওয়েব অ্যাপ
ক্রিটিকাল রেন্ডারিং পাথ বলতে বোঝায় যে কোনো কিছু (জাভাস্ক্রিপ্ট, এইচটিএমএল, সিএসএস, ইমেজ) যা ব্রাউজারটি পেজ আঁকা শুরু করার আগে প্রয়োজন। ক্রিটিক্যাল রেন্ডারিং পাথে সম্পদের ডেলিভারিকে অগ্রাধিকার দেওয়া আবশ্যক, বিশেষ করে সেলুলার নেটওয়ার্কে স্মার্টফোনের মতো নেটওয়ার্ক-সংবদ্ধ ডিভাইসের ব্যবহারকারীদের জন্য। ব্রায়ান কথা বলেছেন কিভাবে Google-এর দল পেজস্পিড ইনসাইটস ওয়েবসাইটের জন্য সম্পদ সনাক্তকরণ এবং অগ্রাধিকার দেওয়ার প্রক্রিয়ার মধ্য দিয়ে গেছে, এটিকে 20 সেকেন্ড লোড টাইম থেকে মাত্র 1 সেকেন্ডে নিয়ে গেছে!
- রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট এবং CSS বাদ দিন।
- দৃশ্যমান বিষয়বস্তুকে অগ্রাধিকার দিন।
- অ্যাসিঙ্ক্রোনাসভাবে স্ক্রিপ্ট লোড করুন।
- প্রাথমিক ভিউ সার্ভার-সাইডকে এইচটিএমএল হিসাবে রেন্ডার করুন এবং জাভাস্ক্রিপ্টের সাথে বৃদ্ধি করুন।
- রেন্ডার-ব্লকিং CSS মিনিমাইজ করুন; শুধুমাত্র প্রাথমিক ভিউপোর্ট প্রদর্শনের জন্য প্রয়োজনীয় শৈলীগুলি সরবরাহ করুন, তারপর বাকিগুলি সরবরাহ করুন।
- রেন্ডার-ব্লকিং সিএসএস-এ ইনলাইন করা বড় ডেটা ইউআরআই রেন্ডার পারফরম্যান্সের জন্য ক্ষতিকর; তারা রিসোর্স ব্লক করছে যেখানে ইমেজ ইউআরএল অ-ব্লক করছে।