۱۳۹۴ آذر ۲۰, جمعه

راهنمای کوتاه ساخت وب‌سایت‌هاي سریع

چرا ساخت وب‌سایت‌هاي سریع ؟ وقتي براي اولین بار شروع به طراحی وب مي‌كنيد احتمالاً مشكل سرعت وب‌سایت به نظر‌تان مشکل شخص ديگري است. حداقل وقتي مبتدی بودم من يكي كه اين‌طور فكر مي‌كردم.
گذشته از اين‌ها كار طراحي را بر روی بوم‌هاي خالي فتوشاپ شروع كردم. نه برنامه‌اي، نه نرم‌افزار‌هاي مديريت محتواي. معمولاً حتی نمي‌دانستم مي‌خواهم چند صفحه داشته باشم، يا مثلاً قرار است روي اين صفحات چه چيز‌هايي بگذارم. فقط وب‌سایت‌هایی مي‌ساختم، بیشتر برای سرگرمي؛ چون تصيميم گرفته بودم سال‌هاي نوجوانيم را اينجور سپري كنم. زماني اولين بار كشف كردم كه مي‌شود در سرعت بارگذاري وب‌سايت بهینه‌سازی كرد كه براي اولين بار به اين كشف بزرگ نائل شدم كه چه جور مي‌شود يك وب سايت درست و حسابي ساخت. بالاخره، سرعت وقتي مسئله ساز راهنمای کوتاه ساخت وب‌سایت‌هاي سریعمي‌شد كه سایت‌های من واقعا عظیم و بزرگ مي‌بودند و مردم هم هنوز داشتند از سيستم dial-up استفاده مي‌كردند، مگر نه؟
چیزی که به سختي حالي من شد اين است وقتي مي‌خواهيد كاري انجام بدهيد، بايد از ابتدا شروع كنيد. بعضي چيز‌ها هستند كه بايد آن‌ها را در اولويت اول قرار داد، و این يعني بايد از همان اول وب ‌سايت را جوري ساخت كه سرعت داشته باشد.
خوب حالا كه داريم در مورد «سرعت» صحبت مي‌كنيم منظورمان چيست؟ يعني با چه سرعتی در مرورگر بارگذاري مي‌شود؟ با چه سرعتی اجرا می‌شود؟ بله. منظورم هر دوي اين‌ها است. چون همپوشانی زيادي بین این دو نوع سرعت وجود دارد.
بايد هر دوي اين‌ها را در نظر بگيريد. هنوز هم خيلي از مردم به اینترنت بسیار كند دسترسی دارند. فن‌آوري 3G چندان عالي نيست، کاربران تلفن همراه هم هنوز با داده‌هاي مزاحم دست و پنجه نرم مي‌كنند. همينطور، احتمالاً میلیون‌ها گوشي تلفن همراه وجود دارد كه پردازنده‌های سرعت پايين دارند.
همينطور كه من دارم در این مقاله چند تا راهنمایی فنی و ترفند بهتان ارائه می‌کنم، يادتان باشد كه مهم‌ترین چیزي كه بايد عوض كنيد طرز فکرتان است. سرعت به معنای گفت و شنود، فروش و دوباره سر زدن مردم به وب‌سایت شما در آینده است براي به دست آوردن اطلاعات بیشتر و مطالب جديد‌تر. وب‌سایت كند هم به اين معنی است كه افراد مي روند سراغ چيزي كه نخواهد صبر و تحمل‌شان را محك بزند. و سایت‌ها حتی زمانی که سریع بارگذاري مي‌شود ممكن است به نظر كند بيايند. این‌جا اینترنت است. شما باید رقابت كنيد. در اینجا یک اینفوگرافی آورده‌ايم به به صورت بصری به شما نشان بدهد چگونه سرعت وب‌سایت مي‌تواند بر نتيجه كارتان تاثر بگذارد. بهینه‌سازی سرعت را بايد از جايي شروع كرد كه فرایند طراحي آغاز مي شود؛ يعني از محتوا. اين احتمال هست كه كسي چندان توجهي به طراحی سایت‌ نكند، مگر وقتي كه همه بازدید‌کنندگان‌تان از ميان همکاران طراح وب‌تان باشند؛ بر عكس، همه حواس‌ بازديد كننده‌ها به محتوای سايت معطوف خواهند شد. اگر اين محتوا باشد كه باعث كندي سايت شما مي‌شود، هر قدر هم به بهینه‌سازی طراحی سایت بپردازيد مشكل برطرف نخواهد شد.
معلوم شده که تصاویر بزرگ منجر به فروش بهتر مي‌شود. این عالی است. اما لطفاً در استفاده از این تصاویر حجيم مضايقه كنيد، مطمئن شوید که به خوبي فشرده شده باشند، یا حتي بهتر است از SVG استفاده كنيد. اگر نگاهی به این داده‌ها بيندازيد، خواهید دید که اندازه متوسط صفحاتي كه روي گوشي‌هاي تلفن همراه بار گذاري شده اند (افراد که معمولاً سرعت کندتر يا سيستم عامل‌هايي با داده‌هاي مزاحم داشته‌اند) خيلي سريع دارند به حجم 1MB نزدیک مي‌شوند، و تصاویر باعث و باني نیمی‌ از مشكل هستند. روش هايي هست كه مي شود مزاياي هر دو حيطه را با هم داشته باشيد. علاوه بر آن، كم كم به كار بردن تصاویر داراي عكس‌العمل سريع آسان‌تر شده است. گذشته از همه، افرادي كه از رايانه رو ميزي استفاده مي كنند، احتمال بیشتري دارد که برای مقابله با تصاویر حجيم‌تر اینترنتي داشته باشند كه به قدر کافی سریع باشد..
آگهی‌ها و دیگر مطالب فرعي
بله، تبلیغات به عنوان جزئي از محتوا حساب مي‌شوند، به ویژه وقتي ‌که مخلوط با بدنه و متن سايت آورده می‌شوند. بدتر از همه، گاهی اوقات شبکه‌های آگهی دهنده واقعاً، واقعاً كند هستند. نمي‌دانم چند بار تا بحال پيش آمده كه متوجه شده ام فقط بخشي از سايت بارگذاري شده و مرورگر قبل از بارگذاري بقيه مطالب منتظر شبکه آگهی مانده است. اگر مي‌خواهيد روي سايت‌تان تبليغات داشته باشيد هر كدام از آن‌ها را چند بار بررسي و كنترل كنيد، ببینید هر كدام چطور اجرا مي‌شود، و مطمئن شوید که اشكالي در بارگذاري پيش نخواهد آمد. اين مسئله درباره همه مطالب ديگري كه از سرور‌های ثالث بارگذاري مي‌شوند مصداق دارد. شما را در حال کشیدن از هر. گذاشتن پيوند فیدهای RSS، رسانه‌های اجتماعی و مانند آن، اگر حواستان نباشد، می‌تواند سایت‌تان را بيش از پيش كند نمايد.
زمانی که خود طراحی كند است
البته عكس قضيه هم احتمال وقوع دارد. خيلي از سايت‌ها هستند كه سبك بوده و محتوای ساده، مانند متن و یکي دو تا تصویر کوچک دارند كه به خاطر طراحی ضعیف و کد نويسي بد سنگين شده اند.
این به اين خاطر است كه خيلي از افراد فكر مي‌كنند بايد تا جايي كه جا دارد سايت‌شان را فانتزی طراحي كنند. من اين ميل و رغبت را درک می‌کنم؛ اما روزگار Flash (به يك دليل) به سر آمده است. نبايد تصميم بگيريد كه HTML5، CSS3 و جاوا اسکریپت را جایگزین‌های Flash كنيد. کاربران‌تان چنادن دلشان نمي‌خواهد دور و بر صفحه پر از تصاوير متحركي باشد كه بالا و پايين مي‌پرند. آنها مي‌خواهند مستقيماً بروند سراغ اطلاعاتي كه ارائه مي‌كنيد، يا محصولي كه مي‌فروشيد.
چیز‌هاي فانتزی اغلب باعث کندشدن همه چیز مي شوند
وب سایت شما نيازي به گرافيك‌هاي تصويري مثل شكست نور، يك دسته‌ انیمیشن بي فايده، و یا يك مشت نوشته بي سر و ته براق نیاز ندارد تا بتواند تاثير گذار باشد. البته نمي‌گويم خيلي ساده، صفحه‌تان را با يك متن سياه رنگ، با پس زمينه‌اي سفيد، بدون طرح و گرافيك رها كنيد. مي‌گويم هر گونه افزوده قالب بندي را بايد از منظر تجربه کاربر و حجيم بودن آن سبك و سنگين كرد. وقتي مي‌خواهيد انیمیشن و چیزهای زرق و برق دار به اضافه كنيد از خودتان بپرسید واقعاً به اين چيز‌ها نياز دارم، یا چيزي مي‌خواهم كه پیشرفته‌تر از اين‌ها باشد. اين موضوع نكته مثبت قضيه است كه تا وقتي واقعاً نخواهيد يك اپليكيشن بسازيد نيازي هم به چيز‌هاي پیشرفته، مثل jQuery نخواهيد داشت. این امر به ویژه درباره سایت‌های کوچک تا متوسط مصداق دارد.
بعلاوه مسئله فقط تعداد بايت صفحه نيست. انیمیشن‌هايي در صفحات وب ديده‌ام كه سرعت رايانه مختص گيم را هم كند كرده‌اند و اين موضوع اصلاً خوب نيست. حالا فرض كنيد يكي مي‌خواهد با يك گوشي هوشمند يا تبلت سرعت پايين اين سايت را مرور كند. تصور کنید چقدر نا اميد ككنده خواهد بود. اگر مي‌خواهيد براي خوش طعم شدن سايت‌تان يكي دو تا عنصر گرافيكي به عنوان چاشني به آن اضافه كنيد، اینجا مي توانيد کتابخانه‌اي کامل از «پلاگین»هاي جاوا اسکریپت را پيدا كنيد که نيازي هم به jQuery یا ديگر نرم‌افزار‌هاي مديريت محتوا نداريد.

صحبت درباره کد‌هاي بیش از اندازه
این بحث مرا به این موضوع كشاند كه درباره نرم‌افزار‌هاي مديريت محتوا HTML و CSS صحبت كنم. اين امكان وجود دارد كه براي ایجاد سایت ساده نيازي به نرم‌افزار‌هاي مديريت محتواي حجيم مانند Bootstrap  نیاز است. اين نرم‌افزار‌ها مي‌توانند موجب صرفه جويي در زمان كل توسعه و گسترش سايت بشوند؛ اما ارزش زمان بارگذاري اضافي را ندارند. اگر قصد استفاده از یک نرم‌افزار‌هاي مديريت محتوا را داريد، حداقل آن را سفارشی كرده و بخش‌هايي كه به دردتان نمي‌خورد را حذف كنيد. بسیاری از نرم‌افزار‌هاي مديريت محتواي بزرگتر مانند HTML يا CSS راه‌های آساني برای انجام این کار در اختيارتان قرار مي‌دهند.
باز هم درباره تصاویر …
نه، كاري با تصاوير حجيم نداريم. در مورد آن‌ها قبلاً صحبت کردیم. حالا مي‌خواهيم درباره جزئیات صحبت كنيم. آيا هنوز هم سايت‌تان دارد از تصاویر شطرنجی، هاشور، سایه‌ها، آیکون‌ها، و چیزهايی شبيه به اين‌ها برای رنگ پس زمینه استفاده مي‌كند؟ نبايد اينطور باشد.
اگر می‌توان اين‌كار را با HTML، CSS يا SVG انجام داد، بايد همين كار را بكنيد. ممكن است مقداري كد نويسي بيشتر لازم داشته باشد، اما هنوز هم در حالت معمول کدها سبک تر از فایل‌هاي.jpeg و حتی بسیاری از فایل‌های .png هستند.
حالا سایتم سریعتر است، مگر نه؟
خب، خیلی چيز‌هاي ديگر هست كه بايد یاد بگیرید، مخصوصاً اگر داريد از یک سیستم مدیریت محتوا مانند WordPress یا انواع ديگر تنظيمات میزبانی پیچیده استفاده مي‌كنيد. این مشاوره فقط به درد وقتي مي‌خورد كه برای اولین بار مي‌خواهيد شروع به ساخت وب‌سايت كنيد،… اما خوب، یادگیری چیزهای تازه سرگرم کننده است!


هیچ نظری موجود نیست:

ارسال یک نظر