Site Speed: Time to meet the mobile expectation – Luke Monaghan

Everybody, I’m Luke my hand, as you said, and I’m from a big media creative performance agency called fetch.

And I know when you say fetch and think of Migos, fetch, we get that a lot.

And today, I’m going to be speaking to you about mobile formats.

So in particular, the importance of site speed, a lot of us know the importance of site speed.

But in terms of the mobile perspective, mobile versus desktop as we see it today, and what we can do to optimise our mobile performance and the future of mobile moving forwards.

So as we know, site speed is important. As I said, it’s not news to us some point from a quantum perspective.

And it’s also important for users, what I’m going to focus on this talk mainly is about the user perspective, when it comes to crawlers, so ranking factors, so for desktop, it was as of 2010.

And then for most recently, mobile 2018. It’s an expectation for the user as well. So this is probably a stat everyone’s been aware of 53% of users abandon the mobile site, it takes longer than three seconds.

So this is something that you want to keep your headshots presentation.

So what’s important that is an expectation from a user perspective with a real-world impact.

So some of you may have seen this, but with the BBC, they calculated for every second that it takes for their site to load 10% of their users will have gone, which if you think about the amount of people that visit their site is huge.

For my true perspective, Amazon calculated that for one second page, slow down for one year, it could cost business 1.6 billion.

So it’s Yeah, as I said, it’s a huge impact you can have to all this considered Is anyone here from made? Good. So I run this test on may just to see this is using a Nexus five average 3g connection, based in London IP.

As you can see how slowly This is taken. As a user, I would have left by now.

But essentially, this takes around about 29 seconds to fully load. So if we were to break this out with Google’s user-centric metrics, which is more of a User-focused approach to sites be as opposed to these 19 metrics like 100 out of the hundred.

And so from a user stance, first content for paint, which is where the first bit of content is really shown, so it could be the navigation or the let the logo above the fold.

Is it happening is taking them almost six seconds to see the page doing something. Is it useful? So first meaningful paint where we’re talking about the image above the fold?

Or if it’s the header above the fold? It takes 10 seconds?

And then is it usable? So time to interactive 22 seconds before you can start using this page.

So why are we seeing this especially when we’re here.

So this is, in terms of device for the UK, we’re on about even when it comes to device usage between desktop and mobile.

Obviously, search isn’t the only way people are going to visit your site.

So having this in terms of perspective is important to know. And but we are not truly mobile-first.

Mobile First probably going to be said a lot today, but particularly with lightspeed.

So we probably all recognise this lovely lighthouse output. Very particular focus here is the disparity that we see between desktop and mobile. Obviously, there are variables at play here, so CPU when it comes to mobile network connection. But that being said, this shouldn’t be an excuse for the disparity.

So what can we do to meet the mobile’s site speed expectation.

So this is a good quote from Google in terms of how you should put your perspective when it comes to monitoring how your site’s performance. So they say the multiple moments during the load experience that can affect whether a user perceives it as fast or slow. And one of the main focuses throughout this is the perceiving the perception and Jonna in a recent talk, link is down here, which they are highly recommended, and recently talked about how the perception of speed is actually what’s most important.

You think from a user perspective, from a conversion perspective, that perception that page is not loading fast is ultimately what’s going to really drive your revenue.

So in context, although it’s really nice to get 100 Lighthouse and especially from a client perspective, Or a great aim pingdom, it’s not really about that it’s about making your site fail fast for the user.

So here and obviously, by Google it, they say that they calculated that it takes around about a second for a user to realise that something is slow. So putting that into context, ultimately, our main aim here with the perception is to make sure that our site loads in under one second, which is a, which is the hardest, but when we’re talking about the perception and how we can prioritise that content, is actually there are a lot of ways that you can achieve this.

As I say, deliver the perception of speed. So in terms of how this could look, I mean, this isn’t where we want to be, but it’s definitely going the right direction.

As you can see here, Airbnb, it was perceived load of four seconds, it looked like the site load in four seconds. In actuality, for it to fully load it was nine seconds.

So the user thinks that our site is fast, it is more likely to stick around reduce our bounce rate. And one thing to also focus on which I will touch upon later is the person that loaded so is a search function. They know what’s important for the user when they first come to the site. So that’s what I prioritise when it comes to loading the site.

Another state study by Google when reviewing 900,000, mobile landing pages, analyse that 70% 70% and more than five seconds to display visual content above the fold. So this is anything above here.

And which again, from a user perspective is mostly what matters to you, and when it comes down to that perception.

So how do you achieve the perception? So this is a three-stage, four-stage approach, which we typically look at Intuit fetch, so comes down to understand the profile of the user, understand who your user is, what where how they navigate to your site, the sort of technology that they use in testing get so the tools that we can use, optimising based on what we found, and then monitoring that and ultimately repeating the process. So when it comes to the profile, what we need to do is make sure the users are the centre centre of all performance optimization efforts. So by doing that, we need to build out a typical mobile user profile essentially.

And there are ways we can do this. Once you have Google Analytics, we can look in device model browser operating system God occasion just get an idea of that.

And also in terms of connectivity, I know you can get it in the Chrome UX report. But to pull it into GA, you can also use the net info API, which essentially runs in the browser and can pull performance information in terms of what your user is using in terms of connectivity as I pull it into as an event.

And this is a really useful posts in terms of how you can implement that.

And then once we once we have that, we can start establishing a key testing profiles and their associated condition conditions, how they’re visiting our site. So one thing to bear in mind throughout, there’s no one blanket approach when it comes to profiles, there’s going to be variables that come into play.

So for example, if we are two biggest users, one, maybe an iPhone seven and a 4g connection using Chrome to browse the site, and then the other one galaxy s5 on 3g using Internet Explorer only uses Internet Explorer, but if you were to put our side by side, this is the different experience that we see on the same site.

Essentially, this loads and 6.5 seconds, I think this goes up to around about 20 seconds.

So it is a different experience. And it’s important to be aware of that, especially when you’re testing when it comes to testing, if you start testing user experience and not technology, so get the mindset of the user, as I keep saying, focus on the metrics that matter.

So I briefly touched on some of them earlier. So the first content for paint, is it happening? Is the user seeing some progress with the page?

That’s what’s really important. Moving on to first meaningful paint, is it useful?

Are they going to be sticking around for that? And then time to interactive?

Can they actually use the page?

There are loads of testing tools that we can use lighthouse PageSpeed Insights, so more enterprise light speed curve, that you can use pulling those metrics to really build out the case in terms of what the issues currently are on your on your site.

Just how we do this one year at a time and this is a gift I had to put in somehow and nobody got time for that.

So you can test at scale.

So what I typically do in terms of process and pulling for the from things like Screaming Frog, use a tool on your profile to really do things at scale and automate that process a little bit.

With your profile, you can pull in analytics data, you can also pull in performance data, especially with PageSpeed Insights. And then the output that you get.

So this is an example output, an Excel spreadsheet, where essentially what you can do based on URL level, you can understand how each URL is performing and then categorise them by template and see how based on template how they will perform.

And against that you’ve got revenue, you’ve got search impressions and other sort of insights to really prioritise what you should be driving what you should be optimising as a priority.

With these tools, it’s important to bear in mind that they’re different data sets. So you’ve got lab data, and you’ve got field data. So when it comes to lab data, this is more control performance. So you’re setting the variables yourself.

And it’s not really representative of what the user seeing, and then feel data, which is more true world performance experiences.

So what the users are going to be seeing that side of things. So we’ll update us You got lighthouse, you got web page test, and then filled it, you got chrome UX report and the middle because a combination of lighthouse and burn, you’re actually we’ve got PageSpeed Insights.

But again, one thing to bear in mind is that these tools don’t run on user devices. So they don’t reflect actual performance, and which is web performance web browser API’s come to play. So for each of these key metrics that I mentioned earlier, so first content for paint, first meaningful paint interactive, you have all of these API’s that you can lean on to run it within the browser to pull that data through to Google Analytics to ultimately inform your optimization decisions.

So performance observer, essentially, it collects the performance data at runtime, and you can pull in with this first content for paint and first paint and user timing API.

This is very bespoke in terms of how you implement it is bespoke to your site. So depends on how your site is built. What’s important for the business focus on your hair or element to really count how long it takes me here element to appear.

So for Airbnb, they would work out how long it takes for that search warrant.

Enter to appear when times are interactive. So this is essentially once there’s a five second period, whether it’s been less than two network connections of the most recent long task, that’s when it’s classes interruptible. And this is a post, it’s really good in terms of how you implemented it and how you start tracking it in Google Analytics.

And also, they’re going to a lot of depth about this at Google IO 17. So highly recommend Watch this video to weave all of this, you can pull it into the user timings report, and which can be found here.

And really useful stuff in terms of overlaying actual performance, as opposed to more vanity metrics.

So once we’re at that point, we can start optimising, again, just to remind everyone to deliver the perception of speed. One of the key areas is streamlining the critical rendering path.

Bastia talks about is in great detail and I’d highly recommend seeing his talk is there a lot more just as an icon right now, but essentially is prioritising your main content in on your site.

So that loads first before anything below the fold, which sort of ties in lazy loading, which is anything below the fold. So there’s instances, typically like ecommerce sites, where you have high res images below the fold, that actually taking up a lot of the load time when users are going to see it.

So it’s it’s prioritising that content until you actually need it.

Another resource that I recommend looking into is the Google lazy loading images and video. blog post. So that’s Yeah, again, another useful one. Images and images, it’s always been a focus when it comes to websites, especially mobile. So the average mobile website is around about 50% images, which is huge.

So it’s a big opportunity, something we should be really looking into in terms of tapping into how we optimise those and how we reduce the size of our sites. So we have ways in which we can approach that choosing the right image format, so we’ve had instances where you know, JPEGs, and PNG, but also beyond that, and sort of next generation image formats like web PS and JPEG 2000.

So making sure that we’re streamline how heavier images are and where necessary, you know, really choosing the one that we need to live, we need to deliver high res images. And how would you approach that? compress images.

So, as I mentioned earlier, so what I feature on the first slide is the actually it’s two halves of an image, you can barely tell on the screen, you can actually have it on the screen.

But essentially, there’s two types of compression types you can use. So lossy is where the compression eliminates data. And then lossless is where the compression doesn’t eliminate data. And also it does reduce and compress the file and you can compress it for future reference.

And yeah, another one that in terms of automating this, you can use tools like crack. And if you got WordPress or Magento, a tiny PNG, some really useful tools to get onto that. And then beyond that, responsive images. So in terms of responsive images, this is really tailoring performance to what the device that you’re using is using. And so here we have an example Okay that you use responsive images.

So source that essentially saying to the browser, this is a set of these are set of images for this one image that you’re looking for.

And then you have the conditions based on the screen resolution, if the screen is this size, then send this image, and as I said, is a way of tailoring the performance.

So you’re not sending this huge high res image to a mobile device that doesn’t actually need it.

Again, that isn’t, that isn’t the length of it, there are a lot of other ways that you can optimise images.

And there’s also ways in which you can automate it. Again, on Google, there are a lot of resources in there, I’d highly recommend actually going into the performance folder, Google where they really give you a lot of information in terms of how you drive efficiencies when it comes to performance. And especially in a mobile centric perspective. This slide doesn’t have the animation I wanted, I just meant to pop up afterwards. But essentially code splitting. So this is within Google dev tools and a coverage report where if you run a page, you can identify how much of each resource is being used, but you have to load so as you can see here, the top one, a JavaScript file, actually almost 70% of it. isn’t being used, but we’re having to load all of that.

So that’s really going to be impacting how quickly the page loads. And then resources. So resources is really useful in terms of helping browsers prioritise your content, giving them additional information in terms of how they should be loading your page and how they should be building it.

So preload is really useful in highlighting the resources you need to build the page.

And so prioritise the CSS and HTML files or JavaScript font, for example, preconnect is what is when you’re presenting the next step, in terms of where you’re going no prefetches the next step.

And preconnect is telling if you need to link to external origin or another origin from the page of currently on. One thing throughout this to bear in mind is Chrome dev tools will be your best friend, there’s so much you can use in there, I can probably do an entire talk on how you can use Chrome Dev Tools, this optimization, and I’d highly recommend having to play around and again, as I said, within Google, there is a resort where they essentially run through there’s a lot of videos A lot of supporting documents that help you through that.

And even more. So at Brighton SEO, Polly went through a lot of especially with lighthouse, the optimization should go through, they’re coming off some of them just now.

But she also goes for HTTP two. And that those sort of things. And I believe she’s on the fourth stage today about three.

So make sure you do check her out. So I know she will also

be covering in terms of optimization when it comes to performance.

In terms of monitoring, and we have many solutions we can use. So the likes of Pingdom.

I know deep Crow, how lucky Bertie is there and then speaker and more than enterprise again, we have just like the tools that we do for testing, we have those in terms of monitoring.

And if you’re looking for a free version, if you’re not in the budget to splash out and some some of these tools, then you have things like user time report and overlay this with custom alerts. You can essentially say you know, based on landing page if user timing is greater than x, send me an email because then you know something’s wrong. Yeah, that’s really useful in in terms of a free solution in monitoring.

And then above that, you’ve got Search Console speed report, which is in beta, and hopefully run out relatively soon.

And but this provides an aggregated view over a site speed metrics.

As I said, field being powered by Krabby. Access, we can see up there, so it’s more representative of user performance.

And this is, again, another insight of Google’s pushing initially initiative of performance and importance of that.

And and if you need to build a case, or if you’re seeing improvements across the board, if you need to continue to build a case to a client, or if your internal, you’re really driving efficiency, Google has a nice impact calcula cochere bit of a novelty.

But essentially, based on an algorithm that they’ve built, you can specify average monthly visits and the conversion rate you have an average order value, and based on your existing performance, if you were to reduce it by say one second.

That’s about the amount of revenue that you can use.

Obviously you can switch out the dollar sign for pound sign in for us and in the UK, but this is night to really build Those numbers because I know a lot of clients really want to see those numbers in terms of what does this actually drive?

Yeah. And so yeah, just to sort of summarise and that sort of thing.

So we have profiling the user understanding who our user is, testing the site, uncovering the issues that we need to be optimising for, which then goes into the optimization, monitoring to make sure the impact they has has been noted, and then repeat the process. Well, I’d highly recommend as well, a lot of things when it comes to SEO, don’t do everything all at once, you’ll be creating too many variables, you won’t know what is really having an impact, what’s really driving that efficiency.

So make sure that you’re only introducing one change per time, every time you go around.

And then when it comes to the future, so users ultimately will expect things to be quicker and add one more seamless experiences.

I know myself over the last few years, I’ve started to come a lot more impatient when it comes to mobile purely because of a standard that’s being created by a lot of the sites around us.

That being said, said no ugly doom and gloom, we are getting better at this. So Google did a recent study where they observed improvements across the whole web based on a previous study.

And they found that on a per country basis, more than 95% of countries had improved speed, which, I mean, the good job, there’s a way to go still, as what we still need to do.

But in favour of is there’s also enhancements that are continually being developed. And one of the need to speak right from talking about global is 5g.

So in terms of 5g is slowly being adopted. Now you probably seen a lot of the advertisements and around but adoption rate is expected to be around one in seven mobile connections by 2025. So it’s quite a slow uptake in comparison to the trajectory that we saw with 4g.

But it’s still something to consideration purely because of 5g will bring high speeds,

low latency, so allow for that more seamless experience.

In terms of additional recommendations, and Rachel a deep rule when it’s quite like definitely most recent Brighton SEO, how you can use the net info API as I mentioned earlier about tracking 3g connections.

Really personalised experiences. So if I’m a 3d connection delivered on Upload image, as opposed to the high res image, that sort of thing.

So I recommend checking that I’ve linked to it here in terms of the wider optimizations that you can really drive there.

So in terms of key takeaways, I have rattled through this. And so key take just to wrap this up the key takeaways from this, design a fast web experience across all devices. So make sure that you’re not focusing just on desktop.

Mobile is just as important as we’ve seen with device usage. Deliver perception of speed. So if you can’t fake it, if you can’t build a site that is actually fast focus on the things that matter that ultimately reduce that bounce rate for the user and make it seem like your your site is faster, it’s going to ultimately stop them from leaving your site.

Measure metrics that matter to the user. So as I said, Don’t worry about these 100 or 100 words or Grady’s, and those sorts of things actually focus on sort of the first content for paint first meaningful paint and time to interactive, because that is ultimately what’s going to be impacting your users.

The most Which is what’s most important for us continue to refine the performance experience. So continue to learn, continue to develop never stopped with this. And this is an ongoing process.

And as competitors move the needle, you’re gonna have to move the needle as well, highly recommend, don’t wait for Google to tell you actually, this is a standard sort of drive that standard yourself.

And so contradictory to what Sam said, I actually recommend taking developers for a drink purely because you’re going to need them on your side.

This isn’t something that you guys do as a one-man band, take them for a drink, have conversations around what’s required and get them on your side because there’s gonna be a lot of resources outside that’s required to really try these efficiencies in sort of optimizations of performance.

And finally, in terms of resources, there are a lot of references throughout this presentation, all of which are as a source, but also ones that I’d highlight to highlight.

And you’ve got a lot of presentations here likes and Pauline as I mentioned earlier, john, oh, equally deep rooted a fantastic guide on site speed performance across the board.

If you if you’re looking for a wider The context of why so matters and the additional foundation information, and also Code Labs. And there’s a free course on Code Labs about how to optimise critical rendering path.

So if that’s all new to you, I’d highly recommend checking that out. And that is all for me.

If you do have any questions do tweet me at Luke mana, and I’ll also be around today and drinks later.

Very much.

Thank you, Luke. Thank you.