স্বয়ংক্রিয় ওয়েব কর্মক্ষমতা পরিমাপ

আদ্দি ওসমানী

টুইটার গিটহাব

ওয়েব কর্মক্ষমতা আপনার সমগ্র ব্যবহারকারীর অভিজ্ঞতার উপর বিশাল প্রভাব ফেলতে পারে। আপনি যদি ইদানীং আপনার নিজের সাইটের পারফের উন্নতির দিকে তাকিয়ে থাকেন, আপনি সম্ভবত PageSpeed ​​Insights-এর কথা শুনেছেন - একটি টুল যা পৃষ্ঠাগুলিকে বিশ্লেষণ করে এবং মোবাইল এবং ডেস্কটপ ওয়েব পারফরম্যান্সের জন্য সেরা অনুশীলনের উপর ভিত্তি করে কীভাবে সেগুলিকে দ্রুততর করা যায় সে বিষয়ে পরামর্শ দেয়৷

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

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

আপনার বিল্ড প্রক্রিয়ায় কর্মক্ষমতা মেট্রিক্স

যদিও আপনার স্কোর ঠিক আছে তা জানতে ম্যানুয়ালি পেজস্পিড ইনসাইটসে যাচ্ছেন, অনেক ডেভেলপার তাদের বিল্ড প্রক্রিয়ায় একই ধরনের পারফরম্যান্স স্কোরিং করা সম্ভব কিনা তা জিজ্ঞাসা করছেন।

উত্তর হল: একেবারে।

নোডের জন্য PSI প্রবর্তন করা হচ্ছে

আজ আমরা নোডের জন্য PSI-এর সাথে পরিচয় করিয়ে দিতে পেরে খুশি - একটি নতুন মডিউল যা Gulp , Grunt এবং অন্যান্য বিল্ড সিস্টেমের সাথে দুর্দান্ত কাজ করে এবং PageSpeed ​​Insights পরিষেবার সাথে সংযোগ করতে পারে এবং আপনার ওয়েব পারফরম্যান্সের একটি বিশদ প্রতিবেদন ফেরত দিতে পারে৷ এটি যে ধরনের রিপোর্টিং সক্ষম করে তার একটি পূর্বরূপ দেখি:

উপরের ফলাফলগুলি যে ধরণের উন্নতি করা যেতে পারে তার জন্য একটি অনুভূতি পাওয়ার জন্য ভাল। উদাহরণ স্বরূপ, কন্টেন্টকে ভিউপোর্টে সাইজ করার জন্য একটি 5.92 মানে "কিছু" কাজ এখনও করা যেতে পারে যখন রেন্ডার ব্লকিং রিসোর্স মিনিমাইজ করার জন্য একটি 24 আপনাকে async অ্যাট্রিবিউট ব্যবহার করে JS-এর লোডিং পিছিয়ে দেওয়ার পরামর্শ দিতে পারে।

PageSpeed ​​Insights এ প্রবেশের বাধা কমানো

আপনি যদি অতীতে PageSpeed ​​Insights API ব্যবহার করার চেষ্টা করে থাকেন বা এর উপরে আমরা যে কোনো টুল তৈরি করি তা ব্যবহার করার চেষ্টা করে থাকেন, তাহলে সম্ভবত আপনাকে একটি ডেডিকেটেড API কী-এর জন্য নিবন্ধন করতে হবে। আমরা জানি যে যদিও এটি মাত্র কয়েক মিনিট সময় নেয়, তবে এটি আপনার নিয়মিত কর্মপ্রবাহের অংশ হিসাবে অন্তর্দৃষ্টি পাওয়ার জন্য বন্ধ হতে পারে৷

আমরা আপনাকে জানাতে পেরে আনন্দিত যে PageSpeed ​​Insights পরিষেবা প্রতি 5 সেকেন্ডে 1টি পর্যন্ত অনুরোধের জন্য API কী ছাড়াই অনুরোধ করা সমর্থন করে (কারো জন্য প্রচুর)। আরো নিয়মিত ব্যবহার বা গুরুতর উত্পাদন বিল্ডের জন্য, আপনি সম্ভবত একটি কীর জন্য নিবন্ধন করতে চাইবেন।

PSI মডিউলটি কয়েক মিনিটেরও কম সময়ে সেটআপ করার জন্য একটি nokey বিকল্প এবং কিছু সময়ের জন্য key বিকল্প উভয়কেই সমর্থন করে। একটি API কী-এর জন্য কীভাবে নিবন্ধন করবেন তার বিশদ বিবরণ নথিভুক্ত করা হয়েছে।

শুরু হচ্ছে

আপনি কিভাবে আপনার কর্মপ্রবাহে PSI সংহত করবেন তার জন্য আপনার কাছে দুটি বিকল্প রয়েছে। আপনি হয় এটিকে আপনার বিল্ড প্রক্রিয়ায় একীভূত করতে পারেন বা এটিকে আপনার সিস্টেমে বিশ্বব্যাপী ইনস্টল করা টুল হিসাবে চালাতে পারেন।

নির্মাণ প্রক্রিয়া

আপনার Grunt বা Gulp বিল্ড-প্রক্রিয়ায় PSI ব্যবহার করা মোটামুটি সোজা। আপনি যদি একটি Gulp প্রকল্পে কাজ করছেন, আপনি সরাসরি PSI ইনস্টল এবং ব্যবহার করতে পারেন।

ইনস্টল করুন

npm ব্যবহার করে PSI ইনস্টল করুন এবং আপনার package.json ফাইলে সংরক্ষণ করতে --save-dev পাস করুন।

npm install psi --save-dev

তারপরে আপনার gulpfile-এ এটির জন্য একটি Gulp টাস্ক নিম্নরূপ সংজ্ঞায়িত করুন (আমাদের Gulp নমুনা প্রকল্পেও অন্তর্ভুক্ত):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

উপরের জন্য, আপনি তারপর ব্যবহার করে টাস্ক চালাতে পারেন:

gulp psi

এবং যদি আপনি Grunt ব্যবহার করেন, তাহলে আপনি জেমস ক্রাইয়ারের গ্রান্ট-পেজস্পিড ব্যবহার করতে পারেন যা এখন এটির রিপোর্টিংকে পাওয়ার জন্য PSI ব্যবহার করে।

ইনস্টল করুন

npm install grunt-pagespeed --save-dev

তারপর আপনার Gruntfile এ টাস্ক লোড করুন:

grunt.loadNpmTasks('grunt-pagespeed');

এবং এটি ব্যবহারের জন্য কনফিগার করুন:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

তারপর আপনি ব্যবহার করে টাস্ক চালাতে পারেন:

grunt pagespeed

একটি গ্লোবাল টুল হিসাবে ইনস্টল করা হচ্ছে

আপনি আপনার সিস্টেমে বিশ্বব্যাপী উপলব্ধ সরঞ্জাম হিসাবে PSI ইনস্টল করতে পারেন। আবারও, আমরা টুলটি ইনস্টল করতে npm ব্যবহার করতে পারি:

$ npm install -g psi

এবং যেকোন টার্মিনাল উইন্ডোর মাধ্যমে, একটি সাইটের জন্য পেজস্পিড ইনসাইটস রিপোর্টের জন্য অনুরোধ করুন ( nokey বিকল্প বা নিম্নরূপ একটি API নির্দিষ্ট key সহ):

psi http://www.html5rocks.com --nokey --strategy=mobile

অথবা যাদের একটি নিবন্ধিত API কী আছে তাদের জন্য:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

এটাই!

এগিয়ে যান এবং কর্মক্ষমতা আপনার সংস্কৃতির অংশ করুন

ব্যবহারকারীর অভিজ্ঞতায় আমাদের ডিজাইন এবং বাস্তবায়নের প্রভাব সম্পর্কে আমাদের আরও ভাবতে হবে।

PSI-এর মতো সমাধানগুলি ডেস্কটপ এবং মোবাইলে আপনার ওয়েব পারফরম্যান্সের উপর নজর রাখতে পারে এবং আপনার নিয়মিত পোস্ট-ডিপ্লয়মেন্ট ওয়ার্কফ্লোয়ের অংশ হিসাবে ব্যবহার করা হলে এটি কার্যকর।

আমরা আপনার কোন প্রতিক্রিয়া শুনতে আগ্রহী এবং আশা করি PSI আপনার দলের পারফরম্যান্স সংস্কৃতি উন্নত করতে সাহায্য করবে।