Is it possible to add multiple css in header tag with one http request to execute all css file at once ?
I know about
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
can we do something like or any other solution to reduce http requests
<link rel='stylesheet' href='/css/typography.css,layout.css,color.css'>
Bundle your CSS files for production and minify ofc.
http://www.sitepoint.com/faster-page-loads-bundle-your-css-and-javascript/
Yes, you can use ASP.NET MVC bundling and minification feature. You create a bundle like this:
bundles.Add(new StyleBundle("~/Content/customcss").Include(
"~/Content/css/typography.css",
"~/Content/css/layout.css",
"~/Content/css/color.css"));
And you can render it like this (in a Razor View):
@Styles.Render("~/Content/customcss")
In Release compilation mode, your bundles will be automatically merged and minified, but you can set the flag manually in Debug mode as well:
BundleTable.EnableOptimizations = true;
See this for reference.
yes you can? with apache/nginx MODPAGESPEED https://www.modpagespeed.com/
<head>
<link rel="stylesheet" type="text/css" href="styles/yellow.css">
<link rel="stylesheet" type="text/css" href="styles/blue.css">
<link rel="stylesheet" type="text/css" href="styles/big.css">
<link rel="stylesheet" type="text/css" href="styles/bold.css">
</head>
can become
<head>
<link rel="stylesheet" type="text/css" href="styles/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.xo4He3_gYf.css">
</head>
Disclaimer: Apache PageSpeed is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.
