Leverage BrowserCaching based on google

[srinivasc110177]

Could some one  provide  inputs as how could we  use the  below  link provided  by google for  updating Adobe AEM dispatcher and fine-tune caching for various CSS and JavaScript files.

https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

Thanks

[Kunal_Gaba_]

You can define cache control headers for CSS/JS file extensions in your Web server configuration. Also, you can introduce a version number/token in the CSS/JS include URLs for efficient caching so that browser does not request for the resource again even if the files hasn't changed since last response.

Take a look at the following sample implementation from Adobe Consulting Services team - http://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs.html

[srinivasc110177]

Thanks for the  input.I  have few  more  questions based on http://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs.html

1.What does TTLs stand for?
2.  Could you please validate  if i have  done the things correctly ,currently i see under "/libs/cq/config/rewriter/default"

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    contentTypes="[text/html]"
    enabled="{Boolean}true"
    generatorType="htmlparser"
    order="-1"
    serializerType="htmlwriter"
    transformerTypes="[linkchecker,mobile,mobiledebug,contentsync]">
    <transformer-mobile
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-mobiledebug
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-contentsync
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
</jcr:root>

I  copied the above node to "/apps/myapp1/config/rewriter/versioned-clientlibs" and renamed to order="{Long}1" and added versioned-clientlibs to  transformerTypes.So the  config is 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    contentTypes="[text/html]"
    enabled="{Boolean}true"
    generatorType="htmlparser"
    order="{Long}1"
    serializerType="htmlwriter"
    transformerTypes="[linkchecker,mobile,mobiledebug,contentsync,versioned-clientlibs]">
    <transformer-mobile
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-mobiledebug
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-contentsync
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
</jcr:root>

3.In the above  setup of  "/apps/myapp1/config/rewriter/versioned-clientlibs" i see under transformerTypes mobile,mobiledebug,contentsync avaliable should i keep it or remove  it

4.I have  other apps like "/apps/myapp2" so should i add the  config  even at the location "/apps/myapp2/config/rewriter/versioned-clientlibs" or just adding at one  place in "/apps/myapp1/config/rewriter/versioned-clientlibs" is enough

5. To validated i took a look at OSGi Web Console at the link "http://localhost:4502/system/console/status-slingrewriter"

Found the below  present.Is the below expected??

Current Apache Sling Rewriter Configuration
=================================================================
Active Configurations
-----------------------------------------------------------------
Configuration versioned-clientlibs

Content Types : [text/html]
Order : 1
Active : true
Valid : true
Process Error Response : true
Pipeline : 
    Generator : 
        htmlparser
    Transformers : 
        linkchecker
        mobile : {component-optional=true}
        mobiledebug : {component-optional=true}
        contentsync : {component-optional=true}
        versioned-clientlibs
    Serializer : 
        htmlwriter
Resource path: /apps/dsm/config/rewriter/versioned-clientlibs

6. will  /path/to/clientlib.md5hash.js acutally support the  Minify JS and css when enabled??

When I refreshed the existing page and  found the  format  of the  exisitng css

/etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js , i believe clientlibs will be rewritten in the format /path/to/clientlib.md5hash.js

Now in publish instance we have  enabled for css and JS "Minify" option so it  used to  appear  as /etc/clientlibs/granite/clientlibrarymanager.min.js so now  will it  render /etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js the Minify version. 

7.I see on a new page refresh the request for "/etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js " shows the status  of the request  as "304 Not  Modified" so it means that  browser is no more asking  for new data.But i see a small time taken for achieving the  same for the browser.I believe that cannot be minimized , i am right in stating that??

8.I see for  Apache Configuration

SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.js" long_expires=true
SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.css" long_expires=true
Header set Cache-Control max-age=2592000 env=long_expires

here max-age=2592000   means it is seconds and when converted to  days it is 30 days??

9.Does  this  need any change in dispachter.any??
 
10.When i modifiy the any file "css or js"  for a clientlib a new  md5hash value will change automatically generated for the url ,/path/to/clientlib.md5hash.js??

11.When using  individual css or  js say for example  http://example.com/etc/clientlibs/mysite/styles. ,how could we use the token system as the  above  approach is only for clientlibs??

[Kunal_Gaba_ · Accepted solution]

Please see my responses below- 

srinivasc11017710 wrote...

Thanks for the  input.I  have few  more  questions based on http://adobe-consulting-services.github.io/acs-aem-commons/features/versioned-clientlibs.html

1.What does TTLs stand for? 

KG - Time to Live. The  expires time you see in Apache configuration is also called as Time to live. Its commonly used term for define the expiry time of the cache. 
2.  Could you please validate  if i have  done the things correctly ,currently i see under "/libs/cq/config/rewriter/default"

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    contentTypes="[text/html]"
    enabled="{Boolean}true"
    generatorType="htmlparser"
    order="-1"
    serializerType="htmlwriter"
    transformerTypes="[linkchecker,mobile,mobiledebug,contentsync]">
    <transformer-mobile
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-mobiledebug
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-contentsync
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
</jcr:root>

I  copied the above node to "/apps/myapp1/config/rewriter/versioned-clientlibs" and renamed to order="{Long}1" and added versioned-clientlibs to  transformerTypes.So the  config is 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    contentTypes="[text/html]"
    enabled="{Boolean}true"
    generatorType="htmlparser"
    order="{Long}1"
    serializerType="htmlwriter"
    transformerTypes="[linkchecker,mobile,mobiledebug,contentsync,versioned-clientlibs]">
    <transformer-mobile
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-mobiledebug
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
    <transformer-contentsync
        jcr:primaryType="nt:unstructured"
        component-optional="{Boolean}true"/>
</jcr:root>

3.In the above  setup of  "/apps/myapp1/config/rewriter/versioned-clientlibs" i see under transformerTypes mobile,mobiledebug,contentsync avaliable should i keep it or remove  it

KG - Yes this is correct. 
4.I have  other apps like "/apps/myapp2" so should i add the  config  even at the location "/apps/myapp2/config/rewriter/versioned-clientlibs" or just adding at one  place in "/apps/myapp1/config/rewriter/versioned-clientlibs" is enough

KG - Just adding it under myapp1 is enough. 

5. To validated i took a look at OSGi Web Console at the link "http://localhost:4502/system/console/status-slingrewriter"

Found the below  present.Is the below expected??

Current Apache Sling Rewriter Configuration
=================================================================
Active Configurations
-----------------------------------------------------------------
Configuration versioned-clientlibs

Content Types : [text/html]
Order : 1
Active : true
Valid : true
Process Error Response : true
Pipeline : 
    Generator : 
        htmlparser
    Transformers : 
        linkchecker
        mobile : {component-optional=true}
        mobiledebug : {component-optional=true}
        contentsync : {component-optional=true}
        versioned-clientlibs
    Serializer : 
        htmlwriter
Resource path: /apps/dsm/config/rewriter/versioned-clientlibs

KG - This is correct. 
6. will  /path/to/clientlib.md5hash.js acutally support the  Minify JS and css when enabled??

KG - Yes it will support minify JS and CSS as it is an HTML rewriter and will rewrite the CSS/JS clientlibrary URLI included in your HTML

When I refreshed the existing page and  found the  format  of the  exisitng css

/etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js , i believe clientlibs will be rewritten in the format /path/to/clientlib.md5hash.js

KG - Yes this is correct.

Now in publish instance we have  enabled for css and JS "Minify" option so it  used to  appear  as /etc/clientlibs/granite/clientlibrarymanager.min.js so now  will it  render /etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js the Minify version. 

KG - Yes this is correct.

7.I see on a new page refresh the request for "/etc/clientlibs/granite/clientlibrarymanager.ce87dde1b94c63e67e7c932232bd7854.js " shows the status  of the request  as "304 Not  Modified" so it means that  browser is no more asking  for new data.But i see a small time taken for achieving the  same for the browser.I believe that cannot be minimized , i am right in stating that??

KG - The browser will make request only when the URI changes, when the TTL time is over or when the files are deleted from the local cache. Otherwise it will continue to serve the files from its local cache. 

8.I see for  Apache Configuration

SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.js" long_expires=true
SetEnvIf Request_URI "(\.min)?\.[a-f0-9]+\.css" long_expires=true
Header set Cache-Control max-age=2592000 env=long_expires

here max-age=2592000   means it is seconds and when converted to  days it is 30 days??

KG - Thats right this value is in seconds. 

9.Does  this  need any change in dispachter.any??
 KG - If you are able to access the URI with md5hash values then no changes are needed in dispatcher configuration. 
10.When i modifiy the any file "css or js"  for a clientlib a new  md5hash value will change automatically generated for the url ,/path/to/clientlib.md5hash.js??

KG- That is correct.

11.When using  individual css or  js say for example  http://example.com/etc/clientlibs/mysite/styles. ,how could we use the token system as the  above  approach is only for clientlibs??

KG - Yes this does not work for URIs which start with external domain or scheme . But you can implement a custom rewriter with your custom business logic to achieve the same. 

[srinivasc110177]

Thanks for the response.It solved my queries