NitroPack Review – Worth It Or Too Blackhat?

0:00The Quick Method for Creating a CrUX Dashboard

I'm going to show you how to create the CrUX dashboard report we talked about in our NitroPack review article. There are two ways to do it. The first is the quick and easy way. Rick Viscomi has created a tool that will create the report in one hit. I'll link you to that in our article, and at the bottom of this video if you're watching on YouTube, because it's kind of a funny GitHub link.

You basically go to this link and just type in your web address. It needs to be the full primary host name or primary web address of the website. If you type in HTTP or something different, it won't work, so it has to match exactly what the site is. I'll just do ours: https://www.wpspeedfix.com. Copy, paste it, whatever you want to do, then press enter. It will take 10 seconds and it will build that Google Data Studio report.

So that's one way to do it. This report will auto update on the second Tuesday of each month. You'll see at the bottom here it says that new datasets are released on the second Tuesday of each month. With this method of creating the reports, you won't be able to edit the report much or share it. I think you can share it, but you can't embed it. It's a little bit limited because it's building it off that API.

1:10The Longer Method: Editing, Renaming and Sharing the Report

If you want to build the report the long way and have the ability to share it, mess around with it, and change the title and so on, use this link, g.co/chromeuxdash. There are a couple of steps to doing it, but it's pretty straightforward. If you're doing this for clients, you probably want to use this longer methodology because it allows you to rename the report and share it. It will bring up a screen like this, so again just type in the web address. Same thing, it has to match exactly.

You also need to have enough traffic. If you don't have enough traffic to the site, this won't work. For a brand new website or brand new domain, you're not going to have any data, so it's pointless. If you've just recently switched the host name, that might be problematic as well, because it might not have enough data for that particular host name. If you click this button here, it will allow you to edit this report, so you can change the URL in the report, but for this short video I'll do that. I'm going to hit connect, and that will bring me to another step that allows me to edit some of the report parameters.

Just wait for this to catch up. I don't really care about any of this stuff here, so I'm just going to go create report, but if you do care about it, you can mess around with it. So create report, create report, and then it will do essentially the same thing. It creates the same report, but I have a bit more control over it, so I'm able to do more edits. I can change the name of the report here. If I click the edit button, I can change the name there, so you know, WP Speed Fix report, whatever. I can also share it, and I can do all sorts of stuff with sharing it with clients. You can also set this up to be emailed. Somewhere here there's an option to email it on a regular basis. I can't remember where it is, but you'll figure it out.

3:04Reading the Core Web Vitals, FCP and Device Tabs

There are a bunch of tabs here in the report. Just a quick walk-through: this is the overview with the three key Core Web Vitals metrics. You can also choose the date here, so as long as there's enough data, you can choose the date where you have enough traffic. If you don't have enough traffic, if you're borderline, it might skip a month, so if you're missing months or dates in here, it's because you didn't have enough traffic. You can also select by device, so you can have phone or desktop.

You can see the different Web Vitals metrics here in the sidebar. Some of the other metrics we actually care about are time to first byte, so we want that looking good. We want these green, as under half a second, so that's important, because that's going to reflect how responsive the user feels the website is. You can see here month on month, and I'm running this in December 2021, so you can see I've got data for last month.

FCP time is also important. That's how quickly the site starts to load, and green is under 1.8 seconds. This is really important, because the visitor wants to feel like the site is loading quickly. If this is poor, they'll be staring at a blank screen for some time. Even though it's not a Core Web Vital metric, it is an important metric for basically the feel of the site speed.

You can see here where we've actually developed some new optimizations to improve this. Earlier in this year our FCP time wasn't that good, because we didn't have these optimizations we created. We do have an article on optimizing FCP time where we talk about that as well, if you're looking to DIY. This onload metric here is the more traditional load time metric. It's probably not that important anymore in a Core Web Vitals world, but if that matters to you, it's there.

You can also see the breakdown of devices that are hitting the site. I'll just change this to both, because we're filtering it. You can see there that this has actually gone up. It used to only be 10%, but now 25 to 30% of our visitors are on a mobile device, which I think last year was only floating around 10 or 11%. So that's interesting.

4:58Running the Report for Competitors

You can also run this report for competitors. If you have competitors you want to keep an eye on and see what they're doing, you can actually get some of this data. We can get all of this data on them. You can run this on any website, so long as it has enough traffic. That's pretty much it. I think that's self-explanatory. Updates come on the second Tuesday of the month, thereabouts. Sometimes it's a little bit late, and you can create as many of these as you want.

I'll leave you to it. We would strongly recommend setting up this report and watching it on an ongoing basis if you do want to try NitroPack. Set up the report first, get a snapshot of where you are today, and then try NitroPack if you're kind of on the fence. Anyway, I hope you found this valuable.

0:00Checking the Console for JavaScript Errors After Enabling NitroPack

We're checking the developer tools for errors around JavaScript when you optimize with NitroPack. I've just gone and grabbed one of their customers from the NitroPack website and loaded up their website, DevRex. I'm on this page here. The way you use this is to right click and go to Inspect.

0:22Reloading the Page and Reading the Red Errors

The developer tools will open here, and we want to be on the Console tab. You can see that there are already some errors, so we clearly have an issue here, but I'm just going to reload it anyway. If you hold the Shift key and press the refresh button, that brings down a brand new copy of the page, so in a sense it flushes the cache. Now there's nothing here, but as soon as I move the mouse you'll see there are some errors.

That's one of the optimizations they're doing. They are pausing or delaying JavaScript until you use the mouse or interact with the site, which is a common optimization, and WP Rocket has a similar one as well. What we want to avoid are these red errors. Usually when there's a JavaScript error you'll see something like "Uncaught ReferenceError", which means the JavaScript is probably loading out of order or has some issue there. So there's definitely something wrong with this page, and it's causing a problem.

1:08Separating a NitroPack Problem From an Expired Plugin Account

There are also some issues here with OptinMonster. In this particular case I don't think NitroPack is the problem. It actually looks like they have a subscription to OptinMonster that's lapsed or is no longer active, so that's why these are throwing up some 404 errors. It would appear that this is a separate issue to the NitroPack one, related to an expired or an old OptinMonster account.

But that's what we want to avoid. Any time we see red in this Console tab it's a problem, and it needs some troubleshooting. If we click into these errors, it'll give us more information on what they are. You can click here to expand it. It's not really going to give us many insights here, because these are optimized JavaScript files from NitroPack. If we click into them, you can see the number after the colon on the end is usually the line number in the code that has the error. If I click that, it tells me it's this particular file here, and I'm pretty sure this file has to do with WordPress authentication.

So something is up there, and if users were logging into the website, which it doesn't look like they are here, that could create a problem. I think it's something to do with the password complexity bar or something like that, but that's just to highlight what we're looking for. If we're seeing red here after turning on NitroPack, then we've broken something, so we need to make sure that this doesn't happen. We might need to wind back and use less aggressive settings, or exclude those files from optimization.

I hope you found that useful. If you have any questions, just post in the comments below on this video and I'm happy to come back to you with more detail.