First time loading of Angular application in Chrome very slow

General
1

I have an Angular application based on an nginx image started as Docker container on an Ubuntu 22.04 server.

If the login screen of this application is loaded in Chrome, the performance sometimes is very bad. It takes up to 5 minutes to load the login page. DevTools - Network shows pending status for javascript, css and svg files. During loading of login page, the application doesn’t send any requests to the backend and therefore nothing is accessed from the database.

The weird thing is: about half of the time first time loading is fast (1-3 seconds) and half of the time it takes a few minutes.

This is my scenario. Everything is running as a Docker container:

  • Angular frontend application (based on nginx image)
  • Laravel backend application with nginx and application container
  • Nginx Reverse Proxy
  • MySql databases in one container
2

The performance issue doesn’t only occur in Chrome, but also in Microsoft Edge. Running the Angular application without Docker, there is no performance issue.

3

Hard to say without more information, but maybe this will help (warning: only for development, not for production / CORS misconfigurations can have a significant impact on the security of web applications)

If you use docker compose with bind mounts this might be a better alternative:

4

Share your docker-compose.yml and Dockerfiles if used.

5

I had a look on the suggestions of bluenobly:

  • 4 steps to improve Laravel + Docker performance issues:
    1. Checking for DNS issues: I tried it, but nothing changed
    2. Installing PHP Opcache: was already installed in our PHP backend. But the problem is not on backend side, but loading of javascript, css or svg files on frontend side before any request is sent to the backend.
    3. Configuring Nginx to handle OPTIONS requests: see 2.
    4. Installing docker-sync: every documentation I found about this point, says that it improves performance on Mac and Windows, but not on Ubuntu
  • Use Compose Watch: the Angular frontend only shares /etc/ssl with SSL certificates as a volume.

Here are my Angular frontend Docker files:

docker-compose.prod.yml

version: '3.8'

services:
  app:
    restart: always
    build:
      context: .
      dockerfile: Dockerfile.prod
    container_name: employee-dialogue-frontend
    image: "angular-employee-dialogue"
    networks:
      - employee-dialogue
    ports:
      - 8443:443
    volumes:
      - /etc/ssl:/etc/nginx/certs

networks:
  employee-dialogue:
    name: employee-dialogue-frontend

Dockerfile.prod

-### STAGE 1: Build application Docker image (called build) ###
FROM node:16-alpine as build

-# Install packages to make npm able to pull git repositories & more useful packages
RUN apk add --update \
      python3 \
      python3-dev \
      py-pip \
      build-base \
      git \
      openssh-client && \
    pip install virtualenv && \
    rm -rf /var/cache/apk/*

-# Define working directory
WORKDIR /app

-# Install Angular client globally
RUN npm install -g @angular/cli

-# To reduce unnecessary rebuilds, copy package.json first (npm install depends only on it)
COPY ./package.json .

-# Install dependencies
RUN npm install --legacy-peer-deps

-# Copy source files (including package.json again)
COPY . .

-# generate build
RUN npm run build:docker

-### STAGE 2: Copy dist folder and nginx.conf to nginx -> nginx is starting automatically ###

-# Base image
FROM nginx:alpine

-# Copy artifact build from the 'build environment'
COPY --from=build /app/dist /usr/share/nginx/html

-# Make sure that icons can be loaded
RUN chmod -R 775 /usr/share/nginx/html/assets

-# Extend the default server configuration
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf

-# Expose ports (only for better readability)
EXPOSE 80 443

.dockerignore

Dockerfile
Dockerfile.prod
docker-compose.yml
docker-compose.prod.yml

-# compiled output
/dist
/documentation

-# dependencies
/node_modules

-# IDEs and editors
.angular
.git
.idea

-# e2e
/e2e/*.ts
/e2e/*.map

nginx.conf

server {
  listen 80;
  listen  [::]:80;

  server_name localhost;

  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;

  ssl_certificate     /etc/nginx/certs/certificate.crt;
  ssl_certificate_key /etc/nginx/certs/certificate.key;

  server_name localhost;

  error_log /var/log/nginx/employee_dialogue.log debug;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }

  include /etc/nginx/extra-conf.d/*.conf;
}
6

After reading it again, I think it’s more likely to be the NGINX web server. If there are only sometimes performance drops and only with static files, then it is more likely that it is due to the NGINX configuration.

If you search for it, you will see that you are not alone with the problem: nginx static files slow - Google Search

You should check your NGINX configuration to see if you can optimize settings such as sendfile_max_chunk or worker_processes.

It is also possible that the problems only exist if there is too much access to your application.
Maybe it will help to improve the performance. The blog post is a little older but most of it should still be valid today (Note on the implementation of HTTP/2 and SPDY in the article - HTTP/3 has been standardized as RFC 9114 in 2022):

Optimizing the caching of static files and activating Gzip compression can also prevent such perfomancy drops (warning: only for production, not for development):

And as a bonus Server-side rendering:

Note: It is also possible that hardware problems on the server explain the bottleneck in accessing static files. For example, a defective hard disk, a processor that is too slow, too little memory or a hard disk that is too slow. Perhaps resources for Docker or the container are also limited too much.

And just another tip:

Try NGINX Unit instead of NGINX.
Unit is a modern and powerful web server and an app runtime environment that is stable even with high data traffic.

@christinehabel Don’t forget to format your posts / posted file contents. Please follow the guidelines: How to format your forum posts

1 Like
7

I did it for you this time @christinehabel, but the Dockerfile doesn’t seem to be a valid Dockerfile. I guess, you tried to make it a list. Please, next time do what @bluenobly suggested with the shared link

9

Found the issue described in nginx with upstream occasitionaly delays exact 1 minute - Stack Overflow.
Frontend is now deployed locally and accessed via nginx proxy_pass container-name.

Ticket can be closed