Recently we tried to optimize our DNN website SunBlogNuke for super speed and had an opportunity to play around with UnloadCSS skinobject from Timo Breumelhof. What a nifty little tool to use for your front-end performance optimization. Thanks Timo!
Also it inspired us and our CompressCSS skinobject was born out. So you may say that CompressCSS is the extended and optimized version of UnloadCSS and I agree with you. Not only does it unload any unnecessary CSS files but also compress any existing CSS files thereby improving more performance and extending more flexibility into your DNN website. Let’s show you the magic of CompressCSS below.
Why should you utilize it?
As the Cuong Dang mentioned in his post, there are many unnecessary CSS files get loaded within the DNN framework (not to mention some not-so-good practices in CSS coding techniques within these files) that a web designer wants to take control of. Some one may ask whether there is a way to improve that? Fortunately, CompressCss allows you to unload any CSS file that the DotNetNuke® framework injects and compresses any existing CSS files in the head of the page; it will reduce the number of HTTP requests from a browser and minify the size of the downloaded file thereby improving load times apparently.
In conclusion, you can improve your front-end performance and make the speed of your DNN page load faster with CompressCSS.
How does it work?
First let’s cover the two below flows (or process) that will be taken place when you utilize our skinobject CompressCSS:
Unload Process - "Unload" all or some of the CSS files DotNetNuke includes in the Head of the page by default, such as Default.css, Module.css or Portal.css. You can pass the path to the file you don't want loaded as a regular expression which means you can unload multiple CSS files with just one statement.
Minify Process - Removing unnecessary characters from style code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab).
You can apply it in your DNN website with the following steps:
1) Download the zip attachment and unzip it in your local machine.
2) Copy the assemble DnnSun.OptimizerToolkit.dll into the bin folder of your DNN webiste.
3) Copy the CompressCss.ascx & CompressCss.ascx.vb into the skin control folder, which should be $yourweb/admin/Skins.
4) Open your web.config file, find out the <httpHandlers> section and insert the line below:
<httpHandlers>
<add verb="*" path="css.axd" type="DnnSun.OptimizerToolkit.CssHandler, DnnSun.OptimizerToolkit"
validate="false" />
<!-- Other httpHandlers -->
</httpHandlers>
5) Open your skin file (like index.ascx), register the skinobject in the head and insert it in the bottom. Then it may look like as follows:
<%@ Register TagPrefix="dnn" TagName="COMPRESSCSS" Src="~/Admin/Skins/CompressCss.ascx" %>
<!-- Other Tags -->
<dnn:COMPRESSCSS ID="dnnCOMPRESSCSS" runat="server"
RemoveFileNames="/Portals/_default/Containers/MinimalExtropy/container.css" />
You can download the install zip & skin sample from the attachment in the bottom of this post.
The only attribute you need to care for:
|
Attribute
|
Values
|
Default
|
Description
|
|
RemoveFileNames
|
Examples:
- "Default.css" to not load Default.css
- "DesktopModules/xxModule/Module.css" to not load a specific modules.css
- "Module.css" to not load any Modules.css file
- "/" will not load any CSS files
- "Default.css, Portal.css" will not load Default.css & Portal.css
|
Empty String
|
Comma separated list of Filenames you don't want to load (You can use a regular expression if needed)
|
What is the advantage?
The advantage is that this is not a core hack and the excellent CompressCSS skinobject can be configured per skin, not for the whole installation. The links are removed on the server side, so they never appear in the source. And the designer can build the more flexibility, readable and maintainable style without worrying about the file size.
To be continued…
This solution is a good start and you can extend it with more killer features. For instance, we our blog team tried to combine some specific or unnecessary CSS files into only one style file so that it will eventually minimize HTTP Requests as we expected. But we found out that there is a style path issue like background property and can’t fix it now. Hope you guys provide some clues. We appreciate any helps.
Attachment: CompressCss_v1.zip