i analyzed my website on Gmetrix.com for for optimization and the result was this:
The following external resources have small response bodies. Inlining
the response in HTML can reduce blocking of page rendering:
http://mysite.com/ should inline the following small resources:
http://mysite.com/media/css/38f74ae13bf9722265996c2842cba8a5.css
inside of CSS file:
*{background:none!important;text-align:right!important}html{margin:0!important;padding:0!important}body{background:#fff!important;font-size:9pt!important;padding:0!important;margin:10px!important}a{color:#2976c9!important}th,td{color:#2f2f2f!important;border-color:#ccc!important}.header-container,.nav-container,.footer-container,.pager,.toolbar,.actions,.buttons-set{display:none!important}.page-print .data-table .cart-tax-total{background-position:0 -54px}.page-print .data-table .cart-tax-info{display:block!important}.pv-top-outline .product-top-wrapper{box-shadow:none}.pv-top-outline .product-top-wrapper2{box-shadow:none}
Inline small CSS
Inlining small external CSS files can save the overhead of fetching
these small files. A good alternative to inline CSS is to combine the
external CSS files.
how to solve it?
Best Answer
Because the CSS file is generated it is hard to just put it into the body.
What you can do is hook somehow in the merging process and instead of generating a file, generate a template and add it via layout xml to your store.