چگونه عملکرد برنامه front end خود را تقویت کنید؟

شما فکر می‌کنید که چگونه باید عملکرد برنامه front end خود را تقویت کنید؟برای فهمیدن این سوال لطفا تا پایان همراه راکت باشید.

اگر بارگذاری وبسایت شما بیشتر از ۳ ثانیه طول بکشد، ممکن است به طور تقریبی نیمی از بازدیدکنندگان خود را از دست بدهید.

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

پس فرض می‌کنیم که شما اخیرا با استفاده از یک فریمورک JS مدرن (Angular، React، VueJS و غیره) یک وبسایت یا یک برنامه front end ساخته‌اید. چگونه می‌توانیم اطمینان حاصل کنیم که آن عملکرد مانع موفقیت ما نمی‌شود؟

در اولین مرحله، ما باید به نوعی برخی از داده‌ها را جمع آوری کنیم. وقتی نوبت به اندازه‌گیری عملکرد یک برنامه front end می‌رسد، ابزاری که بیشتر به آن‌ها اعتماد دارم عبارتند از:

- Lighthouse

- Speedcurve

هر دو ابزار می‌توانند به شما کمک کنند تا تمام عملکردهای اصلی KPI (Pagespeed Index، Time to Interactive، First Contentful Paint و غیره) را ردیابی کنید.

Lighthouse در ابزارهای توسعه یافته کروم شما گنجانده شده است و با تجزیه و تحلیل وبسایت یا برنامه وب شما، می‌تواند نکات بسیار مفیدی در مورد نحوه تقویت آن به شما ارائه دهد.

با Speedcurve می‌توانید تمام اینKPI ها را داشته باشید، به علاوه می‌توانید در طول زمان بر آن‌ها نظارت داشته باشید.

اکنون که توانستیم موفقیت خود را بسنجیم، بیایید با بهینه‌سازی قسمت‌هایی از وبسایت که بیشترین نقش را دارند، ادامه دهیم.

تصاویر

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

۱. تصاویر خود را تغییر اندازه دهید و آن‌ها را رسپانسیو کنید

مهم‌ترین چیزی که باید مورد بررسی قرار گیرد این است که از رزولوشن بزرگتری نسبت به آن چیزی که نیاز دارید استفاده نکنید. بنابراین شما باید تصاویر خود را برای مطابقت دقیق با الزامات چیدمان خود تغییر اندازه دهید.

علاوه بر این، شما باید اطمینان حاصل کنید که تصاویر شما نسبت به طرح و چیدمان‌تان رسپانسیو هستند. ابزاری عالی وجود دارد که اخیرا از آن استفاده می‌کنم، که به شما کمک می‌کند تمام نسخه‌های مختلف تصاویر را که ممکن است به آن نیاز داشته باشید را تولید کرده و همچنین کد ۵HTML را تولید کنید که می‌تواند از آن‌ها استفاده کند. این ابزار را Responsive Image Breakpoints Generator می‌نامند. من معمولا ۸ الی ۱۰ نسخه مختلف را تولید می‌کنم.

البته شما می‌توانید از کد ۵HTML تولید شده در هر برنامه یا وبسایت front end استفاده کنید. علاوه بر این، اگر اهل gulp هستید، می‌توانید این فرایند را با پلاگین gulp responsive به صورت خودکار انجام دهید.

۲. اطمینان حاصل کنید که تصاویر Lazy Load (بارگذاری تنبل) هستند

بارگذاری تنبل اساسا به این معنی است که بارگذاری تصاویری که در viewport نیست را به تعویق بیندازیم. به طور معمول، هر تصویری که در viewport کاربران قابل مشاهده نباشد، می‌تواند در زمان بعدی، هنگامی که تصویر وارد viewport می‌شود بارگذاری شود.

مهم نیست که از چه فریمورکی استفاده می‌کنید، می‌توانید پلاگینی پیدا کنید که می‌تواند تصاویر را برای شما بارگذاری تنبل کند (به عنوان مثال v-lazy-image در VueJS)، با این حال می‌توانید پیاده سازی خود را نیز ایجاد کنید. فقط مطمئن شوید که از روش مدرنی به نام IntersesectionObserver API برای تشخیص ورود یا خروج یک عنصر به قسمت viewport مرورگر استفاده می‌کنید.

از CDN برای تحویل تصویر استفاده کنید

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

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

CSS، JS و HTML

تمام فریمورک‌های مدرن کد شما را در طول زمان ساخت و تولید بهینه‌سازی می‌کنند (code-splitting، tree-shaking، minification و غیره).

۱. سند اصلی HTML را بهینه کنید

HTML تقریبا ستون فقرات هر برنامه وب است. در مورد مراجعه به منابع در سند HTML، روش‌های فوق‌العاده‌ای وجود دارد که باید آن‌ها را دنبال کنید که در ادامه به شما ارائه داده می‌شود:

- برای اطمینان از progressive rendering، منابع CSS را در بالای هدر سند HTML خود قرار دهید.

- ویژگی‌های JavaScript را در پایین HTML خود قرار دهید و بارگذاری async script را ترجیح دهید. این کار از هر تگ <script> در مقابل مسدود کردن روند رندرینگ HTML جلوگیری می‌کند.

۲. اطمینان حاصل کنید که فقط آنچه را که نیاز دارید بارگذاری می‌کنید

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

فشرده‌سازی و ذخیره‌سازی و تاثیر آن در front end

به طور کلی، برای تمام دارایی‌هایی که برای تصاویر و کد front end شما ضروری هستند باید از فشرده‌سازی استفاده کرده و آن‌ها را به درستی ذخیره کنید.

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

Brotli یکی دیگر از الگوریتم‌های فشرده‌سازی فایل است و محبوبیت آن در حال افزایش می‌باشد. این الگوریتم منبع باز به طور منظم توسط مهندسان نرم افزار از گوگل و سازمان‌های دیگر بروز می‌شود. این الگوریتم ثابت کرده است که فایل‌ها را با نسبت بسیار بهتری نسبت به سایر روش‌های موجود فشرده می‌کند.

با تغییر دادن فایل‌های پیکربندی، می‌توانید روش فشرده‌سازی دلخواه خود را در nginx، apache یا هر سروری که استفاده می‌کنید فعال سازید.

وقتی نوبت به ذخیر‌سازی پنهان می‌رسد، متداول‌ترین روش ذخیره سازی که توسط Lighthouse نیز توصیه می‌شود Leverage Browser Caching نام دارد. مجددا می‌توانید با تغییر دادن فایل‌های پیکربندی سرور خود، آن را فعال کنید.

نتیجه‌گیری

وقتی صحبت از وبسایت‌ها و برنامه‌های front end می‌شود، عملکرد موضوع مهمی است و باید آن را جدی بگیریم. امیدوارم این مقاله برای شما مفید واقع شده باشد.

منبع