Our technology is built on user interfaces implemented in HTML and Javascript. This gives our platform the flexibility to deliver multiple types of promotions, announcements, and other interactive experiences to our publisher games.

One of the biggest performance killers on mobile website is connection latency, even a speedy 4G/LTE connection takes precious seconds to start. Consider the number of Javascript, CSS, and image files that need to be loaded to fully display a page. Each of those requires an additional connection, affected by connection latency. Optimal mobile website performance means reducing the number of connections to an absolute minimum.

The most obvious solution is to manually copy Javascript and CSS into the HTML. This becomes difficult to maintain shared Javascript frameworks – like jQuery – or shared stylesheets in CSS. It would be great to develop in an environment that has the convenience of shared resources but deploy highly minified templates.

Enter inliner, a node.js-based utility designed to “inline the crap out of your site”. This is what we use at PlayHaven to convert our developer-friendly HTML, CSS and Javascript into streamlined single-file content templates ready to deliver to mobile devices. You may try inliner online, but it is easier to integrate into build scripts as a command line utility. The inliner GitHub page has directions for installing the directions.

Here’s a code snippet from our content template build shell script:

## –
echo “Copying files into output directory…”
cp -rf src out

## –
echo “Compiling templates…”
for elem in $(find out/html/* -name “*.html”); do
inliner “http://localhost/~$USER/templates/${elem}” > “${elem}.tmp”
mv “${elem}.tmp” “${elem}”
done

Note that we’re using a local webserver to host the source HTML file: the latest versions of inliner also support running on the local filesystem. However, It’s been my experience that using a webserver helps inliner find all of the inline-able CSS, Javascript, and images on the page. After a few seconds on each page, it’s done. Just like that; it’s quite nearly magic!

I’m very happy to dedicate a turn on the soapbox to a utility that has definitely found much use here at PlayHaven, especially one that does a whole lot of heavy lifting for our content templates. It definitely took me awhile to find as the terms “HTML inliner” refers to a very similar, but not as immediately applicable idea.