How Did I Improve My Angular Project's Loading Speed?

Problems

My URL Shortener project has been deployed by Kubernetes for high availability but it seems to be not perfectly “high availability” because of the low loading speed(you could even see the plain text without any style applied when you first open up the website).

I was trying to solve this problem by checking all CSS files, images, even to get rid of them, but that still did not work.

Another serious problem is that the pipeline ran very slowly, needing like almost 10 minutes to finish building and upload a docker image.

Reasons

• Used express.js to run the angular application.

• Ran npm i and npm build in a docker container.

• npm build is not good for a production-level website

• No resources cache was used for the website.

Solutions

• Change npm run build to npm run build --configuration=production -aot

  • –configuration=production is typically optimized for production environments with features like minification and tree shaking enabled.

  • –aot enables Ahead-of-Time (AOT) compilation. AOT compilation pre-compiles the Angular templates during the build process, resulting in faster rendering and reduced bundle size compared to Just-in-Time (JIT) compilation.

• Do not run npm install; npm run build in Dockerfile, instead, all the commands to build the Angular application should be executed in a pipeline. Then resources will need to be copied to Nginx in the docker container using Dockerfile.

• Instead of using express.js, use Nginx to handle the static resources.

• Nginx Gzip compression

Nginx deafult.conf : This change should be applied to both the Angular container and the Kubernetes node because I used Nginx to handle different API requests.

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

    #access_log  /var/log/nginx/host.access.log  main;
    gzip on;
    gzip_http_version 1.1;
    gzip_disable      "MSIE [1-6]\.";
    gzip_min_length   1100;
    gzip_vary         on;
    gzip_proxied      expired no-cache no-store private auth;
    gzip_types text/plain application/json application/x-javascript application/javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
    gzip_comp_level   6;
    location / { 
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

Result

Website Loading Speed

To fully load all the resources when first visiting the website, around 8 sec is needed. This is a highly optimized result compared to the previous time(over 15 sec).

Pipeline

Improvements

There are still some issues that need to be fixed

• The loading speed can be improved further - based on the code itself.

• Trying to use Lazy Loading