MetaCDN - StreamShark

Manually integrating the MetaCDN Site Accelerator into your website

Step 1: Get the source (codebase) of your generated html pages

If your website has been programmed using HTML directly, then that is your source. If your website is using a server side language to generate the HTML page, such as jsp, php, asp, etc., you need to find the original jsp, php, asp files and edit them from there. Do not directly copy the source from your browser as it may have been modified by server side code or client side javascript.

Step 2: Modify your source

There are two ways assets may be referenced in your source, via a relative path like /js/relativePath.js, or via an absolute path like http://www.example.org/js/absolutePath.js. In order to best optimise your site, assets referenced in both styles should be updated to use your MetaCDN Accelerated URL.

In the case of a relative path, you need to prefix the MetaCDN Accelerated URL to the original path, like http://example.sa.metacdn.com/js/relativePath.js, while in the case of an absolute path, simply change the domain to MetaCDN Accelerated Domain, like "http://example.sa.metacdn.com/js/absolutePath.js".

An example of original source and the modified version is given below.

Original Source

<html>
  <head>
    <script type="text/javascript" src="/js/relativePath.js"></script>
    <script type="text/javascript" src="http://www.example.org/js/absolutePath.js"></script>
    <link rel="stylesheet" type="text/css" src="/css/relativePath.css">
    <link rel="stylesheet" type="text/css" src="http://www.example.org/css/absolutePath.css">
  </head>
  <body>
    <a href="/page2.html">
      <img src="/img/linkPage2.png">
    </a>
    <a href="/page3.html">
      <img src="http://www.example.org/img/linkPage3.gif">
    </a>
    <a href="/doc/document1.doc">Download .doc document</a>
    <a href="http://www.example.org/doc/document2.pdf">Download .pdf document</a>
    <img src="http://www.example.org/generateDynamicImage?param1=value1&param2=value2">
  </body>
</html>

Accelerated Source

<html>
  <head>
    <script type="text/javascript" src="http://example.sa.metacdn.com/js/relativePath.js"></script>
    <script type="text/javascript" src="http://example.sa.metacdn.com/js/absolutePath.js"></script>
    <link rel="stylesheet" type="text/css" src="http://example.sa.metacdn.com/css/relativePath.css">
    <link rel="stylesheet" type="text/css" src="http://example.sa.metacdn.com/css/absolutePath.css">
  </head>
  <body>
    <a href="/page2.html">
      <img src="http://example.sa.metacdn.com/img/linkPage2.png">
    </a>
    <a href="/page3.html">
      <img src="http://example.sa.metacdn.com/img/linkPage3.gif">
    </a>
    <a href="http://example.sa.metacdn.com/doc/document1.doc">Download .doc document</a>
    <a href="http://example.sa.metacdn.com/doc/document2.pdf">Download .pdf document</a>
    <img src="http://example.sa.metacdn.com/generateDynamicImage?param1=value1&param2=value2">
  </body>
</html>

Step 3: Ensure relative asset references use the accelerated domain

As shown above, the accelerated version of your site has to make its asset requests from the accelerated domain.  If you are using relative requests and setting a html <base/> element, ensure the base url is updated to point at the accelerated domain.

Have more questions? Submit a request