Hey there friends, how's it going? I got something special for you today, but before we get started, I just want to let you know I created a second channel, link in the description, I'll be uploading similar style videos there, also gameplay, if you want to check it out, please do subscribe, I hope to see you over there, I'll be starting to upload on there soon. Anyway, enjoy the video. Hey there friends, how's it going? My name is Kevin, and today we're doing something a little bit different. When I say a little bit different, I just mean not among us, essentially. But I have something to share with you, I've been meaning to share this with you for so long, but I am an author, that's right. You may be familiar with the site Creepypasta. Well, I have one of the top rated stories of all time on their sister site, Crappypasta.  How Creepypasta used to work at least, you could submit a story and if it was good, it would go up on Creepypasta, and if it was bad, they'd send it to Crappypasta, where people could critique your writings and whatnot, and you could try and improve and get on the main site. And well, I submitted a story using my best efforts at storytelling, and it didn't go over so well. But I think I hit that niche, where it's just so bad that it's good, which is exactly what I'm aiming for. As someone who has studied Tommy Wiseau religiously, it meant a lot to me. Unfortunately, Crappypasta no longer exists. They sold the domain, and for some reason, somebody bought it and then deleted all the stories off it, because they were saying it was ambiguous who had the ownership and all this, and then they just left it at that. They had a nice one. Thanks for that. My proudest achievement just deleted. I've also gone the extra mile and got this animated, so we can watch it all together as an animation. It's animated by the same person who did the Jim Pickens childhood animation, very, very talented animator. I'm worried I'll pronounce her name wrong, so I'm just going to spell it out. It's LR130. The link to their channel's in the description if you want to check that out. Sound like a bit of a boomer. Hello, I'd like an X360 box, please. Well, let's roll the film and watch it together uninterrupted. Oh, and one final note. Sorry, I'm rambling, but one final note. The way the subtitles are done are how it was written in the story, just for a bit of context. Okay, enjoy. The supermarket monster once in a place far away, a very long time ago. There was an boy named Roger. He was tall, but a bit round. He lived in a big city where unusual things seem to happen every day. For example, his uncle died. Anyway, Roger had lots of enemies in the city. All the people he used to like were now his enemies because he's changed. He used to be a really successful banker named Ron, but he decided to go another way. And now he is a hobo named Roger. Because of this, his friends thought they didn't like him anymore. So they said, you're our enemy now. And Roger was like, Oh no, I have no friends, but loads of enemies. Roger lives day to tomorrow by the change he gets off strangers outside McDonald's. But sometimes he when he gets enough money, he goes to the local shopping center called Teco. He can only buy things when they are on sale. So he only buys things when they are on sale because he doesn't have any much money. Sometimes he even gets enough change to buy chicken when it's on sale. And he goes into KFC and says, can you cook this for me? And they do it because they are his enemies and spit in the food. Yuck! Today, on the most windy and stormy and rainy and cloudy and sad of days, he decided he needed to eat and went to When he went inside, there was no baskets. This was weird. Roger taught that that must be guiding them a break today. So he kept going. He saw that the bread was on sale. So he was going to buy it.  And he took the sale sign away, which made the bread go back up to $100,000. This is all in the future. So that's normal for the future. Roger made a face similar to this. And he said, but if you don't give me that, I will stirve.  Then one of Ron's enemies died. So Ron felt his anger rising.    Then the lights went out so fast that Roger knew he was going to be murdered. A black mist came out of the cereal boxes and the bacon was flying everywhere. Pancake mix splashing over the counters. Freezers freezing at higher temperature than normal so that it was freezing the frozen pizzas too much. Ron ran way far away to that aisle that's always full of people. It has like loads of sweets and crisps. Yummy. There was like 10, no wait, 15 monsters there all black with eyes oogieing with blood and tears that looked like bacon but were actually dead people's skin.   I am your enemy. And then he ran and went inside a freezer but forgot that the freezers froze too hard now and he died from freeze. Roger ran to an exit and was almost out when he tripped on something. He looked down and saw his enemy saying help me the pancakes were too string and then he said no I am Roger you are Ron's friend not mine smelly and he ran out the door he was safe he got out he escaped he avoided death he was alive he was tall he was safe he was roger then he went he back in for the bread but forgot about the monsters so when he got the bread the monsters came out between the slices and cried blood from their mouths saying we are your enemies Ron he said how do you know all my old name and then they ate him and he just fell down on the floor crying from death his last words were I am all your enemies then he fell down and died just before he died he said I will now be a supermarket monster so when you are in a supermarket remember that Ron is waiting in the future though because it's in the future remember you like it even just really watching it just how ridiculous it is oh it's so bad I mean good you can see why it got so much critical acclaim can't you I there's just so much to unpack with the whole thing it oh why did I take those off now I'm gonna have to snap them back on this second like even the fact that at the end it says his last words were but then he says more and then it goes back and he says something before he dies like he dies like four times oh god that was from them past Kevin from my mind about seven years ago and you know what makes it even worse is that wasn't for like a video or anything I was just submitting a story for my own fun and enjoyment but it spawned quite a lot of like little videos around it I took a little look at some of them like there's a g-mart animation there's a few little animations of it and then there's some like dramatic readings that I want to I want to take a little look at with you this one's by mr creepypasta who I think does dramatic readings of a lot of um creepypastas but I guess he made an exception for one crappy pastor unusual things seem to happen every day for example his uncle died anyway anyway it's just as we counted so far good reading one second I want to I want to focus on his pronunciations here you're our enemy now no no no sorry dude sorry it's enemy it's not enemy it's enemy we're done no more your career is over he can only buy things when so he only buys he's getting so confused in the comments he died from freeze the pancakes are too string in the future though because it's in the future I love life see this is what I wanted as an author I wanted to bring happiness this is a definitive masterpiece one of the most poignant and beautiful stories ever written is after deep consideration yields valuable insights into the nature of friendship and dissociality poverty inflation and of course fear I could still feel the elevated heartbeat when we thought Roger would stirv or the ghostly terror when the 10 no wait 15 monsters cried blood from their mouths from in between those horrifying blood of bread slices I'm sure this story will be passed on by literature classes and hushed fireside whispers through throughout generations hence oh you're more optimistic than I the indian ninja my fat went bouncy from laughing at this this sounds like it's been written by a 10 year old or a four year old that's an insult to 10 year olds every hey come on guys I'm done with this comment section let's move on so this is by zombie horse their channel is called I watched a little bit of this and honestly it is fantastic I love these guys so the guy on the left is kind of telling the story and the right is kind of building the story for you kind of reacting and just immersing you in the story and honestly what they have to work with it just it works just perfectly a very long time ago there was an boy named Roger he was an boy oh you think that's bad get ready for the rest you're just gonna read him how it is yeah I'm reading exactly how that's how I like it for unusual things seem to happen every day for example his uncle died that's fucking that's strange I'm glad someone else agrees with me anyway Roger had lots of enemies no n i m e s careful with that have you ever lost anyone my grandma that's unusual that's fantastic off strangers outside mcdonald's but sometimes he when he get how can you work with this so he only buys things when they are on sale because he doesn't have any much money that wasn't fucking redundant as well dude that that is their problem like if they're struggling with this whole fair this is just the intro it gets so much worse that that must be giving giving with an e struggling so much the mind is like I can't and he took the sale sign away which made the bread go back up to one hundred thousand dollars it's inflation dude come on why is this bread a hundred thousand fucking dollars it's in the future they don't get it this is all in the future so that's normal for the future thanks for fucking telling us that no problem at all young man did he even mention that this is no he's so upset did he even mention that this is no once in a place far away a very long time ago he's on top of his game because there's a lot of little things like that that contradict each other and a lot of people don't notice it so this this is these are two of the three wise men I'm sorry Roger made a face similar to this and then he puts on a motor con a black mist came out of the cereal boxes and that was it for you huh that's not broke the mind of all things he's having a great time freezers freezing at higher temperature see he's very observant he gets me so that it was freezing the frozen pizzazz is too much I can't stop laughing just how disappointed he is oh he reminds me of my dad in a way it has like loads of sweets and crisps like like the gang like the gang yes my animator missed that they didn't realize I meant the gang honestly yeah be honest creepy right the thing about the thing about these really shitty stories yeah don't be honest that's mean the visuals they're so creative lots of visuals yeah lots of creative visuals I'm more of a creative guy you know you punch my fat and now you will pay is it the end no he put like 40 ellipses I'm just gonna wait it out thank you for committing to my story so when you are in a supermarket remember that Ron is waiting in the future though because it's in the future remember I liked it see what did you think left a little bit to be desired but um I like I did like it yeah yeah I liked it too honestly that was great those two guys seem amazing they're fantastic it's some of the comments that it was a class writing assignment a kid wrote this it was supposed to be funny and stupid it was explained on chilling tales for dark nights what the hell is that no kid would be capable of writing this masterpiece the thing is I didn't credit myself in the credits so there was no real trail back to me for it the only real link to me that I could I can show is on my old channel all the videos are private now but I did a little reading of the story a few months after I actually wrote it it took off so well I was like maybe people will enjoy it if I do a little reading of it there was a boy named Roger he was tall but a bit round it's a very dramatic super dramatic reading also the end I said this story was a Kevin original so please don't steal it publish it and make loads of dollar Rino's it's too late for April Fool's so I am serious if any publishers want to publish it please contact me I'm willing to give you like half a percent of the profit which will still be millions let's face it and here's the dramatic reading to the the gmod animation I'm just curious what they've done with it you know because how do you interpret that that mess you know how do you animate that how do you see it in your head there was like 10 no wait 15 months that's more what I visualized when I see it in my head actually not that one but in general the rest of them just kind of like human bodied scary things you know so when he got to the bread the monsters came out between the slices and cried blood from their mouth saying that's very visual I love it this is really good and he screamed fat man help this is quite a nice little simple animation as well it inspired a lot of artists obviously this is an interesting is that one bouncy from laughing take on the story I kind of like it all right you know what that's enough for one day I think my my brain needs to relax for a minute it can't take much of that reality it starts to hurt but I hope you guys enjoyed the story I really do I I'm very proud of it even though it is ridiculous I am genuinely very very proud I hope you're equally proud and you got a lot of enjoyment out of it I'm going to put the story in written form below in the description if you want to read it to tell you again immortalize it because the original site is gone I'll either put it in there if it won't fit I'll put a link out to it I'll thank you very much for watching folks if you like seeing different stuff like this do let me know because I'd love to do different stuff every now and again and just mix it up a little it's it's always nice to keep things fresh but yeah I post every day if you want to see more of my stuff also stream over on twitch like four times a week link is in the description but yeah I'm going to stop rambling now that's it for now I hope you enjoyed appreciate you as always and I hope to see you next time


Hi, my name is Professor Hussein Sharif, I'm director of the Al-Mahat Al-Takaddim Specialized Computer Training Center based in Khartoum, Sudan. In 2012, I was involved with, I myself was involved as principal advisor for the Sudan Ministry of Science and Technology at that time to develop the Sudan National Grid Supercomputer, which we did with the help of the Chinese Academy of Science and we got grant from the Chinese government and the Sudan Supercomputer was installed in 2012. After that, we realized that the technology is changing very fast and we set up the center Al-Mahat Al-Takaddim so that we are in the forefront of the technology and we can give services in that area. So the current status of the technology is that the Supercomputer is integrated with data center, with clouds and with data science and in 2017 the Chinese cloud was formed, CST cloud in 2018 the European Open Science cloud was formed and for us to catch up on this technology, the center joined committee on data, co-data of the International Science Council because co-data is a driving force for this cloud integration under fair principles. So after we joined co-data, we proposed the idea that actually the cloud system, the cloud should be more globally integrated. At the same time, we are on the advising board of the African Open Science platform and this is under the South African Department of Science and Technology and we are advising them that they should also go for tight integration. The current status of the African Open Science cloud is that the main Supercomputer is kept down with speed of 1.1 petaflops and the other data centers are also in South Africa and these are connected by high speed internet to the regional countries like Namibia, like Botswana, Ghana and so on and the applications that they use are for square kilometer antennas, for ocean studies, population studies, statistical studies and so the other network, the areas, the countries within the network, in this network are actually just data suppliers because the processing is only taking place in South Africa. At the same time, this network is connected to the European network under EGI agreement, memorandum of understanding and this also is a loose cooperation because the South African side is actually just supplying data and most of the processing is taking Europe. So under this agreement, really there's little that Africa benefits in the sense that the tools, the software tools, the data and so on are not really available for African countries. So our center in last September co-data meeting in Beijing, we proposed a global open science cloud, which integrates the Chinese cloud, the European clouds and the African cloud and at the same time we're also proposing that we should have privately financed African open science cloud that should be tightly integrated with Europe and China. The tight integration means that from Africa you can access the tools, the software tools and the data centers and so on of Europe, the same you can do with China and vice versa. From China you can access the tools and the data centers of Europe and from Europe you do the same for China. So this is a tight integration. That means you have to develop infrastructure that will make it possible so that one can be in any of the three locations and actually use all the tools and all the data resources available. This is the trend and we submitted a project for Europe under EOC Hub early development program and a team was created with EGI and CNIC and our center as members and we're trying to have city test pilot projects and disaster risk in precision medicine and smart cities. And this is to develop the, to show or demonstrate that global open science cloud works and to develop the frameworks and guidelines for further integration under EU or under UNESCO supervision. So this is our idea and we're hoping that these test pilots will prove this and will contribute to the creation of global open science cloud. And for Africa this will be a big opening because from Africa we can now under this idea access tools and data from anywhere in China or in Europe. And this is the idea of the project. Thank you very much.


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


What's up everybody, Jason for jazzymscasebrakes.com. We just sold out 2021 Hip Parade Limited Edition, Series 10 Hockey. This is a dual case break, 20 total boxes, random teams number one. And of course, every box contains one autograph card featuring some of the best stars. And of course, this is a two case break. So here's a dice roll of so, Mike Tower down to PJ got those spots straight up. And of course, PJ from Allure three, all the way down to Jonathan from Allure four, got in as well. So there you go. Six out of two, eight times. Good luck. One, two, three, four, five, six, seven, eight. Sean Matic down to Daniel. Eight times. One, two, three, four, five, six, seven, eight. Dallas stars down to the New York Rangers. All right, boom. There you go. Sean Matic down to Dallas stars. Jonathan with the ducks. PJ with the Sabres Devils. Rick with the Nucks. William with the Preds. Mike Tower with the Knights. PJ with the Bruins. Mike Tower with the Flyers. Sean Allure with the Kings. Mark with the Islanders. Daniel with the Capitals. Stephen Hedger with the Outlunch. PJ with the Hurricanes. Mark with the Lightning. Bruce with the Senators. Jonathan with the Panthers. Sean with the Canadians. Jonathan with the Blue Jackets. PJ with the Sharks. Ryan with the Wild. Sean Allure with the Penguins. Jonathan with the Yotes, Blues. PJ with the Maple Leafs. Daniel with the Jets. PJ with the Red Wings. Gale with the Flames. PJ with the Hawks. Sean Allure with the Oilers. And Daniel with the Rangers. Now if anybody wants to trade, of course, I'll give you guys a quick minute. I do a show as a monster guy. He's gonna knock out a duo show. All right, guys, TWC trade with the Clubs. They perfectly stick these in here. Sometimes it's a little tough to get out. It's just relevant in one case at a time, I guess, right? Box one. Someone's down car alarm. It was a car alarm. All right, first one, guys. Little Nick Sasuke, very nice, from Clearly, what is this called again? I forgot, Clear Cut, there it is. Nice Nick Sasuke, Montreux Canadian, Sean Allure. Great rookie. How about Brad Marchant? Be careful, guys.  Oh, Peachy Platinum. So that is actually autographed from Clear Cut, actually. There you go. So I'm not sure if that's actually numbered. It should be, though, but since they have the authentication hologram in the back, I can't really see. The nice one right there for the Boston Bruins, PJ. It's gonna go to a good home, William. PJ's also a Boston fan. This was box 19 as well, if anybody wondering. Morgan Riley, Ultimate Rookies, eight out of 25. That is from 1314, Ultimate Collection Hockey. For the Leafs, another one for PJ. 63 out of 100. We got a grader card. This is 1920 SP Authentic Future Watch Autograph of Adam Wolfquist to 999. This is the Canadian grading company, right? There you go. A little 9.5, 9.5 auto as well. I don't even know if you can give it 9.5 auto. That is Blackhawks PJ as well. Back to back to back, PJ. Box 37. John Carlson, Limited Logos to 50. Washington Capitals, Daniel with that one. All right, half way through the first case, guys. Box 50 out of 100. And how about a little Mike, or sorry, not Mike Madonna, Jamie Ben. I was about to say Mike Madonna for some reason. That's a Future Watch as well to 999. What was the year? It was 2009, 2010, 10 years ago already. Dallas Stars, Shawn Matic, 71 out of 100. And a Mark Stone for Vegas from Clear Cut. Autograph, Vegas Golden Knights. That is Mike Tower. Three more to go, 44 out of 100. What a Henrik Lundquist sign of the times. 1617 SP Authentic for the New York Rangers going to Daniel. 87, maybe some Crosby Emulsion 87. Dylan Kozens, 116 out of 199. 2020 Team Canada Junior Team. There you go, premium autograph as well. Nice three color patch. Kozens still Buffalo, right? Sabres? I think even on the checklists, this would not go to Buffalo, but let me go double check that. Oh, you know what, he got traded, huh? What product is this from? Is this from Team Canada Juniors? Yeah, I mean, if they don't have an official checklist, that'll prove that what it says it'll go to, it'll go to the team he's currently on. So I'd probably give that to Buffalo, right? He's still there. Yeah, they just, on the checklist, they just obviously have like Team Canada, no affiliation of course to where they would be. So yeah, that would be going to the team he's currently on. But just Dylan Kozens, Buffalo Sabres, double check. So, Buffalo Sabres was a PJ. Last box, 98 out of 100. And Tiwu Terravinen, four out of 20. Alrighty, PJ, what a break for you PJ. Now of course, if this was only a 10 box case break, this would be it. Still got some nice stuff of course, but it is not over yet guys, for the customers that haven't hit anything yet, we still have another 10 shots. Now we're going to do a case, three out of 10. Yeah Hollywood, I mean this one's obviously one hit per box. So 31 teams, there was a lot of teams of course that went hitless in the first case. They got all the Buffalo products. Wow, they actually had a crazy correlation actually. There was one hit for 10 different teams. So technically, it's not bad at all. So 21 teams in the last one did go hitless. Hopefully that changes in this one. 29 out of 100. Kraken, I know man. Kraken cars are probably going to go for a lot, just like Vegas did the first year. Like once you start getting their patch autographs in there. How about Eric Stahl, Minnesota Wild Limited Logos. 37 out of 50, nice patch right there. Minnesota Wild, that's Ryan, there you go Ryan. 38 out of 100. For the Ottawa Senators, Drake Batherson to 99. Premier Attractions, rookie patch autograph. Ottawa Senators, Josh Proust. All right, we're getting all the teams that didn't hit in the first half, so that's good. Box three out of 100. Yeah, well, if rate of course, I'm sure they're honest. I mean, it claims to have at least one hit per team in their product run. But of course, some of them would be much more heavier than others. That could be the only hit for the wild in the whole product run. Who knows? Unless they put like some Caprice off in here or something. A Paris there or something, Souter. Leon Drysaito from Ice Hockey, very nice. That is from 1415 and technically, I think this is the Leon Drysaito rookie. I believe he's a rookie in 1415. Very nice, Oilers, who has Oilers? Sean O'Leary, 12 out of 100. And Jason Robertson from Synergy. Four out of 15 Dallas Stars, Sean Maddock. All right, six boxes to go, guys. Well, first of all, what is this? Approximate value, sealed box prize giveaway entry? And it says you've received an entry into our Hip Ray sealed box prize giveaway. So what we'll do, since this was the lucky winner, we're gonna give this to whoever hits this, all right? Must have put it in here for a reason. Kotakan Niemie stature. So there you go. That should also be a rookie, right? No, 1920? No, he's 1819. So Moncho Canadian, Sean O'Leary will give this to you. I don't wanna show the backers as a code, but I'll make sure that gets out to you. That was the lucky winner box. Of course, box 99. Suzuki was a Celsius with Drysaito. Oh yeah, I see the Drysaito, so is it either. Harder heart from stature. That's awesome right there. Flyers, Mike Tower. Mike Tower, Flyers. All right, four more to go, guys. 65 out of 100. And Sebastian Ajo, UD Canvas, Carolina Hurricanes, PJ. One out of 25. Clear cut, 1819. Sebastian Ajo, that was another big prospect, 1617. 46 out of 100. Adam Fox for the Rangers, Daniel. Man, this is a stature case. 12 out of 65. That is a rookie there from 1920 stature. Rangers. There you go, Daniel. All right, last two. Wow, look at that patch. To 249, Dominic Kahun. One, two, three, four color patch from Cup Hockey, 1819. Chicago Blackhawk's going to PJ. And last box, Mojo, 83 out of 100. Ray Bork, 26 out of 50. Autograph there for the Boston Bruins from 2007 to 2008. Trilogy Hockey. And there you go, guys. That was Bruins, PJ. Nice break for you, PJ. So that was it, guys. Here was the second case quick recap there. Ray Bork, Kahun, Fox, Sebastian Ajo, Carter Hart, Jason Robertson, Leon Drysidele, Drake Batherson, Eric Stahl, and of course that was from the last case there. But there you go, guys. It was a limited edition. Dual case break, random teams. Number one on jaskyscasebreaks.com. Appreciate it.