 The presentation is about responsive, lazy-loaded, optimized synergists in Drupal 8. I wish I was there with you guys right now in person. Unfortunately, a combination of company policy and meeting in the high-risk group for Coronavirus didn't allow me to be there in person, so I'm pretty sorry that I missed it. I really wish I was there with you guys. I wish I had also mentioned the social yesterday, so how was that? I guess last year it was really, really good. We had a great time. I'm super, super excited that I've been in there to make it this year. Anyways, let's get started. So actually, why would we go through all the trouble of having responsive, lazy-loaded, and optimized synergists? Because it is a lot of work. So why would we go through all the trouble? The reason is that 39% of people will stop engaging with the website. If a synergist won't go, it will take too long to load. And that's a big percentage of the public that will want to be happy, and we don't want them to go away from the site. So if a synergist aren't really optimized and aren't responsive and lazy-loaded in some cases, and people might not stick to our inner website, might go away, which was a peril. And this representation is divided into three main sections. And we're going to talk about responsive images. We're going to talk about lazy-loaded images. And we're going to talk about optimized synergists. And the ways that we do this in Google Aids. And we're also going to talk about environmental impacts for synergists. But that will come to the end. Let's start with the public images. I guess pretty much all of you guys, I can see the device. I don't know how many people are there. And I guess both of you are developers. And you are front-end, back-end, designers, people that have been using Google. So you guys must be really familiar with responsive images. So I won't spend a lot of time explaining what a responsive image actually is. But for responsive images, there's mainly two large user cases into responsive images. The first user case is resolution switching. Which as you can see in several devices, we see the same image. But it's the same image. We have the same cross, the same dimension. And it's different files. The actual file that's rendered to the users. And it's different. So that would be actually the end of saving. And it's actually the end of saving space. And we actually end up saving. And we end up saving memory. The way that we do this, usually, I've seen that a lot of people in the Google world actually don't use this method a lot. A lot of people that I've seen comparing responsive images in Google and go straight to the picture element, because they have great points to find in their team. But a lot of times we don't need the picture element. Because the price of the actual responsive image HTML certification is sorted and size it. And that can be used in a single image tag. Which is what is done here. And so here we're going with sorted. And the reason why this is a good technique is because the browser actually picks the best source. So it makes an important decision based on the sizes you have or what is actually going to render to the user. And browsers are getting larger and smaller and this. And with sizes, we have a media condition, which is a subset of media query. We have the length and the view for which unit. And the way that we actually have this in Google, one important thing to keep in mind when comparing this is that no breakpoints are needed. So if you already have breakpoints defined in your team and use it for other parts of your site and you will select from the breakpoint group responsive image and you will select for the team or module of the breakpoint defined. And just use like that view point, the single one and you give it the option to select multiple width styles and width of sizes that you need. There you can have your size, which also up to stand in queries to have all your image up that you want in your single image stack. And you of course select the format image style, which will be the source. And this is the format, basically. And so great, so that is the way that we achieve and single image stack responsive images with source and sizes in Google 8. I'm just going to check out my clock, I don't want to rush. Great. So now we have the arbitrary action user case. So as you can see, this is a bit more interesting and the actual image is cropped in different ways and for different viewpoints. So if you're watching the image of a desktop or a laptop, you'll get a nice basket image. But if you're watching it on your mobile, on portrait mode, you'll actually get a portrait base, portrait cropped base image. And this is really good. And it's exactly what the picture, the picture specification was made. So here we actually have several sources that can have a media query, they have a source set as well. And you have multiple sources and you have one image stack that's required that can be configured out of a fullback. And on this particular technique, you're actually telling the browser what to use. So that's what it's used for, for the art direction user case, because we're specifically telling the browser what file to use in that condition. And you're allowing the browser to make an important decision, but you don't want to, because that's the whole purpose of the art direction user case. And the way that we get this approval is just setting up in the usual way that we would set up these possible images. Of course, our bread points need to be defined, and we need to select and our personal theme where the bread points are defined. And in this case, instead of selecting multiple image styles, we select a single image style and per view point, per bread point, and that is the way about new art direction in the way. So now we're going to talk about lazy loading and well, I'm just going to go over this, but most of you guys must be familiar with lazy loading. So in lazy loading, we only load the assets that are required for initial view, and we load the rest of the assets when they are visible. And for this now, a lot of the lazy loading techniques include having placeholders for images, so that when we actually scroll, the content doesn't really flow drastically, because we can send the initial two gigabytes of the image that has been the sizes that is set to the browser, and that way we can make low-quality placeholders that have the correct size, the correct dimensions, and that way the content doesn't flow drastically when they are loaded. And we can achieve lazy loading with two main techniques and two main ways actually. So what's popular right now is main difference lazy loading, because it's just been widely adopted by the most popular browsers. So the loading attribute can be set to lazy or eager, but I don't know who would want to set it to eager, because loading in sending it to eager means that everything gets loaded straight away, and maybe there's some extra cases where you might want to do this, but generally you would want to say this to let lazy, so that it actually doesn't load that image if it's not in the main viewport. And unfortunately, i.e. an edge or don't support it and make different ways of loading right now, so we can treat this as a progressive enhancement, which is not supposed to be supported by those browsers, but in time, hopefully, they will come around and use those containers so that they can have more support, water, and so on. So this is a couple of examples of a very much lazy loading look like. It's super simple to implement. We just need to add the loading attribute to our image disk or markup and on some cases, we might want to do the eager, but most cases will use the lazy loading attribute. And this, of course, is supported by the picture and element and when we use the lazy naked image to lazy loading our progression and response to images will use the actual attribute on the image, on the fallback image tag, not on the picture element of course and not on the source tag. We'll just consider the image tag. This is an example of why actually lazy loading can seriously save a lot of resources in the server. I will see later why that's good, why that has such an impact, but if we have, for example, a page that just loads images and it has, for example, 100 images, and we could have something like 10 megabytes of images that gets loaded straight away when we actually visit our website, but just by implementing the attributes we can reduce that to 250 kbs just for the initial images that are loaded and the rest are lazy loaded so they only load when they come to viewport and the amount of resources we can save for lazy loading is in cases like this and seriously, seriously drastic. Another way that and lazy loaded gets implemented is using something like lazy sizes which is a lightweight lazy loader written in vanilla.js It focuses on high performance. I use this quite a lot and I've gotten really, really good results with it. You just need to add the lazy load class to your images and it works really well and it actually uses a native lazy loading if that's supported by the browser. It's not a user support field but this enables us to add and make some loading to the full websites and not worry about certain browsers not supporting it. You just use this and everything that's done for us comes down to just implemented for us and it's great because it's written in vanilla.js and we all know that they query some layout so we should really start using plugins that are written in vanilla.js and I used to use blazing a lot but now we've moved on from lazy to lazy sizes and the lazy module has done the same so the one good way to implement this is with the lazy module you'll have lazy loading as a formatter and it works pretty well and you'll be able to save your client's or your website a lot of resources by implementing this. Now we're going to talk about optimized images so for everyone that is a Drupal guy and this image must be really familiar so this is a standard image that gets used to a placeholder image and will create a very rich style so one of the most common ways that we optimize images in Drupal is through the image toolkit and we have by default we have gd2 the ph2 library and the gd2 toolkit is active for more systems and can use it for any additional settings and that's why it's a Drupal and you don't have to basically know anything virtually it produces everywhere it can just be turned on and it works and it works really well it has WebP supported and it's a really good stable library but it doesn't give us the best compression out there there's better toolkits and one of those toolkits that I'm talking about is image magic image magic provides a fast simple way to automate image resizing and from the tests that I've done it's spelled in image magic on a DPS and the Drupal model did and I saw a decrease from 20 to 40% in image sizes the standard gd2 toolkit with similar settings and so that's a lot and I highly recommend the image magic to anyone that can use it unfortunately and some 14 providers don't provide that and some 14 providers don't allow you to install libraries in your servers so hopefully and they'll provide image magic over and before you and the problem is that we should talk carefully about compression and there's many many tools that I've tested for compression and for your PNGs and for veritex I have my recommendation on the best tools available 8.0.2 then is a utility to optimize jpeg files I thought really really good results with jpeg.0.2 out of all the jpeg-based abilities for compression and this is my pick it's the one that gave me consistently better results than everything else the average percentage that I saved was of 71% which is really really good and I highly recommend jpeg.0.2 I know that it's the same case as image magic that this is not provided by all 14 providers and some 14 providers and have some alternatives to jpeg.0.2 but in jpeg.0.2 and jpeg.0.2 I will talk about that and the one tool that gave me even better results is PNGQuant PNGQuant is a utility a library for lossy compression of PNG images actually jpeg.0.2 is lossless and lossy but of course if we want a decent compression we have to go with the lossy settings and people with the lossless will get really big cost licenses and for example and actually with the gd2 tool kit and sometimes if your images are already like in custody like for the shell like the city code and sometimes the images that are created by the gd2 kit can be bigger in file size so don't be careful with that sometimes you want to optimize an image and you add an image style but it actually makes the image bigger so be careful with that and investigate set benchmarks and test your images and see how well your compression is doing and I will give you advice to consider changing your tool kit if you need to especially on out-of-home websites and PNGQuant gave you great results on all of my tests it consistently gave me an average percentage of over 80% on the tests that I performed on the benchmark and I thought it was really good and I really recommend PNGQuant as a tool for PNG long-term compression one that I thought another tool that I thought I might talk about was tinypng tinypng is really different because it's actually an external image processing service it's actually paid for and it's pretty good they have a free account they have 500 compressions they let people for 30 per month so they have an API they use an API team all of these compressions have been enabled have been tested and have been improved through the image optimized module which is a great module that gives you different pipelines to optimize your images and you can set your pipelines you can set it side-wide or you can set it curve image style and that single model is the one that will have of course a standard of minorities is what gave me the best results and what really helped me get a better score for example just like light health and paid-to-speed tests so I really recommend if you're serious about optimizing images using the image-optimal model and save lots of pipelines for different compressions tinypng was good not as good as PNG one but on average and I saved 73% for tinypng and I haven't used a premium service or just a free service and it was pretty standard setup so it was an easy setup and one thing about optimizing images is the file type so we already know about JPEG progressive JPEGs and but one file type that have been getting a lot of attention lately is those WebP formats and I'm on the external WebP right now I kind of was on the fence but I really like it now and it's capable of reducing the image size by 20 to 50% and the WebP file type can actually be used with image magic image magic and gives you a new convert image style action and when you convert to WebP format you can add a step on the image style convert it to your format and it works really well if you're not using image magic and you use GD2 there's the Google modules that enables WebP for you if your server supports it works the actual GDT module works really well with WebP and the module works really well with the technical results but actually using WebP through image magic gives me a lot better results of any compression than using the GD2 there was a big difference cool so now we've talked about images why it's important to not respond to images and have lazy loaded images and optimize images we saw the different ways that we can achieve this the different techniques the different tools and the different ways to achieve this in Google we also saw why this is important because our users really care about this and one thing that we're going to see now which is really important because 70% of the total current footprint passed by technology is due to data centers and the electricity that is needed to run these data centers is near 30 billion watts and these servers waste 90% of the energy they use because they run on full capacity all day long so that's why we need better tools to optimize our content and that's why having things like lazy loading is so important because we don't want our data centers to be loading things that are never going to be used are never going to be seen so that's why lazy loading is so important we actually use energy in data centers that is good for the overall environmental impact for websites there's actually several tools that you can use to test the environmental impact generally if you get a good performance for a logic house I would say that's a good indicator that your current footprint is not terrible that current footprint of your website is not terrible but do get it tested what results you get and I see also that optimizing it using responsibilities, optimizing your energy will give you great results and will drastically reduce the environmental impact of your website or your app and data centers will soon have a bigger current footprint in the entire aviation industry so it's a big problem and it's for a problem so we need to find ways to make this better the internet actually uses 10% of the electricity so sometimes you don't really think about it you don't think that both types of data centers have some environmental impact but they do have a big environmental impact and we need to find ways to make this better and the average page weight has increased by 34 to 35% in the last three years and 70% of that is due to the heavy rain in this so this is actually very worrying we need to be doing better but there's some things that we can do especially and are related to your hosting providers so I'm actually using this tool of your website and your application so these are my recommendations for your hosting provider so if you see anything here that your your hosting provider doesn't support, you might actually want to talk to them about it and the more that we pressure and hosting providers to actually include these tools, the better that it will be for the overall environmental impact of the internet so and support damage magic to it and not all hosting providers do that and some do for example, I know APIA which is pretty cool and you just need to find the user approval of the internet module you just need to add the path to SDS and treatable and you can find that information on APIA and if you're installing your server with binaries, you just do version which I will let you know what's going to happen and another recommendation is to support jpeg options and PNG plans, this is actually a bit different because I know that the major and true for hosting providers don't support these and so it might be good for all of us sharing them into supporting tools like these because for my benchmarks, I need some hosting providers to support alternative tools but have a much, much lower and compression rate so if we want to get serious about really optimizing limited we need to let our hosting providers know that we want tools like jpeg options and PNG plans that we are really going to support with tools and we also need to let them know that we want to use WebP as a power supply because it will use this and the types of images greatly and actually more hosting providers are full in this space but if your hosting provider doesn't support WebP you really want to talk to them about it and the single biggest thing that we can all do and the single biggest thing that any website can do is switch to renewable energy data centers this is easier said than done of course for example Amazon then Amazon actually I think it was 2 years ago that they stated that they were 50% renewable energy and that they were committed to using 100% renewable energy on the data centers but that hasn't happened yet and we were waiting for that to happen I wanted to pressure their partners to actually make that happen so a lot of times you might not know this but your hosting provider actually uses something like Amazon which might be in their partner or their server and those servers don't use 100% renewable energy we need to pressure all those our hosting providers to start using 100% renewable energy because that's the single biggest thing that we can do and to mitigate the environmental impact of a website switching to a renewable energy so this is just a list of what you might want to run by your hosting providers and if we all pressure our hosting providers you might actually make this happen let me check out so we have about 10 minutes for questions so and that's it very much listening to my presentation and if you guys have any questions have you listen to them thank you very much do you have any questions have you ever used Kraken IO have you ever used Kraken IO excuse me I'm having a really hard time listening can you repeat the question please have you ever used Kraken IO yes I have used Kraken IO and it does have really good results and I think and yeah I think it's one of the tools that you guys need to have here and yeah I mean I'll post I'm working on a blog post that's related to this so I'll post on my benchmark and I did a benchmark for Kraken and I'm not sure you guys what were the results but they were generally pretty good but not as high as other experiments anything else no can you share his presentation this is all going straight up onto YouTube we'll probably be on later today it will be yes okay I will post my my slides and I will add some links so this will be online and I'll make sure I post some of them you can all check them out and as soon as my blog post is ready I'll share with you guys in the Google UK Slack channel so you guys can check out all the benchmarks with it okay thank you very much