راهکارهای مبتنی بر فرانت‌اند برای بهبود کارایی اپلیکیشن

کریاکاکیس، فری‌کدکمپ — اگر Load شدن وبسایت‌تان بیشتر از ۳ ثانیه طول بکشد، حدوداً نصف بازدیدکننده‌هایتان را از دست خواهید داد! (مشاهده پژوهش Google) طولانی شدن زمان لودینگ، تاثیر ویران‌کننده‌ای بر نرخ تبدیل (Conversion Rate) اپلیکیشن شما خواهد داشت. در طرف مقابل کارایی بهینه اپلیکیشن (Performance) نقش کلیدی در موفقیت محصول دارد؛ به عنوان مثال با کاهش زمان لودینگ، مشتری‌هایتان تجربه باکیفیت‌تری خواهند داشت، نرخ تبدیل بهتر می‌شود و وضعیت سئو بهبود می‌یابد!

بیایید فرض کنیم که با یک فریم‌ورک مدرن جاوا اسکریپت (مثلاً Angular ،React ،VueJS یا...) سمت فرانت‌اند یک اپلکیشن یا وبسایت را ساخته‌ایم. حالا باید چه کار کنیم تا عملکرد این اپلیکیشن، تبدیل به مانعی در سر راه موفقیت آن نشود؟

> اندازه‌گیری عملکرد وبسایت یا اپلیکیشن

اول از همه، باید یک جوری داده جمع کنیم. من برای سنجش عملکرد Front-end، به این دو ابزار از همه بیشتر اعتماد دارم:

• لایت‌هاوس (Lighthouse) گوگل کروم
• اسپیدکرو (Speedcurve)

با هر دوی این ابزارها می‌توان وضعیت همه شاخص‌های کلیدی عملکرد یا همان KPIها را تعقیب کرد؛ یعنی شاخص‌های کارایی همچون:

• مقیاس سرعت صفحه (Pagespeed Index)
• زمان مانده به استفاده (Time to Interactive)
• و اولین نشانه از محتوا (First Contentful Paint).

لایت‌هاوس به طور پیش‌فرض در بخش Developer Tools مرورگر کروم قرار گرفته است. این ابزار، وبسایت یا اپلیکیشن وب ما را تحلیل می‌کند و راهنمایی‌های خیلی مفیدی برای بهتر کردن عملکرد آن ارائه می‌دهد.

اگر از اسپیدکرو استفاده کنیم، نه تنها می‌توانیم همه این شاخص‌ها را داشته باشیم، که می‌توانیم تغییرات آنها را در گذر زمان ببینیم.

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

> بهینه‌سازی عکس‌ها

عکس‌ها از مهم‌ترین عناصر هر وبسایت هستند. به طور میانگین، بیش از ۶۰٪ دیتایی که روی صفحات وب لود می‌شود، متعلق به عکس‌هاست. وقتی تصاویر اینقدر مولفه‌های اساسی‌ای هستند، بهینه‌سازی آنها در نظر من مهم‌ترین و در عین حال راحت‌ترین کاری است که می‌شود انجام داد!

۱. تغییر اندازه عکس‌ها و واکنش‌گرا (Responsive) کردن آن‌ها

مهم‌ترین سوالی که باید جواب دهیم، این است که آیا Resolution عکس‌هایی که داریم، در همان حد مورد نیاز است یا بیشتر از آن؟ اگر بیشتر است، پس باید اندازه عکس را طوری تغییر بدهیم که برای Layout صفحه مناسب باشد.

علاوه بر این، باید مطمئن شویم که عکس‌های ما به اندازه Layout ما واکنش‌گرا هستند. واکنش‌گرا بودن یعنی اینکه کاربر از هر دستگاهی که استفاده کرد، عکس‌ها به رزولوشن، اندازه، و دیگر ویژگی‌های متناسب با همان دستگاه در بیایند. من اخیرا ابزار خیلی خوبی برای این کار پیدا کرده‌ام که اسمش Responsive Image Breakpoints Generator است. با این ابزار هم می‌شود عکس را در همه اندازه‌های مختلفی که لازم است تولید کرد، و هم کد HTML5 لازم برای کار گذاشتن عکس‌ها را تحویل گرفت. من معمولاً ترجیح می‌دهم که هشت تا ده نسخه مختلف از عکسم را تولید کنم.

بدیهی است که کد HTML5 تولید شده را می‌توانید در هر وبسایت یا اپلیکیشنی که بخواهید، استفاده کنید. همچنین اگر از گالپ (gulp) خوشتان می‌آید، می‌توانید با پلاگین gulp-responsive کاری کنید که این فرآیند به طور خودکار انجام شود.

۲. لود تنبل عکس‌ها یا Lazy Loading

لود تنبل (Lazy Loading) یعنی این که لود شدن عکس‌های غیرضروری را عقب بیندازیم. معمولاً اگر عکسی در Viewport فعلی جلوی چشم کاربر نباشد، می‌توان لود کردنش را به زمانی دیگر موکول کرد: مثلاً به زمانی که عکس وارد Viewport شده یا در حال وارد شدن به آن است.

از هر فریم‌ورکی که استفاده کنیم، همیشه پلاگینی هست که با آن عکس‌هایمان Lazy Load شوند (مثلا v-lazy-images در VueJS). البته می‌توانیم خودمان هم Implementation خودمان را داشته باشیم. فقط باید مطمئن شویم که برای تشخیص زمان ورود یا خروج یک المان به Viewport، از روش مدرن استفاده می‌کنیم: یعنی از IntersectionObserver API.

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

حالا که اندازه و تعداد تصاویر وبسایتمان را به حالت بهینه رسانده‌ایم، می‌توانیم از CDN (شبکه تحویل محتوا) برای رساندن آنها به کاربران استفاده کنیم؛ بخصوص اگر قرار باشد که مردم از طیف وسیعی از موقعیت‌های جغرافیایی به سایت ما سر بزنند!

خلاصه بگویم، CDN شبکه سرورهایی در سرتاسر جهان دارد و عکس‌های شما را روی آن Cache می‌کند. بنابراین اگر کاربری از استرالیا بخواهد عکس وبسایت شما را ببیند، دیگر لازم نیست از سرور شما در ایران به آن دسترسی پیدا کند؛ بلکه CDN همان عکس را از سروری که به استرالیا نزدیک‌تر است، برایش لود می‌کند. با این کار، مدت زمان تاخیر چرخشی (RTT) لازم برای لود کردن تصویر خیلی کمتر می‌شود.

> بهینه‌سازی‌های سمت CSS، HTML و JS

همه فریم‌ورک‌های جدید وقت انجام Production Build، کد داده شده را بهینه‌سازی می‌کنند؛ مثلاً با Code-splitting ،Tree-shaking و Minification. اما غیر از این چه کارهایی می‌توانیم انجام بدهیم؟ ****

۱. بهینه‌سازی متن اصلی HTML

تقریباً همه اپلیکیشن‌های وب را HTML سر پا نگه می‌دارد. وقتی می‌خواهیم در متن HTML خود به Resourceها ارجاع بدهیم، بهتر است این دو تا کار را فراموش نکنیم:

• یک. ارجاعات CSS را بالای هدر متن HTML قرار دهیم تا حتماً رندر Progressive انجام شود.
• دو. Attributeهای جاوا اسکریپت را زیر بدنه HTML قرار داده و اسکریپت‌(ها) را به شکل غیر همزمان (Async) لود کنیم. با این کار، تگ‌های نمی‌توانند مانع رندر HTML شوند.

۲. حذف لود کردن‌های غیرضروری

هم Angular، هم React و هم VueJS همگی امکاناتی برای لود کردن تنبل‌وار دارند. فقط باید کدمان را درست و متناسب با نیاز خودمان تقسیم کنیم، یعنی طوری که فقط ماژول‌هایی که لازم داریم لود شوند؛ آن هم فقط زمانی که واقعاً به لود شدنشان نیاز است. به عنوان مثال، اگر اپلیکیشنی برای تجارت الکترونیکی ساخته باشیم، ماژول‌های Basket یا Payments نباید وقتی کاربر در صفحه "خانه" قرار دارد، لود شوند.

> فشرده‌سازی و Caching

به طور کلی، باید همه Assetهایی که برای فرانت‌اند ضروری هستند (هم عکس و هم کد) را به خوبی فشرده و Cache کنیم.

با فشرده‌سازی فایل‌ها، Assetهای اپ کمی سبک‌تر می‌شوند و زمان تاخیر چرخشی لازم برای ارائه آنها کاهش پیدا می‌کند. یکی از رایج‌ترین روش‌ها برای فشرده‌سازی فایل‌ها، استفاده از جی‌زیپ (Gzip) است. جی‌زیپ برای کوچک‌کردن قطعه‌های کد، متن‌ها، عکس‌ها، و فایل‌های صوتی خیلی خوب است.

یک الگوریتم دیگر برای فشرده‌سازی فایل‌ها، براتلی (Brotli) است که مرتباً به محبوبیتش اضافه می‌شود. این الگوریتم متن باز را مهندسین نرم‌افزار گوگل و دیگر شرکت‌ها مرتباً به روز می‌کنند. براتلی ثابت کرده که فایل‌ها را با نسبت (Ratio) خیلی بالاتری فشرده می‌کند.

مهم نیست از اِنجین‌اِکس (Nginx) استفاده کنیم یا آپاچی یا هر وب‌سرور دیگر. در همه وب‌سرورها، به راحتی می‌توانیم روش فشرده‌سازی مورد علاقه خود را با تغییر دادن فایل‌های Configuration، فعال کنیم (فعال کردن براتلی در Nginx، یا فعال کردن براتلی در Apache).

و اما Caching! رایج‌ترین تکنیک برای Caching که اتفاقا لایت‌هاوس هم آن را توصیه می‌کند، روش Leverage Browser Caching است. این را هم می‌شود با تغییر دادن فایل‌های Configuration سرور، فعال کرد (فعال کردن Leverage Browser Caching)

جمع‌بندی

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

اگر دوست دارید چک‌لیست مفصل‌تری در این باره ببینید، به اینجا بروید.

بر اساس:

How to boost your front-end application’s performance > by Dimitris Kiriakakis @ freeCodeCamp

کوئرامگ مجله تخصصی کوئرا برای توسعه‌دهندگان است که هر هفته با مطلب‌هایی در زمینه تکنولوژی، رشد فردی و آینده برنامه‌نویسی به‌روزرسانی می‌شود. برای اطلاع از آخرین مطلب‌های ما، می‌توانید توئیتر یا کانال تلگرام ما را دنبال کنید.