Search
Close this search box.

طراحی سایت واکنش گرا : 6 نکته برای ارتقای عملکرد

طراحی سایت واکنش گرا : 6 نکته برای ارتقای عملکرد

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

و اما چرا:

افراد در بازدید از سایتها، بدون توجه به وسیله ای مورد استفاده خود، انتظار تجاربی مشابه را دارند. بنابراین، اگر فردی از سایت شما بازدید میکند، درحالیکه برای وسیله مورد استفاده وی بهینه نشده باشد، سایت شما را ترک می کند و احتمال بازگشت مجددش به وبسایت بسیار ضعیف است.
Responsive-Website for smart phone-beloved marketing

پیشنهاد گوگل چیست؟

گوگل پیشنهادات و ابزارهایی را برای مدیران سایتها قرار می دهد تا بتوانند عملکرد سایتهای خود را در گوشی های هوشمند ارتقا دهند. اگر می خواهید از رتبه خوبی در گوگل برخوردار باشید و از بازدیدکنندگان خود امتیاز دریافت کنید ( وکیست که مایل به اینکار نباشد؟ )، لازم است به آن اهمیت دهید.

تحقیقات نشان داده است که تاخیر بیش از یک ثانیه میتواند رشته افکار کاربر را بگسلاند و به یک تجربه ناخوشایند در وی بدل شود.

پیشنهاد گوگل این است که لزومی ندارد سایت شما در این قالب زمانی بارگذاری شود. بلکه، با اولویت بندی محتوا در بخش حیاتی ( نیمه بالایی صفحه نخست سایت که در نگاه اول برای بازدید کننده قابل رؤیت است )، درحالیکه بقیه صفحه در حال بارگذاری است، میتوان به این هدف دست یافت.
Responsive design/Rendering google
گوگل پیشنهاد میکند که زمان پاسخ سرور شما باید کمتر از 200ms و 200ms دیگر برای بارگذاری بخش حیاتی وب باشد.
آنها همچنین پیشنهاد میکنند که:

  • تعداد Redirect ها باید به حداقل برسد.
  • تعداد رفت و برگشتها به render اولیه باید به حداقل برسد.
  • در بخش حیاتی، از بلاک کردن JavaScript و CSS پرهیز شود.
  • زمان render و اجرای JavaScript بهینه سازی شود.

اما در اینجا مسئله ای دیگر مطرح میشود:

صفحات وب بزرگتر میشوند.

هم اکنون، اندازه متوسط صفحه، ۲۴۰۶KB است و هر روز نیز بزرگتر میشود. این برای صاحبان سایتها و کاربران ناخوشایند است و دانستن این نکته که صفحات بزرگتر، عملکرد کندتر و هزینه های پهنای باند بالاتر را به همراه دارند، نیازی به تخصص ندارد.

اگرچه کاربران دسکتاپ نیز با تاثیر صفحات بزرگتر مواجه هستند، اما بیشترین تاثیر آن متوجه کاربران موبایل است. افراد از گوشی های خود به منظور کشف سریعتر و آسانتر اطلاعات استفاده میکنند، در حالیکه با افزایش روز افزون اندازه صفحات، زمان طولانی تری نیاز است تا صفحات وب روی گوشی بارگذاری شود؛ به ویژه زمانیکه از اینترنت 3G استفاده می کنید.

بیشتر بخوانید:  طراحی قالب وردپرس ( WordPress Theme ) به صورت بهینه

اخیراً، Guy Podjany، تست هایی را روی سایت هایی که از طراحی وب واکنش گرا ( RWD ) استفاده می کنند، انجام داده است. وی به این نتیجه رسیده است که بیشتر سایت های RWD، محتوای کامل صفحه را در طیف گسترده ای از دستگاه ها با رزولوشن های مختلف دانلود می کنند؛ علی رغم این حقیت که تفاوت هایی در محتوا و اندازه تصاویر در دستگاه هایی با اندازه های مختلف وجود دارد.

Responsive design
صفحات وب بزرگتر میشوند و تقاضا برای صفحاتی با بهینه سازی کامل برای تمام دستگاه ها افزایش پیدا میکند. بنابراین، این نکته حائز اهمیت است که طراحان و توسعه دهنده گان سایت ها، عملکرد را اولویت بندی کنند و شما نیز در پروژه خود، بودجه ای را به این منظور اختصاص دهید. هم اکنون نگاهی می اندازیم به اینکه چگونه میتوانید از پس اینکار برآیید:

بودجه عملکرد را تعیین کنید.

بودجه عملکرد، چهارچوبی از پیش تعیین شده برای سرعت و اندازه کلی صفحه است و همانند بودجه مالی، کلاهی برای پوشش دادن هزینه ها، که در اینجا اندازه صفحه است، محسوب میشود. بدین معنا که اگر نیاز به اضافه کردن و یا اصلاح صفحات و یا اجزای جدید باشد، ابتدا باید مطمئن شوید فضای کافی در “بودجه” وجود دارد.

اگر دریافتید که اضافه کردن جز جدید به معنای فراتر رفتن از چهارچوب بودجه است، باید تصمیم به بهینه سازی مؤلفه موجود به گونه ای که آسانتر یا سریعتر باشد، برداشتن مؤلفه، و یا اصلاً اضافه نکردن مؤلفه جدید بگیرید.

بهینه سازی تصاویر در طراحی وب واکنش گرا

یکی از بزرگترین مشکلات در صفحات بزرگ وب و بارگذاری آهسته ی صفحه در وب سایت های واکنش گرا، تصاویر هستند. به ویژه، با افزایش روزافزون “دستگاههای رتینا”، افراد خواهان تصاویری با رزولوشن بالاتر در سایت های خود هستند و صفحات نباید با فایل های تصویری 1mb دچار بهم ریختگی شوند.

بهینه سازی تصاویر در طراحی وب واکنش گرا/طراحی رسپانسیو
برای این منظور، میتوانید از سرویسی مانند تصاویر انطباق پذیر استفاده کنید که یک اسکریپت  PHP بسیار کوچک است که اندازه صفحه را تشخیص داده و بصورت خودکار اندازه تصویر را تغییر داده و نسخه کوچک شده آن را در اختیار قرار می دهد. این نرم افزار را میتوان شخصی سازی کرد؛ بنابراین، می توانید کیفیت تصاویر و کشینگ مرورگر را تنظیم کنید.

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

بیشتر بخوانید:  چگونه سیستم مدیریت محتوای (CMS) مناسب را انتخاب کنیم؟

ممکن ساختن فشرده سازی

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

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

اجزای غیرضروری صفحات را بردارید.

درک این مسئله حائز اهمیت است که کاربران از اجزای مختلف صفحه شما چگونه استفاده میکنند؛ چرا که اینکار تعیین اجزائی را که باید به منظور ارتقای عملکرد حذف شوند، آسانتر میکند.
در برخی صفحات، میتوانید به حذف کردن درخواستهای شخص ثالث مانند دکمه های اشتراک گذاری اجتماعی فکر کنید. Zurblog تاکید میکند که برای ” … بارگذاری فیس بوک، تویتر، و دکمه های رسانه های اجتماعی گوگل برای 19 درخواست، 246.7k  پهنای باند لازم است.”

اگر برای یک صفحه واکنش گرا٬ به اشتراک گذاری در شبکه های اجتماعی بعنوان عنصر اصلی برای جذب ترافیک نیست، برداشتن آنها معقولانه به نظر میرسد.

هاستینگ صحیح را انتخاب کنید.

کیفیت پایین سرورهای مورد استفاده میتواند عملکرد وب سایت را به میزان زیادی کاهش دهد. طیف گسترده ای از پکیج های هاستینگ موجود است که دارای مزایا و قیمت های متفاوت هستند و از هاستینگ های مشترک ارزان چند دلاری در ماه تا سرویس های ابری و سرورهای کاملاً مدیریت شده اختصاصی صدها دلاری را شامل میشود.

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

بیشتر بخوانید:  چگونه یک عنوان خوب برای مقاله بنویسیم؟

اگر هنوز هم در مورد ارزش سرمایه گذاری در راه اندازی یک سرور قوی تر مطمئن نیستید، در نظر داشته باشید که : گوگل از سرعت صفحه بعنوان یک فاکتور رتبه بندی استفاده می کند و بین زمان رسیدن به اولین بایت ( TTFB ) و رتبه بندی های جستجو همبستگی وجود دارد.

طراحی سایت واکنش گرا : 6 نکته برای ارتقای عملکرد/طراحی ریسپانسیو
سایتهای دارای TTFB پایین تر، از سرعت بالاتر برخوردارند و رتبه بهتری در مقایسه با سایت های کندتر دارای TTFB بالاتر دارند. مهمتر از همه اینها، هر ثانیه ی اضافی در بارگذاری وب سایت، نرخ تبدیل را به میزان 7% کاهش می دهد.

از یک شبکه تحویل محتوا برای محتوای ایستا استفاده کنید.

شبکه تحویل محتوا ( CDN )، شبکه ای از سرورهای مختلف است که محتوای شما را در سرورها پخش میکند. اینکار عملکرد را از طریق تحویل محتوا بر اساس نزدیکی کاربران به سرورها که به وسیله تعداد گره ها تعیین میشود، ارتقا می دهد.

برای مثال، اگر یک CDN، سرورهایی در لندن، تگزاس و چین دارد، کاربری در هند محتوای سرور واقع در چین را خواهد دید؛ درحالیکه محتوا از طریق سرور لندن به کاربری از پاریس تحویل داده میشود. هنگام انتخاب شبکه تحویل محتوا، افراد فاکتورهایی مانند سرعت و پهنای باند را در نظر می گیرند.

بنابراین، برای به حداکثر رساندن سرعت، باید اطمینان حاصل کنید که ارائه دهنده ی شما، سروری نزدیک به اکثر مخاطبانتان دارد. برای مثال، اگر مخاطبین شما عمدتاً در UK مستقر هستند، CDN شما باید سرورهایی در UK، فرانسه، یا ایرلند داشته باشد.

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

زمانی که این فرایند را طی و دستورالعمل های گوگل را دنبال کردید، سایت خود را با PageSpeed Tool محک بزنید. این ابزار، کیفیت عملکرد سایت را به شما نشان می دهد و هر پیشنهادی را که برای پیشرفت بیشتر لازم است، به شما ارائه می دهد. 

با طی کردن این مراحل و دنبال کردن راهنمائی هایی که گوگل ارائه کرده است، سایت واکنش گرای شما از لحاظ عملکرد بهینه خواهد شد و تجربه ای عالی را در اختیار کاربران قرار می دهد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *