Performance Matters: Optimizing Page Load

3.3 Image and Webfont Optimization

Let's get this right Images are the heaviest parts of any webpage. As we can see from this chart Images clearly dominate in terms of Content Type weight, so it only makes sense that if we want a lightweight website. We need to start optimizing the heaviest parts first. Now there are lots of ways you can do this and depending on the file format you're using you could use a tool like TinyPNG or TinyJPG to reduce the file size of your Images while keeping the same quality. Then there's the Image size in pixels. And one thing you should avoid doing too often is scaling down Images. If you need a 100 x 100 pixel image, Don't use one that's five times bigger and then scale it down, because that's just wasted bandwidth. Then, there are Image sprites. As you've learned in the previous lesson, the fewer HTTP requests, the better. But what if you have a UI that loads a bunch of different smaller Images, like icons for example? Well, That's where it's good to use Image, or CSS prites. Take a look at this example from Amazon.com. This is Amazon loads a bunch of their Images. A master Image that contains of smaller ones. So, instead of ten separate HTTP requests, for example, the page makes one request. And then uses CSS to properly position and display each individual image. That's how Image sprites work. If you're looking for more info on the matter, check out the lesson notes. Now, apart from these techniques, some huge gains can be made when considering responsive Images. Meaning, images that are displayed across devices. ...from mobile phones to desktops. Here's the thing. Downloading a large Image on desktop on a wi-fi connection is fine. Downloading the same image on a mobile phone using 3G... Is not fine because, first of all, the Image is too big for a mobile phone. It will need to be scaled down. Second of all, traffic can be really expensive in some countries like we saw in a previous lesson. So, what you need to do is serve properly sized images to the correct devices. So, if you have a desktop, it's fine. Serve a large picture. If you have a mobile phone, serve a small picture. Don't serve a large one and then scale it down. To do this, you can use the new HTML picture element along with the sizes attribute. And you can also play around with some new image formats, like WEBP or JPEG extended. For more info about those, check out the lesson notes. And that's it for Images. Now, what about Web Fonts? Because Web Fonts are starting to get used more and more nowadays. And a Web Font is like a typical font only it's fine tuned for displaying on webpages using the font face decoration. Now, there are four main formats used for displaying Web Fonts. There is EOT, which is Internet Explorer only, or IE only. There's TTF which partially supports IE. There's WOFF which has the largest browser support and there's WOFF2 which is still being implemented. There's also a SGG format but that hasn't been supported in browsers for a long time so it's kind of obsolete now. So that's why you see Web Fonts come in several different formats, and that's how the font face loads basically all the formats. So they're compatible with as many browsers as possible. Now I'm mentioning these formats because they play a huge role in performance thanks to compression. More specifically Gzip compression. Now Gzip is a pretty generic compressor that works really well with text-based files such as CSS files. Scripts and so on. And of course Web Fonts. Now, to give you an idea of how great this is take a look at the following chart from Google developers. As you can see the compression can reach values of almost 90% on CSS. And at least 60% on some JavaScript files. And that's really, really good. Now some of the Web Font formats I mentioned are compressed by default. WOFF and WOFF2. EOT and TTF are not and they require, the server to have GZip compression enabled and apply it to those files when they're being served. Now when using web fonts you also need to be careful about, how many variance of that font you are including, and how many of the font styles. As an example, let's take a look at Google Fonts. Now, Google Fonts gives you the option to take any font and embed it in your page and use it like this but fonts are diverse they have a lot of variance to them. So let's have a look at a simple font here, open sans. It has 10 styles now we're gonna use an option called Quick Use so quick use allows you to select all of the font weights here so from light 300 all the way to extra bold and on the right you can see an indicator of the Page Load. So, if I chose like the single normal it's in the green zone, which is a very good Page load. But, as soon as I start adding more weights you can see that the page load increases here, so if I go on and I chose all of them, you can see the page load got from I think 15 to 150 here, and also, look at the character sets that you want. Maybe you want Greek, well if you do that, this is going to increase as well. If you want this, or Vietnamese, or Cyrillic... This is gonna go all the way to the right. So you need to be careful when choosing the fonts here, because if you go overboard with all the character sets that you want and all the weights that you want, you can End up with a really big CSS file that you need to load and that will severely impact your website performance in a negative way. So always just load the weights, the font weights that you need, and also the character sets that you need. Alright and that's a quick look at how to optimize images and web fonts for rendering. Now moving on to other common elements let's talk about Java Script and CSS files, and that's coming up next.