Powered by RedCircle

Performance and Nuxt with Jakub Andrzejewski - VUE 211

  • Guests : Jakub Andrzejewski
  • Date : Mar 14, 2023
  • Time : 1 Hours, 12 Minutes
Jakub Andrzejewski is a Senior Developer & Dev Advocate at Vue Storefront. He joins the show alongside Steve to talk about performance in Nuxt and Vue. He begins the show by diving into the concept of performance, how to maintain a high-performing website, and providing the best user experience

On YouTube
Performance and Nuxt with Jakub Andrzejewski - VUE 211

Sponsors


Links


Picks

Transcript:

Steve_Edwards:
Hello, everybody, and welcome to another exciting episode of Views on View, I am Steve Edwards, the host with the Face Book Radio and the Voice for being a Mine, But I'm still your host with me today we have our special guests coming all the way from Poland. Jacob and Dreevski think I know I mutilated that last name. Sode. Say it again, so everybody can hear it correctly.
 
Jakub_Andrzejewski:
Yeah, so it's Yakob Andreevski,
 
Steve_Edwards:
Andrewevski
 
Jakub_Andrzejewski:
Like the full Polish name, But you can you can contact me or ask me or name. Basically me, Jacob Andrevsk, Is I think much easier for everyone,
 
Steve_Edwards:
Very good, and I think it's also worth noting that with Jacob today we have his two cats. we have, Felix, and Bush. Bush is recovering from some recent typical feline surgery. Shall we say? So she's been fixed and so can't see her. But Felix is a very large tabby. He's He's a bad
 
Jakub_Andrzejewski:
M.
 
Steve_Edwards:
boy.
 
Jakub_Andrzejewski:
H.
 
Steve_Edwards:
as Jacob says, he looks good and he gets away with things because he's because he's so good looking, and Also, as always I'd like to welcome in our studio audience. He is here to cheer us on. Thank you, thank you, thank you. you. The nice thing about this audience is they always cheer. They never be. So that's why I like them so much.
 
Jakub_Andrzejewski:
Whatever you say they
 
Steve_Edwards:
That's
 
Jakub_Andrzejewski:
are doing,
 
Steve_Edwards:
exactly right. It's just an amazing coincidence. Um, So with that we will delve into. Oh, I'm sorry, before I forget, and Jacob is coming to us from Poland and tell us the name of your city, so I don't mutilate it.
 
Jakub_Andrzejewski:
So it's rot, but you can save rods. Love.
 
Steve_Edwards:
Love, as
 
Jakub_Andrzejewski:
it
 
Steve_Edwards:
in
 
Jakub_Andrzejewski:
can
 
Steve_Edwards:
rust,
 
Jakub_Andrzejewski:
be easier
 
Steve_Edwards:
love.
 
Jakub_Andrzejewski:
as well.
 
Steve_Edwards:
Yes, he was telling me that around his city they have signs that help make clear the pronunciation for the turf that come through, so they don't mutilate the name like I just probably did. so
 
Jakub_Andrzejewski:
No worries. you did great.
 
Steve_Edwards:
so today we are here to talk about performance in particular in next, and view as with any job of script tool. Sort of the It's always. I don't think it ever goes away. Is always sort of a hot topic with Jobiscript frameworks, Uh, whether it's service Ide stuff or whether it's spas that are completely in the brows, or just because of how they downloading Jobscriptor, the brows or impacts speed and performance of your of your website. So what we're going to do is talk about performance. In general, we'll talk about some of the tools that are used Nd. Then we'll get into specifics of some option And we have for improving performance in view, and next ice is a Iewpodcast That seems like a good thing to mention, so I could take it away.
 
Jakub_Andrzejewski:
Sure, so talking about performance is usually a quite interesting thing to do because performance is one of those area topics or general topics about developing modern websites, similar to concepts like Accessibility, securities callability, So this is like a concept that it's not like bull in value that you can just. and And it just works out of the box. All of these things are processes. so in order to have a performance website, Good performing website, what you need to do is basically take care of this performance from the very beginning of the project. So in order to have performance store, you can just know, work on your like commerce stale site. You can work on it for a year without measure Ring or checking the performance and then going life into production with it and then verifying whether the performance is good, Because then it's just too late. You have made too many changes and too many you have developed like the whole application from scratch, And basically it's too late. so what you can do instead is umyoutelize, the the culture of measuring and checking the performance from the Beginning of the project development. How to achieve that And what are the metrics that you should take a look at, And what are the say? possible? improvements, or yeah, improvements That that can help you have a better performance in general as well as models and plugging. I would probably talk about more in the next part of this of this podcast, so maybe I will start with something something general in terms of pure Formance, So how I understand it? How I understand this, This this topic or term. So, considering the performance we usually think about like the lighthouse, score, What we do is we just round the deftose in our browser and we are just running the lighthouse, which is one of the tubs there, and we can just select the performance tub, and we see After a few seconds when Website was outdated, outdated the out. it was conducted on this website and we see the result and we usually only take a look at the this general overall number and we see, for example, that's say ninety nine because our website is really performant, But this number can be misleading because is ninety nine good? or let's say different way, Is the score of seventy performance good for block, And is it good for a commerce website? Because the problem here is that we have this common number that we are using to measure all types of websites, all types of where Uplications, when in reality those websites can work in a very different way, so basically you can have commerce that is fetching data from the commerce platform, like that about products, categories, promotions, users, and a lot of stuff, And you can have a really static block where you have free posts or free, like, Read me files, not read empty, Sorry, marked on files that are then trans transformed into like a tame files. And is it fair to compare this commerce website with this block and just say this commerce is pretty slow. It has only seventy points, and to be honest, having a score of seventy in commerce is quite good. like you would like to have this kind of score, especially on mobile phones, because on mobile it us Much much worse. so for me the performance is not about this magic number that we. I think majority of the world is now seeing as the as the like is it is this website performance or not. So how I trade performance is usually about the users. So if the website has a good score when you are testing in locally Light House, it can. It can have a great score. It can have ninety nine in every possible, Let's say conditions right, different pages, different devices. It can have like ninety nine, but you have to remember that if you are doing this kind of test for for this website, what you re doing is that you are using your local machine, so your like sixty four Gabiigabit bit. I don't know how to pronounce this Rum device can basically achieve a score of one hundred, even on a very old Word Press website without any modifications, because it has a lot of computation, power, or or, or resources that it can use to load the page really really fast. but reality is that in big projects usual Have also those users who don't have such a good devices. they're using old phones that they might be using slow, let's say free G connect, free G connection, Internet connection, And for them, what you will get is they will have much worse score, even this light half score. So what Google and, and let's say, other folks in the Web performance area Always try to, to, let's say, educate is that there are two types of data like performance data that you can get and analyze. You have the love data, and you have the field data. So love data is for example what you can get from running Light house in your local environment for your project. just on your machine. This is only, Or your device, with your computation, resources, with your Rum memory, and so on, and so on. And this is the result, and the second one or this love data can be also achieved by running a light house test in the browser. This is like the second, not the in the browse but from the website, because you can also run it programmatically from from from the website to out your website. So this is one type, The second type, which is called the field data. So the field data is the data that is coming from the actual users. So what Crown is doing is they have this thing? It's called C, r u, X, cracks. I think this is how I come is pronouncing it, which is a Crow user experience. This is the the longer version of this short short show shortcut. let's say shorthand. So what it does? it is storing the data about different web publications that is retrieved from the real users who are accessing this website. So basically what it means is that with this c, r u, X, what you get is the data from the real users. So real users who are accessing your website and how they? What is the actual performance, not The performance that you are doing with the auditing tool, like with Lighthouse locally or through the I. A. Under the website is how your users are experiencing your website. So this is, I would say that whenever you can use the field data, this is more appropriate for the users who are using website than love data. Bat. This is not only about this single number like the overall performance score, because there are also several metrics that you can use or yeah, you can use basically to validate whether your website is performance or not. So you have things like Coral vitals and I'm sure that majority of of the audience will know what I'm talking about. You have things like largest Content, full paint, you have commolative, communitive, lay out, shift clas, and other things as well. And those metrics, the are not single number like seventy eighty ninety nine. They are values in seconds, or they are also neumeric values. In some cases, that are selected by Google after a lot of Res, Search on modern websites how they behave. How much time does it take them to load certain elements? So if we take for example, the largest content for paint, so as its name suggests, suggest is this main element on your page on your com page. How much time does it take for this element to be loaded? So if you have a lot of scripts, if you have a lot of things that are blocking the The request for this particular image, you will have war score, and also your users will have worse scores or worse perceived performance. Basically, if we take a look at Cos, it's about the stability of your website. It's not. I would say. It's not as related to the performance in general, but more about the experience of using the website, because There are many examples of, but less when you have this home page and you click on the let's say check out button or card button, and then the the adder appears and is moving the whole page down, and you click on the art instead of the cart. So we know examples such as this one. So cells, so shows us those kind of issues how stable our website is when it is first loading. So this one is not us about performance largest content, fool paint, but it's quite useful to have or to deliver better perform litter experience, Excuse me to the real users, So we know about now, we know about The performance we know about metrics. We know what we should look for in terms of the metrics, like feel that a versus lab data. So what tools we can use to like measure the performance? So we know already about the lighthouse. I mentioned it, and I'm sure that all of the audience will know about Lighthouse. It's very simple tool to use which are Click out it, and we see the result in the browser. We don't have to go anywhere else. But Lighthouse gives you only the results that are coming from your website from from your device. Sorry, so you are doing this out locally and you just see the result. Don't get me wrong. Lighthouses is a really great tool and you should be using it because it delivers many many men A useful information about your website like. Apart from just the numbers about the general performance, result about certain vitals. What you get as well is things like diagnostics and opportunities. So these kind of things are usually the things that you should fix, or are considered to be things that could Prove your performance. So basically by your running this lighthouse test even locally, what you get is a sort of check list of how you can make your website more performance and I believe that it's really good developer experience and you should be using that. However, as I mentioned, you shouldn't be treating this as a single source of truth. More like one of the tools that could give you Some knowledge and some data, but there are also other tools that I am using on the daily basis, and one of them is Page speed insights, So Pa. Speed insight is using Lighthouse under the hood, and it's also using this Cr U. X like cracks, so it is combining both data, both love data and field data in one, let's say report, so that you can see that Difference between the data from lighthouse, So the data about your website, that was, say, audited, or the all it was conducted on the website in an isolated environment, and in the opposite you can get the data from the real users, and there were many interesting scenarios there because for some, for example, the Our clients in Starfonthe componyt that I work for, we had cases like the result on the um, on the lab data. So in Lighthouse, in an isolated environment was, let's say sixty seventy, and for the real users, it was like eighty or ninety. So this shows that majority of the users who are accessing this website based, We have very good devices, so they don't have to take that much about supporting like slow mobile devices. And in the other case, what we had an interesting problem with was that in the lab data the c, l, s. so the stability of the website was The value of this metric was zero, Which means that the website is stating there is no movement at all, And Because of that and in the love data in the field data, sorry, there was like twenty or thirty like this. This magic number so it shows that there is some movement so we started figuring out what could happen because in an isolated environment the website is stable. Like it's stated, it doesn't move, and for the real users it was moving for some reason, so I started trying to figure out what Could be the issue, Whether this is some kind of uhwebpluggings that are causing this this kind of switch or shift, and unfortunately we haven't found an answer for that, and the next result of the creeks shown that this ero disappeared. so partly we are happy because there is no mor Error, but party were also unhappy because we haven't found. We haven't fixed it, so it can probably appear one more time in the future, So we have tools like Lighthouse, and Pay speed insights, but there are also many many more tools like we pace test, like speed car, There's a lot of tools that are much more advanced and will give you much more data that you can ano And see where or in what cases your application is is failing in terms of performance, so those ones are more advanced. so from the very beginning I would recommend to try Lighthouse and pave speed insights, because they will do their work and you will have at least some some feedback about your performance. But this is something that you should be or should be Sing on the website that is already running like in production patspetensihtes. Unless you are using some kind of a pi, you have to use on a publicly available website, so it has to be deployed. It has to be in production. Lighthouse, you can use even on your local environment. You are starting your development server, and you just run Lighthouse from your brows, So you can have in local environment and in the browser. However, there are also other scenarios where you can analyze the performance as well, which will help you achieve this more or less performance website. and one of the ideas that came to my mind in terms of having this additional layer of performance auditing was to actually implement the I C, D. like continuous integration continues delivery process in next J, S. By using Lighthouse, So how it works is Basically you have this p M package called L, h, C, I. I hope that I pronounce it correctly, So it's lighthouse C. I, and how it works is it works as a common line. So you just run l. h. C, I run. or I don't Exactly remember the command, but I think it's it's run. and you just pass it a configuration file where you specify what what page you would like to, all the what device you would like to use for this O. How many runs you would like to take? Like, let's say free, and the average, the score will be like average of free results. And you have many more configurations Options there. And what it will do is it will do a light lighthouse test from your command line. So do you all just receive the result in your your terminal? Basically, so what I've thought about is that in order to have this process of continues, let's say performance auditing. this, I call it is, you can implement it from the very beginning of the project development like one of the first steps, Generate a view or not project. And the next thing you do is you add this H, C I package to your to your project. You add this get ha, get lap, know betbacket C I script that allows you to perform or conduct performance outiting with the Lighthouse package after each pull request, after each To the the to the main main branch, so that after doing this, you get the the results. Basically whether this new p R, for example, new pool request broke something, or whether it's better for performance. So this are one of the let's say solutions on how you can have this continues performance.
 
Steve_Edwards:
Yeah, I'll jump
 
Jakub_Andrzejewski:
A
 
Steve_Edwards:
in here
 
Jakub_Andrzejewski:
Ink.
 
Steve_Edwards:
for a minute and give your voice a rest there for a second. I'll point out that.
 
Jakub_Andrzejewski:
Who,
 
Steve_Edwards:
Yeah, what you're describing it as, I think, I think a fairly standard set up in terms of using continuous integration to run your test for you when you commit in my day to day, you know, we managed a fairly large view slash Laravell, Ap, And that's how we have it set up with circle C, I, in that it's connected to the Githeprepos, So whenever we push to the rip, whether it's a new branch, whether it's an existing branch, you know, whatever it has to run through all of our test and we have a whole bunch of tests that are front and test this, where as unit, test for the back end code and that, and then, in order for the code to be deployed wherever the situation may be, whether it's to prod, or whether to stay Excite, all the tests have to pass, and I'm sure that's configurable H in the C. C. D. I wasn't the one who set it up. Not much of a debopsguy myself, but that way you make sure that you're not deploying anything that's failing test. because of it's going to failure test, and more than likely it's going to fail for a user to so Seh, this is a pretty standard set up and very very useful In that does for you automatically, and you don't have to go into your command Line and say okay, run these tests and run these tests and and then do it. so, uh, anyway,
 
Jakub_Andrzejewski:
So I would say that it should like performance. Old thing should be a process in developed in your in your project from the very beginning, the same as you need test, like, and to a test like preter, as lend things that basically are doing work for you. You don't have to. The only thing you have to do is to fix the issue when it appears, So if you have this kind of Um, continues integration implemented from from the very beginning, you have things like assent and prettier, so cold, styling having the same, let's say, landing settings for the whole project. So every developer is developing, they call the same way you have prettier, matinal depute, you have unique test. you have end to end test, So it is checking whether you may be something. Hang in your application From now on this one, let's say function or method is failing. So as you mentioned, it can fail for you, and it will most probably fail for the user who is using this functionality. So it's the same for performance auditing. If you have this kind of ci process, you will know before deploying to production or deploying a new branch that something is failing. Of course, this is not like one hundred per cent correct. You might have some like false positives for that, but it's better to warn you and just you know, check it out and discover that it was. It wasn't correct than the opposite way, So believing that everything is perfect and then figuring out that it's really bad and you have to do like re, engineering from from scratch, Going backward like three months.
 
Steve_Edwards:
So when
 
Jakub_Andrzejewski:
So
 
Steve_Edwards:
you let me ask you this,
 
Jakub_Andrzejewski:
this is my
 
Steve_Edwards:
let
 
Jakub_Andrzejewski:
summer.
 
Steve_Edwards:
me ask you this question real quick before we go farther. you know, with Um, with front and testing and testing, as you call it were, Play right at dusk, Cyprus. whatever, right you've written your test. Okay, I want this to do here and I push this button. It goes to this page. I expect to see this text. If I click this button, then you know so on. So you have, and then your test. You say I look. I look for specific things. And if this text isn't here in this place, then it's a failed test. Right and the same thing with you. It testing where Okay? I'm running this function and I expect this value to be returned here that it should be in array with so many items. Whatever the case is right, those are pretty.
 
Jakub_Andrzejewski:
Hm,
 
Steve_Edwards:
I don't know what the term is. I'm looking for fixed criteria. Performance testing seems to me to be it would be a little more ambiguous, right, so I guess my question is how do you set standards for something like this to tell you that something s failed Or that something past? Is it you know? it's a seventy lighthouse score. You know, maybe, or it's certain score on on the crux test. Or how do you determine what's what's a failed test? And I'm sure it's going to be very subjective depending upon the developer the site. the tools that are being used correct.
 
Jakub_Andrzejewski:
So very good question. I wanted to talk about it, but in a few minutes from now, so basically with things like lighthouse, you can set a perform some thing that is called performance budget or budgeting in general, And these are the set of values that you define. And whenever the result is, let's say below certain certain value that you define in the performance budget, This Action will fail. So it's something like with test, if you relate a test and it doesn't much like the expected value is not. The received value is not the same as expected value. You are failing the test in here. The expected value is that, say, largest content for paint below To and hall. Second, this is like, considered very good or very good in In core vitals. So you said this performance budget for largest content foot paint to be no more than two and a half seconds. So whenever a test is being done being conducted and the result is bigger, let's say three seconds, this test will fail and will show you okay in this pool request. the largest content foot paint is worse than previously. Of course, this can be a matter of. I would say Outside Involvement. I'm not sure the the word in English, but let's say that you have this test that is being conducted, and the machine or the machine where this test is conducted can be affected by traffic or by different test, and so on, and so on, so this result might not be like one hundred percent correct. So what we do to have this score Better or more? Let's say correct, is we do multiple tests at the same time so we can configure this light house, C. I, to tell him, Okay, you will do the performance outetting for this website and you will take this performance budget that I'm sending you from the from the configuration file, and I want you to do. let's say five tests, and get the average from them. And if the average is above two and a half seconds, there is a probability that something was broken in the p. r. and we should take a look at it, So this is how how we are working with performance budgeting to have this kind of assertions for performance outetting with those like Light house, for example,
 
Steve_Edwards:
Okay, yeah,
 
Jakub_Andrzejewski:
I don't know
 
Steve_Edwards:
no,
 
Jakub_Andrzejewski:
if
 
Steve_Edwards:
that
 
Jakub_Andrzejewski:
I answer to a question
 
Steve_Edwards:
perfectly,
 
Jakub_Andrzejewski:
or
 
Steve_Edwards:
Yeah, That answers it. I figured it had to be something like that. That's interesting that I hadn't thought about that where you take average from multiple tests and put them together as compared to hard and fast. Okay if it passed this and it didn't pass, S. it's failing.
 
Jakub_Andrzejewski:
So. right now maybe I will switch to to the second part of the topic that I wanted to talk about is to get away a bit from the performance and move into my favorite Frfrimork, which is next. Um. So what I do in next jes, is I am a ambassador and insider, So it means there are two different terms for Next Ambassador is the content crew, Or, while the insider is like contributor, so someone who can contribute to the core framework is developing the moduals that you can use for for your upcoming next application, and so on, and so on. So I really, when I first heard that there is, there are plans for Next Free. I'm sure that majority of the users right now is using Next free because of the developer experience, because of the vet support, which is fast Out of the box, and so on, and so on. But I came from the world of next two, and especially very slow next two applications. So when I first heard about Next free, which was really fast out of the box, I instantly fell in love with it and I was like working with it from the time when it was first published. Like the The, not even like really candidate version, But those first public versions of No Free, which means that almost every modele and every aspect of the framework wasn't working, so you had to figure out things by yourself. And what is especially intriguing and interesting for me in terms of next, is that throughout the, I think there was like fourteen release candidates. I thing for the Nex, Free, I developed a next module before there was the air. One announced, So in the wild times of not even an arc version of Next, and since then to the R C fourteen, and actually the stable three point O version of Next, I only needed to do one change, which was basically change Between private, ran time confu, to run time configudot, private. So the change was like one liner, and I was so amazed that the guys from nags, like from the court team managed to do things like this in a matter of fourteen release candidates of the stable version of nags, So it's amazing stuff like Cut the
 
Steve_Edwards:
Yeah,
 
Jakub_Andrzejewski:
corn and for Daniel, for
 
Steve_Edwards:
Yeah, we've
 
Jakub_Andrzejewski:
pa.
 
Steve_Edwards:
had Daniel row on here two or three times. I think over the past year to talk about next three, him and another guy named Drew Baker, who's a big next user of his agency at Funk House,
 
Jakub_Andrzejewski:
Hm,
 
Steve_Edwards:
So yeah, if you want some, they really got into the nittygrity of some of the performance. I think Nipedro is the engine, If I remember correctly, that they're using in
 
Jakub_Andrzejewski:
Yeah,
 
Steve_Edwards:
an
 
Jakub_Andrzejewski:
exactly,
 
Steve_Edwards:
nuckso. Yeah, we can put those episodes in the show notes, but there were they really got into the nittygrity of these Performance improvements in nooks and how they worked behind the scenes, and it went way over my head because I'm the big next user, but it was good stuff.
 
Jakub_Andrzejewski:
M.
 
Steve_Edwards:
if you're really
 
Jakub_Andrzejewski:
hm,
 
Steve_Edwards:
into that
 
Jakub_Andrzejewski:
Yeah. So now I would like to talk a bit about what you can do in what you should take into consideration in terms of performance in view and next ups. So what I find like the biggest issue in modern front and development, and also coinsctently.
 
Steve_Edwards:
Coincidentally,
 
Jakub_Andrzejewski:
Yeah, I don't
 
Steve_Edwards:
coincidentally,
 
Jakub_Andrzejewski:
know how to coincident. Yeah, exactly yeah, this is the correct word. So what? what I find especially interesting is that the biggest problem, and at the same time, in my opinion, the easiest to fix are the images. Because you can have, you can, let's say you are a full stack developer, so you have access to both the data Bis at the Cs. So as a developer, you usually think okay, So if I want to have a better performing website, I need to do some more optimized, I know as quelquaries, or do some kind of implement some kind of I know elastic search for having a very fast keyperkeyvalue pairs just to have faster searches or finding the right record faster. So you usually think of performance improvements such as this one. However, In majority of the websites, I would say that the bad performance is not actually coming from from the back end itself. Of course, there are cases that the bad performance might come from from poorly developed back end, like connecting twenty times to the base instead of one. I'm sure we know examples such as this one, production ready examples. However, I would say that, okay, maybe maybe Not majority, but let's say often and there are cases such as this one, So the problem can be caused by the images. And what I mean by the images is not that. the fact that they are there, it's the fact that we are using them in a not performant way, so let's say that we have a website, so we have had our, and then below it we have, let's say a banner with some kind of image and the text like the heading, And below that we have, let's say a foot with some kind of images, Let's say images in the photo, we have free people and the images of the faces, and this is our team. Let's say something like this. So imagine and that we are fetching this website like loading it. And what is happening is that, because those images in the footer are in the source Of this particular website, they are fetched at the loud time because we. we need them to basically display them. But if you think from the user users perspective, do I really need those footer images from the very first load? I don't think so, because I will need them when I scrawl down, because they are the footer and most probably the footer won't be like in my view, Or so what I will see at first time. So what I usually recommend to use is the technique called Lay loading images. So how it works is basically you can have the images, and if you are using tools like Lowsofjs, for example, or even native lazy attribute of the image tag in what you can, If you can defer sending this request for the image until the time that this image will be in the viewport, so the users will see it, and then the request will be sent for the image. You might be surprised, but the performance improvements cost. or yeah, it's a cost. By implementing Lay loading for the images that are below the fold Can greatly improve the performance both perceived and in the score, because basically you are not sending requests for the content that you basically don't need. However, you have to be quite cautious with it because life loading images is very useful too, and you should be using using it. However, make sure to not use it every Time. Like I mentioned, metric, such as largest content full point, So the biggest element on your home page or on the only website that should be fetched from the very beginning, you have to add prior priority to it so that this image is loaded as fast as possible. So what happens if you add a lazy attribute? Like loading lazy Attribute to this element that is supposed to be Lily largest content. Foul point, How it works Is this image or the request for getting this image will be actually moved to the bottom of the let's say request stack. I know if that makes that that name makes sense,
 
Steve_Edwards:
Hm,
 
Jakub_Andrzejewski:
but basically the hirkhey of the request, So instead of fetching this this resource as fast as possible as up, you are basically moving it to the very end, which will cause you website to be loaded much slower. And I mentioned also images. and it's not only about Las loading them, it's also about the format a few years ago using for mats such as Webb, wasn't Let's say secure because there was still a thing like Inter Explorer. I'm very happy that it's I'm not sure if it's if it's dying or died already. I've heard that it's supposed to be like the activated, but I'm not sure if it was done already, or will it be done until the end of the year, no matter. I'm just happy that it won't be there with us any more. However, I would say that Safari, the native Marcos browser is becoming a second version of the next version of Eternity Explorer, For some of the functionalities that are there out of the box,
 
Steve_Edwards:
Yeah, I've heard that
 
Jakub_Andrzejewski:
so
 
Steve_Edwards:
argument made quite a bit. you know. Yeah, so far as becoming the next I, six and I think for a while it was. I do know from what I've been seeing, there's a Gul named Gen Simmons who has taken over. I don't know what her role is specifically. I can't remember at so far with Apple, but she has done quite a bit. I know she's doing quite a bit of work on trying to get so far Caught up. Um, and so
 
Jakub_Andrzejewski:
Hm,
 
Steve_Edwards:
hopefully things are, we'll be getting better with her. I just remember her from when I was in the droop community years ago. she was always a big design person. M. so
 
Jakub_Andrzejewski:
Hm,
 
Steve_Edwards:
from what I can tell, she's trying to get so far caught up and hopefully they'll be doing that here pretty soon.
 
Jakub_Andrzejewski:
Hopefully, I, just in my previous company, I was developing an commerce website where I think eighty percent of the users were using Intern Explorer, So Imagine in two thousand, and was like twenty one. I think developing for the Internet Explorer, like as your main browser.
 
Steve_Edwards:
Uh, yeah, that's usually like.
 
Jakub_Andrzejewski:
So
 
Steve_Edwards:
Um,
 
Jakub_Andrzejewski:
you search for something
 
Steve_Edwards:
Yeah, that's usually like corporations.
 
Jakub_Andrzejewski:
And it doesn't
 
Steve_Edwards:
corporations
 
Jakub_Andrzejewski:
work.
 
Steve_Edwards:
or govern may be government entities, Or you know somebody who is really a microsophshop. You know, they would be roped into using that and they've got custom stuff written for Internet exploder, or excuse me, explore. You know, Microsoph pretty much disavows it any more. you know Explorer. So I've been in places like that where they're tied into using mice Soft browsers and it was unfortunate, but you know that's the users really don't have much choice. You know, it's the higher the higher ups that make that decision. but you know that explains some of that that use that you see or may be used to see.
 
Jakub_Andrzejewski:
Yeah, so what I wanted to say from the very beginning is that we have those imageformance that are basically lighter while they deliver the same image. So if you have, let's say, p, n g, or Jyback, those images can be easily transformed into another format, For example Wep, which is more performance. and even right now, I think there is, If also another form, but I'm not sure if it's supported everywhere. I think Webb is like safe, That will work in Crow fire, folks and other blouses. However, if I think doesn't have yet full full support, so I think you can safely bet for Webb, and of course you cannot always just you know, convert your image into Webbe. Sometimes you are fetching images from a different source from C, M, s or from commerce, so you can't really just say Okay. I will now use Wep, because those images order are for example, P and g. So what you can do is you can use tools like clouding are, for example, which is the Digital Digital Digital Asset
 
Steve_Edwards:
Digito.
 
Jakub_Andrzejewski:
Management
 
Steve_Edwards:
Yes,
 
Jakub_Andrzejewski:
or Dum, Digital Okay, and how it works Is by Lilly. You can start the images there, or you can send a request to cloud in area, and in response you will receive a optimized image. Different format may be some optimizations, or may be even some transformations. gray scale, rounded corners. Whatever cloudier will do it for you, so you can use stuffs like that, and in a view or in the next world. You have also one of my life Most favorite modules to use with Knox and I even created some sort of a Twitter, Paul about the most used and next modules, and I stated there that for me, like in my new projects, what I usually use is I use the talinmodule for styling, of course, and the image modele, because almost everywhere you will deal with images, and being able Deliver them in a performance way is really crucial. No matter if you are building a block or a portfolio page or commerce website, you always want to have the most the best performing images. So the next image you don't need to use the cloud in. Are you can use it? There is one of the providers support cloudier, so you can use it without any issues. However, And also use the building I, P. X, I don't know the full name of it, but it's like the local image optimizer that you can use to optimize those images on the fly, so you can fetch the image from let's say Commerce platform to your next application, and with next image you can optimize it and let's say change its formal to Ape, so that it's lighter and it's easier for the browser to load. So this is one of the key performance improvements that I'm recommending to anyone.
 
Steve_Edwards:
Yeah,
 
Jakub_Andrzejewski:
Basically,
 
Steve_Edwards:
before you go on, I'll jump in here
 
Jakub_Andrzejewski:
if you're
 
Steve_Edwards:
so there's you know. One of the jokes I've heard before from other web developers. Another podcast was that you have these people that will work on their performance right, and they've got their job of script bundled right, and they're working all these things and then they'll download a huge image. You know that takes forever to download. And it's huge
 
Jakub_Andrzejewski:
Exactly,
 
Steve_Edwards:
and just sort of squash until your, you know on all your other performance improvements Because you made all this improvement And then you, then it takes forever just to down load this image that you've got in there. So Um, now in trim
 
Jakub_Andrzejewski:
M
 
Steve_Edwards:
to cloud Loudnaris, Probably when the more popular or well known image services that does that and they're pretty cool, Because what what allows you to do is upload your image there, and I've used it on a project before and then using our parameters. When you fetch your image, you can tell it. Okay. I want it this Length and I wanted this with, and I want it in this form at. and I want you to crop it this much and recite it and do all this stuff. And you just tell that with our things like our lperameter, So that way it allows you to didandamically fetch. You can fetch the same image in three different ways, depending on whether you want to size for, like an icon on the left or a banner image, or just an image in a blogpost or something like that, And then some of the c, m, s s will incorporate whether it's cloudnary or maybe others Services that uh, do the same thing and they incorporated in there. So any time you use an image, then it handles. You just have to put in your parameters and behind the scenes it integrates with such and such a service. The one that comes to mind, one of the first held. the c, m, s s I used was called butter, c, m s. And they had a service integrated Starts with an I image something. I think I can't remember what it is, but it handles that for you, so that's just an awesome. It's a great tool to have. You're not handling the storage of the images. You know you don't have to make space on your servers and take up service space, and you know you're just paying for. you know, depending on how much of a free ter they might have, and how small your project is, but there are a number of them out there. I just did some quick glugoogling and found blog posts that gives a whole bunch of other services that are very similar to Cloternary. Where this thing is simple as drop box, There's one called Black Hole file stack pocket base, even as amplifies, so there's lots of them out there. But anyway, so that's my My speech on images there?
 
Jakub_Andrzejewski:
Sure. So this is what I'm recommending to anyone. Basically, Just think of damages first, and of course there are other optimizations and performance improvements you can have. You can have things like delayedhydration, because next, by default, if you're using escessrups like service, it rendered how it works, Its sending Tamil to the browser, and then it's hydrating it with Jevascript, So with delayehydration, What you can achieve is that you can take control of the tishydration and decide whether or when to hydrate certain part. So let's say that you have a button that will do some logic When you click on it. You can lie the hydratet, so that it will be hydrated with Java Script on interaction, So when user click it, This is one of the examples of using the The Delight delay or Lay Hytration. Quite similar concept to to lazy loading. Basically don't fetch the cot or don't use the cot. That is not necessary for for the time being for the time when users is seeing something. What is next is. I will basically go through through the modules. I just opened my performance Next performance series on Defoe. If you'd like to check it out, it's basically natal type Performance and you will see one of my articles. So we have things like deligehydration. We have things like. You know, one of the tools that actually Daniel Role created, which is called Fountain, And what is this told us is it's using the found. I believe it's called found overrighte. Basically, when you are using a custom formed you are. Sometimes you, you might see The lay out shift based of the fond, so by default you will get the diffult device found like on my or Windows. Youll have different diffult. Brows are funds, and then when the fond will be fetched, this fond will be replaced and usually it can cause some kind of a C, S, like commulative layout shift. So by using fountain, what it does, it is using the fond fond Right, I hope that I meet correctly, If not, shame on me, But this tool is really great and basically doesn't need any configuration whatsoever. It's developed as it's called unplugging, so it works the same way for Vat for Web Park, and for moll, Uce. I think so you'll down load this plugging and it will work for any bill To that you are that you can use today, and it will add this fond face rule automatically to your Colt, so we don't need to do anything. You just install it, and you are making sure that this c l s caused by the fond change won't be us as troublesome. Let's say What you can get as well is you can. for example, I think majority of bigger websites are using things like anaitis, or any other third party script that, when you are seeing the Googlealtics, or plausible, or any other third party script in the you're checking the official dogs. what they say to you is he just copy the script and put your put it in your website. Of course is the easiest Way to do it, But the the fact that they are showing it from the very first, like getting started, guide or whatever. For me, it's like the big No, because okay, this is the fastest way, but it's also causing you to have problems later on because you will have those issues with. for example, Googleitics that you will have to fetch the whole script so that your page can basically load on. Behave so with Parted Town, what you get is that you can move the execution of the script to the Web worker, so it doesn't block the main fret of fetching, and and say, creating your website, so you can have the functionality of Google Anaitis, without it blocking the execution of the script, and basically creating your website. Quite useful stuff developed by Builder. I.
 
Steve_Edwards:
Yeah, I mean, that's the problem you're going to have. I mean with any remote downloading of job script is right, Is one more thing to to download and run in your page. You know, no matter how much it's been minified or you know, improved in its structure, Its jobscriptht you got to download. And what's interesting is you know Google know for a long time, Google analytics was, you know the way to get analytics on on traffic to your website. And now there's there are obviously Her other options. I know. for instance, if you're using Netlify, which is well known hosting service especially for next know, I've used it for next sites. In the past, They have stuff that are like server based analytic, which you're probably going to be more accurate, I think, But that way it's just running on their surber, and you're not having to load additional job script on your page just to measure your your traffic. So there are other options. But but Goodalantalytics is probably the one of the first and probably the most well known tool for measuring site traffic
 
Jakub_Andrzejewski:
So one final note from my side in terms of both general performance and performance in view, and next, just take example of laziness concept like lazy hydration, lazy loading, lazy coats, coat plating and lazy loading, modules, and so on, and so on. And just think of it as if you don't need it. Don't ship it. It's very simple rule. if you don't need this coat, just don't ship it. Make it C. Colt, pleated like your application, perrote or per page, make things like lay hydration, Lazy loading. Just if you don't need it or the user does not need it from the very beginning or from the first second. Just don't ship it. The best code is the one that you don't need to write.
 
Steve_Edwards:
Exactly exactly. Yeah, definitely more of an issue for browser side versus riverside, right the Riverside? You can probably get away with writing some extra code a little more than in your browser because it's running before the content even gets to your browser. Cool,
 
Jakub_Andrzejewski:
Yeah, I think so.
 
Steve_Edwards:
So we talked about Fontaine and Image right. Is there any other next performance modules or tips before we had to pick
 
Jakub_Andrzejewski:
I would say there's one, but I'm not sure if it's like still being used. It's like the Craters model. So Craters is the too developed by Google That allows you to include the critical C, s s in your in line like Htmail in the head, so that it's louted as fast as possible. So I know about this one and I think that's all from from my side. In terms of the at least for the articles, I'm sure there are many other approaches. I've seen the module from Daniel Row, about zero J. S. that allows you to completely remove all Java script from your next application, which might be useful for the static websites, but basically won't work for you. Commerce,
 
Steve_Edwards:
Right?
 
Jakub_Andrzejewski:
but its cause. There are a lot of concepts that we can utilize The modern Mother website. Recently also developed several components which are rendered on the server and the change is actually caused and it's delivered as a request to the back end to the underlying server and then sending as a result the updated value, So that you have, you don't have basically engyvascript on the front, and you just have it on the back end and then you send the request. The change is being done there and you just Receive a new result. Let's say a counter. You click on a button and then you send the request and then you, as a return, you get the new counter value. Like plus one. Something like this. So there are many concepts and the ones I talked about here today were just the the ones that I'm using, let's say every day, and I'm finding them especially useful.
 
Steve_Edwards:
Awesome so I realized that one of the things I forgot to ask you at the beginning was tell us about yourself a little bit, who you are and why you're famous and that kind of stuff. So before we move on, can you give a little background on what you're doing there and Poland, who you worked for and how you got into view next? I guess
 
Jakub_Andrzejewski:
Sure, I'm not famous
 
Steve_Edwards:
Well,
 
Jakub_Andrzejewski:
yet
 
Steve_Edwards:
you will be after this.
 
Jakub_Andrzejewski:
just to clear
 
Steve_Edwards:
You will
 
Jakub_Andrzejewski:
this
 
Steve_Edwards:
be
 
Jakub_Andrzejewski:
out.
 
Steve_Edwards:
after this. right for sure.
 
Jakub_Andrzejewski:
Yeah, I'm sure I'm sure. So Yeah and I work at Viestarfront and I work as a full stack developer, so I'm doing from coding from cool and other basis to C. S, which brings me the most joy. and apart from this, what I do is, I'm a frequent contributor mainly to next. That's why I'm as an ambassador, An insider There. I'm also ambassador for Story Block and a Goliah. I developed a model for for Nags that allows you to very easily connect to Goliah, and for Story Block, this is my go to. In terms of using headless Cmss, I just like the experience. I like the guys who who work there Because we have. we are meeting on almost every conference, so there is a good connection that say and fine, I'm also a gool developer expert in web performance from December last year, so not so much. not too long.
 
Steve_Edwards:
Awesome.
 
Jakub_Andrzejewski:
Let's say that's why the the interest in web performance
 
Steve_Edwards:
Yeah, I saw I had seen your stuff on view store front as well, and I was gonna ask about that, but that sounds like it's a whole bigger top. with it View store front. Can you just give us before we go a real brief description of what view store front is? I mean, the name sort of gives it away, but if there's any more details you can tell
 
Jakub_Andrzejewski:
Sure, sure, so few store front is a front end platform. I would call it for headless commerce. So Hades, Commerce, or Hedrece Commerce is when you have your Commerce website and you have the store front, which is basically a front end, and the Commerce platform which is a back end. They are separated from each other, so you can have you can use. Commerce Platforms are Shopifybg Commerce Commerce tools, Magenta, and they are completely separate from your store front from the front end. So you store front is actually the store front part. But it's not only about displaying data from from commerce platform, because apart from just doing this, you also get integrations with stuff like Cmss, Payment gateweights, search engines. So that's why Called platform, it's not just the frontent, it's more like a platform that you can use it. and basically you get like the full experience of modern commerce website. So you have the store front with the commerce that you have the c, m s with the dynamically fetched at about the content. You have such results from a Goliah, For example, many many more. So that's why it's called platform, not frontent, not Front, and
 
Steve_Edwards:
Awesome.
 
Jakub_Andrzejewski:
the brief brief
 
Steve_Edwards:
Yes,
 
Jakub_Andrzejewski:
overview,
 
Steve_Edwards:
Yeah, we might have to talk more about that. That's that's fascinating already. so with all of that we will move on to pick. Pick are the part of the program where we get to talk about something other than tech if we want to, whether it can be books or movies, or in my case, Dad jokes. so I will start out today and go right to the the Dad jokes of the week. So I got to find my list here real quick. I was in the wrong room, so this morning or not this morning, I was too busy this morning. The other day I went to a store and it was a plajurism plajerism store, But I tried to to pay in cash, but they would only take credit. All right, I take credit for other people's stuff. Um,
 
Jakub_Andrzejewski:
That good
 
Steve_Edwards:
Yes,
 
Jakub_Andrzejewski:
one. That's really
 
Steve_Edwards:
so
 
Jakub_Andrzejewski:
good
 
Steve_Edwards:
here's
 
Jakub_Andrzejewski:
one.
 
Steve_Edwards:
a. here's a deep thought question and the answer might not be so obvious. If rubber comes from rubber trees and sugar comes from sugar canes. Where does chicken come from from Pol trees? That's p o u l, not p o l E. And then finally you know, in the past I've
 
Jakub_Andrzejewski:
I
 
Steve_Edwards:
talked
 
Jakub_Andrzejewski:
see.
 
Steve_Edwards:
about some of the various jobs that I've had and reasons. I got fired like I lost my job as the best driver because I gave a lady my seat on the bus, trying to be nice, But I once had a job making plastic Draculasveyu. Ever seen those? Unfortunately, there were only two of us on the production line, so I had to make every second count Right. That's every other account. So thank you, those are my jokes for the week, Jacob.
 
Jakub_Andrzejewski:
There were really
 
Steve_Edwards:
thank you,
 
Jakub_Andrzejewski:
good
 
Steve_Edwards:
thank
 
Jakub_Andrzejewski:
ones.
 
Steve_Edwards:
you. I, only. I have a high bar when it comes to my dad, jokes that I tell. There are many out there that I won't tell. but I try to select the best. so so what do you have for an picks, Jacob?
 
Jakub_Andrzejewski:
Um, yeah, I think so not related. To take something that I got into few months ago, which is Dungeons and Dragons. So this kind of role playing game where you are meeting with a group of friends and basically you are. as its name suggests, you are playing certain roles, but I haven't started. I have started playing this few years ago as a member. However, a few months ago I started to join the sessions, The so called Dungeon master. So the Dungeon Master is a person that is actually creating a story, is responsible for all the mechanics that are going on, So combat, some kind of ability checks things like that, and also about Taking the players through the story. So it's it is especially interesting experience for me, because I have never been such a would say creative guy. I never really knew how to draw cool stuff, paying, seeing dance or whatever. I'm not this kind of creative guy. So becoming a dungeon master where you can be prepared for everything because You can have a schedule or a plan where you will take the players. You will take them to say, Dan, John, or a castle or somewhere else, But there is absolutely no way that you will predict what they will do, and I managed to find this out on my very first session where I started as a dungeon master, where I tell told. I have told the players guys. you are A ship and you are sailing to place X. Doesn't matter and I wanted it this ship to be a so called resting place for the for the players, so that they will start to interact with each other, and just to know better, the surrounding, and the first thing one of the players did was to run to the top of the ship and just find the guy Who was on the top and ask him some questions. And in the Dungeon and Dragons, the Dungeon Master is role playing each character that the players are meeting on the on the journey, so I had to create the story in my head in like half a second and just continue with it because the player was really intrigued what he will know from from this guy on the top of the ship, And so I had to create this story on the goal, just trying to Basically create things from the top of my head, And eventually it was very interesting for the player to listen what I had to to what I wanted to tell him, and I managed to create such a interesting story, even though I made everything up and I wasn't prepared for it, and the story itself wasn't even connected to the scenario that was prepared for the session. It was completely out of the box. but still What matters is the is the fun that both me and the player had. Even though it wasn't scripted, it wasn't I wasn't prepared for it. I just went with the flow, and he, and also the other players that they really liked it, And this is what is the best for the dungeon Master is when both you and the players are having fun.
 
Steve_Edwards:
Yeah, that takes. That takes
 
Jakub_Andrzejewski:
So
 
Steve_Edwards:
some
 
Jakub_Andrzejewski:
my
 
Steve_Edwards:
creativity
 
Jakub_Andrzejewski:
pick,
 
Steve_Edwards:
that I certainly don't have you know. I've had. I've had friends that many friends that played it when I was growing up, you know back in the eighties and and the game is, obviously you know, continued still around. But that kind of creativity where you can tell a story off the top of your head is. Yeah, you wouldn't want me as a dungeon master. Let's just put it that way.
 
Jakub_Andrzejewski:
Steve. I said the same and look where I'm here right now. I'm doing a dungeon master, so if I can do it, I'm sure you can do it as
 
Steve_Edwards:
Okay.
 
Jakub_Andrzejewski:
well.
 
Steve_Edwards:
Well, I'll take your word for it for now, all righty So with that we will wrap up this episode of Views on view before we go, Jacob, If people want to get hold of you or follow all your words of wisdom, or even give you money, what's the best place to do that?
 
Jakub_Andrzejewski:
I would say the Twitter. I'm the most active there. It's at Jacob Andreski, without any underscore. Slashes and son is just at Jacopandreski, and of course, on Githa, where I'm publishing most of my open source work and there is a difference because on Githab, I'm called at Barrow with B b a, or as h a M. It's difficult to say that in English, so barracan
 
Steve_Edwards:
Okay and we will put those links in the show notes so that you don't have to try to remember that spelling or be writing it down. The podcast goes on.
 
Jakub_Andrzejewski:
Awesome.
 
Steve_Edwards:
All right. Well, thank you, thank you to Pele and Bush for coming as well, and and joining us, and also before we leave. Like say, thank you to the studio audience. Thank you people. Always a pleasure to have you here. Thank you for coming and without, we'll wrap it up. thank you, Yacob, and we will talk to everybody next time.
LTR RTL