5 Minute Website Optimization Roadmap | Mark Ryba | HubSpot Developer Day 2020

Hi, my name is Mark Raiba and I'm a Senior Developer with SmartBug Media and I'm so happy to be here with you on Developer Day 2020. It's my favorite day of the year. Definitely miss seeing all of you in Boston, but glad we're able to have this virtual Developer day this year. And I'm going to be presenting a quick five minute website optimization roadmap presentation for you today. So let's go ahead and jump into. We are short on time. We're gonna be focusing on three main areas today, what Google wants to see from our website pages, coming up with a plan of attack to improve those pagespeed insights and Lighthouse scores. And number three, some common fixes and best practices to rank well on these tests. So number one, let's talk about what Google wants to see from us. And we're gonna focus here on the concept of core web vitals. And essentially what Those are are KPIs key performance indicators, ways to quantify and score user experience for Google on the web. The quote here on the right is from web.dev which is definitely a resource we should all be looking at in terms of performance online. But really, if you want to score well on these, on these tests, you can really focus on two key areas of what Google wants to see. Number one, they want to see their website's work on the lowest common denominator of users. So users using 3G connections, slower connections on mobile phones. If your website works really well for them, you're probably going to do well on most of these website vitals. And number two, making sure that your website isn't annoying. So not adding in popups or other areas or elements that introduce friction to the user experience. So talking about core web vitals, let's go ahead and jump into the big three. And those are largest contentful paint, first input delay and cumulative layout shift going down the line. Largest contentful paint is going to be how long it takes for your page to load the largest element. So usually for us this is going to be hero images making sure that our hero images load in very quickly. First input delay is how long it takes for a website to become interactive in terms of inputs and links. And cumulative layout shift is how much a layout shifts after a user requests it the first time. So loading in a page and then we've all had that moment where we tap on a link and then the layout shifts and we accidentally clicked on something else. So making sure that that doesn't. So those are the big three core Web Vitals. Let's go ahead and get a little bit more tactical and implement our plan of attack. And that all starts with meeting your new best friend, Google Lighthouse. Let's go ahead and jump into a demo here. I have brought up a local coffee roaster for me here in Maryland and you see they have this very pretty website, a lot of big images. So I went ahead and ran a Lighthouse test on this site and you can get to this in your dev tools by going all the way to the right. If you're on a Chromium based browser going to Lighthouse and then you can run a new test with this plus icon. Or if it's your first time loading it, there'll be a button around here and you'll see once the test runs, we have all these numbers for the performance of our site and they're bucketed into these different areas that are pretty easy for us to analyze as we go down to performance. This is really going to be the main focus for us today. Here are all those key core web vitals that I talked about earlier, refactored a little bit, but primarily you got first contentful paint, time to interactive and cumulative layout shift. And my favorite feature of Google Lighthouse right now is this C calculator button right here underneath. It's a little bit hidden, but if we click on that, it's going to take all of our scores and they're going to populate them into this calculator to really give us a visual as to what's going on. So we can see here which vitals are weighted more than the others. And what we can also do is see how much focusing on one core web vital is going to improve our score. So right now it's taking 12 seconds to the largest image to load on this site. But let's say we could get that down to 1.5 seconds. That's going to take us from an overall score in the 50s to an overall score in the 70s on mobile, which is a big improvement. And then from there, as we invest more time into optimizing the site, we can bring down the speed index, optimizing some deliverability, making sure that our assets are loading in in the correct order so they aren't blocking anything. And that's going to help both time to interactive and total blocking time. And you'll see that will allow us to really focus our effort and ultimately end up with a higher score. So this is kind of how you identify what needs to get done. A couple other points to make really quick, here's a screenshot view of how your website is loading in. So we want to make sure this is kind of a smooth building process and isn't jumping significantly from one image to the next. And then we also have this opportunity section that talks about some more tactical things that we can do to improve our scores. So let's jump back into our presentation and go over some common best practices that will save us some time. So let's go ahead and jump in here. I'm again bucketing these based on the core web vitals so ways to improve Largest Contentful Paint Number one is to lazy load and properly size all of your images. That's going to really improve your user experience with pretty minimal effort on your part. And it's something good that we should be doing anyway. Leverage CSS rather than rasterized images where it makes sense. So if you have a pattern background, maybe use CSS to create that pattern instead of an image and then these get a little bit more tactical and these are things that you really want to do when you really want to get into the 90s properly serving your CSS and JS assets to make sure that they aren't render blocking, so deferring them where available. Loading in your critical styles, scripts and assets first. So all the content needed for that above the fold view, load that in at the top of the document and then you can use something like Intersection observer to to then load in supplemental content as your user scrolls and essentially defer that network activity until it's actually needed. Looking at first input delay bundle your CSS and JS into fewer files. So if you can use the Include in Hubble to make sure that your code is organized but also bundled correctly to reduce the number of requests, that's going to help a lot reduce your reliance on third party libraries. And this one's really cool too. If you Google Chrome's coverage tool, it'll show you exactly how much of each one of your style sheets is actually being used on a page. So a good example here might be something like Font Awesome. It's something that we all love to use and the impact is a little bit negligible because so many people have it cached. But at the same time, if you're only using two or three icons on the site, why do you need to load in the entire Font awesome library? So really kind of thinking about these things and making sure that we're only loading in the necessary content and styles and assets that our users need. Finally, you can use a tool like Gulp or Webpack with the plugin like UNCSS or purify CSS to get rid of some of that supplemental CSS content automatically as you're developing. Finally, cumulative layout shift again making sure that your dependency load order is optimized. So loading in that critical content and styles early in the document is going to help a lot here. And also just making sure that when you do load in supplemental styles that they aren't affecting the content that has already been loaded. Again, leverage the screenshots that Lighthouse is going to give you and then weigh the cost of things like chatbots, modals, etc. Really anything with kind of marketing value we want to weigh against the performance because a lot of those kind of features are going to negatively impact our sites unfortunately, and that includes CTAs. So let's go ahead and jump into some final thoughts. We're running a little short on time, so really quick, these are kind of my three key takeaways that I want you to be taking away today. Number one, start strong. Garbage in, garbage out definitely applies when we are building websites to perform well on these tests. So starting from a clean slate like the HubSpot CMS boilerplate is going to help a lot in terms of making sure that all the code that you write is actually being used on the site. So again really try and avoid using those libraries and also leverage the latest CSS and JS where you can so things like Position Sticky, CSS Grid and Intersection observer allow us to use native code and native tools in browsers instead of having to load in libraries like Bootstrap or Waypoints JS for animation or different scroll based triggers. Number two Again, build for the lowest common denominator of user. So these are really who the test is being built for is to make sure that websites work for these slower users on smaller devices. So if you design mobile first and you make sure that again things are loading very quickly, then you're going to have a lot less headaches later when you get into the optimization process. And finally, don't let these numbers distract too much from your goals. Obviously we all want a site that ranks in the 90s or a perfect score. But again, weigh the cost of these marketing and sales features because a lot of the time they do come at the cost of performance. But at the same time, does a two point Google test score really improve your user experience that much or are you Ms. Excuse me, are you missing out on potential revenue on the marketing or sales side by taking away this feature? Taking away this extra path for your users in the example of chatbots and different analytics tools. So really think about what your goals are on the page and communicate that with your clients. Say all right, we can add this feature, we can do this, or we could also optimize and get this score, but we can't really have both. Or if you can, you'll need to kind of invest in a way to accomplish both goals. So those are my three big takeaways. Start strong, start clean, build for the lowest common denominator and really be smart about what realistic Google Page speed goal you want to hit versus the business development goals of your organization that you want to see out of a website. So thank you so much for joining me. It's been a pleasure. As I said, Developer Day is one of my favorite days of the year and I look forward to discussing more with all of you in the developer ama. Thank you so much. Bye.