আপনার ওয়েবসাইটের মূল কার্যকারিতা যাতে সবসময় উপলভ্য, অ্যাক্সেসযোগ্য, সুরক্ষিত, ব্যবহারযোগ্য, খুঁজে পাওয়ার যোগ্য ও দ্রুত হয় তা কীভাবে নিশ্চিত করবেন।
আপনার ওয়েবসাইট যাতে সবসময় উপলভ্য, অ্যাক্সেসযোগ্য, সুরক্ষিত এবং সকলের ব্যবহারের উপযোগী থাকে তা নিশ্চিত করতে এই পৃষ্ঠায় নির্দেশিকা দেওয়া হয়েছে।
এই পৃষ্ঠার নির্দেশিকা Google-এর মধ্যে ক্রস-ফাংশনাল টিমের সংগ্রহ থেকে আসে যা COVID-19 পরিস্থিতির সময় লোকজনকে সুরক্ষিত থাকতে সাহায্য করে এমন ওয়েবসাইটগুলিকে সহায়তা করার জন্য তাদের স্বল্পমেয়াদী ফোকাস পরিবর্তন করছে। এইসব Googler দেখেছেন যে, গুরুত্বপূর্ণ তথ্য খুঁজছেন এমন লোকজনের থেকে সাইটগুলি অভূতপূর্ব চাহিদা বৃদ্ধির সম্মুখীন হচ্ছে, যাদের মধ্যে অনেকেই আগে খুব কমই বা কখনও ওয়েব ব্যবহার করেননি। এই সময়ে সাইট উপলভ্য রাখা এবং সকলের জন্য অ্যাক্সেসযোগ্য করা চ্যালেঞ্জিং হতে পারে।
নির্দেশিকা
উপলভ্যতা, নির্ভরযোগ্যতা, স্থিতিস্থাপকতা এবং স্থায়িত্ব
আপনার সাইটে ট্রাফিক স্পাইক দেখা গেলে এবং সেটি কাজ না করলে অথবা আপনি যদি এটি কাজ না করা আটকাতে চান, তাহলে নিচের নির্দেশিকা আপনাকে দ্রুত সমস্যার সমাধান করতে বা বড় সমস্যা হওয়ার আগেই সেগুলি শনাক্ত করতে সাহায্য করতে পারে।
- ট্রাফিক স্পাইক সংক্রান্ত সমস্যা কীভাবে শনাক্ত, প্রশমিত ও প্রতিরোধ করবেন তা জানতে ওভারলোড হওয়া সার্ভার সংক্রান্ত সমস্যার সমাধান করা নিবন্ধটি পড়ুন।
- অপ্রয়োজনীয় ছবি, ভিডিও, স্ক্রিপ্ট ও ফন্ট সরিয়ে দিন। নিশ্চিত করুন যে প্রতিটি পৃষ্ঠা শুধুমাত্র সেই কার্যকারিতা প্রদান করার উপর ফোকাস করে যা আপনার সাইট ব্যবহারকারী ব্যক্তিদের সত্যিই প্রয়োজন।
- আপনার ছবি অপ্টিমাইজ করলে সার্ভারের ব্যান্ডউইথ ব্যবহার উল্লেখযোগ্যভাবে কমে যেতে পারে কারণ ওয়েবে ছবিই হল সবচেয়ে বেশি ব্যান্ডউইথ ব্যবহারকারী সোর্স।
- যতটা সম্ভব আপনার স্ট্যাটিক কন্টেন্ট CDN-এ অফলোড করুন। সাধারণ পরিষেবা প্রদানকারীদের থেকে আরও বিবরণ: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- আপনার CDN-এ এমন কোনও অপ্টিমাইজেশন আছে কিনা তা চেক করুন যা সহজেই চালু করা যায়, যেমন ডাইনামিক ইমেজ কম্প্রেশন, টেক্সট কম্প্রেশন বা JS এবং CSS রিসোর্সের অটোমেটিক মিনিফিকেশন।
- HTTP ক্যাশিং অপ্টিমাইজ করলে, কোডে সামান্য পরিবর্তন করেই আপনার সার্ভারের উপর থেকে লোড উল্লেখযোগ্যভাবে কমানো যেতে পারে। ওভারভিউয়ের জন্য HTTP ক্যাশে: আপনার প্রথম প্রতিরক্ষা এবং নির্দিষ্ট সাজেশনের জন্য HTTP ক্যাশিং এবং ক্যাশিংয়ের পেশাদার পদ্ধতি চেক করে দেখুন। Lighthouse-এ দক্ষ ক্যাশে নীতির সাথে স্ট্যাটিক অ্যাসেট পরিবেশন করুন অডিট আপনাকে ক্যাশে করা হচ্ছে না এমন রিসোর্স দ্রুত শনাক্ত করতে সাহায্য করতে পারে। মনে রাখবেন যে বিভিন্ন ধরনের রিসোর্সের ক্ষেত্রে ফ্রেশনেস সংক্রান্ত প্রয়োজনীয়তা আলাদা হবে এবং তাই আলাদা ক্যাশিং স্ট্র্যাটেজি প্রয়োজন হবে।
- সার্ভিস ওয়ার্কার হল আপনার সার্ভারের উপর চাপ কমানোর আরেকটি উপায়, তবে এর জন্য উল্লেখযোগ্য প্রযুক্তিগত বিনিয়োগের প্রয়োজন হতে পারে। এছাড়াও, এগুলি আপনার ওয়েবসাইটকে
অফলাইনে কাজ করতে সাহায্য করে, যার ফলে আপনি ইন্টারনেট কানেকশন ছাড়াই ফিরে আসা ব্যবহারকারীদের কাছে খোলা থাকার সময়, ফোন নম্বর এবং অন্যান্য তথ্য দেখাতে পারেন। ওয়েবসাইটে সার্ভিস ওয়ার্কার যোগ করার জন্য
Workbox হল সাজেস্ট করা পদ্ধতি কারণ এটি
অনেক বয়লারপ্লেট অটোমেট করে, সেরা পদ্ধতি অনুসরণ করা সহজ করে তোলে এবং
লো-লেভেল
ServiceWorkerAPI সরাসরি ব্যবহার করার সময় সাধারণত যেসব সূক্ষ্ম বাগ দেখা যায় সেগুলি প্রতিরোধ করে। - আপনার সাইটের ব্যবহার উল্লেখযোগ্যভাবে বৃদ্ধি পেলে, DDoS অ্যাটাক থেকে রক্ষা করার জন্য আপনার কাছে পর্যাপ্ত সুরক্ষা আছে কিনা তা চেক করুন, কারণ আপনার সাইট এখন আরও বেশি আকর্ষণীয় টার্গেট হতে পারে। সাধারণ পরিষেবা প্রদানকারীদের থেকে আরও বিবরণ: AWS, Azure, Cloudflare, Google Cloud.
আরও নির্দেশিকার জন্য নেটওয়ার্কের নির্ভরযোগ্যতা দেখুন।
অ্যাক্সেসিবিলিটি
অ্যাক্সেসিবিলিটির উপর ফোকাস করা আগের চেয়ে অনেক বেশি গুরুত্বপূর্ণ কারণ বিভিন্ন ধরনের প্রয়োজন আছে এমন আরও বেশি সংখ্যক মানুষ সম্ভবত আপনার সাইট অ্যাক্সেস করছেন। আপনার ওয়েবসাইটের মূল কার্যকারিতা যাতে সকলের জন্য অ্যাক্সেসযোগ্য হয় তা নিশ্চিত করতে নিচের নির্দেশিকা অনুসরণ করুন।
- অ্যাক্সেসিবিলিটি হল একটি টিমওয়ার্ক এবং এতে প্রত্যেকের ভূমিকা রয়েছে। Google-এর টিমের জন্য অ্যাক্সেসিবিলিটি গাইড এবং মার্কিন যুক্তরাষ্ট্রের ডিজিটাল পরিষেবা থেকে টিম গাইড পর্যালোচনা করে শুরু করুন। এইসব গাইডে ব্যাখ্যা করা আছে যে টিমের প্রত্যেক সদস্য (প্রোডাক্ট ম্যানেজার, ইঞ্জিনিয়ার, ডিজাইনার, QA এবং আরও অনেকে) কী কী অবদান রাখতে পারেন।
- কোনটি ভাল কাজ করছে এবং কোনটিতে উন্নতি প্রয়োজন তা নির্ধারণ করতে একটি অ্যাক্সেসিবিলিটি পর্যালোচনা করুন। WAVE ব্রাউজার এক্সটেনশন আপনার সাইটের ম্যানুয়াল অ্যাক্সেসিবিলিটি অডিটের মাধ্যমে আপনাকে গাইড করতে সাহায্য করতে পারে।
- কীবোর্ড নেভিগেশন ও স্ক্রিন রিডার সংক্রান্ত সহায়তার মতো নির্দিষ্ট বিষয় আরও ভালোভাবে বুঝতে অ্যাক্সেসিবিলিটি গাইড পড়ে দেখুন।
- অ্যাক্সেসিবিলিটি সংক্রান্ত সাধারণ সমস্যা ধরতে Lighthouse অডিট রান করুন। এছাড়াও, রিপোর্টে ম্যানুয়াল চেকের একটি তালিকা দেওয়া থাকে যা আপনার সাইটের অপারেবিলিটি উন্নত করার জন্য আপনি করতে পারেন। মনে রাখবেন, অ্যাক্সেসিবিলিটি স্কোর ১০০ হলেও আপনার সাইট যে অ্যাক্সেস করা যাবেই, তার কোনও গ্যারেন্টি নেই। এমন অনেক গুরুত্বপূর্ণ সমস্যা আছে যা Lighthouse অটোমেটিক পদ্ধতিতে পরীক্ষা করতে পারে না, তাই ম্যানুয়ালি পর্যালোচনা করা এখনও গুরুত্বপূর্ণ। অন্যান্য অটোমেটেড অডিটিং টুলের মধ্যে রয়েছে WAVE API এবং AXE এক্সটেনশন।
- Start Building Accessible Web Applications Today course on egghead.io কোর্স সম্পূর্ণ করুন অথবা Web Accessibility course on Udacity চেক করে দেখুন।
- নির্দিষ্ট অ্যাক্সেসিবিলিটি সংক্রান্ত বিষয়ে আরও দ্রুত পরামর্শ পেতে, A11ycast প্লেলিস্ট দেখুন।
পরিচয়, নিরাপত্তা ও গোপনীয়তা
গুরুত্বপূর্ণ সমস্যার সমাধান করার জন্য শর্টকাট ব্যবহার করার ইচ্ছা হতে পারে, তবে সবসময় খেয়াল রাখবেন যে আপনি যেন এর মাধ্যমে কোনও নিরাপত্তা সংক্রান্ত ত্রুটি তৈরি না করেন। লোকজনকে অত্যন্ত ব্যক্তিগত বিষয়ের কন্টেন্ট অ্যাক্সেস করতে হয়। ওয়েবসাইটকে যেকোনও মূল্যে ব্যবহারকারীর এই সংবেদনশীল ডেটা সুরক্ষিত রাখতে হবে এবং লোকজনকে আশ্বস্ত করতে হবে যে তাদের ব্যক্তিগতভাবে শনাক্তকরণযোগ্য তথ্য (PII) সুরক্ষিত আছে।
- সব ওয়েবসাইট কেন HTTPS-এর মাধ্যমে সুরক্ষিত করা উচিত, শুধু সংবেদনশীল PII ডেটা ম্যানেজ করে এমন ওয়েবসাইট নয়, তা বুঝুন।
- ডিফল্ট হিসেবে HTTPS ব্যবহার করে এমন হোস্টিং প্রদানকারীতে পাল্টে নিন অথবা আপনার সার্ভারে HTTPS চালু করতে Let's Encrypt বা একই ধরনের পরিষেবা ব্যবহার করুন।
- কুকির ব্যবহার কীভাবে আরও সুরক্ষিত করবেন তা জানতে SameSite কুকি সম্পর্কে ব্যাখ্যা পর্যালোচনা করুন। মনে রাখবেন যে SameSite কুকি লেবেলিংয়ের এনফোর্সমেন্ট সাময়িকভাবে ফিরিয়ে নেওয়া হয়েছে।
আরও নির্দেশিকার জন্য নিরাপদ ও সুরক্ষিত দেখুন।
ব্যবহারযোগ্যতা, UI ও UX
মৌলিক চাহিদা পূরণের জন্য মানুষ ওয়েবের উপর আরও বেশি নির্ভর করছে। এইসব লোকজনের মধ্যে অনেকেই ঘন ঘন ওয়েব ব্যবহার করেন না। আপনার সাইটের মূল কার্যকারিতার ব্যবহারযোগ্যতা অডিট করা এবং এটি যতটা সম্ভব সহজ ও ব্যবহার করা সহজ তা নিশ্চিত করা সার্থক।
- আপনার ওয়েবসাইটের উপরে একটি বিশিষ্ট ব্যানার (যা X বোতাম দিয়ে সরানো যেতে পারে) যোগ করার কথা বিবেচনা করুন যা স্পষ্টভাবে পরিষেবা আপডেটগুলি জানায়। লোকজনকে আরও নির্দিষ্ট রিসোর্সে নিয়ে যেতে ব্যানারে কল-টু-অ্যাকশন ব্যবহার করুন। পৃষ্ঠার বাকি কন্টেন্ট থেকে আলাদা করে দেখানোর জন্য স্বতন্ত্র রঙ ও ফন্ট ব্যবহার করার কথা বিবেচনা করুন। আপনার লেখায় যেন সহানুভূতির সুর থাকে, মানুষের প্রয়োজনের উপর ফোকাস করা হয় এবং কী ধরনের পরিষেবা আশা করা যায় সেই ব্যাপারে স্বচ্ছতা থাকে।
- আপনার ক্রিটিকাল ইউজার জার্নিতে (CUJs) শারীরিক ইন্টার্যাকশন কমানোর সুযোগ খুঁজুন এবং আপনার প্রোডাক্ট টিমকে সেই পরিবর্তনগুলি সাজেস্ট করুন। যেমন, আপনার ডেলিভারি পরিষেবার জন্য সাধারণত স্বাক্ষরের প্রয়োজন হলে, সেটি এড়িয়ে যাওয়ার কোনও উপায় আছে কিনা দেখুন।
- আপনার CUJ যতটা সম্ভব সহজ এবং সাবলীল কিনা তা ডবল-চেক করুন এবং উন্নত করার কোনও সুযোগ দেখলে আপনার প্রোডাক্ট টিমকে পরিবর্তনের সাজেশন দিন।
- মোবাইলের জন্য ভালো ডিজাইনের নীতি পর্যালোচনা করুন এবং বিভিন্ন মোবাইল ডিভাইসে আপনার CUJ পরীক্ষা করে দেখুন যাতে কোনও সমস্যা না থাকে। যারা প্রায়শই ওয়েব ব্যবহার করেন না এবং হঠাৎ করে নিজেকে ওয়েবের উপর বেশি নির্ভর করতে দেখেন, তারা সম্ভবত মোবাইল ডিভাইস থেকে আপনার সাইট অ্যাক্সেস করছেন।
- যতটা সম্ভব রেসপন্সিভ ডিজাইন প্যাটার্ন ব্যবহার করার জন্য আপনার সাইট রিফ্যাক্টর করুন।
- আপনার ফর্মগুলি দক্ষ এবং ভালভাবে ডিজাইন করা কিনা তা নিশ্চিত করুন।
SEO
মানুষ স্বাস্থ্য ও চাকরি সম্পর্কিত গুরুত্বপূর্ণ তথ্য খুঁজছেন। আপনার সাইট যাতে সব সার্চ ইঞ্জিনে খুঁজে পাওয়া যায় তা নিশ্চিত করা গুরুত্বপূর্ণ। Lighthouse SEO অডিট আপনাকে প্রাথমিক সমস্যা শনাক্ত করতে সাহায্য করতে পারে। লেটেস্ট নির্দেশিকা ও আপডেটের জন্য সার্চ ইঞ্জিনের অফিসিয়াল ব্লগ ফলো করুন: Google, Bing, Baidu, DuckDuckGo, Yandex. COVID-19 সম্পর্কিত সাম্প্রতিক পোস্ট:
- Google Search-এ আপনার উপস্থিতির উপর প্রভাব কমিয়ে কীভাবে আপনার অনলাইন অ্যাক্টিভিটি পরিবর্তন করবেন
- ভার্চুয়াল, স্থগিত ও বাতিল করা ইভেন্টের জন্য নতুন প্রপার্টি
- COVID-19-এর জন্য বিশেষ ঘোষণার ক্ষেত্রে Bing schema.org মার্কআপ ব্যবহার করে
- COVID-19 সংক্রান্ত ঘোষণায় স্ট্রাকচার্ড ডেটা যোগ করা
- স্বাস্থ্য সংস্থাগুলিকে COVID-19 সম্পর্কিত তথ্য আরও অ্যাক্সেসযোগ্য করতে সাহায্য করা
- স্বাস্থ্য ও সরকারি সাইট সার্চ করার জন্য সাধারণ পেশাদার পদ্ধতি
আরও নির্দেশিকার জন্য খুঁজে নেওয়ার যোগ্য দেখুন।
পারফর্ম্যান্স
কিছু ISP (যেমন, ভারতে) বাড়িতে ইন্টারনেট ব্যবহারের ক্ষেত্রে তীব্র বৃদ্ধি লক্ষ্য করছে এবং এই বর্ধিত চাহিদা পূরণ করার মতো পরিকাঠামো তাদের নেই। এই ধরনের পরিস্থিতিতে আপনার কোনও ভুল না থাকলেও আপনার ওয়েবসাইটের স্পিড কমে যেতে পারে। আপনার লোড পারফর্ম্যান্স অপ্টিমাইজ করা, ব্যান্ডউইথ কমে যাওয়ার ফলে হওয়া সমস্যা থেকে মুক্তি পাওয়ার একটি উপায় হতে পারে। অন্যভাবে বলতে গেলে, আপনার পৃষ্ঠা লোড করার জন্য নেটওয়ার্কের মাধ্যমে পাঠানো বাইটের সংখ্যা কমিয়ে, আপনি কম ব্যান্ডউইথের কারণে পারফর্ম্যান্সে হওয়া প্রভাবকে প্রশমিত করতে পারেন।
- ছবি হল ওয়েবে ব্লটের এক নম্বর কারণ। আপনার ছবি অপ্টিমাইজ করার মাধ্যমে আপনি হয়ত আপনার ওয়েবসাইটের ব্যান্ডউইথের ব্যবহার উল্লেখযোগ্যভাবে কমাতে পারবেন। Squoosh হল একটি সহজ ওপেন সোর্স ইমেজ কম্প্রেশন টুল যা আপনাকে দ্রুত ছবি কম্প্রেস করতে সাহায্য করতে পারে।
- পারফর্ম্যান্স উন্নত করার সেরা সুযোগগুলি খুঁজে পেতে WebPageTest বা Lighthouse রান করুন।
- টেক্সট রিসোর্সের নেটওয়ার্ক সাইজ কমাতে টেক্সট কম্প্রেশন চালু করুন। এটি প্রায়ই পারফর্ম্যান্সের ক্ষেত্রে একটি সহজ জয় যা ন্যূনতম প্রযুক্তিগত বিনিয়োগের প্রয়োজন।
- অন্যান্য ডিপার্টমেন্টের সাথে কীভাবে সহযোগিতা করবেন এবং তাদের সম্মতি পাবেন তা জানতে ক্রস-ফাংশনালভাবে ওয়েবসাইটের স্পিড ঠিক করা পড়ুন।
- ছবির জন্য স্ট্যান্ডার্ডাইজড ধীরে ধীরে লোড করার পদ্ধতি ব্যবহার করুন যাতে এমন ছবির জন্য অনুরোধ কমানো যায় যা লোকজন হয়ত কখনই দেখতে পাবেন না। ব্রাউজার মানানসই ১০০% নয়, তবে ফিচারটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে বিবেচনা করা যেতে পারে। অন্য কথায়, কোনও নির্দিষ্ট ব্রাউজারে স্ট্যান্ডার্ডাইজড ধীরে ধীরে লোড করার সুবিধা না থাকলে, ছবিটি স্বাভাবিকভাবেই লোড হবে।
- আপনার সাইটে কোনও A/B টেস্টিং বা পছন্দমতো সাজানোর স্ক্রিপ্ট আছে কিনা তা চেক করুন যা আরও অ্যাসিঙ্ক্রোনাসভাবে লোড করা যেতে পারে বা স্ক্রিপ্টে কোনও নন-ক্রিটিক্যাল কার্যকারিতা আছে কিনা যা বন্ধ করা যেতে পারে। A/B টেস্টিং এবং পছন্দমতো সাজিয়ে নেওয়ার স্ক্রিপ্ট সাধারণত অ্যাসিঙ্ক্রোনাসভাবে সম্পূর্ণরূপে লোড করা যায় না কারণ পৃষ্ঠার কন্টেন্ট লোড হওয়ার আগে সেগুলি চালাতে হয়, তবে স্ক্রিপ্টের কিছু অংশ আরও অ্যাসিঙ্ক্রোনাসভাবে লোড করার কিছু সুযোগ থাকতে পারে। সিঙ্ক্রোনাস স্ক্রিপ্ট (রেন্ডার-ব্লকিং স্ক্রিপ্ট নামেও পরিচিত) এবং পৃষ্ঠা লোড হওয়ার সময়ের মধ্যে মৌলিক ট্রেড-অফ বুঝতে ক্রিটিক্যাল রেন্ডারিং পাথ দেখুন, এবং তারপরে পৃষ্ঠা লোড হওয়ার সময়ের চেয়ে রেন্ডার-ব্লকিং স্ক্রিপ্টকে অগ্রাধিকার দেবেন কিনা অথবা এর উল্টোটা করবেন কিনা তা ঠিক করুন।
- বেশিরভাগ ওয়েবসাইটের ক্ষেত্রে, মোট অনুরোধের প্রায় অর্ধেক থার্ড-পার্টি কোড থেকে আসে। আপনার সাইট চালানোর জন্য মৌলিক নয় এমন থার্ড-পার্টি কোড অপ্টিমাইজ করার অথবা সাময়িকভাবে সরিয়ে দেওয়া বা বন্ধ করার কথা বিবেচনা করুন।
- ফিচার রিলিজ করার থেকে অন্য কোনও কাজকে বেশি অগ্রাধিকার দিলে, এটিই হতে পারে ক্লিন-আপ করার
উপযুক্ত সময়। আপনার ট্যাগ ম্যানেজার থেকে ট্যাগ সরান, অপ্রয়োজনীয় CSS ও JS পরিষ্কার করুন এবং
পুরনো ফিচার বা কোড সরিয়ে দিন। Chrome DevTools-এর
কভারেজ ট্যাব
এবং Puppeteer-এর
Coverageক্লাস আপনাকে অব্যবহৃত কোড শনাক্ত করতে সাহায্য করতে পারে।
আরও নির্দেশিকার জন্য দ্রুত লোড হওয়ার সময় দেখুন।