چگونه سرعت برنامه وب خود را افزایش دهیم

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

همه چیز به نوع برنامه وب و موقعیت خاص بستگی دارد، اما من به شما خواهم گفت که چگونه برنامه وب را سریعتر و پاسخگوتر کنید. من بهینه سازی برنامه وب را به دو بخش تقسیم کردم: بهینه سازی front-end و بهینه سازی back-end.

بهینه سازی Front-end

هر چیزی که برای بهینه سازی نیاز دارید از دیدگاه موتورهای جستجو به شما خواهد گفت https://pagespeed.web.dev/

فشرده سازی تصاویر

کاربر نیازی به تصاویر با حداکثر کیفیت ندارد، کافی است که آنها واضح باشند. برای دستیابی به نتایج حتی بیشتر، می توانید تصاویر را به فرمت WebP تبدیل کنید، فایل های این فرمت 26٪ کوچکتر از jpeg هستند.

تعداد درخواست ها به سرور را کاهش دهید

یعنی همه فایل های js را در یک فایل ترکیب کنید یا همه آنها را به صورت موازی دانلود کنید. برای فایل های CSS هم همینطور. با استفاده از آیکون های درون خطی تعداد آیکون ها را کاهش دهید.

Minification JS، CSS، HTML

Webpack زمانی که فایل‌های JS و CSS را در حالت تولید می‌سازیم، به‌طور پیش‌فرض کوچک می‌کند. اما سبک ها یا کلاس های بی فایده را حذف نمی کند. برای این کار می توانید از کتابخانه هایی مانند https://purgecss.com/ استفاده کنید
فراموش نکنید که وابستگی را بررسی کنید، فقط عملکردی را که استفاده می کنید وصل کنید.

حافظه پنهان مرورگر

PWA یکی از ابزارهایی است که به شما امکان می دهد تا اطلاعات خود را در مرورگر کش کنید تا جایی که بتوانید به طور کامل بدون اینترنت با برنامه وب کار کنید. اما اگر نمی‌خواهید زیاد در آن غوطه‌ور شوید، فقط می‌توانید سربرگ Expires HTTP را تنظیم کنید و فایل‌های استاتیک به طور خودکار در حافظه پنهان در مرورگر ذخیره می‌شوند.
همچنین می‌توانید از محل ذخیره‌سازی محلی، کوکی‌ها، ذخیره‌سازی جلسه، IndexedDB، Web SQL، ذخیره‌سازی کش به دلخواه استفاده کنید. انبارهای مختلف مزایا و معایب خود را دارند.

سوکت های وب

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

بارگذاری تنبل

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

CDN

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

بهینه سازی Backend

OpCache

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

فشرده سازی Zip یا Gzip

سرورهای وب مانند apache و nginx می توانند داده ها را در لحظه فشرده سازی کنند.

این کار به راحتی با Nginx قابل انجام است

server {
    ...
    gzip off;
    ...
}

دو ماژول مسئول فشرده سازی در آپاچی هستند. ماژول اول mod_deflate و مدول دوم mod_gzip نام دارد که فقط یکی از آنها باید فعال شود. اما این یک بار اضافی بر روی سرور وارد می کند. با mod_gzip، باید هر فایل را خودتان فشرده کنید و در ریشه سایت آپلود کنید.

بهینه سازی پایگاه داده

معمولاً خود سرور به سرعت کار می کند و در اکثر موارد به دلیل درخواست های سنگین و متعدد به پایگاه داده، پاسخ طولانی سرور رخ می دهد.
در این مورد، لازم است بررسی شود که آیا مشکل درخواست N+1 برای مثال زمانی که درخواست ها در یک چرخه رخ می دهند، ایجاد نمی شود یا خیر. در صورت رفع این مشکل، باید بررسی شود که آیا تمام ایندکس های لازم درج شده اند یا خیر. بهینه سازی پایگاه داده یک موضوع بزرگ جداگانه است که در این مقاله به آن توجه نمی کنم.
روش‌های مدیریت داده‌ها مانند کش کردن داده‌ها و صف‌بندی برخی درخواست‌ها نقش مهمی دارند. در دو نکته بعدی به تفصیل در این مورد صحبت خواهم کرد.

کش داده ها

بسیاری از داده ها به ندرت به قدری تغییر می کنند که ذخیره سازی آن ها با استفاده از فروشگاه های داده پرسرعت صحیح است. بسته به سرعت، قابلیت اطمینان، هزینه و مقدار داده، حافظه های مختلفی مانند File، Memcache، Redis و غیره وجود دارد.

دم

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

مقیاس بندی

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

من راه حل های اصلی را که می تواند سرعت برنامه وب را بهبود بخشد توضیح دادم. در هر صورت باید با در نظر گرفتن نوع وب اپلیکیشن، ساختار و هدف آن به دنبال مشکل و انتخاب رویکردها بود.