 Hello, hello, everyone. Welcome. Welcome to Admin Column's Lodge. My name is Milan. I'll be your emcee for the morning shift. Just so you know, make sure to wear this badge across. There's a We are currently at the number four, which is this one. Yos Lodge is over there. You pass by the smaller room and the auditorium. Lunch will be served, as when they serve, like for lunch will be served here in this area. This is the restaurant. So, yeah, make sure to wear a badge. Just so you know, your badge is also valid tickets to Zoom. So if you are like in between, you want to visit Zoom, feel free to. Make sure to honor the code of conduct, which basically, if you are tired, you want to bring the whole thing, just like be kind and be respectful to others. We are kicking off Admin Lodge with Jerome, like Jerome is the tech lead for a company called Green Digital. So if you're following along the sustainability, Jerome is the guy who you should definitely favorite it and check the website. I'm really looking forward to this talk. So from Yacht.com to Yacht.com. Hi, everyone. Yeah, very, very happy to be here. Thanks for making it along the very long way and finding this room. First off, I feel like I need to clear something up. Last night, when I was here at the dinner for the speakers and volunteers, I realized that I've made a faux pas by naming this presentation words that maybe not all English speakers might understand. So for anyone who doesn't understand what Yacht means and what Yacht means, I'm going to clear this up in the universal language of Yacht. This is Yacht. That's Yacht. Yacht. This one's Yacht. And finally, this is the burger zoo edition. That's Yacht. And this one's Yacht. So hopefully everyone understands now sort of what I'm talking about. And the title will become clear in a little bit when I get to it. So yeah, as Milan said, I'm Gerontul. I'm a tech lead at Holgrain Digital, which is an agency in London. We work with some lovely people like this. We work with positive businesses and charities and that sort of thing. So UNICEF, ECOVA, Oxfam, some of these are UK names that you probably don't recognize. But we also, alongside our sort of normal agency work, we have a focus on website for web sustainability. And we built this carbon calculator, which was in 2018 was the first carbon calculator for websites. And this basically, drawing from a body of research, gives you an estimate as to how much carbon, a single website, is responsible for emitting. And the last talk by Neust was absolutely brilliant for giving us a primer. And actually totally over my mind as to how much carbon actually comes from bots, because that's not something that we've been looking at. So a very brief recap on website carbon emissions. This background here is like a thermal image from a data center. Just a reminder that data centers are like huge energy guzzling machines. So in general, the internet and computing emits 2.1 to 3.9% of carbon emissions in the world. And that's above global aviation and the UK as a whole. If it was a country, it would be the sixth largest country in terms of emissions. I think what makes this really unconscionable and unbelievable is that the internet and computing have broadly been built in a time when we've been conscious of the environment. Other industries, it's a lot harder for them to switch and it might be harder for them to decarbonize. But I think that the internet should be something that we're building to be net zero from the beginning. So the most important point here is that our website carbon calculation is based on the amount of bytes transferred. And that's used as a sort of a useful estimate and a good way of measuring. And you can find out more about exactly how that sort of estimate is built on the website carbon.com. The happy coincidence, as you used to say, is that actually doing this work benefits SEO. You get faster page loads, it's good for users, more conversions, and you might even get cheaper hosting. So this is not something that we need to do against our other best wishes. This is something that's good for business. So how do we actually create a sustainable website? What can we do as builders of the web that will move the web in general in a better direction? I'm going to take you through the process of transforming a really, really terrible website. A website that does everything really badly and really wrong. And then step by step, we're going to bring it back into being a healthy, low carbon website. And along the way, we'll explore some tools and methodologies which you can put into place when you build or manage your own projects. Okay, so let's me tell a test subject. This is yuck.com. Yuck.com is a fictional and dubious startup. They claim to be the next big thing in environmentally conscious food. And all the big magazines are talking about them. They've just got a big A round of funding. They sound pretty cool. The truth is, they're more green washed than green. And while they're posing as an innovator in food tech, what they're actually doing is just selling people rotten food. And they're just trying to make some money off that. Unsurprisingly, their eco credentials don't stack up. Let's take a look at their website. Flip across seamlessly. Here we go. Right. So this is the website. This is a little demo website that I built. It's a fairly standard website. We've got a nice big header image. We've got a little menu here. It's got a badge. It's eco-friendly. Just trust us. We've got some badges here from different news networks. A YouTube embed. Explaining how their innovative food and spoiling process works. And then we've got some blog posts. The surprise investments of E. Coli and the DUT. Finally, some meaningless tagline. And we've got a form at the bottom. A gravity form at the bottom. This is, actually, I'm using all the markup from a WordPress sort of generated site. So it is what would be on the front end of a WordPress website. But it's actually a static GitHub pages that I've built. So these are the baseline stats. Speed index is kind of, as far as I understand it from page feed, is kind of like the user can see the first kind of piece of, above the fold content. And they're like, okay, this is the website I'm there. So the speed index is 5.6 seconds. I'm using the mobile mode for page feed. 60% of users are on mobile. So we should probably go mobile first. Time to interactive is 37.9 seconds. Page feed performance is really low, 38. Transfer data is 11.8 megabytes, which is huge. I mean, a good website should be like nowhere above a megabyte but probably more like 500, 600 kilobytes, just a standard website. And then down here, this company are lucky enough to have got some traffic. They've got 60,000 visits in the last year. And that gives them 186.7 kilograms of CO2 emitted, which is huge. Now after Yoast talk, I realized that this is probably far, far, far higher because I'm not counting for any lot of visits here. So this is probably 600,000 maybe more. Okay, so moving into phase one, where we're going to basically optimize the site. We're going to leave it exactly the same, but we're just going to make it work a bunch better behind our under the hood. So the first thing, and the most important thing I would argue in this whole process is to switch to efficient green hosting. Hosting that's powered by renewable energy. You can use the green web foundation to find the green host. Luckily, there's a lot of big hosts like Google who have renewable energy that they use to power their infrastructure. Alongside the benefit of this making your website green, which is great and will reduce the estimated carbon emissions by about 13%. The real impact here is that you have an opportunity to vote with your pounds and as more people choose green hosting, the less responsible host companies will be forced to follow suit and offer that as a competitive factor. As more data centers require renewable energy, in the areas that they're located that will create demand for renewable energy sources. So this is an opportunity to kind of punch above our weight and try to have an impact on the whole energy grid. So cloud-based architecture generally much more efficient. Big data centers are very efficient. One dedicated server, not so efficient. Think about all your third party services. So anything that you're loading on your site, you need to be... Anything that is on your site, you need to be responsible for the energy that's going into that and make sure you're caching. There's no point in generating a page that's the same every day. There's no point in generating it at the same time every time somebody loads it. So this step, we've not changed anything in the transfer data but the CO2 per page views come down and the annual emissions have come down from 186.7 kilograms to 161. That's a 13% decrease and all we did was change host. Okay, the next step is about thinking about the devices that you're serving to and the average smartphone requires 55 kilograms of CO2 equivalent to manufacture. The manufacturing of a single device including the mining of rare materials takes as much energy as recharging and using a smartphone for 10 years. Most people replace their smartphone every two to three years. So I think that... I kind of recently realized that this is something that we can actually have an impact on as web developers. I think we have a responsibility to support older devices for as long as possible to ensure that people don't feel pushed into upgrading their device. You know that feeling when you start... The device you're using, the smartphone you're using, like websites start to feel like they're not quite right and apps are a bit slow. If you can avoid that then people will keep their devices for longer. So I recommend... I'm kind of thinking this out at the moment but I'm thinking if we draw a line in the sound of the average browser I'm not suggesting we try and support IE 11 until the end of time. And then aim to support mobile devices for a minimum of five years and desktops a minimum of 10. There's no reason you couldn't go much beyond this but I think it's a good place to start. And this is not exactly the same as looking at browsers because some browsers might basically not be updated on a certain device and devices sometimes get left behind by the manufacturers. And then we want to design for the lowest common denominator. So rather than build a really cool site and a less cool version for the older device I think we should be keeping it to the level of the older device so that there's not so much of a benefit of upgrading. Alright, so now into kind of like code changes and things we can actually practically do on our websites. Image optimization. Images are by far the biggest kind of asset class on websites. And they're also the asset class that can balloon the most sort of dramatically. And I'll show you an example on yark.com. So, yeah, here we have like the three steps basically. You have to make sure the images are compressed. They should be using efficient new formats such as ADIF and WebP and SDG. And you want to be sure that your images are sized responsibly to the actual size of the box that they're in on the page. So an example here in yark.com is the network tab. This is basically the first thing I do whenever I'm sort of getting a new website up and I want to look at the carbon. I've probably got a couple of extensions here kind of filling this up. So this will be a little bit more data here than we really need. But the first thing I do is probably go here and list by the biggest assets first. And we see initially we've got this eco-like PMG which is 5.8 megabytes. And I really wish that this example was kind of ridiculous and was totally like fictional. But the amount of times that I've been on site and I've seen assets that are loaded like this is really horrifying. It's like just compressive. So we've got 5.8 megabytes, 2.3 megabytes. We've got YouTube loading in 500 kilobytes of script before I think you take to play. And in our images, the image, filter by images here, you can see we've got 10.9 megabytes of images loading in. So what to do? Firstly, we want to compress. I recommend that any like theme assets and maybe like the big assets on the front page assets try to hand compress them, hand optimize them because you'll end up with much better results. Photoshop is a good one. Squoosh.app is great and TinyPAG you probably know. For SVGs, SVG, oh my God, is amazing. You can download it as like a web app and then you just put SVGs into it and you can sort of hand optimize them and get them down just to the very, the most optimized before they start looking bad. And then for authored content, it's unrealistic to expect content authors to always hand optimize their assets. So we need an automated tool. And I'm going to talk about short pixel adaptive images, which is a WordPress plugin. Optimal does a very similar thing. This is SVG, oh my God, SVGO. And this is the Yup.com logo. The standard modification optimization only reduced the logo to seven kilobytes, whereas doing this manual process where you can basically drag this slide down and you drag it down to zero and everything goes a little bit janky and then you bring it up until it looks okay. And that got it down to two kilobytes. Okay, so formats. Image formats are really complicated on the web right now because there's lots of different browsers and they all support different formats. So we do need a bit of help here. Icon shapes and logos should be SVG. GIFs should never, never should you have an animated GIF on a website. You should have them in an mp4 format, they're much smaller. And everything else should be ADIF with a WebP and JPEG pullback. You can use a picture tag to have like a bunch of different image formats and then the browser will choose the one that it works with. Or again, you can use an intelligent image CDN, short pixel cloud for that polish is good. Cloudinary, I've also used. And lastly, I really recommend that you enable SVG upload in WordPress. I don't know if this will ever be in core, but a safe SVG plugin is great and it means that users can upload like logos or whatever in an SVG format. So I'm just going to install short pixel of active images. This is on every single website. You do pay for credits, but it's very reasonably priced. It provides an image at the perfect size for the rendered image container size. It's not just the size of the screen, but actually the box that the image is sat in. It crops invisible parts of images such as, you know, if you have a square shape, but your image is wide, it'll crop those parts of the side. And it intelligently reformats the image depending on its contents and the users browser. So basically it has one URL for any image and that URL is generated on load and then it goes away and gets whichever format you need. These are the settings. I always choose glossy because I hate the compressed look on images. The web should look beautiful. Here are the results from installing this. So this is quite massive. So down from 11.8 megabytes to 2.8 megabytes. And our annual emissions have decreased from 161 to 38 kilograms. 76.2% decrease. Can you ask me a question? Yeah. Aren't you outsourcing your CO2 emissions by using the short pixel AI? Yes. Yeah, but that will be another efficient server. You assume? Assume, yes. And I guess I actually can't remember off the top of my head whether they, what their renewable hosting is. But I'd like to say that I've checked. But I can't say for sure because I can't remember. But that's a perfect example. That third party resource needs to have the same credentials. I actually think that most likely that theirs will be a much more efficient setup than running them off the WordPress server. But I haven't looked into it. Thank you. I'm going to whiz through this. Basically responsive image sizing. You can either use something like short pixel, or you can use the WordPress built-in support. Or what I've done on this site, because it's actually a static site, is I've built these short pixel URL strings and I've put the width in here. W underscore 190. And then for each of those widths, I've used like the source set widths. And this works pretty well. I've actually done this before, but it's an interesting approach and you could obviously automate this. Make it more dynamic. Right, more stats. We'll cross over these only to hurry up. But we jumped up to 61 from 41 on page speed performance. And we're down to 1.65 megabytes. Lazy loading. If only half our users scrolled halfway down the page. Let's avoid loading those assets until they do. This happens automatically in WordPress. Like font formats, really simple. Use WAF2, nothing else needs to be used. And secondly, subset audio fonts. Font files come with thousands of glyphs for many, many languages. You only need the glyphs that you're going to use in the languages you use. This is an excellent online tool, Transponder, where you just upload the fonts, it converts them into WAF2. And then you can also choose which subset you want to use. Now don't know if you can choose multiple subsets. Obviously in the UK, we're happy with the Latin subset. But if you need more advanced glyph selection, you can use the command line tool called glyph hanger. Which is really great. You can actually do a crawlable website. Get all the glyphs that you use. So this is before. And we... Is this before or is this after? I've messed up. This is before. This is a font, which is 159 kilobytes. And overall, we're at 414 kilobytes just for fonts. Which is crazy. And this is after. About one of the top, the intersemi-bold, has come down to 21 kilobytes. And we're down to under 100 kilobytes overall. So sub-setting really, really pays off. And also, because font loading, massively affects the user experience. You know, while you're waiting for the fonts to load, everything looks wrong. Getting the fonts down really, really helps the user experience. It's for you. So now we're down to 18 kilograms a year. Down from like 186 or something. Very basic. Sorry, what was the tool that you used for fonts again? Transfonta. So yeah, this is an obvious one. I hope that basically any file of code needs to be crushed down, take the white face out. This is the CSS file before. And that's the CSS file afterwards. It doesn't look much for you, but it's 25 kilobytes smaller. It feels like a small win, but we're going for gold here. Okay, so unfortunately, as Yost was saying earlier, there's a lot of stuff, a lot of craft in WordPress, which can just be sitting there unused, and it's something you'll never use. So, for example, block styles, you might not be using all the core blocks. Our kind of process internally at Holgrain is we use some of the core blocks, but we actually use our own styling for them. And so we can just remove block styles. You've also got lots of custom properties that get added into the HTML now. And you may not use them. If you don't use them, you can just remove them. There's a whole load of stuff in WordPress that you can remove on many, many sites. And then another class of things that are unnecessary sometimes are assets loaded on pages where they're not needed. So it's very common in WordPress that you install a plugin and suddenly you have JavaScript and CSS files on every single page, even though you're only using that plugin in one view. That's sometimes not easy to fix, but in other cases, it can be a lot easier. This is a really sad example of something that was introduced in WordPress fairly recently. And now this array of SDG elements, which are the Gerotone filters or in images you can make images Gerotone, this exists on every single WordPress site now. And it's only 649 bytes, but when you think about the sheer volume of WordPress and how many visits WordPress sites in general get, the carbon impact of this little block here must be quite sizable. That's yuck. Okay, so I found a few JavaScript files and CSS files. I found a whole carousel library which was loaded in but wasn't used on the homepage. Very common. And so I removed those, I removed the WordPress craft and we saved 38 kilobytes. Right, so we're getting there. We're getting there. We're now kind of somewhere near normal. I would say this is still too high, 1.34 megabytes for a website, but this is probably quite average. I can't remember what the average is, but we're getting towards average. And from the beginning, 186 kilograms. This is the end of phase one. So we've now done all the stuff that we're going to do that was invisible. It was all just under the hood. We've saved 169 kilograms of CO2 per year just by optimizing, just by doing stuff the right way. And now we move on to phase two which is where we make some small changes, some design adaptations, and hopefully have some big whips. So one example which is quite common on WordPress websites is that we have gravity forms loading in. Now I think gravity forms sometimes loads in on every single page. At the whole thing we have some code that removes it from pages that it's not used on. So you need to look out for that. But also you will notice that, I think gravity here, we've got a bunch of JavaScript and CSS loading. And also we have jQuery loading in on every page. That's actually the JSON jQuery file that there is jQuery is also loading. And basically I just don't need any of that. So you've got a couple of options. You could either just use an HTML form. I recommend that. HTML form is a great plugin that allows you to just create a very simple form. It's still kind of user editable. So that's one option. And you also get the response comes into your WordPress dashboard. But if your form requires dynamic functionality or you need a feature from gravity forms or another form plugin, just link to it. So here we've changed it into a call to action instead. So then that will take you to a form page where we can load all that stuff. Another little reduction. All of these are up. So load functionality on demand. Don't just load it by default. So some scripts and components can be loaded on demand. Saving most users from loading them. Chappagets are a good example. Complex custom components and third party embeds are also good targets. So what we're going to do here is first, the YouTube embed. JavaScript without even pressing play. We just instead add a static image. I think this is actually nicer because you can really art direct it. And play button. And either when you press the play button we can remove the image and replace it with the eye frame. Or what we do on this website is we bring it up. This is very vividly. We bring it up. Here we go. This is the second version. We bring it up with a little light box. So we did that. And the second thing we're going to do is load the live chat from a static button. So basically instead of I'm using this free chat thing called talk instead of them loading in their whole JavaScript at the beginning I'm just going to make a little button to make it look the same, very easy. And then when it's clicked we load it in the script. You hide the button and it looks exactly the same. So this is a major, major big difference because mainly because of that YouTube stuff. So speed embeds has gone down fair amount of 2.6 seconds. Transferred data is down massively down to 0.56 megabytes. Now we're in this is good territory. We're in happy a happy place now. And annual emissions are down to 7.7 kilograms. So something we can do when we're working with the designer maybe is ask them to reduce the images in the design. So anything you can do to especially remove full weight images. So images that go right to the edge of the screen, bad idea because as soon as you go on to bigger screens they have to load like maybe a 4000 pixel image. So anything you can do to just keep images within a sort of bounding box is great. So we can really just remove unnecessary images. So in this example we've got this big wide image this was like loading in a 3000 pixel image on my retina screen and so what I've done here is I've halved it and then I've added this gradient to make it look like it hasn't got an edge and that's at least halved the size of this image. I removed the images from the news articles because they were just stock images and it was just a random thing here. You know sometimes you can just make things a little bit more typographic and that can be still quite interesting and grab the item. So some more wins here we've down to five kilograms reduction of 35% these lower amounts it's easy to forget but you're still making quite big quite big impact. Okay, from the files often you'll see like four or five weights loaded in so it's good to review whether you really need that extra lightweight. Here we've got a lightweight used for absolutely no reason maybe to prove a point and again the intercom was loading a lightweight as well and I removed that. We've got rid of 51 kilobytes Okay, so phase three is like really really going for it we're trying to get this down and first thing is we can just remove all grasp images, all pixel images and replace them with vectors if they use the decoration they can often be replaced with vectors or maybe like a CSS kind of design of some sort and this is an opportunity to stand out way too many websites just rely on like hazy pixel images and I don't think it looks particularly interesting so we're going to remove this this image and this is an illustration obviously this is fairly ubiquitous across the web this kind of illustration so maybe you can find something more interesting and in this one we're just going to replace a bit of vector image the badges they can go and we're going to replace them with some actually reputable badges you might notice now that the website is starting to look a bit nicer, a bit fresher and the word on the street is dot com and they're starting to consider that maybe their approach wasn't the right one and they're looking at taking the eco stuff seriously now right so we've got another 30% reduction there just from replacing the graphics with vectors obviously on a normal website there's probably more pixel images than that so your reduction could be massive right many websites don't require privacy friendly and much much smaller the analytics is like 17 kilobytes if you install it with GTM you're only 75 kilobytes found them another option and then plausible which you also showed earlier is less than 1 kilobyte and there are also a few good plugins to do the analytics just within WordPress just within WordPress another great option so we use plausible on a lot of websites and it's very very easy to install I also found that there was some random tracking scripts some overzealous marketing manager obviously I added every tracking script they could turns out nobody was looking at the data so we removed those as well and now we're down to 1.6 kilograms of emissions 0.03 grams of CO2 per page view right system fonts this is like hardcore mode system fonts are already installed you're going to have a tough time sometimes getting a desire to agree to this but they have no carbon contract they're already installed on the computer so using system fonts again got us down a bunch and I'll show you the top of that at the end dark mode this isn't something we can measure yet on the website carbon calculator but in the future this will be really important for the technology each pixel works like a light bulb so it uses more electricity the more bright it is so black screen uses practically no energy you don't have to use solid black you can still save a lot of energy just using like a solid green or a darker colour this graph just shows you the energy usage of different colours so as you can see even just using like a solid blue but max brightness is a big correction so I adapted the colour palette to yuck.com and we've gone with darker colours with bits of white this is the footer now and it's time to give yuck.com rebrand a rebrand they really desperately need so after some pressure from public health government officials they have decided to pivot away from rotten food to developing new farming methods and we'll now be selling fresh food from their eco farms aren't we all glad so this is the yuck.com site I have to show you this one on here there we go right so we've got yuck.com it's dark it uses vectors we're using the default mac os1 here and unfortunately this is the website carbon badge and at some point a result will come there and that's just it's very very very low carbon it's like 0.5 I think it's like 600 bytes or something I can't remember but it's a good way to raise awareness of the issue and show that you're doing a good job so this says 0.02 CO2 oh last stats we got down the annual emissions on 60k views we got down from 186kg to 1.3kg and page speed performance went up to 99 so this is something you can sell to anyone in your company the speed indexes both came down the speed stats both came down for one second and we have a nice result page on website carbon.com we're cleaner than 97% of the web pages tested thank you very much just last night last call email around midnight my client is screaming that they could not upload some image and they really need a blog post that image turns out to be like 5 megabytes they weren't screaming that's small so yeah I'm definitely going to show them yes I think it is do we have questions are you going to be sharing these slides? yes so we I think we're on the final slide but if I go back to slide 1 which actually is so all the steps I tagged them on the github repo and all those steps should be you can see them you can see them all happen but this is the URL here and that's got a link to this presentation as well sorry thank you for your talk when you said gifts on my website I have around 70, 80, 90 years because I'm creating it too I want everybody to download from GIFs to go to NVF4 as you said yeah I cannot slide actually you can't find an easy one how do you make them? with the camera and then it's like to convert this video to gith in what? it's online there will be an option but what you could do is just leave it as a video to compress the video down and what you need to do is there's a particular way of marking up the video tab so that it plays in line because you don't want it to have a play button and everything, you want it just to play yeah it plays people can model we have 20 years of growth there are ways to do that you can't do it in things like email but on the web you can make a video you can remove all the buttons and everything you can have it play automatically and mark up slightly I can tell you more afterwards thank you one small addition you already said Photoshop is a good choice I would say yes and no Photoshop definitely can produce really good images but only if you do the right option to save especially a lot of graphic guys don't know about this other save option save the web legacy it's either a save for web legacy or the new other save option but the standard save as JPEG will create message JPEGs but instead of 100% in Photoshop it is going to be 80% there are also some fun things you can do with GIF and PNG files you can kind of reduce the color palette change the dithering options and you get some kind of odd looking files that they're quite interesting looking and the file sizes can be really tiny almost just play with it you said SVG files you're not sure about coming to core there is a performance lab plugin as a performance team in WordPress and they are exploring at the moment if they bring this plugin save SVG to core maybe not using the sanitizing option but looking for script if the SVG contains script then they reject the SVG and if it does not contain any script then you can upload it I mean what good reason is there for an SVG to have a script in it that's just bad news isn't it you could have dynamic things in an SVG in an SVG that's next level SVG next level SVG but I had a question about the YouTube video because I find it has a pain a pain because users get just YouTube videos on their site so is there a plugin that just does that putting a placeholder image and when you click it loads is it rocket does it automatically for any YouTube it replaces it with a thumbnail and not the play button but it does a lot of other stuff yeah it does a lot of other nice things if you need them I have to admit that at Holgren we currently don't have something in place for that it's one of the next things I'd like to do there is something called YouTube dash light L-I-T-E I can't remember the name of the developer who made it but it's great and it basically it grabs the thumbnail image from YouTube so you've got to select an image and then it just packages it up in a really light way I just wanted to add to the short pixel comment I use short pixel as well but I use the simple item they have several plugins I use short pixel which is the one that generates the files on the server yes and then you have the choice if you keep the original ones or not it just stays on your own so you don't use the CDN I need to find out about the short pixel renewable energy that's a very good question but that's an option I don't see outsourcing as a problem we use cloudflare on a lot of sites and we'll outsource the whole html to cloudflare that's a lot more efficient than our service handling it but wherever you're outsourcing you have to be measuring that as well yes a problem with the GPR you embed YouTube and YouTube and then you use it and then you use it and then you use it and then you use it and then you use YouTube live and you get the cover image you have additionally a copyright problem because you are saving the image and you are not allowed to do that that's not your video so that could be a problem that's interesting I recommend embed privacy it's a tool not loading the video you just click and then YouTube play again so this will solve the performance problem and solve the GPR by the amount of questions there's a lot of knowledge in the range it will be a lot of sharing I have a question you suggested to support especially for support odd browsers support odd browsers or devices and we know that actually with new browsers versions comes always new attributes new tags which actually facilitates things that actually in the past we would have like write a whole script even for example lazy loading we have to make a full script big performance improvements so how do you actually balance between choosing odd browser and odd browsers and actually just use the new features I totally hear that and it's sort of something I'm trying to work out where is the balance I think and maybe this is because of when I started doing development and where we are now but I just have a feeling that with ES6 and things like lazy loading and AVIF support I feel like an inflex and grid I feel like we've with evergreen browser support and all of the features I just mentioned and many others like CSS variables I think it's not unreasonable to draw a line in the sand kind of where we are and say this web is good enough there's not so many things we're hacking now we're not hacking around trying to do things that we were doing before and actually it's quite efficient what we have in place is quite efficient it's not unreasonable to support from now and go forward and try to support as far back as we can now but I agree I don't think we should go back to a day before flex, grid, ES6 I'm not sure it's worth it what internet is versus and the last question from Maria please let's Jerome will be here so you can have more questions after you said that instead of big images there's a lot of photography and it's better that we have all the times the latest trends put this image, put the lobster images nobody's telling that what you're saying we are for example some kind of magazines online to do that it's not all about trends it's not anything about trends if you didn't put this then it's not trendy it's not fancy so we don't have online it's kind of what it was before so what should I do but they're not saying because of that it's maybe it's not going to look like other websites that's kind of the problem with the articles we should read more about that I'll talk to the designers at work and maybe they can make some articles about how to do a better typographic design thank you thank you so much