طراحی سایت فوق العاده سریع

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

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

• 47% کاربرها ترجیح میدن سایت تو 2 ثانیه یا کمتر لود بشه.
• خریداران فروشگاه های اینترنتی دوست دارن سایت 2 ثانیه ای لود بشه، اما گوگل هدفشو رو کمتر از نصف ثانیه گذاشته.
• 57% کاربرهای موبایل، وقتی وارد یه سایتی میشن، اگه بیشتر از 3 ثانیه لود شدنش طول بکشه، از صفحه خارج میشن.

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

• استفاده از فهرست همبرگری (فهرستی که فقط یک دکمه داره و وقتی روش کلیک میشه، 3 تا گزینه افقی موازی زیرش نمایان میشن. شبیه لایه های ساندویچ همبرگر) به جای فهرست استاندار معمول
• بیشتر قسمت های سایت سفید یا نگاتیو هستن
• فرم های کوتاه
• عکس های کوچیک
• به جای استفاده از چند مدل فونت فقط از یک فونت استفاده شود

به عنوان مثال، سایت ویکی پدیا طراحی کوچک گرا داره. اگه تو قسمت جستجوی صفحه بزنیم "ببر"، از یک ثانیه هم کمتر طول می کشه تا صفحه مربوط به ببر باز بشه. تو الکسا هم اگه چک کنید، همینو نشون میده.
اهمیت درک عملکردها
حتی تو طراحی سایت هم قدرت درک و احساس، مسئله مهمیه. منظورم اینه که طراحی هایی که به نظر کاملا قابل استفاده میان، اینطور نیست که حتما سرعتشون هم بالا باشه و بتونن رضایت کاربر رو کسب کنن.
گرچه خیلی مهمه که سایت سریع باشه، اما می تونید به جای اعداد و ارقام از قدرت درک خودتون استفاده کنید. معمولا اینطوریه که اگه به نظر خودتون سایتتون سریع باشه، کاربرها هم راضین.
البته میشه برای اینکه سایت سریعتر جواب بده، از یه سری راه حل های تخصصی پیچیده هم استفاده کرد، ولی بهتره به جای اینکار، با یه طراحی خوب حس کاربردی سایت رو افزایش بدیم و رابط کاربری رو سریعتر کنیم.
از گوگل کمک بگیرید
گوگل پارسال که فناوری فشرده سازی "Brotli" رو معرفی کرد، گفت که مأموریت اصلیش رو گذاشته رو سریعتر کردن اینترنت. پس هرچی سایت ها سریع تر بشن یعنی گوگل به هدفش نزدیک تر شده. پس چرا از ابزار و روش هایی که گوگل بعنوان یه طراح سایت بهمون پیشنهاد میده استفاده نکنیم؟
بهتره از خود صفحه توسعه دهنده گوگل یا Google Developer شروع کنید. البته مطالب انگلیسی هست ولی به زحمت ترجمش می ارزه. اتفاقا برای سریعتر کردن سایت هم راهکار ارائه داده و یکسری ابزار هم معرفی کرده.
یکی از بهترین ابزاری که معرفی کرده PageSpeed Insights هست. تو نوارش آدرس سایتتون رو وارد کنید و دکمه آنالیز رو بزنید. گوگل سایت رو آنالیز می کنه و گزارش میده که چه چیزهایی سرعت سایتتونو کم کرده. خوبیش اینه که هم برای ورژن موبایلی سایتتون گزارش و پیشنهادهاشو میده و هم برای ورژن کامپیوتری سایت. پس دیگه هیچ بهونه ای نمی مونه!
البته این صفحه برای درخواست های ایرانی جواب نمیده، ولی میشه با راه های معمول که خودتون بلدید دورش زد. وقتی آدرس سایتتونو وارد کنید، لیست اصلاحاتی که باید انجام بدید براتون میاد. این فهرست هم شامل مشکلات سرعت سایت میشه و هم کاربرپسند بودن سایت. چون این دو تا بهم ارتباط دارن.
مثلا من یکی از سایت های خودمو وارد کردم و رتبه سرعتش 72 از 100 شد. عدد خوبیه ولی بهتر از اینم میشه گرفت. زیر رتبه، یه سری پیشنهاد برای سریعتر شدن سایت داده. هرچی بیشتر به این پیشنهادهارو عمل کنیم، رتبه سایتمون به 100 نزدیک تر میشه. تو سایت من برخلاف رتبه سرعت، رتبه موبایلش خیلی خوب اومده. نتیجه میگیریم کاربرپسندی سایت فقط وابسته به سرعت نیست، و این وسط مسائل دیگه ای هم رو کاربرپسندی تأثیر میذارن.
وقتی روی دکمه دسکتاپ کلیک می کنیم، سرعت بهتری رو نشون میده، عدد 84 از 100. زیر این رتبه هم همون پیشنهادها فهرست شدن.
هرچی بیشتر به پیشنهادهایی که گوگل بهتون داده توجه کنید، سایتی که ساختید برای مشتری هاتون سریعتر میشه.
با بارگذاری تنبل، تنبل میشید
تا حالا عبارت بارگذاری تنبل رو شنیدید؟ یه نوع الگوی طراحیه و ویژگی اصلیش اینه که تا زمانی که ضرورت نداشته باشه، چیزی رو نشون نمیده. مثلا چیزهایی که پایین سایت قرار گرفتن تا وقتی که کاربر اسکرول بار رو پایین نبره، لود نمیشن. اینطوری سایتتون به منابع کمتری نیاز داره و در نتیجه عملکردش سریعتر میشه.
نکته مهم: اگه مطالبتون خیلی زیاده و کاربر باید خیلی اسکرول بار رو ببره پایین، طبیعتا بارگذاری تنبل به دردتون میخوره. پس اگه دارید یه صفحه طولانی رو برای یه مشتری طراحی می کنید، از بارگذاری تنبل استفاده کنید تا سرعت و کاربرپسندی سایت رو بالا ببرید. واقعا تأثیرگذاره.
اگه میخواهید برای سایتتون از بارگذاری تنبل استفاده کنید، می تونید از پلاگین های آماده ی "بارگذاری تنبل" استفاده کنید.
من اینجا چندتا از این پلاگین ها رو بهتون معرفی می کنم:
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
سرورهاتونو بهینه کنید
یکی از جلوه های سریع کردن سایت، کنترل سرورهاست. زمان پاسخگوییه سرور رو بررسی کنید، اون هم باید سریع باشه. زمان پاسخگویی سرور، مدت زمانیه که طول میکشه تا سرورتون به درخواست مرورگر جواب بده.
به عبارت دیگه، میتونید سرعت تک تک صفحه های سایتتون رو بهینه کنید، اما اگه از سرورهاتون غفلت کنید، سرعت کلی سایتتون هم نمی تونه چندان خوب بشه.
برای اینکه سرعت پاسخگویی سرور سایتتون واقعا بالا باشه باید حتما راهکارهایی که براتون می نویسم رو بکار بگیرید:

• برای هر صفحه از منابع کمتری استفاده کنید (عکس های متفاوت استفاده کنید، فایل های CSS خارجی و جاوااسکریپت رو یکی کنید)
• از یه CDN یا شبکه ارسال محتوا استفاده کنید
• از کش ها استفاده کنید
• موقعیت نرم افزاری سرور سایتتون رو بهبود ببخشید

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