 Thank you. Thank you. Oh, you're too kind. You're too kind really So hi everybody My name is Evan and I am here to talk to you all about making your WordPress powered website faster and I stand here before you guys and I want to start with a personal confession. Okay? I've been designing developing and consulting on websites for many years now But up until about two years ago or so the websites that I were making they were slow and That's not to say they moved that it snails pace or anything like that or I did anything Purposeful to make them slow but I was completely omitting any work in the performance optimization sector or category and You know, I was just like I knew it mattered But I I come from a front-end design and development background That's kind of like hey as long as the website looks the way I want it to as long as there's not any major bugs Then, you know, if it takes an extra second to load, you know, whatever it's probably fine You know like the internet is fast, right? Everybody has high-speed connections. So what whatevs whatevs dude, you know but I stand here before you guys and I want to say I couldn't have been more wrong and I'm here to tell you how to correct that problem. So for me the correction started when a client actually called me out on this and I had a client about two years ago give or take They sent me an email and they said hey Evan I was running some speed tests on my website and I got such-and-such performance grade and It had such-and-such recommendations to fix it and make it faster and like I don't really know what they mean Can I pay you to help me? Can is this something you could do and this is a good client? And I wrote him back. I was like, well, yeah, definitely. I could fix that Thinking in the back of my mind now like oh, can I like can I really do this? Don't really know what I'm getting into But I was smart enough to tell him well, hey Let me do some research first and get back to you about what is and isn't possible And then we're gonna get to the bottom of this and the result of that one instance Well, it was twofold one. I made that website significantly faster and the client was one stoked dude number two it kick-started a process of research and learning an immersion about the world of wordpress performance optimization and Like I said, that was about two years ago since then I've been working on and honing a personal process That I now apply to every single website that I develop to make sure that it loads as quickly as possible And that's what I want to share with you guys and here's the most awesome part It's it's it's really not even that hard to do Basically what I'm gonna show you it's a series of steps that I I like I said I do it on every project that I take on It's made to be efficient It's made to be easy and it's made to not get too technical or not get too crazy I don't want to we're not gonna try to like solve You know like world peace and hunger with performance optimization We're not gonna get to this made a level of detail These are easy things anybody in this room could do to speed up your website and that's what I want to share with you so that being said Um, if you need some proof as to why as to why you should actually care about this because like I said for the longest time I didn't I was just like yeah, whatever. Um, here are some cold hard facts So you could be the first one about 40% of people are going to abandon a website that takes three seconds or more to load Um, that's kind of scary in itself But I really like to focus on this middle one because let's say you are Let's say your website is selling a product or let's say you're trying to grow your audience and capture email addresses Well for every additional second that your website is taking the load you could be costing yourself up to seven percent in conversion so that's like Effectively seven percent less sales seven percent fewer email addresses that you capture Dude, you could speed that up and you could get that seven percent back and I'm here to show you how Finally and this one I would put this as kind of like a distant third But Google has said that they use your website speed as a ranking signal in its search engine Optimization or performance. So having a faster website is gonna make your website rank better in Google Don't get too concerned about that part because I think it's a very small ranking factor But it's a factor nonetheless that Google has admitted so we should all pay attention to it and be making our website load as quickly as possible I'm not making this up sources are cited here. And by the way, all these slides are gonna be I'll tweet out the link They're gonna be posted on my website Evan web design comm So you'll be able to get all this stuff. And if you have questions, you'll be able to get at me after to so Um Here's our agenda and here are some of the things we're gonna be covering We're gonna talk about measuring speed like how do you actually know how fast or how slow your website is? We're gonna go over that We're gonna talk about web hosting and why that's important and why that matters and we couldn't have this discussion We're having without touching on caching. So you're gonna get my take on that Minification and concatenation Those are two freaky scary sounding words that a lot of people don't do but you should and it's totally not that scary So we're gonna cover that Um image optimization and G zip compression. We're gonna go over those things. Those are steps in my own uniquely patented not really a process and we're gonna talk about content delivery networks CDNs when you might want to use one when maybe you don't necessarily need to use one And what the heck they are for those of you who who are wondering so Let's get right into it. This is where I start with all of my websites now I want to measure the speed. I want to know how fast it is before I do any tweaks For that I prefer these three tools and I'm sure a lot of you here have used them or you've heard of them and You you kind of have an idea of how they work My personal favorite is Pingdom, but you know, if you have a different favorite, that's totally cool The important thing is you're getting a baseline metric that you could use to benchmark and compare any future performance tweaks or enhancements against So if you run a test on This is Pingdom a screenshot of my own website being run And I say it like guys this is not to like brag about my speed or anything It's like it could be faster and that's kind of the point of all this like your websites when we're done with this process Could they be faster? Yeah, but are your efforts gonna get diminishing returns? Totally and we don't want that we want to be quick and we want to be easy. So Don't sweat your performance great. You can see like I got a freaking B minus But my website is pretty fast and I'm comfortable with it. So that's an A in my book What we're really concerned about are three things number one Minimizing the amount of requests a request is basically any asset on your web server that shipped out to the visitor So that could be like a PNG image a JPEG You know HTML CSS those are all assets that are being sent from the web server to the end visitor and The fewer that the fewer the requests the faster your website is going to load Total page size that's like Did your page take to load for all of those assets to be shipped over we want to get that number down? And then if we do those two things our loading time is most definitely going to decrease Unless something super weird is happening, but by and large that should go down These tests are going to give you so much more information Than this and they're going to give you these weird and cryptic recommendations for for stuff to fix like oh Fix your render blocking HTM either render blocking JavaScript or whatever You could take action on those things But I recommend you guys don't sweat it until you go through the steps that I'm going to outline and then go back And fix what you have the time patience and energy and desire to do Because you might find that some of those things just go away and you're happy without even having to sweat it So that being said you know take these tests Take them with a grain of salt and just use them as kind of like a benchmark for comparison So the first place we start is quick sip of water here. Sorry Okay, I think that had some citrus in it. That was nice So, okay, sorry So dude get yourself a good web host. All right, like if you're gonna do one thing and nothing else Get yourself off of if you're on a very inexpensive shared hosting environment Maybe get yourself off of that because in my experience by and large those speeds are gonna be inconsistent and unreliable So if you're on something like that think about migrating elsewhere I Have seen and again like that. I don't have the word of God or authority There's plenty of smarter people more experienced people than me But I do have a lot of experience in that experience I have seen managed WordPress hosting environments perform with greater speeds and greater reliability on a consistent basis over You know like cheap shared hosting so keep that in mind and just know that if you're on like a cheap inexpensive shared hosting environment You could do all of these performance enhancements And you might not see a huge difference because of things that are just outside of your control So you get what you pay for in the world of web hosting. So get a good host this is like my pitch to you and And finally for those of you who are more like technically inclined and you kind of like tinkering with things a VPS hosting environment or like a dedicated virtual something with dedicated resources that are specifically allocated to To your own website that you're not sharing with anybody else That's gonna get you consistently fast and reliable speeds as well So, you know first things first make sure you're comfortable with your web post from a from a performance standpoint Okay, um caching So I'm sure how many people here have used a caching plugin before Dang good. Okay. How many people have was it w3 total cache? Okay, a fair amount. Okay, so caching is kind of weird and complex and shrouded in a lot of voodoo and I Like I want you guys to know I don't even fully understand everything about it There's people here who know it way better than I do, but here's what I know Using a caching plugin will make your website significantly faster and it doesn't have to be that complex I'm afraid of these robust beasts like w3 total cache like I've used it before I thought it was confusing. I worried even with my own level of skill and expertise and knowledge I worried that like I was gonna screw something up So I have two recommendations for you that are really pretty darned This is not I'm not implying anything about this very very intelligent audience But these are pretty idiot-proof plugins right here and that's why I love them and that's why I recommend them to my clients, too There's my personal favorite my go-to these days is called Comet Cache it's pretty much like a set it and forget it plug and you turn it on you activate it and For like 95% of installs it even says this when you activate it like that's all you need to do There are some advanced configuration options for those who are interested and need a little bit more control But most of you will not even have to touch those Simple Cache is one I just found out about Just like a week or two ago on WP Tavern and I don't know if you guys read the tavern, but you should it's really good um I It full full disclosure. I've not personally tested simple Cache But I really trust the reviewer who wrote about it and said spoke highly of it on the tavern and I it looks even more Simple and or like idiot-proof than Comet Cache. So that might be a good option for you Also, I told Lucy beer who was like we're competing against each other because she's speaking right now, too Rocket Cache where where she works. I believe that's another one I haven't tried but I've heard really good things about it is a premium plug-in I believe but I think it's worth checking out if you're interested But the important thing is that you're caching somehow in some way And here's another place where if you're on one of those managed WordPress hosting platforms You're gonna get a built-in advantage because a lot of them they do that for you with some type of proprietary caching plug-in or mechanism So you won't even have to worry about it But the important thing is that you're doing it you're taking advantage of it And if something weird happens, you could always deactivate one of these plugins and you'll be cool. You'll be set But what it's gonna do as we said here rather than WordPress having to query the database You know wrap that content ship it back to the WordPress core files have WordPress assemble your theme and your template and this and that All that's gonna be done and constructed in flat static HTML ready to ship out to the user That's what caching does and that's why it makes your website faster. So bottom line make sure you're doing it and Make sure you're using a plug-in you're comfortable with it doesn't have to be one of these But it's one of the steps in my process and one of the first ones. So To make things slightly confusing, but not really now we're gonna talk about browser caching Which is different than what a caching plug-in will provide now some robust caching plugins They will have this option in there for you. I don't believe the ones I recommend do maybe simple cache does But this one sounds and looks complex It doesn't have to be you don't even have to fully understand it But if you copy and paste this code that I have right here into your HT access file That's really all you need to do to take advantage of browser caching and what browser caching does is It tells users to store the assets of your website on their local machine So these users are not gonna have to download these assets from the web server on subsequent page visits So basically you're saving valuable time and bandwidth and the user is getting a faster experience because These assets are being pulled from a cache or temp directory right there on their own On their own computer and it's really as easy as copying and pasting this code into your HT access file I see a question back here. Oh, so that's a good question. How different is this than expiration headers? Um, the the answer is one that I have looked into and I don't fully fully understand But I know that in my experience some things what? It this is gonna set your expiration headers says Matt making bill who again he's way smarter than me He could probably be doing this in his sleep. Um, there you go. It's gonna set your expiration headers and In my experience, I've had some things that are gonna set them automatically and some things that don't Thank you, and this is jogging my memory on this I do this as a blanket statement so I can make sure I'm setting the right expiration headers for the stuff that I want to set But again, it's sort of like copy and paste if you're comfortable editing your HT access file You do it and then you move on and every step in this process is meant to be pretty simple like you do it and you move on I'm Minification and concatenation these are the ones with a funny kind of scary sounding words that I Don't see enough people taking advantage of and this is one of the areas where I've seen the biggest performance gains For those who are unfamiliar with the concept with concatenation We're taking multiple CSS files that are loading and we're combining them into one single big old CSS file and Shipping that to the user. That's gonna lower our number of requests. Remember. We want it to get those requests as low or as few as possible We're gonna have fewer requests when we concatenate our files Minification is taking that big old file and making it a mini Minified file. We're eliminating the white space in the file We're eliminating the line breaks and we're making the file size as small as possible So we're lowering requests and we're sending we're shipping less data and that's gonna result in a faster website It's you know, it sounds complicated, but it doesn't have to be these two plugins will do it for you One is an awesome one that I can out. So I'm just gonna butcher it Top demise. I'm just I'm just gonna call it a top demise from now on and yes So Minification does map well my understanding is that minificate the question is does minification matter if you're G zipping We're gonna get to G zipping, but my understanding is that it does But I could be wrong. I again, I'm not a soup. Yes. I'm getting I'm getting confirmation that that it does matter So my understanding is correct. I am validated once again. Thank you. Um, so I Top demise is going to handle these things for you and it's literally like you install this plugin you activate it and What it's what it's gonna do is set some default options for both minifying and concatenating Your your CSS your JavaScript and if you want the HTML output of the page Personally, I don't love to minify the HTML just because I like it to like look pretty when I view the source code So I'll sacrifice like you know a few tiny bites on that You may feel differently. So, you know at your own discretion do what you're comfortable with For anybody that loves comic-cache the pro version of it has these you know these options and this function that will be built in I've tried both they both worked awesome and One really quick a side with That you like first of all any type of trouble you get into with this process could easily be Mitigated by simply deactivating the plug-in. You're not gonna do any irreparable damage to your website by caching or concatenating or minifying your files Unless you do it like manually by hand or something really weird and crazy, but I wouldn't recommend that to anybody so in a rare instance You might get into some trouble with JavaScript being Concatenated and minified because something is loading out of order or something weird In almost all the websites that I work on I just roll with the default settings of Optimize and I'm cool and I'm fine Sometimes a pesky JavaScript file needs to be excluded from the process of being Concatenated and minified and that solves my problem So for those of you who are a little bit more technically inclined and savvy You could look through you could turn this off if you're getting trouble in problems You could look through your source code track down the individual JavaScript files and start like excluding them one by one To see when the problem clears up and then you know, aha, like that's the one I shouldn't mess with I'll just sacrifice that performance gain and move on and I'll be cool So again, that's not gonna happen to many of you, but I've been there before Almost like pulling my hair out and like okay, you know, I found it finally so that's a potential gotcha Next we're gonna talk about optimizing images and this is one Again, I'm gonna go ahead and admit This one did not come into my like, you know Super-duper unique patented process until more recently and that was just foolish of me because it's Extremely easy to do and I like a plugin called WP Smush Which I'm sure many of you here have heard of but what the process does is, you know When you normally upload images to your to your WordPress website They contain a lot of extra data. That's just not necessary for the end user to load a nice image There's there's like information in the in the in the image file. There's like pixel data. That's not necessary So what plugins and there's many of these I'm only putting the ones that I personally recommend So you may have another one you prefer but what WP Smush does is it literally Smushes your image as soon as it's uploaded and crunches it down Eliminates any type of extra data that's not necessary and gives you a leaner meaner image without any loss of quality and in my experience I notice like on average probably a like five to ten percent Reduction in file size when I smush my images and you know, like if that might not seem like a lot But think about it, dude Like if you are loading ten images It's like you got one for free and when we're talking about sweating one second and seven percent of your sales potentially You should be doing this and it's easy. This plugin is like install it activate it set it and forget it and you're good There is a pro version of WP Smush I have not personally used it But if you're somebody who takes performance really seriously, there probably is some benefit and some value to be had there So check it out and at least use the free version or something similar Okay G zip compression. This is again. This is as technical as we're gonna get this is another straight Copy and paste into your HT access file So G zip compression came up a little prematurely, but the concept is It can be complex, but it's all like it's a pretty simple one in theory You know you guys like zip up files on your local computer To you know to email to somebody or just to store an archive and you notice like hey The zipped version of the file is smaller than like the unzipped version. Well, that's what we're doing with your website files We're G zipping them on the web server So they're zipped up and they the the total file size is smaller We're sending them as a G zipped version through the interwebs Landing on the user's browser or phone or whatever and being automatically or like almost like auto Magically right like unzipped and displayed as a normal website But the process yields a faster website because we're shipping less data So to take advantage of it you simply need to copy and paste this code to your HT access file And also note that it requires the either mod gzip or mod deflate modules in PHP to be enabled on your web server in order to function but in my experience Pretty much every single web server that I've worked on that is capable of hosting WordPress has had those things enabled So if you're unsure talk to your web host, but by and large you should be covered here And it's again. It's like if you're comfortable with an HT access file edit It's like two minutes and you could see some significant performance gains because of it because of it and um, what oh well here Sorry, sorry. Oh getting ahead of myself So I promise we would talk about content delivery networks So for those of you who who don't know or you kind of know or you maybe you think you know Well, what they are is a series of web servers Located like either around the country or around the globe even That host basically a duplicate version of your website and all of its assets now when a user requests your website The web server in the closest geographic proximity to that user is going to be the one shipping out those web files so What that results in is a faster loading site because the the files are literally not Transferring as far through like the internet to the end user So that's a good thing and in theory we should all be doing it right because who doesn't want to ship their files from the closest geographic location possible There's a there's a there's a couple well a couple things to consider and first and foremost if Your traffic is all targeted in one geographic region. You might not necessarily need to In like have a content delivery network The servers in that network might not be that close or any closer than your regular web host to where you need to be secondly It creates another point of failure and it could be kind of tricky to set up like I've set up a couple of these There's been times where I've run into a few weird gotchas or snafus that needed to be troubleshooted And when something goes wrong, it's just another point to investigate like oh Is it something with a CDN? Is it something with a server? Is it something with the CSS? so, you know, you you're basically making your hosting and Website more complicated by doing so but the benefit could totally be worth it If you a have visitors like in a wide geographic region around the country or around the world or B If you have a really media intensive site, so if you're serving up like a lot of images or a lot of Streaming video or something your website could see a great boost in performance by using a CDN Most of them are not free So keep that in mind as well and make sure that if you're gonna use one It's the right fit for your website your goals and what you're trying to accomplish so a Couple final tips and I guess I get like I could have started with these but They're not as directly related to my like patented step of performance So I kind of saved them as food for thought after but use a fast and lightweight theme if at all possible There's so many themes out there that are like bloated They have a bunch of features and functionality that you don't necessarily take advantage of but they could be loading scripts behind the scenes That are slowing down your website unnecessarily with no tangible no real advantage to yourself basically a disadvantage to everybody involved so Way easier said than done, but if possible switch to a fast lean and mean theme and And finally avoid unnecessary plugins And that's kind of I mean that's kind of vague right like what's necessary. What's not well That's up to you to decide. What are your goals? What are your requirements? What needs to happen with your website if the plug if a plug in is not helping you accomplish those goals Maybe you don't need to have it and I'll say this in my experience be especially Wary of social sharing or social media plugins. I've seen those Slowdown websites significantly without getting much user interaction or benefiting the user experience at all So think about this like a lot of my clients are like, oh, but we want to be people to be able to share this on Twitter On Facebook or whatever But if it's making a website take a few extra seconds to load You might get more engagement and more sharing by getting rid of it then keeping it in the first place Another thing I like to do with what I'm thinking about which plugins to cut Go back to that first screen where I had those three recommendations for speed tests Run a speed test then go deactivate a few plugins go back and run another speed test How much did your website speed up use that as like you that's data And that you can use that data to make an informed decision about which plugins stay and which ones are going to be cut so At this point I turn it over to to your questions And if we don't have enough time here, then we could we could chat after so how much how much time we have the question We got 10 minutes we got tons of time. Yes. I'll start right here. Okay. Yeah. Oh Man, okay, so she asked no, that's a super good question Actually, she asked that a lot of sites that she owns or manages are slowed down because of ads or Google analytics Do I have any advice on that? This question is actually kind of near and dear to my heart because I was working on performance optimization for and I'm gonna give a shout out here times of San Diego It's a local news website that I help manage and maintain They published good cool articles they have a ton of ads and I was trying to help this site load as quickly as possible and Honestly, what it came down to is unless we cut the ads. We're not gonna speed anything up It's like a catch 22 and you're really up against that and the ads Unfortunately, they're kind of served randomly and you don't know if it's gonna be a high bandwidth intensive ad coming up or not So you just have to make that conscious choice like how much money does it bring in versus how much does it alienate your user base? And then make an informed decision on like what stays and what goes so Yes, this gentleman right here. Okay Sure, yeah Uh-huh, okay good question So the the question was in terms of like minification concatenation and image optimization what's the benefit of Doing that with plugins on an actual WordPress installation versus doing it as you build the website using preprocessors like like go or Or like there's there's a app I have on my computer called image opt-in I think that's what it's called that well Yeah, that will crunch your images and basically do the same thing as like smush it like locally on your computer before you even Upload them to WordPress. So I don't think there's much of an advantage either way I think it's personal preference But for me this talk was meant to make these techniques accessible to people with who like for me personally like I've tried Like the the the gulp thing or the or the grunt or the whatever, you know, whatever it's called And it I you know like and people hound me for this but it like it didn't stick with me It didn't resonate with me. It just felt like another abstraction I'm removing myself even further from what I'm really making so it's all personal preference. I believe. Oh, yeah so the Right. Yeah And so so so the comment is like if you're doing that stuff before you're not having extra scripts on the website extra plugins And all of that potential baggage that might come with it and I think that's more or less correct But for me personally My process is just that I I do it on the website on the web server And I let those plugins handle that even at the expense of like an extra bite or two But again, it's all personal preference And if you're at the level of knowledge where you can do these pre processors Then you're you're probably already golden. My point was just to make sure you take all of these factors into into Into play. Yes gentlemen right here. Uh-huh. Oh, okay. Yeah So if you have non-technical authors who are coming into your website, then um, yeah, this Another advantage to be had by that Okay, right here and then one more. Yeah, uh-huh. I knew this was gonna come up. Yes. Yeah, uh-huh Yep Mm-hmm That would yeah, so I thought this question would come up and this gentleman said if you have w3 total cache And it does like all of these things or all of these things except for one Then you wouldn't want redundancy of having these plugins that do these these features or these functionality He's totally right. Um, you don't want to like yeah You don't want to have duplicate versions of these sign kinds of processes happening If you're comfortable with w3 total cache, you could go in and you can activate all of those settings exactly to your liking and you For me personally my process weird and unique and involved, you know, just like my own weird and unique brain So this is the way it made sense for me and I thought it might be with some people here. But yeah Yeah, no, it's Yeah, so so if I guess one takeaway from this guys is the tools don't matter much as the ultimate result So as long as you're caching as long as you're minifying and concatenating as long as you're squishing or smushing your images in some way You're good. So there's there's tons of tools. I just picked my own personal favorites Um, oh five five minutes. Okay in the back right here Okay, okay. Oh good good questions on both of them He asked what are my recommendations for fast web hosts and what are my recommendations for CDNs? And I thought this question would come up as well Out of respect to all the sponsors involved if you see me after I'll give you some of my personal recommendations And I'd be happy to Yes question. No, I have not I'm interested. So the question was have I used something a plugin? It's called P3. Okay to find which plugins on your website are slowing it down No, like, you know what I actually haven't even heard of it, but it sounds like a cool tool And this is why we do work camps because you guys could educate me just as much or more honestly than I can educate you So, um, it's a good one to check out. Yes Okay, it's it so it's a go daddy plugin. We have confirmation. Have you used it? Do you Interesting, okay So the comment was if you're on go daddy They might want you to install and run this plugin to prove that like it's not them or it's the plugin or whatever So interesting. Do we have time for more questions or one more question? Okay Yes Good okay a good question about the smush it plug-in is that only for new images uploaded or will it go back and crunch or Smush all your past images It will go back the free version will go back And it will do images that have already been uploaded in batches of 50 at a time So if you have like 10,000 images Maybe get the pro version where I think it with one click of one button It'll do all of them But know that if you have patience and a low budget you could use the free one too So it really all depends on where you're at. Yeah Okay, are we is that it for time? So cool. Thank you guys so much. You have all been awesome and I've learned from you All right