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

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.