Most efficient way to load a 20MB+ webpage

Question

I have a single-page website that is a calendar that is a full year's worth of images. The page load has 344 requests and 20MB total load. It's a simple PHP page without a database.

The requests include a CSS file (15KB), 4 JS files (20KB), two fonts (50KB), a video (3MB) and the rest are images. The max image size is 400x200 (139KB) but the majority are 200x400 (30KB). The images currently load as CSS backgrounds, but could be loaded as if it helps.

The files will be hosted on a cloud-based CDN. The page is optimized as much as it can be to not block the DOM from being loaded. The images are the main issue, IMO.

What is the best way to load this page's images?

I have tried lazy load, but the problem with that is it really kills the browser when it redraws and reflows. I have removed a bunch of bells and whistles like CSS3 styles, animations and others due to redraw/reflow issues as well.

The current options I can think of are an infinite scroll that loads each month before it's inview or break up each month into their own pages. I'd rather not go with the latter if possible.

There are a few questions similar to this on Stack but none that pertain to my situation. Thanks in advance for your recommendations.

have a look on this http://stackoverflow.com/q/5020351/1660192 — Aman Gupta, Jan 09 '15 at 04:54
Convert images to sprite which will reduce the no of http request. Make use of CSS to adjust the image position. — Divakar Gujjala, Jan 09 '15 at 04:55
Hmmm. Do you happen to know the dimensions of all these images prior to the browser loading them? If so and your main problem with lazy-loading is redraw/reflow issues, you could mitigate that by setting the expected width/height of each image even before it loads. Not a great solution but possibly a quick-win if it solves this for your use case... — Joel Cox, Jan 09 '15 at 04:55
Why not a great solution, @JoelCox? Avoiding reflow is THE SOLUTION, of course! — Leo, Jan 16 '15 at 22:43

score 0 · Accepted Answer · answered Jan 16 '15 at 22:27

Here's how I fixed this problem using my own implementation, similar to infinite scroll. This example uses january.php as the landing page and each consecutive month loads after the user has scrolled to the end of the current month. It appends at the element. Here is the final result:

http://axcient.com/year-in-review-2014/

JS

    var index = 1;
 var sections = [
  'january',
  'february',
  'march',
  'april',
  'may',
  'june',
  'july',
  'august',
  'september',
  'october',
  'november',
  'december'
    ];
     var fetchMore = function (){
           if ( $(window).scrollTop() >= $(document).height() - $(window).height() - 300 ){
                $(window).unbind('scroll',fetchMore);
                if (index < sections.length) {
                 $.post('/load.php', {'section': sections[index] },
                  function(content) {
                      if (content.length > 0) {
                          $(content).insertAfter($('article:last'));
                          init_isotope();
                          init_waypoint(sections[index]);
                          $(window).bind('scroll',fetchMore);
                          index++;
                      }
                  }
             );
                }
            }
     }
     $(window).bind('scroll', fetchMore);

january.php

    <?php ?>
    <html>
      <head>
      </head>
      <body>
        This is your landing page
        <article class="january">
          some content
        </article>
      </body>
    </html>

february.php

    <?php ?>
    <article class="february">
      some content
    </article>

load.php

<?php

$sections = array('january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december');
$section = $_POST['section'];

$template_path = substr($_SERVER['REQUEST_URI'], 0, strrpos($_SERVER['REQUEST_URI'], '/annual-report-2014/'));

if (!empty($section) && in_array($section, $sections) && file_exists($section . '.php')) {
 include($section . '.php');
}

die();

?>

Most efficient way to load a 20MB+ webpage

1 Answers1