How to handle 404 not found Pagespeed optimized resources in Nginx

Pagespeed rename the static resources (like images, CSS, etc.) file name to mark as optimized and there instances where the Pagespeed optimized web pages' resources returns 404 not found and for several browser refresh they eventually loads up. In this case, Pagespeed is still in the process of optimizing the web pages' resources. We can handle this issue by the following Nginx script:

  
## Pagespeed optimized resources that returns 404, redirect to original resource
location ~ (.+)/x(.+),(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
  # Handle resources with query string and Pagespeed optimized resources with 
  # file name prefixed with x (eg. xMyImage.png,qitok=qwer.pagespeed.asdf.webp)
  error_page 404 = @orig_resource;
  set $orig_resource_uri $1/$2?$3;
  try_files $uri $uri/ $orig_resource_uri;
}
location ~ (.+),(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
  # Handle resources with query string
  error_page 404 = @orig_resource;
  set $orig_resource_uri $1?$2;
  try_files $uri $uri/ $orig_resource_uri;
}
location ~ (.+)/x(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
  # Handle Pagespeed optimized resources with file name prefixed with x
  # (eg. xMyImage.png.pagespeed.asdf.webp)
  error_page 404 = @orig_resource;
  set $orig_resource_uri $1/$2;
  try_files $uri $uri/ $orig_resource_uri;
}
location ~ (.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
  # Default handler
  error_page 404 = @orig_resource;
  set $orig_resource_uri $1;
  try_files $uri $uri/ $orig_resource_uri;
}
## Redirect Pagespeed optimized resources that returns 404 to 
## original resource.
location @orig_resource {
  return 302 $scheme://$server_name$orig_resource_uri;
}
  

The script above will catch the Pagespeed renamed resource static files then check the existence of Pagespeed renamed resource static file first and if not found it redirect to original resource. It is recommended to place the script in this manner:

  
server {
  
  # ... your server context script
  
  location / {
    
    # ... some location context script
    
    ## Pagespeed optimized resources that returns 404, redirect to original resource
    location ~ (.+)/x(.+),(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
      # Handle resources with query string and Pagespeed optimized resources with 
      # file name prefixed with x (eg. xMyImage.png,qitok=qwer.pagespeed.asdf.webp)
      error_page 404 = @orig_resource;
      set $orig_resource_uri $1/$2?$3;
      try_files $uri $uri/ $orig_resource_uri;
    }
    location ~ (.+),(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
      # Handle resources with query string
      error_page 404 = @orig_resource;
      set $orig_resource_uri $1?$2;
      try_files $uri $uri/ $orig_resource_uri;
    }
    location ~ (.+)/x(.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
      # Handle Pagespeed optimized resources with file name prefixed with x
      # (eg. xMyImage.png.pagespeed.asdf.webp)
      error_page 404 = @orig_resource;
      set $orig_resource_uri $1/$2;
      try_files $uri $uri/ $orig_resource_uri;
    }
    location ~ (.+)\.pagespeed\.[\.\-_[:alnum:]]+$ {
      # Default handler
      error_page 404 = @orig_resource;
      set $orig_resource_uri $1;
      try_files $uri $uri/ $orig_resource_uri;
    }
  }
  ## Redirect Pagespeed optimized resources that returns 404 to 
  ## original resource.
  location @orig_resource {
    return 302 $scheme://$server_name$orig_resource_uri;
  }
}
  

Comments

hi my friend i get a 404 on images that are rewritten too. do you have a solution for apache server wordpress?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.