Transcript

00:07 one of the unique features of limelight
00:09 is its ability to lazy load content lazy
00:14 loading means that we are loading the
00:17 content of the lightbox after the main
00:21 content of the page has already loaded
00:23 so we don't render block technically
00:24 speaking so on this page here we've got
00:27 several things in limelight like boxes
00:30 and the only thing we've got on a page
00:32 is a paragraph and we've got the the
00:35 launch of our for lime light so none of
00:39 this stuff here so we've got the whole
00:41 of the big white double homepage we've
00:44 got a 10 megabyte image that I've
00:46 warehoused and we've got a self-hosted
00:50 video which is the limelight trailer
00:53 which is 48 megabytes
00:55 now normally if you try to load all that
00:57 on a page obviously it would take an age
00:59 to load but in this case all that
01:02 loading is going to happen after the
01:05 user has seen the main content of the
01:08 page so the launcher bar and the
01:11 paragraph now obviously it still takes
01:16 the same amount of time to load but in
01:18 all likelihood by the time the user is
01:20 taken in the information on your home
01:22 page or whichever page it is then all
01:24 this stuff is going to be loaded anyway
01:26 if we look at each of the individuals
01:29 stacks we'll see we've got a lazy
01:31 preload check box and that's all you
01:33 need to do is turn that on and for most
01:35 things I would say that it's probably
01:37 better to have it turned on there are
01:39 cases where you don't want it turned on
01:42 the way the lightbox behaves but
01:44 generally speaking it's gonna save page
01:47 load time so this web page is going to
01:50 load completely in the background this
01:53 huge image again lazy preload it and the
01:58 self hosted video will automatically do
02:01 it
02:01 we've got no setting for lazy preload
02:03 because it will do it by default it
02:07 won't play the video until we open the
02:09 lightbox but it will load it in the
02:11 background
02:12 now if you change this to YouTube and
02:14 Vimeo there's no lazy load feature
02:17 because it wouldn't make sense because
02:19 they're streamed services anyway so
02:21 we'll just go back to self hosted video
02:24 and we'll see how fast this loads so if
02:29 I preview this in a browser just because
02:32 I've cleared the cache in my Safari and
02:34 there we go that's the page loaded
02:37 pretty much as it would do if there were
02:39 no light boxes on the page at all anyway
02:41 so we've loaded the whole of the big
02:45 white dog web site home page will you
02:46 loaded a 10 megabyte image and we've
02:49 loaded a 46 48 megabyte video so if we
02:54 now say look at that image it's there on
02:57 our page already and I'm not suggesting
02:59 you should load 10 megabyte images this
03:02 is just for an example our self hosted
03:06 video is there and we'll start playing
03:08 immediately and here's the big white dog
03:12 home page all loaded ready to go so as I
03:17 say it's a bit of an unreal example but
03:20 it's an extreme example to show just how
03:22 effective it can be and the lazy loading
03:27 demo so I and you can download this
03:29 project file as well shows this in
03:33 action and a bit more of a real-world
03:36 situation so what I'm going to do is I'm
03:39 just going to empty the cache on the
03:41 browser so that we get a realistic view
03:43 of it loading again so we'll reload that
03:45 page and there it is now that has not
03:50 not only loaded this page but it has
03:52 loaded all the images on all these other
03:56 pages as well and there are a lot ok so
03:58 if we go to the ground full page
04:00 instantly today we haven't reloaded the
04:03 browser we've got all these images their
04:07 restaurant page boring the juice already
04:11 there 2nd floor again and the rooftop
04:15 page so you can see how fast it makes it
04:19 all that same video is there as well
04:22 that's pulling it from Vimeo agent
04:27 so you can see how quick it makes it and
04:31 again this is a bit of an unusual
04:34 example but it gives you a good idea of
04:37 the power of lazy loading stuff in the
04:40 background and the other thing you will
04:42 notice on this page it says what about
04:44 the SEO well all those pages we just saw
04:47 our actual pages on this site so here's
04:50 the first floor site first floor page
04:54 there we go it's floor one we could
04:55 change that to floor two
04:57 and there's the second floor page now
05:00 obviously they're loading fast now
05:01 because they're already cached by the
05:02 browser but all these pages will still
05:07 work if people go to them directly so
05:09 it's not messing up your site and
05:11 they've all got a menu item that links
05:14 them back to the home page and that's
05:16 just in a limelight visibility stack so
05:19 this menu here looks like the one on the
05:22 home page but we'll only show this back
05:24 to home button if this page is launched
05:28 outside of a limelight so when we go to
05:30 our ground-floor page now we have no
05:33 menu at the top of it it's just the
05:35 actual site menu okay so that's a very
05:37 brief introduction to lazy loading I
05:40 would urge you to use it wherever you
05:42 can to keep your pages nice and fast
05:44 particularly if you've got a lot of
05:46 content in a lightbox if you've just got
05:48 a few stacks in a lightbox then doesn't
05:51 matter so much the stacks content will
05:55 support lazy loading it's got a lazy
05:58 preload button but you should be aware
06:00 there's no way to stop the CSS and the
06:03 JavaScript have any associated stacks
06:05 from loading whether the page they will
06:08 be loaded normally it will only stop the
06:10 HTML part of it so again it's there but
06:16 it won't make so much difference but he
06:19 probably wouldn't be so much of a
06:20 problem with stacks content anyway it's
06:22 images and videos and things like that
06:24 really that that you'll get the biggest
06:26 gains from so I hope that's been a
06:29 useful introduction to lazy loading in
06:31 limelight it's just another one of the
06:33 unique features of limelight
06:35 I hope you find useful and thanks for
06:37 watching"}]