 Thank you. Hi, you can call me just Alex. It's easier. I Have been working with repress for many years and my main specialty is creating content platforms Today I want to talk about performance and especially about the phones performance In general the question about different optimizations is very popular right now. There are many speeches on the conferences Articles on the web even clients know what is this and why it's so important But back in the past the situation was totally different when we suggested to spend a few more hours for optimizations Usually our clients look at us like this like this Yeah, and just in the couple of years they start react like this What changes? Of course the growth of mobile traffic, but personally I think that the main reason was this thing. I Think everyone is familiar with this tool created by Google That analyzes website and give you some magic score and we all know how people are crazy about magic numbers So let's talk about performance About the optimizations for the people for the users not for the tools. Let's talk about phones. I Was not able to find Who created this quote, but I think he's 85 95 percent correct That's why the reason That's why the issue of phones loading is very relevant today, but what exactly is the issue? Let's say you use Roboto font on your website. It's the size is only 30 kilobytes not big deal But just Roboto regular is not enough for selling content. You will need bold Italic and it's hard to imagine Modern website without light phones and medium phones so it's 240 kilobytes in the total it can take up to three seconds to load on regular 3g quanta look quite a long time and It's only one font. Usually there are two three or more phones on the website So it's a big issue What actually? Browsers will do during these three seconds. There are two algorithms first is flash of invisible text it used by most of all Popular browsers The idea is that browser makes text invisible while font is loading so even if your site very light and optimized Your users will not Will not able to see content For a few seconds act more while can font is loading as you can see on the screen Content is loaded in one second, but we can't see it and agree. It's not the best user experience Second algorithm is flash of unstyled text. It's still used by some browsers The idea is that browser uses Local fallback font while custom font is loading in that case user can See content immediately, but when custom font is loading it will replace Fallback font and it's very noticeable Science to different phones have different sizes of symbols Whole layout will be changed So if you already started to read the content you will lose the focus and it's very annoying So how to deal with these problems There is no universal solution, but I can recommend three ways first one is to use website phones only Of course, it's almost impossible in our days, but in some cases is acceptable for example new websites second option is to use website font on first visit and Load custom phones in the background So on the next visit phones will be already in cash, and you would don't have these problems and Third option is to load phone progressively. I will tell you tell more about the last option First of all, we should have possibility to detect when a font is actually loaded. There is native CSS font load in API, but the browser support is still very bad Mostly developers use Web fonts loader maintain it by type it and Google Or more light-wave version from face-up server the idea is To use website font while custom font is loading So in other words, it just Emulates a flash-off and styled text. It's very important to find web say fonts Very similar to the your custom phones to reduce this ugly flash effect The best practice is To get font even more similar by adding special CSS properties But of course nobody Likes to spend hours for finding the similar font and specially for calculating these numbers I'm a lazy person. I don't want to do this But I want to make my products the best That's why I created a small tool where you can upload custom font and it will Get and give you a list of similar web say phones Also, it will automatically create all necessary CSS properties As you can see on the slide adapted aerial looks similar to the lot of font and take almost the same space So when you will have this flush effect, it will be not so noticeable. I hope my small presentation will Help you to make web a bit better. Thank you