پیش‌کار

قبل‌از جمع‌آوری سنجه‌های عملکرد برای ممیزی سایت، چندین بررسی وجود دارد که می‌توانید برای شناسایی اصلاحات آسان و حوزه‌های تمرکز انجام دهید.

بررسی اعتبار: معماری و کد

بدهی فنی را پرداخت کنید!

هرجا ممکن بود، اشکالات ساده را برطرف کنید و دارایی‌ها و کدهای غیرضروری را قبل‌از اندازه‌گیری عملکرد بردارید — اما حتماً سابقه‌ای از مشکلات و اصلاحات قبل و بعداز آن نگه دارید. این بهبودها همچنان می‌توانند بخشی از کار ممیزی شما باشند.

معماری و دارایی‌های سایت
آیا می‌توان به‌راحتی چیزی را از مخزن کد و از سایت حذف کرد، مانند صفحه‌های قدیمی بلااستفاده، محتوا، یا دارایی‌های دیگر؟ صفحه‌های یتیم، الگوهای زائد، تصاویر استفاده‌نشده، و کدها و کتابخانه‌های استفاده‌نشده را بررسی کنید.

خطاهای زمان اجرا
خطاهای گزارش‌شده در کنسول مرورگر را بررسی کنید. نباید هیچ :) وجود داشته باشد.

Linting
آیا در کد HTML،‏ CSS، یا JavaScript شما خطایی وجود دارد؟ ساختن linting در گردش کارتان می‌تواند به حفظ کیفیت کد و جلوگیری از بازگشت به عقب کمک کند. ما HTMLHint،‏ StyleLint و ESLint را توصیه می‌کنیم که می‌توانند به‌عنوان افزونه‌های ویرایشگر کد استفاده شوند یا از خط فرمان در فرایندهای گردش کار و ابزارهای ادغام مداوم مانند Travis اجرا شوند.

پیوندها و تصاویر خراب
ابزارهای زیادی برای آزمایش پیوندهای خراب در زمان ساخت و زمان اجرا وجود دارد، ازجمله «افزونه‌های Chrome» (این افزونه خوب است) و ابزارهای Node مانند بررسی‌کننده پیوند خراب.

افزایه‌ها
افزایه‌هایی مانند Flash و Silverlight می‌توانند خطر امنیتی داشته باشند، پشتیبانی از آن‌ها منسوخ شده است، و در تلفن همراه کار نمی‌کنند. از Lighthouse برای بررسی افزایه‌ها استفاده کنید.

آزمایش با دستگاه‌ها و زمینه‌های مختلف

هیچ چیز بهتر از این نیست که افراد واقعی سایت شما را با دستگاه‌های واقعی، مرورگرهای متعدد، و زمینه‌های اتصال مختلف آزمایش کنند.

برخی‌از این بررسی‌ها نسبتاً ذهنی هستند، اما می‌توانند مشکلاتی را که بر عملکرد درک‌شده تأثیر می‌گذارند شناسایی کنند. برای مثال، پیوندهای خراب باعث اتلاف وقت می‌شوند و «غیرپاسخگو» به‌نظر می‌رسند. نوشتار ناخوانا به‌کندی خوانده می‌شود.

آزمایش بین‌دستگاهی
اندازه‌های مختلف ناحیه نمایش و پنجره را امتحان کنید. از حداقل یک دستگاه همراه و یک رایانه رومیزی استفاده کنید. درصورت امکان، سایتتان را در دستگاه همراهی با مشخصات پایین و صفحه‌نمایش کوچک امتحان کنید. آیا نوشتار خوانا است؟ آیا تصویری خراب است؟ می‌توانید زوم کنید؟ آیا هدف‌های لمسی به‌اندازه کافی بزرگ هستند؟ آیا کند است؟ آیا ویژگی‌ای وجود دارد که پاسخ ندهد؟ از نتایج نماگرفت یا ویدیو بگیرید.

آزمایش چندسکویی
کدام پلاتفرم‌ها را هدف قرار می‌دهید؟ باید در مرورگرها و سیستم‌عامل‌هایی که کاربران شما اکنون و در آینده استفاده می‌کنند آزمایش کنید.

اتصال‌پذیری
آزمایش روی چند نوع شبکه هدف: متصل، wifi، و تلفن همراه. می‌توانید از ابزارهای مرورگر برای شبیه‌سازی انواع شرایط شبکه استفاده کنید.

دستگاه‌ها
حتماً سایتتان را در همان دستگاه‌هایی که کاربران استفاده می‌کنند امتحان کنید. عکس زیر همان صفحه را در دو تلفن مختلف نشان می‌دهد.

صفحه پست وبلاگ درحال اجرا در تلفن با مشخصات بالا و پایین

در صفحه‌نمایش بزرگ‌تر، نوشتار کوچک اما خوانا است. در صفحه‌نمایش کوچک‌تر، مرورگر چیدمان را به‌درستی ارائه می‌کند، اما نوشتار ناخوانا است، حتی وقتی بزرگ‌نمایی می‌شود. نمایشگر تار است و «سایه رنگ» دارد — سفید، سفید به‌نظر نمی‌رسد — و خوانایی محتوا کمتر شده است.

یافته‌های ساده‌ای مثل این می‌تواند بسیار مهم‌تر از داده‌های عملکردی مبهم باشد!

امتحان کردن واسط کاربر و تجربه کاربری

دسترس‌پذیری، کاربردپذیری، و خوانایی
برای اطمینان از اینکه محتوا و عملکرد سایت شما برای همه قابل‌دسترس است، باید تنوع کاربران خود را درک کنید. Lighthouse و ابزارهای دیگر مشکلات دسترس‌پذیری خاصی را آزمایش می‌کنند، اما هیچ‌چیز بهتر از آزمایش در دنیای واقعی نیست. خواندن، پیمایش، و وارد کردن داده را در سناریوهای مختلف امتحان کنید: برای مثال، در فضای باز زیر نور خورشید یا در قطار. از طیف وسیعی از دوستان، خانواده، و همکاران بخواهید سایتتان را امتحان کنند. سعی کنید محتوا را ازطریق صفحه‌خوان‌هایی مثل VoiceOver در Mac یا NVDA در Windows مصرف کنید.

می‌توانید درباره پیاده‌سازی و بررسی دسترس‌پذیری در دوره Udacity درباره دسترس‌پذیری و مقاله «مبانی وب» نحوه انجام بررسی دسترس‌پذیری اطلاعات بیشتری کسب کنید.

سوابق ممیزی دسترس‌پذیری‌تان را نگه دارید. احتمالاً می‌توانید بهبودهای ساده‌ای ایجاد کنید که برای همه کاربران مفید باشد.

مشکلات اساسی واسط کاربر و تجربه کاربر
تعاملاتی که آن‌طور که باید کار نمی‌کنند، عناصر سرریز در پنجره‌ها و دریچه‌های دید کوچک‌تر، هدف‌های ضربه بسیار کوچک، محتوای ناخوانا، پیمایش نامناسب… چندین صفحه را در سایت باز کنید، پیمایش و همه عملکردهای اصلی را امتحان کنید. سوابق را نگه دارید.

تصاویر، صدا، و ویدیو
برای محتوای سرریز، نسبت ابعادی نادرست، برش نامناسب، و مشکلات کیفیت آزمایش کنید.

آزمایش‌های واسط کاربر ذهنی
ممکن است همه این موارد مرتبط نباشند، اما تغییرات ساده می‌تواند بازسازی کد را آسان‌تر کند:

  • آیا وقتی سایت را باز می‌کنید، «چه کاری می‌توانم در اینجا انجام دهم؟» فوراً مشخص می‌شود؟
  • آیا به مصرف محتوا و دنبال کردن پیوندها جذب می‌شوید؟
  • آیا سلسله‌مراتب یا مسیرهای دیداری وجود دارد — یا همه چیز وزن دیداری یکسانی دارد؟
  • آیا چیدمان به‌هم‌ریخته است؟
  • آیا تعداد قلم‌ها خیلی زیاد است؟
  • آیا تصاویر یا محتوای دیگری وجود دارد که بتوان برداشت؟
  • طراحی محتوا به اندازه طراحی میانای کاربری مهم است. آیا محتوای نوشتاری و تصویری سایتتان برای زمینه‌های تلفن همراه و رایانه مناسب است؟ آیا چیزی را می‌توان حذف کرد؟ برای تلفن همراه بنویسید.