I developing a site with ruby on rails 3.1 on Lion. I’m using the nivo slider(content rotator). I loads without any noticable delay in Opera and Safari. But when loading in Firefox the it can take more than 10 seconds. No other content on the page will load until the slider is loaded. Also when i try to cache asset using <%= stylesheet_link_tag 'application', :cache=> true%> I get a wrong number of arguements error.
_slider.html.erb
<link rel="stylesheet" href="default.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript">
jQuery(function() {
jQuery("#nivoslider-283").nivoSlider({
effect:"fade",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:false,
directionNavHide:true,
controlNav:false,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="assets/3.jpg" alt="" title="This is an example of a caption"/>
<img src="assets/1.jpg" alt="" data-transition="slideInLeft"/>
<img src="assets/2.jpg" alt="" title="#htmlcaption"/>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$('#slider').nivoSlider();
</script>
home.html.erb
<%= render "shared/slider" %>
<%= render "shared/calender" %>
<div id="featured">
<b><%= @post.first.title %></b>
<%= simple_format(@post.first().content) %>
</div>
style.css
.theme-default #slider {
margin: 5px auto 0 auto;
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
margin-top:150px;
}
.clear {
clear:both;
}
.nivoSlider
{
position:relative;
width: 618px;
height: 246px;
background: url('loading.gif') no-repeat 50% 50%;
}
.nivoSlider img
{
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a
{
border:0;
display:block;
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Cor</title>
<%= stylesheet_link_tag 'application'%>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body>
<img src="assets/Lighthouse%201000w%20x%20300l%20pixels.jpg" id="header-image">
<%= render "shared/navigation" %>
<article>
<%= yield %>
</article>
</body>
</html>
Check this tools for page speed
Yslow browser pluing
Google page speed