 All right, first, excuse the sexy voice. It's not how I normally talk, but stuff happens. All right, so how do you make your side five times faster in 10 minutes, but without changing anything else? So it still works. It's a bold claim, but I think you'll see that it's doable. All right, so what we'll do is cover why speed is important, which is controversial, but I'll state it anyway. We'll talk about page loading, how you actually look at it so that everything I say afterwards makes sense. And then we'll talk about how we save time by practically doing away with some stuff, shrinking other stuff, running things in parallel rather than one after the other, and then whatever is left, running it as fast as possible. All right, so essentially speed is a major part of user experience, and every time I hear user experience, I think Google. So Google's really big on user experience, and speed is a big part of it. And research shows that people simply go away if they have to wait for too long, and the more people go away, the less conversion you have, the lower your conversion rate. The thing is when people leave, they typically go back to the search engine. They go back to the search engine, Google goes, this wasn't a good site. This was a bounce, so it lowers the search ranking. So you get even less traffic, and you're stuck in the boondocks, you know, page 97 or something, and then you get even less conversion, even fewer conversions, so you got no business. So essentially investing in speed is good for business. Now, this may seem a little bit technical, but really it isn't. Every time your browser wants to load a page, it uses something called a HTTP request. And these are the different parts of HTTP request. You can think about them as going to your neighbor and like you live out in the country and you wanna borrow a cup of sugar. So you figure out where the neighbor is first, right? That's DNS. Now you know where they are. At TCP connect, you drive over to them. SSL connect is you knock on the door and you ask permission to come in. And then HTTP request is you say, here's a cup, can you please fill it up with sugar? I'll repay you someday. And then you wait, because the person goes in and gets your sugar, then comes out, and then the HTTP request is here's your sugar. Okay, so you then display your sugar onto your tea or something. All right, so putting this in the perspective of an entire page load, the page load requires multiple HTTP requests. So the first thing you get obviously is the page itself, but then you get style sheets and JavaScript files. And the image is really important. Sometimes you get videos. So you get a whole bunch of things that eventually the browser will render onto the page. Now if you look at it, it really doesn't look like a waterfall, does it? It looks like a cascade. So it's like a series of waterfalls. What we want to do is we wanna make it look like a waterfall. So we wanna bring everything as close to the beginning as possible and drop it straight down. So click, there's the page. Now you can see that there's a blue line in the diagram. The blue line is the perceived end of page load. So some JavaScript might run afterwards. Some things might still happen afterwards, but that's the point where the browser says to the user, you're good to go. You start scrolling, you can start interacting with the page and so on. What we wanna do is we wanna make sure that the perceived, user experience again, so the perceived end of page load is as close to the beginning as possible. All right, so let's start by eliminating. So finding out where the page is is basically converting the domain name into an IP address and that's done using domain name services. Sorry, and if we cache this, then we don't have to do it more than once per page load. So everything, like images, they come from the same domain. The style sheet will come from the same domain, but the browser already knows where it is. It's already resolved it for the page request, so it's already done. It just hangs onto it. If you're using a very common site like fonts.googleapi.com, it's very likely that your internet service provider has cached this and so you're sitting there and you're asking the service provider DNS and so it knows, it doesn't have to go all the way out to find the domain for the zone file for Google and tell you, so it's a lot quicker. There's many layers of this, okay? So that only happens once per domain, per page load. And then subsequent page loads, it doesn't need to happen. Resource fetching, we can eliminate by using browser caching. So when you're going to page number two, style sheet's the same. JavaScript might be the same. Your background image for the page might be the same because it's part of your theme. Your logo might be the same. So the browser just hangs onto these. It'll be faster. Image fetching, essentially, if you know what above the fold and below the fold means, there's a visible area that opens up first up. And why would you wanna load all of the images if you're just seeing the ones above the fold? So lazy loading just loads what you see. If you're scrolling up, you're about to see something else, it creates a request to get that. But by the time the blue line gets there, although most of your images may not have loaded if you're on a long page, it goes, yeah, and perception is that the page is loaded. We can eliminate requests completely. There is, one way is to combine files. So every plugin you have in WordPress, so plugins have their own style sheets. They have their own JavaScript. Your theme might have different ones, handling different things because they're made up of different components like libraries and so on. So they all have different resources, but you can put all the CSS into just one file and all the scripts into just one file and it works the same, but fewer requests. The other thing you can do is called HTTP push. So essentially, when you're on HTTP and I'll go into that a bit later, HTTP is a new protocol. It's more advanced and it's got all these lovely features and one of them is HTTP push. So the server gets a request and the request says, get me this page because the browser doesn't know what it needs yet. But the server looks at the page and says, oh, you're also gonna need like these Amazon, people have also bought. So the server can say, people who have downloaded this page have also gotten this style sheet. Would you like that too? So it pushes it out even though there was no request for it yet. So we eliminate the need for a request. Now something big with WordPress is, WordPress is based on PHP. So it dynamically creates pages by combining PHP programs with database content. So I put it all together, compiles it, runs it and generates the page and then serves it through the web server to the browser. But if the pages don't change much, if the content isn't very dynamic, then you can just save that for later. And then the next request that comes along just gets a static, pre-produced page. The other thing is WordPress will run background jobs on page loads. So people get to a WordPress page and it's time to run some background jobs. So WordPress fires up WP Cron and the user has to wait for it. And so occasionally people have to wait more than they should to actually get the page. So what you can do is you can use like the cPanel Cron, the hosting system Cron rather than the WordPress Cron or actually run WP Cron from the operating system on a regular schedule rather than having people wait for it. It's a bit of an advanced thing but doable. All right. Just a thing to mention on page caching, also most caching plugins will generate the page when it's loaded for the first time. So the first time anybody loads the page and it's not in the cache or it's expired, they still have to wait for page generation. Now, what happens is when you turn on caching, many people don't actually run WordPress because they're getting a static page, okay? So what you can do is you can schedule something called a preload. So the caching plugin, again, and it works with the system level Cron. So on a regular interval, WP Cron runs, it tells the caching plugin, I want you to preload my cache. And so nobody ever waits for paid, well, not ever, but rarely do people have to actually wait for page generation and they never have to wait for WP Cron to run. Okay, so that's how it all works together. Okay, so we've eliminated some things and now let's see how to make some other things smaller. So remember those files that we combined earlier, now they're really big. So what we can do next is we can shrink their size and we can do it in two different ways. We can minify them, which takes away spaces, new lines, comments. It sometimes substitutes long variable names with short variable names. It does a whole bunch of stuff, but essentially it leaves the bare minimum that will still look the same on the browser. The next thing we do is we turn on compression and that's the communication between your browser and the web server. Is then the browser says I'm okay with compressed files the web server crunches it, compresses it to a lot less of the size when it's plain text and then sends it to the browser in a fraction of the time the browser opens it up and uses it and nothing lost in this process. Images, WordPress is wonderful, especially lately. Can't remember what version that came out 4.8 or 4.9 or something. In inside of WordPress you might be familiar with thumbnail sizes when you embed an image you can choose what size to embed it in. They have these names in the media settings you can configure the actual sizes. So essentially when you upload an image WordPress crunches it and produces smaller copies of it based on the definitions of your theme, your media settings and some plugins. And so you get a choice. Now when you embed an image in your content WordPress also automatically generates complex command that tells the browser if all you have is 320 pixels don't bother with the 1000 pixel wide image just grab the one that's the next one up from 320. So it's the smallest possible that will still fill up this area. WordPress refers to it as responsive images. So it generates smaller images and there's a whole set of them and then command that this HTML image tag has instructions for the browsers on how to use them best. But the other thing you can do is high resolution images, they look really nice and they're good for press, you know, for glossy magazines and things like that but for the web you really don't need the high resolution and you definitely don't need the enormous size. So what you can do first is shrink the size to the maximum size you'll ever need and then reduce the quality to the top quality that you would need on a computer display. Because anything else is just a waste and that makes the file size a lot smaller so the request will end a lot more quickly. The other thing is some formats are more economical and WebP is one of them, this is actually a Google format and it will, I'm thinking, no I haven't proven it but I'm thinking you will get brownie points from Google for using WebP because they believe in it. Do you have proof that, yeah, okay. There's at least one person who thinks there's proof that it works, so that makes two of us. Yeah, I'm not alone. All right, HTTP again, that wonderful concept. It used to be Google mod page speed and it just got integrated into all these web servers at some point and so basically in the old HTTP days the headers will just plain text and now HTTP2 compresses them and so they take up less space and because every HTTP request has headers then that saves, all right, yeah, that's a bit of a complex slide but bear with me. So in order to turn our cascade into a waterfall what we wanna do is try and run as much as possible in parallel. So the top bits, DNS prefetch and preconnect are just things that you can put inside your head section of the code and you put them way at the top and it tells the browser I'm gonna need this domain later so go ahead and resolve it now. So it will parallelize DNS requests if you have other domains. So if you have Google phones, for example, that would be something that you wanna use if you're using any WordPress.com services that would be another one but if you're using Jetpack for example, Jetpack already puts in the prefetch for wp.com so that's good. Preconnect is the same, remember the HTTP request has a connect stage so it will preconnect to the other domain that you've just told it to preconnect to and that saves a little bit of time, it runs it in parallel. How can you make requests in parallel? In the old days you had to open, so in the very old days you had to open a request to the server so TCP connects and the HTTP request get it back then do another connect and so on. More modern web servers and browsers started defaulting to 10 parallel connections so you could get things for a page by opening 10 connections in parallel but HTTP 2 allows you within the one connect to send multiple HTTP requests so you don't have the overhead of doing the TCP connect every time so that saves but also within that connection, remember the HTTP request there was HTTP request, then wait, then HTTP response, what HTTP 2 does is it runs them in parallel so you can have request, request, request, request, wait, wait, wait, wait and then they might come this response and then this response and then this response so they don't have to come back in order but they come back through the same connection and you can run them in parallel. So it's another layer of saving. The other thing is some scripts you don't really need to run before the above the fold renders so to render above the fold you don't need to run everything and so what you can do is defer or make asynchronous some of your scripts, okay? So it basically says that it runs in parallel with rendering because it has no effect on it or it runs after rendering and then might have some effect but it'll be way down there. If you've integrated things like I think Google Tag Manager and some other things, maybe testing software and these sorts of things, thanks. Then these do it out of the box for you. All right, so speeding things up. There are DNS services that have presence all around the world so you don't suffer latency and stuff like that, that's really advanced in most cases, you don't really need these but page generation is important. Sometimes you still have to generate pages and sometimes you still have to generate them when somebody is waiting so it's good to have good web hosting. So good hardware with not much load so you always have spare cycles when you need them, burst capacity, that sort of stuff. Latest versions that don't fail and do things more efficiently. Very importantly, opcode caching. So PHP has this optional module that unfortunately not all hosting others turn on by default. Yes, I am looking at you. But so turn it on, I've seen it speed up a site three times. So basically PHP needs to be pre-processed before it can be run, needs to be compiled. So what opcode caching does is it saves the pre-compiled version and next time you don't have to compile it again. So it uses up a little bit of memory but yeah and not gonna talk about object caching that's advanced and I don't have time. Okay, so your fast site recipe we pretty much have five minutes left so let's see how it's done. So you will need good DNS and web hosting and three plugins and good PHP configuration. So good hosting like I said fast DNS they might have multiple name servers and stuff like that but anyway it needs to be reasonable. If they provide SSL for free and that's a good indication if they provide good SSL certificates for free that's great because that enables you to run your site on HTTPS. Again points from Google because it prefers that but it enables you to run HTTP2. So if you go back through the slides all these push and compressed headers and parallelizing and all that sort of stuff that's enabled by using HTTP2. So people used to think that HTTPS was slower because everything is encapsulated and encrypted but it's actually not true. So HTTP2 made it so that running a secure site is actually faster than running a plain HTTP site. If this is the first time you've heard this I'm hoping that convinced you to secure your site. All right, latest PHP MySQL and regular updates and because some hosts are really cheap and they don't update. So if that's yours just move. Low average server load especially if you're on shared hosting talk to your hosting provider. It may cost you more really but it'll be worth it especially if you have a business website. Remember the first, the reason for speed, the need for speed. So if you get more conversions that will more than cover better hosting costs. Yeah, make sure you get a usage spike allowance. So sometimes you get the odd, like you run a campaign and as soon as it launches all these people hurry up and load your site. Hosting should handle this. Content delivery network. I'm not gonna go too much into this because it makes things a bit more complicated as well as faster. If your site's in Australia don't worry about it use Australian hosting in and that's fine. If you're trying to target the world in Australia you lose something by using the likes of Cloudflare so just weigh your options. Some hosting providers provide their own content delivery network and it might be points for them. All right, first plugin is Auto Optimize. What Auto Optimize does is it grabs your CSS and combines it into one file and then minifies it. It grabs your scripts and I think it generates two. Everything that needs to be in the head and everything that needs to be deferred and shoved in the footer. And so it combines them and minifies them and then it minifies your HTML page itself. So a little bit of processing overhead and stuff but it uses its own cache. So you've changed your theme and uploaded a new style sheet the next time around it notices it picks it up regenerates it or you do clear cache and it redos it on the next page load and that's it so really hardly any downside. It does have a few options like inlining things or aggregating inline code and things like that so not everything works for every site not everything is compatible with every plugin but worst case you don't do the absolute thing we're aiming for 95% and this will definitely get you 95%. Thanks. WP fastest cache it also does a minification it also does combination also does other things but I don't suggest that you do it. What Optimize I found is the best minification combination minification plugin out there so I've stopped minifying with WP fastest cache so I'll just use it for caching. Browser caching is an interesting one because it's actually a bunch of instructions that go into your HT access file on the server. So the server then tells the browser for example this file that I have is two months old so the browser says okay get me the latest one. Because the expiry is set to a month okay so you can set rules of how long to cache objects and so on. I don't wanna get too much into it because the plugin does everything for you out of the box what you have to do is save the settings. Yeah, I've actually contributed to it I'm pretty proud of myself. You can disable emojis so eliminate that component if you don't actually need to load it. And again preload is a really good function that I use. What else? Yeah, that's basically it eliminates render blocking scripts one thing it does is it's got a setting for a Google fonts whether you wanna defer them or not but result if it doesn't happen quickly enough it can result in the page rendering with your default font and then switching to the Google font so that happens to you just turn it off Google's fast enough. Where are we? All right I love this plugin I really love this plugin I've interacted a lot with developer he's a gorgeous guy is really helpful and he's really knowledgeable about image processing so this plugin does a lot of things you can set it up to crop the uploads so you upload them and then either by schedule or immediately it will limit it to the maximum size that you wanna have on your site. It will reduce the quality setting it will convert it to WebP and then there are two methods that it has to lazy load images. Yeah that's why I think I helped a little bit the lazy loading and it's magnificent the lazy loading is magnificent because usually the problem is that the images by like the placeholders are not in the same proportion as the actual image and this plugin loads a placeholder that size exactly like the image that you're gonna load later except it's a few bytes long. So this is I think, sorry, oops. I think it's by far the best. Image lazy loader out there. Now WP Fastest Cache does have a premium version which I use on some sites and it squeezes that little bit extra and then you don't need auto-optimize and AWW if you wanna have extra compression it's got like an online service and it's got yeah but really for the purpose of getting the most that you can within a really short amount of time and paying zippity-doodle what I've shown you is all free. Just a point on PHP set up if you're going this is cPanel so if you're going to the cPanel PHP settings you can change yourself you can pick the version. I would encourage you to stay off the cutting edge because some of your components may not work. With PHP it tends to be stricter over time so it tends to not allow things that used to be in order to be more secure it's starting to be more restrictive. So check always test on a test site first and see if anything breaks and you can see in red opcode opcache and that's the thing that you need to absolutely turn on on every one of your sites. That's it. Thank you Gal it's some great tips on how to make your website go faster. We've got some time for some questions if anyone wants to ask Gal something. This is when speakers have heart palpitations am I going to get questions? Just in regards to images do you have a recommended maximum size for images in terms of dimensions and yeah faster? Yes more of an algorithm really of how to find out the good image sizes and you can pretty much do it when you have a wire frame already in the design stage. What you work out is your layout breaks and then you figure out with padding and margins and what not how much space you actually have in each one of your layout breaks for the image. So if it's a full size feature image or if it's floated left medium size or something like that you kind of know where they're going to fit within the context of the site. So even with a wire frame you can already figure out how much space you're going to have for your images and there you are. So for each one of these layout breaks once you know the size you configure that size and so you get three for free. So you get your large size, your medium size in your thumbnail. Yeah I generally don't change thumbnail because it's used by various admin things and so you don't want to change it but medium and large I do mess around with because they're already there and why would you have an extra one if you don't need it? E-W-W-W image optimizer in the resize tab will show you what sizes you have active will allow you to deactivate some of them, will allow you to turn off optimization for some of them. So it's really crafted that way. So if you use a parent theme that defines all these sizes but you really don't need them, you just tweak and then you can use something like regenerate thumbnails and regenerate them and then you can remove it and then subsequently because E-W-W-W will keep it going the right way for you then. But in your theme, in your child theme if you need an extra size which sometimes happens like if you do column work and things like that you might want a third like image for a column that size third or something like that. So there's a WordPress command to define so add media size, add image size, a lot of that. So you just define an extra one that you need and it has to, it should match your CSS obviously. One thing about retina displays or high quality displays that's overhyped, don't worry about it. Yeah, seriously because if the browser, worst case the browser is gonna pick a bigger one too. So you might worry about the biggest one really but otherwise the browser will just pick the next biggest one, the big, sorry. It will pick the one that with the display quality still fits in that area but is the smallest. But the other thing is people don't notice. People really like retinize over doing it. People don't really notice in most cases and most of us use images to illuminate the content to make it colorful, to illustrate a point. You don't need high resolution for that. So just to question up the back here. I've got a couple of questions actually. First one I think I know the answer to already but the WP Cron I assume that still runs even when you're using a page caching plugin. Is that right? Well, if you just install a page caching plugin by default if you don't change the way Cron runs on certain page loads of which you have fewer now, when it's time WP Cron will be run and it will preload pages or whatever but what happens is it's gonna be regular especially if your site's not getting too much traffic and you may not be able to preload everything because you don't have it running enough times a day. So what I've done is I've consulted my guru of WordPress Dion. He said 15 minute interval is fine. And so I've got it within Cpanel. I've got a Cron job that simply runs the WP Cron on a 15 minute interval and seems to be enough and it preloads everything. You can tweak WP fastest cache and tell it how many pages to preload per run. So you can tweak it to your frequency. Yeah. Just quick question, a second question. With the DNS pre-cation pre-next, that sounds like something that should be automated in some plugins, surely? Like I said, it's automated with Jetpack. Okay. They do it for the, anyway, they use like a, like a WP.com pixel. I was more, you're thinking like generically, like it should be able to look at the page and know what external scripts and so forth are being loaded and be able to just automatically put it into the header, surely? Yeah. Have you heard of that being done? I just put it in the child team. So if I know I need Google fonts, I just prefetch the Google fonts, you know, fonts.googleapi.com. Sounds like a good idea. If I have something else, I just stick it in the header. Yeah. Sounds like a good idea for a plugin if someone hasn't made it yet, ready? Hey. It's always the last thing on the GT metrics report to figure out. Yeah, but now everybody knows you have these ideas you have to hurry up. Gal, we have a question up at the back on the other side here. Thank you. This might be wishful thinking, but do foresee a time in the future where we won't need to do these sorts of optimizations for page load and things like that? Like it'll just be internet will be fast enough or will we always have to worry about people with slower speeds? Okay, first part is you know the expression the future is here. I got this, can't remember how I found out about it, but there's this service that runs like super fast WordPress that you don't need to cash in. Just generates in something like 0.03 seconds or something renders the page. Like something super fast, but it has a price to match. So in essence, this is a free solution. So it's a poor man's solution, but it does 95% of the job. And the problem with caching is how dynamic, doesn't work with very dynamic sites. WordPress is shifting towards react-based or job-based or headless or whatever you wanna call it where you load the page framework just once and then it updates bits of it dynamically. And you can cash these bits, but grabbing them is a lot faster. So maybe you don't need to, because you don't need to grab the style sheet ever again, you just load it once. And some of the scripts or like the script framework is already there. So in essence, the future is already here, but you have to find out whether it's suitable for your application and whether you can afford it. Thank you. Hi, just up the back. I spoke to you at the start. Look, you may have already alluded to this when you were talking about Google Fonts, but I've found the biggest overs have been when you sort of reach out to other sites to pull things in. So whether it's Facebook or other Google services, ironically, how can you improve the speed of those? Well, one thing you can do is there is a plugin, a free plugin in the WordPress repository that will copy down Google Fonts that you need and will serve them from your site locally. So you can consider doing that and then you are not dependent on anybody. But I don't, like, look, trying to control Google is like herding gaze. It's, you can't, it's its own company, it's got its own servers. The only thing you can do is trust them to be a lot better than us. They, because they are, in most cases, they're a lot better than us. And the same, and in the same, with the same philosophy that I'm saying, get 95% of it done for free in five minutes. It's the same thing here. Do you wanna pay for Fonts and install them and update them and so on? Google does that for you for free. So you just plug it into your theme and use it. And okay, you know, once in five years it's got a glitch, it's fine. You know, we can handle it. Unless it's some mission critical, you know, NASA WordPress site that has to communicate with the moon. It's fine. That is it, we are out of time. Can you please give Gal a round of applause?