How can I speed this page loading up? (Custom Xenforo Page)

DaveL

Well-known member
Ive created this page using Xenforo pages, but was just wondering if anyone could advise me how I might get it to load a bit quicker? It seems to take a while for all the pics to load and im on 20mb broadband.

I also wanted to try and get each line of pics centered rather then starting on the left, but didnt have much joy using <center>, If anyone knows whats stopping that from working I would be a happy man!
 
Am I right in thinking that it downloads the image first before resizing it, thus causing it to load slow?

Actually, I feel pretty stupid now, should have thought of that first. Doh!
 
Is floating it bad? Ive never really been great at trying to arrange images on a web page. I spent ages looking for a guide and the one I got to work is the code im currently using.
 
Your images are huge.

^^ What he said!! :)

You've uploaded the images at full size, for example, this one: http://www.dovercommunityradio.co.uk/uploads/images/presenters/Barry 2.jpg

The dimensions are 2845 x 2247 pixels and the physical file size is 502kb; which is way, way bigger than the size you're actually displaying it at on the web page itself (212 x 183) - that's overkill.

The browser is re-sizing the image to make it fit on the screen, however it is still downloading the full size image in order to do it, so that's why there's a real lag in loading the page with all the images on - behind the scenes they are all really massive and are taking ages to download.

When I resize the image to be 212 pixels wide the file size drops massivley to 21.2 kb.

Re-size all the images to the actual size you want to display them at and you'll find the page loads lots lots quicker ... (y)

Cheers,
Shaun :D
 
Floating isn't bad, it's how I do it on my site (http://cliptheapex.com/community/pages/circuits/).

However, your particular implementation doesn't allow for easy changes as it's all done inline without classes.

You could always just add a margin-left to the first image on each row and that would push everything over to the right.
Although that would be dependant on the browser/screen width.
 
Hi Brogan,

I must say, I love what you have done to your site. The code you have used to do yours, did you place al the css in the EXTRA.css template?

Im going to redo mine, no point in using sloppy code if theres code that can do it better!

Oh, with the images - I got them down from 26,124 KB to 889 KB! Needless to say the page loads like a dream now!
 
I use a custom CTA.css template for my pages.

I know most people advise against it, but there's nothing to stop you using a table for a simple grid layout.
 
It's just a grid layout using divs.

Code:
/* Circuits Page */
.cta_circuits_gridRow {
position: relative;
width: 972px;
float: left;
margin: 10px 0;
}

.cta_circuits_gridCell1,
.cta_circuits_gridCell2,
.cta_circuits_gridCell3,
.cta_circuits_gridCell4 {
position: relative;
width: 228px;
height: 242px;
float: left;
background-color: @secondaryLight;
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
}

    .cta_circuits_gridCell1:hover ,
    .cta_circuits_gridCell2:hover ,
    .cta_circuits_gridCell3:hover ,
    .cta_circuits_gridCell4:hover {
    background-color: @secondaryMedium;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.8);
    }

    .cta_circuits_gridCell1 {
    left: 6px;
    }

    .cta_circuits_gridCell2 {
    left: 22px;
    }

    .cta_circuits_gridCell3 {
    left: 38px;
    }

    .cta_circuits_gridCell4 {
    left: 54px;
    }

HTML:
<div class="cta_circuits_gridRow">
    <div class="cta_circuits_gridCell1">
        Cell contents
    </div>
    <div class="cta_circuits_gridCell2">
        Cell contents
    </div>
    <div class="cta_circuits_gridCell3">
        Cell contents
    </div>
    <div class="cta_circuits_gridCell4">
        Cell contents
    </div>
</div>
 
Thanks Brogan,

Ive had a play around using that CSS and a little bit of HTML from your site (Hope you dont mind) and I managed to achieve this.

Only problems are for some reason its thrown the header and the breadcrumbs out. Im also having trouble again trying to get the images in the center and there seems to be an issue with the names. They seem to be at different positions and the last one isnt bold.

This is the HTML im using

HTML:
<div class="messageText baseHtml">
<center>
    <div class="dcr_presenters_gridRow">

        <div class="dcr_presenters_gridCell1">

            <a href="{$xenOptions.boardUrl}/pages/OnAir__AlbertThorp" class="cta_linkPlain">

                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Albert 3.jpg" alt="Albert Thorp"></div>

                <div class="dcr_presenters_title">

                    <div class="dcr_presenters_name">Albert Thorp</div>

                </div>

            </a>

        </div>

        <div class="dcr_presenters_gridCell2">

            <a href="{$xenOptions.boardUrl}/pages/OnAir__BarryOBrien" class="cta_linkPlain">

                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Barry 2.jpg" alt="Sepang International Circuit"></div>

                <div class="dcr_presenters_title">

                    <div class="dcr_presenters_name">Barry O'Brien</div>

                </div>

            </a>

        </div>

        <div class="dcr_presenters_gridCell3">

            <a href="{$xenOptions.boardUrl}/pages/OnAir__CallumMoorin" class="cta_linkPlain">

                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Callum 2.jpg" alt="Shanghai International Circuit"></div>

                <div class="dcr_presenters_title">

                    <div class="dcr_presenters_name">Callum Moorin</div>

                </div>

            </a>

        </div>

        <div class="dcr_presenters_gridCell4">

            <a href="{$xenOptions.boardUrl}/pages/OnAir__GaryScott" class="cta_linkPlain">

                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Mal 2.jpg" alt="Istanbul Park"></div>

                <div class="dcr_presenters_title">

                    <div class="dcr_presenters_nameSingle">Gary Scott</div>

                </div>

            </a>

        </div>

    </div>
</center>

This is the CSS

Code:
/* Presenters Page */
.dcr_presenters_gridRow {
position: relative;
width: 972px;
float: left;
margin: 10px 0;
}

.dcr_presenters_gridCell1,
.dcr_presenters_gridCell2,
.dcr_presenters_gridCell3,
.dcr_presenters_gridCell4 {
position: relative;
width: 180px;
height: 200x;
float: left;
background-color: @secondaryLight;
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
}

    .dcr_presenters_gridCell1:hover ,
    .dcr_presenters_gridCell2:hover ,
    .dcr_presenters_gridCell3:hover ,
    .dcr_presenters_gridCell4:hover {
    background-color: @secondaryMedium;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.8);
    }

    .dcr_presenters_gridCell1 {
    left: 6px;
    }

    .dcr_presenters_gridCell2 {
    left: 22px;
    }

    .dcr_presenters_gridCell3 {
    left: 38px;
    }

    .dcr_presenters_gridCell4 {
    left: 54px;
    }
.dcr_presenters_name,
.dcr_presenters  {
line-height: 1.2;
margin-left: auto;
    margin-right: auto }
font-weight: bold;
color: rgb(17, 17, 17);
}
 
The header and breadcrumbs appear fine to me.

I'm guessing you've fixed the problems as the names also seem fine.

You need to change the alt text though; I don't think Shanghai International Circuit is suitable for Callum Moorin ;)

BTW, if you want to center the content, change the .dcr_presenters_gridRow margin to 0 auto.
 
Hi Broagn,

Just double checked, and it appears to be displaying ok in IE9, However in FF its showing like:

testpage.webp

I also edited the CSS to show
/* Presenters Page */
.dcr_presenters_gridRow {
position: relative;
width: 972px;
float: left;
margin: 0 auto;
}
but for some reason its still for them aligned to the left. Also, and im sorry to be a pain! Would you what CSS to use to align the names in the center and have them in bold? I did try the below but it dosent appear to be doing anything

.dcr_presenters_name {
line-height: 1.2;
margin-left: auto;
margin-right: auto }

font-weight: bold;
color: rgb(17, 17, 17);
}

Really appreciate your help.

Dave
 
I never thought I would see the day where I would get frustrated with FF over IE! Cleared the cache but still no joy. Also checked on my laptop using FF and exactly the same problem.

Im also having no joy with the center/bold for the names. This is what ive got in my CSS

.dcr_presenters_name {
text-align: center
font-weight: bold;
}

and this is the HTML

<div class="dcr_presenters_name">Albert Thorp</div>

Edit, Im using FF 3.6.21
 
Thats really strange how it was displaying correctly for you. Exactly the same page, however ive just managed to solve the header/breadcrumbs issue - It needed another closing </div> tag at the end. Now showing up fine on my FF. Also unless you have a very wide browser, you images appear to be more central compared to mine!

Still cant work out why the names are centered and bold for you, but not on any of my browsers. One way ive managed to solve it is by using HTML rather the CSS to make it bold and centered. Bit frustrating doing it that way, but same end result, so cant grumble!

Thanks again for your help Brogan, it really has been appreciated. My page loads 100x faster and looks a damn site better. (y)
 
Top Bottom