Primefaces 4.0 resource compression

Question

I have Primefaces 4.0 running on top of JBoss 7.1.1.Final. I am using google webutilities (https://code.google.com/p/webutilities/) to compress and combine my javascript and CSS files. When I run PageSpeed insights on my page all my custom css and js files seem to be compressed and do not output any problems on the page. But then again all Primefaces resources seem to skip all the filters. Here is my webutilities configuration:

<!-- UTF-8 Encoding filter -->
<filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>com.googlecode.webutilities.filters.CharacterEncodingFilter</filter-class>
    <!-- init params  -->
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
        <param-name>force</param-name>
        <param-value>true</param-value> <!-- true if you wanted to force encoding  -->
    </init-param>
    <init-param>
        <param-name>ignoreURLPattern</param-name>
        <param-value>.*\.(png|gif|jpg|tiff|bmp|mpg|jpeg)</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

<!-- Response cache filter -->
<filter>
    <filter-name>responseCacheFilter</filter-name>
    <filter-class>com.googlecode.webutilities.filters.ResponseCacheFilter</filter-class>
    <init-param>
        <param-name>acceptMIMEPattern</param-name>
        <param-value>text/javascript,application/javascript,text/css</param-value>
    </init-param>
    <init-param>
        <param-name>acceptURLPattern</param-name>
        <param-value>.*\.(js|json|css).*</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>responseCacheFilter</filter-name>
    <url-pattern>*.js</url-pattern>
    <url-pattern>*.json</url-pattern>
    <url-pattern>*.css</url-pattern>
</filter-mapping>

<!-- Compression filter -->
<filter>
    <filter-name>compressionFilter</filter-name>
    <filter-class>com.googlecode.webutilities.filters.CompressionFilter</filter-class>
    <init-param>
        <param-name>compressionThreshold</param-name>
        <param-value>512</param-value> <!--  anything above 512bytes  -->
    </init-param>
    <init-param>
        <param-name>ignoreURLPattern</param-name>
        <param-value>.*\.(png|gif|jpg|tiff|bmp|mpg|jpeg).*</param-value>
    </init-param>
    <init-param>
        <param-name>ignoreMimes</param-name>
        <param-value>images/*,video/*, multipart/x-gzip</param-value> <!-- ignore -->
    </init-param>
    <init-param>
        <param-name>ignoreUserAgentsPattern</param-name>
        <param-value>.*MSIE.*</param-value> <!-- regex -->
    </init-param>
</filter>
<filter-mapping>
    <filter-name>compressionFilter</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

<!-- Minify css, js and json filter -->
<filter>
    <filter-name>yuiMinFilter</filter-name>
    <filter-class>com.googlecode.webutilities.filters.YUIMinFilter</filter-class>
    <init-param>
        <param-name>lineBreak</param-name>
        <param-value>8000</param-value>
    </init-param>
    <init-param>
        <param-name>acceptMIMEPattern</param-name>
        <param-value>text/javascript,application/javascript,text/css</param-value>
    </init-param>
    <init-param>
        <param-name>acceptURLPattern</param-name>
        <param-value>.*\.(js|json|css).*</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>yuiMinFilter</filter-name>
    <url-pattern>*.js</url-pattern>
    <url-pattern>*.json</url-pattern>
    <url-pattern>*.css</url-pattern>
</filter-mapping>

Also I have tried to set the following parameters to web.xml:

<context-param>
    <param-name>org.primefaces.extensions.DELIVER_UNCOMPRESSED_RESOURCES</param-name>
    <param-value>false</param-value>
</context-param>
<context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Production</param-value>
</context-param>

But still the output of the PageSpeed gives me the following how to get the page performance better:

**Enable compression for the following resources to reduce their transfer size by 567.5KiB (75% reduction).**
Compressing http://localhost:8888/.../primefaces.js.xhtml?... could save 213.8KiB (79% reduction).
Compressing http://localhost:8888/.../jquery-plugins.js.xhtml?... could save 156.1KiB (72% reduction).
Compressing http://localhost:8888/.../jsf.js.xhtml?... could save 84.3KiB (78% reduction).
Compressing http://localhost:8888/.../jquery.js.xhtml?... could save 67.1KiB (65% reduction).
Compressing http://localhost:8888/.../primefaces.css.xhtml?... could save 42.3KiB (81% reduction).
Compressing http://localhost:8888/.../watermark.js.xhtml?... could save 3.3KiB (63% reduction).
Compressing http://localhost:8888/.../hotkey.js.xhtml?... could save 660B (45% reduction).

**Minify JavaScript for the following resources to reduce their size by 84.4KiB (20% reduction).**
Minifying http://localhost:8888/.../jsf.js.xhtml?... could save 78.4KiB (72% reduction). See optimized content
Minifying http://localhost:8888/.../jquery-plugins.js.xhtml?... could save 3.6KiB (2% reduction). See optimized content
Minifying http://localhost:8888/.../jquery.js.xhtml?... could save 551B (1% reduction). See optimized content

**Minify CSS for the following resources to reduce their size by 4.1KiB (8% reduction).**
Minifying http://localhost:8888/.../primefaces.css.xhtml?... could save 2.7KiB (6% reduction). See optimized content
Minifying http://localhost:8888/.../theme.css.xhtml?... could save 1.4KiB (24% reduction) after compression. See optimized content

**605.3KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.**
http://localhost:8888/.../primefaces.js.xhtml?... (219.5KiB)
http://localhost:8888/.../jquery-plugins.js.xhtml?... (191.8KiB)
http://localhost:8888/.../jquery.js.xhtml?... (95.3KiB)
http://localhost:8888/.../tooltip.js.xhtml?... (34.5KiB)
http://localhost:8888/.../jsf.js.xhtml?... (25.4KiB)
http://localhost:8888/.../primefaces-extensions.js.xhtml?... (19.7KiB)
http://localhost:8888/page/my/toolbox/ (13.2KiB of inline JavaScript)
http://localhost:8888/.../watermark.js.xhtml?... (4.7KiB)
http://localhost:8888/.../hotkey.js.xhtml?... (1.2KiB)

For me it seems like lots of overhead with Primefaces + Primefaces extensions resources. Any idea how I could get these resources to go through WebUtilities filters or at least enable the compression for these files? Thanks for help!

TooSerious · Answer 1 · 2014-07-03T15:48:26.600

After some playing around I figured out this was not showing as minified since it was pulling the files from the browser cache. Try clearing the cache by right clicking a resource in the network tab. Once you refresh the page you should see the compressed files get pulled from the server with a response status of 200 (OK) instead of 304 (Not modified).

Edit: You may also have to comment out the 'Response cache filter' in web.xml until you see the files are being compressed.

enter image description here

Primefaces 4.0 resource compression

1 Answers1