Grow your CSS skills. Land your dream job.

How is NBC Achieving These Load Times?

  • # May 31, 2013 at 12:38 pm

    http://www.nbcnews.com/business/big-pork-deal-comes-amid-friction-over-livestock-drug-6C10136355

    If you use the news items on the left side of the screen to navigate to a new page you’ll notice the load time is incredibly fast. I’m curious how they’re achieving this. Unless I’m missing something, I can’t find any frames being used in the HTML.

    # May 31, 2013 at 1:39 pm

    Looks like AJAX to me. I can’t pin down exactly how it is being done, but it’s nice.

    # May 31, 2013 at 1:46 pm

    @JoshBlackwood my first bet was something jQuery or Ajax… but I can’t pin it down either.

    # May 31, 2013 at 1:53 pm

    They’re using a lot of “data-“ attributes in their code, I’d wager for the JS to utilize. They’re also doing a very nice, seamless job of appending unique identifiers to the URL string. What’s even cooler is the infinite scroll. Scroll an article down to the end and you’ll see an almost imperceptible (at least on my connection) blink as it loads the next article—it even flips to the right nav element on the left, and appends the correct URL string.

    Reasonably impressive stuff, in my opinion.

    # May 31, 2013 at 2:58 pm

    Infinite scroll loads another article in milliseconds for me.

    # May 31, 2013 at 4:16 pm

    That’s a good point @JoshBlackwood

    If anybody has any idea what this is please let us know, I’ve been Googling and Googling…

    # May 31, 2013 at 4:19 pm

    > If anybody has any idea what this is please let us know, I’ve been Googling and Googling…

    What do you mean by “this”?

    They’re definitely using infinite scroll (AJAX) of some sort, probably custom solution developed to fit their needs.

    And they’re most likely on a super fast server.

    Here’s a similar WP plugin – http://www.infinite-scroll.com/

    # May 31, 2013 at 4:23 pm

    @AlenAbdula I’m curious if they’re using some sort of plugin to preload other than infinite scroll. When you click on a page it loads incredibly quickly, and that’s not really a function of infinite scroll. I’m more interested in how they’re achieving the loading speed. Maybe it is just a super fast server.

    # May 31, 2013 at 4:36 pm

    I wouldn’t hurt to ask http://www.nbcnews.com/id/10285339

    # May 31, 2013 at 4:39 pm

    …that won’t go anywhere.

    # May 31, 2013 at 4:43 pm

    Does for me.

    # May 31, 2013 at 4:46 pm

    Just a guess, but perhaps the content from other pages are being loaded behind the scene?

    Edit: Oh I see what you mean. I think the guys above are right. It’s using infinite scroll along with ajax. Pretty much what Twitter does.

    # May 31, 2013 at 5:13 pm

    @chrisburton I haven’t been able to find anything that would preload an entire page.

    Again, I’m not really interested in the infinite scroll – I’m interested in the loading.

    # May 31, 2013 at 5:21 pm

    Great Scott! I believe I found it: http://wordpress.org/plugins/advanced-ajax-page-loader/

    # May 31, 2013 at 5:26 pm

    Keep in mind they are also using a CDN.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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