Why is my website slow with Docker?

hack3rcon · May 5, 2025, 7:39am

Hello,
I have a website with a React frontend and a Laravel backend, using MariaDB as the database:

services:

  # React Frontend
  Frontend:
    container_name: Frontend
    build:
      context: /home/Projects/frontend/
      dockerfile: Dockerfile
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING="true"
      - WATCHPACK_POLLING="true"
      - NEXT_TELEMETRY_DISABLED=1
      - MAX_OLD_SPACE_SIZE=4096
    volumes:
      - /home/Projects/frontend/:/app
      - /app/node_modules          
    ports:
      - "127.0.0.1:3000:3000"               
    deploy:
      resources:
        limits:
          cpus: '4.0'
          memory: 4G

  # Laravel Backend
  Backend:
    build:
      context: /home/Projects/backend
      dockerfile: Dockerfile
    container_name: Backend
    entrypoint: ["/usr/local/bin/entrypoint.sh"]
    command: ["php-fpm"]
    network_mode: host
    environment:
      APP_ENV: local
      APP_DEBUG: "true"
      DB_HOST: host.docker.internal
      DB_PORT: 3306
      DB_DATABASE: laravel
      DB_USERNAME: root
      DB_PASSWORD: 123456
      PORTAL_VIEW_URL: http://127.0.0.1:3000
    volumes:
      - /home/Projects/backend:/var/www
    ports:
      - "127.0.0.1:9000:9000"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    deploy:
      resources:
        limits:
          cpus: '4.0'
          memory: 4G

Due to some issues I am connecting to MariaDB on the host.

Nginx is installed on the host and its configuration is as follows:

server {
    listen 80;
    server_name localhost your-public-ip your-domain.com;

    # Frontend React App
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # Backend API
    location /api {
        # Remove try_files for API routes
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME /var/www/public/index.php;
        
        include fastcgi_params;
        fastcgi_param HTTP_HOST $host;
        fastcgi_param X-Real-IP $remote_addr;
        fastcgi_param X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # Add CORS headers
        add_header 'Access-Control-Allow-Origin' 'http://localhost:3000' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Content-Type,X-Token-Auth,Authorization' always;
        
        # Handle preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'http://localhost:3000';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Content-Type,X-Token-Auth,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

My website is slow and clicking on each menu takes a few seconds to go to the next page. What solution do you suggest? Is there something wrong with the Docker configuration?

Thank you.

Zensei · May 5, 2025, 9:01pm

What a few seconds mean?. 4 secs, 2 secs?. What is the speed that is supposed to be good for you?.

Did you check your host CPUs and memory activity?. Everything is good in that front?.

Next you need to profile. You have frontend, backend, Database. Where is the slowness? A query to the database?. Some processing in your lavarel, too much interaction in the frontend?. Network latency?

hack3rcon · May 6, 2025, 5:58am

Hello,
Thank you so much for your reply.
It might take 10 seconds for a page to load. Also, no one is connected to this website yet and it is not overloaded with traffic. My server has 16 gigabytes and 4 CPU cores. When the container is running:

$ free
               total        used        free      shared  buff/cache   available
Mem:        16376552     2400212     7280180        1020     7034668    13976340
Swap:         998396        1328      997068

How do I know if this slowdown is related to querying the database or processing related to Lavarel or React?

Sometimes I get the following error when opening some pages, which is resolved by refreshing the page:

Zensei · May 6, 2025, 3:45pm

You did not post, how your CPUs are doing.

Yes, 10 secs is very slow, and once users start getting coming in, forget about it.

To find slowdown on the server side you can do a good old console log. Print the time to take to do a query call to the DB. Once is back if you are doing some processing with the return data, again measure the time of that processing. Also measure the time the request came to the server and return.
That should give and idea of any slowness on the server side, and tackle that issue.

On the client side, I don’t know very well react, but I heard it can slow down if there is too much re-rendering (a component change, made another component to re-render, that make another component to re-render, etc).
You’ll have to google how to profile react apps

hack3rcon · May 7, 2025, 7:39am

Hello,
Thanks again.
When I click on a page, the CPU usage percentage is as follows:

hack3rcon · May 7, 2025, 8:20am

Hello,
Thank you so much for your reply.
I have installed the MariaDB on the host and am using network_mode: host to connect to it. Does this affect the speed much?

Please share your experience.

hack3rcon · May 9, 2025, 11:47am

Hello,
The speed of running the website locally is as follows:

# curl -o /dev/null -s -w "%{time_total}\n" ht
tp://localhost
0.122404

But it is slow via URL. The developer accuses me that the problem is with the web server and the codes are correct. How can I prove this?

Thank you.

Zensei · May 9, 2025, 1:52pm

You have to work with your developer if you wan to resolve the issue (no blaming). I mentioned doing a Profiling, but you will need a developer help for that.

Do an actual call that an application will do. For example calling this page I get this:

$ curl -o /dev/null -s -w "%{time_total}\n" https://www.sitepoint.com/community/t/why-is-my-website-slow-with-docker/477109/7
1.878219

Notice that this speed will be much faster if you run the browser, since almost everything (specially javascript) will be already cached in the browser.

Use your browser Developer and show us an image of the network request.

Looking at your CPU image, why is Next.js together with PHP?. Next.js is a Node.js framework it does not need PHP. Next.js seems to be pretty busy doing something, it is calling PHP ?

Also I see MariaDB docker container and MariaDB in the host; which are you using?

hack3rcon · May 10, 2025, 5:56am

Hello,
Thanks again.
Their website’s front-end uses React and their back-end uses Laravel.
I opened the website login page and waited a few minutes but nothing loaded:

I refreshed the page until the login page was displayed:

I opened another page:

The performance tab is:

I’m using MariaDB on the host.

Zensei · May 12, 2025, 2:00am

You call to the login page, seems to worked fine. It made an ajax api request and return 200. The speed was 531ms which tell me your server is fast.

The second image is more interesting. You server is serving 2 javascripts files which are big in size main-app…js and layout.js taking 5.11s and 4.86s respectively. If I have to make a educated guess these are the files that your browser is processing before the user can see anything on the screen.
Notice like I said serving your server is just taking those file and delivering to the browser (no processing whatsoever). My understanding ideally those files shouldn’t be that big, ideally not more than 500k. I am not a React developer but I believe a developer can use tools to decrease the size of the files, and gzipped it.

Perhaps people here can give it some point how to to it.

Your server made another api call this time to user-current, returning 401 since probable you don’t have access to the app, taking 106ms of response time.

Your server is fine, a least for a single user. For multiple users you will have to do a load test to see how it behaves (number of users depend on the specification).

Good luck

hack3rcon · May 12, 2025, 7:12am

Hello,
Thanks again.
So, this is somehow related to the developer and not the server configuration?

Topic		Replies	Views
Are the containers configured correctly? Server Config nginx , docker	2	48	March 31, 2025
POST net::ERR_NAME_NOT_RESOLVED Server Config php , react-native , laravel , docker	8	109	April 8, 2025
Connecting the container to MariaDB on the host Server Config mysql , laravel , docker	8	118	April 12, 2025
Docker and Laravel Server Config laravel , docker	0	42	April 1, 2025
Docker says "SQLSTATE[HY000] [2002] Connection refused" Server Config docker	5	98	March 31, 2025

Why is my website slow with Docker?

Related topics