With all the fancy scripts and tools available these days for web development it is easy to get carried away. Instead of writing custom solutions, we tend to download large, multi-purpose scripts to accomplish our goals. Although each library may not be big by itself, when you keep stacking one on top of the other you can end up with a bloated website. By bloated, I mean that your pages will become large in size which will increase download time and ultimately affect the user experience. So here are some tips that I came up with to help streamline your website.
- Include only the relevant scripts: If you are using ASP.NET, put a ContentPlaceHolder tag in the head of your master page which can be used for additional scripts and CSS. Instead of including every possible script file and CSS file in the master page you can now optionally include them on the pages that really need it.
<head runat="server">
<link href="/Content/site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="AdditionalScripts" runat="server" />
</head>
The HEAD on my master page is very simple. When I need to use additional libraries like JQuery UI, I include them on the content pages instead by using the ContentPlaceHolder.
- Optimize the size of your JavaScript and CSS: Removing the extra whitespace in your CSS and JavaScript files will decrease the size. There are some handy online tools you can use to accomplish this task.
- The Online CSS compressor which offers three levels of compression which are Light, Normal and Super Compact. In addition it will also strip out comments.
- The Online JavaScript compressor also offers three levels of compression. In my testing I was able to take a 25 KB script file and shrink it down to 5KB using the aggressive compression level.
When you compress your files make sure you keep a copy of your original script and CSS files. Because, when you debug and develop it will be easier to read the files with the extra whitespace and comments.
- Be careful with images: A picture may paint a thousand words but it also can consume thousands of kilobytes! If you use images, try to follow these simple rules:
- Use images sparingly. Ask yourself, do I really need to have an custom image for a button or can I use the standard HTML buttons with a little CSS styling.
- Don't take a 800x600 dimension image and set the width and height on it to turn it into a icon. Shrink the image instead using Photoshop or GIMP.
- Use small images for backgrounds instead of large full screen images. Often times, you can just tile the small image using CSS and accomplish the same goal.
- Pick the proper image format. Sometimes just converting an image from one format to another can give you a large savings. Also reducing the resolution of the image can help. In most cases, you won't even notice the difference. Look at the example below from pingdom
- Write smarter code: Often times you can shrink your website just by writing smarter code. Take this CSS class for example:
.myClass { border-left: 0px; border-right: solid 1px #fff; border-top: solid 1px #ff, border-bottom: solid 1px #fff }
Can be rewritten as:
.myClass { border: solid 1px #fff; border-left: 0px; }
For more tips like this, visit the CSS shorthand Guide...
- Consider using HTTP compression: Finally, if you followed all of these tips and your webpage is still too big then consider turning on compression:
- For IIS 6.0 follow this guide
- For IIS 7.0 follow this guide.
- And of course, if you are using Apache follow these instructions.
Just keep in mind that turning on compression can increase the CPU utilization on your web server. So make sure you test out compression first to ensure that your web server can handle the increased load.
