Slow network and cpu is 100% all the time

Question

I just deployed my react app which shows videos on it (previews on thumbnails, etc). On my localhost, if I run the react app and the server, its very fast. Videos load fast, its responsive etc (servers are hosted elsewhere). As soon as I go on my app hosted on droplet, the website loads fast, but the server response for images, video loading is super slow. It buffers every second, loading takes long time compared with localhost.

The app is running a very light express server with pm2 and yet the cpu is always 80-100% without anyone actually accessing the website.

Why is that?

mynameisjeff · Answer

Just to add some additional info. I restarted pm2 and it dropped to 3%, but the pm2 shows 0 cpu usage and 90mb of memory usage. Leaving it overnight the droplet shows 100% spike within couple of minutes from 3% to 100% and staying 100% for the past 6 hours

KFSys · Answer

Hello, I’m just posting the typical issues/resolutions to such cases. They are almost every time connected with two things - Website Optimization and Server/Droplet Optimization. Let’s start with Server Optimization. When looking at Server/Droplet Optimization, there are a few necessary services/packages that are universal. The first one would be Server-side caching . Server cache is an umbrella term covering a number of different types of caching. This includes Content Delivery Network (CDN) caching , object caching , and opcode caching . Depending on what you want to achieve you might need one or the other. Usually, though, you can have all 3 types of caching as it shouldn’t interfere with your Website/App. I won’t go into more details about what each caching does as this post will become 3 pages long. There are multiple documents providing services/packages for each of the server-type caching. Next would be using PHP-FPM (if your Website is using PHP of course). PHP-FPM is an efficient method on how to minimize the memory consumption and rise the performance for the Websites with heavy traffic. It is significantly faster than traditional CGI-based methods in multi-user PHP environments. Another solution would be Database Caching. A database cache supplements your primary database by removing unnecessary pressure on it, typically in the form of frequently accessed read data. The cache itself can live in a number of areas including your database, application or as a standalone layer. Usually, for this kind of caching is being used Redis. Apache optimization(if present) Apache NPM modules. If you are using Apache, you are using one of three NPM modules. Most certainly if you haven’t configured anything on it and have used the default configuration, you are using NPM_Prefrok which is the most outdated one and thus the slower. I’ll recommend using one of the other two - NPM_Worker and NPM_Event depending on your situation. Again, I would urge you to read more about these 3 and what is applied in which case. Apache Workers. Basically, the Apache workers are equivalent to a room full of seats. These seats are the projection to your website. When someone opens your website, it’s like one person going to this room and sitting on one of the chairs. When the limit is reached, in order for a person to load your website, another one needs to close it. So basically, I’ll suggest increasing that value as well. Those were the basic optimizations on a server level, let’s start with your Website/App If you are using a CMS like WordPress, Magento, Joomla, Opencart or anything of the same matter, there will be plugins/addons. These addons can be very powerful if used correctly. The most helpful plugins are: Caching Plugins Image Optimization Plugins Plugins that reduce redirections/requests Plugins that reduce the size of JS and CSS files. More often than not, there are a lot of JS and CSS files that are not being used, removing those should work as well If you are not using a CMS, you’ll need to try and do what these plugins are doing manually. Usually, Websites/Apps are slow because of a couple of reasons which range from too many requests or big images to a bunch of unnecessarily big JS or CSS files. Optimizing these whether you are using a Plugin or doing it manually is enough. I hope this was helpful. Regards,KFSys

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today

Report this

Slow network and cpu is 100% all the time

Related questions

How to Deploy a Django + Next.js Application on DigitalOcean App Platform

How to create Gradient KB via API?

Error when starting the React Tutorial App

problems when I try to run my project in the droplet

Fullstack Architecture Deployments Recomendations

How to set automation (CI-CD)

I can't reach sub urls on my react app

React routing not working on static site

Google Search Console indexing errors for static website on app platform

Getting error in React Js application - App Platform

Deployment failing regarding not finding a declaration file that works perfectly fine on local host

How to upload images to Digital Ocean spaces bucket using Expo and AWS sdk

Report this

Slow network and cpu is 100% all the time

Related questions

How to Deploy a Django + Next.js Application on DigitalOcean App Platform

How to create Gradient KB via API?

Error when starting the React Tutorial App

problems when I try to run my project in the droplet

Fullstack Architecture Deployments Recomendations

How to set automation (CI-CD)

I can't reach sub urls on my react app

React routing not working on static site

Google Search Console indexing errors for static website on app platform

Getting error in React Js application - App Platform

Deployment failing regarding not finding a declaration file that works perfectly fine on local host

How to upload images to Digital Ocean spaces bucket using Expo and AWS sdk