Case study and immediate results of taking out unused CSS from a page

Lesson Details:

Video Transcription: In this video, I want to show you a case study that I'm gonna walk you through how I go about optimizing a page and having immediate quick wins this video is brought to you by Appy Pie’s Academy. and I'm gonna start with the page that I have not started optimizing but one small caveat the only thing I did on this page that I did optimize is that you see the top on the left side right under the word problem you there is this background image right here with the foreground there's the text how to prevent employees from stealing clients but really the background image is the image I compressed it so it's already faster loading and it's on top here so it's faster but other than that I have not started to optimize it and you can see the report that I ran performance 26 and the worst part about it is it took eight seconds for the first meaningful paint and when you get into the problem areas the suggestions they have is they say first and foremost look by how much of a wide margin they say reduce render blocking style sheets and if you expand that they tell you which ones they reduce now I've gone ahead I've talked to my designer and the process was that I tested by elimination and I said hey some of the style sheets here and I'll make this bigger for you so you can see some of the style sheets here are ones that my designer was able to quickly say hey you're not using them in this page for example these to the owl carousel the the second from the bottom and the third from the bottom those are for some specific tasks that I'm not using this one that's lobster that's to make this text pretty but it's not that pretty in a way because even though it's kind of pretty the Prada it is in a sense problematic it's a little bit hard for some people to read so I decided to take this one out and also the icon moon I'm not using icon issues on this browser now I totally have been ignoring these issues and it might be the same for you if you've gone through multiple redesigns this might be something that happening to you I had no idea that I was using that I was referencing so much CSS files that I'm not even using so now I'm going to show you results of this after I go specifically I'm gonna take out style I'm gonna take out lobster CSS the out the two owl and I might take out one or two other ones after some research and I'll show you comparative case study of what happens if you how much of speed gain you get just by taking out those CSS files now I've taken out those CSS files and I've run the same audit on this file the only difference is that there's missing CSS files so you can see the difference you can see that here my overall performance score is 42 this is a performance score that's calculated by Google is not a specific metric it's not a single metric but it's an overall score and this is the previous test that I ran maybe just ten minutes ago right before I started filming 26 you see we have a huge performance boost from only removing a couple of lines of text very easy and you see that it took originally eight seconds to start loading and then 15 minutes 15 seconds to finish loading and then right away after this test we have a very very significant boost in the initial load and the initial load is the most important because that's where people already have some content and people who are visiting your site already have something to do on your site like start reading the title or the heading and looking at something at least to occupy themselves so that they don't get bored and leave okay so that's a super super important item and right away we almost double the speed we more than doubled the speed and the users are gonna you're gonna experience tremendous boost and engagement just from this now if we go to things that are being complained about you see that here in the original time that we ran it the main complaint was by far we had to reduce render blocking style sheets now we have reduced render blocking style sheets that's only a third worst problem we really minimize that problem and you see it only took a sec and one point one second okay and before that what was happening is it was taking four seconds so this problem we almost get rid of our problem for for by and large and so the next thing is pre loading key requests now this is something else that it's complaining about and we're gonna see if we can fix that in the future but also now something to focus on as well is reduce render blocking scripts and we're gonna attempt to tackle that shortly.