ngx_pagespeed Load JS Libraries from Google CDN tutorial

Why load JavaScript libraries from Google CDN?

JavaScript libraries have become core of almost all website.JavaScripts libraries like jQuery are very common to find.Most Content Management systems like WordPress use them to implement various functionality. Apart from JavaScript libraries Google Fonts are also very common.Most modern themes are using Google Fonts to enhance readability experience of the visitors.

WordPress does ship with local copy jquery.So if a page of your website needs jquery then local copy of jquery is loaded.I am sure other content management systems also ship with local copies of jquery or other libraries.The size of these libraries are in several KB’s (for example jQuery itself is of 95KB). They increase size of your web page drastically.Also it requires extra request to fetch these libraries from your server.So additional HTTP request is required.Usage of these libraries significantly increase website load time. But it is important to use them as they simplify implementing many tasks.

So these libraries are necessary evil.You can not remove them. The best you can do is to not burden your website with too many libraries.The second approach is to minimize performance impact of your website.For this you can load them from CDN (Content Delivery Network). The best part of second approach is that Google hosts many JavaScript libraries.So Instead of loading these libraries from your server it is better to load from Google.

This approach has one additional benefit.Lets assume website A is loading these libraries from Google.A visitor visits website A.Then the browser cache of visitor will have these libraries.Now the same visitor visited your webpage.As you are also loading these libraries from Google visitor browser cache will come into picture.This will further enhance your website load time.

READ  Nginx with SPDY configuration tutorial

Which JavaScript libraries are supported by ngx_pagespeed

There are many ways to load these libraries but I will discuss Google PageSpeed in this post.Below is the list of libraries Google PageSpeed supports.If you are using any one of the below libraries then you can use steps mentioned in this tutorial.The libraries are

  • jQuery
  • Google Fonts
  • AngularJS
  • Chrome Frame
  • Dojo
  • Ext Core
  • jQueryMobile
  • jQueryUI/li>
  • MooTools
  • Prototype
  • Swfobject
  • Threejs

ngx_pagespeed configuration steps

Now lets come to ngx_pagespeed configuration.I would not cover detailed ngx_pagespeed configuration in this post.As it is already covered in a separate post.This post assumes that you have read the complete configuration post and have ngx_pagespeed installed on your server.Now follow below steps to load JavaScript libraries from Google CDN

Step 1:

Download ngx_pagespeed source from this link.You can directly download it on your server.Preferably home directory or any other user directory.Or you can download in your desktop or laptop and then upload to server.

Step 2:

After uploading to the server extract the zip file


Step 3:

Now run below commands to change your working directory

cd ngx_pagespeed-master
cd scripts

Step 4:

Now run

./ > pagespeed_libraries.conf

This will generate Nginx format PageSpeed command to load the files from Google CDN.It translates Apache format to Nginx format.Now lets move to Nginx configuration part.Next steps assume that your Nginx configuration directory is /etc/nginx.In case it is differewnt then change the directory name as per your Nginx installation.

Step 5:

Copy the pagespeed_libraries.conf file created in previous step in Nginx configuration directory.

mv pagespeed_libraries.conf /etc/nginx/

Step 6:

Open your nginx.conf file located inside /etc/nginx.Add below line in http { block.

include pagespeed_libraries.conf

Step 7:

Now add below filter to your ngx_pagespeed configuration section

pagespeed EnableFilters canonicalize_javascript_libraries;

Step 8:

The basic configuration is done.Now you can reload the Nginx configuration changes just made and see faster loading of the site.

service nginx reload

Advanced Configuration

Some websites recommend skipping jQuery from pagespeed processing.They recommend using below directive to skip these files from getting rewritten by ngx_pagespeed.

pagespeed Disallow "*jquery*";

But if you use above command then jQuery will not be loaded from Google CDN.Above directives skips jquery from being rewritten.You can use similar command to skip loading of other JavaScript libraries you are loading from Google CDN.Some websites do face problem if these JavaScript libraries are rewritten.In case you find any issues on your website using this tutorial then you can use above command to skip processing of these libraries.

It the problem resolves then issue is with these libraries getting rewritten.If problem still is there then there might be some other cause.


I am using the approach mentioned in this post on this website.It is working well for me.You can also try the same and let me know your experience.

READ  Migrating from HTTP to HTTPS for SEO tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *