Performance နှင့် Accessibility

ကိုယ့် laptop နဲ့ Wi‑Fi ကောင်းကောင်းပေါ်မှာ မြန်တာတစ်ခုတည်း မလုံလောက်ပါဘူး။ ဖုန်းအဟောင်း၊ network နှေးတဲ့ user နဲ့ mouse မသုံးနိုင်တဲ့သူကိုပါ စဉ်းစားမှ production app ဖြစ်ပါတယ်။

နားလည်ထားရမယ့် အချက်

Server Component ကို default ထားပြီး interactive leaf ကိုသာ Client Component လုပ်တာက JavaScript လျှော့တဲ့အကောင်းဆုံးအစဖြစ်ပါတယ်။ next/image၊ next/font၊ route code splitting နဲ့ streaming ကိုသုံးပါ။ Semantic heading order၊ label ပါသော form၊ button အစစ်၊ visible focus၊ လုံလောက်သော color contrast နဲ့ keyboard navigation ကိုစစ်ပါ။ Performance တိုင်းတာမှုကို Lighthouse တစ်ခုတည်းမယုံဘဲ production field data နဲ့ Core Web Vitals ကိုလည်းကြည့်ပါ။

အတူတူ စမ်းရေးကြည့်မယ်

"use client";
import { useState } from "react";

export function SaveButton() {
  const [status, setStatus] = useState("idle");
  return (
    <div>
      <button type="button" onClick={() => setStatus("saved")}>
        မှတ်စုသိမ်းမယ်
      </button>
      <p aria-live="polite">
        {status === "saved" ? "သိမ်းပြီးပါပြီ" : ""}
      </p>
    </div>
  );
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

Button က div onClick မဟုတ်ဘဲ HTML button ဖြစ်လို့ keyboard၊ focus နဲ့ screen reader behavior အခြေခံရပါတယ်။ aria-live က save status ပြောင်းတာကို screen reader သို့အသိပေးပါတယ်။

Mouse နှင့် keyboard နှစ်မျိုးလုံးသုံးနိုင်ပြီး save status ကို assistive technology သိနိုင်မည်။

Next.js — Production Checklist — Next.js