How to improve Cumulative Layout Shift for a better page experience

How to improve Cumulative Layout Shift for a better page experience


How to improve Cumulative Layout Shift for a better page experience

Learn how to reduce your website’s Cumulative Layout Shift. This video covers what a Cumulative Layout Shift is, its common issues and solutions, how to measure it, and what’s a good score.

Chapters
0:00 Introduction
0:31 What is Cumulative Layout Shift (CLS)
5:14 What is a good CLS score?
5:55 How do I find my CLS score?
11:12 How to fix common issues with Cumulative Layout Shift
11:41 Images
12:52 iframes/embeds
14:19 Dynamic content
14:47 Web fonts
17:42 Wrap up

Learn more:
Cumulative Layout Shift doc→ https://goo.gle/3BA5Iix
CrUX Report → https://goo.gle/3mRQelN
Optimize CLS → https://goo.gle/2YRdWES
Updates to how CLS is calculated → https://goo.gle/2YAOGlX
Lighthouse → https://goo.gle/3iUBjo0
Calculating CLS in my own JS → https://goo.gle/30lLc7R
Best Practices for Fonts → https://goo.gle/3v6FXEr
Optimize WebFont loading → https://goo.gle/3v2YLEu
Monica Dinculescu’s Font-style-matcher → https://goo.gle/3BDXTZe
Web-vitals → https://goo.gle/3oVTtJK

Watch more Getting started with Page Experience → https://goo.gle/3xgTJUu
Subscribe so you don’t miss an episode Getting started with Page Experience → https://goo.gle/SearchCentral

#CoreWebVitals #WebDev #PageExperience


product: AMP - Page Experience; fullname: Patrick Kettner;


Content

0.58 -> [Music]
1.28 -> so you know that thing when you start to
3.12 -> read a website when all of a sudden the
4.799 -> page just kind of jumps like hundreds or
6.799 -> thousands of pixels and you have no idea
8.32 -> where you were or when you go to tap on
10.24 -> a button and the button just has a
12.32 -> pop-up that pops up right where your
13.679 -> finger is leaving you desperately
14.96 -> smashing that back button well these
17.199 -> things are called layout shifts and
18.72 -> layouts just like this are terrible but
20.96 -> with the metrics that make up page
22.32 -> experience it's finally a lot easier to
24.24 -> make these lamentable layouts less
26 -> shifty and more nifty stick around as we
28.32 -> check out yet another one of these
29.519 -> metrics cumulative layout shift
31.679 -> when we're talking about cumulative
32.88 -> layout shift or cls if you're as easily
34.96 -> tongue tied as i am what we're talking
36.88 -> about is how stable a page is or rather
39.12 -> how predictable pages to use
41.2 -> all the visible parts of a page and how
42.64 -> they fit together make up what a browser
44.239 -> thinks of as a layout images text video
47.36 -> all of it now sometimes when the
49.44 -> contents of a page changes like when an
51.44 -> ad is inserted a widget loads or an
53.44 -> image changes size stuff that's already
55.92 -> visible on the page can end up needing
57.92 -> to be shifted around for everything to
59.68 -> fit
60.48 -> every time that happens well that's a
62.239 -> layout shift cumulative layout shift is
64.4 -> a way to look at how much as in what
66.32 -> percentage of the visible parts of a
68.24 -> page experience these layout shifts
70.64 -> for example
71.76 -> here we have a simple blog article
74 -> there's a headline a hero image and text
77.119 -> on a slower connection the text shows up
78.88 -> right away but the image takes a bit
80.799 -> more time to appear
82.24 -> eventually the image will be downloaded
83.759 -> but before those pictures pixels can be
85.36 -> painted some changes might need to occur
87.68 -> see as far as the browser is concerned
89.36 -> everything above the image is fine
90.96 -> nothing needs to change but in order for
92.88 -> the image to show up where and how it
94.88 -> was intended everything below it has to
97.119 -> shift down to make room for it
98.88 -> so the text of the article gets pushed
100.4 -> down half the visible amount of the page
102 -> in order to make room for the image that
103.759 -> means fifty percent of what we can see
105.52 -> has to be shifted just for the image to
107.2 -> show up that will give us a cls of 0.5
110.479 -> as in 50
112 -> so a pages cls score is basically how
114.399 -> much the visual parts of a page change
116.399 -> there is a few caveats to this however
118.799 -> number one there can only be one
120.88 -> earlier we said that our page has a cls
122.719 -> of 0.5 that's true but only if nothing
125.92 -> else ever shifts on the page or at least
127.92 -> if i exit the page before anything else
129.599 -> shifts
130.479 -> if however later on an ad loads and
132.56 -> shoves everything down our cls could
134.8 -> shoot way up
136.08 -> in this case literally everything is
137.599 -> moved that means our cls is now one
140.4 -> every time someone visits the site the
141.84 -> browser will continually track cls for
143.52 -> the entire time that they use it once
145.36 -> they navigate away or close the tab the
147.44 -> browser will report the largest cls
149.28 -> value found that one number gets
151.2 -> collected with all the other visitors to
152.64 -> that url and generates the cls value for
154.879 -> that page's web vitals
156.959 -> number two
158.08 -> sometimes change is a good thing
160.08 -> if pages never changed they wouldn't be
161.84 -> that useful and cls certainly wouldn't
163.68 -> want that to happen
165.2 -> layout shifts that are triggered by used
166.72 -> interactions things like tapping
168.319 -> clicking or typing are given a 500
170.239 -> millisecond grace period to perform any
172 -> layout shifts they need to best respond
173.599 -> to that user
174.879 -> after those 500 milliseconds a new cls
177.28 -> session window starts from millisecond
179.44 -> 501 onward any content shift that occurs
182.08 -> gets added up and potentially used for a
184.08 -> final cls score
185.76 -> that session window will stay open for
187.68 -> as long as there are visible layouts
189.12 -> being shifted any additional shifts are
191.519 -> added together
192.8 -> for example another page on our site has
194.8 -> a similar layout a headline and body
196.64 -> text this time it has two smaller images
199.76 -> just like before they're slow to load so
201.44 -> our content shifts once they do
203.519 -> unlike before the first image only
205.519 -> shifts a small amount five percent so
207.92 -> now our cls would be 0.05
210.64 -> but then the second image loads several
212 -> hundred milliseconds later it also needs
214.159 -> a little bit of room so the contents get
215.68 -> pushed down even further it shifts the
217.28 -> visible amount 2.5 percent
219.68 -> since it happens so close to the last
221.12 -> layout shifts they are accumulated into
222.879 -> one single value 7.5 or 0.075
227.36 -> the session window will stay open until
228.879 -> more than one second has passed since
230.239 -> the last layout shift or until five
232.239 -> seconds have passed since the creation
233.76 -> of this session window
235.599 -> any future layout shift gets counted as
237.36 -> a separate layout shift event and not
239.04 -> add it to the previous window
240.72 -> number three not all interactions are
242.48 -> free
243.519 -> user interactions like scroll or mouse
245.84 -> move don't count as the kind of events
247.599 -> that give you that 500 millisecond grace
249.36 -> period well this makes sense i don't
251.84 -> think a user would really expect the
253.439 -> layout of a page to shift while they
254.959 -> were scrolling
256.16 -> number four not all changes are bad
258.72 -> you can actually move content on the
259.84 -> page all you want via css animations and
261.919 -> transforms
263.199 -> this is because when you set a css
264.8 -> attribute like transform the element
266.32 -> gets moved to its own layer this means
268.4 -> that its position isn't impacting the
269.919 -> layout of any other part of the page
272.08 -> it's like floating on top of everything
274 -> else
274.72 -> and since nothing else is being shifted
276.88 -> it won't count towards your cls
278.96 -> finally number five what you can't see
280.72 -> can't hurt you you may have noticed that
282.479 -> i've repeatedly emphasized that cls is
284.4 -> only for the visible elements of the
285.919 -> page that's because as far as cls is
288.56 -> concerned if you can't see it it doesn't
290.4 -> matter if it's moving like all page
292.4 -> experience cls is about making sure that
294.16 -> people have the best user experience
296 -> possible so if you need to move
297.68 -> something around or lazy loading content
299.52 -> well go for it if it isn't visible to
301.44 -> the user or shifting what is visible to
303.12 -> the user then your cls will not be
304.639 -> affected the key thing to remember is
306.639 -> that a good cls score means that what
308.56 -> your user sees is stable and predictable
310.8 -> it's not jumping all around
312.88 -> so now we know what cls is and that is
314.72 -> represented by a number between zero and
316.4 -> one but what should that value be
319.68 -> in a perfect world zero i mean there's
321.84 -> almost never a need for a layout shift
323.68 -> to occur we can almost always prevent
325.36 -> them in fact we're going to get into
326.88 -> specifics of just how you can do that
328.24 -> real soon
329.28 -> in the real world though we all have
330.56 -> jobs and our sites are really balancing
332.24 -> tons of different concerns so if you
334.08 -> can't hit zero then a great number to
335.52 -> aim for is 75 or more of the views a
337.84 -> page has has a cls of 0.1 or less
341.44 -> if you're below that you're doing great
343.44 -> but anything above it well stick around
345.52 -> and we'll see if we can lower it
348.32 -> i know that was a ton of information but
350.08 -> i promise now you know it all i mean
351.6 -> that's what cls is it's great to get
353.44 -> that taken care of but now you may be
355.039 -> asking how do i figure out what my cls
357.12 -> score is well like all the core web
359.52 -> vitals cls is what actual users are
361.44 -> experiencing when using your site we
363.44 -> call this information field data as a
366.16 -> result you can only really actually rely
368.56 -> on the user measurements that come from
369.919 -> those real world users either via your
372.08 -> own analytics or the ones you have
373.759 -> access to inside of the core web vitals
375.759 -> report section of the search console
378.4 -> if you haven't already you will need to
379.84 -> create a search console account but i
382 -> highly recommend it see you'll have some
384 -> invaluable information in there to how
385.6 -> your page is performing with page
386.96 -> experience as well as many other
388.72 -> foundational pieces to an outstanding
390.639 -> fantastic modern website
392.96 -> search console page experience and core
394.96 -> web vitals all have the same source for
396.88 -> your page's cls result crux or the
399.28 -> chrome user experience report you can
401.28 -> read all about what crux is in the links
403.36 -> below
404.56 -> unfortunately crux doesn't update
406.16 -> instantly it can take up to a month
407.84 -> after you publish your page for it to
409.199 -> start getting field data but you don't
410.96 -> need to wait that long to get an idea of
412.4 -> how the page you're currently working on
413.84 -> will perform with cls
415.84 -> using tools like lighthouse available in
417.44 -> the links below as well as directly in
419.039 -> your chrome dev tools you can quickly
420.639 -> get the same field data we have in
422.08 -> search console for any page as well as
424.16 -> generate lab data
426 -> lab data is a best guessed effort as far
428.24 -> as what field data will likely look like
430.4 -> it's based around average mobile devices
432.479 -> and average mobile internet speeds keep
434.72 -> in mind however that lab data is a guess
437.199 -> it can be helpful to point you in the
438.4 -> right direction but field data is the
440.4 -> only value that page experience and
442.08 -> therefore search is going to actually
443.68 -> look at
445.039 -> if your users have high-end devices or
447.039 -> unusually slow connections you are more
449.039 -> likely to see a larger difference
450.479 -> between lab and field data values live
453.039 -> data can be really helpful but once you
454.639 -> actually publish your page i think it's
456.16 -> a bit more useful to actually collect
457.919 -> cls data via our own analytics
460.479 -> just like the other core web vitals we
462 -> discussed in the previous episodes we
463.84 -> can measure cls with our own javascript
465.84 -> using a performance observer this is a
468.319 -> relatively new browser api that lets us
470.319 -> subscribe to events that happen in the
471.759 -> browser related to performance
473.759 -> we don't have the ability to directly
475.28 -> observe the cumulative layout shift
477.28 -> value but we do have all the right
478.72 -> pieces we need to figure it out for
480.479 -> ourselves
481.52 -> in this case we're going to be
482.56 -> subscribed to the layout shift
484 -> performance event
485.44 -> now every time the browser has a layout
486.879 -> shift event our code gets called we can
489.12 -> use all the information here to figure
490.639 -> out what the cls is going to look like
492.319 -> for this user
493.599 -> once our function is called it gets an
495.36 -> entry list of every layout shift that
497.36 -> has been observed
498.8 -> we can call git entries on this entry
500.56 -> list to get an array of entries so that
502.319 -> we can iterate over each individual one
504.56 -> from there we can check if an entry had
506.4 -> a recent input it's a handy property
508.56 -> provided by the browser on every layout
510.24 -> ship entry if had recent input is true
512.64 -> then we're in that first 500 millisecond
514.64 -> grace window and can just ignore this
516.24 -> entry but if has recent input is false
518.88 -> then we can grab entry.value and add
520.64 -> that to our cls
522.399 -> now you may have noticed that this
523.839 -> counter just keeps getting added to
525.6 -> didn't we talk about session windows
527.36 -> earlier well you eagle-eyed strum and
529.279 -> you're right in fact this is how cls was
531.2 -> originally calculated it's the sum of
532.959 -> the entire session of a page
534.88 -> but based on feedback and continued
536.48 -> research cls was evolved to use the
538.399 -> session window methodology we discussed
540.08 -> earlier you can read more about it in
541.92 -> the links below
543.36 -> so if you wanted to track the cls value
545.04 -> that matches the same logic that exists
546.8 -> today we can update our code to track it
548.72 -> with just a few more variables in the
550.56 -> interest of time there's a link to the
551.92 -> updated version of that code in the
553.519 -> description below if you're interested
555.12 -> in seeing how the specifics of the
556.32 -> tracking session window would work
558.88 -> now that we know how to collect the cls
560.32 -> value we still need to trigger an
561.76 -> analytics event the specifics of how we
564.32 -> will actually go about doing that are
565.6 -> going to be purely on your own
566.88 -> infrastructure but the specifics of when
569.12 -> we do it is a lot easier to cover the
571.2 -> browser has another event called
572.72 -> visibility change this is triggered
574.88 -> whenever a page's visibility changes
577.2 -> like when it's minimized closed or
579.36 -> navigated away from
580.959 -> we can use this event to expand our
582.32 -> earlier code to include reporting we
584.32 -> listen to the visibility change event
586.32 -> and if the visibility state is hidden
588.24 -> then we will call take records on our
589.68 -> performance observer this will give us a
591.68 -> list of any entries that haven't been
593.12 -> processed by our code already we can
594.959 -> then process each entry just like we
596.399 -> would normally and then we call syncls
598.959 -> to the server this is a completely made
600.399 -> up function that you'll need to
601.519 -> implement in order to work on your site
603.6 -> if you have any questions about this
604.88 -> please leave comments in the section
606.079 -> below i'd be more than happy to help
607.44 -> anybody implement this on their site
608.8 -> today the only oddity left with our code
610.72 -> is that in order to make sure that cls
612.48 -> is always being sent when folks leave
614.079 -> the page we're using the visibility
615.92 -> change event see it's great to get the
618.399 -> right information but it does come at
620.24 -> the cost of multiple analytics event
622.24 -> potentially being sent for the same user
624.88 -> if someone has our page open but then
626.399 -> switches tabs and switches back and then
628.64 -> again and again and again well multiple
630.64 -> events will be sent to the server every
632.24 -> single time that switch happens we'll
634.16 -> need to filter these values on the back
635.839 -> end in order to get the largest value
637.36 -> for each user session remember there can
639.6 -> only be one cls value
641.6 -> for more in-depth information about how
643.279 -> this is accomplished you should
644.56 -> definitely be checking out the wonderful
646 -> web vitals.js library it's linked in the
648.24 -> description below
649.76 -> it was written by the chrome team's phil
651.04 -> walton it wraps up the complexities of
652.88 -> tracking and reporting core web vitals
654.8 -> is a great source if you aren't already
656.24 -> familiar with it
658 -> so we know what cls is what it should be
660.88 -> how to measure it how to track it and
662.64 -> well if you're already at or below 0.1
664.959 -> as a goal then you're good to go send me
667.36 -> a message i can personally congratulate
668.88 -> you but if you still want to hang around
670.64 -> for a bit i promise you that we get into
672 -> the good stuff how to improve the
673.519 -> cumulative layout shift scores well
676.079 -> let's get to it specifically all layout
678.24 -> shifts can be traced back to really a
680 -> handful of causes
681.68 -> these include
683.12 -> images that don't have inline dimensions
685.279 -> iframes or embeds that don't have inline
687.04 -> dimensions dynamically injected content
689.12 -> that doesn't reserve space with explicit
690.8 -> dimensions are you seeing a pattern here
693.68 -> and finally web fonts or icon fonts that
696.16 -> cause a flash of unstyled or invisible
698.32 -> text
699.279 -> let's start with probably the most
700.48 -> common issue that i've seen images
703.6 -> if you recall the example we looked at
704.959 -> earlier an image that didn't include a
706.88 -> width or height attribute either inline
708.88 -> or with its own css will actually just
710.959 -> be a placeholder node something that's
712.8 -> completely different than the size it
714.24 -> will eventually be when it loads and
716.639 -> just like in this example this causes
718.399 -> the content to jump during a layout
720.399 -> shift
721.2 -> luckily this is a really straightforward
722.72 -> fix
723.76 -> the best most modern way to address this
725.68 -> is to explicitly include the height and
727.36 -> width attributes on our image
729.44 -> these attributes have existed for
730.72 -> decades and used to be common practice
732.8 -> but with responsive design and high
734.32 -> definition screens setting these values
736.399 -> was often less useful than using css or
738.88 -> just letting the browser kind of figure
740.32 -> it out by itself
742.079 -> nowadays all modern browsers are
743.839 -> automatically sizing based off of the
745.279 -> aspect ratio as in how wide an image is
747.68 -> divided by how tall it is based on the
749.92 -> width and height values
751.839 -> that means that we can still style the
753.12 -> image using responsive values like width
755.04 -> 100 in our css but browsers will now
757.76 -> also automatically reserve the correct
759.36 -> height based on the aspect ratio of the
761.2 -> width and height we provide
763.279 -> it's the best of both worlds but perhaps
765.04 -> even best of all is that this will
766.56 -> prevent these images from triggering cls
768.48 -> you see no layouts being shifted even if
770.32 -> the image loads on a slower connection
772.72 -> next up is iframes and in beds this can
775.04 -> mean a lot of different things uh ad
776.56 -> slots widgets for a video player you
779.12 -> know just about anything that we load
780.72 -> from another domain or another service
782.959 -> is likely to be loaded inside of an
784.56 -> iframe or an in bed
786.639 -> we can't control what happens inside the
788.24 -> iframe but we can't control what happens
790.16 -> around it
791.76 -> just like our images we need to reserve
793.12 -> a space that's going to be taken up by
794.32 -> the iframe
795.519 -> by setting explicit heights and widths
797.36 -> for the iphone's parent element the
798.72 -> browser is reserving space for it
800.32 -> thereby preventing any kind of layout
801.92 -> shift
803.04 -> occasionally the ad network that we may
805.279 -> be getting our ads from is not quite
807.6 -> serving us the right size for its slot
809.36 -> it might be a couple pixels too big
811.68 -> i like to explicitly set overflow hidden
813.76 -> on those iframe parent containers to
815.68 -> ensure that they're not going to be
816.8 -> overflowing into anything i'm not
818.24 -> expecting
819.36 -> this isn't always practical though
820.959 -> sometimes you need to ensure that every
822.24 -> single pixel of an ad is visible
824.56 -> if that's the case we're going to want
825.68 -> to oversize that parent container ad
827.44 -> slot and then make sure that we modify
829.44 -> our design to account for this and make
831.12 -> sure it still looks okay even if it's a
832.639 -> bit bigger
834 -> on the other side you're going to want
835.199 -> to avoid collapsing ad slots when no add
837.04 -> is returned see removing all that space
839.519 -> is going to cause just as much of a
840.72 -> layout shift as well
842.48 -> they're likely noticing that this is all
843.839 -> about isolating iframes and embeds so
845.92 -> that they don't take up space that isn't
848.24 -> accounted for in our design
850.24 -> so whether we're going to be clipping
851.519 -> unexpected content or just
853.04 -> overestimating the size to be sure that
854.8 -> all of it shows is almost always a way
856.72 -> to avoid layout shifts with dynamically
858.48 -> loaded content
860.399 -> not all dynamically loaded content is in
862 -> iframes though if your site has an
863.68 -> infinite scrolling list of articles or
865.04 -> product pages or if you're just doing
866.8 -> any kind of lazy loaded content you will
868.8 -> want to make sure that you reserve the
870.56 -> space that it's going to take up with an
872.079 -> explicit height and width
874.24 -> just like with iframes the server is
875.6 -> going to hopefully be returning
876.8 -> something that will be these dimensions
878.72 -> but ideally our pages are designed in a
880.959 -> way to be flexible enough to allow for
882.88 -> content that's bigger smaller than
884.72 -> expected
886.16 -> as you may have noticed having a
887.36 -> flexible but unchanging width and height
889.199 -> on our page's remote resources is key to
891.279 -> a rock bottom cls score but there's one
894 -> more still common issue that we should
895.92 -> look at
897.04 -> up until now all of our examples can
898.639 -> more or less be summed up as make sure
900.399 -> all the rectangles have explicit sizes
902.32 -> that don't change
903.76 -> but what do we do if it's the content
905.519 -> inside those rectangles that change
907.68 -> this is why web bonds pose a unique
909.6 -> challenge to cls we can't explicitly set
912.16 -> a width or height on text and so with a
914.48 -> web font or icon font that's causing a
916.72 -> layout shift we'll need to approach it
918.32 -> from a different angle
920.24 -> the simplest solution is
922.24 -> don't use the font
923.839 -> in the case of icon fonts it's actually
925.76 -> just much better to use svgs directly
927.76 -> today not only do you get a greatly
929.519 -> enhanced design capability there's going
931.44 -> to be much fewer issues that are prone
933.36 -> to icon fonts in modern browsers and
935.6 -> it's substantially better for
936.639 -> accessibility too but if a web font is
938.88 -> causing the shift and we definitely want
940.56 -> to use it then we need to optimize how
942.48 -> the font is being loaded
944.32 -> i'll include some articles about
945.68 -> optimizing web font loading and general
948.079 -> font best practices in the links below
949.92 -> if you really want to go deep on the
951.12 -> topic
952 -> but a great place to get started is to
953.6 -> ensure that any fonts that we are
955.12 -> definitely using are going to be
956.72 -> pre-loaded
958.16 -> normally web fonts are going to be lazy
959.6 -> loaded meaning that the browser
961.199 -> downloads the html any javascript and
963.44 -> the css before it starts to download and
965.759 -> process any font face declaration we
967.519 -> declare inside of that css
970.16 -> link rel preload is a sort of hint we
972.32 -> can give to the browser so it can start
973.759 -> downloading the font before it discovers
975.6 -> it the normal way that means that it'll
977.519 -> be ready much faster when it is
978.959 -> discovered
980.399 -> we want to make sure that we put these
981.519 -> essential fonts as close to the top of
983.6 -> the page's head as possible to give the
985.199 -> browser as much time as possible if the
987.44 -> web font is more of a nice to have
989.44 -> another choice would be to use font
990.8 -> display optional
992.24 -> font display is a property we can set it
993.68 -> on font face declaration it supports a
995.6 -> few different values and the one that
997.04 -> we're using here is telling the browser
998.56 -> that the font is well optional
1001.519 -> when we use font display optional if the
1003.36 -> web font takes longer than three seconds
1005.36 -> to load the browser will just give up
1007.04 -> trying to load it and whatever is
1008.72 -> already being rendered is what's going
1010.24 -> to be shown so no more changes no more
1012.72 -> content shift
1014.079 -> while we're already looking at a font
1015.199 -> based code we want to make sure that we
1016.8 -> aren't already using font display swap
1018.959 -> that more or less does the opposite of
1021.04 -> optional
1022.079 -> font display swap tells the browser to
1023.759 -> show whatever fallback font exists right
1025.679 -> away and then swap it out for the font
1027.919 -> that we're requesting as soon as it
1029.839 -> finishes downloading no matter how long
1031.439 -> it takes to download
1032.88 -> if you use a web font that's slow to
1034.64 -> load on a substantial part of your page
1036.4 -> well you can imagine how large your cls
1038.16 -> score could end up being if you use font
1039.839 -> display swap this if you want to have
1041.28 -> the best of both worlds i think the last
1042.72 -> bit of advice i could suggest is to
1044.319 -> check out the amazing font style matcher
1046.88 -> included in the links below this site
1048.96 -> lets you take two different fonts and
1050.32 -> adjust various css properties on each
1052.08 -> one so that they more or less visually
1053.679 -> align
1054.88 -> once you have a website font that is
1056.32 -> close enough as a fallback you can copy
1058.24 -> the css directly and enjoy that
1059.76 -> shiftless free page experience
1062.4 -> and that's page experience folks we've
1064.4 -> covered the what the wind and done deep
1066.32 -> dives on each part of it if you didn't
1068.08 -> see those videos i'll make sure to
1069.52 -> include them in a full playlist of this
1071.12 -> series in the description below
1073.2 -> i know that there's been a lot to this
1074.64 -> and i can't tell you how much i
1076 -> appreciate you coming along for the ride
1078.08 -> i hope that you've been able to pick up
1079.6 -> a few things you can use to push your
1081.44 -> sights that much further if you have any
1083.52 -> questions please leave them in the
1084.559 -> comments below or reach out to us
1086.16 -> directly on twitter i look forward to
1087.919 -> hearing about everything that you all
1089.36 -> build so once again thanks and see you
1091.28 -> soon
1092.32 -> [Music]
1103.6 -> you

Source: https://www.youtube.com/watch?v=Z6WiGWDU0nU