 The session is called Get a Perfect 100 in Google PageSpeed and what will happen if you don't. So let's say your site just went live after being under construction for months. You know, you got Redis, Varnish, CloudFront, Fastly, you're on some Super Jumbo extra-large instance. You know, you are ready for anything that's gonna get thrown at you. You are prepared. But you wonder, you know, how's this gonna work on a slow internet connection? But you say, oh, I have HTTP2 up and running. My site should be faster than Lightning. It's behind a CDN. But you still kinda wonder, well, how can I verify that? Is there a tool? And I say, yes, there is. And the tagline for PageSpeed is says, make your web pages fast on all devices. And so even from your desktop to your mobile, that's the goal here. So this is an actual score from a real live Drupal site that uses Google Analytics and everything else. The trophy though is fake. You don't get that if you get that 100. I tried. And this is a different site. Let's just say it rhymes with box 17. So that's a TV station here. And yeah, this is a real, that's a real score. So that's channel 17 here in Nashville. And so some of you might be saying big deal, you know, I don't get paid to do this. So why should I care? I'm just going after the money. Why, you know, my client's not caring about this. And so this is why you should care. Google is going to start taking PageSpeed into account on research rankings. So this is definitely now a SEO play and marketing loves SEOs, everybody knows. And then quick audience poll. How many people have passed a slow car? You know, just you're angry and you're like, this guy's going so slow. Anybody? Yeah, I've done that too. So yeah, the idea here is that, you know, everybody hates waiting. And do you really think that all of your users are gonna wait for that slow page to load on their phone? Google actually estimates that 50% of users will leave if it takes longer than three seconds to load. That's like first paint. If it doesn't happen in three seconds, you're gonna lose about 50% of all the people coming. So if you're doing an ad campaign, you're half as effective as you could be. And also if it loads slow, people might associate your brand or your website, whatever you're trying to do with being a frustrating product and you don't wanna do that. And this is why front-end performance matters to me because all the work that I've done on this site, no one's gonna see it because it'll never load on their phone. And the other really critical thing is net neutrality, depending on how that goes, they might implement slow lanes and you wanna make sure that your site will work even in the slow lane of a net neutrality future, we're not sure of. Okay, so you're like, all right, I get it, I get it. This really matters, what can I do? And so you run the tool and you're like, oh, it's easy, I just need to eliminate render blocking JavaScript and CSS and above the fold content. And a lot of you are like, I know all the words, but in that order, maybe not. Well, fortunately I'm here to guide you on how to get to that elusive, perfect score. So we're gonna be going through the rules that Google uses and I'm gonna start from the ones that I see the most often and we'll go down from there. All right, so first up, remove render blocking JavaScript. Long story short, don't use JavaScript to paint the page. Cause that just means that your page is waiting for the JavaScript to load before it will start. So you need to put scripts in your footer, luckily D8 does that by default. And then if you can defer those as well, that's ideal. And there's a bunch of little tricks with set timeouts and jQuery's hold ready, things that you might need to do depending on what you have done. And I'll talk a little bit more about that in a minute. And then this is the big one, optimize CSS delivery. If optimizing a website was a game, I would call this the boss level. It's hard and this is the boss at the end of the internet that you need to beat. So people always joke about, oh the boss at the end of the internet, that's really hard. This is the boss, it's really hard. And so structurally what it's gonna look like is you're gonna have your inline CSS that's gonna be generated via some Node.js scripts and then you're gonna load your CSS files using rel preload. So that's structurally, that's the change that it's gonna make. And just to give you an idea of rel preload, that did not work in Firefox two months ago. So this is definitely groundbreaking stuff here. And once you figure out that CSS needs to change on almost every page, because every page looks different, this turns into an eight by eight Rubik's Cube level difficulty. This is starting to really creep up there in terms of how difficult this can be. Luckily there's a couple tools that help. So if you just wanna go, just give me the straight Node.js page to do it, the project that's gonna be, I think it's pit house. And then if you wanna have a webpage that will spit out the CSS for you automatically, there's a couple of sites that will do that. And then there's actually a Chrome browser plugin. So if you're behind a firewall that you can't have anything outside access it, there's actually a Chrome plugin that will generate the critical CSS for you, which is awesome. And so if you're using Drupal, the AdVeg module will actually take care of optimizing the CSS. It's pretty cool. It's not fully automated. So if you wanna have it set up where it's just like I ship my code and it's done, I'll be probably setting up a service here called fixrenderblocking.com. That is not working currently, but that is something I plan on to do just because I saw how difficult it is to actually automate this. And so now that you have it, you still need to use the rail preload shim, and that is the load CSS that will do that for you. And so you can check this box off until you change your CSS or your HTML. So it's something that will continually have to be done. And so this is why I say it's the boss level of the internet. These are usually really hard to do. This is the hardest one. All right, so up next, optimize images. There is a module called image API optimize. And what you wanna do is install JPEG, Tran and PNG quant. Both of those are command line tools. And then that module will then use those command line tools to optimize your images and it'll create an image style, which you then, you just can add that part to all your image styles and it'll automatically optimize your images. And you may even wanna set up a cron job that will then find and run those two programs to just optimize any images on your server. That's currently what we do because even with the image style, certain images still get through and we just found it's just do everything all the time, make sure it's optimized. Leverage browser caching. All right, this sounds fun. You know, the cache, that's the browser cache. So we're talking about Firefox or Chrome. We're not talking about Memcache, Redis or the database cache. And you're like, oh cool, this is great until you run it and you see a Google Analytics is in there. So Google's complaining about their own tools, which kinda sucks. So there's two ways you can do this. You can host it locally or you can use a project called GA Light, which then you can cache forever. It uses the API for Google. And so just depending on what you wanna do, you can go either way and that will take care of this project, this part of this for you. And once again, for AdVeg, there is, it will use option one here and it has a cron job that will continually check to see if that source files changed and it will then pull it down for you. Improved server response time. So this is where I'd say 99% of most performance talks goes is just how can we get the server faster? How can we get that content to deliver to the person quicker? But once it hits their browser, how it gets rendered is actually a lot more important than how it gets delivered from what I've seen. And so if you do wanna do this, you just need to enable core caching, throw up Cloudflare, there's a free tier for that and you'll be good to go. But if not, then talk to one of the, hosting platforms here and they'll probably take care of this for you. Minify resources, you can do a quick search for how to do this, there's a lot of guides and how to do this for CSS, core will actually do it. JavaScript, the AdVeg module and then HTML, you're gonna use Minify, HTML, that's a new module that just came out recently. Prioritize visible content. This one sometimes shows up but usually if you fix other things, this will disappear, but if you have a loading screen, so if your page comes up and you have a little spinner spinning and then your page loads, you will get this warning. And the other way you can get this is if you have white text in a white background and then that background div loads in an image and then you can see the text. And so what you'd wanna do in that case is make sure that that div is not white, the background so that way you can read the text before the image shows up. And then this one usually doesn't happen, avoid landing page redirects and this will help with the server response time. But one level of redirecting is okay, so if you go from HTTP to HTTPS or if you go from www to the non version or from the non to the www, you know that one level is fine but if you go more than that, you don't wanna do that and you definitely don't wanna use m.domains, that's kinda outdated. You wanna make your whole page responsive so the same site will serve the same users. And then enable compression, GZIP or Brotli, once again the ADVIG module will GZIP and Brotli, your CSS and JavaScript for you. HT access might be needed but there's guides on how to do this. It's pretty easy. And so quick recap, you know that's the goal and so sometimes a 100 is not possible. Iframes usually cause it, maps, videos, anything that's above the fold that is rendering like that, that's usually really hard to then get a 100. And I found that if you have a Google map that's almost impossible, you'll get it like a 98 which is still pretty good. All right, so quick recap, ADVIG will cover these falling rules and the ones with asterisks, those are being worked on for Drupal 8. Currently everything is Drupal 7 because the site I work on is Drupal 7. I get paid to do this. I don't get paid to do Drupal 8 so it's a slow porting process but the module exists, it does work and hopefully by summertime this will all be available in Drupal 8. Other rules not covered by ADVIG, you have the optimize images, minify HTML and then the rest of these should kind of fall into place usually. All right, so that sounds really hard to do on every page, right? So luckily you only need to do this on your landing pages and that's, you know, if you do a search, they come in, they hit that page, that's a landing page, any page that is their first visit, consider that a landing page and try to optimize it. So let's do a little quick demo here. So this is simply test me. I'm gonna spin it up and show you how easy this is to do. So we're first gonna test it here. So out of the box you get a 54 out of 100 and so we're gonna go ahead and log in and we're gonna enable a couple modules. First we're gonna get rid of overlay because no one likes that. And then just in the read me I tell you exactly what some modules to enable and then you're just gonna go to the configuration, go to performance tab, we're gonna go ahead and enable the page cache and the aggregation and then here in AdVeg you're just gonna use the recommended settings for just about everything. And it's pretty easy to set up so we're just gonna go through here. This is if you have HTTP one or two, simply test me is on 1.1 so you use the 1.1 settings and right now we're gonna compress the JavaScript so we'll have a little batch operation. Boom, there we go, it's compressed. Just do a couple more settings here and now we get to the critical CSS and save the best for last. So we're gonna go to this website and just pop it in there. It's gonna check, figure out the critical CSS for you and then you just copy that, go back, paste that in and we're gonna go ahead, hit save. We're gonna clear the cache and let's go see what our score is. So we got a 99 out of 100 which is pretty good. If simply test me, actually use the HT access rules that ship with Drupal, this would have been a 100 out of 100. So yeah, it's that easy. You can do this really quick. So a couple pitfalls to avoid if you wanna go for that 100. If you have your CSS or JS hacked in versus using the API, JavaScript that renders on the client, inline JS that doesn't work well if it's deferred, external fonts that are not loaded from Google so AdVeg will take care of Google fonts. I haven't done other fonts yet. The tricky one here is if you have extremely strict content security policy headers, it's a mouthful, those won't actually allow inline CSS. So that if you're extremely PCI compliant, you might need it. There's a couple things you can do but it's a little bit tricky. You have to like hash the CSS and it's a big pain in the butt. And in the case of SimplyTestMe, a server config that can't be adjusted. So I can't adjust anything on the SimplyTestMe page and so I can only get a 99 out of 100. So I say congratulations. You beat the boss at the end of the internet. His name is Al Capone. He's a old-timey mob boss but you know, you beat it. And I'm a dad so I can get work, I can say those cheesy jokes, right? So you might be saying, okay, that's cool but give me some alternatives. I don't know about all these Drupal modules. I wanna do it slightly differently. Well, here we go. How to get a high page score if not using Drupal or you don't wanna use certain modules. So Google PageSpeed, it's a Apache and Nginx server-side plugin. So this means it's gonna require some configuration but it's a pretty quick win. And I found that if you wanna, if the image stuff is too hard, just use the image one. There's a bunch of rules in here and there's a couple that have to do with images in here and just use those to handle your images and then use AdVag to handle everything else. So you can kinda mix and match both options. The other option is if you love Node.js, there's a project called Blinkloader and that's just gonna do Node.js all day long for all these things and it'll get you pretty close to 100 out of 100. And then the more controversial one is Google AMP. If you implement AMP correctly, you will get close to 100. I've never seen an AMP page actually get a 100 but it is something to consider. It does take time to implement and so I say do the quick route first, see if that works for you and then see if you still need AMP or if you're good without it because there is some controversy around AMP if you research it. All right, so we got a little challenge here. I'm gonna give you $5 right now if you can get a 100 out of 100 on a Drupal site that you currently run. And so I'm gonna read this fine print because it's not up there. Your site is not all text and needs to be a perfect 100 on mobile and desktop and if there's a group of you, you get $10 is the limit for that group. And so come see me afterwards and I'll start giving you guys $5 bills. So I'm just gonna leave that right there. All right, so this is the website. So go ahead, punch that in, see what you get on your score and if you needed to search for it, just look for Google PageSpeed Insights. All right, so while everyone's doing that, some of you might be wondering, well, what popular site is currently working to prove its PageSpeed score? Glad you asked. All right, I'm going to work with Drupal.org. So Drupal.org uses the AdVeg module. It's been using it for about two or three years. And up until a couple of months ago, we've been trying to get to that 100 out of 100 and the AdVeg module is key to making this happen. So far, the results show some big improvements. One of the more interesting ones was we looked at Google Analytics and the UC browser, average page load time, went from 13.3 down to 5.4 seconds. And that's a mobile-only browser that's used by half a billion people in China, India, and Indonesia. So it's not your typical US market, but elsewhere this really starts to add up and matter. Because you're talking from the 13 second page load down to 5.4. I mean, that's huge. And this is not with the 100. This is about, I'd say, a 70 or 80 with Drupal.org currently. And so, yeah, like I said, we're currently working on getting this to 100. The final key is generating that critical CSS. And once I saw the issues that were coming up, that's why I decided to create a service to make that happen if you wanna have a completely automated. You can have it fully automated on your own server, which is what Drupal.org will be doing, but not everyone has an awesome DevOps team. So I was like, okay, this isn't gonna work for everyone. So that will be launching in a little bit. All right, so quick show of hands that anyone get a 100. Anyone? You guys got homework to do. So, quick question is, if you're spending $12,000 a month on hosting, why can't you do that? And it's because it has to do with the front end. This is why it matters so much. So you might be saying, okay, cool. I did that, Mike. I spent 10 minutes, got AdVeg set up, and I got a 100, I have 100. What's next? Well, one thing you can do is webpagetest.org. And so, on the upper corner there is the AdVeg Drupal development site, and then Drupal.org. And so, Drupal.org has multiple advantages here. It's loading from a CDN. It's got H2, whereas the development site's H1.1, no CDN. And this was about a week and a half ago when I recorded this, and the front page has changed. But you can see how in under 30 seconds, it's pretty much fully rendered. And Drupal.org is gonna take another 40 seconds there. And so, this is on a mobile edge connection. And so, if you're on your phone and you see the little E up there, that means you're on mobile edge, instead of LTE or 4G or whatever. This makes it really obvious in terms of like, how slow a page load can actually take. And I'll just let it run. And so, a couple of tricks that we do is we preload resources to optimize the speed index metric. So there we are, video's loaded, and we're done. So that, you know, it's pretty obvious the advantages that you can get by doing this. So this is what the page looks like. You just punch it in there. I have connections set to mobile edge. And I found that you only run one test because it just, it's so slow that it'll show you exactly what's wrong. So this is the page that you get. And if you dive in here, we can see we have a start render time of 7.5 seconds. And in this case, Google Fonts is what's blocking it. So you can see, once that font has loaded, then all of a sudden the renderer starts. And so the whole idea behind this is how can you get the rendering to start right when the HTML is fully loaded? So in this case, that'd be about four and a half seconds. That's what it will do for you. And so give me more conceptual ideas. This is what HTTP2 connection looks like. And so you can see various things loading. And once again, the second one down is fonts. And the minute that hits, you see that big bar going all the way down. That is, you know, that shows you when the page started to render. And it's real obvious what was blocking since the font's there. Then compare it to a HTTP1 site. This is the site that I currently run. It's on H1. If you notice, the SSL negotiation takes a lot longer because that's one advantage that H2 gives you. But if you notice, I'm beating it even though I have that huge handicap there. This loads in about seven seconds. You can see the first vertical bar there is right after the HTML gets loaded, I will show the page. So that's web page test. The next one that you can use is a lighthouse. This is built into Chrome. So if you wanna test stuff that is on your network, you know, this works on local sites, it gives you way too much information, in my opinion. It's just, you get overloaded. But it's there, so you can use it. And so this is what the performance page looks like. A lot of stuff you can read about. It gives you a whole bunch of things you can do. Talks about progressive web apps with service workers, which are pretty cool. One of the things it says does not respond with a 200 win offline, which is kinda wacky if you think about it. So it's basically if you're in a cave and you have no cellphone reception, you could, in theory, access the web page with a server worker. And so it's kind of mind-blowing what that can do. And this will help you achieve that goal. Accessibility, this will cover about 25% of what accessibility should do. So it's a good start, something to be aware of, but it's not, by any means, full coverage. SEO and some best practices. So that was a lighthouse, and then if you wanna use something crazy, Chrome User Experience Report. So as you all know, Google collects a lot of data. And anywhere Chrome browser runs, you can figure out the page load time on that device for any website. And this is all available for free. And there's a YouTube video where they talk about this at Google when they kinda introduce this thing. And if you really wanna get some needy-gritty details, that's how to do that. I'm not gonna go into it because it's like 10 hours of work, but you can do it. All right, so some of you might be wondering what's gonna happen if I don't go for that one hair data, one hair data. You're like, you know, this is great, Mike, but I don't wanna spend those precious minutes setting this up. I'm just gonna sit back and do nothing. Well, just remember that Google's gonna roll out this huge change here in a couple months. Page speed's gonna be a ranking factor. And users on a slow connection are gonna give up and leave before the page even loads. And the recap, you're gonna have money that was coming your way. You could have had the money come in your way. But because the page didn't load on the phone, it's not gonna happen. And so you may think you're done, but I say just check your score, make sure you have a 100, if not, see what you can do to fix it. So, you know, slow slides, leave money on the table. I think that's pretty obvious there. You know, just one second faster can give you a huge boost in conversion rate. So, speed matters. So, if you have any, we have sprints coming up tomorrow. And you can go ahead and rate this session. And I'll go ahead and take Q&A. I got a couple of sites loading up here to see. So, you can see Drupal.org, and then current company I work for, DataSphere. It's got all the handicaps, but it still loads the quickest. And then the one in the far corner, it cheats. So, that gets a 96 out of 100. But you can see it's just a spinner slowly spinning around. And so, cheating won't fool the user, even though it might fool the robots. So, something to be aware of is, you can gain the system, but your users are still gonna leave. So, yeah. All right, any questions? So, the Void landing page redirects. Our site redirects. There's nothing we can do about it. Because we redirect to our Drupal site. How does that affect the score? So, that's gonna affect your initial first push out of the HTML. And so, if it's below 500 milliseconds, half a second, it usually won't matter. Okay. And so, most people are okay, but if you're not okay, look into getting a CDN, because that will help to lower that air bar or whatever. Okay, thank you. Yep. You had mentioned something about Google Fonts, doing something with them in the module you made. Yes. What is that? And what can we do on non-Google Fonts, or if we aren't using that module to get the same optimizations? So there's a PageSpeed Apache plugin that will actually pull in those Google Fonts as well. So you can use that. But I basically parse the, I request the font using different browsers. So because you need to get different font types. And then I pull that in and put it in the inline CSS. So a couple steps if you want to manually do it. Feel free to look at the source code if you want to see exactly what's going on. Thank you. If a site does not use a CDN, will it be impossible for it to get a perfect 100? No, not at all. That middle site there, it's HTTP 101, no CDN, and it gets a perfect 100. And if a site does some kind of redirecting like HTTP to HTTPS or something along those lines, will it be impossible for those sites to get a perfect 100? No, one level of redirecting is perfectly fine. It's just if you go from like HTTP to then M.HTTP, and which then goes to HTTPS, which then goes to the M.HTPS. You know, if you're zigzagging back and forth till you finally land on it, that's kind of what it's talking about. Thanks. Hey there, I've got a CSS workflow question, I guess, where you were copying the most important CSS into the Drupal module. What's the, if you have a really large site with a lot of developers working on it, what's the step that you would recommend so that people remember that's there? Because I assume that's overwriting the code that's being compiled? It puts it in the head, and so what it means is, you know, CSS is a cast skating style sheet, and so it puts that in up front, and then as your CSS files load, those will then override what's there, and what's there should be the same, so it doesn't change it. Okay, so you wouldn't have to remember to go and paste a change every time? Not every time, but you know, eventually after X amount of changes or some big redesign, you definitely want to. Right. And let's see here. I think I can pull up a, yeah, so here we have critical CSS. One thing you can do is if you want to use a file, it will tell you the path, so instead of having this gooey interface, you can actually save the file in your theme folder with a special URL, a special file name, and then based off the URL, it will look up that CSS, and so you can support multiple workflows. So on build, you could have it check that instead of having to remember to go and paste it in? Yeah, so on build, you could have it run your Node.js to generate the critical CSS, dump that into the folder here, and then it will take that and run with it. Awesome, thanks. Yep. Do you have any tips for using the advanced aggregation module on a site that has no shared file system? No shared file system? Right, so if you have a cluster, like the first time the aggregated CSS or JavaScript loads, the database flags it as created, but it's only created on one backend. Is there a way to generate them on all? Currently, no, but it's, the generation shouldn't be too expensive to do, so is that a problem that you currently have? Yes. Okay, we should talk, I'll be in the sprint room right after this, and we can chat. Sounds good. I'm running a site that has multiple third party scripts for, you know, A-B testing, loading like recommendations. Do you think it is impossible to get a hundred with things like that, or will advanced aggregation help with that score? Odds are it will help, and so the current ones that I've custom coded for, so it kind of has a general like catch all, but certain ones require some extra help. And so I have Google Analytics, Pwik, Google Tag Manager, Perfect Audience, Twitter, LinkedIn, and Facebook. And so all those scripts, Facebook was the hardest to how to like rewrite their code kind of, but the rest of these were relatively easy to do, and that will then make sure that you can get a 100. And so I'd say Odds are it will work, but I can't guarantee, and if you don't get it to work, you'll still get like a 98 or 99 out of 100, which is really good. So it's not as bad as you might think. Cool, thank you. Mm-hmm. Hi, when we concatenate and minify the JavaScript, is there like a certain like JavaScript libraries that we shouldn't like concatenate? So I mean, you're talking about what Advegg does with JS compression? Yeah, like I think like before I try to concatenate the jQuery and other libraries to other custom JavaScript libraries that I created, and then the site like crashed. Well, I'd say Adam, don't concatenate them yourself, so add each file individually, and then this should take care of that, but if not, you know, if you have a good example, like I said, we'll meet in the sprint room and I'll help you, we'll figure out exactly what the problem is. But this also supports external compression, so if you want to use, if you have a command line one, so you can see here, these take about a second to run. The command line ones will take about two milliseconds, so yeah, you can, right there it says, install the JS men PHP extension, that will run JS compression way quicker. I'll try that module later. Yeah, we'll talk. Not a question, just wanted to say thanks for becoming a subject matter expert and turning it into Drupal that we can all use. So, thanks for that. Thank you. And if you guys need help getting this set up, I'll be in the sprint room and we can go through one by one and we'll get this up and running on your site. If it's seven, eight, still not there yet, but seven for sure, we can do this. Yeah, I'll put them up. No, I'll put them up, probably real soon. Awesome. Yeah. Thank you. Thank you. It's part of it. I mean, big pipe will help, but that's more of like the bonus, like the HTML solution. No, it's, big pipe is more about like, delivering segments of HTML. And this is more about like, getting the CSS to render as quickly as possible. So, they both serve the same goal, just different ways. So, yeah, the initial load of the speed, that's what big pipe helps a lot. Yeah, so you base with big pipe, you can shrink that initial stage because that's when everything else starts. So, that's why server performance matters because you shrink that and you get more headroom to your... So, we're going to just solve that with Javascript. Javascript will not be actually positive, but like, we're going to be minified out to one Javascript. If you put the Javascript in the footer, or... That doesn't matter. You need to put it in the footer or you need to put it, have a deferred tag on it. So, old school CDNs, in terms of having your HTML one domain and your CSS and GSL on different domains, that's kind of an anti-pattern now. So, I mean, you used to be a tag manager towards Javascript, so, that... I'd say put it in the site in the footer. But it is dependent. I mean, each one's different, but I'd say, in general, don't use Google Tag Manager to use... Yeah, just put the tracking code directly in. I mean, you know, test it out and see. So, okay. Thank you. Yeah. That's really good. I was worried I'd actually have to... Yes. If I do this talk again, I'm definitely going to have to show off somebody, because everyone knows now. Thank you. Yeah. Yeah, I'd say the DOM is probably, in analytics, that's probably the most important metric to look at. So, DOM loaded. Yeah, do it before and after. There's other sites that will kind of keep a record of it for you. But I find that the information they give is too confusing. They just... It's like a lighthouse. It's just way too much information. And you just get overwhelmed, and you're like, I know where it's starting. So, that's like your... Yeah, so slow is the slow. And so, you're looking at a 700 millisecond round trip time. So, it's really slow print times. And then your bandwidth is a little bit to 200 kilobytes per second. So, it's the absolute worst possible conditions you can get on your phone. Yeah, if you have any questions, I'll be in the front room, just helping people out. All right. Sounds good. For us personally, I haven't seen that because we are like a portal for our customers that we're 100% logged in. And so, that's not... For us, that's not the right metric. But I think for Drupal.org, they saw improved page load times. And so, I could see that eventually playing out. It takes a little while for it to kind of catch up there. So, it takes time for Google to say, oh, this is a fast page. I'll rank it higher than the search rankings. Yeah, because it's such a foggy system, no one knows really how their search rankings work. So, it's hard to truly say, this will give you X amount. Yeah. You can figure out what that one thing is. You'll make a lot of money. Yeah. Yeah. For browser captioning, things like that, unfortunately, you know. But you can help out by doing a DNS load up and privilege for certain things. So, let's see here. In the critical CSS here. I have post names lookup and URL's preload. And the service that I'll be starting will actually populate those. So, it will load the page and figure out post names as well as URL's to preload. Yeah. So, if you load the page a couple of times, we'll get a rough idea of which ones are there. There's a lot of JavaScript file, but it's pulling stuff in. That's the domain you can at least have some control over. Usually, you can get usually about one, essentially two levels deep. And after that, it's practically, but the first one or two levels that will help them a lot. And that's... So, as long as you know... Yeah. Yeah. Because then it does that DNS fetch first before you probably... I mean, it's right at the page or whatever. It's already done and it's done at lookup. And if it's a 700, it will take a round time. You just knock that down to the same amount of time but you're initial. Yeah. So, it seems like we have a full version of the most recent version installed. Oh. Yeah. I've improved it. Yeah. So, you can see right here, like... So, drupal.org currently will do certain lookups. So, like, the stats double click. There's no domains before that. Actually, I think the connection would be there right here. So, you can see these three get pre-connected. And so, these are ready to go when you need it. They get loaded doing their thing like that. So, we spoke about speed optimization. Do you want to be more comfortable? I know you've been leaning like this. Yeah. It's very uncomfortable. So, it's like a speed session, right? Idiot. I don't want to jerk you back. Thanks for that. Yeah. My question is, from the perspective of the speed optimization of drupals, but any plans or any research on WordPress? There are other things somewhere to advocate in WordPress as well, I think. And so, this is where we look for the key word to work for the critical CSS. If it has that, it probably has everything that. So, that's the hardest one to do. Sure. Yeah. But, you know, there is a patch in the Internet that serves that plugin. It will get you 100, but it will be really close. And really close usually works fine. Yeah. If you're getting, like, a hundred's awesome to put it here in the above 80, I mean, you've got to figure if that's a percentile kind of score. Your score is faster than 80 percent of the sites that you see. Yeah. So, it's... That's what the... I don't know if it's a percentile score or not, but, I mean, it's good. And there's other... Yeah, so... Lighthouse, I think, maybe shows you... So, this right here, the speed average, that's something new that they added to HBDem sites at the beginning of the year, right before the Disney big announcement, they added that in. And what that does is that it's updating every month and it brings in that huge database and all the browsers on all the devices that Google has access to. And it gives you your average speed. And then right here, you can see page work institutions for... which ones landed where... So, yeah, this is the first content paint. That's, like, when something shows up. And then... PCL, that is... Don Cunterwood, that's when you're done. So, those are the two metrics along with the optimization that Google is... Usually, if you put a 100 or 100, the rest of them take care of itself. You know, something fun used to be put in canadian.io through their... Oh, that is true. The average speed. So, it's just the... Yep. Can you talk to the... the weight loss problem that we have with our CSS and our JavaScript? I mean, we're doing optimizations, you know, at server level and compression level. But, you know, like, you showed the one where you got... Yeah, there's several... I mean, that's delaying this. But the design decisions that we're making is that we have to use six points on this page because it's cool. And it's, you know, performance, you know, you're talking even the deferring and delaying some of this stuff, but just the past volume of stuff that we're trying to figure out. What you say the through rate was on that edge? 200 kb of subject. Yep. You know, you've got, I don't know, four megabytes of JavaScript number 300 kilobytes of CSS. How do you ever expect any sort of good user experience? So, our... our page, like, the company that works for it gets a 100 or 100. We have fonts. We have... about two megs of JavaScript. And then... maybe 500 kb of CSS. And so it's not necessarily the whole download package. It's just how you deliver it. It's how the HTML is rendered. It's how it's structured. That's what works. And so you can, with all of those constraints, you can get a 100. I understand. But still, that's the machine 100. The user experience of 100 where I hit this, you said it's got a slow connection and it's like... Okay, I start to see something. I can't interact with the page yet. For me, it's like locked up in old scroll. I gotta wait another 17 seconds. So if... You won't get a 100. That's why I like... The goal is 100. Yeah, sometimes, you know, you can't read the laws of physics. You're talking about passing somebody in a car, you know? Okay, I'm talking about... We're trying to do the same thing with a fully loaded 18-wheeler. We're blowing the horn, get out of the way. I'm trying to go this way. It's irresponsible at some point to try to think that this is really as long-term as possible. And I understand that there's this disconnect between developers and designers where... I want to have all this cool stuff. I want to have a site to look and do and whatever. So, I mean, you know, I have a... But they have a pretty good conversation. It says A-Sync workloader. Yeah. So this will... We'll show you which fonts are going to be A-Sync loaded and which ones are not. We can't A-Sync this one because then we've got this flash-lens file text. So all we can do is prevent the flash-lens file text. Okay. So what that will do, and if they're really stickler about that is the font will not change on the first page. Second page, you will get the font. And so, you know, there has to be a trade-off. Right. That's just it. And so this gives you that option to trade-off based off of what you need to do. There's got to be some point where there's a pushback. There's an established way where it's talking to a module and they will change it. It shows like your nutrition, the war on the package of food. And it shows like your HTML and CSS and everything and all the weight of the entire thing. You know, there's some point there's got to be at least a target. We're going to stay. This is our performance budget. And you can't have everything. You can get pretty close though. I mean, that's the idea here is this is kind of groundbreaking research. I appreciate this module. I mean, it is absolutely awesome because it does do so many things well. And I just think at some point the kind of the enabling that it does of let's just continue to eat everything. We're never going to gain any weight. We're just going to keep stuffing ourselves into a gourd or something. There's no consequence. But at some point there is consequences. There's always, you know, even if it's some goofball like me, this guy, I don't know, let me see. My current count is 31 tabs. My phone's going to slow down at some point on your site, no matter. Because I'm an idiot. So that goes back to you got to take this to management, to your designers, to your marketers and be like, page speed is going to be ranking and SEO purposes. This is huge. We need to cut back and just fighting an effective way to communicate that is difficult as you have found out. The whole classic triangle, you can have speed, cost, or quality. Pick two. You're not going to get all three. One of those things you're going to have to sacrifice and maybe it's two in a little bit. But there's some balance, I guess, that needs to be talked about openly. This just can't be done on the developers. Some guys, oh jeez, will come along and figure out a way to see your day. Maybe not. It works, apparently. It's a little flaws in physics. You can put some packets through a pipe. Exactly. Before the pipe blows up or the packets blow up, there's a little bit of that. Appreciate your work. Just want to say thank you. Yeah. Yeah. We just read that, you know. Testament. We got a little bit, you know, 70. 70, 70. Like you're saying now, hopefully we do do a little bit better. There's some options in this event. And then the second actually, probably a lot of people are going to be in school. So we did, you know, we put something great in the model. So I will definitely check it out. All right. Can we get the spice net? Yes, I will be putting those up on the session URL. I'll probably do that.