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