প্রাক কর্ম

একটি সাইট অডিটের জন্য পারফরম্যান্স মেট্রিক্স সংগ্রহ করার আগে, ফোকাসের জন্য সহজ সমাধান এবং ক্ষেত্রগুলি সনাক্ত করতে আপনি বেশ কয়েকটি পরীক্ষা করতে পারেন।

বৈধতা পরীক্ষা: আর্কিটেকচার এবং কোড

কারিগরি ঋণ পরিশোধ!

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

সাইট আর্কিটেকচার এবং সম্পদ
কোড রেপো এবং সাইট থেকে সহজে কিছু মুছে ফেলা যায় যেমন অব্যবহৃত লিগ্যাসি পেজ, বিষয়বস্তু বা অন্যান্য সম্পদ? অনাথ পৃষ্ঠা, অপ্রয়োজনীয় টেমপ্লেট, অব্যবহৃত ছবি এবং অব্যবহৃত কোড এবং লাইব্রেরি পরীক্ষা করুন।

রানটাইম ত্রুটি
ব্রাউজার কনসোলে রিপোর্ট করা ত্রুটির জন্য পরীক্ষা করুন। কোন হওয়া উচিত নয় :)।

লিন্টিং
আপনার HTML, CSS বা JavaScript কোডে কি ত্রুটি আছে? আপনার ওয়ার্কফ্লোতে লিন্টিং তৈরি করা কোডের গুণমান বজায় রাখতে এবং রিগ্রেশন এড়াতে সাহায্য করতে পারে। আমরা সুপারিশ করি HTMLHint , StyleLint এবং ESLint , যেগুলো কোড এডিটর প্লাগইন হিসেবে ব্যবহার করা যেতে পারে, অথবা ওয়ার্কফ্লো প্রক্রিয়ার মধ্যে কমান্ড লাইন থেকে চালানো যেতে পারে এবং ক্রমাগত ইন্টিগ্রেশন টুল যেমন Travis

ভাঙা লিঙ্ক এবং ছবি
বিল্ড টাইম এবং রানটাইমে ভাঙা লিঙ্কগুলি পরীক্ষা করার জন্য অনেকগুলি সরঞ্জাম রয়েছে, যার মধ্যে রয়েছে ক্রোম এক্সটেনশন ( এটি ভাল) এবং নোড সরঞ্জাম যেমন ব্রোকেন লিঙ্ক চেকার

প্লাগইন
ফ্ল্যাশ এবং সিলভারলাইটের মতো প্লাগইনগুলি একটি নিরাপত্তা ঝুঁকি হতে পারে, তাদের জন্য সমর্থন অবমূল্যায়িত করা হয়েছে এবং সেগুলি মোবাইলে কাজ করে না৷ প্লাগইন চেক করতে Lighthouse ব্যবহার করুন

বিভিন্ন ডিভাইস এবং প্রসঙ্গ দিয়ে পরীক্ষা করুন

বাস্তব ডিভাইস, একাধিক ব্রাউজার এবং বিভিন্ন কানেক্টিভিটি প্রেক্ষাপটের মাধ্যমে আপনার সাইটটি পরীক্ষা করার জন্য প্রকৃত লোকেদের পাওয়ার কিছুই নেই।

এই চেকগুলির মধ্যে কিছু তুলনামূলকভাবে বিষয়গত, তবে তারা এমন সমস্যাগুলি সনাক্ত করতে পারে যা অনুভূত কর্মক্ষমতাকে প্রভাবিত করে। ভাঙা লিঙ্ক, উদাহরণস্বরূপ, সময় নষ্ট করে এবং 'অপ্রতিক্রিয়াশীল' বোধ করে। অযোগ্য টেক্সট পড়া ধীর হয়.

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

ক্রস-প্ল্যাটফর্ম পরীক্ষা
আপনি কি প্ল্যাটফর্ম টার্গেট? আপনার ব্যবহারকারীরা এখন এবং ভবিষ্যতে যে ব্রাউজার এবং অপারেটিং সিস্টেমগুলি ব্যবহার করে সেগুলি আপনাকে পরীক্ষা করতে হবে৷

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

ডিভাইস
আপনার ব্যবহারকারীদের মতো একই ডিভাইসে আপনার সাইট চেষ্টা করে দেখুন। নিম্নলিখিত ফটো দুটি ভিন্ন ফোনে একই পৃষ্ঠা দেখায়.

একটি উচ্চ বৈশিষ্ট্য এবং একটি কম বিশেষ ফোনে চলমান ব্লগ পোস্ট পৃষ্ঠা

বড় পর্দায়, পাঠ্য ছোট কিন্তু পাঠযোগ্য। ছোট স্ক্রিনে ব্রাউজার লেআউটটি সঠিকভাবে রেন্ডার করে, কিন্তু টেক্সটটি পড়া যায় না, এমনকি জুম ইন করলেও। ডিসপ্লেটি ঝাপসা এবং একটি 'কালার কাস্ট' রয়েছে — সাদা সাদা দেখায় না — বিষয়বস্তুকে কম পাঠযোগ্য করে তোলে।

এই ধরনের সহজ অনুসন্ধানগুলি অস্পষ্ট কর্মক্ষমতা ডেটার চেয়ে অনেক বেশি গুরুত্বপূর্ণ হতে পারে!

UI এবং UX ব্যবহার করে দেখুন

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

আপনি অ্যাক্সেসিবিলিটি বাস্তবায়ন এবং পর্যালোচনা সম্পর্কে আরও জানতে পারেন Udacity কোর্সে অ্যাক্সেসিবিলিটি এবং ওয়েব ফান্ডামেন্টাল নিবন্ধে কিভাবে একটি অ্যাক্সেসিবিলিটি পর্যালোচনা করবেন

আপনার অ্যাক্সেসিবিলিটি অডিটের রেকর্ড রাখুন। সম্ভাবনা হল যে আপনি সহজ উন্নতি করতে সক্ষম হবেন যা আপনার সমস্ত ব্যবহারকারীদের জন্য ভাল।

মৌলিক UI এবং UX সমস্যা
মিথস্ক্রিয়া যেগুলি যেভাবে কাজ করে না, ছোট উইন্ডোজ এবং ভিউপোর্টে উপচে পড়া উপাদান, খুব ছোট ট্যাপ লক্ষ্য, অপঠনযোগ্য বিষয়বস্তু, জ্যাঙ্কি স্ক্রোলিং... সাইটে একাধিক পৃষ্ঠা খুলুন, নেভিগেশন এবং সমস্ত মূল কার্যকারিতা চেষ্টা করুন। একটি রেকর্ড রাখুন।

ছবি, অডিও এবং ভিডিও
উপচে পড়া বিষয়বস্তু, ভুল আকৃতির অনুপাত , খারাপ ক্রপিং এবং গুণমানের সমস্যাগুলির জন্য পরীক্ষা করুন।

বিষয়ভিত্তিক UI পরীক্ষা
এগুলি সব প্রাসঙ্গিক নাও হতে পারে, তবে সাধারণ পরিবর্তনগুলি রিফ্যাক্টরিংকে আরও সহজ করে তুলতে পারে:

  • 'আমি এখানে কি করতে পারি? আপনি সাইট খুললে অবিলম্বে পরিষ্কার?
  • আপনি কি বিষয়বস্তু গ্রাস করতে এবং লিঙ্কগুলি অনুসরণ করতে আগ্রহী?
  • সেখানে কি চাক্ষুষ শ্রেণিবিন্যাস বা পথ আছে — নাকি সবকিছুরই একই চাক্ষুষ ওজন আছে?
  • বিন্যাস বিশৃঙ্খল?
  • অনেক ফন্ট আছে?
  • মুছে ফেলা যেতে পারে যে ছবি বা অন্যান্য বিষয়বস্তু আছে?
  • কন্টেন্ট ডিজাইন ইন্টারফেস ডিজাইনের মতই গুরুত্বপূর্ণ। আপনার সাইটের পাঠ্য এবং চিত্র সামগ্রী কি মোবাইল এবং ডেস্কটপ প্রসঙ্গের জন্য উপযুক্ত? কিছু কি নির্মূল করা যায়? মোবাইলের জন্য লিখুন