Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is Google PageSpeed Insights telling me to minify javascript & CSS (using Rails 3.2 with JS & CSS compression) and how to fix?

I know it's not a lot I could save in KB, but to achieve a better score in Google PageSpeed Insights, and thus probably better SEO ranking, how can I fix this?

From https://developers.google.com/speed/pagespeed/insights/?hl=en&url=www.tradebench.com :

Minify JavaScript for the following resources to reduce their size by 2.8KiB (2% reduction). Minifying http://d2bfamm4k6zojq.cloudfront.net/…tion-ea806932c941fb875b7512a557ebead3.js could save 2.8KiB (2% reduction) after compression.

It tells me the same thing for my CSS file.

From my production.rb file:

config.assets.compress = true
config.assets.js_compressor  = Uglifier.new(:mangle => true)
config.assets.css_compressor = :yui

Looking at the uglifier docs/options, I don't see how I could configure it to get the last 2KB.

Anyone has an idea how to get it to compress the last tiny bit to remove the PageSpeed notice about it? Maybe use another compressor than Uglifier?

Thanks :-)

like image 926
rassom Avatar asked Feb 21 '14 14:02

rassom


1 Answers

If you just inspect your minified js, you will see that the code is minified but every js lib you include has its own copyright and license information at the top(which is correct), like the following snippet:

/**
 * Copyright 2009 SomeThirdParty.
 * Here is the full license text and copyright
 */

If you really want to achieve complete minification on your rails app and get rid of the 2% extra compression notice of pagespeed insights you could do so by having the following setting:

config.assets.js_compressor = Uglifier.new(copyright: false)

or

config.assets.js_compressor = Uglifier.new(output: { comments: :none })

NOTE1: Both of the above will minimize your application.js without any comments.

NOTE2: With both of the settings above, uglifier removes all the copyright information from your minified js and thus your app achieve the total minification required from google pagespeed and you gain +1 point at your score.

However, you should not avoid to include the copyrights of the code you are using. Most of the licenses (MIT, BSD, GPL...) require that you keep the copyright and licensing information whenever you redistribute the library. When you allow browsers to download a compressed copy of the library from your server or from your CDN counts as you redistributing the library. Thus you SHOULD INCLUDE the copyright and license information at some place of your app.

How to

One thing you could do is to collect all the copyright information of your js libraries you are using on your app and add them all in a licenses.txt and place it at your public folder. Your public/licenses.txt should look like the following:

/**
 * Unobtrusive scripting adapter for jQuery
 * https://github.com/rails/jquery-ujs
 *
 * Requires jQuery 1.8.0 or later.
 *
 * Released under the MIT license
 *
*/
[...and the rest copyrights here one after the other]

Then by using a link tag specify the location of this file on the html head of the app(layouts/application.html):

<head>
  <!-- License information of used libraries -->
  <link rel="license" href="../licenses.txt">
</head>

The rel=license denotes that: the main content of the current document is covered by the copyright license described by the referenced document.

Finally, if you want to be more correct with this one, you should include just one comment on the minified application.js just to let someone where exactly can find all the copyright information(in case of whatever..). In order to do that, add the following comment on top of your application.js file:

/*!LC
 * Copyright and Licenses: http://www.example.com/licenses.txt
*/

so your application.js might look like the following:

/*!LC
 * Copyright and Licenses: http://www.example.com/licenses.txt
*/ 
//= require jquery
//= require jquery_ujs
//= [..rest of your requires]

NOTE: I have distinguish this comment with an !LC at the start. You need this one to pass a regexp to the uglifier so it will allow ONLY THIS comment on the minified js. To do that, go to your production.rb and place the following:

config.assets.js_compressor = Uglifier.new(output: { comments: /^!LC/ })

Uglifier will allow only the !LC comment on top of your minified js file, you wont get warning on the pagespeed insights for just one comment. If you do all these you will be totally fine, you get full score on pagespeed insights, you have completelly minified .js for optimal delivery and you have all your copyrights at a place for any legal issues.

like image 171
aloucas Avatar answered Oct 13 '22 10:10

aloucas