Grow your CSS skills. Land your dream job.

How to reduce load time on large 1-page sites?

  • # April 26, 2013 at 6:34 pm

    For instance how does a site like http://annualreport.elevationchurch.org/ manage to load rather well? There seems to be a decent amount of media and animations on that site.

    I have designed a few 1-page style sites, but never one with as much media. Is it all just delayed loading with javascript? Do the animations possibly contain that sort of thing?

    Thanks in advance for any tips/suggestions.

    # April 26, 2013 at 6:40 pm

    A CDN will help along with minifying your scripts and CSS. Also, reducing the file size of images is always good.

    # April 26, 2013 at 7:17 pm

    That whole site is actually a whopping 28.3mb! Holy crap.

    All in all, the site took me 47 seconds to load. They are just doing it in a very clever way. They only load the stuff that you are viewing, once that is loaded, it’ll start loading everything else as quick as it can in the background so by the time you start scrolling down, everything is already loaded.

    # April 26, 2013 at 7:48 pm

    I was on my iPhone when I wrote the above so I didn’t click the link. But yeah, that’s insane.

    # April 27, 2013 at 5:58 am

    Simple way to do the trick is by loading resources based on the section position from the visible area on the screen. But, to make the visitor does not need to scrolling and then waiting new resources loaded at the same time, you can set the distance limit to 2 × height of the screen, so, at least the visitor can still see the complete page section down as far as 1 × height of the screen, while the next 1 × screen distance will load the next resources silently:

                  .
    
    .
    -VISIBLE AREA | .
    . | <=== SCREEN
    | | Resources loaded by | |
    | | default. <======== PAGE
    | | | |
    | | | |
    | | | |
    :_|________________________|_:
    | |
    -HIDDEN AREA | Resources loaded by |
    | default. |
    | |
    | |
    :________________________:
    | | ⇓⇓⇓ (more than 2 x screen height)
    | Loading resources... |
    | |
    | |
    | |
    :________________________:
    # April 27, 2013 at 8:11 am

    this may help if using jquery.. http://www.appelsiini.net/projects/lazyload

    # April 27, 2013 at 12:17 pm

    Thanks for the replies guys – I had a feeling it would be something with delayed loading. Does LazyLoad also work on videos or iframes?

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".