WEBVTT 00:00.050 --> 00:05.060 So now it's time to move on to the second point about trust, which of course is ensuring that your 00:05.060 --> 00:06.620 site loads fast. 00:06.650 --> 00:12.170 Now, I don't think I really need to go into detail about why it's important that your store loads fast, 00:12.170 --> 00:17.360 because we've all been on sites that are slow to load, and when they're slow to load, we leave and 00:17.360 --> 00:19.250 we're probably never coming back. 00:19.250 --> 00:24.440 And so in this lecture, I'm going to show you how to avoid that by easily keeping an eye on the speed 00:24.440 --> 00:25.400 of your store. 00:25.400 --> 00:28.550 And to do that, it is in fact really quite straightforward. 00:28.550 --> 00:34.370 You can see that I've come here to a new section under analytics called reports, and there are many 00:34.370 --> 00:38.000 reports here, some of which we're going to come back to later on in the course. 00:38.000 --> 00:42.770 But the one that I want to draw your attention to right now is called web performance. 00:42.770 --> 00:47.210 So scrolling on down through the list, you see the web performance report here. 00:47.210 --> 00:53.210 And when I click on it, it takes me to the Web Performance report, which essentially our three main 00:53.210 --> 00:54.020 parameters. 00:54.020 --> 00:59.720 You have the loading speed, the interactivity and also the visual stability. 00:59.720 --> 01:04.970 And of these three, the loading speed is probably the one that you want to keep an eye on the most, 01:04.970 --> 01:08.900 because essentially what it's telling you is how long your store takes to load. 01:08.900 --> 01:12.860 And you can see for me, at the moment that is 1.58 seconds. 01:12.860 --> 01:14.930 And Shopify tells me that's good. 01:14.930 --> 01:16.100 So what does good mean? 01:16.100 --> 01:22.010 Well, if I put my cursor over this, you can see that good means that it's loading between 0 and 2.5 01:22.010 --> 01:26.450 seconds, moderate 2.5 to 4, and poor greater than four. 01:26.450 --> 01:32.550 And so your objective is to simply make sure as much as possible, that your site is loading under 2.5 01:32.550 --> 01:33.290 seconds. 01:33.290 --> 01:40.280 Then for the interactivity report, this is giving you an idea of how long your site takes to respond 01:40.280 --> 01:43.580 to events, such as when a user clicks on a button. 01:43.580 --> 01:47.090 So sometimes on sites we click on a button and nothing seems to happen. 01:47.090 --> 01:49.940 Or it seems to take a long time and that's not a good thing. 01:49.940 --> 01:52.100 So we want to make sure that it's responsive. 01:52.100 --> 01:56.540 And again you can see here it's 1.2 milliseconds which is giving me a good. 01:56.540 --> 01:58.130 So to see what that means. 01:58.130 --> 02:01.010 Good is anything under 100 milliseconds. 02:01.010 --> 02:03.380 And then you can see what it is for moderate and poor. 02:03.380 --> 02:08.990 So once again you just want to make sure that you're always within the good range as much as possible. 02:08.990 --> 02:12.230 And then finally what is visual stability? 02:12.230 --> 02:17.960 Well, you might have noticed that sometimes when you visited sites that somehow, as they're loading, 02:17.960 --> 02:22.970 it feels like certain elements of the site, certain parts of the site, are kind of jumping around 02:22.970 --> 02:26.300 before it then stabilizes and presents the page. 02:26.300 --> 02:31.340 Now, that kind of jumping around process, as I described, is essentially the visual stability, which 02:31.370 --> 02:33.230 of course, you won't be surprised to hear. 02:33.230 --> 02:39.680 We need to make sure it's in the good range now, because your store is hosted on the Shopify servers, 02:39.680 --> 02:41.570 which are extremely powerful. 02:41.570 --> 02:47.210 What you're almost certainly going to find is that the visual stability and the interactivity really 02:47.210 --> 02:51.980 don't vary that much, and that for the most part, they're always going to be in that good range. 02:51.980 --> 02:54.380 And there's therefore really nothing for you to do. 02:54.380 --> 02:57.350 But the loading speed is going to vary. 02:57.350 --> 03:00.020 So this is the one that you really want to keep an eye on. 03:00.020 --> 03:05.330 Now, I'm not saying it's going to vary wildly, but just appreciate as you build your store and as 03:05.330 --> 03:10.730 you make various changes, depending on what you do, will affect the loading speed of the site. 03:10.730 --> 03:14.360 And on that subject, there are two main things to look out for. 03:14.360 --> 03:16.520 The first one is images. 03:16.520 --> 03:22.190 I think it's probably quite easy to imagine that a large image is going to slow down your site, so 03:22.190 --> 03:24.350 you want to avoid large images. 03:24.350 --> 03:26.570 And the second one is apps. 03:26.570 --> 03:30.470 Now up to this point we've only loaded one app, which is dropshipping. 03:30.470 --> 03:33.890 But later on in the course we are going to be adding other apps. 03:33.890 --> 03:38.930 And it's important to understand that you always want to choose well developed apps. 03:38.930 --> 03:43.460 And typically those are easy to find because they're the ones that have stood the test of time. 03:43.460 --> 03:45.860 They've already been around for a few years. 03:45.860 --> 03:49.730 They have close to a five star rating and many positive reviews. 03:49.730 --> 03:54.110 Now, of course, on this course I'm only going to be recommending you the best apps, which should 03:54.110 --> 03:56.480 definitely not be slowing down your store. 03:56.480 --> 04:02.150 So in other words, the problem with apps, if you like, is very easily resolved by simply making sure 04:02.150 --> 04:04.190 that we are using the best apps. 04:04.190 --> 04:05.570 But what about images? 04:05.570 --> 04:09.920 I said that we want to make sure that the images that we put on our site are not too big. 04:09.920 --> 04:11.750 And so what does that actually mean? 04:11.750 --> 04:20.270 Well, I draw your attention to this blog entry, which you can see is shopify.com/uk/blog/image hyphen 04:20.270 --> 04:20.990 sizes. 04:20.990 --> 04:25.850 And you can see also that the title is a website image size guidelines for 2024. 04:25.850 --> 04:28.310 Now I strongly suggest that you have a look at this article. 04:28.310 --> 04:34.160 But just in the interest of time, if I scroll down through this various text here, you can see that 04:34.160 --> 04:37.370 for every image type it's recommending dimensions. 04:37.370 --> 04:43.310 So for example, the hero image that we loaded onto the store several lectures ago should have a recommended 04:43.310 --> 04:47.360 size of 1280 by 720 pixels. 04:47.360 --> 04:52.760 And then if I scroll down a little bit further and find the hero image title. 04:52.760 --> 04:56.450 So just going down a little bit more, here we go. 04:56.450 --> 04:58.220 Hero images. 04:58.220 --> 04:59.720 It then goes into a bit more. 04:59.840 --> 05:04.640 More detail where you can see that the recommended file size is ten megabytes. 05:04.640 --> 05:08.690 So in other words, the recommended image sizes are very well defined. 05:08.690 --> 05:10.850 So you really have no excuse. 05:10.850 --> 05:17.060 But I can promise you that from time to time you might load images by mistake that do affect the speed 05:17.060 --> 05:17.840 of your store. 05:17.870 --> 05:22.640 Now for each of these three metrics loading speed, interactivity and visual stability. 05:22.640 --> 05:24.710 There is a more detailed report. 05:24.710 --> 05:29.210 And because the loading speed is almost certainly the most important, that's the one I'm going to show 05:29.210 --> 05:29.990 you now. 05:29.990 --> 05:34.640 And in order to see it, all you need to do is to actually click on the title, and it's going to load 05:34.640 --> 05:39.650 a more detailed report that shows you the actual loading speed over time. 05:39.650 --> 05:42.230 And by default, it shows me the last 30 days. 05:42.230 --> 05:46.310 But I can also look at the last seven days or even up to the last 90. 05:46.310 --> 05:50.150 So you can see that it's varying and you can also see the good limit. 05:50.150 --> 05:52.100 And for the most part, I'm below that. 05:52.100 --> 05:53.720 I'm within the good zone. 05:53.720 --> 05:59.510 Now, I also want to draw your attention to these little markers here where you see five, one and six. 05:59.510 --> 06:00.830 So what are these? 06:00.830 --> 06:06.860 Well, these are events or in other words, things that you did on your store that might have affected 06:06.860 --> 06:07.970 the loading speed. 06:07.970 --> 06:10.610 For example, loading a really large image. 06:10.610 --> 06:16.040 Now in my case you can see that for example with number five it hasn't really affected the loading speed. 06:16.040 --> 06:20.000 If anything, after it, it went down for number one, it's more or less stable. 06:20.000 --> 06:22.220 And for number six it kind of went down as well. 06:22.220 --> 06:28.820 But if your store starts to slow down, you can come to this report, put your mouse over the marker, 06:28.820 --> 06:33.860 and it's going to tell you exactly what you did at that point in time that may have caused the site 06:33.860 --> 06:34.700 to slow down. 06:34.700 --> 06:39.950 So just for completeness, if I put my cursor over the six here, you can see here that the event involved 06:39.950 --> 06:45.530 me editing the Dawn theme, which as I said, didn't have any impact really on store speed. 06:45.530 --> 06:50.960 But instead of that, you might see something like image upload or app added things that will trigger 06:50.960 --> 06:57.200 you to help you understand what you did that caused the problem, and then you can go back and fix it. 06:57.200 --> 06:58.190 So there we go. 06:58.190 --> 07:05.450 A really fantastic built in tool that allows you to easily keep an eye on how well your store is performing. 07:05.450 --> 07:10.880 Now, having said all that, the problem is we tend to get very busy with other things and we may therefore 07:10.880 --> 07:13.220 forget to come back and check this report. 07:13.220 --> 07:19.700 So what I suggest you do is in your calendar, you make a note to check this report on a weekly basis. 07:19.700 --> 07:25.430 After all, it's only going to take you a few seconds, but also and just to help you out a bit, if 07:25.430 --> 07:31.280 you go down to the online store and themes, which you've probably come to realize by now is a page 07:31.280 --> 07:35.180 that we visit regularly, because of course, it's from here that we go to the theme editor. 07:35.180 --> 07:41.420 You can see up the top here a summary of your loading speed, your interactivity, and your visual stability. 07:41.420 --> 07:46.940 So just get into the habit that every time you come to this page, check each of these three parameters 07:46.940 --> 07:48.800 to make sure that they're showing good. 07:48.800 --> 07:54.230 And if they're not, simply click into it and it'll take you straight back to the web performance report.