How to speed up delivery for static files with nginx? (Cache them in memory?)

12,918

Your problem could be the DNS lookup that is needed for the connection to be established with a new domain where your CSS is hosted.

Share:
12,918

Related videos on Youtube

user2015253
Author by

user2015253

Updated on June 04, 2022

Comments

  • user2015253
    user2015253 over 1 year

    My setup (running on Debian 7):

    1. nginx on port 80

    2. apache on port 8080

    3. Using proxy_pass http://127.0.0.1:8080 in nginx to push all dynamic (php) requests to apache

    4. Using a static subdomain to deliver static content (img, css, js,...) directly via nginx (without using apache). The config looks like this:

      server {
          server_name static.DOMAIN.net;
          root /var/www/DOMAIN.net/static/;
          access_log off;
          error_log /var/log/nginx/DOMAIN.net/error.log;
          location / {
              expires max;
              add_header Pragma public;
              add_header Cache-Control "public, must-revalidate, proxy-revalidate";
          }
      }
      

    What it currently does with static files, from my understanding, is that nginx grabs the file from /var/www/DOMAIN.net/static/ and delivers it, adding the header information that this file doesn't expire for a long time but the client should always check back if there is a newer version (because currently these static files are updated every now and then and I want them to make sure that the clients use the latest css and imgs). Basically I tell the clients to cache the static stuff in their browser.

    My problem: I have a website with a minified css file of ~12 KB size. Now a user visits DOMAIN.net/some.php. According to Google's Critical Path Explorer it takes ~5ms to deliver the html-result to the requesting user. This is fine. Then the css is being sent and takes 300-400ms. The critical path in this case obviously goes "load html, THEN load css, THEN done". Basically that means that it takes ~400ms until the user's browser can display the website, then starting to asynchronously request the images and display them as they arrive. The images are loaded pretty slow too for their size, but at least they don't block the website from loading/displaying in the browser. So I really need to speed up the delivery of static files. Proof that the delivery of the 12KB css in 400ms is pathetic: I also use the file http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js on this website. This file is much bigger but only takes ~10ms to deliver. I know I'm not google and may not reach their times, but my current delivery time is just bad.

    My theory: I need to change nginx, so that it caches the static files in memory. I researched abit about nginx and caching files, but all I found for this are commands like proxy_cache which are meant for another purpose though (in my setup I would use it to cache stuff that nginx gets from apache - I don't want to cache the dynamic php stuff though, I want to cache the static css and images).

    So: How do I speed up static file delivery? Can nginx somehow store the files in memory? What else could I speed up the delivery?

    The current nginx.conf:

    user www-data;
    worker_processes 4;
    pid /var/run/nginx.pid;
    
    events {
            worker_connections 4096;
            # multi_accept on;
    }
    
    http {
    
            ##
            # Basic Settings
            ##
    
            sendfile on;
            tcp_nopush on;
            tcp_nodelay on;
            keepalive_timeout 5;
            types_hash_max_size 2048;
            server_tokens off;
    
            server_names_hash_bucket_size 64;
            server_name_in_redirect off;
    
            include /etc/nginx/mime.types;
            default_type application/octet-stream;
    
            ##
            # Logging Settings
            ##
    
            access_log /var/log/nginx/access.log;
            error_log /var/log/nginx/error.log;
    
            ##
            # Gzip Settings
            ##
    
            gzip on;
            gzip_buffers 16 8k;
            gzip_comp_level 6;
            gzip_http_version 1.1;
            gzip_min_length 10;
            gzip_types text/plain text/css image/png image/gif image/jpeg application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript im$
            gzip_vary on;
            gzip_proxied any;
            gzip_disable "MSIE [1-6]\.(?!.*SV1)";
    
            ##
            # Proxy Settings
            ##
    
            proxy_connect_timeout 90;
            proxy_send_timeout 90;
            proxy_read_timeout 90;
            proxy_buffer_size 4k;
            proxy_buffers 4 32k;
            proxy_busy_buffers_size 64k;
            proxy_temp_file_write_size 64k;
    
            ##
            # nginx-naxsi config
            ##
            # Uncomment it if you installed nginx-naxsi
            ##
    
            #include /etc/nginx/naxsi_core.rules;
    
            ##
            # nginx-passenger config
            ##
            # Uncomment it if you installed nginx-passenger
            ##
    
            #passenger_root /usr;
            #passenger_ruby /usr/bin/ruby;
    
            ##
            # Virtual Host Configs
            ##
    
            include /etc/nginx/conf.d/*.conf;
            include /etc/nginx/sites-enabled/*;
    }
    

Related