Reducing page load time using content caching

Reducing the page load time can be done by caching the HTML content after initial rendering. PrimeFaces' cache component can be used to cache the content. It supports two providers that enable content management in a cache store. The first provider is for Ehcache (http://ehcache.org) and the second one for Hazelcast (http://hazelcast.com/products/hazelcast).

In this recipe, we will use Ehcache—an open source, standard-based cache used to boost performance, offload the database, and simplify scalability. We will explain how the cache component works in an example with a feed reader wrapped inside the p:cache tag.

Getting ready

The cache provider is configured via a context parameter in web.xml. The provider for Ehcache is configured here:

<context-param>
  <param-name>primefaces.CACHE_PROVIDER</param-name>
  <param-value>org.primefaces.cache.EHCacheProvider</param-value>
</context-param>

A dependency for Ehcache in pom.xml is required as well:

<dependency>
  <groupId>net.sf.ehcache</groupId>
  <artifactId>ehcache</artifactId>
  <version>2.9.0</version>
</dependency>

By default, the Ehcache implementation looks for a file called ehcache.xml at the top level of the classpath. If Ehcache does not find that file, it takes the ehcache-failsafe.xml file that is packaged in the Ehcache JAR. For WAR projects, the ehcache.xml file should be placed below the src/main/resources folder. It contains a configuration for cache regions. You can imagine a region as a Map object with key-value pairs. The value is the cached content then. The cache region in this recipe has the name appCache. This is shown in the following code:

<?xml version="1.0" encoding="UTF-8"?>
<ehcache xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="ehcache.xsd"
  updateCheck="true" monitoring="autodetect"
  dynamicConfig="true">

  ...

  <cache name="appCache"
    maxEntriesLocalHeap="10000"
    eternal="false"
    timeToIdleSeconds="120"
    timeToLiveSeconds="120"
    diskSpoolBufferSizeMB="30"
    maxEntriesLocalDisk="10000000"
    diskExpiryThreadIntervalSeconds="120"
    memoryStoreEvictionPolicy="LRU">
  </cache>
</ehcache>

Tip

See the configuration details in the official Ehcache documentation (http://ehcache.org/documentation).

How to do it…

We will develop a feed reader that is encircled by p:cache. The feed reader fetches podcasts from JSF Central (www.jsfcentral.com). This is shown in the following code:

<p:cache region="appCache" key="jsfcentral">
  <p:feedReader value="http://www.jsfcentral.com/resources/
    jsfcentralpodcasts/?feed=rss"
    var="feed" size="10">
    <h:outputText value="#{feed.title}"
      style="font-weight: bold"/>
    <br/>
    <h:outputText value="#{feed.description.value}"
      escape="false"/>
    <p:separator/>
  </p:feedReader>
</p:cache>

How much can p:cache speed up page-loading time? The measured time for the occurrence of the window onload event depends on the existence of p:cache. The page with the wrapped feed reader inside the p:cache tag needs approximately 700–740 milliseconds until the onload event occurs. The page with the feed reader without p:cache needs approximately 1.4–1.8 milliseconds. The tests were performed on a computer with Window 8.1 and Firefox 34.

How it works…

Once the page is loaded initially, the content inside p:cache is cached inside the cache region of the cache provider. GET or POST requests on the same page or page fragment retrieve the output from the cache instead of rendering the content regularly.

The content within the cache region is identified by the key attribute of the p:cache tag. EL expressions such as key="some_#{userBean.language}" are supported too so that key can be done dynamic.

Note

The getter and other methods from beans inside p:cache are not invoked when the content is fetched from the cache. When the cache expires at the specified time (the timeToIdleSeconds and timeToLiveSeconds options in ehcache.xml), the content will be rendered by JSF renderers and cached again for subsequent calls.

There's more…

The cache provider can be accessed programmatically via the following code:

RequestContext.getCurrentInstance().
  getApplicationContext().getCacheProvider()

All cache regions can be cleared then with the clear() method. There are also the get, put, and remove methods to get, put, and remove the content of the specific region and the specific key.

PrimeFaces Cookbook Showcase application

This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.

The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter11/caching.jsf.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.220.16