1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by DaveL, Sep 5, 2011.

  1. DaveL

    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!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Attached Files:

    DaveL likes this.
  3. DaveL

    DaveL Well-Known Member

    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!
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Yes.

    Also, you're floating everything left.

    You need to redo your CSS & HTML if you want to have it all centred.
     
    DaveL likes this.
  5. DaveL

    DaveL Well-Known Member

    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.
     
  6. CyclingTribe

    CyclingTribe Well-Known Member

    ^^ 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
     
    DaveL likes this.
  7. CyclingTribe

    CyclingTribe Well-Known Member

    Damn, spent so long replying you'd already sorted it ... :ROFLMAO:
     
    DaveL and Digital Doctor like this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
    DaveL likes this.
  9. DaveL

    DaveL Well-Known Member

    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!
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  11. DaveL

    DaveL Well-Known Member

    Can I ask what that kind of layout is called Brogan, Just so I can have a search online to find the right guide to do it.
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    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>
     
    EQnoble and DaveL like this.
  13. DaveL

    DaveL Well-Known Member

    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);
    }
    
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    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.
     
  15. DaveL

    DaveL Well-Known Member

    Hi Broagn,

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

    testpage.png

    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
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    It's displaying fine for me in FF, Chrome and IE.

    http://www.mydover.co.uk/index.php?pages/OnAir__Test/

    Try clearing your cache.

    Remove the float: left from .dcr_presenters_gridRow to center it.

    Add text-align: center to .dcr_presenters_name to center them and font-weight: bold to make them bold.

    page.PNG
     
    DaveL likes this.
  17. CyclingTribe

    CyclingTribe Well-Known Member

    Much, much faster now too ... (y)
     
    DaveL likes this.
  18. DaveL

    DaveL Well-Known Member

    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

    and this is the HTML

    Edit, Im using FF 3.6.21
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    Are you sure you're working on the correct page?

    It all works fine for me, as you can see from the screenshot in my post above.
     
    DaveL likes this.
  20. DaveL

    DaveL Well-Known Member

    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)
     

Share This Page