 Hi guys, sorry for that. We had a small delay here but are ready to get going. We know there were a couple of people already waiting so we hope that everybody can hear us, can see us and we will obviously share the slides. So we're back after a couple of weeks now going into the next topic on mobile speed optimization and today we actually want to talk about preloading, prefetching and in general setting priorities for the mobile web because what we've been doing in the past is look a lot at the actual assets, how we can get them smaller, how can we optimize images, how can we defer loading of the JavaScript or even sneak out the last optimizations for CSS and now we want to take a different angle and have a look if we look at the pre-family of what we can get out there in terms of optimization techniques. It seems like sound is working well, thanks a lot for the confirmation from you guys from the other side. And like always we have Dominik here today with me who is going to lead us through the topic and yeah we're going to walk step by step through that. Feel free to shoot in questions as well. Also feel free to shoot in other questions if you have mobile speed related questions that are not 100% related at least we got them in the chat then and then we can make sure to address them either afterwards or in another hackathon on air session. So these whole like meetups are really just about to get the whole community sort of sharing best practices and ideas around performance optimization so that we can all decrease our speed indexes. I'm sure there are some of our peers in the chat as well and probably you know others that are listening so just definitely shoot any questions you have and either we pick them up during the live hangout or someone else who's in the chat will pick it up or we might even run an entire session about it. Yeah so depends a little bit on the depth and breadth of the of the questions and if we can't pick them up right now we definitely make sure to address them at a future point in time. Cool so yeah due to the small delay we're just gonna jump straight away into I think the topic for today and as I said before we want to talk about the pre-family and really see or have a second look on how using those different hints for the browser in order to get the right resources loaded at the right time right to really make sure that we sort of have a second thought about how the mobile sites in particular which type of job they actually take on for the mobile user and which resources in those particular jobs play I'd say the biggest role and that we make sure that those resources are actually loading with the priority in comparison to other resources that might be less of importance in that particular scenario. So yeah you already should I mean have seen our faces maybe a couple of times by now so it's again Dominic and me Lucas and maybe I mentioned that already before but from time to time we might get in some guests who will be joining into different topics today it's us looking into the pre-family. So just a small sort of like introduction because some people have been with us in a couple of sessions before some people for some people it's the first session so we just want to make sure that you sort of get the background idea on why we're focusing so much on mobile speed and speed index in particular and I'm going to go into the details but I'll about this a little bit a couple of minutes and then we really go into more technical depth. So the idea that we sort of look into here in our team is that what we see is that there's too many indicators basically from all the sites from the user sites as well as from the clients that we're working with that speed plays a very significant role and the number one thing that really turns up into all the different research studies that we've been running in Google also that third-party providers like SuaStyle others have been running really show us that number one waiting for a slow page to load is one of the main annoyances users have and one of the main decision drivers for Abaddon aside and choose another provider you can see that but this particular study I mean there's many studies out there that support a very similar type of picture really underlining the idea if you're able to render content fast to the user you're probably you are on a better path to keep those users not lose them because they might decide to go somewhere else if your site is not loading right or if your content is not rendering and again one other study I think this is a Google particular study around the Google in particular and this shows us that 53% of consumers will have it on the side if it takes longer than three seconds to load yeah I think just jumping in here the study is actually it's anonymized Google analytics data across all verticals and on a global scale so 53% is what we see on average it doesn't mean that like in your particular case it will be 53% but let it be even 20% 25% you really don't want to lose like every fourth visitor in the first three seconds so it's sort of like a benchmark it just means like the first three seconds are crucial and that's why we're running the series to see like how can we actually optimize the critical rendering path and I mean this is with all of those studies right they are usually there with many of the ones that we're working with they're not necessarily vertical specific it gives more an idea or transfers more concept that right now in the situations if we give the user a blank screen for quite a while they might just be leaving and we just paid for them to come so that's what we want to avoid and that's why we look at those earlier rendering or techniques in order to get to all render quicker from all the different angles and today it's looking from the pre-family angle okay and yeah I mean without spending too much time on generic data because obviously we sort of have the idea already in mind most of us at least but just like very quickly highlighting here this study from SOASTA which looks into full load time on the x-axis so we can see that we jump in 300 millisecond steps and the colors are not super clear on here but you see the top line the pinkish one that has the the second spike with the conversion rate at 1.9 is around at 2.4 seconds at its sort of optimal state and from there on just keeps on declining with the more or the longer it takes we to load the site I often get asked if this is full time full load time or any other particular metric so we're talking about full load time here but nevertheless if we think about the time that it takes to render and that should definitely be shorter than ideally right or be at least in that in that area so if we are able to render a full first screen with the key hero image the key messages and the key call to actions ideally to the user at least after in shorter time than five seconds we definitely are starting to make use of what performance can actually give us in terms of conversion rate optimization or even a decrease in bounce rate and that's why we take this particular focus on loading those assets quickly and the metric just to round up the the background story before we get into a more specific specifications about the pre-family is the metric that we look in in particular is called speed index we have been mentioning that a couple of times just for the ones who are for a news so please bear with me if you have heard me talking about speed index already a couple of times but speed index is basically a metric that gives us the time that it takes in milliseconds so we have here as an example two thousand three hundred and nine milliseconds for the amazon side the time that it takes to get to the first full render of the above the full content or the first screen and the idea here is really just to say okay how long does it take until we can tell something meaningful to the user and if this time takes longer and longer we see sometimes sites with like speed indexes i don't know so my twelve thousand fourteen thousand eighteen thousand and even higher than that which means basically after about twelve seconds fourteen seconds or eighteen seconds the user just starts getting to see meaningful content and that's pretty late especially given the sensitivity that we have seen just in the studies before where ideally we push out our content below five seconds yeah and with this back in the back of our minds we want to sort of now start to look into the pre-family and sort of yeah the whole different techniques that that can be applied there for the very different situations and you might you might ask yourself the pre-what family so basically there is a lot of different things right we can do on this whole path along the DNS lookup the TLS negotiation HB request and then in the end actually getting the content to be downloaded so there are small tips and techniques that you could apply in the different stages of this process in order to prioritize the right content and we basically want to move through them step by step give you an overview of in which scenarios this might be helpful or in which sort of setup that might be the choice for you to go and also talk a little bit about the sort of cross browser compatibility of the different techniques and with that sort of probably helping you a little bit to make the decision or at least giving you a sort of a guideline to how you could make that decision in order to get the right resources prioritized and also with that sort of you know all sort of reflecting back into how can we render quicker how can we make sure we don't block which we render past too long with then having a quick render anything to add from your side at this point um no I mean you pretty much summed it up we just run through it step by step and just look at the you know the different options that we have and actually when they use it and so yeah I know from my side we should just get started great cool so just what would be maybe some like nice to knows probably most of you are aware already but basically you can find the Chrome basically already by default will resolve the top 10 destinations based on your sort of user behavior or browsing behavior so just on on browser startup just giving you that as the background information that you like from a chrome side for example there's also a lot of thinking around what what resources to prepare but before the user actually gets starting and this is one sort of indicator for this and why not taking this type of thinking and applying this to the websites that we want to get loaded fast for the user and you can actually I didn't mention you can actually just check that very quickly for yourself which are the ones that already pre-result for you with chrome and then DNS as you see there in the blue box on the right side um another way uh on how um how sort of this thinking is applied even within chrome is to think about okay what uh sites should be for example be fully pre-rendered in the background and um so what you can see here is on the right side sort of like a confidence calculation on based on what the user is typing in this scenario he's starting to type AMA uh and uh we're with a relatively high confidence we can see then okay amazon is going to be the one resource uh or the one site that's going to be requested and the browser from there on takes its next steps um and sort of by through this confidence rating is able to predict in a way what the user is going to be using and therefore already pre-renders content at this point in time yeah I guess just to add here is that um it doesn't pre-render it all the time so um there's like the browser might pre-render it so like it's you know there's a lot of calculations going on a lot of testing going on but basically the idea behind it is that you know the browser wants to be kind of like a step ahead of you and think like okay what what is the user doing now and then in certain situations where it makes the most sense the browser might pre-render the page so that you have an even quicker experience but again that doesn't happen all the time and I think that's just important to add yeah so let's just move forward um basically the whole idea is like so we we kind of like showed you that the browser's already doing um you know a lot of things like pre-resolving DNS um you know possibly pre-rendering pages or or like sites and the the idea is now like that basically the browser knows a lot already but in the end you know your website and your users best you know you might do like A and B testing you actually have the data you look into the data you analyze the data so basically you can figure um the best what the user is doing next a lot of people don't do that but I think it's really important to do that because when you know what the user is doing next you can actually be smart and load the resources that the user will request like in the following steps so basically the idea is like with the whole pre-family to basically help the browser anticipate the next step like help the browser be smarter and help the browser do the right things rather than you know load resources that maybe you don't know so like the so to bring it into the real world it's sort of like you know you you don't want to put a lot of food on the table just because you know the people at the table might eat it you know that's the waste like you actually just want to put on the table what what people going to eat you don't want to like you know throw food throw food in the trash and and that's the whole idea on the web as well you don't want to load a lot of resources that the user might actually not need you actually want to focus on okay you know that's the resource the user needs that's the resource the user will need the next step and then you preload the resources you already put it in cache to create the best browsing experience possible and that's how we basically get into like the whole pre-family so like the first step would be DNS prefetch what does it do so DNS prefetch basically translates the domain name into an IP address and there are many cases where that's useful because you know that resources requested from this from this hostname so you might just say like okay I'll just you know prefetch it right now so that when the user actually is requesting the resource I don't have to do that anymore and I save a little bit of time usually you would use that for critical resources that you need later in the page there might be the situation where a resource is behind a redirect so like you request a resource but then there's a 301 redirect and you actually need to resolve this domain name as well so that's where it could be useful as well another another option would be basically for outgoing links so if we just hop on the next slide we basically see an example of that so at google for example you you know you type in a search query DNS prefetch for example we list you the results and what we do is basically we prefetch pre-resolve the domain names in the search results so that if you actually click on one of the one of the links to go to the next page or the next side you have a faster experience so you know they're like quite useful situations where you can use that the good thing about it is you only focus on the the DNS resolution which means that it's you know it's not very heavy for the bandwidth so you can actually do that for for a lot of host names however you know always think about you know always like kind of like calculate the the real world impact like that you know that it has on your on your load times and ideally make sure that you download as you know too many resources from from different domain names because you know it's a good thing to use but you know ideally you you just want to you know resolve one or two host names so you don't actually get into the situation where you have to do like DNS prefetch everywhere but that's basically the starting point where you can kind of like you know predict what resource the user is going to use next and if you actually need to optimize a little bit in terms of DNS prefetching and as I said before we're going to basically for all the different techniques we're going to show you just here I mean basically if you go to can i use you can basically check that also yourself to see for the different hints that you can give to the browser in regards to its compatibility across the different browsers and obviously given that we're talking about the mobile web having a particular look there on the right side ira safari and our browser and chrome for android to make sure that we can actually make use of this on the mobile on the mobile device and it looks pretty good for dns prefetch at the very moment anything you want to add at the very moment tom no i think that's that's basically it we got one question here in in the chat how many dns prefetchers should be maxed on the side you know it's always a always a difficult one best answer is as little as possible you know obviously you you know you don't want to you know you don't want to basically use the bandwidth for resolving too many domain names so you know ideally optimize your resources that you you know that you host them ideally on your own server or maybe just like have one you know one cdn just make sure that you know that you optimize you know where you get the resources from and don't actually get into the situation where you have to like prefetch like a whole bunch of domain names yeah and then we basically come to the you know it's sort of like the next step so like when you when you think dns prefetch is cool then like preconnect this you know is really cool because what preconnect does it's it doesn't only you know pre-resolves the dns but it also you know basically does the whole you know the whole connection so like it basically does the socket connect and also like the tls negotiation you know if that's the case on your side and one good example here would be when you load a you know a web font for example from the google server you see then basically the first so we got like two waterfalls the top one and the bottom one and what you see in the top one is that we load the css for the font because we you know whenever you load a web font you first need to css and then the css tells you know the browser okay and now i need that particular font font file to then basically render the text in that font so what you see here is like up until one point like roughly 1.8 seconds you you know you you download the css and then you start connecting to the fonts.gstatic.com domain which is where you get the font file from as you can see the first one at roughly 1.8 seconds that's when you start connecting to the gstatic.com domain and in the second waterfall we actually use preconnect and what you see is that here we already connect to the socket while we are connecting to googleapis.com and basically get the css so we're basically saving a whole bunch of time here just by smartly you know pre connecting to the server that we will use next and the reason why it works really well with web fonts is because you know if you load the css a web font you're pretty sure that you will need that font file so like that's kind of like what we were talking about earlier kind of like think smartly about the next steps in this case this step makes a you know a whole lot of sense so yeah that's basically a really great example of how preconnect could work and save you time in this case I think we're saving about like 0.2 seconds when you remember like the stats that we showed that looked at earlier you know every every millisecond count so like this is a really good way to to optimize the rendering of your web font and what would you say next to web fonts is there other file formats that this works really well with I mean it does work well to file formats again it's you know it is a little bit more resource heavy than than just a dns resolution so you know you don't want to preconnect to a whole bunch of sockets that maybe in the end you don't need so kind of like you want to say preconnect often but definitely do it wisely you know you got to be sure that if you preconnect to a socket you actually you actually will need a resource from that from that server otherwise you know it's a waste for your bandwidth you're taking you know taking taking up space for maybe what you could use for other resources to be rendered so again use it often but use it wisely in the source there's a link to a blog post from from our colleague Ilya basically giving that example again and like summing it up and you know talking about a couple other things so like definitely go to go to the blog post read a bit more about it it's definitely worth it however one thing to mention is that when we go on the next slide you got to make sure that you use that you use the cross origin attribute here because otherwise what happens like you see the the left waterfall and the right waterfall which basically in the left waterfall we didn't use it we didn't use cross origin and what happens is you only do the dns lookup so you're not actually doing like that you know you're not doing the full thing and then like if you use a cross origin you actually do the tcp and tls negotiation as well reason for that is quote below font font face specification requires that fonts are loaded in anonymous mode which is why we have to to add cross origin so you know just make sure that you use it that way and so you don't run into any issues where like you use preconnect in the end you actually don't get the benefit as hoped yeah and just maybe just to always keep in the back of your mind is to always reflect back why are we doing this obviously the goal will always be to make sure that we get the content out quickly to the user right so that if we can make it happen that our fonts get displayed faster because we don't have to wait for example for a photo lookup while we're doing it already while other resources are loading we will be a little bit quicker to actually get our fonts out and running because we have seen number numerous times that for example the site starts to render but we're still waiting for for content to appear and all of this plays into it right so now we're really approaching it from this particular angle great so in terms of compatibility it's a slightly bit lower than we had with the DNS prefetch but still very widely applicable and you see android browser chrome for android works fine there so yeah if you want to go that route there it's definitely some some solid compatibility happening yeah and I think that just the one thing to always mention that you can safely use for example preconnect and even if the browser does not support it you're not breaking anything it will just be treated as if the you know if pre-connect if the attribute wasn't there so you know don't worry about using it even if maybe you know a few browsers don't support it definitely safe to do it so I think that's just always good to mention here yeah I mean actually yeah there was one more thing we wanted to talk about in terms of pre-connecting so I think it's quite important to say that basically the pre-connect directive is an optimization hint which basically means that we hint to the browser you know that the browser should pre-connect to the server however the browser might not act on that like each and every time because basically you know the browser is also like you know browser is quite smart and you know doing a lot of like calculations in the background you know it's always a trade-off obviously if you pre-connect it's you know it might not always be the best for for speed so like the browser is doing a lot of work trying to figure out when it's best to actually pre-connect so there might be the situation that you use pre-connect but in the end you only do the dns lookup or you might only do the dns and tcp for tls connections sorry there's a typo it should not read dms but dns so that's just important to mention for for debugging so like if you use if you use pre-connect and it you know it doesn't work it doesn't mean that you've done anything wrong so don't spend like you know an hour trying to fix it it's just like then probably in this case the browser you know identified that in this particular case it's maybe not you know the best moment to do to do the full the full connection so that just is a hint so you don't waste your time on fixing something that's not broken yeah and then like basically we get to the next pretty cool feature which is preload that's very useful for high priority resources and basically what it does is you use it in the head to initiate the immediate fetch for for the current page and especially use it for high priority resources and all you do is basically as an example you add preload and the browsers that support it will basically asynchronously fetch a resource so like it's not render blocking anymore and then make it available when you actually need it so if we hop in the next slide I just did a little example there which there's more information on that when you follow the link in the footer so basically you add preload and what it does is like it fetches the CSS then you see you can add the or you should add the onload attribute which basically makes sure that the fetch CSS is also applied the great thing here is that basically you're loading the style sheet and as you know CSS and JavaScript as it has the potential or the power to change the document object model it is typically render blocking so nothing happens on the screen until the resources are fetched and parsed and we try you know we want to avoid that especially when we have CSS that we might need later and are like on the page but not for the critical rendering path as in like for the first pane so here you fetch the CSS you apply the CSS you know onload and the good thing is that it requires JavaScript and we have we can just use a fallback which means like that if for whatever reason you know JavaScript is disabled you just add the no script tag and you just load the style sheet as you would normally so that's kind of like the fallback that you don't break anything however right now preload is in terms of like cross browser compatibility it's not that great you know it's relatively new so that's why we're linking to this small JavaScript function load CSS which is basically polyfill and you would use it as shown in the in the last screenshot so basically use preload and what the load CSS function does is like it checks if the browser supports it if the browser supports it the load CSS function does nothing so you know the browser just uses preload and and that's what I just explained however if for whatever reason the browser does not support preload then the load CSS polyfill jumps in and performs the same action so that's a pretty cool thing to do again like it works really well with CSS that you might use on the page like somewhere you know below below the fold but not in the in the critical view so that you kind of like split it up a little bit and avoid having like one global CSS fellow one big CSS file it takes two seconds to load on a 3g connection and you're basically just blocking the rendering path for in yet for nothing because you know all the stuff that you load you you actually don't use until like much much further down the line so um yeah that's that's a really good way to do it I think on the next slide we actually show you the cross browser compatibility which yeah Lucas it's not looking that great yeah you see that here on android browser chrome for android uh we are able to support this um but I mean there's a lot of red boxes out there but I mean don't just explain how you can obviously uh deal with that but I mean some support there I hope it's going to increase over time yes so that other browsers can keep me sort of catch up there great um just prefetch yeah yeah I mean basically that's you know another option like another part of the pre-family so what is prefetch it's it's basically um useful for low priority resources so you know what we what we discussed with preload is that we actually load CSS asynchronously and then um you know apply it basically on load so like you know we avoid the render block but we still need that css you know for for for that current page to make sure that it's displayed correctly prefetch doesn't you know does it a little bit different so like prefetch basically what it does is it lets you um fetch css which is like a deferred fetch and put it in the browser cache for later navigation so one good example would be that you know we work with a lot of clients and you know one best practice is to actually extract the critical css and only load that css on the landing page and make sure that everything renders as quick as possible then we you know often get the question well yeah but what happens then if the user navigates further in the funnel you know because basically I just deferred the slow load time uh further down the line and that's where prefetch comes in because basically what it lets you do is you have the critical css you do like a really quick rendering and then that you can basically like deferred a fetch of the additional css that you might use on subsequent pages and just put it in the browser cache so that if the user continues in the funnel you know you don't have this delay on the second or third page but you actually have the css already in cache so again it's um you know it fetches the assets and places places places is them in the cache it's useful useful for non-critical resources for later navigation and what's important is lowest possible priority so like again if if you're talking about you know a file that's sort of critical then you know prefetch is not what you want to use because it's the lowest possible possible priority however if for example you're on the shopping cart page and you say like okay I'm pretty sure the user will now navigate to the checkout you might want to say okay I'll prefetch already a few resources put them in cache so that that actually create like a really good and fast experience yeah and now we basically move from this idea of just optimizing speed index sort of sort of as a first destination where the user comes to from optimizing this to actually then start taking care of the whole funnel that the user is going through so sort of like playing with all of these variables in the end and will end up in at least the most optimized solution that you could achieve and then prefetch helps you to think about that second step like what's happening with the next step where the user is going yeah let's just have a look at the cross-browser compatibility that's pretty good to me so so as I said many browsers supported on mobile looks pretty good on android android chrome for chrome for android as well I was not so good at the very moment let's see but yeah I think actually from all of the the things that we do is the most supported option as far as I I remember so you can use that with confidence I would say yeah cool yeah let's basically get to the the last family member of the pre-family which is pre-render like if you actually you know if you think about amp it's sort of like the idea like you know like pages are pre-rendered are cached and when I access an amp page it's you know it's you know in a split second it's there I think the average low time of an amp page is 0.9 seconds so the idea is the same basically we pre-render an entire page with all its resources because we believe that the user will go on that page next so it is pre-rendering is cool but it can also be very dangerous because it is very very resource heavy again you're rendering an entire page with all its assets and therefore it causes high bandwidth costs and especially on a mobile device you know on a mobile device if you think about that we you know we often connect via a 3G connection you know we have a limited bandwidth average maybe 1.6 megabyte per second so you really don't want to pre-render an entire page with all its assets if you're not a hundred percent sure well maybe you know not maybe a hundred percent that would be nice but if you're not very very certain that the user will move to that next to that page next so again use it with care like it it's very hard to think about like a sort of like a use case where it would always work you know it probably doesn't exist so you really need to analyze your data analyze your users you know the kind of like the the user flow to get an idea what do users typically do and is there maybe a situation where the pre-rendering of an entire page can make sense what's important here is to mention is that obviously what you want to what you want to avoid is that you sort of mess up your analytics by pre-rendering a page because you know it might happen that you know a user is on the you know let's say on a previous page pre-renders the next page never visits visits visits the next page but then your analytics beacons kind of like track it as a visit and you think you know you kind of like get wrong stat so you want to avoid that good thing is you can do that with the page visibility api so it basically lets you do you know it basically lets you defer javascript actions until the page is actually visible again useful for analytics beacons tracking pixels custom js code good thing to note is that google analytics does this automatically so you actually don't need to worry about that anymore if you want to use pre-rendering again i think out of the whole pre-family pre-rendering is probably the one that you you know want to be most careful with because it is very resource heavy and it might not actually have a good impact in terms of like speed and optimization so you know always be wary but when you use it but i think it's definitely worth it to just you know do a bit of like testing and see like how it can fit into your overall strategy i think it's also one of the least supported options that we have out there so you can see that he here pretty well so even android browser not fully supports it yet so a couple of them do so sort of more like as a side note i would say to note the idea of pre-rendering yeah and i think that was the the quick summary of the pre-family i think we pretty much touched the most important points here again like they all have their you know their usability in certain situations whether it's dns pre-fetching pre-connecting pre-rendering pre-fetching so do a bit more reading again like we have i think two or three source sources on the slides with like great information about you know the pre-family so do a bit more reading and just see like how it can actually fit into your strategy i think to summarize what what we really want to achieve is that that that you as a website owner think a little bit more like your user like you know try and understand your user try and anticipate the next steps you know like if if you go somewhere like you know if you go you know through a forest and you actually have you know you kind of like have a map and you know exactly where you're going you will always reach your goal quicker than when you're trying to figure it out along the way and that's sort of like the idea behind it like you know try to be you know kind of like informed about what the user typically requests what the user what's page the user typically visits next and then be smart and pre-loading resources put resources in cash that you not only optimize the page speed index which you will but you also optimize the whole funnel and therefore like the whole experience and yeah i guess like in the web and especially the mobile web where the competition is just one click away it just really important to do that and you know that might give you the edge over your competition and increase your conversion rate and therefore like you know give you a high return on investment so we will go through some of the questions in the chat later on and then we will you know decide whether we run you know another maybe another session on them i think there was one question earlier on talking about what framework we prefer bootstrap or foundation and which is cool to see is that like another person that chat actually said in my opinion no one should use a bootstrap nowadays anymore especially when we have css grid so basically the idea here is you know frameworks are great because it's an easy way of you know achieving cross browser compatibility and you know developing websites but always keep in mind that you're loading a lot of css in some cases a lot of javascript that you might not use for for your particular website because the framework is there to accommodate a vast you know like kind of like a vast collection of websites you know it wants to it's you know it wants to be useful for for a lead generation side it wants to be useful for an e-commerce shop so you know obviously there's a lot of css and javascript involved that you might not use not use on your website and so from a performance perspective always be very very careful when using a framework cool yeah and if you wanted the resources we would just put them also below in the comments so if you watch this video afterwards just scroll down and have a look or check back in a couple of minutes after the session we will put all the links up so that you have access to them with no further hustle and yeah so we keep on running those sessions regularly we will probably start putting also the topics out there so for you guys to review and sort of pre pre the session so that you can sort of get an overview of what will be the upcoming sessions but we will keep you posted on that and always feel free to throw in questions into the comments or the chat and so that we can sort of guide the learning together and figure out what are the key issues to look at yeah so that was it for today just one sort of pointer in regards to the pre-family hope you can make use of it seems in many ways to be implemented relatively quickly actually in comparison to some other things that we've been looking at so thanks a lot for taking the time been a bit quicker than we were thinking but okay and we just see you next time I think thanks for listening and again put all your questions in the comments we will add the the resource links there and you know the whole idea in the future is to kind of like build a future repository of videos on you know particular optimization techniques and we're always eager to learn from you so I think what's really important to to mention as well is if you actually decide to use DNS prefetching to use prefetching to use pre connecting and you experience either you know like a good impact or a negative impact on your performance let us know you know we we're you know really happy to learn and you know to to see what works what doesn't work why doesn't it work so the more information you share with us you know the better we can respond to it so definitely feel free to reach out to us with any feedback you have and yeah thanks for listening and see you next month yeah have a great week guys take care bye bye