ভূমিকা
আজ, আপনার সাইটের জন্য আপনি সবচেয়ে গুরুত্বপূর্ণ যে কাজটি করতে পারেন তা হল ফোন বা ট্যাবলেট থেকে ভিজিট করার সময় এটি ভাল পারফর্ম করছে কিনা তা নিশ্চিত করা। Chrome DevTools এবং Android ডিভাইস ব্যবহার করে মোবাইল ব্রাউজারের জন্য আপনার সাইট কীভাবে অপ্টিমাইজ করবেন তা জানতে পড়ুন।
মোবাইল ওয়েবের জন্য অপ্টিমাইজ করা কেন এত গুরুত্বপূর্ণ?
পারফর্ম্যান্স
আমরা 2G এবং 3G থেকে 4G-তে ট্রানজিশন করার সাথে সাথে মোবাইল ডিভাইসে আরও দ্রুত CPU, আরও বেশি RAM, আরও দ্রুত GPU এবং আরও দ্রুত নেটওয়ার্ক অ্যাক্সেস পাচ্ছি। প্রযুক্তির অগ্রগতি সত্ত্বেও, মোবাইল ডিভাইসগুলি আমাদের কম্পিউটারের তুলনায় কম শক্তিশালী। আরও নির্দিষ্টভাবে বলতে গেলে, নেটওয়ার্ক রিসোর্স লোড করতে, ছবি আনপ্যাক করতে, পৃষ্ঠা আঁকতে, স্ক্রিপ্ট এক্সিকিউট করতে আরও বেশি সময় লাগে। মোবাইল ডিভাইসে আপনার পৃষ্ঠা ৫ থেকে ১০ গুণ ধীরে চলে বলে ধরে নেওয়া নিরাপদ।
ব্যাটারি
মোবাইল ডিভাইস শুধুমাত্র ব্যাটারির চার্জে চলে। মোবাইল ডিভাইসের ব্যবহারকারীরা চান যাতে ব্যাটারি যতটা সম্ভব বেশি সময় চলে। সাব-অপ্টিমাল সাইট ব্যাটারির চার্জ প্রয়োজনের চেয়ে অনেক দ্রুত শেষ করে দেবে। ব্যাটারির চার্জ বাঁচানোর জন্য নেটওয়ার্ক ট্রাফিক ও পেইন্ট কম করুন। আপনি কোনও রিসোর্স ফেচ করলে, ওয়াই-ফাই বা সেল রেডিও অবশ্যই চালু থাকতে হবে, যা ব্যাটারি খরচ করে। ব্রাউজার কোনও এলিমেন্ট আঁকলে, CPU ও GPU-এর ব্যবহার বেড়ে যায়, যার ফলে ব্যাটারির চার্জও শেষ হয়ে যায়।
এনগেজমেন্ট
আপনার কাছে সবচেয়ে গুরুত্বপূর্ণ মেট্রিক বাড়ানোর জন্য পারফর্ম্যান্স বিডিং স্ট্র্যাটেজি ব্যবহার করা হয়। Facebook-এ আমরা স্ক্রল করার ব্যাপারে যত্নশীল। A/B টেস্টে, আমরা স্ক্রল করার স্পিড ৬০fps থেকে কমিয়ে ৩০fps করেছি। এনগেজমেন্ট আড়াল করা হয়েছে। আমরা বললাম, ঠিক আছে, তাই স্ক্রল করা গুরুত্বপূর্ণ।
এজ কনফারেন্সে Facebook
মোবাইল ব্যবহারকারীরা আশা করেন যে তারা দ্রুত সাইটে প্রবেশ করতে এবং বেরিয়ে আসতে পারবেন। সবচেয়ে দ্রুত সাইট সবচেয়ে বেশি এনগেজমেন্ট পাবে।
পারফর্ম্যান্স ম্যানেজ করা
Chrome-এ ডেভেলপার টুলের একটি দুর্দান্ত সেট রয়েছে। এই নিবন্ধে আপনার মোবাইল সাইটের প্রোফাইল তৈরি করতে এইসব টুল কীভাবে ব্যবহার করবেন তা শেখানো হয়েছে। আপনি আগে থেকেই Chrome DevTools সম্পর্কে জানলে, খুব ভালো! যদি না হয়, তাহলে এই দুর্দান্ত টিউটোরিয়ালগুলি দেখুন:
এখন আপনি এই বিষয়ে জেনে গেছেন, তাই DevTools-এর সাহায্যে কীভাবে আপনার মোবাইল সাইটের স্পিড বাড়াবেন তা দেখে নেওয়া যাক। আপনি যদি প্রথমবার Android-এর জন্য Chrome DevTools ব্যবহার করেন, তাহলে নিবন্ধের নিচে শুরু করার নির্দেশিকা দেখুন।
রিমোটলি Chrome DevTools ব্যবহার করা
আপনার Android ডিভাইস কম্পিউটারের সাথে টেথার করা থাকলে। ডেস্কটপ Chrome-এ, http://localhost:9222-এ নেভিগেট করুন এবং আপনার Android ডিভাইসে, আপনার সাইট খুলুন। আপনার Android ডিভাইসে খোলা ট্যাবের একটি তালিকায় আপনাকে নিয়ে যাওয়া হবে। 'পরীক্ষা করা যাবে এমন পৃষ্ঠা' তালিকা থেকে আপনার পৃষ্ঠা বেছে নিন।
এবং আপনাকে সেই পৃষ্ঠার জন্য Chrome DevTools-এ নিয়ে যাওয়া হবে।
ওহ… সেই পরিচিত Chrome DevTools টুলবার ঠিক সেখানেই আছে। রিমোট Chrome DevTools সম্পর্কে বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ বিষয় হল যে এগুলি হল সেই একই DevTools যা আপনি আজ আপনার ডেস্কটপে ব্যবহার করছেন। একমাত্র পার্থক্য হল, আপনার Android ডিভাইস শুধু পৃষ্ঠার জন্য দায়ী, যেখানে আপনার ডেস্কটপ DevTools-এর জন্য দায়ী। ব্যাকগ্রাউন্ডে, একই ডেটা সংগ্রহ করা হয় এবং একই কার্যকারিতা উপলভ্য থাকে।
যেমন, আমি আমার ফোন থেকে www.sfgate.com/movies সাইটটি ভিজিট করেছি। আমার ডেস্কটপে Chrome DevTools ব্যবহার করে আমি এলিমেন্ট টুলে একটি div-এর উপর মাউস নিয়ে গিয়েছিলাম এবং ডেস্কটপের মতোই, div আমার Android ডিভাইসে ভিজ্যুয়ালি হাইলাইট করা হয়েছে।
এছাড়াও, এলিমেন্ট টুল ব্যবহার করে স্টাইল টগল করে চালু ও বন্ধ করা যায়, যা পেইন্ট টাইম ইনভেস্টিগেট করার সময় কাজে লাগে।
নেটওয়ার্ক অ্যাক্সেস সম্পর্কে আরও তথ্য
নেটওয়ার্ক পারফর্ম্যান্স গুরুত্বপূর্ণ এবং মোবাইল ওয়েবে এটি আরও বেশি গুরুত্বপূর্ণ। মোবাইল ডিভাইসে প্রায়ই ডেস্কটপ ও ল্যাপটপ কম্পিউটারের চেয়ে ধীরগতির কানেকশন থাকে। আপনি সঠিক কাজ করছেন কিনা তা নিশ্চিত করতে, নেটওয়ার্ক টুল-এ গিয়ে রেকর্ড বোতাম প্রেস করে নেটওয়ার্ক স্ন্যাপশট নিন।
Google সার্চের ফলে হওয়া নেটওয়ার্ক ট্রাফিক স্ক্রিনশটে দেখানো হয়েছে। আপনার সাইট থেকে করা নেটওয়ার্ক অনুরোধগুলি লক্ষ্য করুন এবং সেগুলি কমানোর উপায় খুঁজুন। আপনার সাইট সার্ভারে পোলিংয়ের অনুরোধ করলে, ব্যবহারকারীর অ্যাক্টিভিটির দিকে নজর দিতে হবে এবং ব্যবহারকারী নিষ্ক্রিয় থাকলে পোলিং এড়িয়ে যেতে হবে। নেটওয়ার্ক টুল আপনাকে র HTTP হেডার দেখতে দেয়, মোবাইল নেটওয়ার্ক সেগুলি পরিবর্তন করলে এটি কাজে লাগে।
পেইন্ট করার সময় অপ্টিমাইজ করা
মোবাইল ওয়েব ব্রাউজারের ক্ষেত্রে সবচেয়ে বড় বাধা হল আপনার পৃষ্ঠা পেইন্ট করা। নির্দিষ্ট স্টাইলিং সহ পৃষ্ঠায় কোনও এলিমেন্ট আঁকার প্রসেসকে পেইন্টিং বলা হয়। কোনও একটি এলিমেন্ট পেইন্ট করতে বেশি সময় লাগলে, পুরো পৃষ্ঠা পেইন্ট করার গতি কমে যায়। Chrome অফস্ক্রিন বাফারে আগে আঁকা এলিমেন্ট ক্যাশে করার চেষ্টা করে। তবে, মোবাইলে GPU RAM-এর পরিমাণ সীমিত, তাই অফ স্ক্রিনে ক্যাশে করা যায় এমন এলিমেন্টের সংখ্যাও সীমিত। এর পার্শ্বপ্রতিক্রিয়া হল আরও বেশি পেইন্ট এবং প্রতিটি পেইন্ট ডেস্কটপের চেয়ে ধীরগতির হয়। রেসপন্সিভ স্ক্রলিংয়ের সুবিধা পেতে, আপনাকে অবশ্যই পেইন্ট টাইম কমাতে হবে।
Chrome 25-এ কন্টিনিউয়াস পেজ রিপেন্ট মোড অন্তর্ভুক্ত আছে। কন্টিনিউয়াস পেজ রিপেন্ট মোড কখনও পেইন্ট করা এলিমেন্ট ক্যাশে করে না এবং এর পরিবর্তে, প্রতিটি ফ্রেমের সব এলিমেন্ট পেইন্ট করে। প্রতিটি ফ্রেমে সব এলিমেন্টকে পেইন্ট করতে বাধ্য করার মাধ্যমে, এলিমেন্ট এবং স্টাইল টগল করে চালু ও বন্ধ করে পেইন্ট করার সময়ের A/B টেস্টিং করা সম্ভব। প্রসেসটি ম্যানুয়াল হলেও, আপনার পৃষ্ঠার প্রতিটি এলিমেন্ট পেইন্ট করতে কতটা খরচ হচ্ছে তা ট্র্যাক করার জন্য এটি একটি অমূল্য টুল। অপ্টিমাইজেশন ক্লাবের প্রথম নিয়ম হল বেসলাইন পেতে আপনি যা অপ্টিমাইজ করার চেষ্টা করছেন তা পরিমাপ করুন। আসুন, একটি সহজ উদাহরণের মাধ্যমে বিষয়টি বুঝে নেওয়া যাক।
প্রথমে, ক্রমাগত পৃষ্ঠা রিপেন্ট মোড চালু করুন:
চালু করার পরে, আপনার Android ডিভাইসের উপরের ডানদিকের কোণে একটি গ্রাফ দেখা যাবে। গ্রাফের x-অক্ষ হল সময়, যা ফ্রেমে বিভক্ত। গ্রাফের y-অক্ষ মিলিসেকেন্ডে পেইন্ট টাইম পরিমাপ করে। আপনি দেখতে পাচ্ছেন যে, আমার ডিভাইসে, পৃষ্ঠাটি পেইন্ট করতে 14 মিলিসেকেন্ড সময় নেয়। এছাড়াও, ব্যবহৃত GPU মেমরির সাথে ন্যূনতম ও সর্বাধিক পেইন্ট টাইম দেখানো হয়।
পরীক্ষা হিসেবে, আমি বেছে নেওয়া এলিমেন্টের স্টাইল display: none হিসেবে সেট করেছি। এখন পৃষ্ঠাটি আঁকতে কত খরচ হবে
তা দেখা যাক।
পেইন্ট করার সময় ফ্রেম প্রতি প্রায় ১৪ মিলিসেকেন্ড থেকে কমে ফ্রেম প্রতি ৪ মিলিসেকেন্ড হয়ে গেছে। অন্যভাবে বলতে গেলে, সেই একটি এলিমেন্ট আঁকতে প্রায় ১০ মিলিসেকেন্ড সময় লেগেছে। এলিমেন্ট ও স্টাইল চালু ও বন্ধ করার প্রসেস অনুসরণ করে আপনি পৃষ্ঠার কোন অংশটি বেশি রিসোর্স ব্যবহার করছে তা দ্রুত শনাক্ত করতে পারবেন। মনে রাখবেন, পেইন্ট টাইম যত কম হবে, তত কম জ্যাঙ্ক হবে, ব্যাটারি বেশি সময় চলবে এবং ব্যবহারকারীরা আরও বেশি এনগেজ হবেন। আপনি যখন আরও গভীরে যেতে প্রস্তুত হবেন, তখন কন্টিনিউয়াস পেজ রিপেইন্ট মোড সম্পর্কে এই দুর্দান্ত নিবন্ধটি পড়তে ভুলবেন না।
উন্নত ফিচার
about:tracing
ডেস্কটপ Chrome-এ উপলভ্য অনেক উন্নত ডেভেলপার ফিচার Android Chrome-এও উপলভ্য। যেমন, about:gpu-internals, about:appcache-internals এবং about:net-internals উপলভ্য। কোনও জটিল সমস্যা তদন্ত করার সময়, সমস্যার কারণ খুঁজে বের করার জন্য কখনও কখনও আপনার আরও ডেটার প্রয়োজন হয়। ডেস্কটপে, আপনি হয়ত about:tracing ব্যবহার করছেন। আপনি যদি আগে থেকে about:tracing সম্পর্কে না জানেন, তাহলে about:tracing প্রোফাইলিং টুল ব্যবহার ও এক্সপ্লোর করার বিষয়ে আমার ভিডিও দেখুন। Android Chrome থেকে একই ডেটা ক্যাপচার করা সম্ভব, শুরু করতে এই ধাপগুলি অনুসরণ করুন:
- adb_trace.py ডাউনলোড করুন
- কমান্ড লাইন থেকে adb_trace.py রান করুন
- Android-এ Chrome ব্যবহার করা
- কমান্ড লাইনে Enter প্রেস করুন, adb_trace.py স্ক্রিপ্ট বন্ধ হয়ে যাবে।
adb_trace.py সম্পূর্ণ হওয়ার পরে আপনি একটি JSON ফাইল পাবেন যা আপনি ডেস্কটপ Chrome-এর about:tracing-এ লোড করতে পারবেন।
শুরু করার নির্দেশিকা
রিমোট Chrome DevTools কী করতে পারে তা আমরা পর্যালোচনা করেছি, এখন আপনার রিমোট ডিবাগিং সেশন কীভাবে শুরু করবেন তা কভার করা যাক। আপনি আগে কখনও এগুলি ব্যবহার না করে থাকলে, কীভাবে শুরু করবেন সেই সম্পর্কে বিস্তারিত নির্দেশাবলী পড়ুন। আপনি যদি আগে এগুলি ব্যবহার করে থাকেন, কিন্তু কীভাবে ব্যবহার করতে হয় তা ভুলে গিয়ে থাকেন, তাহলে আমি এখানেও সংক্ষিপ্ত নির্দেশাবলী তালিকাভুক্ত করেছি।
১. Android SDK ইনস্টল করা
আপনি হয়ত ভাবছেন যে, আপনি যখন ওয়েবের জন্য ডেভেলপ করছেন, তখন আপনাকে কেন Android SDK ইনস্টল করতে হবে। SDK-তে adb (Android ডিবাগ ব্রিজ) অন্তর্ভুক্ত আছে। ডেস্কটপ Chrome-কে আপনার Android ডিভাইসের সাথে কানেক্ট করতে হবে। Chrome সরাসরি Android ডিভাইসের সাথে যোগাযোগ করে না, পরিবর্তে এটি adb-এর মাধ্যমে যোগাযোগ করে।
২. আপনার ডিভাইসে USB ডিবাগিং চালু করুন
USB ডিবাগিং চালু করার বিকল্প Android সেটিংসে পাওয়া যাবে। এটি চালু করুন।
৩. ডিভাইসের সাথে কানেক্ট করুন
আপনি আগে থেকে না করে থাকলে, USB-এর মাধ্যমে আপনার Android ডিভাইস ডেস্কটপের সাথে কানেক্ট করুন। আপনি প্রথমবার USB ডিবাগিং ব্যবহার করলে, আপনাকে নিম্নলিখিত প্রম্পট দেখানো হবে:
আপনি যদি ঘন ঘন রিমোট ডিবাগ সেশন করেন, তাহলে আমি ‘এই কম্পিউটার থেকে সবসময় অ্যাকশনটির অনুমতি দিন’ বিকল্পটি বেছে নিতে সাজেস্ট করব।
৪. আপনার ডিভাইস সঠিকভাবে কানেক্ট করা আছে কিনা তা যাচাই করুন
আপনার কমান্ড প্রম্পট থেকে adb devices রান করুন। আপনার ডিভাইস তালিকায় দেখতে পাবেন।
৫. Chrome-এ USB ডিবাগিং চালু করুন
সেটিংস > উন্নত > DevTools খুলুন এবং এখানে দেখানো USB ওয়েব ডিবাগিং চালু করুন বিকল্পটি চেক করুন:
৬. আপনার Android ডিভাইসে DevTools কানেকশন তৈরি করা হচ্ছে
এই কমান্ড রান করুন:
adb forward tcp:9222 localabstract:chrome_devtools_remote
adb-এর মাধ্যমে আপনার ডেস্কটপ মেশিন ও Android ডিভাইসের মধ্যে একটি ব্রিজ তৈরি করে। এই পর্যায়ে পৌঁছাতে কোনও সমস্যা হলে, সেট-আপ করার বিস্তারিত নির্দেশাবলী এখান থেকে পড়ে নিন।
৭. আপনি শুরু করার জন্য প্রস্তুত কিনা তা যাচাই করা হচ্ছে
আপনার ডেস্কটপে Chrome খুলে এবং http://localhost:9222-এ নেভিগেট করে আপনার ডিভাইসটি সঠিকভাবে কানেক্ট করা আছে কিনা তা যাচাই করুন। আপনি যদি 404, অন্য কোনও সমস্যা পান অথবা নিম্নলিখিত কিছুর মতো দেখতে না পান:
এখান থেকে সেট-আপ করার বিস্তারিত নির্দেশাবলী পড়ে নিন।
উপসংহার
মোবাইল ব্যবহারকারীরা প্রায়ই তাড়াহুড়ো করেন এবং আপনার পৃষ্ঠা থেকে গুরুত্বপূর্ণ তথ্য দ্রুত পেতে চান। মোবাইল সাইট নির্মাতা হিসেবে আপনার দায়িত্ব হল পৃষ্ঠা যাতে দ্রুত লোড হয় এবং মোবাইলে ভালভাবে কাজ করে তা নিশ্চিত করা। তা না হলে, ব্যবহারকারীর এনগেজমেন্ট কমে যাবে। রিমোট Chrome DevTools-এর কার্যকারিতা ডেস্কটপ ভার্সনের মতোই। UI এতটাই একরকম যে আপনাকে নতুন কোনও টুল ব্যবহার করা শিখতে হবে না। অন্যভাবে বলতে গেলে, আপনার ওয়ার্কফ্লো চলতে থাকে। মনে রাখবেন, Facebook-এর পারফর্ম্যান্স সংক্রান্ত সমস্যা হতে পারে এবং আপনার সাইটের ক্ষেত্রেও এটি প্রযোজ্য। পারফর্ম্যান্স ভালো হলে সাইটে ব্যবহারকারীর এনগেজমেন্ট বাড়ে।