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

≡放荡痞女 提交于 2019-12-03 06:15:57

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!