عوامل افزایش سرعت سایت در طراحی سایت چیست؟

چطور سایت خود را طراحی کنید تا بسیار سریع باشد؟

[وقتی که بهینه سازی، مینیمالیسم و بارگذاری سنگین جواب می دهد!!!]

امروزه افزایش سرعت بارگذاری سایت بسیار حیاتی  – و شاید حیاتی ترین عنصر طراحی وب سایت – است.
در حال حاضر بیش از هم زمان دیگری، سرعت عصاره و ذات طراحی سایت به شمار می آید. در سال ۲۰۱۶، بازدیدکنندگان سایت شما خواهان تجربه سرسام آوری از سرعت سایت هستند، و اگر شما افزایش سرعت وب سایت را به آنها تقدیم، آنها به جاهای دیگر که می توانند خواهد رفت. امروز همینگونه است که گفته شد، چنانکه تمایل بشر به سمت سایت های سریعتر، سریعتر و هرچه سریعتر می رود.

طراحانی که به طور مداوم روند طراحی وب سایت مورد آزمون قرار می دهند تا مطمئن شوند مشتریانشان سایت های سریع دارند، از طراحانی که چنین روندی در کار خود ندارد ارزش بیشتری پیدا می کنند. خُب، وب سایت سریعی که می خواهید چه هست؟ چطور می توانیم از لحاظ کمی و در قالب اعداد و ارقام آن را بیان کنیم؟

 

با نگاهی به داده ها، مطالعات بسیاری وجود دارند که مطالب زیر را بیان می کنند:

• ۴۷% از کاربران سایتی می خواهند که در ۲ ثانیه یا کمتر load شود. (طبق مطالعات Akamai)
• خریداران E-commerce سایتی می خواهند که در ۲ ثانیه یا کمتر load شود، اما گوگل به دنبال زیر نیم ثانیه است. (طبق Google Webmasters)
• ۵۷% از کاربران موبایل اگر load سایتی بیش از ۳ ثانیه طول بکشد، از سایت بیرون می روند. (طبق مطالعات Mobify)

به وضوح، اجماع بر این است که افزایش سرعت وب سایت بر تجربه کاربری تاثیر مضاعفی دارد. در اینجا به چند ایده فوق العاده طراحی وب سایت، برای افزایش سرعت سایت مشتریانتان اشاره می شود.

طراحی تان مینیمالیستی کنید

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

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

طراحان باید به اصول درست مینیمالیسم متوسل شوند تا در نهایت موفق به طراحی وب سایت سبکی شوند که load شدن آن از صفحه ای به صفحه دیگر تا ابد طول نکشد.

عوامل مینیمالیستی عبارتند از: 

• منوی همبرگر (A hamburger menu) [☰] بجای نوار ناوبری استاندارد (navigation bar).
• فضای سفید یا فضای منفی (negative space) بیشتر در طراحی سایت. (فضای منفی به فضای اطراف یک عنصر در طراحی گفته می شود)
• فرم های کوتاه
• تصایر کوچکتر
• استفاده از یک فونت در طراحی وب سایت، بجای استفاده از چند فونت مختلف.

ویکی پدیا یک مثال ایده آل برای رویکرد “سبک سازی برای مینیمالیستی کردن” طراحی است.

در صفحه خانه ویکی پدیا، وقتی ما در نوار عبارتی را جستجو می کنیم، مثلا “tiger”، فقط یک ثانیه طول می کشد که به ما را صفحه tiger در ویکی پدیا ببرد. با نگاهی به نوارابزار الکسا، می توانیم درستی این مثال را تایید کنیم!

اهمیت تصور را درک کنید

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

اگرچه سرعت سایت بالاترین اهمیت را دارد، اما شما می توانید تصور سایتی سریعتر را ایجاد کنید و معمولا اگر سریعتر تصور شود، کاربران شما راضی تر خواهند بود.

در این ویدئو Luke Wroblewski، توضیح می  دهد که سرعت مسیری دشوار از تجربه کاربری است. به جای پیاده سازی راه های فنی پیچیده برای بهبود زمان پاسخگویی (response time)، با استفاده از طراحی خوب می توانیم تصور بهتری از عملکرد ایجاد کنیم و باعث شویم رابط کاربری سریعتر به نظر برسد.

از گوگل کمک بگیرید

گوگل خواستار افزایش سرعت بارگذاری سایت شماست که می تواند به ماموریت کلی گوگل در افزایش سرعت اینترنت کمک  کند. این همان چیزی است که سال گذشته وقتی گوگل تکنولوژی فشرده سازی خود رونمایی می کرد، با نام “Brotli”، منتشر کرد. پس چرا از ابزار فوق العاده ای که گوگل به شما به عنوان طراح وب سایت استفاده نکنید؟

بهترین جا برای شروع ساختن صفحه وب را سریع تر کن (Make the Web Faster) در Google Developer است. در اینجا، شما مجموعه درخشان از ابزار و اطلاعات برای افزایش سرعت سایت درطراحی وب سایت خود دریافت خواهید کرد.

یکی از بهترین ابزارهای ارائه شده گوگل، PageSpeed Insights است. جایی که شما درکی دقیق از اینکه چرا سایت کنونی شما کُند است دریافت می کنید. بهترین قسمت این است که شما می توانید گزارش های دقیق و پیشنهاداتی هم برای نسخه موبایل و هم کامپیوتر سایت شما دریافت کنید، بنابر این شما هیچ بهانه دیگری برای معرفی یک سایت کُند بع مشتریانتان ندارید.

بعد از گذاشتن URL وبسایتتان، فهرستی از چیزهایی که باید هم برای افزایش سرعت بارگذاری سایت و هم برای تجربه کاربری اصلاح کنید دریافت می کنید.

در وبسایت من، برای مثال ما امتیاز سرعت ۷۲/۱۰۰ را می یبینیم، که خوب است، ولی واضح است که عالی نیست. زیر امتیاز، مجموعه ای از پیشنهادات را برای چیز هایی که باید در سایتم اصلاح کنم تا بسیار سریعتر شود و به امتیاز ۱۰۰/۱۰۰ نزدیکتر شود، می بینیم. هرچند، نسخه موبایل تقریبا امتیاز عالی داشته باشد، علیرغم امتیاز سرعت، چنین سرعتی تنها فاکتور در تعیین تجربه کاربر موبایل نیست.

وقتی ما بر رو تب desktop کلیک می کنیم، امتیاز سرعت بسیار بهتر ۸۴/۱۰۰ را می بینیم. پیشنهادات مشابه و جدیدی در زیر فهرشتت شده اند.

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

lazy loading یا بارگزاری تنبل تصاویر

چیزی درباره بارگزاری تنبل تصاویر یا lazy loading شنیده اید؟ بارگزاری تنبل نوعی  الگوی طراحی وب سایت است که در آن اجزا تا زمانی که نیاز نباشد render نمی شوند. برای مثال اجزایی که در پایین صفحه  هستند فقط زمانی شروع به load شدن می کنند که کاربران به پایین scroll کنند. این رویکرد “فقط در زمان لازم” طراحی سایت، به این معنی است که سایت شما باید به منابع کمتری تکیه کند، در نتیجه موجب افزایش سرعت وب سایت می شود.

نکته: اگر صفحه شما دارای محتوای زیادی است و به همین خاطرکاربران باید به پایین scroll کنند، طبیعتا بارگزاری تنبل می تواند بسیار موثر باشد. اگر برای یک مشتری یک صفحه بلند -که نیاز به scroll زیادی دارد- (long-scrolling page) طراحی می کنید،از بارگزاری تنبل استفاده کنید، که فوق العاده به افزایش سرعت وب سایت و تجربه کاربری کمک می کند!

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

• Lazy Load Plugin for jQuery
• Lazy Load WordPress Plugin
• BJ Lazy Load
• Unveil.js
• bLazy.js
• Angular Lazy IMG
• ocLazyLoad
• React-Lazy-Load
• Jason Slyvia’s React-Lazyload

صفحه iPhone 6S اپل یک صفحه بلند است و برای بارگزاری تنبل نمونه بسیار خوبی است. اگر به پایین scroll کنید، تعداد زیادی تصاویر مختلف می بینید که باید load شوند و  هرکدام سرعت سایت را تحت تاثیر قرار می دهند. این صفحه می توانست از بارگزاری تنبل بهره ببرد، در حالی که در نوار ابزار مشاهده می کنیم که این صفحه در زیر ۲ ثانیه load می شود که متوسط به حساب می آید!

 

سرورهای خود را بهینه سازی کنید

چگونگی رسیدگی شما به سرورهایتان،‌ یکی از مهمترین جنبه های افزایش سرعت بارگزاری سایت برای داشتن سایتی بسیار سریع است. به طور خاص، داشتن سروری که زمان پاسخگویی (response time) بسیار بالایی دارد نکته کلیدی است. زمان پاسخگویی سرور شما مدت زمانی است که طول می کشد تا سرور شما به درخواست یک مرورگر پاسخ دهد.

به عبارت دیگر، می توانید تک تک صفحات برای سرعتی که مد نظر دارید بهینه سازی کنید، ولی اگر سرور خود را نادیده بگیرید،‌ سرعت کلی سایت شما بی فروغ خواهد بود!

پیاده سازی استراتژی های زیر برای اطمینان از سرعت فوق العاده سرور شما لازم است:

• استفاده از منابع کمتر برای هر صفحه (تسلیم تصاویر یا Defer images،‌ ترکیب فایل های بیرونی CSS،ترکیب فایل های بیرونیJavascript)
• استفاده از CDN
• استفاده از راهکارهای caching یا (caching solution)
• بهبود تنظیمات نرم افزاری سروو وبسایت تان

سایت های سریعتر، کاربر، خریدار و خواننده بیشتری پیدا می کنند.

این روزها طراحی وبسات مبتنی بر سرعت بخوبی بیان نمی شود! در سال ۲۰۱۶ هستیم، و کاربران، خریداران و خوانندگان وبسایت شما تجربه کاربری سریعی را انتظار دارند. در غیر این صورت، ملزم می شوند به سایت های رقیبانی مراجعه کنند که بر مبنای سرعت بهینه سازی شده اند!

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

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

نویسنده: Marc Schenker

منبع: http://www.awwwards.com