CSS

Increase revenue, productivity, and customer satisfaction/loyalty with 7x faster page load time. Decrease cost with 50% less bandwidth and energy.

 

How It Works

Each element in the HTML output that refers to style content is removed, and the content of the resource pointed to by the element is added to a single consolidated resource.

Each element in the HTML output that contains style content is removed, and the content between the start and end tag is added to a single consolidated resource.

That single consolidated resource is referenced by one element.

As a result, request headers and response headers are sent for a single consolidated resource instead of X (3 on average) number of resources.

Inline styles are now external, thereby decreasing the size of the HTML output.

Compression of the single consolidated resource is greater due to the need for only one gzip or deflate wrapper instead of X (3 on average) and the likelihood of additional repeated strings, taking advantage of the dictionary that has already been created.

 

Whole Context Removed

Squash Compression is aware of what styles the HTML output is referencing. Many times, modular development of styles leads to having the HTML output reference an entire style resource even though only a subset of that resource may be used (such as a style class). Squash Compression does not transmit any style context that is not referenced by the HTML output.

 

Auto Minification

Squash Compression is aware of what extraneous formatting characters are needed by developers to maintain code, but not needed by user agents to display Web pages. Squash Compression does not transmit any extraneous formatting characters in the CSS output. As a result, you will never again need to transform your static content back and forth between human-readable and machine-readable formats; plus dynamically created resources are automatically minified.

 

Fine Tuning

In some cases, you may need to fine tune a page. Squash Compression allows you to enable/disable CSS processing at the page level and even at each <link> or <style> tag. Please help us make Squash Compression better by sharing with us any situations where you have to do this!

 

Enabling on a Web Page

You can enable CSS processing at the page level.

If you installed Squash Compression in “On” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “Off” mode, then add the following at the top of the page (don’t worry, it won’t be emitted in the final output):

<!--sc_css_on-->

 

Enabling on a <link> or <style> Tag

If you need tighter control, you can enable CSS processing per <link> or <style> tag.

If you installed Squash Compression in “On” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “Off” mode, then add the following attribute and value to the <link> or <style> tag (don’t worry, it won’t be emitted in the final output):

sc_css_on=”1″

For example:

<link rel="stylesheet" type=”text/css" href=”styles.css" sc_css_on=”1">

Or:

<style type=”text/css" sc_css_on=”1″>…</style>

 

Disabling on a Web Page

You can disable CSS processing at the page level.

If you installed Squash Compression in “Off” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “On” mode, then add the following at the top of the page (don’t worry, it won’t be emitted in the final output):

<!--sc_css_off-->

 

Disabling on a <link> or <style> Tag

If you need tighter control, you can disable CSS processing per <link> or <style> tag.

If you installed Squash Compression in “Off” mode, there is nothing extra that you need to do.

If you installed Squash Compression in “On” mode, then add the following attribute and value to the <link> or <style> tag (don’t worry, it won’t be emitted in the final output):

sc_css_off=”1″

For example:

<link rel=”stylesheet" type=”text/css" href=”styles.css" sc_css_off=”1">

Or:

<style type="text/css" sc_css_off=”1">…</style>