EE & Speed Optimization

[Music]

Lea Alcantara: This is the ExpressionEngine Podcast Episode #55 EE & Speed Optimization with our guest, Jacob Russell. I’m your host, Lea Alcantara, and I’m joined by my co-host, Emily Lewis. This episode is sponsored by Mijingo. Learn ExpressionEngine quickly with the easy-to-follow videos from Mijingo. They just released the Learning ExpressionEngine video series in HD. It’s four hours of ExpressionEngine training that you can do on your own schedule and at your own pace. Mijingo also offers more advanced videos on EE and topics like Markdown, OmniFocus and Evernote. Check them out at mijingo dot com.

Emily Lewis: The ExpressionEngine Podcast would also like to thank Pixel & Tonic for being our major sponsor of the year. [Music ends]. So Lea, you are coming off the end of the EECI Conference last week.

Lea Alcantara: [Agrees]. In fact, I’m actually recording this podcast in Brooklyn. I don’t leave until tomorrow, so I’m really recording this right at the tail end of EECI.

Emily Lewis: Well, we also have Jacob on the line. Jacob, are you still in New York, or are you back home?

Jacob Russell: I am not in New York. I am back in the Grand Rapids. I’m a little bit tired, but I settled back in and getting to work.

Emily Lewis: Oh, thank you so much for taking some time to talk with us. Before we dive in to our topic, I was sad at home, intentionally avoiding Twitter because it just made me upset that I was not able to attend the conference this year. I would really love to get an impression from you guys about what your experience is like. How was it for you, Jacob? I know you are presenting this year.

Jacob Russell: I thought it was great. I mean, it is my second EECI. I managed to make it out to San Francisco, and I thought as far as I’ve seen, it was the best one yet. There was a big group of people there. That seems to be really be growing quickly in size.

Lea Alcantara: [Agrees]

Jacob Russell: The speakers were the best crop yet as far as I’ve seen. I mean, the whole thing I thought went really well. It was really useful and I enjoyed spending all that time with fellow ExpressionEngine devs and designers.

Lea Alcantara: So Jacob, I was there for Dev Day. Where you there as well?

Jacob Russell: I was not. I was all over Manhattan on Dev Day exploring.

Lea Alcantara: [Laughs]

Jacob Russell: It was my first trip to New York, so I had to get a little bit of that in.

Lea Alcantara: So just to explain a little bit, the conference was split up into three days, and the first day was an optional Dev Day and then the other two days are the “real” part of the conference, and Dev Day was essentially this crazy 12-hour day where we spent a whole bunch of time with EE designers and developers and project managers, et cetera and so forth, and we were tasked with an assignment to build a site in 12 hours.

Emily Lewis: Oh, fun, like a code sprint.

Lea Alcantara: Yeah, yeah. Let’s just say it was pretty crazy, but actually, I enjoyed it a lot, especially because as a solo designer/developer, I hardly have a chance to work with other people in that way. Usually when I outsource some coding or whatever, it’s so segmented and separated still. Here, it was really active and you are able to really see how people work and compare notes on how you, as an EE developer, attack the same problem. So that was interesting. I mean, I think that there was room for improvement, but I thought the presentations at the end were really fun as well.

Emily Lewis: Jacob, what were you favorite parts of the conference? You mentioned that the speakers were probably some of the best you had seen thus far with EECI, and I saw a lot of comments on Twitter sort of backing that up. Was there any particular topic, other than your own, that you enjoyed a lot?

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Jacob Russell: I enjoyed a lot of the topics talking about kind of the front end development aspects of things because that’s something that I do a lot of, so that was really interesting to me. To be with that, I mean, as great the speakers were, the greatest part of the EECI Conference, for me, is just being able to meet and interact with all these people that you know and talk to on Twitter I see around doing all these great works and actually kind of get in touch with those people in person and have kind of more human relationships with these people is always really, really cool.

Lea Alcantara: Absolutely.

Emily Lewis: Yeah, that was why I was so sad that I wasn’t there because I think it was EECI San Francisco, Jacob, where I got a chance to meet you, and it is, it’s that experience with being with your own people, [laughs], and getting that chance to connect with someone who maybe you only know on Twitter or something else and get to know them as a person. For me, it’s the most inspiring. I usually come back to work inspired and creative and ready to do more.

Lea Alcantara: And I just also want to point out, speaking of people, it seems like all around the world were attendees. Essentially, we had somebody come from South Africa, Germany, Italy, and New Zealand. It was pretty awesome to see some of these designers and developers fly all the way from their homeland to New York to hang out and learn and see other people. It was pretty cool.

Emily Lewis: So I also noticed on Twitter, there seemed to be some sort of controversy. I am not quite sure what happened, but apparently there were some people who took issue with some slide deck content.

Lea Alcantara: Yes. So I really just want to focus on the positive parts of the conference, which 99% it was a really great conference in my opinion. I can only speak for myself and I think that the atmosphere was very inclusive, friendly and informative despite the hiccups. The only comment that I really want to discuss about that, I think, with the controversy, or the only thing I only want to discuss further is if you read Jenn Lukas’ blog post called “Jenn Lukas Slide Consultant,” I’ll link to it to the show notes. That pretty much echoes my opinion and Jenn says it in a much, and probably more eloquent way than I could probably say it at this podcast.

Emily Lewis: It sounds good to me.

Lea Alcantara: [Laughs]

Emily Lewis: So, you guys, after EECI wrapped up, I am just curious, was there like an end-of-the-conference party?

Jacob Russell: Yeah, there is…

Emily Lewis: Or after party?

Jacob Russell: There was a party right at the venue this time actually involving some kegs nicely provided by Pixel & Tonic.

Emily Lewis: Nice.

Jacob Russell: And that went really well before we kind of split up and wandered around Brooklyn in various groups.

Emily Lewis: That’s great.

Lea Alcantara: The venue was awesome. The Invisible Dog essentially is kind of an art gallery, so having an after party and the conference there was really interesting space and really interesting time.

Emily Lewis: Well, the pictures I saw the people are posting, I mean, I tried to avoid Twitter, but I couldn’t help it. [Laughs] On the pictures that people are posting, it looked gorgeous like it’s a really great space to be in.

Jacob Russell: There were a lot of very interesting kind of post-Apocalyptic art.

Lea Alcantara: Yes.

Jacob Russell: It was definitely great and unique space.

Emily Lewis: That’s great. Well, Whoooz! Webmedia always does a really nice job with what they put on for the EECI Conference, so I’m really excited to see that they are keeping up with their past history of quality and further improving with the content and the topics and speakers that they are bringing to the conference.

Lea Alcantara: And so I think on that note, I’d like to dive into the topic at hand, which is speeding up EE. Now, I think this is a topic that’s near and dear to, or should be near and dear to every EE developer’s heart, how do you optimize your site to be as fast and as efficient as possible for your visitors, and for those that don’t know, Jacob works with Ryan Masuga in Masuga Design and helps develop for Devot:ee the add-on repository for ExpressionEngine. Jacob, why don’t you tell us a little bit about the history of Devot:ee and what got you started in optimizing EE a little bit more?

Jacob Russell: Right. So the story behind this that I kind of shared at EECI is that at the last EECI in Leiden, kind of the running joke was how slow Devot:ee was at that time. Whereas we’ve grown, the way we built things in the first place to add all sorts of features and ways to make it easier for people to look at and access add-ons, the site hadn’t scaled as well as we’d hope and it really started to slow down.

So when Ryan came back from that, we kind of had to take a real look at things and say, “Okay, we have this speed issue, what can we do to fix it?” And part of that was looking at our server that we are on at that time. We ran it on a shared server that worked really well for quite a long time, but it wasn’t really scaling for us. We ended up getting in touch with EngineHosting and they’ve set us up there with a set up that’s working great for us now.

But the biggest thing was just looking at the way we build our site and all the EE code involved with that and realizing that a lot of the ways that we done things were not the best way to do it, and we had introduced a lot of slowness that didn’t need to be there. So we kind of went through and refactored basically the entire site, sped things up in every way we could, and from there, I mean that’s kind of where I got the experience working with EE and optimization. I basically just learned a lot of little things you can do that kind of help make sites go a lot faster.

Emily Lewis: How do you evaluate what the speed of your server is? Did you use some sort of tool that you could establish a baseline for which you want to approve against?

Jacob Russell: Mostly just the stuff that’s built in to EE as far as the template debugging tools and the query output and looking and saying, “Okay, this page is taking so many seconds to run there.” It’s getting to points where you are looking at it like 15 or 20 seconds.

Emily Lewis: Wow.

Jacob Russell: Which you really, really don’t want to see.

Emily Lewis: [Agrees]

Jacob Russell: And seeing what steps in the template process are causing those issues and looking at query count and saying, “Okay, these many queries are being run in this page and this is an unacceptably high amount, whether that’s even up to like 50 or going higher to 100 or 200 queries.” These are numbers that you can see sometimes on really slow pages.

Lea Alcantara: [Agrees]

Emily Lewis: [Agrees]

Jacob Russell: So you see those there and you start to look at what’s causing that, what’s taking the longest time in the template debugging process and what queries seemed to be showing up a lot, which add-ons are creating a lot of queries, and just kind of looking at that and finding logic to it, I guess, it shows you what parts of your EE build are really slowing the site down.

Lea Alcantara: So you mentioned some of the loading times were unfortunately taking, let’s say, even 15 or 20 seconds. How are they loading now?

Jacob Russell: For the most part, our pages are between one and three seconds, which is still a little bit higher than we want.

Lea Alcantara: [Agrees]

Jacob Russell: I would be happy if every page in the site was rendering an EE at least in sub one second, and so that’s the end goal, but we are down to an acceptable level as far as it’s not the butt of any jokes anymore, I guess.

Emily Lewis: [Laughs]

Lea Alcantara: Cool, cool. So can you tell us what kind of server environment do you guys were on before and what you are on now?

Jacob Russell: We were on a VPS before with a host that’s otherwise been very, very good for us. Just this particular time around it didn’t work well for Devot:ee, and actually, along with speed issues, it had to do with just kind of management on a site that’s scaling like this where we are not server people.

Lea Alcantara: Yeah, yeah.

Jacob Russell: So getting into a place like EngineHosting where they’ve just been great at helping us out really helped us, and to be honest, I’m not even especially familiar with the details of what EngineHosting has set up with. We had this whole issue with the speed and they kind of came to us and say, “Hey, how can we help?” And they’ve taken care of a lot of that in there. They’ve been absolutely great for that.

Lea Alcantara: Very cool. And I just wanted to take a moment to mention that this is really a timely episode because the first episode of EE Podcast when Dan Benjamin and Ryan Irelan launched this podcast a long time ago was on acceleration and caching, which we still have up on the site, so if you want to check out the archives, you can listen in and see what their tips are for some server tweaking because they do speak a little bit about high traffic sites, and if you are a server type person and don’t have, let’s say, the heavy support of EngineHosting, and/or you are the type who likes to tinker around with your server, that is an episode that you can catch. It’s Episode 1 of the EE Podcast.

Emily Lewis: Yeah, I’ve had a good experience with EngineHosting myself because like you, Jacob, I’m not a server person and that was one of the reasons why when I was looking for a host, I was looking for someone who could bring me experience and being available to help me when I had issues that I wouldn’t even begin to know how to address.

Jacob Russell: Absolutely, that’s an invaluable help, I mean, because if you are not kind of a system man or a server guy, sinking time into server issues can really just blow it out of proportion real quickly, so being able to have access to experts like that is really, really useful.

Lea Alcantara: So let’s dive into what you mentioned a little earlier in the podcast and also basically the gist of your presentation in EECI, the fact that all the things that you do in your templates and the add-ons that you use or don’t use were the key factors that helped speed up your site. So can you go through some of those steps and some specifics on how you optimize Devot:ee?

Jacob Russell: So the big time we did it is like I said, we looked through the template debugging queries.

Emily Lewis: Yeah.

Jacob Russell: And we found that certain add-ons that we were using at that time were creating a lot more loads than they should have been. That was due to a lot of different issues. There were a couple we were using that weren’t really in use, where they are kind of EE 1 add-ons that were just a little bit poorly built and were hooking into parts of EE that they didn’t need to, and the way developers build these add-ons make a big difference in what kind of load they put on the system. So if it’s a newer developer or somebody who is not really thinking things through, you can find that add-on would really slow things down in ways that shouldn’t. So we had to again go through and root those out. We worked with a couple of developers to speed things up and switched a couple of add-ons to new ones that were a lot faster, and that made a big difference for us. What we also discovered that’s really slowing things down for us was we used a lot of embeds.

Lea Alcantara: [Agrees]

Jacob Russell: I mean, I went through this at EECI and this would be on my slides when I get them out as well, but with embeds, every time you have an embed, it restarts the template engine. So as far as EE is concerned, it’s like loading an entirely new page. So if you have a page that has six, eight, or even a dozen embeds on it, which is not uncommon from what I’ve seen in EE sites, that’s really going to slow down the process because as far as EE is concerned, it’s loading six, eight, or a dozen pages.

Lea Alcantara: [Agrees]

Jacob Russell: And then you talk about things like any sort of tag that loops that has to run for every entry. When you start nesting those inside each other, that goes up exponentially. If statements in EE have a lot of kind of inherent issues where any, with a very few exceptions, if statements in EE will run all the code inside the conditional before figuring out what’s actually to display in the page. I mean, that’s kind of a rough summary of what I was talking about at EECI, but all those issues kind of came together. It never really ends up being one specific thing. It’s just kind of looking at the whole and saying, “Okay, how do I fix this thing and then this thing and then this thing,” and then you get to a spot where you are happy with your load times.

Lea Alcantara: Cool.

Emily Lewis: So like, for example, the embedded templates, I’m guilty of this. I use it quite a lot. What is the alternative that you guys found most optimal?

Jacob Russell: That’s kind of a great thing about being in EE right now is that there is just a ton of options out there right now for alternatives. I was approached actually with three or four new ones that I hadn’t used or heard of yet, just at EECI.

Lea Alcantara: Wow.

Jacob Russell: The ones that we use a lot on Devot:ee are, in large part, the Template Morsels from Solspace, which allows you to segment out chunks of content in a way that’s not an embed.

Lea Alcantara: Cool.

Jacob Russell: It loads it with a fairly low load on the database and you can also cache anything that you put in Template Morsels, and with all the alternatives to embeds, there is a few limitations which each one about whether or not you can put in things like JavaScript or PHP or EE tags and whether you can pass variables to it.

Lea Alcantara: [Agrees]

Jacob Russell: But if you are able to work through those limitations, these things are a lot faster. Another one we used a lot of on Devot:ee is Low Variables. We will mix, I mean, just great add-ons in general, and Low Variables is awesome in the fact that it loads again quicker than an embed. You can set the Low Variables to be early or late parsing so that you can use them to pass data into EE tags or to just output stuff on the page.

Lea Alcantara: Yeah.

Jacob Russell: But there are a lot of really cool options there.

Lea Alcantara: So my question is, what’s the difference between, let’s say, Template Morsels and Low Variables? What would make you decide to choose, “Okay, I’m going to put this snippet of code into Template Morsels and this snippet of code into Low Variables,” because technically they are all variables.

Jacob Russell: Right.

Lea Alcantara: But how does one handle something differently?

Jacob Russell: The big difference you can find between snippets, Low Variables, Template Morsels, and you can check Devot:ee and just kind of search for these types of embed alternatives here because there are a lot of them out there is that you will find that some will allow you to take in parameters and some will not, which is going to be very important depending on situation.

Lea Alcantara: Aha, yeah.

Jacob Russell: Some will be early and late parsing, which again can make a big difference. Some will allow you to use EE tags and some will not. Some will allow you to use PHP and some will not, and some will allow you to use JavaScript and some will not.

Lea Alcantara: Interesting.

Jacob Russell: So those are kind of the five factors, and I’m not going to try to rattle off which ones do which of the five right now.

Lea Alcantara: Sure.

Jacob Russell: I’m sure to get it wrong, but if you kind of look at those factors and look at the docs for these various options, you will see, “Okay, I have these three needs and this particular add-on, Low Variables, work really well on here. Template Morsels work really well from here.” Kind of the X factor is caching which something like Template Morsels do for you there, whereas if you are using like a snippets, which just basically throws whatever content you have there out into the template, then you are going to want to do caching at a higher level on the template or elsewhere.

Emily Lewis: So my other question is you also mentioned conditional statements. Is that true for just a simple conditional, or is that those get completely processed with everything inside first?

Jacob Russell: Right. So the thing with conditionals is that simple conditionals in EE work like you would expect where they decide, “Okay, I’m going to show this path or this path” and then it renders the content inside that runs all the EE tags and puts that load on the site for that specific part of the conditional.

Emily Lewis: [Agrees]

Jacob Russell: But the reality is that very few conditionals in EE are simple. If you really take a look through your sites, you will see that at least 90% of the conditionals you have are going to be complex conditionals and the reason for that is that anytime you use an and or an or in if statement or you have else or you are using any sort of variables other than global variables, or if you have any complex ifs inside of that if statement, you are looking at it at a complex if statement and that’s going to run all the code in the entire if statement, whether it’s not actually showing up on the page.

The solution for this has ended up being really simple for me. I go almost exclusively to a pair of add-ons from a great developer, Mark Croxton.

Emily Lewis: Cool.

Jacob Russell: And those are Switchee and If:Else, and those are basically just in a manner of taking better if, else and switch statements, which being kind of alternative for that logic that works better in a lot of situations that allow you to put the parse=“inward” tag you can use with EE plugins on them, so that they always run the other tag before the content inside, and we use that extensively on Devot:ee. It’s rare at this point that I’ll use a native if statement since those has worked so great.

Emily Lewis: Yeah.

Lea Alcantara: Very cool. I just wanted to say that that was one of my bigger aha moments at EECI. It was the fact that I tried to convert all my if statements to simple conditionals after hearing there was a big performance hit, but I did not understand or know that even if you do if conditionals for like your big chunks of code separately with simple conditionals, if you have another if statement inside that chunk of code, if you do another if, else or whatever, that it renders that entire if statement into a complex conditional. I had no idea.

Jacob Russell: Exactly. That flows back uphill and it’s not something that you would expect if you don’t know how it works.

Lea Alcantara: [Agrees]

Emily Lewis: Yeah, I’ve had Switchee or implementing Switchee on a list of stuff to do for the EE Podcast site ever since. I think it was one of the first podcast that I was involved that I heard that it offered this sort of advantage over doing complex conditionals because that’s what I built into a lot of our templates and I want to get out of that. Now, what about with regards to just basic query and using like the disable tag and stuff? Did that come into play for you guys?

Jacob Russell: Well, for the most part, we were already using the disable.

Lea Alcantara: [Agrees]

Emily Lewis: [Agrees]

Jacob Russell: But it’s definitely a very important thing. We started out with every entries tag we create, every general entry tag we create and disabling everything.

Lea Alcantara: [Agrees]

Jacob Russell: And so actually, we just have it output in Textmate if I hit disable and hit tab. It outputs the full disable parameter that you could find in the ExpressionEngine docs, and then just re-enabling categories with custom fields or whatever we are going to need at that particular entry’s loop. In that way, we are not putting any overhead on that loop that we don’t need to be. I mean, because if you are not using categories in a specific entry’s loop, then there is no need to have that kind of extra stuff turned on.

Lea Alcantara: [Agrees]

Jacob Russell: So we start off disabling everything and then kind of adding that back in there and that’s worked really well and it’s a great way to keep things sped up.

Lea Alcantara: That makes me actually wonder if this should be a feature request. Correct me if I’m wrong, there is no enable parameter, right?

Jacob Russell: No, having disable as the default, I think, has been a feature request before.

Lea Alcantara: [Agrees]

Jacob Russell: I think it’s likely one of those things that they are probably not keen on changing just because people are so used to it being one way.

Lea Alcantara: Sure.

Jacob Russell: So it might be a little tricky to just kind of switch things around now.

Lea Alcantara: Sure.

Jacob Russell: But as far as I’m concerned, having an enable that allows you to alternatively just turn on certain things will be a great way to do it.

Lea Alcantara: Yes.

Emily Lewis: Was there anything from your SQL manager perspective that you did in terms of optimization?

Jacob Russell: As the SQL manager as far as?

Emily Lewis: Well, like to defrag the database to optimize the queries.

Jacob Russell: Not a whole lot.

Emily Lewis: [Agrees]

Jacob Russell: EE has a built-in tool for that, and I believe that EngineHosting has helped us do a little bit of that as well. Like I said, we are not server experts, so there are all sorts of things that you can do on the server side of things, too, that helps the site run faster as far as doing content mirroring and hosting static content in different ways. That tends to be more important for really high-traffic sites, and while Devot:ee at least is complex, it’s still not high traffic in the sense at the top ten list from, I believe, Hot Studio’s list is where they are getting millions and millions of people through there, so that hasn’t been a real priority for us yet. That may change in the future, but up to this point, we’ve been able to just optimize the site itself in a way that’s built and that’s really made the big difference for us.

Lea Alcantara: So just backtracking a little bit, is there anything specific in your use of Switchee that you would like to mention for people trying to optimize their sites and fiddling around with that add-on that you thing that they should take in consideration?

Jacob Russell: There haven’t been many limitations with this so far. There were some issues with nesting Switchee and If:Else.

Lea Alcantara: Okay

Jacob Russell: I believe there was a conversation about this a couple of weeks ago that I lost track of, but then I believe Mark is working to allow you to nest them and that may actually be in place now.

Lea Alcantara: [Agrees]

Jacob Russell: I’d have to take a look at the docs here.

Lea Alcantara: Cool.

Jacob Russell: But there was the only real limitation that I had dealt with so far, and from what we’ve found so far, I mean, If:Else was created after I said, “Hey, this would be really useful to have Switchee’s functionality for if statements.” And he went through and made that. He’s been really responsive and really great about adding new features to both of those, so there is not a whole lot of limitations that can’t be overcome with either one of those.

Lea Alcantara: And speaking of add-ons, any more add-ons that you’ve used? I know that there was this kind of experimental add-on released to the wild recently called CacheCracker. Have you had a chance to play around with that one?

Jacob Russell: I have not had a chance to play with that. I’ve got a whole list now of add-ons that I need to go and check out.

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Jacob Russell: But no, I haven’t had a chance to play with that one yet.

Lea Alcantara: And…

Jacob Russell: Most of our caching that we ended up doing was either through Template Morsels or with the built-in caching methods.

Lea Alcantara: Sure. Okay. And then in terms of caching then, what are your positions in caching pages or templates or tags? What do you think is the best practice?

Jacob Russell: Right. So caching in general is kind of the last step in an optimizing process.

Lea Alcantara: Interesting.

Jacob Russell: It’s because caching in a lot of ways mask what otherwise be inefficient on a page.

Lea Alcantara: Okay.

Jacob Russell: So what you really want to do to speed up a site is go through and get the site running as fast as you can first, and then start implementing caching a little bit at a time and saying, “Okay, first of all, does it actually speed things up?” Because there are cases, especially on EngineHosting, because they really optimize their database performance where caching a page is actually going to be slower than just outputting it normally, so once all these pages are running quickly, you kind of go through and start implementing caching and saying, “All right, this is faster by this much. This works great here. Okay, we are going to move on.” Once you’ve decided the caching works, the big parts at EE caching that we use for both template and tag caching, and a tip I got from Matt Perry, I believe, of Grist who did a talk at EE Road Show a few years ago on optimization. That was a really great source for me when I started getting into this and I don’t believe it’s actually fully available online anymore. I had to kind of piece it together. It was that you don’t use both types in the same spot. You use either template or tag caching, and wherever possible, you want to use template caching because you always want it to cache the largest chunk possible.

Lea Alcantara: [Agrees]

Jacob Russell: So if you have six different tag caches on a page, it has to access the files, it’s going to pull in all six cached files, whereas if you have just one big template cache, it’s only doing that once and that really kind of saves you some time and processing power from the site.

Lea Alcantara: [Agrees] So, speaking of that, because I’ve been playing around a little bit with Template Morsels then, if you cache a whole bunch of morsels and those Template Morsels are in a template, and let’s say, there are six Template Morsels, is it pulling all six files? But if that template is cached once, does that mean it only pulls that one template? Like how does work?

Jacob Russell: Template Morsels are a little bit different in that they kind of pull all of the Morsels on a page at once.

Lea Alcantara: [Agrees]

Jacob Russell: And so that’s been really optimized by the guys at Solspace to do that to allow you to not enter a lot of extra overhead by having multiple Morsels on the page.

Lea Alcantara: Oh, very cool.

Jacob Russell: And in fact, what we actually try to do is use that in places where we have more than one Morsel, so that we are kind of offsetting the initial overhead you get from that by having multiple Morsels on a page that it will load it faster, and so that’s a little bit of an exemption, but it works in a kind of different way.

Lea Alcantara: Okay.

Jacob Russell: But even so, the rule, when possible, is to put things into as large a chunk as possible, so that you are loading whatever it is as a few times as you can.

Emily Lewis: Now, we’ve talked a lot about optimizing EE and even the server. What about a front end kind of optimization? Did you find any benefit to doing things to optimize your CSS, images, data script?

Jacob Russell: Yeah, we absolutely did that, too. It wasn’t as big a benefit, but it was definitely something we looked at. Our images, for the most part, were already pretty well compressed. Photoshop does that kind out of the box and there are some other tools out there that do it even better than Photoshop for compressing JPEGs with as little loss as possible. We used Yahoo, and I think Google also has a site kind of analysis tool that will run in your site to tell you, “Okay, your page headers should be this. Your images seem uncompressed. You are doing too many calls for CSS files.” So we ran Yahoo’s, I think it might be called, Page View Tool and we looked at what they were saying on what we are doing wrong and kind of combined some CSS and moved a lot of stuff to the footer as far as putting JavaScript called in the footer whenever we could, and a big thing we did was we started minifying our CSS, and there are a couple of EE add-ons that do that for you. We used a non-EE tool that it just kind of sits behind the scenes and minifies our CSS file whenever we update it, and that worked really well for us to kind of shrink that down and deliver that as fast a way as possible. What it actually does for us, too, is we have I think three or four different CSS files on some pages that minify that program we are using, compiles them all into one big CSS file, crunches that down and then delivers that as one file, so it’s one less request to the server from the user.

Emily Lewis: Yeah, I personally used Yahoo’s YSlow browser extension.

Jacob Russell: That’s what it is.

Lea Alcantara: Yes.

Emily Lewis: Yeah.

Lea Alcantara: Yeah.

Emily Lewis: It’s pretty sweet to give you an at-a-glance view of very specific things that they recommend to help improve sort of the front-end delivery of resources.

Jacob Russell: Yeah, that was a really great tool for figuring out what little bits and pieces we weren’t thinking of.

Lea Alcantara: But the bottom line, it sounds like to me that all those things should be almost default really for any site you work, but the biggest bang for your buck is speed optimization in ExpressionEngine is focusing on your template, output and your add-on use.

Jacob Russell: That’s been my experience in what I’ve seen so far.

Lea Alcantara: Yeah.

Jacob Russell: I mean, most developers know enough to not output a 1,000 pixel by 800 pixel image on a page and then just use the HTML to shrink it down. So for the most part, people are pretty well informed about these types of front-end development things already, and you might get some benefits there, but if you are in the web business, ideally you shouldn’t be experiencing huge benefits there because you should already be doing a lot of things in a generally right way. With EE though, it seems like there are a lot more places where people just don’t realize how they can be doing things faster or they use the tools that are there natively in EE like embeds, which works so great for segmenting code and allowing you to develop it in a way that makes sense, but then you find out later, it aren’t as fast as you might have otherwise expected.

Lea Alcantara: [Agrees]

Emily Lewis: I don’t even know if this exists. I’m just curious if there are some tools out there that sort of alert you if there is a problem page or a problem query that’s happening on the site that’s slowing things down as opposed of you being on it and experiencing it. Is there any sort of thing you used to alert to any performance issues?

Jacob Russell: We don’t. There was an add-on we were using that I honestly can’t remember the name of, and I think it might have been just for EE 1 that kind of graphed out the load times and shows you where your slow points were, but there is nothing we have right now that really can have alerts when a particular query is running 16 times in a template or a particular step is taking prohibitively long. That kind of thing would be pretty great if it didn’t add any actual load itself, so if there is a developer out there that wants to build that, I mean, I’ll be all for it. But there is nothing at least that I know of right now that kind of monitors the site as it’s running and lets you know when those kind of warning signs are showing up.

Emily Lewis: [Agrees] Now, I did see Jacob, you tweeted that you were, I don’t know, perhaps thinking about putting together an optimization guide kind of with all of these tips that you’ve gathered.

Jacob Russell: Yeah, I don’t want to talk too much about that now because I’m not sure that it’s going to happen because there is quite a bit of time investment there.

Lea Alcantara: [Laughs]

Jacob Russell: But ideally, yeah, I would like to put together some sort of PDF that in a little more expansive way, a little easier to reference where it goes over the things that I talk about and more issues with optimization that have kind of smaller in the benefit they provide, but also important, because I think having a resource out there like that, and Solspace does have an optimization resource already that they put out a few years ago. But having that kind of all in one place I think could be really useful to people. Mostly it’s just a matter of whether or not I can find and get myself to dedicate the time to put it together.

Lea Alcantara: Cool. So are there any more tips that you would like to leave our listeners before we wrap up?

Jacob Russell: I think that pretty much covers it. I mean, for the most part, there is not going to be one silver bullet that really makes your site run fast, and so what I was hoping for in the talk and here and even if I put a guide is to get people started in the right direction and let people know what problem areas tend to show up in EE sites from what we saw in Devot:ee and what I’ve seen on a whole bunch of other sites, so that they can kind of go on their own from there and start learning, “Okay, this is what’s going to work best for me in this situation.” And really start kind of speeding up their own sites and go in the right way with the research on it.

Lea Alcantara: Cool.

Emily Lewis: Will you be putting your slides online?

Jacob Russell: Yes. My goal is to get those up today, and I know that there are a couple of links that have gone around Twitter where people are compiling those all in one spot, but I will have those up there shortly.

Emily Lewis: Great.

Lea Alcantara: So thanks, Jacob, for being our guest for today. This is very informative.

Jacob Russell: Not a problem. I’m glad I can help.

Emily Lewis: I can’t wait to see your slides.

Jacob Russell: Yeah, I am hoping to get those up here real shortly for anybody who couldn’t make it out and see them live.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Jacob Russell: I am on Twitter at @jacobrussell, and I am more than happy to help people there. With anybody who has kind of more in depth questions, I’m also on AIM and Google Chat and I’m always happy to answer questions and help people get started in the right direction with optimization. There is a community that’s gone a long way to helping me learn EE in the past two years and I’ve been working with it, so I always am happy to give back and help other people out as well.[Music]

Lea Alcantara: Now, we would like to thank our sponsors for this podcast, Mijingo and Pixel & Tonic.

Emily Lewis: We would also like to thank our partners, EllisLab, EngineHosting and Devot:ee.

Lea Alcantara: And thanks to our listeners for tuning in. If you want to know more about the podcast, make sure you follow us on Twitter @eepodcast or visit our website at ee-podcast.com. This is Lea Alcantara.

Emily Lewis: And Emily Lewis.

Lea Alcantara: Signing off for the ExpressionEngine Podcast. See you next time.

Emily Lewis: Cheers.