Cloud Management: Static Asset Delivery

Moovweb provides a full range of solutions for managing the static assets on your website. Static assets refers to images, stylesheets, and JavaScript files used on your website. You will typically include mobile website-specific static assets in your Moovweb project and serve the rest from your origin web application.

Moovweb’s Static Asset Delivery gives you all the tools you need to serve the range of content on your site so it loads lightning-fast for your users. All static assets are delivered from our globally-distributed, high-performance content delivery network (CDN), in partnership with Akamai, EdgeCast, and AWS.


Outline


Globally Distributed Infrastructure

Moovweb’s servers are located in major data centers around the world with blazing fast connections to the Internet backbone. When you push a project to the Moovweb cloud, your project’s assets are replicated in all of Moovweb’s servers. This ensures that the users of your website will experience the best performance possible.


Assets Service

This is the central repository for all of the assets you have specifically included in your Moovweb project. There is no special configuration or development needed; when you push your project to the Moovweb Cloud, your assets will be automatically delivered via this service.

Local Development Notes

While developing locally, any assets in your project’s assets folder will be served from a local asset server running on port 3003 and will contain “_moovweb_local_assets_” in their URLs. When you finish developing and push to the Moovweb cloud, these are automatically bundled and stored on assets.moovweb.net. In the Cloud, the URL pattern will be “//assets.moovweb.net/account/project/build/asset”.

Example URLs:

Never reference assets by hardcoding the “_moovweb_local_assets_” path! Always use the asset() function so that your URLs will be correct locally and in the cloud. See the Project Files: assets page for more information.


Optimization Service

Moovweb’s Optimization Service for Static Asset Delivery include Image Optimization and JavaScript Bundling.

These services, along with various other Front-End Optimization techniques, can be accessed by using the Performance Mixer. If you utilize the Performance Mixer, you’ll see that the URLs for your dynamically optimized assets will come from opt.moovweb.net. You can also directly access these services via their APIs.

Image Optimization

Moovweb’s Image Optimization service allows you to resize images for specific screen sizes and resolutions. You can deliver images that are fractions of the original sizes, but just as sharp, massively increasing the image download speeds.

Usage

To use the Image Optimization, just add the Performance Mixer to your project and call perf.optimize().

WebP Support

WebP is a new image format for the web that provides lossless and lossy compression for images, currently only supported by the Google Chrome browser. WebP images are 20%-30% smaller than other formats. If the Image Optimization service detects that the image request is coming from a browser that supports WebP, it will automatically return a WebP-formatted image.

API

If you wish to directly use the API, use:

http://opt.moovweb.net/img?token=[siteid]&img=[image URL]&format=[format]&quality=[quality]&width=[width]&height=[height]
token=
Moovweb-provided ID that uniquely identifies your t.engine
img=
source image URL
format=
jpeg, webp, png
quality=
0.0-100.0
width=
positive integer value <= source image width
height=
positive integer value <= source image height
preserve_aspect=1
set this to preserve the aspect ratio of an image when only width or height is specified
linkEncoded=1
only use this parameter if your img= value is base64 encoded (to allow passing special characters)

Example:

http://opt.moovweb.net/img?token=1234&img=https://s3.amazonaws.com/moovweb-site-assets/logos/moovweb_small_cropped.jpg&height=20&preserve_aspect=1

JavaScript Bundling

Moovweb’s JavaScript Bundling service allows you to concatenate multiple JavaScript files and inline scripts into a single file so that the browser only has to make one request to download your scripts. You can also use the service to move blocking JavaScript to the end of the page to speed up render times on mobile devices.

Usage

To use the JavaScript Bundler, just add the Performance Mixer to your project and call a relevant function such as perf.bundle_external_js().

API
http://opt.moovweb.net/js?token=[siteid]&files=src:[base64 encoded URL of external JavaScript],inline:[base64 encoded JavaScript]
token=
Moovweb-provided ID that uniquely identifies your t.engine
files=
This accepts a comma-separated list of src: and inline: base64 encoded strings.
src:
base64 encoded URL of external JavaScript
inline:
base64 encoded JavaScript

Example:

http://opt.moovweb.net/js?token=1234&files=src:ZXh0ZXJuYWwgSlM=,inline:aW5saW5lIEpT

The order of the src: and inline: strings is the order in which the entire JS file will be bundled and returned by the service.


Edge Caching & Integration With Existing CDNs

For assets that are not placed in your project’s asset folder, you can utilize Moovweb’s Edge Caching layer to reduce load on your origin servers and serve content as quickly as possible to your end users. See the document on Edge Caching for more details.

Moovweb can also seamlessly integrate with any Content Delivery Network (CDN) — such as Akamai or Cloudflare — you have set up with your origin application. Simply ensure your Production Domains and links on your website are set up correctly.