 Thank you everybody. Oh wow, it's going to be a big hit. No, it's not about me, of course. You're not here to see me, you're here to see Jono. At least I hope you are. Say it in the back. Jono, can you tell me what special day it is today? Today is World Beard Day, and Ginger Cat Appreciation Day, and a few others. That was good. We'll lean on yours, it'll be fine. Don't touch it, don't go near it. Yeah, we can talk. Thank you very much. Can you hear me? Am I noisy? You want to go rummaging my pocket, right? That one's on, it's got a green light. I can hear me echoing. You can hear you. I can hear me. We want to hear you too. Why is there so much going on? That one is very off. One, two. Two off. That's better. The best biscuit is a custard cream. That works. Pineapples digest the inside of your mouth faster than you eat them. Is everybody ready? Should we go fast? Thank you very much for the intro. This is amazing. I've lived and breathed word press for as long as I can remember, but I am very, very new to the word camp space and the open source space, and I'm in love with it, and I'm in love with all of you, and this is an incredible honour. Let's go. Don't let Yos see that, so I do odds and ends and weird stuff at Yos that mostly involves breaking things and thinking about stuff like this. Today's plan is we are going to run you through some theories of who is in the speed workshop this morning. Some of you are excellent. We're going to do a little bit of overlap, and then we're going to go there, obviously, then we're going to go deeper and faster. I'm not going to give you tons and tons of practical how to speed stuff. What I'm going to do is sign post a whole bunch of stuff that you can go in and learn on your own. What I'm going to do is talk you through what I've done and what we've done for Yos.com to get it as fast as it is and what we're going to do next and touch on some advanced speed optimisation stuff. I will share a whole bunch of awesome resources that you can go through and click links and find things. Here we go. It says there's a glossary. There is no glossary. That was ambitious. Everybody ready? Users expect fast experiences. It's always over three seconds have been shown to lead to over 40% abandonment of some websites according to Google in 2016. 47% of people remember this stat, Taco. 47% of people expect a site to load in under two seconds. Half of people expect a site to load in under two seconds according to Wired Magazine. 20% of users will abandon a shopping cart and a transaction process if the process of checking out is too slow. More time is less money and conversely therefore less time should equate with more money. All the studies we have access to prove that this is the case. Amazon introduced a 100 millisecond artificial delay into their browsing process and it cost them 1% in revenue for every 100 milliseconds. That just scaled the nearly. Google introduced a 500 millisecond delay in the rendering of their search results and it cost them 20% less click-throughs. GQ, Big Fashion site, had a site load of seven seconds, reduced it to two seconds and almost doubled their organic traffic. Time is money. Performance is opportunity. Google have a great tool where you can play with these numbers yourselves that is based on all of those researches and more where you can put how much traffic do we get, what's our conversion rate, what's an average conversion and it will say here's the money you could win every month. If time is money and performance is an opportunity and making things faster and make more money and everything makes sense how we're doing it stands to reason that everybody's website is super lightning fast and we're all on top of it and everything loads in under two seconds. Well, we suck. We are collectively all really bad at site speed and not just WordPress not just PHP but the whole web ecosystem is monumentally slow. This is an index that I won't spend ages boring you with of a bunch of machmetrics who have a really good blog. Again, there's links you can go away and look at on your own time. These are different industries and different countries and the seconds to visually load it on a 3G device. I've got a mobile phone how long until it looks like it's done. There are very few of those that take less than 10 seconds. What percentage of all users are abandoning those brands and going to faster competitors or getting frustrated or going offline or doing other things and even if they're coping with it and going through it, how much less likely are they to upsell or be cross-sold or engage or tweet or do anything positive. The thing is this isn't going to be the state for long. This is because of the world we've come from and the experiences we've been through and the way that the web was. Because even if you're direct competitors and the people you're up against are still slow and you're benchmarking against them and they're just as slow so there's no motivation to move forward they will start reacting and improving very soon. Why is that? Because Google are obsessed by speed and we all know that our ecosystem and our strategies and our brands and our sites are heavily influenced by what Google want and how they behave and what their version of the world looks like. So in July when they said people want to be able to find answers to questions as fast as possible and we know that speed is important they started to really hammer on about the importance of speed finally. However really frustratingly they said in the second paragraph there's big speed update will only affect a tiny minority of pages and queries like only a few really slow or really bad sites will be impacted directly. Now when you read between the lines they're essentially saying that speed doesn't directly affect search rankings which is incredibly frustrating because the next paragraph goes on to say almost the opposite it says we encourage developers to think about how performance affects user experience because speed under PIN's experience I think user experience is a ranking factor and arguably with my SEO hat on it is the only and the biggest ranking factor whether you call that brand, whether it's the result of good user experience generating links and attention and creating the kind of positive effects Google's looking for user experience which is under PIN by speed is one of the most important factors in successful online marketing. Also worth considering as we go forwards Google are not only obsessed by speed because faster sites give happier users that spend more money they're also obsessed by speed because you achieve speed by being more efficient. You have fewer resources to download better built websites you have more efficient loading techniques all of which saves Google a huge amount of money. Google's biggest cost center is crawling and indexing and processing the web and if the web is slow and the web is clunky and the web is bloated and it's old that is extraordinarily expensive for them so they're motivated for a whole bunch of reasons not least of which is that a faster web is a better web for them so there's this intersect between good user experience and their crawl efficiency and getting faster websites it's in their interest to be pushing this agenda further and further in fact when you look at projects like AMP and Google paid speeds development resources and even Gutenberg which allows them to be much more efficient in how they crawl and consume content this is not going to go away speed is going to get more and more competitive and more and more important efficiency improvements will continue to drive revenue for brands if you make your website faster you will make more money as a universal truth which will only become more and more true as time goes on because there is a commercial imperative because there is opportunity on the table because you can make more money with speed that should drive progress who was that always one get out but the thing is changes behaving well at the back is hard changes hard so the kinds of changes we're talking about in order to take advantage of this opportunity often require big architectural reinventions I've got my clunky old website that it's hard to iterate on hard to improve I'm stuck with yesterday's tech etc etc essentially you've got to sort out all of your technical debt you've got to adopt new technologies like javascript frameworks and ways of working and agile methodologies yada yada yada but more importantly you need to develop a culture of speed speed isn't something that you fix once because then all the reasons that it's slow now will just happen again and you get slow over time to compete on speed you need to bake speed into what you're building the problem is most big development projects the kinds you need to undergo to achieve this take 3 4 5 years in the real world where businesses have other priorities to execute and implement the talent you hire and the people you train and the people involved in those kinds of projects take time to find and train and spec and scope and build this isn't the kind of thing you can fix overnight so when Google started talking about speed in 2010 when they said today we're introducing speed into the ranking factors nobody really paid a huge amount of attention because it was one thing amongst many others but over the course of a timeline you see in 2016 them saying really guys speed especially on mobile is important it's only then that brands really start to take notice and say you know what okay we need to sort out all our technical debt it then takes them 2, 3, 4, 5 years to deploy their shiny new solutions so in 2018 the rest of it into 2019 and 2020 that's where we'll see those initial reactions coming to the forefront so if you wait to react and to consider the importance of speed until your competitors are there you only then start your 3 to 5 year journey you already need to be on that journey otherwise you're going to be outpaced and particularly important because as sites get faster slow sites are going to feel slower the fastest experience that a consumer has will become their baseline expectation anything slower than that is going to feel worse and feel clunkier so if you wait until that gap exists and then start fixing for it that gap is going to get wider and your competitors are going to get further ahead so here's the plan what are we going to do? the thing is if you're not already way into that big web redevelopment process and re-architecting your whole platform it's probably too late to stop you need to change the way you approach this and find a different way to compete and to catch up you win by making a thousand tweaks and you make a thousand tweaks this week and you make a thousand tweaks next week and you keep making thousands of tweaks until you die that is the only way you can compete on speed and it's the only way it makes sense to think about it essentially you've just got to make bits of it faster like that so woefully over simplistic but that is the brief just keep making it do try and fix the big architectural nightmare don't try and re-architect it just make bits of it faster every day, every hour so what does that mean and where do you start and all the tools look like and how do you do it? there are two things you need to understand two fundamental truths that underpin the entire philosophy of speed and everything you need to know about it what is there is no such thing as speed as a concept it doesn't make sense it doesn't work, it's not actionable how do you measure speed? okay so let's analyse how long it takes for a page to finish loading nice and simple except what does that mean? what if the page has components that only load when you interact or when you scroll are they finished? how fast was that? what number do you put on that experience? what happens if the page loads really really quickly but then very slowly loads a whole bunch of third-party adverts is that fast? is it slow? how do you understand that? what happens if the time until first byte the amount of time until the server starts responding is very very fast but then everything else trickles in really slowly or vice versa actually it takes a long time to react but then everything appears instantly which of those is faster? how speedy is it? it's not as simple as just a number you can measure we need better definitions I want to tear down all of the stock and default performance tools on the market and explain why they are all full and why you should do something else entirely all of them suck this is a screenshot from Pingdom's FTP speed check and it gives you a whole bunch of things like a nice screenshot of your website and a nice performance grade and a score letter and some bits and pieces the performance grade is just taken from google page speed score which I'll come into and tell you why that's awful so hold that thought the low time of 899 milliseconds which isn't bad is at that point in time for the URL I've queried which is the homepage which isn't representative of the experience that many visitors have it's for that specific configuration and from users from Sweden when the weather is as it is when the phase of the moon is as it is when there's a major football game like there are so many scenarios there that doesn't represent any one individual human 91% of tested sites is based on other people who've tested their pages with the same config just on their homepage in the last 30 days that's self selecting for a very niche type of group none of these things relate to reality the bits which are useful are the size of my page and the number of things on it well obviously I can make my site faster if I load fewer smaller things none of this is particularly enlightening this is GTmetrics which combines stats from the range of speed tools it's well renowned as one of the best and one of the most diplomatic and neutral tools it does the same thing it gives you relative scores to other people and their testing and other tools none of which makes sense when you look in reality it tells you the fully loaded time which is its own proprietary measure of how long does it take until it's loaded but what does loaded mean and how fast is that there's a wonderful bit at the bottom that says leverage browser caching i.e. on static assets can't quite see from the back I expect but that's Google Analytics and Google Tag Manager neither of which I own neither of which I can influence the JavaScript of these are third party dependencies and libraries that have nothing to do with me that I just use I cannot affect the caching time of those assets this tool is nonsense but it's not entirely true there are some advanced techniques you can use to serve local versions of those files but I'm not going to go into that but it's worth chatting afterwards if you're interested you can solve for those Google Analytics which has an inbuilt speed report that only samples one in every 100 of your visitors by default you can change that but nobody does so if you have one visitor in a million who comes to your site on an old mobile phone from China all of your metrics are shot this is absolute nonsense don't even look at this are you filming this live in the moment sorry we'll slow it down afterwards so that's nonsense ignore that one this is Google PageSpeed Insights which for a long time was the most nonsense of all the tools mostly because this number where it's what did I just do that was exciting bear with so for many years many years it didn't actually scan and measure your site it just gave you a report based on the things it thought you had done just from looking at your code so it was rather than saying this bit slow it would say you haven't done page speed stuff with this it just gave you a checklist and people thought it was real and it was massively misleading so ignore all of the you're good what does good even mean in terms of speed this bit however is the first useful relevant piece of information we discover in all of these tools they have a metric called First Contentful Paint this is real this is useful and they measure it relative to other people's experiences on other websites in similar niches First Contentful Paint as documented by Google is the moment when the browser first renders any text any image anything that's not just a white screen essentially how quickly can we show something that's not just a blank screen how quickly can we get something there that people can start to see that it's loading this is a really good metric to optimize for because no matter how long it takes overall and what the speed is the faster you can get something in front of a user the faster that's going to feel like an experience the faster they can start reading engaging consuming let's grab an example this is a picture of my McKeel is out in the front I don't know if it's any good but there's all sorts of stuff loading here so we are loading interaction on the nav a big image a video half of this is below the fold down at the bottom there's tons of comments and there's no comments on this one there's like this picture of McKeel down here all of this happens out of sight of the user and there's a whole bunch of techniques like lazy loading and stuff that we could do use to say something like what if we just did this and we just loaded the framework of the page a bunch of the images we waited to load stuff below until the people are down there this is pretty simple but conceptually this makes the page feel much faster even if it takes the same amount of time to load because we're getting to the stuff above the fold much more quickly and people are seeing something that they can read and consume that feels much quicker goes well beyond lazy loading into considering every point to be transferred every color we paint to the screen every css border that's introduced all of these things have a cost as you strip them out you start to get much much closer to having something useful on the screen so we did a bunch of stuff I've just said all of that now the really fun thing about this is we did this and the site feels faster to use but none of the scores in the tools changed like I know this is faster I can feel this is faster I believe but the scores didn't change which brings us onto the second rule which is that the only thing that matters is the perception of speed if there is no perfect metric for how fast is this the one thing we do know is important is how fast did this feel which is obviously much harder to measure but Google has a really nice paragraph on this which says that load is not just a single moment in time it's an experience that no one metric can fully capture and there are moments that occur during the load process where the user decides whether it feels fast or slow that's what we need to be optimizing for you can make it slower but make it feel faster and you've achieved the same goal that said there is one golden metric one perfect moment that occurs in that flow which is worth universally optimizing for which is the time to interactive time to first meaningful paint time to interactive the moment when the page has displayed useful content i.e. time to first content for paint when you click on stuff stuff happens and it happens quickly at what point can I start interacting with this when is it alive, when is it away you've all had experiences where you've loaded a site it's ticking along and you're trying to click on it and it's like oh it's not ready, nothing's happening get away or scrap that experience entirely load minimal viable stuff above the fold and make it interactive and responsive start to split what's loading so that you only load what's necessary all of these have links you can go through and read the documentation on exactly how to do it it's all very well defined, very straightforward how quickly can we make it feel ready that's the mission, not how fast do we make it not how well can we score on these tools how quickly can we make it feel ready perceived speed is hard to quantify and measure you can survey, you can analyze but always your best tools are your eyes and get it loading us fast, quickly the interesting thing about this kind of approach is there are lots of trade-offs there was some interesting conversation about GZIP in the workshop this morning everyone familiar with GZIP, hands up if you are not GZIP is a thing, GZIP is an approach for a technique for zipping content up, down, in, out and conventional logic says that GZIP is either on or off and if I turn it on things are faster because service compressed stuff if I turn it off things are slower this is rocket science right it has a variable setting from 1 to 9 and most servers will put it on like a 5 by default if I have it on 1 my server uses very low compression doesn't do much effort and it ships the asset really quickly but the asset is big and clunky so when the user receives it it's slow to load or I put it on 9 my server spends a little while shrinking the asset down until it's really small shipping it and then the user loads it really quickly which of those is faster you might be better off shipping something big much more quickly if you know the user is on good bandwidth good connection you might be better off spending half a second making it really small and really efficient this will vary by site, it will vary by connection type it will vary by location, it will vary by server it will vary by software, it will vary by plugins and this is one example of 100 things where there isn't an easy way just to make things faster you need to start to understand and analyse what bytes are we shipping to users in what order with what priority and how do we make this feel faster it's not an easy exploration there are lots of moving parts you can play with this is the W3 spec and I apologise for how horrifically displayed it is of everything that happens when you load a page starting with the initial redirect and hitting the app cache all the way to the onload the red underlined bits the bits you can affect the stuff between these are all moments in time as a page is requested as a server responds as the browser starts to render bits of it these are bits where we can optimise increasingly the word gets more complicated and suddenly we have javascript frameworks and single page apps and caching levels sat somewhere in that processing bit and increasingly now we've got a world of service workers and progressive web apps that occupy a space over here somewhere they interfere with how other caching works and then we've got a whole process after the load where how you load this impacts how things work and how efficient it is this is scary and complicated and big the nice news is the performance optimisation is no longer an art, it's no longer magic there is a science to doing this every site in the world I will stand by this every site in the world can load in under one second there are politics, there are tech challenges there are issues, there are legacies, there are bottlenecks there are platforms but they can there is no reason why any given site can't make those performance optimisation tweaks to get to under a second you just need to follow the rules and the rules are simple, this is from Google and you have one second, how do you spend it that's a thousand milliseconds if you're on a 4G device because everything is mobile now this first section you can't impact it takes that much time for your phone to connect to a cell tower and you're limited by the speed of light and all sorts of big cables under the sea that bit you can't affect the rest of it you can impact with your hosting your servers and CDNs with WordPress itself, with your themes and your plugins and your configurations and then how you factor and build your HTML your CSS and your JavaScript you have tools to shorten these bits you can optimise all of these to bring it down in a second, that leaves you with 700 to play with but if all your competitors are aiming for this as well you need an advantage, shave our 100 off you have 600 milliseconds to play with from somebody hitting enter in a URL or clicking a link to having something visible in front of them that responds to their interactions that's what you need to get to and you need to measure that, you need to monitor it you need to improve it's right to all of the time so let's do it, let's go through, wake up how can I possibly convey any more energy get a click I'll come with you I'll turn this around so we need a target, if we want to make this achievable we need an end goal Google very helpfully acknowledges that it's not easy to meet the one second budget but you're not trying to load everything and compress it all down and make it instant you're trying to be more tactical and considered in how you load, you're going to say within that one second framework we just need to get stuff from above the fold that's responsive and reactive so start by looking at these areas how quickly can we make the server respond and react how quickly can we get something on the screen how quickly can we make it interactive and then how quickly can we finish except no, that is insane you weren't listening this is not what I've been saying you said you win by a thousand just now, you win by a thousand tweaks, none of this big scary stuff so turn this model upside down and only start with trying to shave off the big stuff that stops it loading quickly, find the things you're finishing and make them finish sooner these are the easiest things you can do initially just go and find the slow stuff and every single one of you can do this use the tools to spot the problems don't use the tools to measure and give you magical scores and trend them against your competitors use them to spot slow stuff this is Yoast.com and I've got, this is Pingdom's FPT tool I've ordered this by the load time of different assets and I've found this one this is a line of JavaScript that is only four kilobytes, it's tiny but it takes a while to load so there's something going on now, we should make that better but what's really interesting is it's stopping that from loading and if I'm waiting for all these bits to finish until my page is interactive and visible and there's stuff there, that's a real issue like if that bit could start loading much sooner everything would react more quickly so we refactored that file we went in, we chopped out some unnecessary bits we simplified it, we updated it it was an hour's work that says 625 milliseconds the homepage loads in 0.6 seconds that's incredible, down from 0.8 or 9 there's a huge impact just from un-bottlenecking a thing all of you can use the tools to find those sorts of things point people at it and say fix this bit this is easy woo! except this is a gross oversimplification and I've conveniently left out a difficult piece of truth which is that that 625 seconds is on a desktop and the world is mobile and people's experiences and frustrations and propensity to buy is much more impacted on mobile by speed than it is on desktop on mobile if I change my Chrome developer tools to emulate a fast 3G device then we get down to our cut and say 2.77 seconds my 0.6 seconds my 600 milliseconds is nearly 3 seconds and when users abandon 47% of the time when it's over 2 seconds maybe that's really bad that's slow oops and there is no magic bullet for fixing this we've got it about as fast as we can by doing big complex architectural stuff now we're into a place where we need to chip away at that 10 milliseconds at a time 1000 tweaks at a time until we die so I'm going to talk very very quickly through some of the stuff we've already done to get there which is all stuff you can go away and learn about and reproduce and then some stuff we're going to do this bit's really boring it's just lists of me reading out things but we'll go through that anyway so there are three types this isn't over simplification I apologise to anyone who works for any of the hosting companies here in the room there are three types of hosting in the world enterprise tier, mid tier and DIY tier depending on the sizing scale and nature of your site you're going to want to pick one of those three categories I have great experience with and recommend any of these guys depending on those tiers obviously we have a whole bunch of sponsors here kind of straddle some of these areas SiteGround are freaking awesome for working with Yoast.com and they're doing incredible things for us WP Engine make everything very very easy ServeBot are doing some really smart stuff with caching and DigitalOcean is great if you want to DIY and set something up and have a play although options exist fine what's right for you but if you're not using one of these or one of the sponsors who are here today probably review your hosting choices if you're using a hosting company that has an animal as a logo definitely review your hosting choices you're making horrible mistakes we used to use Mac CDN as a content delivery network for all our images and assets and stuff but we've switched to Cloudflare which we've used really really heavily now you can go away and research this on your own time but Cloudflare is essentially a magic wand that makes all of your assets and media much much faster if you're not careful you can break your website by going in randomly changing settings on an evening without any developer processes not that we know but it's like hugely powerful and you do some really cool stuff with it it auto compresses all of your media and your assets and it works that your developers would otherwise have to do which would bottleneck for ages we do a whole lot of clever low balancing and engine x caching stuff I say we site ground do all of this for us it's part of the reason why I love them so much they handle all the complex servers doing things in the background stuff that I'm not an expert on and Cloudflare in particular has three bits which are really really cool which you should at least go and play with the page rule stuff allows you to say cache this bit heavily but only if the user is not from Germany and only if it's after three o'clock and they don't have this cookie you can start to do some really smart stuff with redirect users condition the cache bits and don't cache other bits that allow you to minusculey tweak some of these areas the Argo system you pay a bit more for like Cloudflare is only $20 a month anyway on the basic package this maybe takes it to $30 they intelligently root network connections so users who are in other countries from your server get much much faster responses Cloudflare workers allows you to write to arbitrary code which executes at their edge notes so you can say the microsecond before the page is served switch out the canonical tag change the HTTP headers and redirect it somewhere else or anything, anything you want huge amounts of power and flexibility and processing stuff we do a whole lot of work optimising the actual requests and the response from the server so we use HTTP2 very heavily which allows us to parallelise parallelise all of our assets so once upon a time the web was slow and you had to load one image at a time and you had to use crazy things like DNS sharding if you're not familiar with any of this terminology I apologise there are lots of links or call me out or shout at me or talk to me afterwards but definitely looking to HTTP2 here is your resource this is a guide by Tom Anthony from Distilled and he explains how HTTP2 and HTTP push work all through the metaphor of trucks on roads it's incredible like tunnels for SSL and barbed wire and all it's amazing this is an excellent educational resource to understand how you can quickly transfer resources across the web we do a whole lot of DNS and asset precaching this is something that WordPress call doesn't do very well if you know you're loading third party stuff like Google Tag Manager and Google Analytics you can tell the browser in advance you can say I am going to need to connect to this third party domain then all the time your browser would have spent doing SSL handshakes and DNS lookups is all done quietly in advance and it makes third party stuff much faster there's a guide for that as well guide look at that it's really cool you can do it for assets and images much faster when you know you're going to load them later in a page if you're using Cloudflare and you're doing pre-loading images CSS, star sheets, fonts JavaScript Cloudflare can automatically upgrade those requests to HTTP2 push which means they're sent with the initial server response so conventionally I ask for a page and it downloads 10 bits of JavaScript and it takes a while to load with HTTP2 push you download the page and it comes with it because the server knows that you're going to need it and it loads instantaneously as a trade-off because the initial response is slower tests like you would use it we massively reduced the amount of cross-domain resources we learned that's really off-putting the face not so much but the phone not I'm very I don't know I've had too much coffee thank you so things like jQuery and Google Analytics and other resources we've taken our own copy connecting to all these third-party domains it just means that because everything's going through Cloudflare because everything's optimized there's no bottlenecks on any of that loading process WordPress itself has been one of our greatest enemies as it often is we've minimized the plugin overhead enormously we absolutely stripped back really brutally the third-party stuff we rely on and we're continuing to prune that and try and develop our own solutions there's more work to write that obviously but if it's taking 10% of the code base and we tie it in nicely to other stuff we're doing we've done some work managing our database indexes with SiteGround they were very helpful in doing some of that we did a lot faster we used caching this is boring and we stripped out a whole lot of inquis that WordPress does like WordPress inquis a JavaScript file for converting emojis like how many sites use emojis and comment like why is it loading and it's a cost domain request like go look for your HTML source code and anything that looks insane is probably insane and get rid of it we disabled WPQAM everybody loads WordPress the backend system goes do I need to do anything like update plugins or check the time every single time you know like that's a huge amount of overhead you can turn that off and you can roll your own solution that will shave 100 milliseconds off every request it's huge media stuff we're splitting all our JavaScript and CSS into little files again if you're in the workshop this morning this will be familiar but rather than having a big style sheet we now have a style sheet for the home page a style sheet for the footer a style sheet for pages which include this module or that module and we can cleverly load only the ones we need and then we're like 10 times faster and much smaller same applies with JavaScript and moving things to Async fonts for a nightmare if you're using custom fonts load them locally not over Google fonts or anything like that but also you can get glyph editors which allow you to edit the font file how many times do you use non-western characters or in terabangs or per advanced formula symbols like there are so many bits of your font file that you will never use, you can strip them out and make it much faster we use Google type manager for anything that smells like tracking scripts or analysis so Google analytics hot jar and other stuff have all been moved out of our site into this third party so that loads after the page is done it doesn't impact any experience that means we can get to that initial response much more quickly images of a nightmare WordPress we use SRC sets and we try and scale images so one of the slowest things that holds up time until first interactive is the browser has to manage the layout of the page it has to literally paint pixels and colors onto the screen images which are the wrong size for the container they're in are one of the worst slowest culprits for that so if I've got a box that's 100 by 100 pixels and I'm loading an image that's slightly bigger or smaller than that the browser has to calculate resizing that and squashing it in it's phenomenally slow like milliseconds and milliseconds find opportunities to get that right using combinations of media queries and SRC sets and reduce that by down a whole load of the tools will spot these kinds of things for you it automatically converts many of our png and jpeg files into webp which is like a sexy futuristic google image format that's 10% of the size and we obviously use heavy caching on things like assets and images and jpegs etc that's boring what's really interesting is that says 0.3 397 milliseconds that's in the last two weeks or so of just going through and making a thousand tweaks and not dying yet but feeling like I might want to at some point surely and on mobile that's now under two seconds consistently from around the world yeah that's a whoop that's done right that's a whoop okay so very quickly in five minutes or less what are we still doing because this is not done like that's not fast enough 1.9 seconds is only just under the lots of people won't bugger off because it's slow mark that's not good that's good enough for now but so there's more to so I want to make better use of HTTP to push you can do some really sophisticated clever stuff with this but it gets very very complex with handling what's been cached where and what hasn't and how does it work there's a huge amount of reading you should do by this guy Jake Archibald it's really genuinely really really interesting it's about the future of how HTTP requests should work and if some of the stuff he's talking about comes to pass it will change the way that we build change the way how we communicate with servers about things like images politically we are moving the whole I don't know if this is public but we're moving the whole of this.com to canonical amp not it who cares if you're not familiar with amp yeah fine amp is an alternative type of HTML format designed to make pages super super speedy except it's heavily heavily influenced and pushed by Google and there are some political concerns around the shape and flavour of that however it's freaking awesome and the latest version of the amp plugin for WordPress which is coming out of beta at any moment now automatically can automatically convert your templates into amp code works reasonably well which makes it lightning fast school compliant etc etc but it also does some really cool stuff with automatic tree shaking which means those pages only load the CSS that they explicitly need it reads the page it looks for the elements it looks for the classes and it says I only need this bit of CSS so all the work we would have to do of going through and micromanaging it and working it all it will do automatically which is really cool it's the worst acronym in the world but at some point we should go to Pwamp which is amp as a progressive web app so progressive web apps are the next generation progressive web apps are what kills the current app store paradigm progressive web apps are a way to use service workers to turn your website into something that behaves like an app you get home screen permissions you get access to API's you get to make your website seamlessly transform into an app like experience they're really cool you can do this now it's a little bit complicated but when you combine that with amp you get essentially instantaneous online offline hybrid websites that feel like apps which is definitely the future then what I haven't talked about because I've bored you all and there's lots of other stuff is post load interaction so I've talked a lot about getting stuff on screen quickly but when it's there it still needs to feel fast and the process of moving my mouse over things and clicking on things and seeing how elements interact and react has a huge impact on the perception of speed and if Google is measuring the perception of speed rather than an actual hard speed metric that experience still matters just as much as the initial load so things like does the button change color ever so slightly and does it move and indent and how do things flow also really really important there's a great resource you should read by a woman called Emily Heyman about maintaining high frame per second animations as a whole other tips around how JavaScript works for CSS hello and you can go and dig through all of that it's really really cool awesome things that we explicitly not doing which it's worth touching on briefly but you might want to consider based on your setup in your use case flopping too hard and we're not lazy loading images so conventional wisdom would conventional wisdom would say if you're showing images lower down a page or you've got lots of images don't load them all immediately wait till the user sees them and then load them in gradually we're not doing that because AMP will do that automatically for us so that is one of our biggest delays at the moment we've got like a hundred images that aren't even on the screen but we'll fix that through AMP which will be nice we're not doing above the fold or critical path or deferred CSS these will similar techniques where you say ship a tiny bit of CSS that will render the above the fold content the stuff that's immediately viewable because our CSS is going to be so efficient in AMP because it will handle a hollow that automatically it doesn't make sense to if you're not looking at canonical AMP this is the most important thing you can do take just the CSS you need to display your navigation your logo take it out of your workflow and load it immediately through something like HTTP to push then the pages immediately viewable and you're not waiting on downloading all the stuff your photo and other pages similarly we're not going to invest in skeleton screens so this is I think LinkedIn as a medium or something there are a whole bunch of modern app like sites which load something that looks like this before they load their content it lets you know that something's happening the perception that it is working is much better than just ticker whirring away again this is all about the psychology of speed actually doing something like this might slow your site down a little bit in actual terms but to user it's going to feel much faster because something is evidently happening some things you can go away look at on your own time because this is a lot to digest in however many minutes it's been if you're starting out in this world and you want to understand where to go and you want to make business cases and you want tools to start and explore read everything that my good friend Emily Grossman has written about performance that is a link to a video it's really really good it's similar talk to this but much more useful and well presented and this is John Henshaw who used to run Raven tools and SEO platform he's really I should prefix actually these are the only people I would trust to talk to about this kind of holistic speed approach they really get it they live it they breathe it John's super smart on a kind of mid-level okay now I want to know what the code samples look like now I know now I want to know how this applies for this server this term technology Bastion is far and away at the head of the game we chat a lot about the next generation of this sort of stuff he has reams and reams of okay here's specifically how to go about it here's the next generation technique here's the widgets here's the approaches if you're not already using something like Cloudflare I will allow you to use also Maxidia and our Fastly but Cloudflare is really the we're going to install Cloudflare this will magically get you from step one to at least step three or four and there's a guy called Ilya Grigoryk who works for Google who writes the documentation on all of their best performance optimization guides he's phenomenal follow him on Twitter read all of his stuff Google's educational resources on this sort of stuff are incredible this is the web fundamentals bit of their paid-speed guys go and consume all of this like I learn new stuff about web performance every time I read this it's amazing and if you're not looking at AMP at least go think about it I get that it's politically loaded and it's an alternate version of HTML which isn't necessarily the best way for the world to go but it's so fast and it's so much easier to bolt on top of a broken site than it is to fix a site go out and win like a rainbow unicorn kitten you have all the tools you need to make your site load in under one second I expect benchmarks and performance before this time next week make a thousand changes don't try and rebuild your entire architecture and your site and your business just go and find the slow things and make them faster thank you very much I forgot to put a time mark on my screen so I have no idea how long that was but your face says it was too long spot on how are you doing? I'm good I could use a coffee no coffee for channel please when you see him off or anything with no coffee no caffeine for me okay this needs to sink in a little yeah it's a lot questions already everyone's destroyed like so can you please repeat the question can I please repeat the question yes I can I just want to say that was the best best ending screen to a presentation ever thank you that's my favourite that's what you want to aim for hey you mentioned AMB but what about facebook cellphone same principle repeat the question I didn't so I mentioned AMP what about facebook incident articles which is a similar kind of thing so AMP is particularly important because google rewards but doesn't reward pages on AMP because you get access to the featured news carousel in the search results and when you click on one of those results you're taken to a cached version of that page on google servers which preloads and goes instantly so your AMP pages are going to be discovered by and visited and consumed by users searching and finding your site so it kind of has this external global reach in theory facebook incident articles will only apply to people who are already going to see your content in their feed now what's interesting about facebook incident articles is you're essentially giving away your content to facebook and removing the right to market or advertise or convert from it so at least you get I make my website faster facebook you're just like have my content so risky thank you so I'm very curious into what she has some of the SEO because as I see speed is marvelous and you know like history well it's a long story but we did walk up to many years and they kind of solved the issue and we're not the ones to complain but there is a trade-off that it can hurt your conversion and can hurt your SEO so can you get into that so what is the SEO disadvantage of AMP and I guess the board of disadvantage and the rest this could be a whole talk so I'll try and do something very fast AMP is AMP is allowed to AMP is in theory open source and in theory a product of the community but is 90% owned and influenced by google it is a proprietary almost proprietary and competing format and standard for html so you have normal html you have AMP html and it is very rigidly defined about the kinds of things you can and can't do like you can't load your own javascript which many of the sites in the world use for adverts or functionality things like jQuery etc you can only use the elements that they allow so you have to use AMP images well than images and you have to do your analytics this way and you have to have their menu rather than your money your flexibility and your creativity is somewhat limited by their framework now they're getting better at that and it's still an evolving standard but it's not quite there yet so you make this kind of weird extra alternate version of your websites that coexist alongside your existing one and it's not as designed it's not as interactive and you sacrifice things like your internal advertising and other external dependencies and tracking and you have to maintain both of those versions forever and the analytics doesn't quite hook up very well it's very imperfect as a standard but everybody's mobile website is slow and it's easier to go we'll build a separate thing over here that's faster and reap the benefits from SEO and Google than it is to fix your underlying problem many many big brands use it as a plaster they go it's too hard to fix our slow site we'll just do AMP and the scary thing is nobody's quite sure will it stay around for years to come what happens if it disappears because I've got URLs and content on here if Google are successful and it does persist then it replaces the open web because AMP HTML becomes normal HTML which has scary political implications that might be fine but it might be a horrific dystopia and nobody's really in the driving seat it's still unfolding I would tactically for tactical reasons adopt it now especially with the canonical AMP WordPress approach because it's easy to turn it off you get the advantages and it does make things faster and easier but yeah you're going to impact your conversion rate it's not going to be suitable for all sites it's better for your e-commerce store might do really badly from it but your news site might do quite well there's also a real challenge where if you only do some of your site in AMP like I will do my news articles but not my product pages that's a really disjointed destructive experience going between them and then you get I don't understand as a user so make a case by case choice but yeah it's not a perfect solution by any means one more good question is a CDN only sensible or right for a site with a large international audience absolutely not CDN's historically were primarily designed to say i.e. my server is in London if a user comes from Australia serve them a copy of my site on my images from Australia don't make them connect all the way across the world and many CDN's were designed primarily to solve for that problem distribute the assets and serve them locally increasingly CDN's as a market are evolving to also do on the fly performance optimization and security and things like functionality some more or less depending on the level of purism cloudflow is a really good example that just does a hundred things only one of which is really the kind of geo element it's one of their big sales but it does things like the automatic webp conversion is a really great example like upgrade all of my images on the fly improve the compression automatically minify my javascript like the geographic component is quite small in their overall offer others do more or less and max CDN is much better at analytics interestingly than cloudflow or faster like if you want to understand image by image the performance and the throughput go with max CDN if you're a bigger business and you want to do more sophisticated complex stuff go with fastly but cloudflow is the best thank you just very quickly again I know there was lots digested there there are links underneath each of the images in there there are huge amounts of reading like this is the product of years and years of just scrolling through this stuff I will put the deck on site chest someone should appear somewhere but go and go and read like there's definitely some stuff you can do here just to make your site a bit faster and the world will be a better place for it thank you thank you so much