اهمیت طراحی سایت در سرعت بارگذاری سایت و تجربه کاربری

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

کارایی و طراحی همان تجربه کاربری هستند. وقتی طراحی سایت انجام می‌شود، بسیاری از اجزا و اصول تجربه کاربری در آن مدنظر گرفته می‌شود: طرح یا layout، سلسله مراتب بصری یا Visual Hierarchy، بصری بودن یا Intuitiveness، راحتی در استفاده یا Ease of Use و … . تجربه‌ای که بازدیدکننده از وبسایت شما بدست می‌آورد، تعیین‌کننده‌ی میزان اعتماد کاربر به برند است. اینکه چه میزان مجددا از وبسایت بازدید می‌کند و تا چه قدر آن را با دیگران به اشتراک می‌گذارد. همانطور که در بالا گفته شد و همچنین در ادامه نیز به آن پرداخته شده است، بخش بزرگی از تجربه‌ی کاربر در این خصوص را کارایی و سرعت لود تشکیل می‌دهد اما در این بخش به عامل مهم دیگر یعنی دیزاین و بحث زیبایی شناختی به صورت مختصر پرداخته می‌شود.

 

طول وقفه‌ای که کاربر پس از ورود به سایت و کلیک بر روی یک لینک، دکمه، انتخاب از منوی تاشو و … تا زمان پاسخگویی سرور به آن کلیک و درخواست با آن مواجه می‌شود، بر روی رفتار و نگرش او نسبت به سایت اثر می‌گذارد. اگر این وقفه یا Delay کمتر از ۱۰۰ میلی‌ثانیه باشد، کاربر آن را احساس نمی‌کند. در صورتی که وقفه ۱۰۰ الی ۳۰۰ میلی‌ثانیه باشد، به دلیل کوتاه بودن، این میزان وقفه قابل پذیرش است. چنانچه وقفه بین ۳۰۰ الی ۱۰۰۰ میلی‌ثانیه به طول انجامد، کاربر ذهنش سمت استدلال وجود یک ماشین به عنوان زیرساخت میزبانی در حال پردازش می‌رود و مهم‌تر از آن اگر وقفه بیش از ۱۰۰۰ میلی‌ثانیه‌ (۱ ثانیه) باشد، ذهن کاربر سراغ سایر محتوا می‌رود (Content-switch).

 

این اعداد مهم هستند زیرا ما وبسایت‌ها را با محتوای غنی می‌سازیم: پر از عناصر داینامیک، فایل‌های جاوا اسکریپت حجیم، انیمیشن یا کلیپ‌های زیبا، تصاویر گرافیکی پیشرفته، متن‌های مهم و … . بسیاری از طراحان وبسایت‌های واکنش‌گرا یا همان ریسپانسیو، با وجود ایجاد سایزهای کوچک و بزرگ مناسب برای نمایش وبسایت در دستگاه‌های مختلف، از تغییر سایز تصاویر و کم حجم کردن آن‌ها در سایزهای کوچک‌تر امتناع می‌کنند و این مورد یعنی استفاده از المان‌های حجیم‌،‌ موجب افزایش زمان بارگذاری سایت می‌شود. دیزاینرها و شرکت های طراحی سایت حرفه ای از اهمیت Re-format کردن تصاویر و مدیریت نحوه نمایش محتوا اطلاع دارند و انجام پروژه طراحی سایت بهینه توسط آن‌ها نهایتاً موجب تاثیر مثبت گردش کار طراحی سایت (Design Workflow) بر روی کارایی و کاهش زمان لود وبسایت می‌شود.

 

حال بیاییم به صورت عملی و ساده نگاهی به تاثیر مستقیم المان‌های اولیه طراحی کنیم.  در فاز اول لازم است موارد زیر تعیین شوند:

رنگ‌ها و Color Gradients: این مورد بر روی انتخاب نوع فرمت تصویر، میزان شفافیت (Transparency)، تعداد Spirite های مورد نیاز جهت ایجاد و میزان استفاده از CSS3 تاثیر می‌گذارد.

طرح یا Layouts: این مورد بر روی ساختار و سلسله مراتب HTML و ID و Classها و محتویات CSS تاثیر مستقیم دارد.

تایپوگرافی: این مورد بر روی وزن و حجم و تعداد فایل‌های فونت مورد استفاده تاثیرگذار است.

الگوهای طراحی: این مورد بر نحوه نمایش و اطلاع از فایل‌های قابل کش کردن تاثیر می‌گذارد. همچنین بر نحوه لود Assets و میزان آسانی و قابلیت ویرایش سایت توسط طراحان و توسعه دهندگان بعدی تاثیرگذار است.

این قبیل تصمیمات اولیه که در مراحل اولیه تعریف Product Workflow مشخص می‌شود، تاثیر بسیار زیادی بر زمان لود صفحات طراحی شده وبسایت دارد.