طراحی سایت حرفه ای؛ ۲۰ معیار برای سنجیدن کیفیت هر سایت
طراحی سایت حرفه ای یعنی ساختن سایتی که سریع باز شود، روی هر دستگاهی درست کار کند، امن باشد، برای گوگل قابل‌فهم باشد و بازدیدکننده را بدون سردرگمی به هدف کسبوکار (تماس، خرید یا ثبت‌نام) برساند. ظاهر زیبا فقط یکی از این معیارهاست؛ سایت حرفهای با عدد و تست سنجیده می‌شود، نه با سلیقه.
در این راهنما یک چکلیست امتیازی ۲۰ معیاره می‌گیرید که هر معیار روش تست رایگان و وزن مشخص دارد. با همین جدول می‌توانید سایت فعلی خودتان یا پیشنهاد یک شرکت طراحی را در کمتر از یک ساعت ارزیابی کنید.
نویسنده: تیم siloow (سیلو سولوشن) — آخرین به‌روزرسانی: آبان ۱۴۰۵
سایت حرفه ای چیست و با یک سایت معمولی چه تفاوتی دارد؟
سایت حرفهای سایتی است که در پنج محور «عملکرد، تجربه کاربری، امنیت، سئو و اعتمادسازی» حداقل‌های قابل‌اندازه‌گیری را پاس میکند. سایت معمولی معمولاً فقط در ظاهر کامل است و در تست سرعت، موبایل یا دسترس‌پذیری رد می‌شود.
اگر هنوز با مفاهیم پایه آشنا نیستید، ابتدا راهنمای کامل طراحی سایت را بخوانید؛ این مقاله روی «کیفیت» تمرکز دارد، نه روی «چگونه ساختن». تفاوت اصلی سایت حرفهای و معمولی در این است که سایت حرفهای از ابتدا با هدف تجاری مشخص طراحی می‌شود و هر بخش آن (از منو تا فرم تماس) دلیل وجود دارد.
- سایت معمولی: قالب آماده با رنگ‌های عوض‌شده، تصاویر سنگین، متن عمومی و فرمی که کسی جوابش را نمی‌دهد.
- سایت حرفهای: ساختار صفحات بر اساس نیاز مشتری، محتوای اختصاصی، سرعت سنجیده‌شده، سئوی فنی درست و مسیر تبدیل روشن.
- سایت استاندارد: سایتی که دست‌کم با استانداردهای وب (HTML معتبر، HTTPS، دسترس‌پذیری پایه) سازگار است؛ استاندارد بودن شرط لازم حرفهای بودن است، نه شرط کافی.
ویژگی های سایت حرفه ای کدام‌اند؟ جدول ۲۰ معیار امتیازی
ویژگی های سایت حرفه ای را می‌توان در ۲۰ معیار قابلتست خلاصه کرد که مجموع وزن آن‌ها ۱۰۰ امتیاز است. برای هر معیار، اگر کامل پاس شد امتیاز کامل، اگر نیمه‌کاره بود نصف امتیاز و اگر رد شد صفر بدهید.
| # | معیار | روش تست | وزن |
|---|---|---|---|
| ۱ | LCP کمتر یا مساوی ۲.۵ ثانیه | PageSpeed Insights (داده کاربران واقعی) | ۸ |
| ۲ | INP کمتر از ۲۰۰ میلی‌ثانیه | PageSpeed Insights / Search Console | ۵ |
| ۳ | CLS کمتر از ۰.۱ (پرش نداشتن صفحه) | PageSpeed Insights | ۵ |
| ۴ | نمایش درست در موبایل، تبلت و دسکتاپ | حالت Device در Chrome DevTools + گوشی واقعی | ۸ |
| ۵ | HTTPS فعال و بدون خطای محتوای ناامن | نماد قفل مرورگر، تب Security در DevTools | ۶ |
| ۶ | به‌روز بودن هسته، قالب و افزونه‌ها | پیشخوان وردپرس یا گزارش پشتیبان | ۴ |
| ۷ | بکاپ خودکار و تست‌شده | پرسیدن از پشتیبان: آخرین بازگردانی کی تست شد؟ | ۴ |
| ۸ | یک H1 و ساختار منطقی تیترها | افزونه HeadingsMap یا View Source | ۴ |
| ۹ | عنوان و توضیحات متا یکتا برای هر صفحه | Rank Math / Search Console | ۴ |
| ۱۰ | نقشه سایت XML و ایندکس سالم | گزارش Pages در Search Console | ۶ |
| ۱۱ | URL خوانا و فارسی/انگلیسی یکدست | بررسی چند URL در نوار آدرس | ۳ |
| ۱۲ | کنتراست متن حداقل ۴.۵ به ۱ | ابزار Contrast در DevTools | ۴ |
| ۱۳ | اهداف لمسی حداقل ۲۴ در ۲۴ پیکسل CSS | تست با انگشت روی گوشی + Lighthouse | ۳ |
| ۱۴ | متن alt معنادار برای تصاویر | Lighthouse بخش Accessibility | ۳ |
| ۱۵ | منوی ساده با حداکثر ۷ آیتم اصلی | تست پنج‌ثانیه‌ای با یک کاربر تازه | ۴ |
| ۱۶ | محتوای اختصاصی و به‌روز (نه کپی) | جستجوی یک جمله از متن در گوگل داخل “” | ۷ |
| ۱۷ | اطلاعات تماس، آدرس و درباره ما شفاف | بررسی فوتر و صفحه تماس | ۵ |
| ۱۸ | نشانه‌های اعتماد (نمونه‌کار واقعی، مجوزها) | بررسی صفحه اصلی و صفحه خدمات | ۵ |
| ۱۹ | دعوت به اقدام (CTA) روشن در هر صفحه | اسکرول صفحه اصلی روی موبایل | ۵ |
| ۲۰ | فرم‌ها کار می‌کنند و پاسخ داده می‌شوند | ارسال یک فرم آزمایشی و سنجیدن زمان پاسخ | ۷ |
تفسیر امتیاز: بالای ۸۵ یعنی سایت در سطح حرفهای است و فقط بهینه‌سازی دوره‌ای لازم دارد؛ ۶۵ تا ۸۵ یعنی پایه درست است ولی چند ضعف جدی دارد؛ زیر ۶۵ یعنی بازطراحی یا دست‌کم بازسازی فنی را جدی بگیرید.
اصول طراحی سایت در بخش سرعت و عملکرد چیست؟
اصول طراحی سایت در بخش عملکرد به سه معیار Core Web Vitals گوگل خلاصه می‌شود: LCP حداکثر ۲.۵ ثانیه، INP کمتر از ۲۰۰ میلی‌ثانیه و CLS کمتر از ۰.۱ برای ۷۵ درصد بازدیدها. این آستانه‌ها را گوگل در مستندات رسمی web.dev اعلام کرده و از مارس ۲۰۲۴ معیار INP جایگزین FID شده است.
نکته مهم این است که نمره سبز Lighthouse روی کامپیوتر شما با تجربه کاربر واقعی یکی نیست. در PageSpeed Insights اول بخش «Discover what your real users are experiencing» را ببینید؛ این داده میدانی (Field Data) است و همان چیزی است که گوگل در ارزیابی تجربه صفحه استفاده میکند. اگر سایت شما بازدید کافی ندارد و این بخش خالی است، از داده آزمایشگاهی (Lab) به‌عنوان تخمین استفاده کنید.
رایج‌ترین دلایل کندی در سایت‌های ایرانی
- تصاویر اسلایدر چند مگابایتی در بالای صفحه که LCP را خراب می‌کنند.
- لود فونت فارسی بدون
font-display: swapو بدون پیش‌بارگذاری. - ده‌ها افزونه فعال که هرکدام CSS و JS جداگانه اضافه می‌کنند.
- هاست اشتراکی ضعیف با زمان پاسخ اولیه (TTFB) بالا.
نکته: تصویر اصلی بالای صفحه را هرگز lazy load نکنید. طبق راهنمای بهینه‌سازی LCP در web.dev، تصویری که احتمالاً عنصر LCP است باید با
fetchpriority="high"زودتر بارگذاری شود.
تجربه کاربری و دسترس‌پذیری در طراحی سایت حرفه ای چطور سنجیده می‌شود؟
تجربه کاربری در طراحی سایت حرفه ای با یک پرسش ساده سنجیده می‌شود: آیا کاربر تازه‌وارد ظرف چند ثانیه می‌فهمد این سایت چه میکند و قدم بعدی چیست؟ دسترس‌پذیری هم با معیارهای مشخص WCAG سنجیده می‌شود که توسط W3C منتشر شده است.
دو حداقل عددی که به‌راحتی تست می‌شوند: کنتراست متن معمولی حداقل ۴.۵ به ۱ (معیار ۱.۴.۳ در WCAG) و اندازه اهداف لمسی حداقل ۲۴ در ۲۴ پیکسل CSS در سطح AA نسخه ۲.۲. متن خاکستری کم‌رنگ روی پس‌زمینه سفید، که در قالب‌های آماده زیاد دیده می‌شود، معمولاً همین تست اول را رد میکند.
برای سایت‌های فارسی چند نکته اختصاصی هم وجود دارد: جهت راست‌به‌چپ در همه اجزا (اسلایدر، فلش‌ها، آیکون بازگشت)، فاصله خطوط کافی برای فونت فارسی (معمولاً بیشتر از متن لاتین) و استفاده از اعداد فارسی در متن. اگر می‌خواهید ساختار درست تصویر و متن جایگزین را از پایه یاد بگیرید، قسمت درج تصویر با تگ img و متن alt در دوره کدپرس دقیقاً همین را آموزش میدهد.
امنیت و پایداری: سایت استاندارد چه حداقل‌هایی باید داشته باشد؟
سایت استاندارد از نظر امنیت دست‌کم باید HTTPS کامل، نرم‌افزار به‌روز، بکاپ منظم و دسترسی‌های مدیریتی محدود داشته باشد. این چهار مورد ساده بیشترین سهم را در جلوگیری از هک شدن سایت‌های وردپرسی دارند.
- HTTPS در همه صفحات: گواهی معتبر، ریدایرکت خودکار http به https و نبود منابع ناامن (Mixed Content).
- به‌روزرسانی منظم: هسته وردپرس، قالب و افزونه‌ها. وردپرس در صفحه نیازمندی‌های رسمی نسخه PHP ۸.۳ یا بالاتر را توصیه میکند.
- بکاپ خارج از سرور: بکاپی که روی همان هاست بماند، در صورت مشکل هاست از دست می‌رود.
- حساب‌های مدیریتی محدود: هر نفر حساب خودش را داشته باشد و رمزها قوی و جدا باشند.
پایداری بعد از تحویل هم بخشی از کیفیت است. سایتی که شش ماه بعد از راه‌اندازی به‌روز نشده، دیگر سایت حرفهای نیست. جزئیات این بخش را در مقاله پشتیبانی سایت چیست توضیح داده‌ایم.
کیفیت سایت از نظر سئو و محتوا چطور بررسی می‌شود؟
کیفیت سایت از نظر سئو یعنی گوگل بتواند صفحات را بخزد، بفهمد و ایندکس کند، و محتوا واقعاً به سؤال کاربر پاسخ دهد. گزارش Pages در Search Console سریع‌ترین راه برای دیدن مشکلات ایندکس است.
از دید فنی، هر صفحه باید یک تیتر H1، عنوان و توضیحات متای یکتا، URL خوانا و لینک داخلی به صفحات مرتبط داشته باشد. چکلیست کامل این موارد را در چکلیست ۲۵ مرحله‌ای سئو داخلی آورده‌ایم. از دید محتوا، راهنمای محتوای مفید گوگل صریحاً می‌گوید محتوا باید برای انسان نوشته شود و تجربه و تخصص واقعی را نشان دهد؛ متن عمومی کپی‌شده از رقبا این معیار را رد میکند.
| سؤال ارزیابی | پاسخ سایت حرفهای | پاسخ سایت ضعیف |
|---|---|---|
| چند صفحه ایندکس شده؟ | نزدیک به تعداد صفحات مهم | خیلی کمتر یا پر از صفحات بی‌ارزش (تگ، آرشیو خالی) |
| آیا صفحات خدمات متن اختصاصی دارند؟ | بله، با جزئیات، سؤالات رایج و نمونه | دو خط متن عمومی |
| داده ساختاریافته دارد؟ | بله، متناسب با نوع صفحه | ندارد یا خطا دارد |
| تاریخ آخرین به‌روزرسانی محتوا؟ | کمتر از یک سال | نامشخص یا چندساله |
اعتماد و تبدیل؛ کدام نشانه‌ها سایت را قابل‌اعتماد می‌کنند؟
سایت قابل‌اعتماد سایتی است که هویت کسبوکار، راه ارتباط و سابقه کار را شفاف نشان میدهد. کاربری که نتواند بفهمد پشت سایت چه کسی است، فرم را پر نمی‌کند.
- صفحه «درباره ما» با معرفی واقعی تیم یا مجموعه، نه متن کلی.
- شماره تماس، آدرس و ساعت پاسخگویی در فوتر و صفحه تماس.
- نمونه‌کار واقعی با توضیح مسئله و راه‌حل، نه فقط تصویر.
- برای فروشگاه اینترنتی: نماد اعتماد الکترونیکی، قوانین بازگشت کالا و هزینه ارسال شفاف.
- یک دعوت به اقدام اصلی در هر صفحه («درخواست مشاوره»، «مشاهده قیمت») به‌جای پنج دکمه رقیب.
اگر سایت شما شرکتی است، فهرست کامل امکانات لازم را در مقاله ۲۵ امکان ضروری سایت شرکتی ببینید.
چطور با این چکلیست سایت خودم را امتیاز بدهم؟
برای امتیازدهی، ابتدا سه صفحه نماینده انتخاب کنید (صفحه اصلی، یک صفحه خدمات یا محصول، یک مقاله) و همه ۲۰ معیار را روی هر سه بسنجید؛ امتیاز نهایی، میانگین سه صفحه است.
- آدرس هر صفحه را در PageSpeed Insights وارد کنید و معیارهای ۱ تا ۳ را ثبت کنید.
- در Chrome کلید F12 را بزنید، حالت Device را فعال کنید و چند عرض موبایل را امتحان کنید (معیار ۴، ۱۲ و ۱۳).
- در Search Console گزارش Pages و Sitemaps را ببینید (معیار ۹ و ۱۰).
- یک فرم آزمایشی بفرستید و زمان پاسخ را بنویسید (معیار ۲۰).
- از یک فرد آشنا که سایت را ندیده بخواهید در پنج ثانیه بگوید سایت چه میکند (معیار ۱۵ و ۱۹).
محدودیت‌های این چکلیست
این چکلیست برای سایت‌های شرکتی، خدماتی و فروشگاه‌های کوچک و متوسط طراحی شده است. برای وب‌اپلیکیشن‌ها و پنل‌های مدیریتی معیارهایی مثل امنیت سطح دسترسی، کارایی پایگاه داده و تست خودکار اهمیت بیشتری دارند و وزن‌ها باید تغییر کند؛ تفاوت این دو نوع پروژه را در تفاوت سایت و وب اپلیکیشن توضیح داده‌ایم. همچنین امتیاز بالا جای تحلیل بازار و رقبا را نمی‌گیرد؛ سایتی که فنی بی‌نقص است ولی پیام نامشخصی دارد، باز هم مشتری جذب نمی‌کند.
از تجربه تیم siloow
در پروژه‌های بازطراحی که تیم siloow روی قالب‌های اختصاصی وردپرس و المنتور انجام داده، الگوی تکرارشونده این بوده که مشکل اصلی سایت قبلی تقریباً هیچ‌وقت «زشت بودن» نبوده است؛ مشکل در سرعت موبایل، فرم‌هایی که ایمیلشان به جایی نمی‌رسید و صفحات خدماتی بود که فقط دو خط متن داشتند. یاد گرفتیم قبل از هر پیشنهاد طراحی، همین ۲۰ معیار را روی سایت فعلی اجرا کنیم؛ نتیجه‌اش این است که کارفرما دقیقاً می‌بیند پول را کجا خرج میکند و بخشی از کار گاهی بدون بازطراحی کامل حل می‌شود.
جمع‌بندی
- طراحی سایت حرفه ای با تست سنجیده می‌شود: سرعت، موبایل، امنیت، سئو، اعتماد و تبدیل.
- آستانه‌های Core Web Vitals (LCP ≤ ۲.۵ ثانیه، INP کمتر از ۲۰۰ میلی‌ثانیه، CLS کمتر از ۰.۱) پایه عددی ارزیابی عملکردند.
- کنتراست ۴.۵ به ۱ و اهداف لمسی ۲۴ پیکسلی ساده‌ترین تست‌های دسترس‌پذیری هستند.
- امتیاز زیر ۶۵ در جدول بالا یعنی بازسازی فنی یا بازطراحی را جدی بگیرید.
اگر می‌خواهید سایت شما با همین معیارها ساخته یا ارزیابی شود، خدمات طراحی سایت siloow را ببینید. برای برآورد بودجه هم مقاله هزینه طراحی سایت در ۱۴۰۵ عوامل قیمت را توضیح داده است.
منابع
- Web Vitals — web.dev
- Understanding SC 1.4.3 Contrast (Minimum) — W3C
- Creating helpful, reliable, people-first content — Google Search Central
- WordPress Requirements — WordPress.org
سوالات متداول طراحی سایت حرفه ای
سایت حرفه ای چه ویژگیهایی دارد؟
سایت حرفهای سریع است (LCP حداکثر ۲.۵ ثانیه)، روی موبایل درست کار میکند، HTTPS و بکاپ دارد، ساختار سئوی درست دارد و هویت کسبوکار و راه تماس را شفاف نشان میدهد. جدول ۲۰ معیاره این مقاله همه این ویژگیها را قابلتست کرده است.
آیا سایت ساخته‌شده با قالب آماده می‌تواند حرفه ای باشد؟
بله، اگر قالب سبک انتخاب شود، محتوا اختصاصی باشد و معیارهای سرعت و دسترس‌پذیری را پاس کند. مشکل قالب‌های آماده معمولاً حجم اضافه و امکانات بی‌استفاده است، نه خود قالب.
چطور بفهمم سایتم از نظر سرعت استاندارد است؟
آدرس صفحه را در PageSpeed Insights وارد کنید و بخش داده کاربران واقعی را ببینید. اگر LCP حداکثر ۲.۵ ثانیه، INP کمتر از ۲۰۰ میلی‌ثانیه و CLS کمتر از ۰.۱ باشد، صفحه در Core Web Vitals قبول است.
طراحی سایت حرفه ای چقدر زمان می‌برد؟
زمان به نوع سایت، تعداد صفحات و آماده بودن محتوا بستگی دارد. یک سایت شرکتی معمولاً چند هفته و یک فروشگاه یا سایت اختصاصی زمان بیشتری لازم دارد؛ تأخیر اصلی اغلب در آماده‌سازی محتوا توسط کارفرماست.
هر چند وقت یک بار باید کیفیت سایت را ارزیابی کنیم؟
پیشنهاد عملی این است که چکلیست را هر سه تا شش ماه و بعد از هر تغییر بزرگ (افزونه جدید، تغییر قالب، کمپین تبلیغاتی) اجرا کنید. گزارش Core Web Vitals در Search Console را هم ماهانه ببینید.