Photo gallery page loading slowy...what could be the problem? - php

Question

I have a simple php site that I built, but for some reason my photo gallery page takes a little long to load. Can someone tell what the problem is and how to speed up the load time?
Here is php code. By the way I coded everything within this one file (photography.php), with only references to images in another folder...
<?php
$thisPage="Photographer, Caribbean, Jamaica, Bahamas - Cheryl Blackerby";
$thisDescription="";
$thisKeywords="Caribbean, Jamaica, Bahamas";
include("header.php");
//include("html/photography.html");
?>
<div id="photography">
<div id='coin-slider'>
<div id="photos">
<a href="#" target="_blank">
<img src='photography/img_01.jpg' alt="Staniel Cay Yacht Club in the Exumas, Bahamas" />
<span>Staniel Cay Yacht Club in the Exumas, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_02.jpg' alt="Junkanoo dancer in Inagua, Bahamas" />
<span>Junkanoo dancer in Inagua, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_03.jpg' alt="Doctor's Cave Beach in Montego Bay, Jamaica" />
<span>Doctor's Cave Beach in Montego Bay, Jamaica</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_04.jpg' alt="Paella at the Beach House, Eleuthera, Bahamas" />
<span>Paella at the Beach House, Eleuthera, Bahamas</span>
</a>
<a href="#" target="_blank">
<img src='photography/img_05.jpg' alt="Opening of the Supreme Court, Nassau, Bahamas" />
<span>Opening of the Supreme Court, Nassau, Bahamas</span>
</a>
<a href="#">
<img src='photography/img_06.jpg' alt="Flamingos on Inagua, Bahamas" />
<span>Flamingos on Inagua, Bahamas</span>
</a>
</div><!-- end photos -->
</div>
<p id="right-description"><img src="images/side-descrip-photos.jpg" width="20" height="90" alt="Photo Description" /></p>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 840, height: 520, navigation: true, delay: 5000, links : false, hoverPause: true, opacity: 0.7, effect: 'practice', sph: 1, spw: 1 });
});
</script>
</div><!-- end photography -->
<?php
include("footer.php");
?>
Here is the link to the site: here
I would appreciate any advice on the issue and any coding techniques that would help.
Thanks,
Gary D.

Answer 1

Loads nice and quickly for me - impressively fast in fact.
I'd say it is bandwidth-heavy, and you tried it from a slow connection.
One thing about it is that you pre-load all your large images, even though you only show the top one. This is a good idea, except that they appear earlier in your code than the navigation on the right, so I imagine on a slow connection, there'd be some wait for all the large images to download before it shows the navigation on the right. You could get around this by pre-loading these images using a different method, using JQuery, so that the request to load those images doesn't come before other images on the page.

Answer 2

Start here: http://developer.yahoo.com/yslow/ that's a firefox plugin that will analyze your page for download bottlenecks. It could have nothing to do with your php code.