A beginners guide to Google Core Web Vitals – Webinar

A big change is coming to the Google Ranking Algorithm in May, and it’s called Google Core Web Vitals.

Unusually Google pre-announced this ranking change to give website owners time to prepare.

This Webinar is aimed at beginners who maybe haven’t heard about the Core Web Vitals change, or have heard something about it, but are struggling to understand how to get their websites ready.

Here’s what we cover

• What is Google changing?
• What is the Google Core Web Vitals update?
• How to test your website speed
• Factors that slow down your website
• How to speed up a slow website
• Introducing NitroPack

It’s important to remember that Google Core Web Vitals is just one ranking factor but an important one!

Webinar transcription

Google Core Web Vitals

So the title of this is, is very catchy. It’s called Google core web vitals, and how to speed up your website. Essentially though, what this is all about is there is a big, big, big, big change coming to how Google ranks websites in about 43 days.

I’ve got this little timer here. Yeah. 43 days. So we have 43 days to prepare for this. Google are making a big change to how they rank websites and they pre-announced this a while back, but time is running short. So I’m going to explain what the change basically. I’m going to explain what the change is.

Break it down a little bit. We’re not going to get very technical, so. This is one area you can get incredibly technical, but I’ve tried to create an easy way to look at this for you today. So hopefully it should be very easy for you to understand that’s the idea. Then I’m going to give you some ways that you can prepare your websites for may so that you’ve got 43 days to prepare them.

And then we’ve got a very, very exciting demo to show you at the end of the presentation. Okay. Does that sound okay? Everybody thumbs up if that’s okay. And again, if you have any questions, please just unmute yourself. Shout at me right here we go. So this is the agenda. I’m going to explain to start with what the change is, what, what does it change in the Google algorithm actually is it can be a really technical discussion, but I’m trying to make it quite simple to understand because so James, yeah, we’re getting some background noise.

So I’m gonna explain what it is basically. Top level, the changes they’re making. I’m going to show you how you can test your website, whether it passes or fails. The Google core web vitals test Google have built a very simple tool where you can go and test your website today and give you annual find out your website school.

My suspicion is. They’ll probably fail. Okay. So, but don’t panic. If that’s the case, my suspicion is most sites will probably fail at the moment. I’m going to explain some of the some of the sort of key factors that might be slowing down your website. I’m going to show you some ways that you can help to speed up your website.

So some best practice stuff that you can be doing. And then finally, I’m going to introduce a new service, which I only discovered about a month ago. But it kind of blew me away more than any other. I’ve been, I’ve been working in WordPress and this area for well WordPress for 10 years or 12 years and online since the internet, really.

And I discovered this service called NitroPack about a month ago and was completely blown away by it. We’ll explain what it does later on, but I was so blown away by it that I emailed the co-founder Diane who’s graciously joining us today. I installed it on my site. Pootlepress there is waiting.

I installed at my site, Pootlepress and, my speed scores went from a fail to a massive pass. And then I tested it on my wife’s website. She’s running a yoga studio and it, again that we had enormous page speed increases. So it kind of blew me away really. So I’ve gone from not knowing much about it to being a massive fan of it.

So I’ve, I’ve invited there in a long today to give you a short demo and explain a bit about how, how Nitropack works. The more I learn about it, the more impressed I am as well. It’s doing some really, really, really clever stuff automatically. So we’ll, we’ll give you a demo of that. It’s very cool. It does.

Is that okay? Any questions on that? We’re good, right? Let’s crack on. So what’s changing.

The Google Core Web Vitals Change

So the big change is that Google has announced that page experience is going to be an important ranking factors factor. So the whole idea is the experience when somebody hits your webpage they’re trying to metrics around that experience.

They’re trying to set criteria around the experience and basically they’re trying to encourage websites to create delightful web web page experiences for their viewers. The key bit that’s changing within that page experience is they’ve come up with a set of criteria, which they’re calling Google core web vitals, which I’m going to explain.

Had this breakdown in a few minutes it’s going to come into effect from May this year. So as I said, we’ve got like 43 days to prepare them. That’s good a while ago. So, so that website owners would have time to prepare for the change, but before we dive into the detail of core web vitals, it’s really important to remember that it’s still just one of the ranking factors that Google is going to be using.

So it’s just one, one of the sort of bricks in the wall of how they rank websites. The other things that if you’ve come on, my previous webinars or courses are still, you know, they’re still very, very important ranking factors.

So, you know, at the top of the list is the quality of the content you’re producing the content length, the search intent, whether you optimize your website for SEO, Whether you’ve got backlinks, whether you optimize for keywords, those are all still really important drivers of your search ranking, but core web vitals is now going to be an important plank of that.

Okay. So how do you test whether your websites pass or fail called web vitals? Well, helpfully, Google has built us a tool, which you can find at this URL, but I’m going to give you a little demo of it now. It’s called the page insights tool and it’s just a website.

How to test your website speed?

Yeah, it’s just a website that you can go to like this. And you’ll see at the top here, you have a box to put your website address in. So this is one I ran a while back from my website and you see I’m passing, but like, I’m going to put in another website here. This is just a test website where I’ve been testing some themes, actually, which I’m going to show you some scores too, in a few minutes, which is interesting.

And then you hit analyze and then this tool will trundle off and it will analyze your website to see whether it passes or fails the core web vitals test. And then now, remember this is a ranking factor, so that’s why this is so important. Yeah. It’s just taking a while for this site. Cool. Okay. So, and this is, this is I’ve clearly failed badly.

This is out of a hundred, so the lower, the number, the worse, the performance. And then it’s going to start off the first thing to notice up here. It’s going to show you a mobile score and a desktop score. And the mobile school will always generally be lower than the desktop school. Okay. So, but these are both.

Not in the green. What we’re aiming for is 90 to a hundred down here in the greens. And these are both failing quite badly. Okay. So you can, you can put in anyone’s website here, you know, you can go and put in a competitor website up here and see how they’re faring. In fact, I put a few famous newspaper websites up here the other day, and they were all failing miserably.

So, you know, it’s not just all of the websites that are going to be failing at this or panicking about this. So that’s the first thing you get this lovely sort of traffic light system up here that Google have made us just tell us very quickly whether our websites pass or fail. And then if you scroll further, further down the page here, you’ll get some more information.

Now, this is where we start to get kind of very technical. And you have to understand some of this stuff you have to, or to fix some of this stuff. You’d normally have to be a developer. Now, most of us aren’t developers. But I just wanna explain a few simple things about how, what these scores mean.

Cause there’ll be useful to you. Yeah, so we’ve got the score here. Now the first thing to say is Google break. And I should say as well, at this point, I’ve been learning about this subject in depth for the last month. So, you know, I’ve, I’ve accumulated knowledge, but they, and if you, if you hear anything that I’m saying over the next 15 minutes, that’s erroneous or incorrect where you interrupt me and correct me please.

Cool. Yeah. So the first thing to say is on this page score here, you’ll see the two important bits of data. What Google are calling lab data and field data. Now essentially the main difference between those is one is a current shot, a current snapshot of your website performance, which is the lab data and field data is a historical view on your website over a period.

Google Field Data and Lab Data

I think of 28 days. Okay. Now that’s the difference. Those two, two results down here might be different. Because if you make a change today, your lab data might be all right, but the historical, field data might still be failing. Okay. So don’t panic. If your field data, isn’t quite up to date, field data as well is based on real data that are taken from people’s browsers.

When they’re browsing your websites, it’s anonymized data, but it’s real life analytics that Google tracks from people real real-world experience of browsing your website. So there might be some changes between those two, but initially the, the sort of lab data stuff, when you’re first making changes to your site is the kind of stuff you’re going to be focused on because that’s, you’ll see an immediate change on that, on that score.

Okay.

Which I’ve explained here for you. Yeah, so things can get really technical, but in summary The kind of broad context of this is Google is trying to reward websites with a good page experience. And with that, within that page experience, we have the core web vitals over here on the left, which I’m going to talk you through briefly in a few minutes, and then you’ve got the other page experience things over here on the right.

Okay. So the, Oh, I’ll start with the other ones. Cause we, we probably know about some of these the most important really well, the ones we can probably understand the most easily are mobile friendly to have a website that’s mobile friendly and have HTTPS. So HTTPS for those that don’t know is that little padlock up here in the browser, it means the site’s secure.

Yeah. If you don’t have one of those then your site will probably show something like on this site here where it says not secure out there and you can get those from your typically your hosting company will be able to get you an SSL certificate. That’s what they’re called. And that gives you that little.

Potluck. Okay. Then over on the left here, we’ve got the new core web vitals, which I’m not gonna dive too much into detail into now, but I’ll explain a little bit about them.

The criteria behind Google Core Web Vitals

And they’ve, they’re quite unhelpful quite hard to get your well for me, the person who they’re quite hard to get your head around, but there’s three, the three main factors, the largest content, full paint the first input delay and the cumulative layout shift.

Okay. In simple terms, what those mean is this one here? Which that means how long does it take the largest element really, to load on your page? Which typically let’s say it’s your homepage. Let’s say you had a big image banner on the top of that homepage that would be measuring how long, that biggest element on that page.

Would take to load into your site. They, and are you, are you okay with my explanations here?

So far impressed by your explanations. You managed to put this in a very succinct term. These are very difficult to get your head around. To be honest, I spent quite a lot of time digging in thinking of the details, but I don’t think Google helped us a lot with this LCP, FID and CLS business so far.

I think your explanation is pretty good, great stuff. So that’s the first one. How, I mean, in simple terms, if you had a big banner on your webpage, how long does that web page takes to load into that page? Okay. The second one is the first input delay, which is as, as far as I read it is interactive.

How quickly can somebody interact with your webpage? Okay. And then the third one, which you probably all experienced, but never, never seen it explained in such confusing language is communicative layout shift. That means when somebody, when something loads on a website, does it move around after it’s first started to load, you’ve probably experienced this where you’ve, you’ve loaded a website and you go to, you know, you might be on your phone and you go to click a button and the button suddenly moves down, down under here, somewhere new.

And now you’re sort of trying to find it. Everything’s sort of starting to shift around on the webpage. So, and they call this broadly visual stability. So does, you know, is the, does the webpage move very much after it loads? And, and it’s measuring all these things and Google is now going to measure all these things and they’ve helpfully helpfully giving it these very confusing acronyms to do it, but you can see these, you can see these results on this page here.

Okay. So you’ve got them here and it tells you this site here is, is failing badly. It tells you here that you can see whether you’re failing or passing these things. Okay. So you can, you can track them. You can see you’re failing. You’re not necessarily going to be able to do anything very easy about it, unless you’re a web developer that can dive into code.

Okay. But we’ll come to that. And then I’ve just put some more explanations on you on a few on this slide, if you want to a bit more detail on it. Okay. So that being said, there are some, there is some and I, I suspect that everybody on this call today is probably a WordPress user and actually most of these.

Some ways to speed up WordPress website

So there are some things that you can do that will help some of these metrics and you should be doing these things anyway. Really the first thing, what, one of the most common things that’s going to affect the largest, this LCP thing. Which is the largest piece of content that’s going to load onto your site typically might be your images.

They’re typically probably going to be one of the largest things that’s going to load on the page. And it’s one of the most common things that I see on websites that I made the supporting or helping with is that people have massive file sizes and that can really slow down the loading of those images.

It’s really common to see it. It’s a very simple thing to sort out. There’s kind of two tips I’d give you the first is before you upload your images to WordPress size them to the right pixel size. Okay. So if you’re imagining your website, you know, the average website might be. So let’s say it’s 1500 pixels wide and you wanted a full-width banner.

Then I would size that image to 1500 pixels. Why, why before I even upload it into WordPress and you can do this with lots of different software, that’s free, freely available. If you wanted your image to be half the size, then you would size it to about seven 50 pixels as a rough guide. Okay. That’s the first thing.

And sorry, the other thing to say is if you take, if you take a photo with a digital camera, a good DSLR, or even an iPhone, you know, your, your file size, your pixel size could still be, you know, five, 6,000 pixels wide, which is, you know, it could be six times too big in terms of file size. And even if, even though in WordPress, you can visually move that down within the editor.

The file size will remain the same. Okay. So you want to get into the right pixel size before you, before they get anywhere near your website. Once you’ve done that. There are some tools that you can further compress your images. This is what I’ve historically used. It’s called Tiny PNG.

This comes as a plugin to WordPress, or you can, you can, you, or you can go to their website and use it. You just upload your photo to their website and it will create a much smaller version of it in a compressed format, which you can use on your site. This is also a really useful tool, by the way, if you’re using, you know, things like MailChimp or you’re sending you’re using any other tools to send the photos around, cause it gives you fantastic compression with no loss of quality.

In my experience, you can also, as I say, you can use this as a plugin on your site and as you upload your photos, it will compress them for you. You can also use it retrospectively on your WordPress websites as a batch process. So you can install it as a plugin. It it’ll run through your site and compress your photos.

So that will get you. That’ll do some good. It won’t do everything, but that’s definitely going to do some good. This is the second. This is the second. This is the second biggest area of potential improvement that I see on lots of sites that I’m supporting too many WordPress plugins. You know, here’s an example.

This image was so big. I couldn’t fit it on this. Couldn’t fit on the page. I see lots of sites with just too many WordPress plugins now. There’s no, there’s no real way of saying how many plugins are too many plugins because they all do such different things. So I would ask yourself the question always with plugins.

Do you really need it? Is it essential to your website? Because every plug in you add will have a technical overhead to your site. And I see lots of sites where people are using plugins. And they, they don’t, they just don’t need them. So my advice is have a plugin purge, you know, go, go to your site to an audit, look at each plugin.

Are you using it? That’s just part of your sensible workflow that you can be doing on your site. Can I ask a quick question, please? Just going back to images again you saying about obviously resizing your pictures, but I’ll put that can be dependent on screens, screen resolutions. Cause obviously you’ve got some screens that are retina and 5k and all of that kind of stuff.

And if you were to say, have a banner at 1500 pixels, is that going to look terrible? 5k retina screen at full, full screen. So requested then do you want to jump in there or is that there’s several things that you could be doing here? There’s definitely a. Very good reason to pay attention to you. What size of an image you’re serving two different viewport.

So in essence, different devices I can sort of giving you an idea of how we solve that problem. And there are other tools out there that would be focused just on doing that job. So there are several things you could be thinking of here. One is depending on the device that you’re user, you’ll be seeing your images on your whole page on you’re able to preemptively size something called a container container.

The container is basically the place holder, where your image is going to go into and based on that, it is possible to. Sort of know in advance, Hey, I need a container that’s this bag or that bag. And I’ll be able to sort of automatically guide the process of sizing later on. So we call this preemptive image sizing.

This is something that’s definitely doable. There’s also something that’s called adaptive sizing. So that will be basically adapting to what I just mentioned the size of the different screens. And when you take it out together with compression that James talked about and you add lazy loading to it, and you might also want to be thinking about converting your images to modern formats, there’s something called a web P format.

That’s actually one of the best things you can use out there. Wipey usually allows you to get a great compression rate whilst. Maintaining the visual quality that you’ll be otherwise be getting. One thing to look out there [00:20:00] is not all browsers support where Pete, so one way to go around this issue will be an sort of automatic fallback if the browser doesn’t support where Pete.

But that’s definitely a good solution. Something to think about it is web as in the web and a P added to it, the wet B format. Yes. So we’re gonna, we’re gonna give you a demo later on which okay. NitroPack solves some of these problems automatically, which is one of the reasons I’m so excited about actually back to plugins quickly, you know, you might do, but one of the things to say about plugins is you might do this plugin purge on your website, but you might have to use that plugin.

So I’ve got some slides I’m going to show you now I’ve just taken a website and I’ve stuck it on just some cheap shared hosting. And then, then I’ve done some speed tests on it.

So this score here is running a very fast theme and it’s just, it’s just running WooCommerce, but it’s still just with woo commerce running, which for those that don’t know is the largest e-commerce plugin in the world, then it’s scoring, you know, quite, quite low on the mobile article.

The desktop, this tab here is better, but the mobile is still quite low. So this is just to say that, you know, you might have to use that plugin to drive your website. So getting rid of plugins, isn’t always a thing you can do. Okay. Then we come to slow themes, which is another common reason why your website might be slow.

Okay. So what I’ve done here, I thought we were going to play a game actually, but what I did on this cheap shared hosting, I, I took some of the most popular themes out there and I just, all I did was install a theme, no plugins whatsoever. And I just ran some tests. And I’m going to show you what these themes.

Now, some, some of these themes you would have heard about. So here we go. I’ve got about, I think I’ve got five. I’m just going to show you the scores that we got. So this one here scored 35. Anyone. Guess what? This theme is? Anyone shout out no takers. This one is the reveal is at the bottom. The exciting reveal.

Here we go. This is Divi. So Divi scores 35. For those that know Divi, it’s a very popular theme. I used to use it a lot actually, but it’s become notoriously bloated, which means it’s got lots of stuff in, it has a code in it that kind of slows down the site, but this is what you get. No plugins, just Divi installed on some shared hosting.

So quite, quite slow out of the box. This next one is a bit is also quite slow, 38 and this one is Aveda or Nevada. This is one of the most popular top selling themes on theme forest, which is a very popular. A theme marketplace, again, scores very poorly in just the basic speed test. Okay. So your theme could definitely be an issue where it’s just slowing down your website.

That’s what these slides are trying to show you. Here’s another one. This one here is faster. And this is flat sum, which is a very popular e-commerce theme does much better. Okay. What it’s done on the greens for mobile. Okay. The next one is what we’ve got here. 68. This might be, this is our theme for those that you use are 18 tags, 68.

So it’s okay. It could be better. We’re working on it at the moment to improve it. The desktop scores as well are always higher, by the way. Of course, a couple more for you. We were going up in speed here. So this one surprised me a bit. This is a storefront from WooCommerce, still not in the greens for mobile.

And then we go quicker. We’re going quicker as we go along here. So this is 96. This is Astra, which is now the most popular theme out there. I don’t know. I’m a big fan of Astro at the moment. And then finally, we’ve got a slightly slower, actually, this is cadence, another theme. That’s making a lot of buzz at the moment.

Now what these themes have in common as well, Astra and cadence. And do I have another one? But they’re all kind of built for the block editor in mind for the Gutenberg block editor. And I don’t know if anyone’s been following me lately, but I’m a huge fan of the Gutenberg block editor for one of the main reasons is speed, especially versus things like element or we’re seeing a lot of people shifting away from those things because core vitals is going to be one of a ranking factor.

And this final one is the 2021 theme, which again, scores very well. So your theme is one area where you might want to look at in terms of changing it to improve your speed. It could also be your hosting. Yeah. But it is really hard to diagnose whether your hosting is slowing down your website. It’s not easy to do unless you’re a server developer.

It’s a hard thing. So, you know, for, for most of us, that’s, that’s kind of a black art and we can’t get near understanding it. And it’s not easy, you know, even though you might identify as your theme or removing plugins or to change your hosting, it’s not an easy thing to do. It might be a huge amount of work for you to, to undertake.

So wouldn’t it be great if there is, if there was a different way to do this, which didn’t involve hundreds of man, hours of work and confusion which leads me on to. You know, some other things that you could think about you could use a caching plugin on your existing theme on your existing hosting, and there’s a few famous ones out there or popular ones out there.

I’ve just named two here, WP rocket, and WP cash, which we’ll do some of this for you. They’ll do some of this heavy lifting for you. They won’t do everything though. And that’s why I got so excited about NitroPack So as I said, and we’re going to give you a little demo of this I’d discovered NitroPack about a month ago.

Introducing NitroPack

Deyan is going to explain a bit more hopefully about what NitroPack does. But this on the screen, as an example of my wife’s yoga website, her site runs Devi still running Devi, built it a long time ago. And on the left, we have a score prior to installing NitroPack and on the right, we have a score of 98.

Post installing NitroPack. So quite an incredible improvement, really, you know, it was it’s that sort of mind-blowing change in your page scores that you see instantly which, which is kind of creating so much excitement about what Dan and his team are doing. So with that said, I’m going to hand over today and to tell you a bit more about it.

If I can share, if I can let you make a host, I’m gonna make you your host name. Amazing.

Deyan from NitroPack

Starting off, I wanted to just share a couple words to sort of get things in in context, and then I will show you what we think would be very helpful for you all to sort of your core web vitals. And then I’ll show you some specifics about a product I’ll be focusing on things that is going to be very hard to get otherwise in terms of information.

And hopefully give you some really useful information to go and be better equipped to handle your current core vitals. So, first of all, we started working on site performance and sitespeed back in 2012, when Core Web vitals was not a thing, when that didn’t really exist, we backed down and we’re working in OpenCart, which is a e-commerce and e-commerce content manager.

When systems specifically for e-commerce and for existing customers, then we needed to find a solution for site speed improvement, caching. We started doing that. As time went on, we saw that the size feeding thing is really a global issue. It’s not something that is WordPress specific.

It is not something that is Shopify specific. Absolutely. Everyone is having a hard time. Dealing with the speed of their websites. And if your website would be in the greens or yellows in terms of scores right now, I have to say data is quite often to be seen. That is not something that’s a unique case for you throughout the years.

No one had really paid much attention to building a fast website and more or less priority has been on building things that are functional, that are look great. That would create a good experience for your user in terms of how things look like. But no one had really given much consideration to performance.

Me personally, as a user of things, I like to be able to use a product that solves a given issue for me. I’ve, co-founded two companies before doing NitroPack.

And as someone who runs a business more or less, I enjoy having solutions that sort of take care of taking care of the whole problem. For me, not just a one, two that will take care of one part of the system.

So when you think about your site’s performance, I find it very useful to think in terms of a system Jamie showed you guys really the most important sort of parts of that system, things like your web hosting, what team are you using? The plugins? How are you taking care of them? And just maybe have video maybe you have a Javascript, that’s doing some intricate functionality on your website or displaying something.

And then it’s really hard to Like have a plan on how to deal with sitespeed and there’s so many things that you could be trying out. We find it to be very time consuming. So talking to customers throughout the years, we saw that one would either try and find a specialist to do it. Specialists are few and far between you do not know what type of a result you’re going to be getting.

And this is not to everyone’s budget. On the other hand, if you try and use all those different little twos to try and piece together a solution. Well, that really doesn’t work from experience. I mean, we’ve seen countless times where folks have tried five, 10 different plugins, put them all together and they’ll be getting mediocre results.

And I quite honestly, as a business owner would like to use solutions that just allow me to focus on what I do best on what I, how I add value to my business. And this was the design intent behind NitroPack.

As a set of optimization techniques, it’s a piece of software that runs in the cloud. When you connect to it, it sits between your origin server and your end-user, and it takes care of optimization between those two parties.

I will go into more details and how exactly that works, but the way you can think about it as NitroPack between your site and your origin server and your users, and performs a set of optimizations on each, every page automatically in the background, 24/7 crawling through your web pages and making sure they’re optimized.

The great thing about having this in the cloud is we have a lot more control in terms of how quickly we can push updates. So for example, Google and three months decided to change the way that they measure core providers while we in a great position to help out, help out a lot without necessarily having folks to have to update jobs against.

NitroPack uses a plugin to connect to your WordPress. The plugin is you can think of it as the, the communication line between your site and NitroPack. So the plugin itself is a connector and NitroPack is pulling the heavy lifting from your server towards our various service that do all the work.

The design intent, there was to make sure that regardless or allowing for a larger, a variety of different hosting scenarios and different setups there, that you would still be able to benefit from a great increase in site speed by utilizing techniques. To optimize that in an automated fashion. So I’m going to share my screen now and show you guys some more specifics.

Can I please give a thumbs up if you guys can see my screen here? Awesome. Thank you. Okay. So first of all, when we were creating NitroPack, we thought of three, basically most important things that we always have in mind as a business owner, you most likely want to give your customers a good experience.

So when we do optimizations, we focus on what’s called ‘above the fold’. So above the fold would be what’s displayed in the user’s browser. When they load the, your page. So there’ll be above the fold.

And that’s why we have implemented ways to defer loading or make sure that whatever’s loading doesn’t have a negative impact on how people experience your above-the-fold times. Again, we’ve seen studies and we are doing some studies ourselves where we see correlation between a faster, a better site speed and conversion rates increased speed for e-commerce speed for publishers who rely on ads.

It is more or less expected that if you work on your site speed, you’re going to be seeing better conversions as well. So this seems to make a great business sense there. And ultimately we want to be allowing folks to have extra time to take care of how they add value to their businesses. So this is a picture of how NitroPack sort of works.

As I said, your origin server will be here. You may be running quite a different type of a server of hosting. So we wanted to make sure that yeah, you may be in a housing that’s subpar in terms of performance, but there are still benefits to be gained. An important point. Here is NitroPack is gonna give you a great result and a great speed increase regardless of how things are right now.

But you can always think of this whole system, for example, my hosting. Do I want to be improving that in the future? So we, we always recommend the thinking of. How can I better serve my customers by for example, maybe broken my hosting, but whatever case you’re running with right now, we want to be able to go and try and help you.

So NitroPack will be taking the user requests. So there’ll be a user coming, wanting to see a given page. And there will be asking for that page that will usually be served by your origin server. Then it will go back to the user. And what NitroPack it does is it differentiates between desktop mobile and tablet, versions of your pages and performance optimization.

So rate of optimization, things like working with your CSS, HTML, JavaScript, magnifying it taking away things that would not be needed to display whatever is being displayed. We are doing some advanced things like manipulating the way JavaScript loads. So that we prioritize whatever is above the fold and we defer whatever needs to be happening later.

One analogy I like to use is in most cases, your website will be performing like a crowd in a supermarket that wants to all check out at the same time and pay for their groceries. But if everyone goes to one checkout, then that’s going to create a huge queue. And that’s what usually what happens when people load websites nowadays, what we allow you to do instead is using software open up additional checkout so that traffic can flow a lot faster.

So on top of that we do own that optimization needed on images by default built-in with every plan. And that is turned on for you when you get a NitroPack subscription, the free one as well. So that was a very good question early on. And how do we think about serving different image sizes to different devices?

We think of that built-in programmatically. So you don’t have. Have to there are quite a few features that go in NitroPack. This is our website. You can always see the later there’s a comprehensive list of what is going on behind the scenes in terms of features. The most important takeaway here is we do the optimization.

So in terms of JavaScript images, CSS, HTML, and then this optimization is being cashed. There’s some very I think unique to us, things that go with caching as well. Things like if you push out new content, we’re going to be automatically aware of that. And we’ll invalidate, whatever is old content, and we’ll be pushing out the new content.

NitroPack would be aware of cookies and different devices. Very, very important, and will integrate very well with or most important are the third-party caches. That will be Sort of out there there are more than 40,000 websites that use NitroPack right now. And pretty, pretty excited about it.

So as we work on those numbers, we start to see themes, reappearing. So I’m going to stop the share for a second here. Yeah. Cause I want to give you the idea of what seemed to be the most common issues and what could be done about it.

Amy already talked about plug-ins I can’t stress enough. How often we’ve seen site speed stated by plugins that in some cases really. Seemed like they weren’t that vital to whatever the website was doing. So I strongly recommend doing an audit of what could be, what could we remove there, and what can be kept?

One common offender for performance is sliders. They do serve a purpose of creating that beautiful slide experience, where you see those beautiful images. And that may be okay. That may be fine. Just keep in mind that, that slider may be really damaging the speed with which your website loads.

One way we’ve seen people use an alternative to this would be a fantastic hero image. So cameraman just tends to be a really, really good solution to this because there’s a lot more that you can do in terms of optimization and have just an overall nicer experience. Nitrile pack will help you with some ciders as well.

Whatever we know that will be used widely out there. We work with we see quite a lot of folks with Revolution Slider which works very well in the majority of cases, but be aware that is one of the more like edge cases of optimization. An important piece of information is NitroPack wouldn’t be a substitute for your hosting NitroPack would be coming on top of this and trying to help you out.

Jamie Pootlepress Speaking

So moving on, I’ve got a few questions down. Can I, can I interrupt you and ask a few questions? At least you go ahead. Which is, which are the questions I had for you actually last week, as well as some of these. So for people that have existing hosting that have that, and the hosting has to have their own caching systems, NitroPack.

For example, I use WP engine who have their own CDN and cacheing they work together right. Yes. So WP engine is a fantastic example.

Deyan

We keep close communication with them and with their support teams. And it’s very easy to be using WP Engine and NitroPack at the same time. That would require just a, an exclude by a cookie type.

It’s something very easy to do. The information is on our website. It’s basically something to copy paste and ask WP engine support to do so. In terms of different types of systems that you guys might be using, number one will be CloudFlare. Nitrile bag works very well in addition to cough, they’re not instead of cough there.

The edge case there would be if you’re be using something like the rocket loader. So the important thing to know is other caching. Plugins would need to be disabled because two caching plugins running simultaneously would create conflict in terms of what’s being shown to the end-user. But that caching layers could be made to work together very neatly case in point being CloudFlare case in point being WordPress, sorry, WP engine.

There are other hosting providers as well. So on a case by case basis, we either have a way to integrate or a way to bypass cache if needed. We’ll be able to give it to them specifics, given what hosting provider you’re on, but things like SiteGround can, they’re very well known, and quite a few folks who are using them.

So integration with CloudFlare and things like security is very, very easy. All you need to do is based some details. And then within United bank dashboard, and that will automatically create an integrator.

Do you want me to wait? So Paul Paul’s question, actually, I can answer. So Paul’s question was, does NitroPack replace the default cashing provide provided by WP engine? I think you’ve just probably answered that one. I would say I wanted to say that Paul cause I’m WP engine and the scores I got from using NitroPackwith WP engine on my site were incredible.

The improvement. I don’t actually know the numbers, but there were, there are huge increases. So it’s the beauty about NitroPack. You can test the free version. For free and you can put it on the sign. You can get instant page insights scores and you can see the, the improvements we’ll see immediately.

Here’s next? I answered my own question. Sorry. Oh, the free plan, because I think that’s going to be very important to everyone. Yeah. The free plan works very well for very small websites. It has the same optimization power as the page plans. It is limited to 5,000 page views or a gigabyte of city and bandwidth.

It is designed to help you test things out and it’s designed, especially if you’re running staging environments. It’s fantastic to use that for no credit card required. You can go and get it anytime of the day. And this puts a nitrile back food or budge, and that’s important to know before you put it in production, where you going?

Jamie speaking

I’ve got a NitroPack installed on a WordPress site. Where are you going to show that? Or shall I show that quickly? If you have that easy to that you can quickly show you.

Let me share my screen. So we had a couple of questions about whether it’s a plugin or whether it’s not a plugin. So I’ve actually got it on this site here. So it comes as a plugin and essentially, which is a free plugin here. You can actually download the plugin is available for free on wordpress.org.

And it’s just this one here.

Okay. Let’s make this smaller than that one. So you can go and download that from the wordpress.org website. And then you just go to the NitroPack website, which we, which is that get started, create an account and you can create a free account. And essentially I’ve got an account.

It will basically ask you which site you want to connect to. So it’s a seamless way to connect your website to basically the natural pack service. So it takes about five minutes to set up. So I would urge you and encourage you to try the free version because it’s, it’s incredible. You’re seeing incredible results very quickly, right.

I’m just going back to the questions quickly. And sorry. Did you have more stuff? You’ve got more stuff to cover? I can go on all day. I think it’s best to focus on questions. Okay. Here’s one. I don’t quite understand. So can natural PAC work with peach pie, compiled workloads, deployment deployments?

I need to double-check what peach pie compiled each peach pie is. Each pie is compiling down to the.net runtime. So peach pie takes the whole word, WordPress PHP, it compiles to the.net runtime. We get them out of 70 performance percent performance increase in the operational performance. But we’re looking to see if customers are, could use nitro pack with that as well.

Questions and Answers

That’s a fantastic question that I’ve never been asked before. So yeah, when you compile the wordpress to the.net license, we’re seeing 70% performance improvement right there. That’s because, because you’re running, you’re running PHP as a.net core runtime. So, but you have to compile all your plugins too.

So that’s the other. Gotcha. So you have to compile the plugins. Well, I said, I mean, this, this is very lighter pack in with that could be amazing. Yeah. All right. We’ll leave that one with Dave. Cause he’s yeah. So I’ll give you what my intuition is, but I do not know if that’s going to be the case because I haven’t come across this use case.

As of today, if we can, if our API can communicate with your WordPress installation in theory, we should be fine, but that’s, you that’s best to be tested out. You can just grab a free plan and go and test it in staging any time of day. Cool. Which answers Paul’s question, which was, can, can you run the free on the staging?

Yep. You can. And you can run it on the real site if you want to as well. To the I’m just trying to find any other questions. Oh, we’ve got loads of questions coming in. So Paul also asked does NitroPack cause cash conflicts with hosting servers or an individual devices? If your view running CloudFlare caching on the host service, I think you answered that.

Did you? Well you would need to integrate with calf there and then things should be smooth sailing from there on okay. I’m just going, scrolling through the questions. Another question was, do you have a top 10 list of worst plugins that impeded performance? No, but that’s a great title for a post.

So I’m going to write that, Paul, thank you for that content idea. Genius. But I wouldn’t name specific offenders, but I would give you some things to think about sliders usually cause a lot of friction just because when sliders utilize Javascript and you try to optimize the Java script that could lead to visual sort of hiccups.

So I really would consider, Hey, why am I using this slider? Does that really make sense for me? And what could I gain if I try to use something else? Yeah. Cool. Real, I think that’s if I’ve missed anyone’s question, I’m so sorry, but if I have missed your questions, just unmute yourself and shout.

Yeah, I have a question. Yeah. So can I share my screen? I have a question to Dan. I’m not sure, actually you can hold on. I’m not sure. Can you, is there any way you can try and hold on. There you go. So you I have page street Ninja, and it has a lot of settings, very many settings. You can individually set to get your site working faster, but not all of these settings work.

Some will destroy your site or just not, not destroy, but some, some things will not work appropriately if you use these settings. So it’s a very individual thing. And my question to you, Dan, is that how does what’s it called? Nitrile pack. Is it kind of working in a similar way and how does natural pack avoid [00:48:00] settings that can also destroy your sites?

So thanks. Thanks for that’s a great question. I think that’s a great question. The short answer would be with a lot of engineering, sweat, and tears. So we’re trying to find that with building a lot of Thought and to giving two types of users, the ability to use an nitro pack. If you go and get a free plan, now you’re going to or any plan, you’re going to get nitrile pack with a preset of settings that works for the majority of people out there.

And the majority of sites out there, obviously one of the complexities as there’s so many different websites and virtually no two sites are the same, that it could be very practically difficult to apply the same set of settings for everyone. So, very important point here. I wouldn’t say that a caching plugin or an optimization plugin could destroy your website.

Even if you see visual problems, The very important to know that you’re seeing those on sort of a copy of what’s on your origin server. So if something goes wrong, you can always just click the button and stop it. And then you will be going back to normal. I didn’t manage to see the screen that you are showing.

So maybe you’re referring to something that I didn’t see, but in terms of settings with NitroPack, you need to use the preset. That’s what the majority of people out there do the ludicrous mode. These are less aggressive optimization mode. You could also go granular if you want. You should be honest doing settings when one isn’t really certain and two, what they’re doing could lead to weird results.

So, if you know what you’re doing, you have the complete opportunity to go and go really granular on settings with NitroPack. And then two very important things that we recommend people do when trying out a service like NitroPack. First, if you have a staging version of your website, go and try it out there because you can go and break as many things you want.

You can go and try out as many things as you want. And second, with built a feature that we call safe mode, safe mode as a button on your dashboard, and you press the safe mode button. You save your settings, and that makes NitroPack work live in your production website, but not showing any optimizations to your end-users before you’ve completed your testing.

So if you ever run into questions or something that you think might not be working well, just enable safe mode and safe mode will allow you to not show. Optimizations send users, but you could go and test the optimizations by sending a test parameter to your URL, that document on the website, I’ll be happy to send you a link as to how to go and do that.

So there’ll be never a service that would work for 100% of websites out of the box. I mean, that is technically not feasible, but even if something doesn’t seem to be working well, I would not be panicking because those changes aren’t aren’t those aren’t changes to your original code.

Those changes are applied to a copy. So you can always, always revert back to how things were before. Does that answer your question? Yes. Yes. First I thought that NitroPack would do these settings for me. So I was wondering how does it so, so that answers the question. So you have to configure it yourself.

You optimize yourself. It’s a preset of setting ticket. Yes, Jamie. Yeah. So I’m just going, I’m conscious of time and there’s a great question. That’s come in, which I really want you to answer because I think it summarizes a lot of the stuff that Nitra pack does. It’s from Jessica. And here’s the question with NitroPack.

Would we no longer need plugins that do image optimization? Yes. Yes. DSS minify for example, I mean, bird smushed, that’s the basic goal. We subsumed that there is a less than the website that you can reference it. Essence, we subsumed functionality. So we do that already within NitroPack or we add things that other.

Plugins wouldn’t be doing. Yep. Cool. And which is one of the reasons I love it so much because it does all this in one simple solution without you having to know anything. And then we’ve got, we’ve got a question about oxygen builder, which I can’t quite see what the question is cause it’s up above, but I guess it was, does it increase the speed of oxygen builder?

I’m not sure you you’ll have any details on that with you. In general improves the speed for almost anything out there. We have people using oxygen as well. Okay, cool. Great. We’re two minutes to five, so thank you everyone. I hope that was useful to you. We’ve we’ve we’ve never had so many questions, so that’s a really good indication that this is one area that’s of huge interest.

Just a couple of things to say, as I said, I’m going to send out tomorrow a recording of this. To everyone, I’ll send out all the slides as well. A huge thank you today. And for joining us, he’s got, you know, he’s been living this for years and years, so it’s amazing to have him along. It’s brilliant.

So you can read lots of stuff about them and I’ll go from there. So thank you everyone. Has anyone got anyone? Got any final, final questions before we close off? I wanted to sort of give a way forward. If you guys run into further questions, you can always drop us a line at support at nitric packer. Yo, you can always use the help center.

We have quite a lot of things going on there. If you visit our blog, we have detailed guides on how you could be digging deeper on all those different issues. So the blog, the support center and email, we’ll be happy to help out brilliant stuff. Well, thank you all keep well, hopefully see you all same.

Thanks guys, everyone. That was amazing. Thank you. Bye bye. Bye.