Transcript

00:00 hey guys joe here and in this video
00:01 we're going to be looking at rain check
00:03 a new great way to add some more speed
00:06 and performance to our websites
00:09 so raincheck is super simple to use
00:11 basically you can add whatever you want
00:13 into it and on page load none of the
00:15 content that's inside of raincheck will
00:18 actually get loaded
00:20 there are two ways we can actually load
00:22 the content
00:23 the first is after the page has already
00:26 been loaded essentially after all the
00:28 content that's been loaded on the page
00:30 is actually loaded into the web browser
00:32 we can actually then make rain check
00:34 download the content in the background
00:36 next we can actually load it on scroll
00:40 so when we turn on on scroll we can
00:42 actually delay the fade in event if we
00:44 want to give us a nice scrolling uh lazy
00:46 load effect we can also define the
00:48 scroll offset
00:50 and this is the number of pixels below
00:52 the bottom of the browser when raincheck
00:54 will actually trigger the loading of
00:56 that content
00:58 let's go ahead and see this in action in
00:59 the browser so let's go ahead and reload
01:02 this page
01:04 now it was very fast but only after all
01:06 of the content was loaded this image was
01:08 actually added to the browser
01:10 now
01:11 this is the on-page load again this
01:13 happens very fast and it does help page
01:16 performance
01:17 however for it to be more apparent let's
01:20 have a look at the on scroll
01:22 so as i scroll down this page at the
01:24 very bottom
01:26 you will see now i added a delay but
01:28 you'll notice that that image was added
01:30 only after i scrolled down to it
01:33 not only did we get that cool fade in
01:35 effect but the actual content was never
01:38 loaded on the page until it reached 10
01:41 pixels from the bottom of my browser
01:44 this really allows us to have that
01:46 initial page load super quick
01:49 so as you see raincheck can really help
01:51 us improve our page performance
01:53 especially for things such as images
01:56 iframes embeds things of that nature now
01:59 not every stack is going to like being
02:01 put inside of raincheck again on page
02:04 load that content will not exist in the
02:07 browser therefore if that stack that you
02:09 added into raincheck maybe has some
02:10 javascript and it requires that the
02:12 content be in the html it might not work
02:16 the best okay so
02:18 pick and choose what actually goes into
02:20 raincheck let me know if you have
02:22 something that you would like to work in
02:23 raincheck and maybe it's not again not
02:26 every stack will work but the simple
02:28 things such as images
02:30 embeds and iframes i think those three
02:32 items are probably what eat up the the
02:36 most bandwidth and reduce our page
02:38 speeds by the most by adding this
02:40 content into raincheck you can actually
02:42 lazy load that stuff even maybe not ever
02:46 load it if the user never even scrolls
02:48 down to it right so this will really
02:50 help us make faster websites and i can't
02:52 wait to see how it improves your page
02:54 speed scores take everyone hope you
02:56 enjoying wrench check and we'll talk to
02:58 you later bye
03:14 you"}]