<

Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

Speeding up the web

Published on
10,043 Points
3,743 Views
3 Endorsements
Last Modified:
I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests."

I got to thinking, hey, I use more than one javascript file, more than one CSS file, why not try to put them together...  while I'm at it, try to shrink them up a bit!

Here are the results from using the 'Net' Tab for the 'FireBug' plugin for FireFox (first clearing the cache, then closing the browser and reopening to the page):

Page With Compression:
3 Requests, 47KB, 280ms

Page Without Compression:
9 Requests, 49KB, 581ms

Although, it does not seem that the compression of the CSS and JS files has made a too much of a difference in file size of the requested items, as you can see from the load times of both pages are significantly differing suggesting that combining the files in such a way has reduced the round trips to the server.  Not only the load time of the page, but also the load time of the w3svc process on the server.

I watched the process for these 2 requests and noticed the compressed page had half the load time on the CPU.

At this time I do not believe the compressed/combined files are cacheable (unless I can be proven wrong of course...).  The files are opened from the server utilizing the FileSystemObject, read through, and then combined to a single string where it is rendered.


Here is the code I now use to minimize the requests to my servers.

Usage:
        <link href="/compressor.asp?file=/styles.css,/jquery/gallerific.css,/jquery/ui/style.css,/highslide/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/compressor.asp?file=/jquery/jquery.js,/jquery/ui/ui.core.js,/highslide/highslide-full.js"></script>

Open in new window


As you can see from the above, it is as simple as requesting the compressor.asp page, and passing it a querystring of a comma delimited list of files.

Compressor.asp
<!--Make sure to change the path to your includes directory-->
<!--#include virtual="/class/compression.asp"-->
<%
Set objCompress = New clsCompress 'Fire up our Class!
        'Get our CDS(comma delimited string), and make it an array
	Dim FilePath : FilePath = Split(Request.QueryString("file"), ",") 
        'Pass it to the class
	objCompress.strFile = FilePath
        'Write out the results!
	objCompress.ReturnScripts()
Set objCompress = Nothing 'Cleanup, cleanup, everybody do your stuff
%>

Open in new window


And now...  (drum roll please...) the processor:
Compression.asp
<%
Class clsCompress

	Public strFile
	Private objFSO, objFile, objRegExp, strCompressedFile, strFileType
	
	Private Sub Class_Initialize()
		strCompressedFile = ""
	End Sub
	
	Public Sub ReturnScripts()
		Set objFSO = CreateObject("Scripting.FileSystemObject")
			If IsArray(strFile) Then
				For i = 0 To UBound(strFile)
					Set objFile = objFSO.OpenTextFile(Server.MapPath(strFile(i)))
						strCompressedFile = strCompressedFile & VbCrLf & objFile.ReadAll
					Set objFile = Nothing
					tmp = Right(strFile(i), 3)
					strFileType = Replace(tmp, ".", "")
				Next : i = Null
				Erase strFile
			End If
		Set objFSO = Nothing
		Select Case UCase(strFileType)
			Case "CSS" 'CSS
				Set objRegExp = New RegExp
					objRegExp.IgnoreCase = True
					objRegExp.Global = True
					objRegExp.Pattern = "/\*[^*]*\*+([^/][^*]*\*+)*/"
					strCompressedFile = objRegExp.Replace(strCompressedFile, "")
				Set objRegExp = Nothing				
				'Strip Line Breaks
				Set objRegExp = New RegExp
					objRegExp.IgnoreCase = True
					objRegExp.Global = True
					objRegExp.Pattern = "\n+"
					strCompressedFile = objRegExp.Replace(strCompressedFile, "")
				Set objRegExp = Nothing				
				'Strip Tabs
				Set objRegExp = New RegExp
					objRegExp.IgnoreCase = True
					objRegExp.Global = True
					objRegExp.Pattern = "\t+"
					strCompressedFile = objRegExp.Replace(strCompressedFile, "")
				Set objRegExp = Nothing
				'Strip Spaces Greater than 2 long
				Set objRegExp = New RegExp
					objRegExp.IgnoreCase = True
					objRegExp.Global = True
					objRegExp.Pattern = "\s{2}"
					strCompressedFile = objRegExp.Replace(strCompressedFile, "")
				Set objRegExp = Nothing
				Response.ContentType = "text/css"
				Response.Write(strCompressedFile)
				Response.Flush
				Response.Clear
			Case "JS" 'Javascript
				'Strip New Lines
				strCompressedFile = Replace(strCompressedFile, VbCr, "")
				'Strip Spaces Greater than 2 long
				strCompressedFile = Replace(strCompressedFile, "  ", "")
				Response.ContentType = "text/javascript"
				Response.Write(strCompressedFile)
				Response.Flush
				Response.Clear
		End Select
	End Sub
End Class
%>

Open in new window

3
Comment
Author:kevp75
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 25

Author Comment

by:kevp75
Please by all means use this to it's full extent, and leave any comment you deem necessary (including improvements =D)
0
 
LVL 6

Expert Comment

by:matija_
Thanks for this. I am already using this compressor in my projects. The only thing that might help speed the things up is to compress JS with GZIP
0
 
LVL 6

Expert Comment

by:matija_
Here's a free GZIP Active-X component for IIS: http://www.xstandard.com/en/documentation/xgzip/
0
 
LVL 18

Expert Comment

by:Rajar Ahmed
Valuable info . I may use this in future .

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Join & Write a Comment

Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month