Load In The Loop: Episode 19 – Elegant Beauty

Jordan Griffey

July 24, 2020
Load In The Loop: Episode 19 – Elegant Beauty

Load In the Loop: Episode 19 is here! Join Eric Hileman and Ivan Chepurnyi as they identify and fix some performance issues for Elegant Beauty, an online beauty supply superstore. What will they find? Can they fix it?

Sponsored by blackfire: https://blackfire.io/

Follow us on Twitter! https://twitter.com/loadintheloop

Ivan: ivan.chepurnyi@ecomdev.org, @IvanChepurnyi
Eric: litl@magemojo.com, @ericvhileman

Table of Contents

(00:00:00) Intro and Chat
(00:11:00) Plazathemes Hozmegamenu LITL Squared
(00:15:30) In Development Mode
(00:18:00) 404 in JS Files
(00:24:00) Disable Tier Prices If Possible
(00:27:30) Magento Community Chat
(00:46:00) Product Slider LITL
(00:48:00) Popov Formbuilder (previous vulnerabilities in M1 era)
(00:48:30) usort on Large Array (Magento bug)
(00:51:00) Use Magepack in the Build Process Instead of CSS/JS Optimization in Real-Time Generation (01:02:00) Disable Redirect to Shopping Cart
(01:11:00) Outro

Links

How to Stop Cart Redirect in Magento 2: https://magento.stackexchange.com/questions/193809/how-i-stop-add-to-cart-redirect-checkout-cart-in-magento-2

Transcript

Ivan Chepurnyi: [00:00:00] So, how was it going for you, Eric?

Eric Hileman: [00:00:04] Good. Pretty good. yeah, you know, a lot of crazy stuff going on as usual, but, yeah, overall pretty good. How about yourself?

Ivan Chepurnyi: [00:00:12] I’m pretty good as you see, I have a new microphone. 

Eric Hileman: [00:00:15] I see that.

Ivan Chepurnyi: [00:00:16] Yeah. I can now do ASMR, Magento streams. So yeah, it’s, it’s kind of great.

Now I have with the whole set up, I also have amplifier here and before I had just regular USB Mike. So definitely on the recordings the quality of the audio should be better. I hope so. Sounds good. I think our viewers will tell us, if the audio is better. Yesterday. I’ve been doing some, online meetup attendance.

I was giving a talk at a Magento meetup, or stuff like that. I don’t remember exactly, but it’s in India. So it was, there was a lot of attendees and, I was talking about, performance optimization. And the funny part about the talk is it actually, I prepared it in one day before the meetup.

Yeah, kind of interesting, but. That’s actually what we were talking about  that I didn’t have much time to do a preparation.

Eric Hileman: [00:01:19] Are they on Zoom? Did they  do that on Zoom?

Ivan Chepurnyi: [00:01:21] no, they don’t use zoom. I think they have some issues in India with zoom. and they’re using, Google, meetup meet, sorry. so standard Hangouts.

Eric Hileman: [00:01:33] Is that working better now? Cause that was, that’s always been really off. I mean, we’ve been remote for 10 years. It’s we tried it in the beginning and it’s awful. And every time I hear Google Hangouts, I’m just cringe. But is it better now that like, did it work?

Google was really trying to make that a thing.

Ivan Chepurnyi: [00:01:49] I think it works quite great. Like, you know, like it’s not the best, tooling, comparing to zoom because, yes, zoom is much more user friendly. I also like Adobe Bluejeans as well when I was, having some talks, you know, with, Adobe, employees, remotely. So it, it was quite nice to have a talk over blue jeans.

when I just was starting out, actually, I recently found a video on Vimeo of my first, a webinar, like a how to code, a seminar about Magento indexation back in 2011 or something like that.

Eric Hileman: [00:02:29] On like go to meeting or WebEx?

Ivan Chepurnyi: [00:02:33] Go to meeting webinar like, and I uploaded at that time.

I uploaded it. To Vimeo and because YouTube was not allowing a longer  specific, time, to upload it. So, yeah, it’s, it’s still on Vimeo and, yeah, you still can find it.

Eric Hileman: [00:02:55] Yeah. Someone sent me a calendar invite with go to meeting into it the other week. I was like, wow, that brings back memories.

I didn’t, I don’t know if people still use go to meeting, but apparently they do.

Ivan Chepurnyi: [00:03:05] Yeah, generally, like, it was, wearing a nice tool for us at time, you know, like, and I think a lot of people are going to use it and given that zoom has so many controversies, right now, especially concerning, security, you know, like they did a lot of crazy stuff, so I’m not sure it’s the best choice for a software to use.

But you probably can’t move away from zoom.

Eric Hileman: [00:03:35] I like zoom. Like we’re not doing anything over zoom. That it’s my understanding of the situation was that they just, they lied. They said that they had end to end encryption and they don’t, they’re, they’re basically a man in the middle because that’s how they do, There’s something that they were doing real time.

It’s a real time effect. It’s very hard to do, unless you do sit in the middle like that, but now know what it’s actually going on. You know, are they recording stuff? Are they sharing it with a government? I, I don’t know, but I don’t talk about anything that I would, that would be. You know, he couldn’t get out or anything like that.

Like, if I was looking for a really secure communication, I don’t, I would think very hard about what video platformI chose . Yeah. But we’re not, you know, we’re not doing anything that’s really super sensitive. So

Ivan Chepurnyi: [00:04:26] also, I recently joined Discord of Tokio, Tokio. It’s a synchronous the library for, rust.

Applications. So when you write something to rust and they have a huge, a nice community, and this quarter is actually quite nice as well for Kohl’s, but it’s, everyone should burn this quarter in order to do calls. Also slugs slot calls were actually quite good. I just received a goal, on Friday from one of the developers, from one of my customers and we were having a nice call over Slack.

Just to discuss, you know, the product details. And it was having a lot of nice things and it was automatically with a screen annotations on. So I even didn’t need to enable it. Like it was much more user friendly, Zen, a zoom meeting, because it’s only for you, share a screen. You need to enable annotations in order to draw them and, or was there, he was just trying to screen with me and I was just starting drawing and to showing him where is the problem with the code and are he needs to take a look at it?

And it was showing up on his own screen that he was sharing, you know, like, Yeah, this is kind of cool. You know,

Slack kind of knows where you’re going with that when you open up a meeting soon could be anything. Although we do ad hoc zoom meetings and Slack, a slash zoom, and it creates a new meeting and then we can just show up, jump in.

So we don’t, we’ve used the Slack meetings, but because we can just launch zoom and we use him all the time and we always have, we just. We stick with that, but yeah, there’s nice tools in there for sure. And the quality was, was good too. we’ve we’ve had good quad that’s good quality and good connection.

consistency with Slack meetings.

Yeah. This is the only problem I have with Slack is amount of memory. It consumes like this is grading.

Eric Hileman: [00:06:18] I didn’t look at that

Ivan Chepurnyi: [00:06:22] amount of memory and resources. Yeah. It’s it just performance hog, you know, like. I have so many different Slack channels and Slack, connections, and it’s all the time. It’s hard to do it because for instance, one Slack channel, I was invited by one email address and another one I wasn’t invited by another one.

And it’s all, all the time hassle to connect to it. comparing for instance, to be scored. These courts is, are shaded mostly with gamer community, but from usability standpoint, it’s much more so it. If you have a discord account, it’s all in one place. You just have it. Didn’t go to this court account and you can decide which account you want to join with.

So you are not forced to use the same email you will receive the mile invite on. So that’s much more user friendly approach, but yeah, let’s, let’s, let’s have some intro, right?

Eric Hileman: [00:07:19] Okay, let’s do it. Load in the Loop is sponsored by Blackfire IO. I’m Eric Hileman, CEO, and co founder of MageMojo Magento hosting out of New York city. The purpose of this program is to take some of what we learned from over 10 years of Magento specific hosting and evaluate one of our customers stores.

We’ll share with you what we find and hopes that it may help you improve the performance of your own Magento stores. Along with me on this trip is my cohost Ivan.

Ivan Chepurnyi: [00:07:44] Hey, my name is Ivan. I’m a Magento developer. Performance consultant, all the way around, architect, not only for Magento, but also for other stuff, I can build, everything, even barbecue .

and, today we’re going to review one of a MageMojo’s customers. we’re gonna, take a look at, I think quite interesting case. for review and, Eric, tell us a little bit about the customer, how long there was you and so on

Eric Hileman: [00:08:13] elegant beauty online. This is the first I’ve heard of them. I’m not sure how long they’ve been here.

it looks like just, just typical issues. The home page categories. Product though product pages were loading pretty well for me, but the category pages, I would hit some category pages that would, that would hang and take a while and they do have they have varnish on, let me see, see my notes here.

Yeah. Since community two, three, one, they have varnish and they have our auto scaling enabled. the front page takes, they were reporting between four and five seconds to load and their reporting product pages slow to search slow. although I, the product pages seem to be coming out pretty quick. So maybe that’s a cashing where they’re cold.

Ivan Chepurnyi: [00:09:04] Let’s do profiling because you know, with black fire, we have access to uncashed page. Yeah. The first profile of the home page

and it takes quite a while. So there definitely have some performance issues. So is there

Eric Hileman: [00:09:27] tarnished? Probably hiding a lot of them.

Ivan Chepurnyi: [00:09:30] Yeah. And warnings is kind of a nice thing to have while of course it doesn’t show you his actual issues you have on your staff has not cashed. So as the results are in a, we have a very nice nine 99 seconds or render time. So, this is very cool.

Eric Hileman: [00:09:51] Oh, that’s it.

Okay. That’s interesting. There’s low database queries though.

Ivan Chepurnyi: [00:09:55] Yeah. Like do files on those them. All right. So let’s, let’s take a look at the timeline. Let’s see what’s going on. And is there, very nice. so mostly it’s menu. it’s called the mega menu,

Eric Hileman: [00:10:15] mega menu.

Ivan Chepurnyi: [00:10:17] Yeah. And we see as a risk, you know, legs, there is slowed in the loops, but this is a lot in a loops squared because there’s is other load and loose was involved in a loop here.

As you see IQ, you drove customer because there is loading a loop in a recursion. Draw custom menu items, Zen drop columns, and again, and throw menu item. And there’s a bunch of stuff going on. I think it’s a lot, some stuff. Okay. Is it, this is where we are

Eric Hileman: [00:10:58] six, 700 times. Wow.

Ivan Chepurnyi: [00:11:01] The same table, the same record.

So

this is probably it’s true. We’ll fix, you know?

Eric Hileman: [00:11:11] Yeah. Let’s just get everything from the main table. 700 times. That’s pretty sloppy, dude.

Ivan Chepurnyi: [00:11:19] And Zen also has mega menu, mega menu ID. So this is probably the same thing because they probably have the same idea of the menu and yeah, Zen 200 times, category, has been unload it.

And Zen probably is a category data as well. Yeah. So could they go in category data is another. Yeah, so. Most of us are queries that they have here are related to a loading, a loop of, menu, data as well as Integra data. So, and  is visible on every single page. Actually menu contributes on every single page to the problem.

And unfortunately, Is there a seven week solution for them? just let’s say to move this menu to the side, because unfortunately Magento still ran as a menu. Even if your book is included as a server site include I’m working on an extension to fix a, is that a terrible a thing, but, Yeah, it’s not the other, but

Eric Hileman: [00:12:27] all right.

So that’s it, that’s it for our show today, we found the problem on every page. I hope you all enjoyed the show,

Ivan Chepurnyi: [00:12:40] but in general, yes. As this is a sound things that, that needs to be fixed. And let’s see what happens after the menu is loaded with maybe is there a social, some load in the lubes that are just hidden right now? It’s

Eric Hileman: [00:12:58] okay. So this is the mega menu. Is the top menu, or is it also doing the Shopify stuff?

Cause they have a shop by brand kind of right

Ivan Chepurnyi: [00:13:05] as this is just a menu,

Eric Hileman: [00:13:08] just the top

Ivan Chepurnyi: [00:13:09] menu. And mostly like, I don’t see anything. Is this menus that wouldn’t be achieved, you know, with the regular category structure. Like, I don’t see anything mega menu, except let’s say this image right. Also, there are some, huge points are missing because I was switching and you see, and it’s blinking.

Like, is there some kind of CSS issue as well? Was this menu. Apart from the actual thing. So,

Eric Hileman: [00:13:45] yeah.

Ivan Chepurnyi: [00:13:46] So the only things that this over here there is menus are shown here. Like you have this menu, a whisker vagaries. So this is probably categories as I see, I don’t see anything extraordinary here. Who

Eric Hileman: [00:14:05] is this extension hose?

H O Z is probably horizontal. Horizontal mega menu. Who’s who’s the company.

Ivan Chepurnyi: [00:14:14] I, I think, given that, it’s a part of the team.

Eric Hileman: [00:14:19] Ah, okay.

Ivan Chepurnyi: [00:14:24] Okay. My Muslim, just a moment. Amazon

Eric Hileman: [00:14:31] has an extension.

Ivan Chepurnyi: [00:14:34] No, it’s, it’s not a related as a menu. I’m looking at Zambia.

Eric Hileman: [00:14:39] Yeah. But Amazon has,

Ivan Chepurnyi: [00:14:44] I was also in development mode, so,

Eric Hileman: [00:14:52] so we can pretty much guarantee that, composer, optimizations, not. Enabled,

Ivan Chepurnyi: [00:14:59] but as a composer optimization is not reported here, so probably they optimized composer, but they’re still in development mode. So

Eric Hileman: [00:15:09] that’s a first,

Ivan Chepurnyi: [00:15:13] so yeah. What do we see here? Yeah. So it’s Plaza, Ziems plasms cause mega menu.

Eric Hileman: [00:15:25] As the themes.

Ivan Chepurnyi: [00:15:28] And the thing is, I think also that is a problem. Here is actually a Zay have two different menus, one for mobile and one for desktop. So basically it means Zay renders the same menu twice, or maybe as a, have a different structure. In the mobile, but you could regulate the structure of the menu or the items that you’re going to show in the menu on a mobile with the help of, some CSS styles or, you know, some properties to export it, to JavaScript or do whatever, you know, that changes your view.

Viewport, matchers, that. Does it help really? Is that different? It, the menu for a mobile. So let’s actually open it with, as a mobile viewer. I think, I need to change something. How do I do it in here?

Oh, here’s a view. Okay. So.

I don’t see anything much different. You know,

we go to the home page.

I have bunch of JavaScript terrorists.

Actually a lot of stuff is not loaded. So something is.

Yes. Script script there. Okay. Yeah. So they also need to make sure, you know, like they don’t have JavaScript errors and page, I guess it also affects is a user

Eric Hileman: [00:18:18] agency right. In. Recently, they were sure the server performance was bad. And then we look at it and crim dev tools and you could see the JavaScript was blocking the critical render path. And even though the page is coming off a server and like 60 milliseconds. The JavaScript rendering would block the PA it’d just be a white blank page until the JavaScript rendering.

but depending on like the timing of the JavaScript, the external JavaScript loading from third parties and how long it would take the browser to parse tons of JavaScript texts to call Google analytics will block the render path and, what looked like server issues, but yeah, Java script.

Ivan Chepurnyi: [00:19:06] Yeah. And JavaScript is a very important to optimize as well, apart from his actual backend performance, because like you, you can, have a very fast backend, but.

If you do a lot of JavaScript stuff, is it just render blocks a lot of things. And I know a lot of merchants who just trust as a wonders that provides them snippets for Google tech manager without taking a look. Is it added the synchronously? Is it a render it out there? A page has done.

Eric Hileman: [00:19:41] That was a big part of it.

Ivan Chepurnyi: [00:19:43] Roaring and so on.

Eric Hileman: [00:19:45] Looked like it was dynamically collecting things from the page and then sending it to the tag manager. And that was like a variable time, depending on how long the users, processing took. So yeah, it was, it was synchronously. It was synchronously doing and blocking the whole page load or the render.

Ivan Chepurnyi: [00:20:05] Oh, so, so it was more, more kind of like they were adding a script that was notifying them of something. Oh, it

Eric Hileman: [00:20:13] looked like it was sending, it was sending a ton of request variables to Google analytics, but they were, it looked like they were dynamically generated. So what you would see. Part of the problem was you could watch the network tab in Chrome dev tools and the page, all the pages and all the assets would load.

And then, but it’s still be white and then it would hang and then you would see the Google analytics JS script call and then the, call out with all of the, data and their request variables. So it’d be like three or four seconds later. You’d see the analytics JS script pop up and the external call to it.

Ivan Chepurnyi: [00:20:53] So it could be possible. Is that Google analytics, snap a script is not edited synchronously then. Yeah. Okay. That’s that’s cool. Yeah. Okay.

Eric Hileman: [00:21:07] Yeah. It was not a server issue.

Ivan Chepurnyi: [00:21:11] Yeah. So let’s do a category page. Let’s see if. Yeah. I don’t see basically any kind of country products right now. So right now I see as a Zay use, some, simple products, right?

So let’s see what accepts the menu. We’re going to see over here. Let’s hope that, at least selfing I’m going to happen with the menu and it’s going to be cashed maybe this time. I really hope it’s cashed. If not. Yeah, we are in for a long time to render the page. Okay. Looks like the menu is still a problem here.

Yeah. So 2000 queries from my home page, plus 290, probably from the category page. Let’s see if it’s as a case. Okay. So no, not, not really. There is also some time spent in navigation. And, yeah, so we have as a product listing, is there is some role with standard Magento core, performance issues. let’s as a main yeah, we’re doing was a product price

and probably is that’s a random Magento law. It’s all the tier prices.

So what they can do if they don’t, who’s two prices, a Zicam just disable a resolver of the base price of the product. So if they don’t use that one and it will be faster, Zen has, there is another one called gets forged data. And unfortunately, I don’t see what takes a long time here. But probably all options.

Right? So let’s see, on the page. So it was a color,

Eric Hileman: [00:23:46] some of this blank

Ivan Chepurnyi: [00:23:48] because pro wasn’t EMH is missing or something like that. And they even doing a specifies, a Kohler code or something.

Medea in general, was there a lot of color options they have? And this one definitely affects as a page performance. Okay. It’s wrong. And here is a category one. So again, ratings those switches, unfortunately, because of half other performance issues, Blackfire, doesn’t zoom in what actually happens. So is there.

So it’s already probably reached the trace size because there’s almost a lot of mass with calls in the menu generation.

So, sorry for technical difficulties.

Eric Hileman: [00:24:50] Brah manna happens.

Ivan Chepurnyi: [00:24:53] Do they do, do they share my screen

Eric Hileman: [00:24:55] or not? No, I don’t see it. I don’t

Ivan Chepurnyi: [00:24:57] see it. Okay. With me doing it. No, no. Yes. Okay. Great. So we were cut off on a point when I was talking about that. I disabled switches for my customers usually.

Eric Hileman: [00:25:15] Yeah. And I asked if, what would you substitute?

And you said that you would just go after the data specifically that you needed because it was coming from like a PIM or other external system.

Ivan Chepurnyi: [00:25:28] Yeah. So in, in general, I would just replace it with something much more simpler. So it will be just a simple, a separate entity because the swatches are done in such a ways that you edit as a swatch, images, right in attribute and Blake Magento graded this, watch this module in the same way, is that it would be possible to enable it for any attribute at any time.

And I, I just. Greatest simple functionality where I just store the data in separate table. So I don’t need to know which attribute options are there. I just. Oscar. Okay. Can you give me the swatches, you know, images or the data for this specific product or ran? For instance, we have a configurable product where as the switches are actually product pictures, in Zephyr case, you know, it’s much more easier to write, a simple database query for that, to reduce the data, instead of relying on the objects that Magento are using.

Eric Hileman: [00:26:27] My question is Magento, but, you know, we keep coming across these things. We’re like, okay, they don’t scale. You need to do you do like pull them out or disable them, or do it a different way and writes a lot of custom stuff. So my question is, if, if Magento’s moving up market, which they are, they’re in a position where these things need to be able to scale that doesn’t seem.

Ivan Chepurnyi: [00:26:56] I think it’s very interesting question and your eyes. So in, in general, like, yeah, I agree as at, the thinks needs to scale, but in Magento, like. Well, when I was talking about some performance issues with them and when they say, yeah, you just can put more hardware on it. And he just works, you know, like, and this actually pisses me off because you know, like, no one thinks about the efficiency of the org algorithm right now because people just think like, yeah, if we just make sure that this goes onto the scales, we don’t need to think about, you know, the actual performance of every single unit we help.

In a cluster abroad in Zandt, like people pay huge money for a crossing those solutions. You know, like even if it’s scales, like if you have to pay, you know, out of your pocket, you know, like this amount of money to work on it, even big companies like. Yeah, it doesn’t make sense. You know, like you just waste your money, on a things that could have been written much more efficiently, you know?

Eric Hileman: [00:28:09] Yeah. There’s, there’s things there that, like, you can’t throw hardware at that. We see that just wouldn’t. Work, unless you rewrote them and tweak them and change them. Like,

Ivan Chepurnyi: [00:28:22] yeah. Like, like for instance, watches, right. You can just add more read replicas and that’d be, or not the way square is.

Eric Hileman: [00:28:34] I mean, I guess to a certain point, I mean, you can’t have a whole. You can’t just endlessly add, read replicas, like at there’s I, yeah. And there’s no, there’s no, there’s no, read-write separation. Like there used to be in Magento one, there was a read, right? you could split it. You could split your reads and your rights from your connection.

So when we did it in Magento too, we had to release a proxy SQL container to split the reads and writes, which we try to do with a module. And it was just, it was difficult for some reason. So we ended up using proxy SQL just to split reads and.

Ivan Chepurnyi: [00:29:19] Right. So like, and, and, and this is kind of nice solution proxy scale.

We loved it.

Eric Hileman: [00:29:25] We wrote, we rewrote queries too. Like we would, there’s a lot of commonly bad queries that we could rewrite on the fly and it can do caching and connection pooling and some cool stuff. But, so, so that’s, that’s the solution like, cause like I’m saying like even Magento one, you could split the reads and writes and the enterprise edition, like they, you can’t even, it’s not even out on the.

Box anymore. Like, how are you going up market? Like Magento cloud doesn’t even support, what does it see are QS or CQRS the database where you split the actual tables across three databases, like cloud doesn’t even support that. So

Ivan Chepurnyi: [00:30:04] I guess for all with pro, because we’re always very expensive to have three different other ways.

Eric Hileman: [00:30:11] Yeah. Yeah. Well, they’re limited to three servers total right now. so how, how are, how do you even, like you have to write a custom proxy SQL, can layer to descale because you want to use swatches. It just doesn’t. I just, I don’t know. It doesn’t make sense to me. I don’t get it. I maybe I’m missing something.

I don’t know. Maybe someone else can tell me what I’m missing. Yeah, I’m not missing anything.

Ivan Chepurnyi: [00:30:40] I, I think the zeros, not no excuse for, Zillow’s kind of a silly issues, you know? And, I can imagine like render Magento dude was released, you know, like there was a lot of modules and a lot of things. I think they will not just go on and, you know, spent all of his team resources just to go on and fix performance issues, looking into the performance issues because.

I think they have other things on the horizon. Like they, things that the re loosens in use storefront with graph QL, will solve their performance issues. Right? So it was a focus in that direction instead of actually improving the current, systems that all of the merchants are using.

Eric Hileman: [00:31:29] How does that, how does that solve the scaling and the performance?

Ivan Chepurnyi: [00:31:35] Yeah. Like, they just a one to start from scratch, you know, like just to build something more efficient from the beginning. and to have somethings that, is much better. I don’t know. Yeah, how’s the storefront looks like. So they promote it as a, as a savior of all Magento shops. was it performance or they hope it will save performance issues once and for all.

but, yeah, we don’t have yet access to it. We don’t know how it looks like. We don’t know how it performs, you know, like.

Eric Hileman: [00:32:11] Is this something being built for everybody? I was kind of under the impression that was like an Adobe thing that like a lot of the development work. Is driven by that want to serve really, really high end enterprise customers, which is kind of why I thought it was there.

The talk was around the Java part of it. Cause Adobe seems to really love Java and everything they do. And it was connecting with their own Adobe systems. Is this going to be something. Open or nobody really knows yet. It’s too early to say.

Ivan Chepurnyi: [00:32:45] Yeah, I think it should be open. Like it’s stupid to, create a new storefront.

Dowel is that it’s closed. What does the same time we have open source product, which you can just install and work and you don’t improve it. I think so from the API should be public, you know, like it looks like it should be open source. Like it, it doesn’t make sense. However, if they will make non-open source Zen, I think they will lose a lot of, of the communities that is already leaving to other systems, you know, like.

Is there a sublet already, a lot of who are just, not happy with Magento, you know, if it was able to not, or from a public product. Yeah. If you just going to be the final, you know,

Eric Hileman: [00:33:33] I, yeah, I don’t, I don’t know if they are aren’t I really, I haven’t seen any, I haven’t seen much about it. Just Twitter conversations here.

There is there, is there something on the Adobe site or anything official about it or is it just random Twitter threads and chat?

Ivan Chepurnyi: [00:33:49] Yeah, like they presented new storefront in, community, engineering chat. So it gives me, What kind of associations that is going to be an open source product, but they would say don’t do it open source.

Yeah. It would be a big surprise for me.

Eric Hileman: [00:34:07] That’s a, the community engineering Slack chat, which doesn’t save messages. So if you were trying to go in there today and look at it, probably be gone. Cause they don’t cause they don’t have a paid Slack. So it loses and only has like, I dunno, 10,000 messages or whatever the Slack retention for free accounts is,

Ivan Chepurnyi: [00:34:27] but what is it?

This is something, you know, like I think discord does a little bit differently. but in, in general, like if you have an open source product and you have a community around it, like you. You can, gather, you know, like a donation or something to support the Slack channel or something.

Eric Hileman: [00:34:48] That’s that’s, that’s what I said.

They were like, Oh, we’ve got like 10,000 registered members or more or something like that. And I’m like, wait guys, have you ever looked at your Slack billing? It builds for active users. It doesn’t build for all users. So how many are active and then nobody replied. and then I was also saying, get the Magento association, which is a nonprofit or not for profit organization to request.

A discount on your Slack license. So now you’re getting, you’re getting non nonprofit discount cause it is open source community engineering. So you’re getting a discount on it and you’re only paying for active users. You’re not paying for every single registered user. So I

Ivan Chepurnyi: [00:35:25] don’t.

Eric Hileman: [00:35:26] That seems like something good the association could do.

And they say they’re looking for good things to do.

Ivan Chepurnyi: [00:35:33] Yeah. And with the Asians, there was a little bit of, I think actually it was last week when they send this newsletter, you know?

Eric Hileman: [00:35:44] Yeah.

Ivan Chepurnyi: [00:35:44] Yeah. Harry sings. This one.

Eric Hileman: [00:35:47] I did. I received it. Yeah.

Ivan Chepurnyi: [00:35:49] Yeah. For, for me it was, like. I was okay. It was previous newsletters, but this one was completely, Out of a proper for Magento association itself, you know, like it was crossing a lot of boundaries, I think.

Eric Hileman: [00:36:04] Well, they, they, so they needed money and they sold sponsorships. And then the sponsorship packages, that’s one of the things that they offered the sponsors, like you saw Miguel defending it because they’re a sponsor and they’re going to do it. You’ll you’ll, you’ll get a nexus email at some point with some.

Upsell, the, again, cause it’s part of the, the sponsorship package, but you had a good point. Like that’s not really GDPR compliant. You should be able to select yeah. When you sign up for the newsletter, I want, I want like just association news. I will. Okay. I want, additionally, in addition to that marketing news, like you should have categories of that stuff.

So,

Ivan Chepurnyi: [00:36:41] yeah, just spend like

Eric Hileman: [00:36:42] a lot of money on a new site, so they should have that capability in it. I would think

Ivan Chepurnyi: [00:36:48] in Zandt, like my registration for Magento association was actually a Google form and I received a copy of Google form on my email. So. I w I, right away, wa rugs started with DDI actually quick, any check boxes that actually allowed them to send exactly the messages that I was receiving.

Yeah. Marketing and, and Zen. I just found that actually, this is a message that I was subscribing to was about email communication from Magento association and its partners. Bye bye. There was nothing about marketing information. There was nothing about,

Eric Hileman: [00:37:28] wow, that’s their partners.

Ivan Chepurnyi: [00:37:30] Yeah. But, in Zen, this is complete violation of, the GDPR requirements because the requirements, every single, newsletter

Eric Hileman: [00:37:40] together.

Ivan Chepurnyi: [00:37:42] Yeah, they should have, exclusively specified do which information I give a consent, to, to be receiving because, recently I think there was a BMW and Mercedes, they got fined by European union, for sending an email, even just send in an email newsletter with information. Hey, we. Are going to have a GDPR compliant, newsletter.

Here’s what your subs subscribed to. And if you’d like you can unsubscribe. So this was already a relation because

Eric Hileman: [00:38:20] Americans are terrible at this stuff. Every American company just automatically assumes that you want them marketing crap. And every time you buy something and you enter your email address, you’re just bombarded with promotional crap.

Right? I hated it. I ran an email marketing service for. Many years. It was, it was what I pivoted from and to major mojo and to the host and I all, my, all my forums for customers were default opt. you have to opt in. Yeah. And I kept telling customers, no, this isn’t cool. You’re just, you’re going to anger people.

You’re going to upset, set them. You’re going to have a bounce. You’re going to have a BM reports, complaints. Let the people whose want to get your stuff opt into your stuff and you’ll have a higher quality list. You have better open rates. You’ll have better success with it. Nobody listened. Nobody wanted to do that.

Everybody just wanted to do it the other way. Like, well, they can opt out if they want, like. Yeah. And even now, dude, even now when you go to American websites and they put the cookie notices up, that says, do you want to, we, we use cookies on this site. Do you, do you accept? There’s like, no, I don’t accept.

It’s like this big message that, that covers your screen that you can’t say no to. You have to say I X. And that’s it like, it’s like, it’s either like you either accept our cookies or you can’t use our website.

Ivan Chepurnyi: [00:39:44] Yeah. It’s a kind of weird thing, you know, like at least here you can, like there is some required work is required to for functioning.

bazaaris also bunch of foster cookies. and is there already a lot of solutions out there where you can actually, I

Eric Hileman: [00:40:00] know I saw yesterday, they gave you a customizable, like, okay, here’s all the cookies, here’s the categories of cookies. And you can, these are essential and required. And these other ones you can opt out of.

And

Ivan Chepurnyi: [00:40:14] that’s really the way

Eric Hileman: [00:40:16] we don’t do it yet, but it’s something we will do. It’s the way to do it.

Ivan Chepurnyi: [00:40:21] Yeah. Like, And recently there was some big, a court case here in a European union. Where, Zen American companies are not any more protected than there are some, umbrella for secure communications.

Like there is some specific things for Facebook and, Google’s that get stored in the United States, like information about the European users. Like if you store this information on your servers, This is it. Those companies are now in big trouble because before it was like, they created some special exception.

And now’s are a lot of, I’m going to change for this tag guidance here on the European market, because European market is like the European political Zay, did some loophole by introducing some directive or something like that. And everyone was using it for a couple of years. but there was a court case.

because, the Europeans was unable to utilize as a right to be forgotten a rule and it went to the court and the court decided that the European permissions that introduced some new directive in order to allow the state guidance to work in Europe, is. Isn’t not compliant with the European lows and to the rights of European people.

So, yeah,

Eric Hileman: [00:41:46] but I don’t think we ever delete anything here in America. We tell you, we tell you we do, but I don’t think we ever really do.

Ivan Chepurnyi: [00:41:54] Yeah. What a, this kind of interesting, because like you, you can go and ask Google to, buy European lows. Like you can go and Google and ask to delete all the Google searches about you.

So you can ask them, Hey, can you remove every single page you have on the search results? So this is kind of interesting, you know, as is it. And I think it’s the right thing to do. Like, yeah, that’s a lot of burden to that technical companies, but in Zen it’s like, Yeah. Why do we have information about my name, my job title or whatever, you know, like in Google search results.

Like if I didn’t explicitly, you know, wanted to have this information being sharp and Freud internet is free, but if it’s information about me, you know, like it’s personal information. Like if at some point in time, like, Yeah. So if you are a public feeder, right, you, you don’t have as this. Right. But if you are just a private citizen, you know, like you have a right to be forgotten, like you don’t need to be, you know, everywhere.

Like if, once by mistake, you let’s say you have to read it to your social security number in Twitter. Like it’s all, it’s there forever. You can’t, you can’t remove it. even if you do it that way, because there’s a lot of aggregators that already indexed your data and it’s already somewhere,

so yeah. I’ll have to go back to a revering, the customer, right. So we were on a category page and they says that they have also some issue on the product page as well. Right. Oh, so it’s actually a configurable product, but they don’t use integrity pages in product listing. Okay. Let’s do a quick profiling.

Okay, so what’s going on. Is there, is the product page performance issues are going to be mostly related to the menu again? So.

Not sure. Is there a lot of stuff we can see? And in the previous one, I also was looking in to Amazon extension or something like that. something caught my eye that something is not correct. Like I think it was somewhere here.

let’s click here.

I’ll support slide. It also has some load. Nope, but there’s only two products. So it’s not visible. This is probably somewhere on the home page here or no, it’s not in the homepage. It’s sexual could negative range. So you seize this, product slider. It executes at least two times it executes loading was a product separately.

Was in a loop. So let’s go into the, product page we’re under time and we see ads at every single page is very slow to render. And again, the manual is the biggest contributor here. Okay. So is there a, some form we’re entering and I think this is related to , form builder.

forms at times actually off Magento on, I have, very bad experience with  form builder. So I don’t know if it’s better in Magento too, but in Magento one, it was extensions that I was trying to avoid. let’s see. yeah, this, this. Interesting. So is this Magento, Magento core buck? was it performance, so Xero using you sort on a very large array, but yeah, it’s not that big of a deal, because they have other performance issues that are not that much contributing, but I’m just looking on everything here and get a current product.

Eric Hileman: [00:46:36] Well, what were the problems with the form builder that you were having?

Ivan Chepurnyi: [00:46:40] I think mostly securities related stuff, because it was not some dancing user input and as well, I think there was couple of, retina database queries.

Well also I think in form builder as well, like, I think there was also a couple of SQL injections. You could,

Eric Hileman: [00:47:10] I, I was just going to say that I vaguely remember there was a form builder plugin that had vulnerabilities in it

Ivan Chepurnyi: [00:47:17] and. And it’s probably one of them, from my gentle on air. I dunno. How about Magento too?

If they still do a direct Gregory’s and Magento to plugin Madera, swearing high chances.

So in general, like Zyprexa is a product rendering. It looks like a standard Magento thing. You know, like service not uses. There are performance issues, but not somethings that they need to invest time to fix, because those are. Good. Still good to be a rendered, comparing to the menu itself. So

Eric Hileman: [00:47:59] the manual, if the menu comes with the theme, it’s not something they can, I guess they could disable that.

Individually and swap it for something else, even though, but I don’t, I just, is it going to be tightly integrated with the theme now? Can they actually just disable that and swap it with something else?

Ivan Chepurnyi: [00:48:21] And I just found something different as well as a problem, a Z also at Iran time. they also, transform less to CSS.

That should be actually being done during the static content deploy. So in general, I think there are a lot of points.

Eric Hileman: [00:48:46] More people doing that, man, like I saw that agency did, I mentioned earlier in the show they were using potato compressor and they mentioned like, Oh yeah, we were scoring bad on lighthouse. And we enabled potato and we got a better score. Well, when we look at that, we’re like, well, that’s okay. That’s fine.

It’s great. You scored better there, but your server performance is screwed up. Like it’s, it’s. Doing stuff that you should be doing in the build pipeline? Not at runtime.

Ivan Chepurnyi: [00:49:14] I, I just actually recently improved my HBAC. I did submit a pull request to make pack. yeah. because I had so many issues with one of the customers, when they were using not weak, deploy strategy for Ziems, but they were having a lot of stories and the amount of data as it needs to begin with a quick deploy strategy.

When you have a lot of different languages, you have a lot of locales of your store. Like they had something like 20 or 30 locales. It was taking couple of gigabytes to generate a static content for every single language. However, it was mostly a duplicate because all the JavaScript files just needs to be duplicated for every single locale.

And in Magento’s there is a available, Functionality for having a compact deployed strategy in that case, Magento a great default for a specific team. and it points required JS configuration. It was a default, Zim, if they’re a snow specific, based. Zim modification. So like, if you don’t want to find a template or JavaScript file for a specific, Oko basically it will use this number of static files dramatically in your file system.

And that customer was using a compact mode, but unfortunately compact mode was not compatible with matchback because matchback was only working with a standard. we could deploy a strategy. Is it, this used out of the box by Magento and. Yeah. I actually submitted to political test for them. I spent a day, in order to make it working because the, a compact deployed strategy requires for you to read the, some mapping files for react required JS in order to find where every single module that needs to bundle together leaves and yeah.

Xantham made a fork for a customer. And then I also submitted to political West, because unfortunately I have to use a fork for a customer because, it’s not the , but I think it’s going to be merged

Eric Hileman: [00:51:22] who runs a major pack.

Ivan Chepurnyi: [00:51:24] I think it’s great of style. It’s a German company.

It’s the same guys that the Ron might see it.

Eric Hileman: [00:51:36] Yeah. Me, me sweet that I owe.

Ivan Chepurnyi: [00:51:42] So main student major back. I think

Eric Hileman: [00:51:45] Mitch sweet was the, the blue foot, the, a page builder. Is that the page builder replacement?

Ivan Chepurnyi: [00:51:51] Yeah. And they built a mesh pack. So here’s my pull request. And basically, I just learned a lot about the way how Pooka tear works by working with this project.

So basically it’s, it’s quite simple on JavaScript stuff. I really dug deep a lot inside of the, matchback internals, how it works. Yeah. Unfortunately it’s not a very modular, so you can and adjust, they could borrow from HVAC and use only that part. So this is probably some things that I will do pool requests in the future, you know, in order to be able to your checkout a guideline, because for instance, right now, It completely depends on a standard Magento’s theme.

So if you have some custom, a way to add product to the cart, major bag, doesn’t support it. So you cannot generate a bundles for checkout and shop the cart. I’ll

Eric Hileman: [00:52:53] plug in how plug and play is major pack. Like if you have a site and you want to enable it, how much configuration do you have to do to get it to work?

Ivan Chepurnyi: [00:53:02] mostly it’s about generation, all of the bundles. So mostly it’s about, being able to run it, on your development machine or even you, you probably even can, Do some of the stuff like zero is somethings that you still need to patch in Magento. Like if you are not running on the most recent 2.3 0.5, there is at least five different patches you have to apply to require JS.

Yeah. because is there a lot of things, related to proper bundling because it. how matchback actually works. it really, the JavaScript, like it adds a link prefetch. Into the browser. So it prioritizes the bundle JavaScript or the rest of the JavaScripts that are going to be loaded. And Zen, when someone requests required us, we’ll try to load this bundle, but because I’m browser already refreshed as a resource, it will directly just, use a bumbled file.

So it’s it’s, it works quite cool. Optimizes performance a lot and you can achieve much more, better performance scores. then it was all twos in it. So, it also helps a lot with, I would say dependency tree because, as the biggest problem, right, when you go to the checkout page, there is so many different modules that are getting loaded, in Magento and.

You need to get, you know, those modules as fast as possible. And with matchback, it’s possible to have even template files and JavaScript files, all of them being bundled together. So you, you don’t do any HTP request apart of one single bundle. However, when I was using it and when I saw it was the size of self bundles, I, I will.

Kind of impressed with number of JavaScripts that is useless in Magento.

Eric Hileman: [00:55:05] Yeah. Customers who’ve gotten it running are really impressed by it and their scores are shooting up on like lighthouse and everything else. It’s like, Oh my gosh.

Ivan Chepurnyi: [00:55:15] Yeah. But, this is a problem with Magento itself. Like if you take a look at the amount of the JavaScript, like for instance for that customer, is that you count JavaScript, marched together was, I think something around 200 kilobytes compressed.

So uncompressed, it was, more than megabyte of pure JavaScript. And this is too much, in my opinion, like.

Eric Hileman: [00:55:45] Let’s call solution. It’s cool solution that people can get it running.

Ivan Chepurnyi: [00:55:48] yeah, I’m, I’m, I’m not talking that much. Buck is bad. I’m talking about JavaScript of Magento because when you just, when you just have small files everywhere, it’s fine.

But when you enable minification you enable a bundling. And when you take a look at the bundle size specifically for checkout, It’s kind of huge and also as a common bundle, as well as kind of fluff. Yeah.

Eric Hileman: [00:56:13] I think generally we recommend don’t use bundling care. At least don’t use Magento zone bundling.

Ivan Chepurnyi: [00:56:20] Yeah.

Eric Hileman: [00:56:21] I see problems with it.

Ivan Chepurnyi: [00:56:22] Yeah. is there a see shoes with standard bundling, but this is kind of based on the resources on a page. So it kind of. Across different requests or requests on page requests, broad page it’s requests, category, page it’s request, shopping cart page, and then request checkout page the collects all the modules per patients, and it finances a common module, so that are present on every single page.

It was loading. It bundles them in common bundle, and then it also creates separate bundles for page types. So the common bundle was quite huge as well. So number of JavaScript was quite large, but it could also be specifics of this specific customer project. But, the Chicago bungalow itself, there was almost no modifications from the customer for the standard Magento checkout.

But number of JavaScript is just crazy. You know, like I, I understand like everything is dynamic, but a knockout JS is definitely not the right solution for writing a good checkout. So. BWE April, we’re going to be much more better solution for checkout.

Eric Hileman: [00:57:36] Should we not even enter that PWA conversation?

Ivan Chepurnyi: [00:57:40] I wonder,

Eric Hileman: [00:57:41] I wonder if viewers come in and watch this and they’re like, Oh, just shut up guys.

Just, just do, just do the Blackfire thing and just show me issues. Or of other people are like, kind like the, like the intermediary commentary. Like, I don’t know. We’ll have to it out. We’ll have to let us know.

Ivan Chepurnyi: [00:57:57] What, I think we are completely done with the review right here. Like we can add to cart, but in general, as we see like the most biggest issue here is actually a menu right

Eric Hileman: [00:58:12] outta there.

And problem solved.

Ivan Chepurnyi: [00:58:15] Yeah. So I’m just gonna record every single request. I’m just going to add some product to the shopping cart.

Eric Hileman: [00:58:26] which was, was just really amazing.

Ivan Chepurnyi: [00:58:28] Sending a request to Facebook. What

is it? A shopping cart is depending on Facebook and the why I’m getting more directed to the shopping cart. Oh, is there so many requests happening?

Eric Hileman: [00:58:50] Some live chat or something, is it? No, we would have seen it on all the pages.

Ivan Chepurnyi: [00:58:56] Okay. I asked media, it looks fine. Okay. So let’s take a look at adding to the cart. So hundredth and one that the way square is it’s probably a, MSI here, adding some, Lord on database.

this is a product data. Not really.

Yeah. Sims seems like they can’t optimize much here unless a fixed Magento core performances performance. But here, for instance, you see, we’ve got two options. This one takes quite a lot on the card because probably as a support of configurable product,

those parts are always fascinating.

Okay, can we see what else here?

Yeah, those are a snack as much as they can optimize here. whereas. OSR profiles. Okay. So now we see, for instance, we also see a cart and the car do you see as well? Like this page is never getting a cashed. So every single customer is adds to cart and gets redirected to cart is going to trigger this number of database queries.

So it was a manual, really screws up their, conversion rate.

Eric Hileman: [01:00:53] Oh, in the menu on the customer section load Ajax call. Is that, that you mentioned earlier. I think that that menu is still going to get.

Ivan Chepurnyi: [01:01:01] no, it’s, it’s it’s, it’s not the ox skull as a menu is generated, was a page render and in Magento and varnish implementation, you can specify as it, as a menu is going to be a loaded, free assigned include on the server site by varnish.

And when it’s loaded, unfortunately, Magento does not render as a wool menu. But Magento renders attack to tell, Hey, load from this URL. A lot for me is this menu, but the first Magento still renders a block. So it doesn’t prevent rendering of the block itself. And basically it’s rendered his book and ignore us is the output of the book and just renders.

Yes. So, I was trying to replace it, before like, doing it, but, yeah, I did create a small proof of concept, but I run into some issues with layout, not properly behaving the Magento. So yeah, I didn’t yet spent more time because I didn’t have time to really fix it completely. But in general, like, If you have a assigned clued, you shouldn’t even renders this menu at all on the page.

So in that case, is there a performance issue would be insulated in, in one single year. So included cashable by varnish, gosh, this menu, and then we would not have a problem at all, but because Magento still ran the, as a menu on every page. Yes. It doesn’t help, you know, to have some kind of quick solution.

Hmm

about the menu. I think it’s kind of, kind of a common problem and any mega menu. And when you see profile or for mega man, you always expect

Eric Hileman: [01:02:47] he’s a, maybe just grab the code base for the word Meghan and anything mega is going to be

Ivan Chepurnyi: [01:02:53] probably you guys. Yeah. Yeah. So. Yeah, in general, like the shopping cart, most of the time is spent the render Romania.

So you can imagine how many frustrated customers are there, doing it. So let’s go one, one way farther. Let’s also profile actually a checkout page because it’s interesting to see it. Do they render as a menu on checkout page or not? Okay.

Kind of slow. I think checkout page. Let’s see. What’s going on there.

Yeah, there’s a card also customer section a lot. there is a lot of yak skulls happening, is it shouldn’t happen, itself? Like you edited a car, like you can do one coat, but it doesn’t make sense when there is at least three of them. so is there a, some issues happening or was there a definitely.

So let’s see if profiling is ready. So they’re using one step checkout. Let’s see if, is there any performance issues? So was there, sorry, wants to check out guys, but if you need to take a look, baby

Eric Hileman: [01:04:26] love one step checkout.

Ivan Chepurnyi: [01:04:28] Yeah. And yeah, mostly I think that’s done there to Magento behavior. but probably.

Zetia was a learning we were seeing. Zara is mostly, was related to slow. I’m a lawyer of dynamic resources because they’re in development mode. And could we possible that jealous creeps were sexually quite slow to load, so they really need to switch to production mode and they need to deploy static content.

they need to optimize a lot of things in deployment process as well.

Yeah. So in general, I don’t see much issues with checkout, like yeah. It’s standard Magento. And then the gains, a customer section load. So seems like, the customer section load gets cold a lot. it’s of course not as heavy as is, they’re just regular and the Rosa page, but still, it makes sense that they can look and optimize it.

But in general. Yeah, it’s say they don’t have perform performance issues, in a custom code on checkout. So it was a half menu. And. Broadly, even as a can, maybe Zaycon, disabled redirect to the shopping cart, functionality and Magento, and just, keeps the costumer on the product page because when you are getting the shopping cart may be customer wanted to go somewhere else, as well.

but you get rid of the checkout page and here you have also a menu is it gets rendered for every single person. So. People after writing the cards have to wait a very long time

and they think in a Magento Jessica configuration option, you can just disable the reject into cart. It’s not enabled by default. so you have to actually manually go and change it in Edmond vinyl. Actually let’s look it up in dev docs and specify a re read direct to cart, Magento to disable.

Okay, great. System configuration sales checkout after writing the cards, reactor shopping card, set it to no.

Eric Hileman: [01:06:51] So why is it zero? I do that, but I can’t.

Ivan Chepurnyi: [01:06:58] So, so it should be zero, but by default, I think it’s

Eric Hileman: [01:07:01] no, I mean, who downloaded that YC answer at Ciro? People will download anything on the internet, I think.

Ivan Chepurnyi: [01:07:09] Yeah. But, I think, there was just no approvals. Oh,

Eric Hileman: [01:07:15] nobody I’ve voted it. Okay.

Ivan Chepurnyi: [01:07:17] Yeah. And I don’t know.

Oldest. So this was the first answer. So, I don’t want to, of course.

Okay. Well,

Eric Hileman: [01:07:33] I mean, that’s a, that’s good. Is it really just the mega menu and get out of development mode and then you can take another look at it and see what else is left, but that’s probably,

Ivan Chepurnyi: [01:07:43] yeah, this probably will already, Increase their conversion rate a lot because right now I think the biggest problems are ASOS, slow render times of checkout and other stuff.

At least they have a quick fix for checkout page. So as they can disable them predicting to the shotgun card, so customers are not getting frustrated before they committed to actually buying stuff from the store.

Eric Hileman: [01:08:11] Cool. All right. Should we wrap it up?

Ivan Chepurnyi: [01:08:15] Yeah, I think, everyone. Thanks for joining us on this nice episode of floating in the loop. see you next time.

Eric Hileman: [01:08:24] Yeah, thank you. The black fire.io, you hit us up on, load in a loop on Twitter, LTL at major mojo. And let us know in the comments, if we should just stick to the performance optimization and, or, or if it’s, it’s okay to wander the conversation a little bit into the Magento community and other, side topics.

thank you everybody.

Ivan Chepurnyi: [01:08:46] Yeah, thank you. Bye.

Leave a Reply

avatar
  Subscribe  
Notify of

Ready to get Started?

Sign up now