ভূমিকা
একটি দ্রুত ওয়েব অ্যাপ হল একটি সফল ওয়েব অ্যাপ। আপনি আপনার অ্যাপের বাস্তব এবং অনুভূত কর্মক্ষমতা উভয়ই অপ্টিমাইজ না করা পর্যন্ত একজন বিকাশকারী হিসাবে আপনার কাজ সম্পন্ন হয় না। আপনার ব্যবহারকারীদের একটি চমৎকার অভিজ্ঞতা নিশ্চিত করার জন্য এটি শুধুমাত্র সঠিক জিনিস নয়, তবে অপ্টিমাইজ করার জন্য খুব বাস্তব এবং গুরুত্বপূর্ণ ব্যবসায়িক কারণ রয়েছে। Amazon প্রতি 100ms সাইট লেটেন্সির জন্য বিক্রয়ে 1% ড্রপ পরিমাপ করেছে, এবং Google প্রতি 0.5 সেকেন্ড বিলম্বের জন্য 20% ট্রাফিক ড্রপ পরিমাপ করেছে ( উদ্ধৃতি । এগুলি আপনার ব্যবসা এবং ওয়েব অ্যাপের জন্য বাস্তব প্রভাব সহ বাস্তব সংখ্যা।
ওয়েবের গতি খুবই গুরুত্বপূর্ণ, এমনকি Google-এর সম্পূর্ণ প্রচেষ্টা রয়েছে ওয়েবকে দ্রুততর করার জন্য। আপনার অ্যাপের পারফরম্যান্স অপ্টিমাইজ করার জন্য আপনার যদি অন্য কারণের প্রয়োজন হয়, Google ঘোষণা করেছে যে তাদের র্যাঙ্কিং অ্যালগরিদমে পৃষ্ঠার গতি যোগ করা হয়েছে ।
আপনার ওয়েব অ্যাপের পারফরম্যান্স অপ্টিমাইজ করার জন্য অনেকগুলি প্রকাশিত সর্বোত্তম অনুশীলন রয়েছে, যার মধ্যে দুটি দুর্দান্ত বই ( হাই পারফরম্যান্স ওয়েব সাইট এবং এমনকি দ্রুততর ওয়েব সাইট ) রয়েছে৷ সার্ভারে কৌশলগুলি (সঠিক ক্যাশে নিয়ন্ত্রণ শিরোনামগুলি প্রয়োগ করুন) এবং ক্লায়েন্টে (চিত্রের প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি প্রদান করুন) কর্মক্ষমতা অপ্টিমাইজ করার জন্য একটি শেষ থেকে শেষ কৌশলের মধ্যে মিলিত হয়৷ অনেক টিপস এবং কৌশল সহ, কখনও কখনও তারা কীভাবে বাস্তব জীবন এবং আপনার আসল ওয়েব অ্যাপে ম্যাপ করে তা নির্ধারণ করা কঠিন।
সৌভাগ্যবশত, Chrome DevTools (Chrome-এর প্রতিটি উদাহরণে অন্তর্ভুক্ত), একটি চমৎকার টুল প্রদান করে যা আপনার ওয়েব অ্যাপ পরিদর্শন করে এবং কার্যক্ষমতা বাড়াতে এবং লেটেন্সি কমাতে কাস্টমাইজড সুপারিশ প্রদান করে। এই নিবন্ধটি অডিট প্যানেলকে কভার করবে, যা খুবই জনপ্রিয় YSlow টুলের মতোই, এবং কীভাবে আপনি এটি ব্যবহার করে আপনার ওয়েবসাইটের গতি বাড়াতে, লেটেন্সি কমাতে এবং ব্যবহারকারীর সন্তুষ্টি বাড়াতে পারেন।
দ্রষ্টব্য, অডিট প্যানেল টুলটি বর্তমানে শুধুমাত্র Chrome-এ উপলব্ধ, কিন্তু আমরা আশা করি যে অন্যান্য ওয়েবকিট ব্রাউজারগুলি অবশেষে এটিকে একীভূত করবে।
শুরু হচ্ছে
কিভাবে অডিট প্যানেল ওয়েব অ্যাপের কর্মক্ষমতা উন্নতির সুপারিশ করতে পারে তা বোঝাতে, আমরা টুলটিকে আমাদের নিজস্ব www.html5rocks.com- এর দিকে ঘুরিয়ে দেব। আমরা আমাদের সাইটকে আরও দ্রুত করতে সাহায্য করার জন্য অডিট প্যানেল ব্যবহার করব৷
DevTools শুরু করা Chrome আইকন (Chrome উইন্ডোর উপরের ডানদিকে) ব্যবহার করা এবং সরঞ্জাম > বিকাশকারী সরঞ্জাম নির্বাচন করার মতোই সহজ৷
DevTools দিয়ে কীভাবে শুরু করবেন সে সম্পর্কে আরও তথ্যের জন্য, অনুগ্রহ করে অফিসিয়াল ডকুমেন্টেশন পড়ুন।
অডিট প্যানেলটি প্রধান টুল বোতাম প্যানেলে অবস্থিত। আপনি লক্ষ্য করবেন যে, একবার নির্বাচিত হয়ে গেলে, অডিট প্যানেল এখনও আপনার ওয়েব অ্যাপের বিশ্লেষণ করেনি। সমস্ত হিউরিস্টিক চালানো ধীর হতে পারে, বিশেষ করে একটি বড় ওয়েব অ্যাপ যেমন GMail এর জন্য, তাই টুলটি ডিফল্টরূপে অক্ষম থাকে।
চলুন রান বোতামে ক্লিক করে ডুব দেওয়া যাক, যা পারফরম্যান্স হিউরিস্টিক চালু করে ওয়েব অ্যাপটিকে পুনরায় লোড করে। পৃষ্ঠা পুনরায় লোড করার পরে, আপনি নীচের স্ক্রিনশটের মতো সুপারিশগুলির একটি তালিকা দেখতে পাবেন৷
আপনি লক্ষ্য করবেন যে অডিট প্যানেল সুপারিশগুলিকে তীব্রতার দ্বারা শ্রেণীবদ্ধ করে, সবচেয়ে গুরুতরটিকে একটি লাল বিন্দু দিয়ে চিহ্নিত করে এবং একটি হলুদ বিন্দু দিয়ে চিহ্নিত মাঝারি তীব্রতার পরামর্শগুলি। এই রঙের কোডিং আপনাকে পরামর্শগুলিকে অগ্রাধিকার দিতে সাহায্য করে, প্রথমে সবচেয়ে গুরুত্বপূর্ণ (এবং সবচেয়ে বড় লাভের) উপর ফোকাস করে।
বন্ধনীর সংখ্যা, প্রস্তাবনা অনুসরণ করে, অডিট টুল কতটি ঘটনা সনাক্ত করেছে। উদাহরণস্বরূপ, "লিভারেজ ব্রাউজার ক্যাশিং" এর 12টি উদাহরণ ছিল। এটি আপনাকে একটি ধারণা দেয় যে কত ঘন ঘন প্রস্তাবটি প্রয়োগ করা যেতে পারে।
গতি কৌশল
আগেই উল্লেখ করা হয়েছে, ওয়েব অ্যাপের কর্মক্ষমতা অপ্টিমাইজ করার জন্য প্রচুর সুপরিচিত এবং ভারীভাবে পরীক্ষিত কৌশল রয়েছে। আমরা এই নিবন্ধটির মাধ্যমে সেগুলিকে গভীরভাবে কভার করব না, তবে আরও তথ্য এবং বিবরণ খুঁজে পাওয়া সহজ। ওয়েব অ্যাপ অপ্টিমাইজেশানের সুনির্দিষ্ট বিষয়ে আরও জানার জন্য সহায়ক সংস্থানগুলির মধ্যে রয়েছে আসুন ওয়েবকে দ্রুততর টিউটোরিয়াল তৈরি করি এবং উচ্চ মাপযোগ্যতার লেটেন্সি সর্বত্রই রয়েছে এবং এর জন্য আপনার বিক্রয় খরচ হয় ৷
অডিট প্যানেল তার পরামর্শগুলিকে দুটি বিভাগে গ্রুপ করে, নেটওয়ার্ক ব্যবহার এবং ওয়েব পেজ পারফরম্যান্স।
অডিট প্যানেল অনুসারে, নেটওয়ার্ক ব্যবহার উন্নত করতে আমাদের উচিত:
- লিভারেজ ব্রাউজার ক্যাশে
- লিভারেজ প্রক্সি ক্যাশিং
- কুকির আকার ছোট করুন
- কুকিবিহীন ডোমেন থেকে স্ট্যাটিক কন্টেন্ট পরিবেশন করুন
- ছবির মাত্রা নির্দিষ্ট করুন
ওয়েব পৃষ্ঠার কর্মক্ষমতা উন্নত করতে, আমাদের উচিত:
- শৈলী এবং স্ক্রিপ্টের ক্রম অপ্টিমাইজ করুন
- অব্যবহৃত CSS নিয়ম সরান
htmlrocks.com পারফরম্যান্স উন্নত করার জন্য আমরা যে কৌশলগুলিতে ফোকাস করতে পারি তার একটির দিকে নজর দেওয়া যাক৷
লিভারেজ ব্রাউজার ক্যাশে
উদাহরণস্বরূপ, আসুন প্রথমে ব্রাউজার ক্যাশিংয়ের সুবিধা নেওয়ার সুপারিশে ডুব দেওয়া যাক। এই বিশেষ করে মানে কি? UI-তে বিকল্পটি খোলার পরে, আমরা নিম্নলিখিত বিশদ বিবরণ দিয়ে উপস্থাপন করেছি:
- নিম্নলিখিত সংস্থানগুলির একটি ক্যাশের মেয়াদ অনুপস্থিত৷ যে সম্পদগুলি মেয়াদ শেষ হওয়ার কথা উল্লেখ করে না সেগুলি ব্রাউজার দ্বারা ক্যাশে করা যাবে না৷
- নিম্নলিখিত ক্যাশেযোগ্য সংস্থানগুলির একটি সংক্ষিপ্ত সতেজতা জীবনকাল রয়েছে৷
- নিম্নলিখিত সংস্থানগুলি স্পষ্টভাবে অ-ক্যাশেযোগ্য। সম্ভব হলে তাদের ক্যাশেযোগ্য করে তোলার কথা বিবেচনা করুন।
ক্যাশিং রিসোর্স নেটওয়ার্ক ব্যবহার উন্নত করার একটি চমৎকার উপায়, যা ডেভেলপারের জন্য কম ব্যান্ডউইথ বিল এবং ব্যবহারকারীর জন্য দ্রুত প্রতিক্রিয়ার সময় নিয়ে যায়। দুর্ভাগ্যবশত, টুলটি আপনাকে ঠিক কী করতে হবে তা বলে না, তাই আমাদেরকে সুপারিশের মধ্যে কিছুটা ডুব দিতে হবে এবং এই পরামর্শগুলি প্রয়োগ করতে আমাদের ওয়েব অ্যাপ পারফরম্যান্স অপ্টিমাইজেশনের জ্ঞান ব্যবহার করতে হবে।
ক্যাশিং
HTTP ক্যাশে ডাইভিং ছাড়া, আমরা অবশ্যই কিছু মৌলিক বিষয় কভার করতে পারি। এইচটিটিপি প্রোটোকল ক্যাশিং নির্দেশাবলী অন্তর্ভুক্ত করে , যা সার্ভার এবং ক্লায়েন্টকে তারের মাধ্যমে স্থানান্তর করা প্রয়োজন এমন ডেটার পরিমাণ কমাতে দেয়। উদাহরণস্বরূপ, সার্ভার ক্লায়েন্টকে একটি নির্দিষ্ট সময়ের জন্য স্থানীয়ভাবে সংস্থান সংরক্ষণ করতে বলতে পারে, এইভাবে পুনরায় সংস্থানটির অনুরোধ করার প্রয়োজনীয়তা দূর করে। ক্লায়েন্ট এছাড়াও জিজ্ঞাসা করতে পারেন যে সার্ভারের সংস্থান স্থানীয়ভাবে সংরক্ষিত একটি থেকে নতুন কি না। আদর্শভাবে, যদি একটি সংস্থান স্থির থাকে, সার্ভারের উচিত ক্লায়েন্টকে স্থানীয়ভাবে সংস্থান সংরক্ষণ করতে এবং ভবিষ্যতে সার্ভারকে সম্পদের জন্য জিজ্ঞাসা করা এড়াতে বলা উচিত। আপনি যেমন কল্পনা করতে পারেন, HTTP ক্যাশিং সম্পর্কিত বিশদ বিবরণের একটি অবিশ্বাস্য পরিমাণ রয়েছে, তবে সাধারণ থিম হল "ক্লায়েন্টে স্থানীয়ভাবে সংস্থান সংরক্ষণ করে তারের উপর পাঠানো ডেটার পরিমাণ হ্রাস করুন"।
নন-ক্যাশেবল রিসোর্স ঠিক করা
আসুন একটি সুপারিশকে গভীরভাবে দেখি, এবং কীভাবে DevTools-এর মধ্যে থাকা অন্যান্য টুলের সাথে অডিট সুপারিশকে সংযুক্ত করতে হয় তা শিখি। বিশেষভাবে, আসুন কীভাবে ঠিক করবেন তা দেখুন "নিম্নলিখিত সংস্থানগুলি স্পষ্টভাবে অ-ক্যাশেযোগ্য।"
যেহেতু ক্যাশিং HTTP প্রোটোকলের মাধ্যমে সম্পন্ন হয়, তাই আমাদের http://www.html5rocks.com/ রিসোর্সের জন্য HTTP অনুরোধ এবং প্রতিক্রিয়া দেখতে হবে। মূল অনুরোধ এবং প্রতিক্রিয়া শিরোনাম এবং বিশদ বিবরণ দেখতে কেবলমাত্র সংস্থানে ক্লিক করুন।
তারপরে আপনাকে আরও তথ্য সহ নেটওয়ার্ক, সংস্থান বা উত্স প্যানেলে (ক্লিক করা সম্পদের প্রকারের উপর নির্ভর করে) নিয়ে যাওয়া হবে। এই ক্ষেত্রে আমাদের নেটওয়ার্ক প্যানেলে নিয়ে যাওয়া হবে।
আমরা নিশ্চিত করার চেষ্টা করছি যে সার্ভার ক্লায়েন্টকে বলেছে "html5rocks.com এর হোমপেজ ক্যাশে করবেন না"। এটি করার জন্য, আমরা রেসপন্স হেডারগুলি দেখার জন্য রিসোর্সে ক্লিক করি, কারণ এইগুলি সার্ভারের পাঠানো হেডার এবং নির্দেশাবলী।
Cache-Control হেডার।নিশ্চিতভাবেই, সার্ভারটি ক্লায়েন্টকে "ক্যাশে-কন্ট্রোল: নো-ক্যাশে" শিরোনামটি পাঠিয়েছে। এটি, যেমন আপনি কল্পনা করবেন, ক্লায়েন্টকে সর্বদা সম্পদের জন্য জিজ্ঞাসা করতে এবং স্থানীয়ভাবে এটি ক্যাশে না করতে বলে। বিশেষত, "নো-ক্যাশে" এর জন্য HTTP স্পেসিফিকেশন পড়ে:
"যদি নো-ক্যাশ নির্দেশিকা একটি ক্ষেত্র-নাম নির্দিষ্ট না করে, তাহলে একটি ক্যাশে অরিজিন সার্ভারের সাথে সফল পুনর্বিবেচনা ছাড়া পরবর্তী অনুরোধ সন্তুষ্ট করতে প্রতিক্রিয়া ব্যবহার করবে না৷ এটি একটি অরিজিন সার্ভারকে এমনকি ক্যাশেগুলি দ্বারাও ক্যাশিং প্রতিরোধ করতে দেয়৷ ক্লায়েন্ট অনুরোধে বাসি প্রতিক্রিয়া ফেরত দিতে কনফিগার করা হয়েছে।"
ঠিক এই কারণেই অডিট প্যানেল ক্যাশিং সক্ষম করার সুপারিশ করে, কারণ অন্যথায় সার্ভার এবং ক্লায়েন্ট সম্ভাব্য অপ্রয়োজনীয় তথ্য পাঠাচ্ছে।
এখন যেহেতু আমরা অডিট পরামর্শের মূল কারণ নিশ্চিত করেছি, আমরা কীভাবে এটি ঠিক করব? এই ক্ষেত্রে, সমাধানটি সার্ভার সাইড কনফিগারেশন বা কোড জড়িত। আপনার সেটআপের উপর নির্ভর করে, আপনি আপনার ওয়েব সার্ভারের কনফিগারেশন বা আপনার ওয়েব অ্যাপ ফ্রেমওয়ার্কের কনফিগারেশনের মাধ্যমে ক্যাশিং সক্ষম করতে পারেন। বিশেষভাবে, আপনার একটি মেয়াদ শেষ হওয়া শিরোনাম এবং একটি ক্যাশে-কন্ট্রোল অন্তর্ভুক্ত করা উচিত: আপনি ক্যাশে করতে চান এমন যেকোনো সংস্থানের জন্য সর্বোচ্চ বয়সের প্যারামিটার সহ ব্যক্তিগত।
সাজেশনস আর জাস্ট দ্যাট, সাজেশনস
মনে রাখবেন যে অডিট প্যানেল জেনেরিক হিউরিস্টিকসের উপর ভিত্তি করে উন্নতির সুপারিশ করছে। এটি আপনার নির্দিষ্ট ওয়েব অ্যাপে বহু বছর ধরে শেখা সেরা অনুশীলনগুলি প্রয়োগ করছে৷ বেশিরভাগ সময়, এই সুপারিশগুলি স্পট হয় এবং মনে রাখা উচিত।
যাইহোক, এমন কিছু ক্ষেত্রে রয়েছে যেখানে সুপারিশটি সঠিক হতে পারে কিন্তু প্রকৃতপক্ষে কোনো উন্নতি নাও হতে পারে। উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠায় শুধুমাত্র একটি বড় ছবি থাকে, তাহলে অডিট প্যানেল <img> ট্যাগে প্রস্থ এবং উচ্চতা বৈশিষ্ট্য যোগ করার সুপারিশ করবে (যাতে রেন্ডারিং ইঞ্জিন ছবিটি ডাউনলোড এবং পরিদর্শন না করেই ছবির মাত্রা জানতে পারে)। যদিও এটি সাধারণত দুর্দান্ত পরামর্শ, তবে এটি পৃষ্ঠার একমাত্র উপাদান হলে এটি খুব বেশি সাহায্য করবে না।
আপনি সেগুলি বোঝার পরে এই পরামর্শগুলি প্রয়োগ করতে ভুলবেন না। এবং পরিবর্তনের আগে এবং পরে পারফরম্যান্স পরিমাপ করতে ভুলবেন না, নিশ্চিত করার জন্য যে আসলে একটি উন্নতি আছে।
সারসংক্ষেপ
অডিট প্যানেল একটি চমৎকার এবং সহজে ব্যবহারযোগ্য টুল যা আপনাকে দ্রুত দেখাবে কিভাবে আপনার ওয়েব অ্যাপের কর্মক্ষমতা অপ্টিমাইজ করতে হয়। গতি একটি গুরুত্বপূর্ণ ওয়েব অ্যাপ অ্যাট্রিবিউট, কারণ অনেক কোম্পানি কর্মক্ষমতা এবং রাজস্ব বা কার্যকলাপের মধ্যে সরাসরি সম্পর্ক খুঁজে পেয়েছে। আপনার অ্যাপের কর্মক্ষমতা অপ্টিমাইজ করা শুধু আপনার ব্যবহারকারীদের জন্য সঠিক জিনিস নয়, কিন্তু আপনার ব্যবসার নিচের লাইনের জন্য এটি করা সঠিক জিনিস।