Load In The Loop: Episode 9 – Black Swallow
Load In the Loop: Episode 9 is here! Join Eric Hileman and Ivan Chepurnyi as they identify and fix some performance issues for Black Swallow and struggle to understand the world of makeup.
Sponsored by blackfire: https://blackfire.io/
Follow us on Twitter! https://twitter.com/loadintheloop
Ivan: email@example.com, @IvanChepurnyi
Eric: firstname.lastname@example.org, @ericvhileman
17:55 SmartWave Mega Menu
22:24 Composer autoload not optimized
25:00 Core issue with Varnish ESI block include
27:06 Flat Product=no, Flat Category=yes
29:00 Configurable vs Simple product structure to improve sales and conversions
35:10 Color profile adobe rgb vs. srgb in product images + php conversion
45:00 More about simple product / configurable products
1:03:54 Inline js polyfill ie 7 bug/missing
1:04:26 Inline swatches unnecessary
Ivan Chepurnyi: [00:00:00] Hey, Eric, how are you doing?
Eric Hileman: [00:00:03] Good. How about yourself?
Ivan Chepurnyi: [00:00:05] Yeah, I’m good too. quite busy. January was a very busy month and now it’s starting February, a lot of work gets planned and I still have a lot of other assignments I have to do. So I saw that, November was crazy month, but right now it’s even crazier.
I don’t know. Again, I don’t know what contributes to this kind of load itself. So I’m constantly in load in a loop.
Eric Hileman: [00:00:32] Are you doing a lot of performance, like M2 performance work or…?
Ivan Chepurnyi: [00:00:36] On a different… M2 and 1. So both of them. And just recently, actually a, it was interesting last show we were discussing about Amasty alerting navigation.
You remembers the issue we were talking about.
Eric Hileman: [00:00:51] Yeah, yeah. They… there was a couple of tweets that that was fixed.
Ivan Chepurnyi: [00:00:56] yeah, we would definitely need to take a look at it and review it, but I just, got one Magento 1 customer and. I was just viewing, you know, their performance reports and apparently they also have Amasty shop by extension button, Magento one and on Magento one is the story is the same.
So I, I don’t know. I, I remember like on Twitter we had some discussion and some people was talking about like, Hey, Amasty as they didn’t have problem with performance in Magento one. But of and is, this is not something that just true because it was
Eric Hileman: [00:01:36] easy.
Ivan Chepurnyi: [00:01:40] Yeah. So I didn’t have all the dates at the claim, at the time when someone wrote it. But. Yeah, pro, probably a Nolan. We’re taking a look at the queries that were executed and let’s say on, they can look at their real database size. What was that one? We just does that the customer like has only free filters in earth navigation and is it performance is terrible.
Eric Hileman: [00:02:07] well, there was a, there was a tweet, I think it was Simon’s Frankl, Frankl, I, I’m sorry. I murder everybody’s last names and first names too, sometimes for international people. I’m so sorry. he tweeted that amnesty. Did, do some rewrites and shot by for their M two extension. So we already had a customer this week, but next week we could take a look at that and see, find, find, find someone who has it here, get it updated and taken a look at it and confirm.
Cause that’s, that’s really awesome. If extension vendors are listening to the show and improving performance,
Ivan Chepurnyi: [00:02:44] have you seen as this fear to yesterday? and choke where.
Eric Hileman: [00:02:48] Yeah, I saw that video and I saw this follow up tweet. yeah. What are your thoughts?
Ivan Chepurnyi: [00:02:54] Yeah. To the things that, I hear like this, this video doesn’t means that he abandons Magento or anything.
Hey, works was jealous works was both platforms. Yeah. And that’s kind of interesting how. There’s a message that gets framed by competing platform, right? Because they’re not throwing like. You know, like, yeah, he just works everywhere. He is, they just booted in the light. Like he is exclusively number works with shop where
Eric Hileman: [00:03:25] he could have been standing there for 15 minutes talking and they cut it down to like 30 seconds of him just talking about leaving Magento.
And that’s what they put up.
Ivan Chepurnyi: [00:03:36] But, but in general, what, when I, Is doing, he just learns a new platform. All right? So it’s okay to learn a new platform, and to do software with it. You know, like, it doesn’t mean like you fly, you’ll, let’s say, go and learn rust. It doesn’t mean I abandoned PHP, right? It just means I, improve a number of tools I can use for.
I’m doing self bring as well. Learning as a platform also gives you an opportunity to rethink some things that you’ve got used to.
Eric Hileman: [00:04:10] He’s still working on major, Mage TV and we’re talking to him about sponsoring that. He’s, as far as I know, he’s going to keep. Doing episodes and keep doing training, and that’s great.
More content out there. We’d love it. So, yeah, he’s, that’s, it seems fine and beneficial to everyone. So,
Ivan Chepurnyi: [00:04:27] yeah. So it’s, it’s kind of weird that people just assume we’ve some agenda, so this is not true. So, yeah. So now, Well, let’s, shall we record an intro?
Eric Hileman: [00:04:39] Yeah. We probably should do an intro. This is the load in the loop.
We’re sponsored by black fire.io. I’m Eric Heilman, CEO and cofounder of MageMojo Magento hosting out of New York city. The purpose of this program is to take some of what we’ve learned from over 10 years of Magento specific hosting and evaluate one of our customer’s stores. We’ll share with you what we find and hopes that it may improve your Magento skills and the performance of your Magento stores.
Along with me on this trip is my cohost Ivan.
Ivan Chepurnyi: [00:05:08] hello. My name is Ivan. I’m, one of, performance experts in Magento area and not only in Magento area. Also, I can profile any PHP application or any other applications that support some to add some hooks for profiling. So
Eric Hileman: [00:05:24] it’s another big Magento.
Ivan Chepurnyi: [00:05:25] Yeah. So feel free to contact me. Okay. So Eric, tell us a little bit the wall as a customer.
Eric Hileman: [00:05:39] Yeah, so Black Swallow. I, I know Black Swallow, although I was not aware of the images on the homepage. They are quite nice, interesting story behind black swallow. So they, you can see in the M and a navigation, they have the Jeffree star cosmetics link.
So. Yeah, so black swallow, we got an alert that they were receiving a lot of traffic a little while back, and we were like, wow, what’s going on? And we saw Stratus scaling out to handle it, which it did. it did, it handled it well. And we followed up with, with the site Owners, and we asked them, you know, Hey, do you have any promotions or sales or launches or anything is going on?
And they said, no. And, so we started looking into the, to the logs to find the traffic. And it turns out that was the big, launch, the Jeffree, star cosmetics, the collaboration. on that dropped on Shopify and took Shopify down, and when that happened, there was a lot of overflow coming onto black swallow on Stratus to buy that Jeffrey star cosmetic collaboration
Ivan Chepurnyi: [00:06:46]
Cool. Actually, and comparing to Shopify, people were actually able to buy it because
they, because Stratus was actually will scaling right.
Eric Hileman: [00:06:59] It did it, did it horizontally, auto-scaled out and held up without any issues. now granted, you know, we’re not receiving the same amount of traffic Shopify was for sure. but it was pretty cool that it was there and it worked and held up and they got a lot of sales out of it, just out of the
Ivan Chepurnyi: [00:07:15] blue.
Yeah. It’s a where we just, tells a story. Like if you plan to launch your own product line, just make sure that you diversify the selling platforms, right? So just make sure is that you don’t make it a vendor locked, and do you sell in multiple areas? It’s about the manufacturers, but probably we talk about retailers with dealers cannot do it, unfortunately.
All right. So, let’s, start, so let’s go to the homepage. And to, let’s, start Blackfire profiling as disabled aggregation and, debugging mode. Probably not. Okay, so let, just start profiling. Let’s see what we’re going to see as a result. And right now I see it’s quite fast, so not too much time to wait.
That was the only thing. It takes some time to load the data itself. So no windows, no
Eric Hileman: [00:08:21] viewers can’t see that.
Ivan Chepurnyi: [00:08:23] Yeah. So you can see it, but.
Eric Hileman: [00:08:26] Is this the windows restart message?
Ivan Chepurnyi: [00:08:29] Right now, I boot into windows only when I need to use Photoshop products or when we actually record our show. So right now I’m full time working and I really enjoyed it so far.
Actually. Recently, I compiled a za 5.3 version of the kernel, two’s, architecture of my processor, and they removed a bunch of red and, and stuff from kernel itself during compilation time. So. It. It felt very, really good. It’s a little bit of quirky to actually add to some architecture to the kernel because by default, kernel only compiles into standard X 86 architecture set.
But, you can actually, great. The patch. For it. So is there available online that you can apply? And Topo was the standard kernel source go to base and you’d have automatically ads for every single variation of a Zara conjecture out there. So I was able to compile directly to Zen, to Zen, to it’s Xeric texture of vitamin D for the recent processors is the ones that actually, I currently have.
And yeah, it’s couple of percent of improvement, internal, workload, but it’s already quite good, especially if we consider, you know, like system calls because a lot of system calls are done by query, not by application itself. At bar firms ETA. I also plan to, compile some other applications. Well with direct, architecture selection for the processor.
So it’s going to be interesting to see. But so far I didn’t have a free time for doing it. Okay. So now we have some results here. So it’s almost one second on the corn page. And I see is there’s quite a lot of database queries. So this is already assigns as there is something going on there.
Eric Hileman: [00:10:23] I’m told there’s amasty shot by on this site as well.
Ivan Chepurnyi: [00:10:28] Mmm. Okay. right off the bat, probably. Oh, it’s Magento commerce. So this is what it is.
yeah. So we have four 61 database graders to sales to cut our category flat store one. So it tells me, is that similar in a code base? A sound, sound thing is going to load proteger in a loop. So this is definitely a problematic part of the system.
So, and as a result, because every single category is loaded separately, are also loaded as an afterload event, as a category, as you see here directly. So there is the same number of queries for both of those bars right. Cause they have like 18 CMS blocks as shown on a homepage. . And this means like there is some room for improvement.
it’s unfortunately an issue with Magento itself because Magento doesn’t, when Magento renders the same as block as a block, on a page, it doesn’t collect all the broad lock. And then Defiers prior to rendering, it just renders as it hits it. So it’s possible, and I did it before, to collect every single same as block being shown on the page.
Also identifiers to collect them and then just execute a single query instead of, you know, doing 18 queries. So this is kind of announcing a performance here. We see right here and Zen again, and as I was, same as block and get slaughtered. So is this one is loaded with the store filter, and there’s another same as what gets loaded separately again.
Oh yeah. So here we are. So is there a similar collection usage for loading as same as block for one means and Zen Xero Sinaz are certain walks loaded. So quite a performance hit. So I think there was at least. Like 50 dot. The Bay square, is it going to be reduced to two? So San materialization, let’s see.
We would do, so was there probably not a simple one. Like it’s not something like turn on the switch and everything works fine, but it’s something where you can go on and do some optimizations to save some money. Did you have a B goal sent? Yeah. As the rest of the things that are quiet, a standard, I was the standard Magento issue was director currency rate is actually quite common in Magento, like for every single currency.
How Magento DASA database query, however, is strange, is that aZ needs this currency rate here because I don’t see here, Oh yeah. Now I see it here,
Eric Hileman: [00:13:29] there, and there is this switch
Ivan Chepurnyi: [00:13:30] here. Yeah. Yeah. So for every single currency is it they use Magento? Well, it’s every currency separately to extract the conversion rate for it.
And is that one can easily be optimized by just, you know, great in a condition on currency from and currency to, and then just filtering dials in PHP on a response. So not, not the big deal. This is not something that’s bro and Magento. Developers, Magento core developers see a lot in their daily work.
Oh, this is kind of weird to query. They can look here. This is bro with some extension, because I had never seen this method data table. what it is, where, where was it? Here it is.
So what is the methylated table itself?
Eric Hileman: [00:14:29] Is this part of page builder first. Last.
Ivan Chepurnyi: [00:14:35] Oh, it’s, it’s again, Magento commerce, right?
Eric Hileman: [00:14:38] Yeah. Yeah.
Ivan Chepurnyi: [00:14:41] It’s again, Magento commerce functionality. Wait a second. Here it is. So it’s beige Deitel sows. This query looks a little bit terrible. So if you take a look here, it, Ron says, sub query right.
some kind of column. I don’t see where is the boundary subs? This one, because it looks like it’s subquery was in the subquery and it’s recruiters, so it’ll be a here and is there is three times this one is executed broadly. We see where a low time to execute this query because most probably that the days empty.
but as soon as you have a reasonable amount of data in this table is going to be a performance kit. Cool. So, so far it doesn’t make sense to take a look at it, but as soon as they gonna add some hair Hickle structure. Oh, was there? Yeah, it’s going to be a problem. Okay. Let’s see what else. Yeah. Here also, the rest of the things are non zip concerning.
So main issue is the menu. Probably because they expect somewhere there is a category gets loaded in the menu or something like that. Maybe to output some additional attribute or whatever, you know, broadly as something like exists, you know, is this a small blocks. Maybe it was, those spots are, was there overall pretty good mass?
So let’s take a look at the, sorry.
Eric Hileman: [00:16:13] Overall, pretty good though, right? The page, the homepage itself, it’s pretty fast.
Ivan Chepurnyi: [00:16:19] I, I would say 400 milliseconds. It’s pretty good. But this is at least double. Is that 400 milliseconds. So if it would be a, around 400 milliseconds to render as this page, because there is nothing special.
Bernard’s a page just starting blocks and so on. But because of Rob with a menu, it, that’s another, the 400 milliseconds does it a lot of time. So let’s take a look at the timeline view, shall we? Yeah, it’s a little bit hard to click. So he, here we are, and my suspicion was right. I think because we see each gym, I’ll head there on hater with sections.
And here we see dopamine. You, you see it here.
Eric Hileman: [00:17:10] Yup.
Ivan Chepurnyi: [00:17:13] And here we are. Mega menu mega menu from smart wave
Eric Hileman: [00:17:25] w
Ivan Chepurnyi: [00:17:27] yeah, this, this is a problem. And, Zandra some things at this one actually happens on every single page. So if we take a look at . the page structure, probably, they use the standard Magento, functionality where the menu gets loaded through ESI include in the varnish. So when it gets loaded for ESN gluten varnish, it means that, Magento still rather sit internally, even if the menu is not shown.
But. Yes, I include DEC is going to, it is the good news. I’m working on an extension for it.
Eric Hileman: [00:18:07] The stash.
Ivan Chepurnyi: [00:18:10] Yeah. and I actually would, I do rode it for a while was a project, but, I didn’t have the chance to properly test it, so we still didn’t release it yet. But in general is the basic idea is just for moves.
The rendering process of the blocks is that, are. Or Florida, two years PSI because it doesn’t make sense to renders as data on the page. Is it this sexually or not? Depending ones is data,
Eric Hileman: [00:18:37] right? Or
Ivan Chepurnyi: [00:18:39] like for instance, the menu, no one depends on the menu on a homepage, except that my new book and food are looks very simple as well.
So. I don’t see anything weird there. Oh, so Z episode to float in a loop just went out. I received a notification. So it’s, it’s funny. Okay, so let’s see. Smartwaiver mega menu. Let’s take a look at the smart way. Mega, mega menu.
Okay. This is, concerning
apparently someone didn’t prohibit viewing Megan Megan menu right.
Eric Hileman: [00:19:44] Perfect.
Ivan Chepurnyi: [00:19:46] And you know, the problem is that it’s very poor, optimization job for search and giants if the first resolves doesn’t show your extension. Right.
Eric Hileman: [00:20:02] Yeah, that’s that’s strange.
Ivan Chepurnyi: [00:20:12] so it’s
Eric Hileman: [00:20:16] I S wait, it’s a smart way. I thought. Smart way was a company. Are they like under the Porto e-commerce brand?
Ivan Chepurnyi: [00:20:29] I don’t see any mention anywhere, so let’s see. Smart wave.
So it’s poor though. Now, apparently.
Eric Hileman: [00:20:45] Okay. So that’s the company name, but there, so they must’ve been smart way, but they changed their name, I guess.
Ivan Chepurnyi: [00:20:53] eh, it looks quiet. interesting. What’s happening or there, because, yeah, I just don’t see.
Yeah, it’s, it looks strange. sorry, just for,
Eric Hileman: [00:21:16] but I don’t, yeah,
Ivan Chepurnyi: [00:21:19] yeah. Okay. But anyway, was the problem. It takes major chunk of Zillow time, so here it is. So you just read it as a menu here and had a walk. Another thing actually is that they have as well. What I see here, you see as a metric here on, on the, on the left side called composer of TULO.
Dot. Find file.
Eric Hileman: [00:21:43] Yep.
Ivan Chepurnyi: [00:21:46] So this is something that, Zay can fix right away. And, Ron, a composer off the load optimization after they compiled, You know, DUI, configuration. So as soon as you compile their configuration, all laughter is that they need to, an optimization of composer after Lauder.
Because if you do it before, it means these are the files that are generated by set up, die, compile one TP or in foster if the loader. And, Magento will hit file system manage. We’ll try to find those classes. And in this case broadly, it wouldn’t just probably is that one that is actually is not enabled, but also it could be, is that they don’t have a composer of the load optimization at all because it’s like almost eaten hundredth goals.
Mmm. And now is there one interesting metric you see here as well? it saves a cash block to cash 98, 96 times. So weird. 70 times collection gets loaded. Yeah, quite quite interesting panel. I’ve never dive too much deeper in it, but here is, they added some nice functionalities here and Blackfire so big shutout does. for this one here, you see actually our model Lord in the loops as well, right? Do you see a to 3% and here we can see it right away. Here this.
Get some manual items and so on. So the shoes definitely Sandler in the extension itself because I don’t see anything plates or anything pointing to the actual award in the loop. So I suspect is gets a menu items or get my gamma. And your HTML method, is doing some. A load in a little, because here where you get all of the categories you need right in this area and then you just does another load and another load and another load times.
There is a lot of flows happening, so that’s where it’s slow,
so it makes sense to fix this extension. Or, as an alternative solution fix, CSI included Magento Corp is it threatened the rest of a menu, even through it’s CSI included. Anyway. So this one probably is going to be a quicker fix. So let’s take a look at category page, right? So let’s take a look at Jeffery’s darkest medics.
Kind of interesting to see the performance of this page, but it doesn’t have a lot of products, right? It has almost 72 products on a page, but probably it’s gonna show us at least some indication. how is this going on? Was a category page and we see is that there is a little bit of slow response.
Definitely a couple of seconds, but not seven and not to six, so definitely less has set. And I see is it number of filters is very small as well. Like say how long we can we filter. Sun’s a speech
Okay. So quite a lot. almost 40 seconds to render the degree page so 728 database queries. Let’s take a look at them. So again, zoom menu hits us here. So you see here, we have. The same ketorolac event queries, and we have the same, category, flat store where when categories get slotted separately, one by one
Eric Hileman: [00:26:17] isn’t.
I thought the recommended, I thought it is recommended now to not use flat categories that it actually hurts performance.
Ivan Chepurnyi: [00:26:27] Braddock’s yes. is still a good option.
Eric Hileman: [00:26:31] Ah, okay. Just flat products. Yeah.
Ivan Chepurnyi: [00:26:38] okay. So here we have, this one is a problem, but then we also have the standard problem with Magento pricing as I see.
So you see here, you, you have quite a lot of Lord in the loops. was in Magento two or three product, prices. And stock status as well, actually is, it’s also an interesting for configurable product. Oh yeah. So it loads all of the configurable products in a loop, and yeah, so that’s a standard thing. and it’s probably to renders this available collars,
Eric Hileman: [00:27:19] swatches.
Ivan Chepurnyi: [00:27:20] However, this one actually we are. You know why? Because you already have
Eric Hileman: [00:27:29] the
Ivan Chepurnyi: [00:27:29] same product basically shown three times just in different styles, but each of this product is actually a configurable one was only one option available.
Eric Hileman: [00:27:41] Yeah. Yeah. It’s the same product just listed multiple times.
Ivan Chepurnyi: [00:27:48] So why should I is strange.
Yeah. Here I see it’s school. It’s nice. Like you have, you know, different, different styles available, right? So you can choose a color, right? This is clear, but.
This is silly, a little bit of a performance bottleneck. Cause I see. Because when you just a grade the configurable product for a broader cause that there’s already one one variation only, right? So basically it should have been only a simple product itself. Or you could have a Qualia just a goal or squashed one product.
So, yeah, this one, and this one is even more interesting because you see here, you have a set of straights, right? You’d have Paulette, but it’s still forced a color on a pallette. I think cause they need those a little bit to, change their product structure because. I think it’s even not as good for, you know, as the end user when you have, Oh, is it time to select a size and the color if you want to add to cart right.
By the general, I can tell for sure is that Zay can benefit a lot from the same kind of optimization. I have deed for one of my customers. and I think we would talk about them on the last show, right?
Eric Hileman: [00:29:43] A
Ivan Chepurnyi: [00:29:43] little bit. So here on the . On a category page, you can also add a product as a shopping cart and you can select everything is the only things that I completely abandoned, as a standard way how those dropdowns are being created.
So. I’ve created a separate backend functionality as it loads all the data for all of the configurable products was gobble Aquarius instead of it doing for every product because it started Magento. We can see it by the way here. any details you can see that, every single product gets sold at a separate ugly, you see from a flat.
actually this is not every single product. This is actually. Yeah. probably at least of simple products of configurable because he sees that as an entity ID in and there is also account happening as well. I was a product by super link, so Sarah, so a lot of Jess rather than Aquarius happening, on the product data as it shouldn’t be here.
So. Here. It’s basically the same functionality. You know, like you have a size dropdown available with those available products that you can directly add from a category page to the shopping cart. So you wouldn’t, don’t need, yeah, you have to select the size and then you just have to as a card and it’s in the cart and it’s all set.
But here. You don’t even have a button to add to cart. So is this functionality just a graded to, you know, see a different picture button? Zanta doesn’t give any, you know, return on investment for Zant customer to have this functionality on the category page at Bart, probably from here. But here even, you see, I choose a different color.
Right. Yeah. But it doesn’t change anything, right. It doesn’t, it doesn’t change a color of the product. So, I think it makes sense to take a look at the product catalog, management here. and see you. Why a, it’s happening like is that maybe they have some kind of fear piece system or something and Zay gel stuff to magically create configurable products based on simple products, but then it means like Zane, just to adjust or add some flack ins that are going to be, or integration is that the world Mark some products as available only in one variation.
And gels sells them with simple products because this one, bad for performance and also confusing. Let me go see you can to, you know, Sierra everything. Okay, so let’s go into product page and last profile. It.
Baby painting. Let’s hope we don’t.
Eric Hileman: [00:33:09] That color is called baby pink.
Ivan Chepurnyi: [00:33:13] Wow. That’s nice.
Eric Hileman: [00:33:20] What’s your favorite color?
Ivan Chepurnyi: [00:33:21] Is it some
It’s hard to choose. mostly, mostly green and blue. So
Eric Hileman: [00:33:32] this is
Ivan Chepurnyi: [00:33:34] not the way we ping, but I think there is still a little bit of do for a difference in color of the picture of the product and does actual color. So I
Eric Hileman: [00:33:42] did hear there is, I’m red, green color deficient, and I can even see it. I’m not sure why.
Ivan Chepurnyi: [00:33:51] Maybe it’s related to the color profile. So it was a picture. So it might be safe to in a different color profile or maybe a like, be sure it gets uploaded into the . admin panel with a G before month. But when PHP resize it, picture, it doesn’t know about the color profile of his original image. So your image information of the callers gets lost.
And I have plenty of customers I was working with. I was, I was complaining, Hey, it’s, the picture looks different online comparing to. You know, what do you do? And, after the Decatur exams that you need to export in S energy before month, your pictures all the time as otherwise as a colorist will differ because you, you kind of trust, the set of our side hardware to properly transform the quality of spaces comparing to your Adobe Photoshop or where you.
What’s brought us your product, the pictures, because it has much more better information about the, color, profile to apply for does have app. That’s a
Eric Hileman: [00:35:08] really interesting topic, man. We should tweet that out because I, I’ve never thought of that, but it’s really important to make sure your swatches match here.
Your pictures and your pictures match what you think they are supposed to look like. That’s really interesting. So how do you, how do you solve that? Like how do you, when PHP resizes it, I dunno, you tell me what, what, what’s the solution? They’re
Ivan Chepurnyi: [00:35:34] like, yeah. So is a standard PHP library. Even you mentioned magic, ignore, or is it an but color profile into the picture?
So if, let’s say you have a doper GB being embedded into the expert with the picture, The software, unless you specifically specifies that, do you expect this image format to have this specific color profile? It will still be like that. So it was, the only way to do it is actually upload images only in SRG view.
It’s, it’s the only way.
Eric Hileman: [00:36:09] Okay.
Ivan Chepurnyi: [00:36:11] And, if you take a look, yeah, let, let, let’s see. Just if they actually have this problem for you or not. So if, how, how actually you can test it. So you see it, a picture like that. Oh, actually, Hmm. I can’t select it. go copy my shadows. So,
so is this a resized image right. And you can access on resize team edge by Justin Morgan cash from it, right?
Hmm. Here it seems like was the collar SARS the same. So is, this is not the issue here. So let’s.
where is it? Oh yeah, here it is. So
okay. Is it quality’s a little bit loose on a, be curious. It’s, it’s resize about actually not resized. It just buys away. And other things that I also advice usually to merchants is. If you have an image that is not resize to tall and no transformations are happening in them, just pointed to zero original image URL, it’s possible to do by gels, customizing the Magento standard teenage helper, but.
You know, you see is this original image. It is much more better from point of view of uranium by Zan customer. You see, because you can zoom in and here I see we usual artifacts and color is a little bit different. You see, actually is, this one looks more like baby. Being, I don’t know if you see it, in the screen-share, but when I click it, I see here it’s much more with being, and here it gets a little bit gray
Eric Hileman: [00:38:17] a little bit, but it’s, my eyes can’t discern that much.
Ivan Chepurnyi: [00:38:22] Yeah. As it does Xero sexually, a difference in color a little bit. So definitely a color profile curve. It will get adjusted. Why? I know a lot about the color profiles because I was writing my own color. my own image resizer in
Eric Hileman: [00:38:41] and
Ivan Chepurnyi: [00:38:46] And, and, and I was actually learning a lot about color management and different color profiles, how to adjust gamma of the images. I was reading a lot to borrow to Larcos a algorithm to resize MH metrics and, other stuff related to machine learning. You’re actually learning a lot about colors from that area as well because.
When you built a convolutional neural network, you need to find Zim. Most Agee image is that would be recognized better by your model in machine learning. So
Eric Hileman: [00:39:25] we could turn this every time. Ivan says he’s been working on this extension. He has a mustache. I take a shot.
Ivan Chepurnyi: [00:39:38] Not, not, not, not about extension, you know, just, is it technology itself? Because it’s quite fascinating. measure different color profiles you have out there. It is.
Eric Hileman: [00:39:48] It is
Ivan Chepurnyi: [00:39:50] calorie different.
Eric Hileman: [00:39:52] I, yeah, a little a calibrator calibration device to calibrate my stuff, to try to make an accurate. And so what do you think happened here with the swatch?
you think they just pick the wrong color when they entered it in, or
Ivan Chepurnyi: [00:40:09] how does it mean just opening it up? So with me, open the page. So in general, I think it looks like Borlaug’s at this greater the thematically, you know, so when you, when you have a system, we S yeah. we had just, just to confirm my suspicion, I can just, Keith profile will request and we will see what kind of product gets three growth. When I add the product to cart. Right. Anyway, we need to profile a lot to Cartwright.
Okay. Stomp and let’s see this one. . Oh, it takes some time. Okay.
Okay. Add to cart.
Eric Hileman: [00:41:03] Okay.
Ivan Chepurnyi: [00:41:05] So it seems that there’s a lot of stuff happening. Okay.
Well, let’s see. Does it the lot, the data from configurable product. All right. Just quickly search for it. Yeah. So this is definitely a configurable product with Stu attributes, and I can see it forms without the square is so . That’s what happens there.
At the car doesn’t show us a lot of issues, but it’s because Jose, how in this case, they have a product with only one available option as a simple product. So sure, it will be not Micha Phoenicia from the performance. Let’s say if we go to, let’s say, product with a lot of colors.
Eric Hileman: [00:42:06] Yeah. That mirror has a front side, maybe the pink on the front side as a lighter.
Ivan Chepurnyi: [00:42:13] could it be about this? As I saw it, it was kind of a one piece, right? So I’ll let, let’s see. Also this phone, let’s start to record all the HP requests and let’s add the card. Okay.
It’s kind of very nice. Dutch XAI instead of card, as they mentioned back here. I think it’s where he fittings their, product, brooches because you know, like they sell cosmetics and a swimwear, and this is where it typical to put your products in the back. You know, like in, in nice a designer back all an hour,
Eric Hileman: [00:42:59] each bang man,
Ivan Chepurnyi: [00:43:01] or a beach bag.
Yeah. So let’s see. Let’s see. Is the timeline,
Eric Hileman: [00:43:06] Oh,
Ivan Chepurnyi: [00:43:10] okay. or, Oh yeah. So we have a little bit more of that. The way square is this time, so is this time we have like eight products being. Lord, it’s, yeah, I go to eight products being loaded.
so is there
Eric Hileman: [00:43:32] a
Ivan Chepurnyi: [00:43:33] little bit more query settings on the previous time? Yeah, so the Pharaoh staff, the card was hundred 14 and the second one is on there. Four to five. So is it more products you have in configurables and one or the other? Waste squares you have on add to cart, but in general is, this is not to wear a terrible performance, but he was able to have a bigger catalog of products.
It would hit a harder, you know, in future. And considering that XAI arrange all of the products as configurable products. it can be a problem in the future because, every single configurable product, executes set of separate queries. So they desperately need an optimization of this small block.
Either change one color or one size. Yeah. One size. So it doesn’t make any sense. You know, because is this a Seawind confusing for me as a, as a buyer? Because if I go and the ICU, a leap liner,
Eric Hileman: [00:44:48] the
Ivan Chepurnyi: [00:44:49] other have different sizes.
Eric Hileman: [00:44:52] Yeah. so like, so lip liner, I see why they’re putting a color there. So you can tell what color lip liner it is.
Ivan Chepurnyi: [00:45:00] Yeah. But Zan.
Eric Hileman: [00:45:04] Yeah. Okay.
Ivan Chepurnyi: [00:45:06] As Zico output, if, let’s say, simple board or if it has a color cause they can, I’ll put this color over here, right? Yeah. It’s customization changing to the theme plate, but is they’re using color swatches just to show a color. And then as are things that Zay use, they create a separate one size attribute for products that don’t need to have it.
So in Magento you can choose or different product attributes set. So you can choose different configurable product attributes as well. So I think cause there is, there is some kind of automated process that really messed up as a product structure itself.
Eric Hileman: [00:45:49] Yeah. Probably automated a feed. Have you ever seen anybody
Have you heard or seen anyone who were not white? That one. That’s wild.
Ivan Chepurnyi: [00:46:03] Maybe I should consider it too weird myself, you know?
Does the next a Magento imagine, you
Eric Hileman: [00:46:12] know, they saw orange, she could wear orange
Ivan Chepurnyi: [00:46:16] and, and, and no, I mean, like for actually. Making all the face PEO to do represent scare of performance issues. You know,
Eric Hileman: [00:46:35] where the coast of performance give us the performance present.
Ivan Chepurnyi: [00:46:44] Okay, so, let’s take a look at the Nazar category page. Just for example, just take a look for instance, at shampoos.
Yeah. This one completely red, right. because they really want to
Eric Hileman: [00:47:09] very
Ivan Chepurnyi: [00:47:09] young. Yeah. Like a, I don’t understand why Burpo is here at all, because
Eric Hileman: [00:47:14] when it says number yellow or, Oh, no yellow, no yellow Shannon.
Ivan Chepurnyi: [00:47:20] Yeah.
Eric Hileman: [00:47:23] No yellow, this is a whole
I didn’t think about
Ivan Chepurnyi: [00:47:30] actually, I mean, maybe they use some kind of machine learning algorithm or whatever, you know, to generate this stuff is, is it probably takes a look at the big share, you know, and decides which, which one to use. But yeah, here it’s purple. But why is on here? It is not. Green. Right?
Eric Hileman: [00:47:55] Yeah. I don’t know. Like the, that bottle says no yellow and it says purple. I don’t, I don’t, I don’t know. I don’t know
Ivan Chepurnyi: [00:48:02] why it didn’t. In general, I think they can win a lot by actually selling directly simple products because first of all, because there’s a configurable product, you cannot right away at it, the shopping cart.
You have to go to the product page, click on a product. And only is, then you can add it to the cart. But what I see on a product page, is there a snow more information? Is that on a category page? Right? By default, it’s all collapsed. So you don’t have product details until you click on it. So it doesn’t make sense to sell, a configurable product when you could just sell this simple product itself.
So. And basically from point of view of a database size, it means like as they have doubled the size of the products or positions that are just regular simple products because they have to create a configurable product and they have to create a simple product as well. Or is that case.
Eric Hileman: [00:49:13] Mmm.
Ivan Chepurnyi: [00:49:17] However, is the good news with, some developer, who can just create that the way square is and find those kinds of products that have only one simple products associated to it. They can easily change the product. I put configurable and co-PI or information. Is it just me saying in configurable to make it a single simple product and then removed is a simple product that was there.
Eric Hileman: [00:49:42] Oh,
Ivan Chepurnyi: [00:49:45] it will probably bring a lot more conversion to them because I can imagine people don’t like to click through. It will store up to finally add it to the shopping cart.
So. A shot of bullets. This one too, like it just confuses, right? You see Sonoma as a color, but it’s actually a pallette of colors, right?
Eric Hileman: [00:50:16] Yeah. Well, I don’t know. I mean, maybe the buyer here is conscious about what color are the cases, and that’s the color of the case.
Demographic here, so I don’t really know.
Ivan Chepurnyi: [00:50:35] Also, it could be a, maybe you’re right. Maybe it could be a color set name. You know, sometimes like you have a pallette of colors and .
Eric Hileman: [00:50:49] Yeah. Oh yeah.
Ivan Chepurnyi: [00:50:54] On the box. But here, for instance, it’s white, but there is no white, right?
Eric Hileman: [00:51:01] Yeah, yeah.
Ivan Chepurnyi: [00:51:05] Or for instance, blue blot. Yeah. It’s reasonable. But here and those are the lights. Why is so bright when there is nothing like that. So, I, I, I’d really suggest to, review the catalog structure. I think it gum, solve a lot of issues. especially for products that don’t have options because they have probably very small number of real configurable products that they sell.
Right. I like this one. Oh no. And other windows update
Eric Hileman: [00:51:46] and restart. That’s our hour warning.
Ivan Chepurnyi: [00:51:49] Yeah. And yeah, here I even, I’m not sure if. Yeah. So he here, here, here is a problem, right?
Eric Hileman: [00:52:04] colors in the thing or, Oh wait, no, that’s,
Ivan Chepurnyi: [00:52:09] Oh, that’s,
Eric Hileman: [00:52:11] you get one.
Ivan Chepurnyi: [00:52:13] Yeah. So here, like I am as a buyer. I think I will. No, no, no, no.
What kind of color of the bottle I will receive if I, let’s say, chooses D as a color option, right? Yeah. But I don’t, I don’t see a change in product picture. Right?
Eric Hileman: [00:52:31] Yeah.
Ivan Chepurnyi: [00:52:34] And having a picture of legs at a might result in customer actually expecting that, Hey, I’m going to have all of the colors. In one package and another thing size guide is completely right.
I did them for cosmetics. Yeah. So it makes sense. Yeah. I didn’t know what kind of, You know, Zim or have they custom developed it, but it makes sense to hire some e-commerce consultant in order to adjust. Is catalog, to better sell, sell and present products,
Eric Hileman: [00:53:19] the add to cart. Did you see any issues there?
Ivan Chepurnyi: [00:53:23] as I, as I said, like. As soon as we have more SIM, more configurable products, per item. Oh, look,
Eric Hileman: [00:53:34] now I have the right picture. Yeah.
Ivan Chepurnyi: [00:53:38] So is this is just crazy. So when I change one. I don’t have a change, but when I had two cars, so let’s say if I want to add this green one interesting to see what kind of concealer I’m going to have in my shopping cart.
Yeah. Luke is the right thing. Wage.
So is the data, is there, but somehow is it functionality is not.
Eric Hileman: [00:54:14] Yeah. It’s to increase sales conversions
Ivan Chepurnyi: [00:54:21] and also improve performance because as more data you have is the war cities for the performance of the store. So, let’s see what we have here. Yeah. So.
This looks like a bundle product to me. Right. This is two products together by they’re sold as a configurable product.
Eric Hileman: [00:54:51] Yeah, it does. Is it a shampoo and a conditioners? Wait,
Ivan Chepurnyi: [00:54:58] I,
Eric Hileman: [00:54:58] I got it. I’m curious now why having no yellow in your shampoo is important. I’m going to have to Google that cause I feel like I’m missing something.
No, not that I really had need to worry about shampoo.
Yeah. It looks like it’s two step process. Maybe
Ivan Chepurnyi: [00:55:20] I, I don’t know.
Or, or maybe it’s to remove yellowness of your hair or stuff like that. I don’t know. Right.
Eric Hileman: [00:55:32] Yeah.
Ivan Chepurnyi: [00:55:37] Because in English it’s called no yellow, but other languages I see it has a zipper graphics, auntie, auntie Amario for instance, or auntie Glo. So it looks like it’s not like no yellow. It means like against or anti yellow. Stop it.
Eric Hileman: [00:56:00] okay. Don’t, yeah, prevent it from happening.
Ivan Chepurnyi: [00:56:06] Yeah. So it’s probably my, maybe it’s a something related maybe to coloring your hair or something like that.
Eric Hileman: [00:56:13] Coloring your hair and then how like maybe chlorine pool water affects your hair somehow. Like it.
Ivan Chepurnyi: [00:56:20] Yeah,
Eric Hileman: [00:56:21] maybe washes out your color or I dunno
Ivan Chepurnyi: [00:56:27] and here is you know, like if you accidentally just click on Ronald was a thing. So you’re already on select an option. And this is just worse for conversion because customers, yeah. Well, what kind of required feel to you? You just, you just want to add to cart, you don’t want to click around.
Eric Hileman: [00:56:48] Yeah.
Ivan Chepurnyi: [00:56:48] So yeah, in general it, the website design is very nice.
I really like it’s minimalistic structure, so it’s not overloaded with graphic is that really is very nice for mobile devices. And so I’m like, they have very, clear, you know, call outs like Zay health, no rounded border. Sureno Peng, just collars scheme, and it’s plays very well. Was a designer. I really liked this kind of structure.
There’s, the only problem is I’ve gotta look, so I would buy their products. If, I wouldn’t have to click on the color and one size before I didn’t took art. You know, like on the product page here is preselected, but I don’t want, they want to go to product page. If I want to add this mirror to a shopping cart, I just want to have a button here, add to cart and all.
I already convinced as a customer, Hey, I want the wisest meter
Eric Hileman: [00:57:56] in baby pink cause that’s your favorite color.
Ivan Chepurnyi: [00:57:59] Definitely.
Okay, cool. And did you, did you see it?
Eric Hileman: [00:58:09] No, no, I missed that. What happened? Oh Whoa, Whoa. Yeah. It looks like it’s right. And then at Oh wow. What’s,
Ivan Chepurnyi: [00:58:21] Oh, let’s add it to the shopping bag.
Eric Hileman: [00:58:29] Whoa.
Ivan Chepurnyi: [00:58:30] What?
Oh, I think it’s loading. Overlay.
Eric Hileman: [00:58:38] the overlay darkens it. What’s, what’s.
Ivan Chepurnyi: [00:58:44] What’s, no, no, I mean, the overlay lightens it. Look, let’s, let’s turn a super nice feature of, Google Chrome, and here we’re gonna a low end small bile network to us. We get to enable it. So . Let’s see what’s going to happen here. I hope I’m still recording just in case.
Yeah, editor friend is still recording, so now you will see you, how it works. Probably I should have just chosen the regular mobile to your mom. Well, yeah. Hello on mobile isolation. Yeah. It wouldn’t meet to her. Mobile is
What is the stakes by a lot of times here,
Eric Hileman: [00:59:56] you know the speeds for these.
Ivan Chepurnyi: [00:59:58] Oh, what you see is because there’s this slow lot a thing that’s overloaded here. but I know why is it color is different because it’s from, I mean, you’re okay. So probably the color code is correct, but, when you take a product picture, you have.
and also how shadows is. It makes it a, a different, actual, an actual color coat of the, metallic paint or whatever is used or was there,
Eric Hileman: [01:00:32] yeah.
Ivan Chepurnyi: [01:00:41] shall we take a look quickly into the page source and just to see if it’s full with different inline stuff? And it looks like it is,
well, why do they have. Sessions storage a bowl of fuel because it looks like safer and storage, political . because, session’s storage and local storage is out of the box available in all major browsers. Perfect. Already for a long time, I remember Zillow only browsers, it doesn’t support it is internet Explorer seven or even eight
Eric Hileman: [01:01:56] cool. Should we wrap it up and then we’re going on an hour?
Eric Hileman: [01:02:52] query UI
Ivan Chepurnyi: [01:02:58] Yeah, it looks like is that switch render? It’s not the standard thing, so let’s
Let’s find what it actually
or maybe it’s just another thing I bought. I never seen it before, but here I see that there is some kind of switch render or UI component. Actually not component. It’s IMD. Module four requires, yes, so it’s switch render and it’s applied probably as a switch or on their legs at, but it looks where we’re like, you don’t need to have a duplication of the cold legs that you can get a rate.
So I, actually do the same for this one. So if you take a look here. when you take a look at, the rendered output, you will see that there is, for instance, a lot of by bottom container is that there’s a lot of actions happening there. And there’s a lot of, yeah, by books, rapper for instance.
Here you see a product add to cart form and a lot of dome. But when you actually. take a look at the page source. How do I open the page source? Oh yeah. Here it is.
And then the just instant deviates, a Z configurable render, Component is that collects all the needed Jason buy boxes from the and attaches them to a product, and Zeus one saves a lot of bandwidth. To be sent to Zante user because you don’t need to copy paste the same piece of HTML. Your job’s going to rate it in, in a user browser.
So it’s also good for front end performance and for people who have limited internet connection.
Eric Hileman: [01:05:46] Very cool.
Ivan Chepurnyi: [01:05:47] Okay, so that’s it. I think, We are good with this episode. It was very interesting case to take look at because in general, yes, they have performance issues, but most of the issues are actually Magento or issues.
And, the general issue is that this happening outside of Congenta is a top menu and the rest of the things are just and there are all sorts of things that are related to configurable products.
Eric Hileman: [01:06:18] So I’m poser auto load.
Ivan Chepurnyi: [01:06:22] Yeah. Composer afterload it’s meaningful, but the removes, you know, a I operations on a PHP file inclusion.
So it’s just good in case if you have a lot of concurrent connections, you know, not to overset your a to your drives.
Reading has a PHP file. So
Eric Hileman: [01:06:47] yeah. Stop killing our IO.
Ivan Chepurnyi: [01:06:50] Yeah, so looks like my
Eric Hileman: [01:06:51] camera battery died. Ah. All right. Well let’s wrap it up. So we’ll, we’ll link up the show notes, how to contact us. ally. Load in the loop. you can add us on Twitter and, we’ll link up our own contact details in the show notes.
Anything you wanna add for closing remarks before we head out?
Ivan Chepurnyi: [01:07:12] I think just, use the appropriate product types for proper, use cases. So if you have some automated process, they take an extra step to make sure. Is that. You don’t have something, that will confuse your end users and then just take extra step and create an exception, like simple product.
Eric Hileman: [01:07:37] Yep. That sounds good. That would improve conversion for now. We’ll talk to them about that and see, maybe they have some, I don’t know, technical reason for that, but we’ll see. Bye everyone.
Ivan Chepurnyi: [01:07:49] Bye everyone.
Other Articles You Might Like
Load In The Loop: Episode 15 – Liberty Mountain
Load In the Loop: Episode 15 is here! Join Eric Hileman and Ivan Chepurnyi as they identify and fix some performance issues for Liberty Mountain, a wholesale distributor of technical outdoor products and climbing gear. What will…
MageMojo’s Secret Sauce
So you’ve read the offer we’re presenting and you’re thinking it’s too good to be true. This can’t be real. How can a small company I’ve never heard of possibly offer more than the big guys I…