در این مطلب می‌خواهیم نگاهی به اقدامات ساده‌ای بیاندازیم که در نهایت موجب بالا رفتن کارایی وبسایت و وب اپلیکیشن‌های‌تان می‌شود. به آن نگاهی بیاندازید شاید مواردی را از یاد برده باشید.
آیا وبسایت‌تان بیشترین کارایی در حد ممکن را ارائه می‌دهد؟ به نظر من بسیاری از توسعه‌دهندگان و تیم‌ها همواره این سوال را از خودشان می‌پرسند و در نظر دارند. ابزارهای بسیار زیادی وجود دارد که به شما کمک می‌کنند تا بهترین رویکردها را داشته باشید و کارایی بالایی از وب اپلیکیشن و وبسایت را نمایش دهید.
هدف من در این مطلب این است که به شما نکات و تکنیک‌هایی را نشان دهم که باعث می‌شود تا کارایی بالایی در وبسایت‌تان داشته باشید.
نگاهی به این لیست بیاندازید و قدم‌های ساده را برای تاییدیه گرفتن دنبال کنید. تمام اقدامات لازم و مهم در این مطلب جاگذاری شده است.
چرا؟
اندازه بیشتر صفحات وب در حدود ۱.۵ مگابیت است و آن‌ها زمان بسیار زیادی را برای بارگذاری می‌خواهند. در برخی از حالات این زمان به ۱۰ ثانیه می‌رسد. بیایید این موارد را از سال ۲۰۱۴ به بعد آنالیز کنیم:
می‌توانیم مشاهده کنیم که میزان استفاده از دستگاه‌های موبایل از سال ۲۰۱۴ به بعد روند افزایشی داشته است. همزمان با آن می‌توانید محتوایی که بیشتر شده‌اند را مطالعه کنید.
من فکر می‌کنم که توسعه‌دهندگان باید همواره به کاربران توجه داشته باشند و بتوانند کارایی وب اپلیکیشن‌های‌شان را به حداکثر میزانی که می‌توانند برساند. مطمئنا اگر شما در یک شهر توسعه یافته باشید با مشکلات اینترنت همراه نیستید، اما آیا در رابطه با تمام دنیا چنین فکر می‌کنید؟ خوشبختانه امروز تکنولوژی AMP عرضه شده است که باعث می‌شود تا کاربران حتی با سرعت بسیار بدی بتوانند به اطلاعات دسترسی پیدا کنند.
اهمیت سرعت برای کاربران در ساختار سلسله‌ای UX
همانطور که می‌توانیم متوجه شویم سرعت برای ۷۵درصد از کاربران یکی از فاکتورهای بسیار مهم است.
سرعت واقعی دانلود واقعا بالاست. ۷ مورد از ۱۰ مورد وبسایت کمتر از ۴ ثانیه بارگذاری می‌شوند و حدود ۳۳ درصد وبسایت این رقم را به کمتر از ۱ ثانیه رسانده اند.
حال بیایید وارد قسمت مهم ماجرا شویم و بهینه‌سازی برای دو قسمت بسیار مهم یعنی Client Side و Server Side را مشاهده کنیم.
بخش کلاینت
کوچک‌سازی و فشرده‌سازی
منابع غیر ضروری را آنالیز و حذف کنید. همچنین اپلیکیشن را با استفاده از کوچک‌سازی فایل جاوااسکریپت و فشرده‌سازی CSS بهینه نمایید. این مسئله که شما حجم داده کمتری را به کاربران ارسال می‌کنید تاثیر بسیار زیادی روی سرعت شما خواهد داشت. برای جاوااسکریپت به شما پیشنهاد می‌کنم که از UglifyJS استفاده نمایید. برای CSS انتخاب‌های متفاوتی وجود دارد Compress CSS plugin و option از انتخاب‌های خوبی هستند. بعد از اعمال فشرده‌سازی، تغییر بسیار واضحی را در اندازه فایل‌ها مشاهده خواهید کرد.
نکته:
تنها چیزی که نیاز دارید انجام دهید این است که تمام لزومات را نصب کرده و با اپلیکیشن‌تان آن‌ها را یکپارچه سازید.
CDN
اگر از کتابخانه‌های محبوبی که همه جا حضور دارند استفاده می‌کنید، CDN می‌تواند انتخاب خوبی برای اتصال آن‌ها به پروژه‌تان باشد.
بهتر است از مواردی مانند Cloudflare استفاده کنید.
از کدهای بی استفاده دوری کنید
جاوااسکریپت بی استفاده: این مورد یک مشکل بسیار مرسوم است. مخصوصا اگر روی یک پروژه بزرگ همراه با هزاران خط کد کار کنید با این مشکل بیشتر مواجه خواهید شد. برخی از توابع و لزومات که همواره در روند توسعه تغییر می‌کنند بعد از مدتی به کدهای بی استفاده تبدیل می‌شوند.
همواره مطمئن شوید که از تکنیکی استفاده نمایید که کدهای مورد نیاز را بارگذاری کنید، lazyLoad یکی از تکنیک‌های بسیار خوب در این حیطه است. انجام چنین کاری می‌تواند تاثیر بسیار مثبت و عظیمی داشته باشد. بیشتر کاربران کارایی وبسایت‌تان را در اولین بارگذاری ارزیابی می‌کنند.
CSS بی استفاده: در بسیاری از حالات اگر یک بارگذاری اولیه همراه با استایل‌های مهمی که قرار است استفاده شوند را داشته باشید، بسیار خوب است که این قسمت را به قطعه کدهایی تقسیم کنید. با این کار قسمت‌های مهم در ابتدا بارگذاری شده و قسمت‌های دیگر تنها زمانی بارگذاری خواهند شد که به آن‌ها نیاز خواهید داشت.
باندل‌ها و موارد جانبی را برای درک ارزش لزومات پروژه ارزیابی کنید
باندل‌های پروژه‌تان را بررسی کنید. با استفاده از یک روند آنالیز می‌توانید استفاده واقعی و درست از تمام لزومات پروژه را مشاهده کنید.
همیشه یک ارزیابی کامل از تمام باندل‌ها، موارد جانبی، کتابخانه‌ها و… را داشته باشید. سعی کنید آن‌ها را فهرست بندی کنید. تاثیر هر کدام روی پروژه اصلی را بررسی کنید، گاهی اوقات می‌توانید مواردی با حجم کمتر اما کارایی یکسان را جایگزین سازید.
ابزارهای بسیاری برای بررسی باندل‌ها ارائه شده‌اند. Webpack bundle Analyzer یکی از ابزارهایی است که برای بررسی اندازه باندل‌ها در وب‌پک استفاده می‌شود.
Import Cost نیز یکی از پلاگین‌های VSCode است که می‌تواند حجم هر کدام از وابستگی‌های مربوط به پروژه را به شما نشان دهد.
BundlePhobia ابزار دیگری است که به شما اطلاعات کاملی راجع به وابستگی‌های پروژه را می‌دهد. شامل کوچک‌سازی‌ها، فشرده‌سازی gzip و زمان دانلود کردن می‌شود.
بهینه‌سازی زمان راه‌اندازی جاوااسکریپت
اگر وبسایت یا اپلیکیشن‌شان روی دستگاه‌های موبایل تمرکز دارد، این مورد بسیار مهم است. به این دلیل که پروسه دانلود و راه‌اندازی جاوااسکریپت در موبایل بیشتر از دسکتاپ است. بنابراین باید تا جایی که می‌توانیم سرعت تعامل‌پذیری را افزایش دهیم.
برای اینکه این فرایند را بهینه کنید، می‌توانید از یک تکنیک محبوب به نام Code-Splitting بهره بگیرید. این تکنیک بسیار ساده است۷ تصور کنید که یک فایل جاوااسکریپتی را به چندین قسمت مختلف تقسیم می‌کنید و درست در زمان فراخوانی فایل مربوطه بارگذاری می‌شود.
می‌توانید کدهای‌تان را با استفاده از کامپوننت‌ها و یا روترها جدا کنید، چنین کاری می‌تواند بسیار مفیدتر از آن باشد که تمام اپلیکیشن را یک جا اجرا کنیم. ما تنها قسمت‌های مهم کدها را برای کاربر ارسال می‌کنیم.
از import ایستا به import پویا سوئیچ کنید. این مورد می‌توانید تاثیر بسیار خوبی روی کارایی و سرعت اجرای اپلیکیشن داشته باشد. LazyLoading نیز کارایی اپلیکیشن را بسیار بالا می‌برد.
Tree-shaking
از تکنیک Tree-shaking برای حذف کدهای مرده استفاده کنید.
کدهای بی‌استفاده کتابخانه‌ها
کدهای بی استفاده ای که از کتابخانه‌ها نشئت می‌گیرد را حذف کنید. می‌توانید برای چنین کاری از این کتابخانه بهینه‌سازی برای وب‌پک استفاده کنید.
بهینه‌سازی تصاویر
تصاویر بخش بسیار مهمی از برگه‌های وبسایت ما هستند، بنابراین نیاز است که تکنیک‌های برای بهینه‌سازی آن‌ها را در اختیار داشته باشیم.
از ابزارهای بهینه‌سازی تصاویر مانند imagemin یا libvips استفاده کنید. می‌توانید از یک CDN نیز بهره بگیرید. می‌توانید از Thumbor یا Cloudinary استفاده کنید.
از فرمت‌های تصویری جدیدتری استفاده کنید (JPEG 2000, Webp و نمونه‌هایی از این دست می‌توانند کارایی بیشتری نسبت به JPEG و PNG داشته باشند) اینگونه می‌توانید بهینه‌سازی بهتر، سرعت دانلود بیشتر و مصرف حجمی کمتری را داشته باشید.
از <video> بجای GIF استفاده کنید
یک گیف بزرگ کارایی خوبی برای محتوای انیمیشنی بجای نمی‌گذارد. Video می‌تواند ترافیک کمتری را اشغال کند. می‌توانید با استفاده از ابزارهای موجود فرمت gif را به یک فرمت ویدیویی کم حجم تغییر دهید.
ارتباط شبکه را ارزیابی کنید
می‌توانیم از navigator.connection.effectiveType برای بررسی اتصال شبکه کاربری استفاده کنیم. این مورد می‌تواند به ما کمک کند تا بهتر از موارد جانبی و رسانه‌ها در وبسایت‌مان استفاده کنیم.
برای مثال، روی مرورگر دسکتاپ، می‌توانید پیشنمایش یک ویدیو را مشاهده کنید. اما روی دستگاه موبایل بهتر است این قضیه تنها به یک تصویر ختم شود. به این خاطر که در این حالت بجای بارگذاری حجم ۱ مگابایت، کافی‌ست ۵۰ کیلوبایت را دانلود کنید.
مثالی از یک تصویر با ارتباط اینترنتی ضعیف
تصاویر LazyLoading
از بکارگیری تصاویر به صورت تمام صفحه در مرورگر دوری کنید. می‌توانید از تکنیک LazyLoading برای بارگذاری تصاویر به صورت نوبتی استفاده کنید. lazysizes انتخاب بسیار خوبی برای‌تان خواهد بود.
با استفاده از این ابزار قدرتمند می‌توانید کارایی خوبی از اپلیکیشن تان را بر جایی بگذارید و تنها تصاویری که دنبال می‌شوند را بارگذاری کنید. این موضوع بسیار پر کاربرد است.
مرورگر را برای بارگذاری آگاه کنید
به صورت پیشفرض مرورگر نمی‌داند که چه مواردی را در ابتدا بارگذاری کند، CSS، تصاویر، اسکریپت‌ها و… . حتی بعضی اوقات پیش می‌آید که تصاویر مورد نیاز CSS به درستی بارگذاری نمی‌شوند و مشکل مربوط به ترتیب بارگذاری پیش می‌آید.
با استفاده از <link rel=preconnect>، <link rel=preload> و <link rel=prefetch> می‌توانید ترتیب درست بارگذاری موارد را به مرورگر بگویید. همچنین می‌توانید با استفاده از آن قابلیتی را فراهم کنید که ارتباطات چندگانه به یک منبع متصل شوند. جدای از آن قابلیت prefetch نیز می‌تواند سرعت فرایند بارگذاری را بسیار بالاتر ببرد.
Font-display
در ادامه روند بهینه‌سازی بهتر است که از متونی که نیاز به بارگذاری برخی وب فونت‌ها هستند خودداری کنیم. می‌توانید از خاصیت font-display: swap استفاده کنید که باعث می‌شود بتوانید فونت‌ها را بعد از بارگذاری در یک مکان ذخیره کنید. این مورد از ویژگی‌های جدیدی است که در توسعه وب پیاده‌سازی شده و تقریبا در تمام مرورگرها بجز Edge پشتیبانی می‌شود. برای دریافت اطلاعات بیشتر می‌توانید این لینک را مطالعه کنید.
در پایان
همواره به کارایی به عنوان یک چالش خوب برای خود و تیم‌تان فکر کنید. بعد از اینکه یادگیری که به چه صورت وبسایت‌ها و وب اپلیکیشن‌ها را بهینه‌سازی کنید، در نهایت سرعت بسیار بالایی از اپلیکیشن را شاهد خواهید بود.
همواره جدای از پایه‌های اپلیکیشن روی تمام جزئیات آن نیز تمرکز کنید. درست مانند یک خانه که نکات ریز و درشتی دارد به این موارد فکر کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید