EP312 – WordPress Performance

(00:03) what’s up everyone this is Jason Tucker and this is WP water cooler episode number 312 today’s topic will be discussing website performance and kind of all the different things that you need in order to be able to kind of make your website be performant so let’s go performant just yeah see it’s all about yourself I’m saying do you say thank be safe to read I’d say read media on all the things I make requests each request page requests and I’m in a rocket booth [Laughter] well good to have you on as always say
(00:45) Darren how about you tell us about yourself yeah I’m Dan Walmsley I’m partners technical lead at automatic I work on a lot of different partner integrations in the past I’ve worked on jetpack and calm and stuff like that as well awesome good to have you on as always John Hawkins Wow John Hawkins bit a little bit since we’ve seen you on the show tell us about yourself I think I was last on episode 3 so I’m glad to be back wait what no just kidding by default smartass hello I’m John Hawkins you can
(01:22) find me pretty much anywhere at Vegas geek so Biggs calm and on all the socials awesome good to have you Jonathan tell us about yourself I am basically like say but a male version and I don’t have a rocket ship live in North Idaho and you can find my stuff on Jonathan wolcoff awesome good to have you I’m Jason Tucker you find me at Jason Tucker on Twitter my website is Jason Tucker dot blog and I do this show as well as WP blab which we do actually did that yesterday and those really cool we talked a lot about images with social
(01:57) media and how you should come up with custom image sizes for social media shares and all those fun things and different tools you can use to do that and stuff but before we get into the show this particular episode is brought to you by server press makers of desktop so we’re free to go like I’m a huge fan as well and desktop server is just amazing series of WP sites Inc which at this point is one of the only tools to really handle synchronization between sites so yeah an absolutely amazing tool I love using it
(02:35) and I love being able to quickly be able to build a website right on my computer more importantly good people good people a good product so it’s like awesome let’s talk about performance website performance and how you can kind of make your site be performant you know during our pre-show we kind of have this for those of you you know at home that that you know I’ve never actually been on the show which you’re more than welcome to come on our show whenever you like we kind of have this rule it’s the unwritten rule that is is
(03:06) constantly talked about which is we don’t talk about the show before the show but we always talk about the show before the show it just it is what it is so you know at one point we started talking a little bit about amp we started talking about you know image optimization there was a whole bunch of these sorts of things that were happening we’re like okay what what can we do to get all these pieces together to really talk about it and what could we you know kind of if we stuck a label on it what would it be and it’s you know
(03:30) website performance so where should people start in website performance like what’s the thing like what’s of what’s a one kind of like broad-stroke you can do that you’re just like wow that fixed well no good chunk of it I would like to go back even one step further and say like why is my performance even important what can you gain you know by having web performance because well because because you know that there are some depending on the device people are searching from Google might use it to
(04:00) rank your site if you’re looking at mobile and mobile performance you know that a lot of people say that there’s that famous Amazon statistic that like if your pages load you know X % faster than you click-through rates go up because people feel like they can browse more fluidly around your site and find the products they’re looking for so you know what is some other sort of wise because people balance they bout and they balance real fast that’s what I talked to my small business clients about they basically
(04:32) have that one moment if they’re going especially if they’re going from search if it’s not a direct or recommended thing if they’re like finding them cold and that site takes really I don’t know what more than ten seconds and they’re gone that’s basically you know a good rule of thumb it obviously it’s less than that is better but people will wait for like a couple beats and then they’re gone and they’re going back to that search results page and they’re gonna click something else so I want to add to
(05:01) that too because that’s what we often focus on is the balancing which I completely agree with there’s also what we’ll just put up with it because they really want the other thing but they’re having a bad experience because coming directly or on a recommend they might stay and then start judging you and this is where a lot of businesses will just miss the opportunity because they won’t what people are buying right what you’re missing is like you’re creating friction that didn’t need to be there yeah you’re
(05:29) having the serve up a poor performing site so for me like user experience is so much of what its centric to like it’s easy for us something like desktops and high performance like internet connections say if you sometimes you’ll notice the issues even then but it’s like if that’s the case what’s it like on a mobile browser when someone’s pulling this out and a lot of people probably yeah yeah just to start to delve a little bit into this sort of like what performance sort of looks like
(05:55) you know people often underestimate like they’ll do like a I don’t know like a simulation of the site using the chrome debugger and they desktop and they’ll like but step through and sort of check the performance of their JavaScript or whatever but when you say people people developers I should say performance past three replication and you’re like okay let’s look for bottlenecks let’s look for dropped frames or whatever you know in the chrome debugger and and they’ll find that but but you you know you you
(06:25) end up not taking into account that on a mobile device the CPU might be ten times slower yeah on your fancy new phone the phone potential customers have are not new phones necessarily so I see a lot of folks who do you know mobile testing and their testing which they’re like oh I’m being super thorough after like yeah but what about the person who’s on like their blackberry yeah that’s actually a really good point and it’s something that I try to talk to you anytime I’m talking to folks when
(06:57) they’re talking about the what their performance is gonna be I always try to say well you know what’s your target audience like if you were if you’re going after like cutting-edge people who are going to be like having the latest phone it’s great you can find let’s let’s test against just that but if your user base is still using Windows 98 you better be testing for that too it’s it’s so different those two things understanding your target audience for your site is literally the most
(07:29) fundamental mistake people make not understanding it but understanding it can also be the best thing for your site because if you know that you don’t have to you know focus on the other group of people the other people will come along but you you need to you know basically cater to your target audience and if you don’t know who that is then you don’t know who to cater to and you’re literally trying to make it work for everybody and that’s really really really hard I was just gonna say if you
(07:57) ask your client who is your target audience and their responses everybody just fire them as a client right now still have to go to somebody okay so in the trickle-down if you’re a developer and you’re like you’re fired because you don’t know what you’re doing you know that then goes to the next person and the next person so you know at some point you know maybe refer them to a business development specialist or this small business moment center offering websites for would coin but that’s a
(08:29) different so you get it you gotta find your right the right web developer who will cool you know take your one of the ways this topic came up in the pre-show is that I think it was John was talking about like trying to make an optimization that that should have made things faster and it actually made things slower for you know whatever the people you cared about like I’m just interested in when have we tried things the people on this call to make a site faster that should have worked but for circumstantial reasons
(09:03) made it much slower because I’ve done some motion what are some what are some gotchas where it’s like the conventional wisdom doesn’t always apply so many of the different things that we use these days like do different sort of you’ve got multiple multiple layers of caching right that’s so like if you’re if you’re on a decent host they’re probably doing some sort of the cache and then if you’re running your DNS through something like CloudFlare then there’s a layer of cash in there and so you’ve got
(09:39) all these different layers that are probably already doing some chunk of that for you and so you go when you make a change and then it’s first off I it’s it’s definitely not instant like you’ve got a I make a change and then I wait till like the next day before you can test because I want everything to have it’s time to run its course but so you can make a change and that that change if nothing else were in play may have been a benefit and may have increased your score but just because of the way
(10:11) the world works and your exact setup between all of the different pieces where you’ve got your site parts landed it’s just it works backwards and you’re like um that should have fixed it my combining of all the JavaScript into one thing should have been a benefit and yet here we are it sucks so my favorite thing about development is that there are so many ways to fix the things and the things that should work sometimes they don’t work and you don’t know why I can kind of good you detective work I just and
(10:46) the combining of JavaScript thing like I know what I’m doing and I still don’t understand this whole idea of combining JavaScript like right right any of this JavaScript I installed a bunch of willy-nilly plugins that all may or may not be using Java scripts I may be in line son be a file that gets him brought in some may be a file at some place else on us and I’m supposed to combine all this stuff together and turn it into a thing yeah it’s so crazy like you know this yeah like if you if you have it and and
(11:18) whether or not it’s worth combining JavaScript depends on you know whether how many of your assets you’re serving from the origin and whether or not the origin is using HTTP to and whether or not they’re gzipped and all this other than minified and whether or not they do any operations within the javascript that will modify the Dom right like and that determines whether or not you want to load it in the header or the footer and it’s like you know who what percentage of WordPress site admins yeah
(11:47) you know would even be able to start for you this is a very simple thing if you’re gonna go buy a car and you but you weren’t gonna be able to you want be able that you weren’t you were not able to drive this thing beforehand but you wanted to know like these creature comforts that are in there so for instance like if I’m in the passenger seat and I roll down the window will it automatically roll down the window or do I have to continue to hold it down and then when I roll up the window do I have
(12:16) to hold the thing to roll it back up like that’s that’s gzip right there that’s like that’s a creature comfort that no one in a million years is gonna be like I was just curious is this thing – a thing no no no no and then to top it off the double you know the company who’s making you know that’s actually doing the hosting that’s one checkmark that they have to turn on to turn on gzip and if they turned it off on your server at one point your website is no longer performant yeah actually that
(12:41) brings me to sort of one of the earlier questions which is like what what are some things that are almost guaranteed performance wins because there’s actually like surprisingly few of them like the way you could just recommend it to anyone and just kind of pretty much have faith that this site will get faster if they haven’t already done it like what then one of them is gzip like I thought I have discovered like she’s escaped monocytes so much faster but it’s hard to understand why or how this
(13:18) picture of life and it turned into a gif this is I really do want to answer your question I’m sorry I think image optimization which we touched on pre-show I mean that’s the one that users can handle there’s plugins that do it for you you know there’s jetpack that will help you with that there’s you know there’s stuff that’s something that’s doable when you’re not trying to as opposed to like you know trying to minified n files or whatever the hell you’re doing over here
(13:47) like most most WordPress admins most WordPress users you know are either you know building assembling a site with all these pre you know built-in things the people who are doing the crazy optimization stuff like that then like tiny optimization things and doing the little second stuff those are people who are you know managing big sites and agencies and stuff and that’s not necessarily your typical WordPress user um so I would I think that that’s actually more broadly helpful image optimization and things like that as
(14:19) opposed to saying you know minify your CSS and it was like I wanna back I had found this blog post that was talking about how like the idea of getting your site to a score of 100 on the speed index thing and which you know there’s a diminishing returns as you after you get to a certain point there’s the amount of effort that you have to put in to actually get those last couple but I did it on my site on Vegas geek.
(14:51) com I did it I went through it and I spent like two weekends just going and fixing every stupid little thing that I could well I got to that score and I did I here’s the thing I did it solely for the purpose of you know I get people who come to me and I hate my sites code can you help me and how much was how much is that gonna cost how much time is that gonna take and the answer is how long is a piece of string you never know and so I knew that if I didn’t actually go through the process and find out all of those pain
(15:22) points but here’s the thing I found all of the pain points for Vegas Keep Calm they have nothing to do with your website that is that is the kicker because all and honestly that’s the kicker about the word pressing but like world’s ecosystem in general everything so the spoken unique and there’s people out there offering this blanket advice and then people are trying to apply it to their site man like that didn’t work you know or their host is the problem like you know that that’s a big deal right like
(15:56) if you go to that speed testing first chunk is like just time to load like a cyclic not even like coming up before you know that might be a big one that you could offer to people too it’s not easy it’s not a quick fix but it can help has anyone here used a plug-in called Auto optimize optimize so I think it’s called optimized but basically it’s like it does some sort of compression stuff out of the box but the business model is really interesting where they say you know if you want to go further than what
(16:30) we can do automatically then pay us like $99 per page or $500 for your whole site and we’ll like do that like per site optimization which can get you to you know can get you that over that list of their last sort of ten or twenty percent of performance at all because that they’ll do stuff like they’ll come up with the what they call critical CSS where you inject some CSS into the header of the page they’ll put move some JavaScript sort of statically into the top of the page because if you want to get that sort of
(16:57) like instant loading where like your whole page is like visible on the screen and like under half a second basically the trick is a well against what’s to get to get all of the information needed to render above the fold that the first paint above the fold into I think it’s four kilobytes of data so basically you move that just the CSS needed to render the stuff above the fold and just the JavaScript needed or whatever to like render it and and and it just a kind of tries to push everything up into the
(17:29) head and then the rest of the page almost doesn’t matter because usually it takes the user a second or two to actually start scrolling and so if you’re loading stuff below the fall like who cares or is already that it’s loaded quickly stuff below the fold doesn’t load quickly in their minds it’s already quickly loading site so luckily the fold doesn’t move you know it’s always the same on every device it’s the same size device with the same number of pixels I mean Facebook made that change kind of a
(18:06) while back to where when you very first load up the page you would get like instantly you’d get like the blue bar across the top and you get the sidebar and the other and everything would be kind of like this gray that was kind of like floating as it was loading so it was like a super instant background gift that was loading for note you know no space basically and then oh by the way and it didn’t even matter if they were in the right shape they were just like oh they were just going to be this big when it gets here well no actually but
(18:37) you do you get that super instant gratification of oh ok the page is loading rather than like say was talking about earlier you get that friction and frustration of the dude your page is just killing me so yeah I think it’s a hot tip there’s an NPM module and tool called critical or it’s called critical CSS or it’s called critical but you could basically point it at a URL and tell it the screen size and it’ll generate the critical CSS for that screen size in that page and you can inject it into the header all the cool
(19:17) tools I one of the things I was thinking about when you’re talking about the loading and like the pre loading John is that you know in Twitter and Instagram and even in Facebook they actually use the load loading time as a no sund brain chemical probably serotonin as a brain chemical like kind of teaser right like coming from from gaming what I’ve read about it is that it’s like kind of from gambling right that you pull the thing and then you wait you know like what am I going to get so it’s really
(19:51) interesting from a Twitter Instagram Facebook social perspective that that is something that is like we want you want the user to wait you want that to like the anticipatory about that you want them to experience whatever that brain sensation is which is not the case on website where we’re just like show them the site right now having the header or something pop up kind of engages that we really cool there’s something and it like your now you’re waiting because you’re not as opposed to just a blank screen but I do think
(20:25) that’s interesting that they all do that and they don’t have to do that they put that in manually on the social that’s that kind of pull down and wait so I wonder what that that’s interesting yeah I don’t yeah I didn’t know about that that’s really interesting that’s good that’s really cool so we we did want to talk about we didn’t want to touch on on amp at some point because I know that a lot of people oh there are criticisms of amp obviously but a lot of people see it
(20:55) as a pretty interesting toolkit for kind of guaranteeing a certain level of performance who here is sort of used amp in a production setting and and had experience with that were you working with Google on that yes yes yes previously xwp I’ve had quite a few like I’ve been building a lot of sites over the past couple of weeks and been experimenting with amp the biggest issue right now is just the speed of deployment because not a whole lot of themes for amp native out of the box so that’s but that’s starting
(21:36) to happen like I was super happy to see that the the Astra theme announced yesterday that they have support for amp needed out of the box and I’ve been talking to a few different theme authors who are working on bringing it to to their theme so it’s pretty exciting for me like the default theme is all supported like 2019 etc even need amp I swear this P was like lightning like before you request it it serves it to you like actually a psychic seemed faster in perception of time are we using big the big thing not to get overly technical
(22:20) with it but it’s a cow to handle CSS so with am using like tree shaking you have less total CSS on the page than 2019 does by default so you have the same effect it looks great but it’s only loading the CSS that it actually needs so it’s just it’s just a smaller footprint which is actually tree thinking is not a thing that’s unique to amp in theory you could minimize your CSS using that effect outside of abject more challenging and environments where happen outside of amp like you know job
(22:51) you could insert something like you can’t really do it predictably whereas an amp because it’s very I’m gonna butcher the explanation was like like the Damas were predefined it’s you’re right yeah but it kind of control it makes more sense to be able to do things like writing has has anyone played with there’s a version of Chrome or chromium I should say so that someone at Google made a branch of chromium where they it basically implemented the amp limitations globally so like any page
(23:19) you go to if it loads more than 50k of CSS the browser just like stops loading CSS like and if it try and it like it makes it very very fast like yeah like it I remember the exact list of optimizations but they look very similar to the limitations that you have with with amp yeah it’s strip stuff out and it also defers execution of as much JavaScript as possible and like tries to avoid if I’m doing this from memory something not completely sure about this but tries to avoid that is that a bottle the bottlenecks where like certain
(23:57) JavaScript operations will prevent rendering from continuing until all the CSS is downloaded or whatever it tries to just like eliminate all that and so it throws away a lot of the some of the guarantees and brings in some new limitations but it makes everything super fast and it’s an interesting thought experiment anyway it was like what if the whole web worked like amp how many pages would actually be usable really talking about like that’s what we talked about everyone’s like can it just be the whole
(24:24) web the whole thing like what no one needs all this all this imogen stuff like we’re gonna look back on these these years as like the web 2.0 years or whatever is like this rokoko of like like the Versailles era of web development and now we’re going into like postmodern like I mean what I think would be so interesting is is not if everyone uses amp which I don’t think that would necessarily be a healthy thing I don’t think everyone should use any one thing on the web because its strength is in is in that diversity but
(25:01) is if amp sites shift people’s expectations so that on mobile you can’t afford to load much slower than in the amp page would load and however you choose to make it faster is up to you but like you know that we sort of set the user expectations at a certain level that it makes us pay attention to things we weren’t paying attention to before because I think it’s been really easy it’ll you know if we’re if you’re using a retina Mac on broadband in the United States it’s really easy to make a
(25:31) website that is like total garbage to somebody who’s on a cheaper device on a slower network in another country like with high latency and whatever so I just went 5g in 6g internet that that’s being promised by our government yes it’s not to figure out how to build those technologies there’s a lot of futuristic this futurism futurist yeah in this well in the developer world let’s be real everyone’s like screwed is technology what’s next but you know you guys are talking about like what’s the next what
(26:10) have been all this stuff and it’s like you know the people that were that are using the Internet are not there and obviously you all have to like you know lead the way and I obviously that’s that’s super important for getting us there but I think sometimes it becomes really disconnected from where everybody else is like even with the 5g thing like everyone’s like oh 5g and then like if that gets into the consciousness people are like oh 5 G’s happening like they know about it’s aware but doesn’t even
(26:37) exist yet like it’s not even there and like there’s this there’s gap of knowledge gap of like reality between what we’re talking about in what could be possible you know and then what is actually possible I feel sometimes like we’re like making predictions about hoverboards like in fact of the back-to-school like everyone’s like well I guess we don’t have our hoverboard yet yeah well I I think I think there is a danger in just sort of hoping future technologies are a panacea but I also
(27:07) think there’s an equal and opposite force which is people jumping on the new hot thing before thinking about how it affects mobile users so it’s like some of that futurism actually turns into a performance deficit right where it’s like we’re gonna make our whole thing a restful like rich client app or whatever and then like the up front loading cost is like two and a half minutes but you never see it because on your develop development machine it’s one second or you go down that route and then that
(27:32) technology doesn’t pan out and you have to restructure the whole thing again I you know that happens also I have a question for all y’all what how what percentage of this micro you know you were talking about the law of diminishing returns Jon like so how much of this like we got to get the seconds down we gotta get these microseconds how much does that is def decreed to like really want to get those microsecond loadings down and how much of it is even perceivable by humans like everyone’s like literally talking about
(28:06) microseconds and like you know so I have I have thoughts on that as well which again this really goes back to what your target audience is and who’s coming to your site and what your site does if you are selling products and you are if you’re an impulse buy type product then yeah it matters you want that because going back to the Amazon thing like every second every extra second it takes to load is like I think it’s a 12% drop off of people who are gonna buy so that’s big but if you’re a blog and you
(28:47) know you just write these big posts with a lot of images and they just take a little while to load I think that’s the end of the world and I don’t think you need to chase that hundred percent unless you’re a nerd but the people that are coming to you’re coming to get the information that you have I don’t think they’re bouncing is quick just because the page took an extra five seconds to load it should be pointed out that lazy images is the other like just speaking of vlogs and lots of images lazy image loading which
(29:17) is also built into jet pack but I think it’s coming to Chrome as well like as a browser native thing does like massively improved performance across the board like there is almost no downside to doing lazy image loading I mean and that also that helps with users because users you know are loading things up or whatever and so we have lazy load even if they load something with images it doesn’t impact it in in the exact same way so it allows them to be a little less perfect not that any of our the users are perfect but we are perfect
(29:52) because it is 11:30 and that’s the end of the show and I say thank you very much for all of you folks for coming and talking about a performance on the web it’s really cool and I know that we’ve talked about these things in the past and this stuff changes all the time I pop that psychological perfect I make I’ll make sure to add that in the show notes thank you all for hanging out with us and make sure you go over to our website at day parkour calm / subscribe where you learn to subscribe to this content
(30:26) if you want to be involved in this the show there’s links on the website where you can go in a sign up to get on our mailing list and on Thursdays I should I send an email saying hey who wants to come on the show feel free to come on the show