বাতিঘর: ওয়েবসাইটের গতি অপ্টিমাইজ করুন

Kayce Basques

Sofia Emelianova

টিউটোরিয়ালের লক্ষ্য

এই টিউটোরিয়ালটি আপনাকে শেখায় যে কীভাবে আপনার ওয়েবসাইটগুলি দ্রুত লোড করার উপায়গুলি খুঁজে পেতে Chrome DevTools ব্যবহার করতে হয়৷

পড়ুন, বা এই টিউটোরিয়ালটির ভিডিও সংস্করণ দেখুন:

এই ভিডিওটি Chrome 68 দিয়ে তৈরি করা হয়েছে। বিস্তারিত যা আছে তার বেশিরভাগই এখনও সত্য, তবে কিছু বৈশিষ্ট্য আপডেট করা হয়েছে। উদাহরণস্বরূপ, অডিট প্যানেলটিকে এখন লাইটহাউস বলা হয়, এবং এটির চেহারা আলাদা, তবে একই বিকল্পগুলি এখনও উপলব্ধ৷

পূর্বশর্ত

ওয়েব ডেভেলপমেন্ট ক্লাসের এই ভূমিকাতে যা শেখানো হয়েছে তার মতোই আপনার মৌলিক ওয়েব ডেভেলপমেন্ট অভিজ্ঞতা থাকতে হবে।

লোড কর্মক্ষমতা সম্পর্কে আপনার কিছু জানার দরকার নেই।

ভূমিকা

এই টনি. বিড়াল সমাজে টনি খুব বিখ্যাত। তিনি একটি ওয়েবসাইট তৈরি করেছেন যাতে তার ভক্তরা জানতে পারে তার প্রিয় খাবার কি। তার ভক্তরা সাইটটি পছন্দ করে, কিন্তু টনি অভিযোগ শুনতে থাকে যে সাইটটি ধীরে ধীরে লোড হয়। টনি আপনাকে তাকে সাইটের গতি বাড়াতে সাহায্য করতে বলেছে।

বিড়াল টনি।

ধাপ 1: সাইট অডিট করুন

যখনই আপনি একটি সাইটের লোড কর্মক্ষমতা উন্নত করার জন্য যাত্রা শুরু করেন, সর্বদা একটি অডিট দিয়ে শুরু করুন৷ অডিটের দুটি গুরুত্বপূর্ণ কাজ রয়েছে:

• এটি আপনার জন্য পরবর্তী পরিবর্তনগুলি পরিমাপ করার জন্য একটি বেসলাইন তৈরি করে।
• কোন পরিবর্তনগুলি সবচেয়ে বেশি প্রভাব ফেলবে সে সম্পর্কে এটি আপনাকে কার্যকরী টিপস দেয়।

সেট আপ করুন

প্রথমে, আপনাকে টনির ওয়েবসাইটের জন্য একটি নতুন কাজের পরিবেশ সেট আপ করতে হবে, যাতে আপনি পরে এটিতে পরিবর্তন করতে পারেন:

1. গ্লিচ-এ ওয়েবসাইটের প্রজেক্ট রিমিক্স করুন । আপনার নতুন প্রকল্প একটি ট্যাবে খোলে। এই ট্যাবটিকে সম্পাদক ট্যাব হিসাবে উল্লেখ করা হবে।

   

   প্রকল্পের নাম টনি থেকে কিছু এলোমেলোভাবে তৈরি করা নামে পরিবর্তিত হয়। আপনার কাছে এখন কোডটির নিজস্ব সম্পাদনাযোগ্য কপি আছে। পরে, আপনি এই কোডে পরিবর্তন করবেন।

2. সম্পাদক ট্যাবের নীচে, একটি নতুন উইন্ডোতে পূর্বরূপ > পূর্বরূপ ক্লিক করুন। ডেমো একটি নতুন ট্যাবে খোলে। এই ট্যাবটিকে ডেমো ট্যাব হিসাবে উল্লেখ করা হবে। সাইটটি লোড হতে কিছুটা সময় লাগতে পারে।

   

3. ডেমোর পাশাপাশি DevTools খুলুন ।

   

মূল পয়েন্ট: এই টিউটোরিয়ালের বাকি স্ক্রিনশটের জন্য, DevTools একটি পৃথক উইন্ডোতে দেখানো হয়েছে।

একটি বেসলাইন স্থাপন করুন

বেসলাইন হল আপনার কর্মক্ষমতার উন্নতি করার আগে সাইটটি কীভাবে পারফর্ম করেছে তার একটি রেকর্ড।

1. বাতিঘর প্যানেল খুলুন। এটি আরও প্যানেলের পিছনে লুকানো থাকতে পারে।

   দ্রষ্টব্য: এই প্যানেলটি এর নাম দ্বারা চালিত হয়— Lighthouse , আপনার ওয়েব অ্যাপের গুণমান উন্নত করার জন্য একটি স্বয়ংক্রিয় টুল।

   

2. আপনার লাইটহাউস রিপোর্ট কনফিগারেশন সেটিংস স্ক্রিনশটের সাথে মিলিয়ে নিন। এখানে বিভিন্ন বিকল্পের একটি ব্যাখ্যা:

   • check_box স্টোরেজ সাফ করুন । এই চেকবক্সটি সক্ষম করলে প্রতিটি অডিটের আগে পৃষ্ঠার সাথে যুক্ত সমস্ত স্টোরেজ সাফ হয়ে যায়। আপনি যদি প্রথমবার দর্শকরা আপনার সাইটের অভিজ্ঞতা কেমন হয় তা নিরীক্ষণ করতে চাইলে এই সেটিংটি চালু রাখুন। আপনি যখন পুনরাবৃত্তি-ভিজিট অভিজ্ঞতা চান তখন এই সেটিংটি অক্ষম করুন।
   • check_box JS স্যাম্পলিং সক্ষম করুন । এই বিকল্পটি ডিফল্টরূপে বন্ধ করা হয়। চালু করা হলে, এটি পারফরম্যান্স ট্রেসে বিস্তারিত জাভাস্ক্রিপ্ট কল স্ট্যাক যোগ করে কিন্তু রিপোর্ট তৈরির গতি কমিয়ে দিতে পারে। লাইটহাউস রিপোর্ট তৈরি হওয়ার পরে ট্রেসটি more_vert টুলস মেনু > আনথ্রটলড ট্রেস দেখুন এর অধীনে উপলব্ধ।
   • সিমুলেটেড থ্রটলিং (ডিফল্ট) । এই বিকল্পটি একটি মোবাইল ডিভাইসে ব্রাউজ করার সাধারণ অবস্থার অনুকরণ করে। এটিকে "সিমুলেটেড" বলা হয় কারণ অডিটিং প্রক্রিয়ার সময় লাইটহাউস আসলে থ্রোটল করে না। পরিবর্তে, এটি কেবলমাত্র মোবাইল অবস্থার অধীনে পৃষ্ঠাটি লোড হতে কতক্ষণ লাগবে তা এক্সট্রাপোলেট করে। অন্যদিকে , DevTools থ্রটলিং (উন্নত) সেটিং, আসলে আপনার CPU এবং নেটওয়ার্ককে থ্রোটল করে, একটি দীর্ঘ অডিটিং প্রক্রিয়ার ট্রেডঅফের সাথে।
   • মোড > নেভিগেশন (ডিফল্ট) । এই মোডটি একটি একক পৃষ্ঠা লোড বিশ্লেষণ করে এবং এই টিউটোরিয়ালে আমাদের এটিই প্রয়োজন। আরও তথ্যের জন্য, তিনটি মোড দেখুন।
   • ডিভাইস > মোবাইল । মোবাইল বিকল্প ব্যবহারকারী এজেন্ট স্ট্রিং পরিবর্তন করে এবং একটি মোবাইল ভিউপোর্ট অনুকরণ করে। ডেস্কটপ বিকল্পটি মোটামুটি মোবাইল পরিবর্তনগুলিকে অক্ষম করে।
   • বিভাগ > check_box পারফরম্যান্স । একটি একক সক্ষম বিভাগ লাইটহাউসকে শুধুমাত্র অডিটের সংশ্লিষ্ট সেটের সাথে একটি প্রতিবেদন তৈরি করে। আপনি অন্যান্য বিভাগগুলিকে সক্রিয় রাখতে পারেন, যদি আপনি তাদের দেওয়া সুপারিশগুলির ধরন দেখতে চান। অপ্রাসঙ্গিক বিভাগগুলি অক্ষম করা অডিটিং প্রক্রিয়াটিকে কিছুটা গতি দেয়।

3. পৃষ্ঠা লোড বিশ্লেষণ ক্লিক করুন. 10 থেকে 30 সেকেন্ড পরে, লাইটহাউস প্যানেল আপনাকে সাইটের কর্মক্ষমতার একটি প্রতিবেদন দেখায়।

   

রিপোর্ট ত্রুটি হ্যান্ডলিং

আপনি যদি কখনও আপনার Lighthouse রিপোর্টে একটি ত্রুটি পান, অন্য কোন ট্যাব খোলা ছাড়া একটি ছদ্মবেশী উইন্ডো থেকে ডেমো ট্যাব চালানোর চেষ্টা করুন৷ এটি নিশ্চিত করে যে আপনি একটি পরিষ্কার অবস্থা থেকে Chrome চালাচ্ছেন। বিশেষ করে ক্রোম এক্সটেনশনগুলি অডিটিং প্রক্রিয়াতে হস্তক্ষেপ করতে পারে৷

আপনার রিপোর্ট বুঝতে

আপনার প্রতিবেদনের শীর্ষে থাকা নম্বরটি হল সাইটের সামগ্রিক কর্মক্ষমতা স্কোর। পরে, আপনি কোডে পরিবর্তন করার সাথে সাথে আপনি এই সংখ্যা বৃদ্ধি দেখতে পাবেন। উচ্চ স্কোর মানে ভালো পারফরম্যান্স।

মেট্রিক্স

মেট্রিক্স বিভাগে নীচে স্ক্রোল করুন এবং দৃশ্য প্রসারিত করুন ক্লিক করুন। একটি মেট্রিকের ডকুমেন্টেশন পড়তে, আরও জানুন... এ ক্লিক করুন।

এই বিভাগটি সাইটের কর্মক্ষমতার পরিমাণগত পরিমাপ প্রদান করে। প্রতিটি মেট্রিক পারফরম্যান্সের একটি ভিন্ন দিকের অন্তর্দৃষ্টি প্রদান করে। উদাহরণ স্বরূপ, ফার্স্ট কনটেন্টফুল পেইন্ট আপনাকে জানায় কখন কন্টেন্ট প্রথমবার স্ক্রিনে আঁকা হয়, যা পৃষ্ঠা লোড সম্পর্কে ব্যবহারকারীর ধারণার একটি গুরুত্বপূর্ণ মাইলফলক, যেখানে টাইম টু ইন্টারঅ্যাকটিভ সেই বিন্দুটিকে চিহ্নিত করে যেখানে পৃষ্ঠাটি ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করার জন্য যথেষ্ট প্রস্তুত থাকে।

স্ক্রিনশট

পরবর্তী স্ক্রিনশটগুলির একটি সংগ্রহ যা আপনাকে দেখায় যে পৃষ্ঠাটি লোড হওয়ার সাথে সাথে দেখতে কেমন ছিল৷

সুযোগ

এর পরেরটি হল সুযোগ বিভাগ যা এই নির্দিষ্ট পৃষ্ঠার লোড কর্মক্ষমতা উন্নত করার জন্য নির্দিষ্ট টিপস প্রদান করে।

এটি সম্পর্কে আরও জানতে একটি সুযোগ ক্লিক করুন.

একটি সুযোগ কেন গুরুত্বপূর্ণ সে সম্পর্কে ডকুমেন্টেশন দেখতে এবং কীভাবে এটি ঠিক করতে হয় তার নির্দিষ্ট সুপারিশ দেখতে আরও জানুন... ক্লিক করুন৷

কারণ নির্ণয়

ডায়াগনস্টিকস বিভাগটি পৃষ্ঠার লোড সময়ের জন্য অবদান রাখে এমন কারণগুলি সম্পর্কে আরও তথ্য প্রদান করে।

অডিট পাস করেছে

পাস করা অডিট বিভাগ আপনাকে দেখায় যে সাইটটি সঠিকভাবে কি করছে। বিভাগটি প্রসারিত করতে ক্লিক করুন।

ধাপ 2: পরীক্ষা

আপনার লাইটহাউস রিপোর্টের সুযোগ বিভাগ আপনাকে পৃষ্ঠার কর্মক্ষমতা উন্নত করার বিষয়ে টিপস দেয়। এই বিভাগে, আপনি কোডবেসে প্রস্তাবিত পরিবর্তনগুলি বাস্তবায়ন করেন, প্রতিটি পরিবর্তনের পরে সাইটটি কীভাবে এটি সাইটের গতিকে প্রভাবিত করে তা পরিমাপ করতে অডিট করে।

পাঠ্য সংকোচন সক্ষম করুন

আপনার প্রতিবেদনে বলা হয়েছে যে পাঠ্য সংকোচন সক্ষম করা পৃষ্ঠার কর্মক্ষমতা উন্নত করার জন্য শীর্ষ সুযোগগুলির মধ্যে একটি।

টেক্সট কম্প্রেশন হল যখন আপনি নেটওয়ার্কে পাঠানোর আগে টেক্সট ফাইলের সাইজ কমিয়ে বা কম্প্রেস করেন। যেমন আপনি একটি ফোল্ডারের আকার কমাতে ইমেল করার আগে জিপ করতে পারেন।

আপনি কম্প্রেশন সক্ষম করার আগে, পাঠ্য সংস্থানগুলি সংকুচিত কিনা তা আপনি নিজে পরীক্ষা করতে পারেন এমন কয়েকটি উপায় এখানে রয়েছে।

নেটওয়ার্ক প্যানেল খুলুন এবং চেক করুন > বড় অনুরোধ সারি ব্যবহার করুন ।

মূল পয়েন্ট: আপনি যদি নেটওয়ার্ক অনুরোধের সারণীতে সাইজ কলাম দেখতে না পান, তাহলে টেবিল হেডারে ডান-ক্লিক করুন এবং সাইজ নির্বাচন করুন।

প্রতিটি সাইজ সেল দুটি মান দেখায়। শীর্ষ মান হল ডাউনলোড করা সম্পদের আকার। নীচের মান হল অসঙ্কুচিত সম্পদের আকার। যদি দুটি মান একই হয়, তাহলে নেটওয়ার্কে পাঠানোর সময় সংস্থানটি সংকুচিত হচ্ছে না। এই উদাহরণে, bundle.js এর উপরের এবং নীচের মান উভয়ই 1.4 MB ।

আপনি একটি সম্পদের HTTP শিরোনাম পরিদর্শন করে কম্প্রেশন পরীক্ষা করতে পারেন:

1. bundle.js এ ক্লিক করুন এবং হেডার ট্যাব খুলুন।

   

2. একটি content-encoding শিরোনামের জন্য প্রতিক্রিয়া শিরোনাম বিভাগে অনুসন্ধান করুন। আপনি একটি দেখতে পাবেন না, মানে যে bundle.js সংকুচিত ছিল না. যখন একটি সংস্থান সংকুচিত হয় , তখন এই শিরোনামটি সাধারণত gzip , deflate , বা br তে সেট করা হয়। এই মানগুলির ব্যাখ্যার জন্য নির্দেশাবলী দেখুন।

ব্যাখ্যা দিয়ে যথেষ্ট। কিছু পরিবর্তন করার সময়! কোডের কয়েকটি লাইন যোগ করে পাঠ্য সংকোচন সক্ষম করুন:

1. সম্পাদক ট্যাবে, server.js খুলুন এবং নিম্নলিখিত দুটি (হাইলাইট করা) লাইন যোগ করুন:

   ...
   const fs = require('fs');
   const compression = require('compression');
   
   app.use(compression());
   app.use(express.static('build'));
   ...
   

2. app.use(express.static('build')) এর আগে app.use(compression()) লাগাতে ভুলবেন না।

   

   দ্রষ্টব্য: সাধারণত, আপনাকে npm i -S compression মতো কিছুর মাধ্যমে compression প্যাকেজ ইনস্টল করতে হবে, কিন্তু এটি ইতিমধ্যে আপনার জন্য করা হয়েছে।

3. সাইটের নতুন বিল্ড স্থাপন করার জন্য গ্লিচের জন্য অপেক্ষা করুন। নীচে বাম কোণায় একটি সুখী ইমোজি একটি সফল স্থাপনার ইঙ্গিত দেয়৷

কম্প্রেশন কাজ করছে কিনা তা ম্যানুয়ালি পরীক্ষা করতে আপনি আগে যে ওয়ার্কফ্লোগুলি শিখেছেন তা ব্যবহার করুন:

1. ডেমো ট্যাবে ফিরে যান এবং পৃষ্ঠাটি পুনরায় লোড করুন।

   সাইজ কলামে এখন bundle.js এর মত টেক্সট রিসোর্সের জন্য দুটি ভিন্ন মান দেখাতে হবে। bundle.js এর জন্য 269 KB এর শীর্ষ মান হল নেটওয়ার্কের মাধ্যমে পাঠানো ফাইলের আকার, এবং 1.4 MB এর নীচের মান হল অসংকুচিত ফাইলের আকার।

   

2. bundle.js এর জন্য প্রতিক্রিয়া শিরোনাম বিভাগে এখন একটি content-encoding: gzip শিরোনাম।

   

পৃষ্ঠার লোড পারফরম্যান্সের উপর পাঠ্য সংকোচনের প্রভাব পরিমাপ করতে আবার পৃষ্ঠায় বাতিঘর প্রতিবেদনটি চালান:

1. Lighthouse প্যানেল খুলুন এবং ক্লিক করুন শীর্ষে অ্যাকশন বারে ... একটি অডিট করুন।

   

2. আগের মতই সেটিংস ছেড়ে দিন এবং পৃষ্ঠা লোড বিশ্লেষণ করুন ক্লিক করুন।

   

উহু! যে অগ্রগতি মত দেখায়. আপনার সামগ্রিক পারফরম্যান্স স্কোর বৃদ্ধি হওয়া উচিত, যার অর্থ সাইটটি দ্রুততর হচ্ছে।

বাস্তব জগতে পাঠ্য সংকোচন

বেশিরভাগ সার্ভারে কম্প্রেশন সক্ষম করার জন্য এই জাতীয় সহজ সমাধান রয়েছে! আপনি পাঠ্য সংকুচিত করতে যে সার্ভার ব্যবহার করেন তা কীভাবে কনফিগার করবেন সে সম্পর্কে কেবল অনুসন্ধান করুন।

চিত্রের আকার পরিবর্তন করুন

আপনার নতুন প্রতিবেদনে বলা হয়েছে যে চিত্রগুলিকে সঠিকভাবে আকার দেওয়া আরেকটি বড় সুযোগ।

ইমেজ রিসাইজ করা ছবির ফাইল সাইজ কমিয়ে লোড টাইম ত্বরান্বিত করতে সাহায্য করে। আপনার ব্যবহারকারী যদি 500-পিক্সেল-চওড়া একটি মোবাইল ডিভাইসের স্ক্রিনে আপনার ছবিগুলি দেখছেন, তাহলে 1500-পিক্সেল-চওড়া ছবি পাঠানোর সত্যিই কোন মানে নেই। আদর্শভাবে, আপনি সর্বাধিক 500-পিক্সেল-ওয়াইড ইমেজ পাঠাবেন।

1. আপনার প্রতিবেদনে, কোন চিত্রগুলিকে পুনরায় আকার দেওয়া উচিত তা দেখতে সঠিকভাবে আকারের চিত্রগুলিতে ক্লিক করুন৷ দেখে মনে হচ্ছে সমস্ত 4টি চিত্রই প্রয়োজনের চেয়ে বড়।

   

2. সম্পাদক ট্যাবে ফিরে, src/model.js খুলুন।

3. const dir = 'big' কে const dir = 'small' দিয়ে প্রতিস্থাপন করুন। এই ডিরেক্টরিতে একই চিত্রগুলির অনুলিপি রয়েছে যা পুনরায় আকার দেওয়া হয়েছে৷

4. এই পরিবর্তন কিভাবে লোড কর্মক্ষমতা প্রভাবিত করে তা দেখতে পৃষ্ঠাটি আবার অডিট করুন।

   

দেখে মনে হচ্ছে পরিবর্তনটি সামগ্রিক পারফরম্যান্স স্কোরের উপর সামান্য প্রভাব ফেলেছে। যাইহোক, একটি জিনিস যা স্কোর স্পষ্টভাবে দেখায় না তা হল আপনি আপনার ব্যবহারকারীদের কতটা নেটওয়ার্ক ডেটা সংরক্ষণ করছেন। পুরানো ফটোগুলির মোট আকার ছিল প্রায় 6.1 MB, যেখানে এখন এটি প্রায় 633 kB। আপনি নেটওয়ার্ক প্যানেলের নীচে স্ট্যাটাস বারে এটি পরীক্ষা করতে পারেন।

বাস্তব জগতে ইমেজ রিসাইজ করা

একটি ছোট অ্যাপ্লিকেশানের জন্য, এর মতো এক-বার আকার পরিবর্তন করা যথেষ্ট ভাল হতে পারে। কিন্তু একটি বড় অ্যাপের জন্য, এটি স্পষ্টতই মাপযোগ্য নয়। বড় অ্যাপে ছবি পরিচালনার জন্য এখানে কিছু কৌশল রয়েছে:

• আপনার বিল্ড প্রক্রিয়া চলাকালীন ইমেজ রিসাইজ করুন।
• বিল্ড প্রক্রিয়া চলাকালীন প্রতিটি ছবির একাধিক মাপ তৈরি করুন এবং তারপর আপনার কোডে srcset ব্যবহার করুন। রানটাইমে, ব্রাউজারটি যে ডিভাইসে চলছে তার জন্য কোন মাপ সবচেয়ে ভালো তা বেছে নেওয়ার যত্ন নেয়। আপেক্ষিক আকারের ছবি দেখুন।
• একটি ইমেজ CDN ব্যবহার করুন যা আপনাকে অনুরোধ করার সময় একটি ইমেজকে গতিশীলভাবে রিসাইজ করতে দেয়।
• খুব অন্তত, প্রতিটি ইমেজ অপ্টিমাইজ করুন. এটি প্রায়ই বিশাল সঞ্চয় তৈরি করতে পারে। অপ্টিমাইজেশান হল যখন আপনি একটি বিশেষ প্রোগ্রামের মাধ্যমে একটি ছবি চালান যা ইমেজ ফাইলের আকার হ্রাস করে। আরও টিপসের জন্য প্রয়োজনীয় চিত্র অপ্টিমাইজেশন দেখুন।

রেন্ডার-ব্লকিং রিসোর্স বাদ দিন

আপনার সাম্প্রতিক প্রতিবেদনে বলা হয়েছে যে রেন্ডার-ব্লকিং সংস্থানগুলি বাদ দেওয়া এখন সবচেয়ে বড় সুযোগ।

একটি রেন্ডার-ব্লকিং রিসোর্স হল একটি বাহ্যিক জাভাস্ক্রিপ্ট বা CSS ফাইল যা পৃষ্ঠাটি দেখানোর আগে ব্রাউজারকে অবশ্যই ডাউনলোড, পার্স এবং এক্সিকিউট করতে হবে। লক্ষ্য হল শুধুমাত্র মূল CSS এবং JavaScript কোড চালানো যা পৃষ্ঠাটিকে সঠিকভাবে প্রদর্শন করার জন্য প্রয়োজন।

প্রথম কাজ, তারপর, এমন কোড খুঁজে বের করা যা পৃষ্ঠা লোড করার সময় কার্যকর করার প্রয়োজন নেই।

1. রেন্ডার-ব্লকিং রিসোর্সগুলি বাদ দিন ক্লিক করুন যা ব্লক করছে: lodash.js এবং jquery.js ।

   

2. আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে, কমান্ড মেনু খুলতে নিম্নলিখিত টিপুন:

   • Mac এ, Command + Shift + P
   • Windows, Linux, বা ChromeOS-এ, Control + Shift + P

3. Coverage টাইপ করা শুরু করুন এবং কভারেজ দেখান নির্বাচন করুন।

   

   কভারেজ ট্যাবটি ড্রয়ারে খোলে।

   

4. ক্লিক পুনরায় লোড করুন । কভারেজ ট্যাবটি bundle.js , jquery.js , এবং lodash.js পৃষ্ঠা লোড হওয়ার সময় কতটা কোড কার্যকর করা হচ্ছে তার একটি ওভারভিউ প্রদান করে৷

   

   এই স্ক্রিনশটটি বলছে যে jQuery এবং Lodash ফাইলগুলির প্রায় 74% এবং 30% যথাক্রমে ব্যবহার করা হয় না।

5. jquery.js সারিতে ক্লিক করুন। DevTools সোর্স প্যানেলে ফাইলটি খোলে। কোডের একটি লাইন কার্যকর করা হয়েছিল যদি এটির পাশে একটি সবুজ বার থাকে। কোডের একটি লাইনের পাশে একটি লাল বার মানে এটি কার্যকর করা হয়নি, এবং অবশ্যই পৃষ্ঠা লোডের প্রয়োজন নেই।

   

6. jQuery কোডটি একটু স্ক্রোল করুন। কিছু লাইন যা "সম্পাদিত" হয় তা আসলে কেবল মন্তব্য। একটি মিনিফায়ারের মাধ্যমে এই কোডটি চালানো যা এই ফাইলের আকার হ্রাস করার আরেকটি উপায়।

সংক্ষেপে, যখন আপনি নিজের কোড নিয়ে কাজ করছেন, তখন কভারেজ ট্যাব আপনাকে আপনার কোড, লাইন-বাই-লাইন বিশ্লেষণ করতে এবং পৃষ্ঠা লোডের জন্য প্রয়োজনীয় কোডটি পাঠাতে সাহায্য করতে পারে।

পৃষ্ঠাটি লোড করার জন্য কি jquery.js এবং lodash.js ফাইলগুলির প্রয়োজন? রিকোয়েস্ট ব্লকিং ট্যাব আপনাকে দেখাতে পারে যখন রিসোর্স পাওয়া যায় না তখন কি হয়।

1. নেটওয়ার্ক ট্যাবে ক্লিক করুন এবং আবার কমান্ড মেনু খুলুন ।

2. blocking টাইপ করা শুরু করুন এবং তারপরে অনুরোধ ব্লকিং দেখান নির্বাচন করুন। অনুরোধ ব্লকিং ট্যাব খোলে।

   

3. ক্লিক প্যাটার্ন যোগ করুন , টেক্সটবক্সে /libs/* টাইপ করুন এবং নিশ্চিত করতে এন্টার টিপুন।

   

4. পৃষ্ঠাটি পুনরায় লোড করুন। jQuery এবং Lodash অনুরোধগুলি লাল, যার অর্থ হল সেগুলি ব্লক করা হয়েছিল৷ পৃষ্ঠাটি এখনও লোড হয় এবং ইন্টারেক্টিভ, তাই দেখে মনে হচ্ছে এই সংস্থানগুলির প্রয়োজন নেই!

   

5. ক্লিক /libs/* ব্লকিং প্যাটার্ন মুছে ফেলার জন্য সমস্ত নিদর্শন সরান ।

সাধারণভাবে, রিকোয়েস্ট ব্লকিং ট্যাবটি প্রদত্ত রিসোর্স উপলভ্য না থাকলে আপনার পৃষ্ঠা কীভাবে আচরণ করে তা অনুকরণ করার জন্য উপযোগী।

এখন, কোড থেকে এই ফাইলগুলির রেফারেন্সগুলি সরান এবং পৃষ্ঠাটি আবার অডিট করুন:

1. সম্পাদক ট্যাবে ফিরে, template.html খুলুন।

2. সংশ্লিষ্ট <script> ট্যাগগুলি মুছুন:

   <head>
       ...
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <script src="/libs/lodash.js"></script>
       <script src="/libs/jquery.js"></script>
       <title>Tony's Favorite Foods</title>
   </head>
   

3. সাইটটি পুনঃনির্মাণ এবং পুনরায় স্থাপনের জন্য অপেক্ষা করুন।

4. Lighthouse প্যানেল থেকে পৃষ্ঠাটি আবার অডিট করুন। আপনার সামগ্রিক স্কোর আবার উন্নতি করা উচিত ছিল.

   

বাস্তব-বিশ্বে সমালোচনামূলক রেন্ডারিং পাথ অপ্টিমাইজ করা

ক্রিটিকাল রেন্ডারিং পাথ সেই কোডকে বোঝায় যা আপনাকে একটি পৃষ্ঠা লোড করতে হবে। সাধারণভাবে, আপনি পেজ লোডের সময় শুধুমাত্র ক্রিটিক্যাল কোড পাঠানোর মাধ্যমে পেজ লোডের গতি বাড়াতে পারেন, এবং তারপর বাকি সবকিছু অলসভাবে লোড করতে পারেন।

• এটি অসম্ভাব্য যে আপনি এমন স্ক্রিপ্টগুলি খুঁজে পাবেন যা আপনি সরাসরি সরাতে পারেন, তবে আপনি প্রায়শই দেখতে পাবেন যে পৃষ্ঠা লোডের সময় অনেক স্ক্রিপ্টের অনুরোধ করার প্রয়োজন নেই এবং পরিবর্তে অ্যাসিঙ্ক্রোনাসভাবে অনুরোধ করা যেতে পারে। অ্যাসিঙ্ক বা ডিফার ব্যবহার করা দেখুন।
• আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন তবে এটির একটি উত্পাদন মোড আছে কিনা তা পরীক্ষা করুন। এই মোড অপ্রয়োজনীয় কোড বাদ দেওয়ার জন্য গাছ কাঁপানোর মতো একটি বৈশিষ্ট্য ব্যবহার করতে পারে যা সমালোচনামূলক রেন্ডারকে ব্লক করছে।

কম প্রধান থ্রেড কাজ করুন

আপনার সাম্প্রতিক প্রতিবেদনটি সুযোগ বিভাগে কিছু ছোটখাটো সম্ভাব্য সঞ্চয় দেখায়, কিন্তু আপনি যদি ডায়াগনস্টিক বিভাগে স্ক্রোল করেন, তাহলে মনে হচ্ছে সবচেয়ে বড় বাধা হল অনেক বেশি প্রধান থ্রেড কার্যকলাপ।

মূল থ্রেড হল যেখানে ব্রাউজার একটি পৃষ্ঠা প্রদর্শন করার জন্য প্রয়োজনীয় বেশিরভাগ কাজ করে, যেমন HTML, CSS এবং JavaScript পার্সিং এবং এক্সিকিউট করা।

দ্রষ্টব্য: এই বিভাগটি পারফরম্যান্স প্যানেলের একটি বরং সংক্ষিপ্ত ভূমিকা প্রদান করে। পৃষ্ঠার কর্মক্ষমতা বিশ্লেষণ করতে আপনি কীভাবে এটি ব্যবহার করতে পারেন সে সম্পর্কে আরও জানতে পারফরম্যান্স বৈশিষ্ট্যের রেফারেন্স দেখুন।

লক্ষ্য হল পৃষ্ঠাটি লোড হওয়ার সময় মূল থ্রেডটি কী কাজ করছে তা বিশ্লেষণ করতে পারফরম্যান্স প্যানেল ব্যবহার করা এবং অপ্রয়োজনীয় কাজ পিছিয়ে দেওয়ার বা অপসারণের উপায় খুঁজে বের করা।

1. পারফরম্যান্স খুলুন > সেটিংস ক্যাপচার করুন এবং নেটওয়ার্ককে স্লো 3G এবং CPU 6x স্লোডাউনে সেট করুন।

   

   মোবাইল ডিভাইসে সাধারণত ল্যাপটপ বা ডেস্কটপের চেয়ে বেশি হার্ডওয়্যার সীমাবদ্ধতা থাকে, তাই এই সেটিংস আপনাকে পৃষ্ঠা লোডের অভিজ্ঞতা দেয় যেন আপনি কম শক্তিশালী ডিভাইস ব্যবহার করছেন।

2. ক্লিক পুনরায় লোড করুন । DevTools পৃষ্ঠাটি পুনরায় লোড করে এবং তারপর পৃষ্ঠাটি লোড করার জন্য যা করতে হবে তার একটি ভিজ্যুয়ালাইজেশন তৈরি করে। এই ভিজ্যুয়ালাইজেশনটিকে ট্রেস হিসাবে উল্লেখ করা হবে।

   

ট্রেসটি বাম থেকে ডানে কালানুক্রমিকভাবে কার্যকলাপ দেখায়। উপরের FPS, CPU, এবং NET চার্টগুলি আপনাকে প্রতি সেকেন্ডে ফ্রেম, CPU কার্যকলাপ এবং নেটওয়ার্ক কার্যকলাপের একটি ওভারভিউ দেয়।

ওভারভিউ বিভাগে আপনি যে হলুদ রঙের প্রাচীর দেখতে পাচ্ছেন তার মানে হল যে সিপিইউ স্ক্রিপ্টিং কার্যকলাপে সম্পূর্ণভাবে ব্যস্ত ছিল। এটি একটি সূত্র যে আপনি কম জাভাস্ক্রিপ্ট কাজ করে পৃষ্ঠা লোড দ্রুত করতে সক্ষম হতে পারে।

কম জাভাস্ক্রিপ্ট কাজ করার উপায় খুঁজে বের করতে ট্রেস তদন্ত করুন:

1. এটি প্রসারিত করতে সময় বিভাগে ক্লিক করুন।

   

   প্রতিক্রিয়া থেকে ব্যবহারকারীর সময়ের পরিমাপের একটি গুচ্ছ রয়েছে, দেখে মনে হচ্ছে টনির অ্যাপটি প্রতিক্রিয়ার বিকাশ মোড ব্যবহার করছে। রিঅ্যাক্টের প্রোডাকশন মোডে স্যুইচ করলে সম্ভবত কিছু সহজ পারফরম্যান্স জয় পাওয়া যাবে।

2. সেই বিভাগটি ভেঙে ফেলতে আবার টাইমিং-এ ক্লিক করুন।

3. প্রধান বিভাগ ব্রাউজ করুন. এই বিভাগটি বাম থেকে ডানে প্রধান থ্রেড কার্যকলাপের একটি কালানুক্রমিক লগ দেখায়। y-অক্ষ (উপর থেকে নীচে) দেখায় কেন ঘটনা ঘটেছে।

   

   এই উদাহরণে, Evaluate Script ইভেন্টটি (anonymous) ফাংশনটি কার্যকর করেছে, যার ফলে __webpack__require__ কার্যকর হয়েছে, যার কারণে ./src/index.jsx চালানো হয়েছে এবং আরও অনেক কিছু।

4. প্রধান বিভাগের নীচে স্ক্রোল করুন। আপনি যখন একটি ফ্রেমওয়ার্ক ব্যবহার করেন, তখন বেশিরভাগ উপরের ক্রিয়াকলাপ কাঠামোর কারণে ঘটে, যা সাধারণত আপনার নিয়ন্ত্রণের বাইরে থাকে। আপনার অ্যাপ দ্বারা সৃষ্ট কার্যকলাপ সাধারণত নীচে থাকে।

   

   এই অ্যাপে, মনে হচ্ছে App নামক একটি ফাংশন একটি mineBitcoin ফাংশনে প্রচুর কল করছে। দেখে মনে হচ্ছে টনি হয়তো তার ভক্তদের ডিভাইস ব্যবহার করে ক্রিপ্টোকারেন্সি খনি...

   দ্রষ্টব্য: যদিও আপনার ফ্রেমওয়ার্ক যে কলগুলি করে তা সাধারণত আপনার নিয়ন্ত্রণের বাইরে থাকে, কখনও কখনও আপনি আপনার অ্যাপটিকে এমনভাবে গঠন করতে পারেন যার ফলে ফ্রেমওয়ার্কটি অদক্ষভাবে চালানো হয়। ফ্রেমওয়ার্কটি দক্ষতার সাথে ব্যবহার করার জন্য আপনার অ্যাপটিকে পুনর্গঠন করা কম প্রধান থ্রেডের কাজ করার একটি উপায় হতে পারে। এর জন্য আপনার ফ্রেমওয়ার্ক কীভাবে কাজ করে এবং ফ্রেমওয়ার্কটিকে আরও দক্ষতার সাথে ব্যবহার করার জন্য আপনি আপনার নিজের কোডে কী ধরনের পরিবর্তন করতে পারেন সে সম্পর্কে গভীর বোঝার প্রয়োজন।

5. নীচের দিকে নীচের-আপ ট্যাবটি খুলুন৷ কোন ক্রিয়াকলাপগুলি সবচেয়ে বেশি সময় নেয় তা এই ট্যাবটি ভেঙে দেয়৷ আপনি যদি বটম-আপ বিভাগে কিছু দেখতে না পান তবে প্রধান বিভাগের জন্য লেবেলে ক্লিক করুন।

   

   বটম-আপ বিভাগটি শুধুমাত্র আপনি যে কার্যকলাপ বা কার্যকলাপের গোষ্ঠী নির্বাচন করেছেন তার তথ্য দেখায়। উদাহরণস্বরূপ, আপনি যদি mineBitcoin কার্যকলাপগুলির একটিতে ক্লিক করেন, তাহলে বটম-আপ বিভাগটি শুধুমাত্র সেই একটি কার্যকলাপের জন্য তথ্য প্রদর্শন করবে।

   সেলফ টাইম কলাম আপনাকে দেখায় যে প্রতিটি ক্রিয়াকলাপে সরাসরি কতটা সময় ব্যয় করা হয়েছিল। এই ক্ষেত্রে, প্রধান থ্রেড সময়ের প্রায় 82% mineBitcoin ফাংশনে ব্যয় করা হয়েছিল।

প্রোডাকশন মোড ব্যবহার করা এবং জাভাস্ক্রিপ্ট অ্যাক্টিভিটি কমানো পৃষ্ঠা লোডের গতি বাড়ায় কিনা তা দেখার সময়। উত্পাদন মোড দিয়ে শুরু করুন:

1. সম্পাদক ট্যাবে, webpack.config.js খুলুন।
2. "mode":"development" কে "mode":"production" এ পরিবর্তন করুন।
3. নতুন বিল্ড স্থাপনের জন্য অপেক্ষা করুন।

4. পৃষ্ঠাটি আবার অডিট করুন।

   

mineBitcoin কলটি সরিয়ে জাভাস্ক্রিপ্ট কার্যকলাপ হ্রাস করুন:

1. সম্পাদক ট্যাবে, src/App.jsx খুলুন।
2. constructor this.mineBitcoin(1500) এ কলটি কমেন্ট করুন।
3. নতুন বিল্ড স্থাপনের জন্য অপেক্ষা করুন।
4. পৃষ্ঠাটি আবার অডিট করুন।

বরাবরের মতো, এখনও কিছু করার আছে, উদাহরণস্বরূপ, সবচেয়ে বড় বিষয়বস্তুপূর্ণ পেইন্ট এবং ক্রমবর্ধমান লেআউট শিফট মেট্রিক্স হ্রাস করুন।

সাফল্য: কিন্তু মনে হচ্ছে শেষ পরিবর্তনটি পারফরম্যান্সে ব্যাপক লাফ দিয়েছে!

বাস্তব জগতে কম প্রধান থ্রেড কাজ করছেন

সাধারণভাবে, পারফরম্যান্স প্যানেল হল আপনার সাইট লোড হওয়ার সাথে সাথে কোন কার্যকলাপটি করে তা বোঝার এবং অপ্রয়োজনীয় কার্যকলাপ সরানোর উপায় খুঁজে বের করার সবচেয়ে সাধারণ উপায়।

আপনি যদি এমন একটি পদ্ধতি পছন্দ করেন যা console.log() এর মতো মনে হয়, তাহলে ব্যবহারকারীর টাইমিং API আপনাকে আপনার অ্যাপ লাইফসাইকেলের নির্দিষ্ট পর্যায়গুলিকে নির্বিচারে চিহ্নিত করতে দেয়, যাতে প্রতিটি পর্যায় কত সময় নেয় তা ট্র্যাক করতে।

সারসংক্ষেপ

• যখনই আপনি একটি সাইটের লোড কর্মক্ষমতা অপ্টিমাইজ করার জন্য সেট আউট, সবসময় একটি অডিট দিয়ে শুরু করুন. অডিট একটি বেসলাইন স্থাপন করে, এবং কীভাবে উন্নতি করা যায় সে সম্পর্কে আপনাকে টিপস দেয়।
• একবারে একটি পরিবর্তন করুন, এবং সেই বিচ্ছিন্ন পরিবর্তনটি কীভাবে কর্মক্ষমতাকে প্রভাবিত করে তা দেখতে প্রতিটি পরিবর্তনের পরে পৃষ্ঠাটি অডিট করুন।

পরবর্তী পদক্ষেপ

আপনার নিজের সাইটে অডিট চালান! আপনার রিপোর্ট ব্যাখ্যা করতে বা আপনার লোড কর্মক্ষমতা উন্নত করার উপায় খুঁজতে সাহায্যের প্রয়োজন হলে, DevTools সম্প্রদায় থেকে সাহায্য পাওয়ার সমস্ত উপায় দেখুন:

• developer.chrome.com সংগ্রহস্থলে এই ডকটিতে বাগ ফাইল করুন৷
• Chromium Bugs- এ DevTools-এ বাগ রিপোর্ট ফাইল করুন।
• মেইলিং তালিকার বৈশিষ্ট্য এবং পরিবর্তন নিয়ে আলোচনা করুন। সমর্থন প্রশ্নের জন্য মেইলিং তালিকা ব্যবহার করবেন না দয়া করে. পরিবর্তে, স্ট্যাক ওভারফ্লো ব্যবহার করুন।
• স্ট্যাক ওভারফ্লোতে DevTools কীভাবে ব্যবহার করবেন সে সম্পর্কে সাধারণ সহায়তা পান। বাগ অনুরোধ ফাইল করতে, সবসময় Chromium বাগ ব্যবহার করুন।
• @ChromeDevTools- এ আমাদের টুইট করুন।