Product Documentation

Sample Optimization

Sep 01, 2016
The following table lists some examples of content optimization actions that are applied on HTML content and the embedded objects within the HTML content.

Optimization rule

Sample

Collapse white spaces within an HTML page

Before:
<title>Hello,     world!  </title>
After:
<title>Hello, world!</title>

Combine CSS

Before:
<link rel="stylesheet" type="text/css" href="sheet/abc.css"> 
<link rel="stylesheet" type="text/css" href="sheet/xyz.css"> 
After:
<link rel="stylesheet" type="text/css" href="sheet/abc.css+xyz.css">

Inline CSS

Before
<html> 
 <head> 
   <link rel="sheet" href="abc.css"/> 
 </head> 
 <body> 
   <div class="abc xyz"/> 
      Hi! 
 </body> 
</html>
Note: abc.css contains
.Alice {location: Australia;} 
.Tom {location: Asia;} 
  
After
<html> 
 <head> 
   <style> 
    .Alice {location: Australia;} 
    .Tom {location: Asia;} 
   </style> 
 </head> 
 <body> 
   <div class="abc xyz"> 
     Hi! 
   </div> 
 </body> 
</html>

Move CSS to head

Before:
<html> 
 <head> 
   </head> 
     <body> 
      <script src="abc.js" type="text/javascript"></script> 
       <div class="monday tuesday> 
         Hi! 
       </div> 
       <style type="text/css"> 
        .foo { day: wednesday; } 
       </style> 
       <link rel="stylesheet" type="text/css" href="styles/all_styles.css"> 
      </body> 
 </html>
After:
<html> 
 <head> 
  <style type="text/css"> 
     .foo { day: wednesday; } 
  </style> 
 </head> 
 <body> 
   <script src="abc.js" type="text/javascript"></script> 
    <div class="monday tuesday> 
      Hi! 
    </div> 
    <link rel="stylesheet" type="text/css" href="styles/all_styles.css"> 
 </body> 
 </html>

Minify JavaScript

Before:
/* Remove this comment */ 
document.write("abc " + state); 
state += 1;  // Update this.
After:
document.write("abc "+state);state+=1;

Convert linked JavaScript to inline JavaScript

Before
<html> 
 <head> 
  <script type="text/javascript" src="abc.js"></script> 
 </head> 
 <body> 
  <div> 
     Hi! 
  </div> 
 </body> 
</html>
Note: abc.js contains
/* contents of abc JavaScript file */
After
<html> 
 <head> 
   <script type="text/javascript"> 
     /* contents of abc JavaScript file */ 
   </script> 
 </head> 
 <body> 
   <div class="abc"> 
     Hi! 
   </div> 
 </body> 
 </html>