YSlow performance optimisation
Sep 7th, 2007 by robert
One of the key factor for site performance optimization is keeping number of requests low. Each request for css file or image contributes to overall slowness of your site. But it is especially critical to minimize number of JavaScript files because browsers never download them in parallel with any other content. That is if you have JavaScript include and several CSS in the HEAD of the page the browser will download JS file (alone !) first and then skip to css files that probably will be downloading simultaneously.
Nothing to be scared so far but imagine that you have 10 JS files and latency from client to server is 250msec (typical ping from US to Australia). 10 JS files will eat at least 5 seconds! And 10 JS is not too much, believe me. When you developing any Ajax or reach internet application the minimal set of libraries is : Scriptaculous(1-4 files), TrimPath templates, Validator, DHTML callendar, behaviour, etc. And Prototype and jQuery is a MUST for all sites regardless of whether you want to call them ajaxified or not.
Simplest solution for this problem is combining all JS files into one chunk and serving them in one go.
-
<%
-
// Reasonable Expiration time
-
response.setHeader("Cache-Control", "max-age=600"); // 10 minutes
-
response.setDateHeader("Expires", now + 600000); // 10 minutes
-
-
String prefix="";
-
if("js".equals(type)){
-
prefix = "/public/js/";
-
}else if("css".equals(type)){
-
prefix = "/public/themes/default/css/";
-
}else{
-
response.sendError(500, "Unsupported type "+t);
-
}
-
file = file.replace("\\", "").replace("..", ""); // no escapes or parent folders
-
request.setAttribute("file", prefix + file);
-
%><jsp:include page="${file}"/><%
-
}
-
%>
When you include it in the page you need to pass as parameter f all JS files you need comma separated.
-
<script src="http://localhost:8888/ice-mcc/public/combiner.htm?t=js&f=calendar/calendar.js,blah/blah.js"></script>
Loading ...
Can you please elaborate more on this example?What is combiner.htm?
Thanks
I agree with frank_ny. The explanation is not clear.
Thats true.By combining js files we can reduce the request and can improve the over all user perception.
But some times combining files may result in some javascript error.may be two file have same name of variables etc.
Why dont you compress them after making single file?