Guides
Tutorials
Pop Tags

Assets

Optimize Site Performance with Asset Tags

Give your site visitors a high performance experience by using asset tags to leverage caching and Webpops integration with the Akamai CDN. 

The benefit of having an asset properly cached is that browsers and intermediary servers will then store and access the asset directly from their memory instead having to go out and fetch the same file over and over again. 

A major benefit of the CDN is that when a visitor requests an asset, it'll be served from a high performance server close to their location thanks the huge network of distribution points Akamai has accross the globe. 

You can send any file in your public folder to be cached and served over Akamai by using the <pop:asset/> tag. Select your file by passing its path into the name attribute:

<pop:asset name="/images/puppy.png"/>

This returns a url of puppy.png, cached and delivered by Akamai:
http://c1940652.r52.cf0.rackcdn.com/fit/250/0/513d6cf7896ad81284000084/puppy.png

If a file that's referenced by an asset tag is updated, then Webpop instantly busts the cache to guarantee the latest version of the asset gets downloaded by site visitors.

Optimize Your CSS & Javascript

You can give your site a nice performacen boost by using <pop:stylesheet> and <pop:javascript> instead of the normal <link> and <script> tags to reference your CSS & JS.

<link href="/css/style.css" rel="stylesheet" type="text/css"/>
<script src="/js/app.js" type="text/javascript"/>

If you replace the above code with this:

<pop:stylesheet name="/css/style.css"/>
<pop:javascript name="/js/app.js"/>

That CSS and JS will now be cached optimally.

Bundling Assets for Production

Optimize performance even further by wrapping asset tags of the same type with <pop:bundle>. The bundle tag concatenates & minifies CSS or JS files together in the order they're listed, to produce a single file that gets cached and served via CDN.

Assets are only bundled on the production site (ie. your live site that gets served to visitors). So you'll still see the original unbundled CSS and JS files when you're developing on a version URL.

<pop:bundle> also searches CSS files for images & fonts, and automatically serves a cached version of them via CDN for an additional performance boost.

Here’s an example of a layout that uses bundled asset tags:

<!doctype html>
<html>
  <head>
    <title><pop:title/></title>
    <pop:bundle name="css">
      <pop:stylesheet name="/css/facebox.css"/>
      <pop:stylesheet name="/css/foundation.css"/>
      <pop:stylesheet name="/css/style.css"/>
    </pop:bundle>
  </head>
  <body>
    <div id="main">
      <pop:region name="main"/>
    </div>

    <pop:bundle name="javascript">
      <pop:javascript name="/js/jquery.js"/>
      <pop:javascript name="/js/foundation.js"/>
      <pop:javascript name="/js/app.js"/>
    </pop:bundle>

  </body>
</html> 

This will produce just one stylesheet and one Javascript file, each served cached via Akamai CDN. No further work is required, just set it and forget it!

Continue to Entries »