Product page performance problems

Key Takeaways

foreign how did that happen hello and welcome to another episode of SEO fairy tales with me today is Ruth messfon you are a software engineer at Zillow and you love leather crafting that's an interesting Hobby and you also play board games so that's uh that's something that I can connect more with but you have to tell me after this episode what leather crafting specifically is it's an interesting one yeah I'd love to talk about it but we are not here to talk about that unfortunately uh you brought me an interesting technical SEO case study where you had to investigate an issue what was that how did that start [Music] yeah so what we realized was on our product page it uh we weren't getting a lot of users staying onto the page specifically the product pages so the product pages is similar to like uh if you think of like Amazon's product page or eBay's product page where there's uh the product and the information and all that stuff and then they could purchase but they kept on dropping off so uh when I investigated it uh what I did was I one checked like where they were dropping off like in like Google analytics and whatnot right um because it was also decreasing our SEO a bit uh and saw the like how long they were like taking in regards to load and whatnot onto the page I was like oh I think this might be like a latency issue that we have for real [Music] foreign [Music] that out so you went to analytics and you saw like you filtered for the product pages and you saw that they dropped off real quick yeah the product manager said was looking into the analytics aspect and then I asked if that if he could like deep dive on it and he like pinpoint like oh it looks like they're here specifically but it's like it's that they're not clicking check out or anything they're just like leaving and it seems like they're it's taking longer to load here I was like oh interesting foreign [Music] so when what I did was I use like we have like a lighthouse script so it rendered the the page like as many times as you want so it's like oh render the page 500 times uh just so I could like make sure the data is accurate because you know Lighthouse kind of changes every time yeah so we did that for the desktop page and then the mobile view because that was that was the new thing that we had was it being mobile responsive ah okay so you made it responsive for mobile users and how did that go so what we realized was that the when we changed it to mobile responsive um we still had it was really slow much slower than what we had prior where we had like a separate mobile like page for it [Music] and so when we investigated it uh we realized a couple of things one uh that are plugged like we had a lot of plugins uh and packages that was bloating bloating yeah the the latency the time and we're like oh that I think that might be a big cause of it there's like this hidden costume right it's like oh that's easy to build this feature if I just pull in these 25 different packages that do one thing each yeah oh man it's like oh there's like a bar chart plug-in let's just use sense of creating our own right which to be honest usually is a good idea because just Reinventing the wheel over and over again okay so that was that the issue then so there was a couple of issues so yeah so that was one issue [Music] second issue so when we have when we have a loading page or we're loading a specific part of the that page specifically we have like a uh like a cute little like loading Apple that shows us loading oh that's cute though yeah except that was a gif oh that's not cute though no so uh we didn't realize uh that a gif is like at least like a thousand images going over and over and over again so think about it trying to load the page while loading a Brazilian images yeah I've been there done that because the the loading gifts are so easy to implement but then also so not great [Music] the third one part was that speaking of images we realized that like we were trying to I guess uh load the images instead of it being lazy loaded so it's trying to load everything at once which is also causing uh latency issues true because the browser only has so many connections and then if they're exhausted you basically just add onto it and then this this waterfall kind of oh my okay so so you had all these things identified but to go back a little bit so you said you have a lighthouse script yeah so you're not doing it in the browser where you actually like click on and then actually run in so how does the script work how does [Music] so yeah because I used to actually do like the light like of course yeah yeah this doesn't this is uh it's not a long-term solution yeah like to be fair I modified this group but I didn't create the script it was like shout out to Ben uh who actually did that he was like I think there's like a more efficient way of doing this and he create and I was like this is awesome so how does how does that work do you like run it as a node.js script from the command and so what you do is you put in um the actual page so what we usually do is there's two ways of doing this so one is that you can put the link of the the page right and then you preface if it's mobile or desktop and then it just runs through like as and you preface how many times you want it to run and it'll be nice yeah over and over again and gives you like aggregate step nice lovely Excel spreadsheet so you can see all the data and then like if I wanted to I could put in graphs and whatnot which is great and the second part or second wave which is what I did to make sure that latency did or theoretically latency should just decrease was that you can put the uh the main website or the main page and then if you have like a branch site or if you have like a uh like a testing Branch you could put that link in there and so it will run both of them for x amount of times you want and then you could compare the two obviously it gives you the diff like so the the production side has this as our latency and then we have the development or staging system that does look different in hopefully faster yeah [Music] oh that's that's pretty cool that's amazing so use Google analytics then use the lighthouse script and then how did you figure out which packages were or plugins were contributing yes so um honestly I forgot what it's called but there was a a way to be able to see all the packages and how big they were on our page I'm like blanking out on it are you bundling with like webpack yeah so there's like the webpack bundle analyzer or something like that yeah yeah and and so with that like blocks unnecessary oh no like bar chart which is used in these five pages and actually measures like a megabyte or something yeah so like one of them was actually that it was like this huge plug-in that we just added that plug it in for a bar chart and we were like for one page like I was like oh this is useless first so what we did is we removed that and actually built out the bar chart because that was actually much cheaper um and then the second thing was uh icons like uh favicon or whatnot when we used like the same five of those of those icons and you have the whole thing oh yeah you can I think is isn't it like a paid feature or something but that's a paid feature that will pay off itself basically in an instant right yeah so we're like oh we can actually have create our own icons like and utilize those and not have that anymore and then we just reduce that [Music] foreign [Music] plugins and see like oh we need this plug-in however we don't need all of this we just need specific low Dash is also a one like yeah yeah it has a bazillion functions and you need five most of the time yeah it's true so you did tree shaking did you do bundle splitting as well so that you had different bundles for whatever yeah that's that's a fun one that's hard though it was I okay so yeah it's hard but it's like I love konmari so I love like being said Okay so let's get that thing out of here okay that's pretty cool it's like oh let's can we simplify this we can simplify this let's get this out of the way and were you able to actually drop the the loading uh time for mobile users then yeah so we were able to I think drop the time by the uh what was it 15 or whatnot which is great yeah that's pretty awesome and then it was like we were definitely seeing or based on what like the C the marketing team said oh we're we're seeing an increase of people who are around the products it's not because you're happy I'm happy exactly we made it better for our users we made it better for the marketing team that's awesome and then um for the GIF we replaced that with like a just like an I uh like a SPG oh right yeah SVG is so much nicer for loading animations that's amazing but I guess you had to have like a designer do that because that's a tricky one and we didn't want to do we're like we're not going to do a uh GIF kind of style or like whatever is simple and if it's like three like dots or whatever but it used to be a cute apple and now it's the dots it's like a it's actually like a circle yeah it's like a spinner yeah it's okay we don't need a cute Apple it's just it's the Cute Apple is Grandma you'll see lots of cute apples okay fine fine okay giving up an apple uh an apple a day it gives the latency away I guess that's a that's a nice one [Music] interesting and and you saw an uptick on on usage and you saw that people stayed longer and everyone was happy in the end that's awesome cool that has been quite a journey hasn't it oh man so is the script available somewhere or do you like publish it on a developer's blog or something maybe that's a good question I don't think it's published anywhere I think that's all internal but I could ask benefits if you want to do that you let me know and we're gonna put it in the description below yeah I'll talk to Ben about that because I'm sure that they like you he would be more than happy to do this it's really really it's an interesting tool it's an interesting choice and quite an interesting tool chain that got you to 15 increase in performance for mobile users that is really really cool how long did this entire process take ah a couple of months yeah I'm not mistaken it was like really like a oh yeah this this is not like a quick fix like the quick fixes are the lazy loading for images um those kind of things it's like that's easy to drop in yeah that's true and even the the gift one replacing that with the like a designer has to to make it but other than that it's easy to like swap in yeah so those were like quick fixes the the bundle the bundle thing that's a yeah yeah that's a longer longer term fix but it's really really cool that you spend the the time and and see the results and that's that's I think what matters in the end but it's important that we mention that because people kind of expect these kind of especially performance fixes to be like a quick easy low-hanging fruit it usually isn't right it usually is a little trickier [Music] all right thank you so so much for sharing the story that was really really cool and uh thanks a lot for being here yeah thank you for having me this is so much fun it's amazing I'm so so happy to have you on on board and for all of you out there um if you see anything in the video description then it was published and you can leverage it yourself if not let us know how you're using Lighthouse are you using the CLI are you using uh some sort of custom script are you using it in the Chrome browser let us know in the comments below and thanks a lot for watching and stay safe and take care bye bye [Music]