 Hello, everybody awake after lunch. Can you hear me? Okay. Okay So this is sir Isaac Newton and he said something that kind of stuck with me And I want to share it with you Dala Dala bills y'all y'all said cream castles everything around me But we're all here today because we we want to make some money, right? We either have a blog that makes us money or we sell a product or we have a website So yeah, so how do we go about that and I'm not gonna talk about the business side of things I'm gonna talk about the performance side of things Because we're all spoiled we live in an age where everything is instant and we get this instant gratification And if anything takes more than a couple seconds, you know, we lose interest and we move on So yeah, so there there are many ways to improve your your website make it more profitable I'm only gonna talk about performance today and a specific type of performance But it's not the only piece of the puzzle you you should be design using designers customer research Talking to your customers learning about what they actually need and what they want from you You should be designing in a way to encourage conversions on your website So this is really a last piece to this puzzle of you have your application You've done all these things now. How can we make it more efficient and more performant to convert on those those customers? So 53% of mobile users abandon websites that take more than three seconds to load Who be honest who thinks their site might take more than three seconds to load? I know mine does right now. I need to do some some work But performance is important to us and to our users So this is this is a business owner He has a site and you know, he thought it was really great and it's not really converting very well And he's getting frustrated So he needs some cashing. He needs some performance tweaks Who likes horror movies anybody? Okay. Why do you like horror movies? We had a yonor who likes horror movies. Why do you like horror movies? Suspense right stresses you out a little bit. Okay. Well, this study was done and Mobile delays were just as scary as scary movies. Okay, so if your site is slow They might as well go to the movie theater and see you know Jason 52 whatever is out at the time Right, so we don't want this to be going to our website. We don't want customers to think this here But it stresses us out and and I I know from experience. I sit there and I really need to get this done And it's just taking forever. I'll do it later and then I forget and then I'm very forgetful So that's that's never good. And if we want to be dramatic, we're doing this if we're a business owner We're just we're burning money. We're throwing it out the window and we don't want to be doing this We want to be we want to be doing this like this guy. All right, so So what is cashing and why is it useful and why should you look into it? cashing is or a cache is a hardware or software component that stores data so that future requests for that data can be served faster We're press sites. They run on PHP. They connect to a database where your data is stored and your Posts your content your settings And these are slow this this there's a connection there and you have to make the connection and request the data query the data Servers can be slow hardware can be expensive. Maybe you have an entry-level server You don't or you're a nonprofit you don't really have the money to throw at you know clusters of AWS servers And that can get expensive So I'll throw a couple analogies at you You're your cash is like a grocery store, right? So you go to the grocery store and when you're cashing you're you're going shopping You're getting the stuff and you're bringing it home and you're keeping it in your in your cabinets And it doesn't make sense for you every time you need to eat to go to the grocery store and come home and Make your meal and then and it need it. That's just very efficient. It's a waste of time So cashing is kind of like that and if you think about it in that in that way It'll help you see the things that you should be cashing and the different types So the types there's two main types of cashing and those break down into a couple categories, so the first one is non-persistent cashing and this one is Basically if I go to the website and then the next person goes to the website My experience will not affect theirs So what I mean by that is non-persistent cashing it might cash for me But the next request will not have any cashing. So it's on a one-off basis WordPress does this out of the box using the WP object cache and so for an example if We look at this. This is just a basic function. You don't have to understand code. I'll explain it We're going to say wow While I is less than a hundred we're going to get post three ten Okay, so without any cashing at all this would this would do a hundred database queries because it's going to go and get the Post a hundred times but with object cashing what WordPress does is it takes that post and The first time it gets it it stores it in the object cache and then the next time it gets requested It just has to grab it from the object cache. It doesn't have to go to the database get it again So you would have one query for a hundred different say operations as opposed as opposed that so that's a 99% performance increase that's great and This is all done in memory. So It gets the post and it just keeps it in memory, but only for that request So even if you go to another page, it will have to start over again. That's non-persistent cashing So let's look at I did a couple of tests before here before I came in here So with no cashing I disabled all the internals of the WordPress cashing a home page with 20 posts Had 66 queries when I re-enabled all the WordPress internals for cashing There were 45 queries And that was a 33% decrease so right out of the box WordPress is already saving you time and Processing power and helping you keep your web your users on your website. So how would you take advantage of this? So this is a simple function Basically, what this is doing is it's getting a thing for us. It's going to check the cache in the group of my plug-in things If there's data, we're gonna return it if there's no data We're gonna go get our data and this could be a database query or it could be Your building or calculating something it doesn't have to be a request And then we're gonna set it into the cache for next time and we're gonna return the data So this is really easy. You just need a utility function that will handle this for you And you just call it all the time and your casual your data will be cash for your plug-in your theme whatever it may be So the next type is persistent cashing this has many more types Subtypes that we'll talk about the first one is transients. So this is something that's also built into WordPress Transient you can think of as the weather forecast you might check the forecast in the morning But you shouldn't use the same forecast that night. It's gonna change you have to go out and get it again so this is most common for Maybe going to Twitter and getting your Twitter feed and your responses or your likes going to your YouTube channel and getting your new Videos these are things that you would you would request the data from a service and then you would store it in a cache in a transient So a simple example of this let's say we check our transient get transient if there's data, we're gonna just return the data Otherwise we're gonna request the data and if it's not an error, we're gonna store the data Transients are always have an expiration So in this case we're gonna store it for two hours and then we're gonna return the data at the end So again a very simple function that you can call you're just wrapping it around some caching and some logic and It will it will store that in your database And like I said database transients are in the database So they're independent of an external caching service or any type of hardware or software you might have to set up So it's really great because you don't have to do anything extra. It's there for you You can already utilize this even on a very basic default install of WordPress. It will create two Two entries one for the timeout for the when this should reset and then the other one for the data the only thing with transient is that You you want to make sure you're reasonable with your timeouts so you don't want to hit a service every hour They might or even every five minutes They they won't like that very much. You'll say hey this site is this is hammering our servers and making it harder for us to stay in business and then you also You want to be you don't want to cash the whole request you want to always be parsing the data and storing only what you need because especially where transients are in the database by default you don't want to have like five megabyte entries in your database and Transients are not auto-loaded So that when WordPress initiate initializes it will pull all the auto-loaded options and store them in memory right out of that right off the right out of the gate But they are not auto-loaded. So they're going to be database calls each one So I know that I talked about WP object cache being non-persistent But it's also set up to be persistent if you do a little bit extra work Maybe you set up memcache D APC read us any of those custom Caching types It's built in a way that you can drop a file into your WP content folder and replace the core the way that core does it So instead of storing it in memory it will store it and write it to this external object caching So this is an example. This is the memcached plugin and You can see these functions will not get defined by core if they're defined in this file And you can do your own rights in here. So there's plenty of drop-ins available for the different types of Object caching that you might need so take a look at some of those Excuse me So I went in on a test of that same test site on that same page with 20 posts I enabled memcache and that was nine queries after that So the first time it runs there'll be many queries again But then they're all written to cache and then after that there was only nine queries And so that's an 80% further increase in performance This guy he's getting on his phone now. He's calling his developer. He's saying hey, I've heard of this thing I need to we need to see what we can do So how do you take advantage of this? Exactly the same way you would the object cache. There's nothing different here from that first example Because it's a drop-in because it's it's pluggable. It's replaceable You don't have to do anything so if you write plugins or themes you can take advantage of this and No matter what the user's setup is or what their caching mechanism is they'll get a benefit from that So that's that's really great And transients if you have object caching set up they will no longer write to the database So transients instead would get stored in the memory or on the server for object caching Page caching Page caching is like cooking the food from there after you go to the grocery store and having leftovers in the fridge So page caching the whole page will render it will get converted into some type of file Usually an HTML or a text file and then it will get stored in memory or wherever the the page caches set up to be So yeah, you go to the fridge. It's already made you don't have to cook it again You can just display it to the user This can be a little problematic though This is a basic example in engine x of how to set it up But Sometimes you you can't cache the entire page and that's where this type of caching will come in handy is fragment caching So who has a store here? Anybody a couple so If you think of a store, right? The the great things about e-commerce sites are once you're logged in everything's personal to you Have your account you have your cart and all those things. So if you were doing page caching and You went to the site and then I went to the site We would see the same thing and that's not really the the best experience there so if we look at this example here, we have our Our a product. We're just seeing in an e-commerce store These are the things that we would not want to cache what's in our cart the my account link and probably more I think that's on this screenshot, but there there may be others they might be at the bottom of the page There might be a because you purchased something where they recommend similar products to what you're interested in This would be partial page caching You would hole punch those areas of the site in in certain files Maybe you include those template files and then there would be a way to replace that and not only that would be rendered for each Request so that way it's unique to the user and they received the proper experience There's opcode caching This one is usually you will see a three times performance increase on this and it doesn't really require much other than setting it up This will basically inject itself into the PHP life cycle and It will take the result of the compilation of PHP and it will cache that so if you could think of Let's have you setting up your workbench to build a birdhouse and Once you get all your tools laid out and all your your supplies laid out It would cache that state so they're right away. You're ready to get building and processing things This is one that most of you probably have been bitten by and you don't even know it Or has anybody ever told you to flush your cash clear your browser cash, right? Okay, so browser caching is a way to Define a time or a lifespan for a static asset So that could be a CSS file a JavaScript file an image a video file It would look something like this. So in this example, we are telling images To have an age of I believe this was two years and This one here is two months So your CSS files will only get downloaded every two months and your images will be there for a really long time Which they never change so your users if once they get the image they shouldn't have to go get it again But this has a few problems because If you do change those files you need to make sure that they get the fresh files and we'll talk about that in a little bit So I have some tips for you here Caching is not your savior. So I talked about before You have to make sure that your art your your application is architected in a way that's performant There are some just basic concepts that you have to make sure that you're following your you're you're implementing in your work You can't just come in at the end of the project and add caching and expect everything to be great If your application is not designed to allow caching you're gonna have issues You're not gonna be able to implement it So these are all things that you need to put some thought into in the beginning of the project You should always assume that the cache is broken or that it's empty at any moment your Your object cache server could restart it could flush itself and remove all of its entries Your transients could expire So you always have to code defensively in a way that if if the cache is not present You're gonna be able to still display something to the user. You're still gonna be able to get the data You're gonna refresh that cache So this reason you should always test with and without WordPress core in Travis when when changes are made to WordPress There's a job that tests with caching and there's a job that tests without so it's always there to make sure that Both experiences are are maintained This is this is one of the harder things to get a hold of get the hang of so a Lot of times when people first get into caching they Let's cash everything and they go this cash this and cash that but they don't think about The the usability of that cache so you shouldn't be caching these big chunks of data or These these big Calculations what you should be doing is creating reusable chunks. So if we think about this in WordPress There are cache groups for posts comments Meta things like that sites if you have multi-site and what we cash is The post itself just the post we don't cash a query the result of a query that has 10 posts in it We don't cash a list of users What we do is we cash each individual thing and that's important because if I'm on Say I'm on the top part of the page and that post is listed And then I go to the bottom and there's a latest post list if it's not Individually cashed you can't use that cash in both spots You would have to have to you would have a list of posts that is cash and you would have the post itself so By caching those those things as small as you can get them It allows you to reuse that cash in multiple places you might have a page that displays posts and then you have a page that displays images and posts and Unless you do that you can't use that cash. Does that make sense? So Depending on your application and what it is you want to consider that it's still okay to cash other things like lists of posts and maybe results of calculations if you have this really complex calculation that happens to tell you how How much you need to spend to make that guy happy that was on the phone? That's okay to cash too, but again always think about that. How can I make this reusable? How can I make this not large and you always want to consider the size as well like I like I mentioned The bigger the things are the more resources they take more memory They'll take and you don't want to exhaust your your object caching with like a couple pages a couple sections of your website Always bust or flush the cash So when I say flush the cash, that's the object Object code aspect of it so when you update a post you want to make sure that you are hooking into the code And you're appropriately deleting that cash for that object So and wordpress you update a post that cash for that post is is deleted You have this custom data type you update it in your your panel You want to make sure that that gets deleted from the cash Then the next time someone requests it it will get loaded. It will get cash. It will be fresh with the The resources that we talked about instead of getting on tech support and they say oh you just have to close your cash You know clear your cash This is typically how you would enqueue a style sheet or a script and so you would name it You would tell wordpress where it is and you would include a version so in wordpress if You don't supply a version it will just use the version of wordpress that you're using so in this case I was using 5.2 release candidate to And as wordpress updates that would change so that way when the new version of wordpress is released The users are guaranteed to receive a fresh copy of that CSS or JavaScript file no matter what happened What changes are in it? Are there no changes? It just says just grab it again. We're updating. It's fine one time will be okay So by changing this value when you update your plug-in or when you update your themes That will automatically change this URL and you can ensure that your users or the the sites that use your plug-in all their users Will receive fresh versions of those those assets This is a big one because it's just easy. It's it's the easiest way to do this But not everybody does that a lot of people will include the the the style sheet Include include Tags in the header of the file, but if you enqueue them, this is very easy to do and you can replace This with a function or a constant that Get my plug-in version and it will just replace that if you update it in one place So you don't have to go down the file and replace all those versions so Warming or priming or cache Sometimes it makes sense for you to populate the cache For the user so instead of waiting for the user to come to the site to populate everything Maybe you have a cron job that will hit the site every once in a while and it will process that and it will populate those caches You this will help prevent something called cache stampeding so if the cache expires and it's empty and then all of a sudden I'm on Ellen and she mentions my website and everybody goes to my website at once and all the caches are empty They're gonna keep getting written. So if if multiple requests start around the same time They're all gonna try to write to the cache and so your cache will get stampede So sometimes if you're anticipating a lot of a lot amount of large amount of traffic Warming the caches is the way to go that way that stampede it will happen from you and Only that cron or however you're populating it will will affect that ultimately Every every site is different You can't expect to install there's several plugins in the repository that will help you do these things even if you don't have Access to install something like memcache It will help you with page caching your your Resource caching with your expire headers and things like that But every site is different and you have to evaluate What's the most effective for you? This is some additional reading these slides are on my website. You can go and check that out. I Kept it short for questions. I didn't get too technical But I do I do want to get into that if people want to talk about that. I'm not sure Who's who's here would consider themselves a developer? Okay, so about half and who's a business owner or designer? Okay So yeah, so I do want to answer questions. I do want to help you understand this better. So please ask questions We want to find this guy and we want to end up like this guy So, thank you. Who has some questions. I know you have questions. Yeah So the question is I had mentioned hardware and so which ones are hardware and software So the ones that are hardware are like memcached Sometimes you can set up a separate server and that server the only purpose that it has is to store the the cache opcode caches is Software it just runs on the same server You're a non-persistent cache that runs with WordPress automatically but and readus I haven't worked with readus in a while, but I believe you need a readus server to To have the cache stored on as well Yeah, but there are some services that will help you with that And they're if for development, they're not too hard to set up You just have to monitor them and make sure they're tuned to your server and your environment anybody else No, yeah Do you mean how many how much memory for? So the question was how much memory is Needed for things like this. So do you mean for the server itself or for the the object caches that require a different server? Okay, so that all depends on the traffic that you get the how the server is configured what software is running on it if you have You know some services are more bare bones They just give you the server and you set everything up on your own So for that you might need more memory because you would probably install less as a business owner But for more managed solutions, they typically have plug-ins. So like we have a plug-in that it automatic We're working on adding opcode cache And it's set up where we have different caches running and configured already for you Where you don't have to worry about that It would just it would just work, but we also don't let you tweak resources. It's like we have tiers of our service so It depends and you might have to try a couple different ones and see what works for you hire someone to tune it or It's it's not an easy answer. That's a whole other talk Yes Yeah, so the question was The person's experience they have typically seen that caching plugins slow the site down This is kind of what I mean by every site is different Sometimes People set Explorations on caches. So you and any of those caches, especially transients you can say this is only good for an hour This is only good for five minutes But if you're a blog and you're not getting much traffic, there's really no reason for that to expire so soon Your posts are probably good for a year, you know more than that So the caching plugins they might be configured to expire every hour And so if that that post only gets visited once an hour once a day Every single time that the person goes to it. You're you're not getting the benefit of the caching because it's always fresh It's always expired so that that's one of the things I mean by Every site is different you have to evaluate those things the different factors around your your users and their their habits and That will that will really affect how you tune your your website's caching The the plugins are good the caching plugins are all good It's just they try to do a lot for a lot of different sites And it's very hard to do that well for all the different variables WordPress is great You can run as many plugins and themes combinations as you want But WordPress is not great because you can run as many plug-in and theme combinations as you want, right? So it makes it really difficult to build for it if you're not in there and building it you based on what you know is required for your environment So yeah, so in some cases that that will happen But you might have to turn some things off or start to read into the different things in different settings that it has and Figure out how to tweak that to work the best for you Yeah, you're welcome. Yeah, yep, so The I'm sorry. Oh, yes, the question the question was do browsers cache differently chrome appears to be very aggressive lately with how they cache things As far as I know if you don't define the caching rules The browser is going to make the best decision for the user and that might be based on their settings or what the browser thinks So maybe you're not setting your your your cache headers for your JavaScript and you're updating and it's not changing So that could be part of it, but if you want to control that just define those and the browser should respect those headers Yeah, you're welcome. Yes Okay Yeah, so the question is the the person's having issues with Safari. They'll make a change and every Every other browser will see the change but not Safari So one thing you could do is to change the version sometimes when I develop Let's see. So there's a few things you could do You could just change this and that should basically what that does is it Your browser will see this as a complete URL It includes this in the URL in the location of the file But if this changes even though it's after the question mark It will see it as a unique file and so that's why that helps with that The other thing you can do is when you open debug tools A lot of times as a checkbox that says disable cache if you check that it will always get fresh files So I know in Firefox I have that and if I uncheck that and then I refresh the page It will they'll actually be grayed out in the network tab because it will say cached so it already has it It's not going to go get it, but it will it will actually tell you that I haven't used debug bar Debug tools in Safari recently, but I'm pretty sure they have something similar You have to go into yeah, so the comment was Safari is pretty bad with that and the developer tools you have to really open it up and explicitly flush it to for it to work Yes, I'm glad you brought that up so the comment was If you have something like cloudflare a CDN a lot of times you can log in and flush the entire cache or a specific file in there so CDN is basically a Distributed network of computers that will hold copies of your files usually your images and your scripts like that and When the user requests your website it will serve from the closest computer So it's helping speed that up by eliminating the connections that the file has to travel through to get to the user And a lot of times they have those cache headers configured on all the requests of those files Because the DNS is going through it and and requests through their server So they're able to have a much more fine-grained control over that So if you really really need that or you that's an I should have mentioned that it's a it's kind of caching But it's more just offloading of performance Where they're they're handling those requests for you So those requests aren't even going and then that's gonna that's gonna help Yeah Yes, so there that's one way to configure your cache headers is with HD access You can do it with engine X But if you wanted to have a handle on it on your server, this is what you would do here That's right, you have three computer up the desk. Yeah, so the comment was shared hosting sometimes has issues with Connections and with allowing you to tweak some of these things and that's true oftentimes. There's With shared hosting the companies will try to make the best decisions for their users because usually they're a little bit more non-technical But sometimes that makes it harder to override certain things and configure things like cache headers Like this here, so they might have a different loading order of certain things So it always it's you got to find what works for you what level of configuration you need Maybe it's cloud hosting. Maybe it's a CDN to offload all that stuff. You just every set is different Yeah Like this guy. Yes Good question. So first time to bite. Does it have anything to do with caching? first time to bite it Yes, everything can be cash, you know, there's always ways to cash it that would be more on the DNS level though So that's basically the DNS server is responding really quickly You can't really do anything about that other than finding a good name name server host Cloudflare might help with that because they're a CDN and they They handle that stuff as well But as far as caching on the WordPress level or the server application level not not really that comes first That's before that Yep, your DNS will be the most important for that Yeah, so Again, it's like CDN it has network of computers around the world and the closest computer will respond to your user It's kind of the same thing if they have the distributed DNS. It's all over the place. There's a closer computer to respond Might do better Also a lot of internet service providers will have their own DNS records and they intercept that first and they're the ones that serve it so They they know how to Things like Cloudflare and stuff like that. They're on top of that. They know how to encourage the best response time possible Yes, yes Okay Yes, so good question so he's a plug-in developer and he runs into issues a lot where They localize data. So if you have a script like we were registering in our example You can localize information that gets attached to that script and basically it will get printed out in the file in the page markup Or in a script tag and so then your JavaScript will be able to ingest that as information So in Gutenberg that They have JavaScript localization So it will localize all the scripts and then if you're speaking a different language, it has all the translations available But his users often use page caching. So that data that gets localized is the same for everyone So as far as how to better educate them There's things you could do you could localize your data with an Ajax request You could when the page loads it could request that data. That's one way to keep it fresh You could Use some of the more popular caching plugins and you could figure out how to hole punch and and and allow that to be Unique and generated unique to each request It's it's a hard problem But those are a few things that come to mind that you could maybe look at But ultimately there's always gonna be people just installing a plug-in and hoping it works And and if you can take the top three or four caching plugins That might be a good start to try that out see how it works, but it might not work for you You have to kind of see like every site is different every plug-in is different, too Yes, hi volume based on traffic or on content. Okay You're doing load balancing Yeah, good question. So the The person at the talk he he has a client that got mentioned at the Super Bowl and To deal with all the traffic that they received he was load balancing He had many servers and he was deciding which one to send based on which one was available And they want to know if caching would Would help with that normal usually caching can help eliminate servers because It's not Connecting it's not getting data. It's doing less work each server would be doing less work You might need multiple caching servers and Cluster the servers almost in the same way as you do for the servers themselves You you can throw hardware at something all day long and it would get better But you might have a larger effect if you use caching things like caching a Lot of businesses they get a lot of traffic they might have one web server and it's because they just use caching effectively so With something like that you're gonna have to do a lot of experimentation But like opcode caching where you know the PHP is stored in a compiled state and memory Memcached you have that and all the posts are cached and you know Maybe you clear the cache every five minutes and you're getting a million people on the site every day Then you know a lot of sites are gonna get a lot of loads are gonna get served from that cache Yeah, so I think that's a great use case for some caching and you'll probably save some money with hardware In the end Yeah, you're welcome Yes Yeah, so the question is should you remove? Require expired transients from the database Not expired. Yes, so Not expired I recommend no It's possible. They're not expired and the plugin that uses it is deactivated Ideally you would delete them all and then they would just get regenerated on the next time They're needed But you can't always guarantee that the plugin developer has done it correctly like they might be using a cron to Populate those transients and if you delete the transient and then it doesn't If it doesn't get returned and it doesn't go get the data There would be a gap and you wouldn't have data at that point So I think that the more reliable ones WordPress core you can delete the transients from WordPress core They get repopulated the next admin request or the next page load Carefully yes I would be more more likely to say only the expired ones because those even if you say get transient and it exists if it's expired You get false back. You don't you don't get any data so That becomes beneficial when you have a lot of plugins that had transients that were deleted or removed and they don't get Used anymore So you could say okay. I I don't use the Yoast SEO plugin anymore Let me just delete all their transients, you know something like that Typically, they're really small and that the the performance gain is really minimal But every once in a while you'll have somebody going out and saying give me the last thousand posts on this website and cash the entire request And you know we'll process that when we when we pull the transient that might be a little bit problematic You're welcome. Yes Okay Two more questions anybody else. I think we got them all. Thank you