Joe Casabona: Hey everybody, and welcome to Episode 229 of How I Built It, the podcast that offers actionable tech tips for small business owners. Today’s sponsors are TextExpander and Podcast Liftoff. You’ll hear about them later in the show.
Today, our guest Andy Schaff really delivers on the actionable tech tips. He is the development architect at Portent. And we have a fantastic chat about how to make your website more performant from the ground up. We get pretty technical, but don’t worry because I rain down analogies like it’s my job. Andy drops a ton of knowledge about back end performance, and gives both developers and small business owners starting points for making websites faster, and why your Google PageRank depends on it.
In Build Something More we talk about two things: his record collection, which I had the benefit of looking at during our interview—It’s vast—and we get into how he got into record collecting and things like that. But we also talked about the acquisition that he and his company went to after being at this company for a while. It was a really interesting conversation to hear.
If you want to join the build something club, you can do so over at buildsomething.club. You will get the bonus part of this episode as well as bonuses to every episode. As a matter of fact, there’ll be ad-free extended episodes. You’ll also get access to the quarterly members-only episodes, members-only podcasts, live stream archives, a community where we have AMAs, networking events, and lots of other stuff as well. It’s just five bucks a month or $50 a year, that is two months for free. And you can sign up over at buildsomething.club. Now let’s get on with the interview with Andy Schaff. Andy, how are you today?
Andy Schaff: I’m doing well. Thank you for having me.
Joe Casabona: My pleasure. Thanks for coming on the show. Now I’ll just say right off the bat that I’m really digging… this is not a video podcast. So for the listeners, Andy has a very… it looks like a very complete record collection behind him. So maybe we’ll talk about that in Build Something More. We’ll see. We’ll see where the conversation takes us.
But before we get into any of that really, Andy, why don’t you tell us a little bit about who you are, what you do, particularly what does development architect mean?
Andy Schaff: It’s a contributor path with Portent that I’ve been on for a long time now. I’ve been working with Portent since 2004. I didn’t start off being an expert with site speed or really being an expert at all. But over the years of doing lots and lots of client sites and failing in some aspects and learning and improving, and the technology is changing, I’ve worked up the expertise to get to where I’m at now.
What that means, I’m more backend focused, but I implement everything that happens on the front end. The term full stack developer gets thrown out a lot these days. I don’t know how many true full stack developers there actually are. I would consider myself a little bit more of like a full stack implementation engineer. You don’t want me doing your CSS because I’m not trained in it, but I understand how it works. I can set up the pre-processing workflows and things of that nature.
But my expertise is more on I create environments that make sites super fast, working with the various caching technologies, and configuring the web servers like Nginx and Apache to make those sites run very quickly or at least give the really good server response time, which is a backbone of a lot of site speed.
I have a Bachelor’s of Science and Computer Science degree. So using that like the back end stuff coupled with just my general knowledge of coding. That all gets put into… I end up running projects when we do site builts, all the development side of things.
So I help plan from even the SOW which we’ve gone component-based. SOWs in component-based design and to component-based development thought process. That really helps our teams compartmentalize what we’re actually doing so we can break it down and scope it better. That also helps us in our sprint planning as well.
Joe Casabona: Cool. Very cool. So Portent, first of all, do you like… I usually drop the middle “t”. I went to college in Scranton, and that’s how they say Scranton. So I might drop the middle “t” if that’s okay. Portent is a digital marketing agency, right?
Andy Schaff: That’s correct. Mainly we work online. We dabble a little bit off, but we’re pretty much focused online.
Joe Casabona: And that includes a whole suite of services from making the website and SEO, Pay per click ads, things like that.
Andy Schaff: Yeah, we do everything under the umbrella of digital marking. We consider ourselves full service. So we’ll do design, UX, information architecture, down into the development of site. And then some of those other services like PPC and Social, SEO. We have a big analytics department. All those come together to really create a solid plan for our clients.
Joe Casabona: That’s fantastic. And I’m sure it makes your clients’ lives easier because… I’m a freelancer, I would consider myself… when I was doing more development work and when I was an agency, a front end developer, I used to think I was both. And then I met actual back end developers, and I’m like, “I don’t know how Memcached works at all. I’m just going to write my CSS.”
So you’ve been working with them since 2004. You have a bachelor’s in comp sci. I have a master’s in what I say is like a fake major is media infotech. I’m sorry, my bachelor is in that. I have my Master’s in software engineering, though. So I feel like we probably took very similar paths. What year did you graduate? And from there, I want to figure out what you learned and what you talked about.
Andy Schaff: So I graduated in 2004.
Joe Casabona: So this is about three years before I graduated.
Andy Schaff: Okay.
Joe Casabona: Was Agile the big thing that your teachers talked about? Because every course I had for like two straight years talked about the Agile Manifesto.
Andy Schaff: Yeah, you’re sure. It was. Absolutely. The main language that I studied was Java.
Joe Casabona: Likewise, that was my follow-up. I think my alma mater is still teaching Java primarily which bums me out.
Andy Schaff: I mean, I would feel like Python feels like the one that a lot would be kind of gravitating towards. But I do understand Java is still very popular. It just feels like it’s starting to get surpassed by Python.
Joe Casabona: Yeah, that’s a good point. And I guess when we started learning it was less than a decade old or something like that. Right?
Andy Schaff: Yeah. Yeah.
Joe Casabona: I just genuinely curious about that.
Andy Schaff: Sure.
Joe Casabona: You have been at this company since you graduated. Very rare for people our age, elder millennials, if you will. Usually we’re jumping from job to job every two to three years. So I guess this is a very interesting perspective for me. What made you want to keep working at Portent?
Andy Schaff: It was mainly the people to be honest. Ian Lurie is the one who founded the company, and kind of lead us to new heights I guess you could say. Because I was like the 13th employee. So it was a really small company. There’s just a really good core of people on the team. And I believed his vision, I still do it. The vision that he created is still ongoing within Portent.
Since that has happened, he sold the company in 2017, I believe, to Clearlink, who’s our parent company now. But we’re basically the marketing agency for Clearlink. The way that we’ve been running stuff since, you know, I mean, obviously, we’ve gone through permutation since 2004. But it feels like we really hit the ground running and had a full head of steam somewhere around 2012, 2013.
The core philosophies that have been created by Ian and the rest of the team have continued for. Yes, we were purchased, but it feels like we’re still our own little agency shop that was around 10 or 7 years ago or so. That’s one of the reasons why I’ve stuck with it.
The other reason is I’m able to work on a lot of different things. I have a lot of flexibility. I’m not just pounding on the same one product all the time. We’re taking on all sorts of different clients. I’ve done e-commerce. The languages I’ve worked in have been from ColdFusion, the classic ASP, I’ve touched .NET, which never again—this is just personal for me—and the PHP, which I mainly work on now, I’ve done Java with Spring and Hibernate before.
Because we’re a smaller company, and we have a whole variety of clients in pretty much any industry, I’ve seen all sorts of stuff. So I would consider myself battle-tested because I’ve had to figure out tons of things on the fly, Microsoft SQL Server, all sorts of different stuff like that.
Joe Casabona: Man, that’s awesome. That’s really admirable because, like you said, it sounds like you got to work on a diverse set of projects. When I was at an agency, it was a lot of fun from that aspect. There was a lot of new problems I was solving on a regular basis. Part of the reason I left was my daughter was just born and I feel like the agency life didn’t jive with the kind of family life I wanted to have.
Maybe we can also talk about the acquisition process in the Build Something More section, because I’m pretty well in the WordPress space. I don’t know if you do a lot of work with WordPress, but there have been a lot of acquisitions. As we record this, there have been a lot of acquisitions in the WordPress space lately. So seeing one that happened kind of outside of the WordPress space is probably going to be interesting. Awesome.
The agency has been around for… well, you’ve been there for nearly 20 years, so you have certainly seen a lot. Digital marketing agency in 2004 probably wasn’t even a word. Like wasn’t even a term. You did web design probably if I could guess.
Andy Schaff: Yeah. It used to be called Portent interactive.
Joe Casabona: Because interactive was a whole new thing basically back in 2004. So before we get into the main topic, which is kind of why you should have a performant website, what kind of evolutionary milestones stick out in your mind? Do you remember like the first WordPress that you made or the first time you implemented caching or whatever, when you moved from interactive to digital marketing agency?
Andy Schaff: Yeah, for sure. I can think of two immediately where it was like… The first one was… the company was based in a little business center in Tacoma, Washington, which is like 20 miles south of Seattle. So we were just kind of this little scrappy shop with not a ton of people, but we were growing.
And it felt like a big milestone was when we finally committed and moved down to downtown Seattle into the Smith Tower. So that was a really big step up because it went from… you know, just the look and feel of the office and all that, you could tell that we were starting to make a name for ourselves and we were starting to land larger clients.
Joe Casabona: I mean, that’s where like Amazon has headquarters there and Microsoft has headquarters there.
Andy Schaff: Yeah, absolutely. So getting down into that space, it just kind of bumped us up to the next tier. Not only were we building upon the clients we had, we were now looking more attractive to a lot of clients in the area because of that. But that was a big one.
And then with that, some of the clients that we got somewhat early on in the Smith Tower age of Portent was when I started working closely with Ian on really diving in and figuring out the site’s speed stuff from the server level. So that’s when I started to do a deep dive into learning Nginx and Varnish and some of these technologies that drastically speed up your site.
One of the tasks I had… I’m not going to name client names, because I don’t know if I have permission to, but I remember specifically one of them I had to architect the environment for a million unique page views a month. Which nowadays, it’s not that crazy difficult, but it felt like a big task at the time, because it wasn’t something that… we’re not dealing necessarily with huge enterprise clients. Typically over the years, it’s been small to medium. And in more recent years we’re getting higher into enterprise. But back then it wasn’t quite like that.
And this was a client that was right on the edge of enterprise. That was one of the milestones I absolutely, remember because I had to come up with the environment, which had a load balancer and SSL termination, and it had multiple web nodes, a main and then a secondary that can kind of mimic the main. So that kind of structure was like, “Oh, wow.” I learned a lot about it. And it became kind of a framework for what I used going forward. I’ve since kind of fine-tuned that architecture, that plan but that milestone absolutely stands out.
Joe Casabona: That’s awesome. Was this before things like AWS? I don’t know when AWS started selling.
Andy Schaff: AWS was around. Yeah, AWS was around. We were using a combination. We weren’t directly with… Well, I will say that for our clients, it kind of depended on who they wanted us to go with. So in that scenario, I was architecting something that ended up on Rackspace. I think Rackspace had AWS underneath it. Or maybe they didn’t yet, but they do now. I don’t know. It’s hard to keep up with who’s the backbone these days.
Joe Casabona: I know. You know when everything goes down. Like when AWS go down, and then everything, “Oh, I guess Netflix uses AWS.”
Andy Schaff: Yeah, for sure.
Sponsor: This episode is brought to you by Podcast Liftoff. This is my own course and offering. If you are thinking, “Hey, I want to start a podcast,” or “hey, how does Joe make podcasting mostly his full time gig?” Well, it’s because I have found the formula to making money podcasting. And I teach you that in my Podcast Liftoff Course.
So if you head over to podcastliftoff.com, you can enroll in Podcast Liftoff, learn all the ins and outs of launching a podcast if you haven’t done that yet. Or if you want to cut to the quick, you can take what I think are the two most valuable sections there, which are creating consistent content and monetizing your podcast through sponsorship or otherwise. It’s big value. I have made over $200,000 podcasting. It is a large portion of my income and I am self-employed full time. And I have monetized my podcast in multiple ways, not just through the sponsorships that you hear on this show.
So if you are interested, head over to podcastliftoff.com, check it out, enroll in the course, start making money with your podcast. Podcasts are fun, but they cost money and they can make you money. Again, podcastliftoff.com, use the code “BUILT” at checkout for a cool 20% off.
Joe Casabona: For a while, the conversation around website performance was just like, don’t make your images too big, or don’t bloat your JavaScript or whatever. Again, I’ve known Apache since I was making websites in like 2000. Nginx is something I have kind of heard and have used because the hosting company I use uses them, but I’ve never dug into like the finer points. Like they do redirects differently or whatever, on that level. For my own edification, what are maybe the top two differences or top three differences between Apache and Nginx? Or are there not that many differences?
Andy Schaff: At this point, I think you can tune Apache to be pretty similar to Nginx. But I know that Nginx is just lightning fast with its ability to recall cache configuration.
Joe Casabona: Got you.
Andy Schaff: It’s the number one used web server when you’re talking about any load balancer. Like any load balancer is using Nginx.
Joe Casabona: Got you.
Andy Schaff: It’s just super fast that being able to handle those requests as they come in and do whatever the configuration is set to do.
Joe Casabona: Got you.
Andy Schaff: But like a patchy can be fine-tuned to be super quick. Like one of the kind of gotchas that isn’t a default setting in Apache is… shoot, I’m going to forget what the name is. But I can explain it. It’s basically Apache by default says, “Hey, look in every directory, and if there’s an .htaccess file, read it.”
The process of having to do that slows down Apache a bit. So you can turn that off by default. So that makes it a lot more fast. So all the configurations, you’re including them, but they’re cached by Apache so that when the request come in, they don’t really have to think about it because it’s in the cache. Whereas if that setting is on it, it’s going through every directory that that thing could touch and saying, “Oh, is there .htaccess file? Oh, there is not, I have to process it in real time.”
Joe Casabona: It’s like asking somebody to find something in a book by reading every page of the book, instead of saying like, “Oh, it’s in chapter four.”
Andy Schaff: Yeah, exactly.
Joe Casabona: Got you. Very interesting. Again, maybe for the non-back end folks, a load balancer is essentially traffic comes in, you look at however many machines you are… I hope I’m explaining this right. You’re looking at however many machines have your files, your website abstractly, and then just send it to the one that has the least amount of traffic, will say. Very high level abstract sort of.
Andy Schaff: Yeah. Yeah, that’s correct.
Joe Casabona: I got like a crash course from my friends at the University of Scranton when I was a web developer, and they’re like, “We just set up this cool thing.” And I’m like, “Lay it on me.”
Andy Schaff: For sure.
Joe Casabona: Cool. Let’s get to the main event now that we’ve laid a bunch of groundwork here. When we talked pre-show, we talked about improving client’s LCP, FID, and FCP. The title of this will probably include something sexier than that. Like, why your website shouldn’t be slow or whatever? What do those three acronyms mean?
Andy Schaff: Just so everyone listening, these are all core web vital metrics that Google has standardized or created in the last couple of years. And supposedly, they’re supposed to be already in effect. They’re supposed to become a ranking factor starting in, I believe, the end of May, so basically, June 1 but no one knows for sure because, you know, it’s Google.
So those are core web vital metrics. So LCP stands for largest contentful paint, and then FID is first input delay, and FCP is first contentful paint. So largest contentful paint is basically what Google is determining is like the largest rendered block in the viewport when your page loads. Most cases, at least for all the sites that I’ve worked on, it’s like 95% or more it’s a masthead.
Most images when you come to their homepage or… I mean, this is for every page, I suppose, but there’s a lot of mastheads. So, typically, that is what an LCP is. But by definition, it’s what is determined is like the largest text or largest image block in the viewport.
Joe Casabona: Do you mean that by volume of viewport or megabytes?
Andy Schaff: Yeah, yeah, yeah.
Joe Casabona: Okay, cool.
Andy Schaff: Then first input delay and first contentful paint is basically the measure it takes for your user to be able to… well, first input delay is the metric it takes from the time the user first starts to load the page and when they can first interact with the page. And then first contentful paint is the time it takes from when the user requested to when something shows up on their screen.
So it’s possible that if you’ve done PageSpeed, like you’ve used PageSpeed Insights or some of the other tools that give you a visual of your site loading, they’ll show you kind of frame by frame what is showing up to a user when they load it. A lot of times if you have a faster and connect internet connection, you don’t see it because it happens so fast. But it’s broken down like that.
Joe Casabona: Yeah, yeah, absolutely. And something that I talked about in my HTML and CSS book Visual Quickstart Guide specifically was testing by using some browser tools to kind of simulate really slow internet. So you can simulate like 4G or 3G, or like Philly International Airport, I think it’s its own entry. And doing that is pretty important, right? Because you probably have superfast internet. I have super fast internet. Most of our users won’t have superfast internet.
Andy Schaff: Yeah, yeah, for sure. I don’t know what the numbers are off top my head but a majority of people are loading sites from a mobile phone or some kind of device. And it’s something in the 3G. 3G to 4G range is kind of like what the average is right now. So it is important to look at that.
I know there’s lots of tools out there that that help you do that. Google itself in the chrome console is one of those places. That makes it pretty easy to simulate that. I’m pretty sure that Lighthouse automatically uses a 3G/4G throttled connection when it does its tests.
Joe Casabona: Got you. So let’s talk about Lighthouse really quick. What is that? How does that help us as developers?
Andy Schaff: Lighthouse is Google’s tool that basically tests your site speed and then provides recommendations around those. It can be run straight out of the console. There’s a command line tool for it if you want to use that. And then it’s the logic and algorithm behind PageSpeed Insights when you go directly to that web tool that Google has.
Joe Casabona: Got you. Again, this is important, because if you’ve been listening to a lot of stuff in the WordPress space or just generally web news, core web vitals has been buzzing for a couple of months. Again, as we record this in June. I spoke to Alberto Medina, he’s a developer advocate at Google. I spoke to him on another podcast that I host with Plesk. These are important because as you said, they are ranking factors.
So if it takes like five seconds for, let’s say, first content or contentful paint, that’s going to lower your page rank, right? Not to mention other things. But that will lower your PageRank for the purposes of this conversation.
Andy Schaff: Yeah, absolutely. Just to kind of take a step back, yes, Google is popularizing this, it’s making it more kind of in your face as developers and marketers. But it’s important to realize how important site speed has been and is and will continue to be going forward.
Portent has been doing site speed analysis, auditing, and improvements for a decade now. When you start understanding that there is a direct correlation between whatever your cycles are in site speed, that needs to be at the forefront of everyone who’s managing websites. Web developers should be aware of it and working towards improving it.
If you are running a website as a manager or director of marketing or something like that, this should be a top item for your site. Because if your site’s not performing, people bounce. Like if you go to a website and it takes five seconds for something to load, and you click and every page takes about that long, people are going to be gone real quick. I mean, we’re impatient as users these days. It’s just the truth.
So it’s important to keep that in mind, that site speed, before these core web vital metrics, it’s always been important. And the longer you keep people engaged on your site, the quicker they’re able to get responses and get to where they want on your site. That’s a good user experience. That’s kind of why Google has done core web vitals. They throw the word out “user experience” right in the definition. It’s a measurement of user experience. So that’s kind of put that in the forefront.
Joe Casabona: I mean, not to mention that I have a notebook of some stats here that I did from another recent interview. It was something like after 2.7 seconds, each additional 100 milliseconds costs you money. It costs you… I think it’s 7% conversion for every 100 milliseconds or something like that. So if you’re a store, that could cost you money. With Amazon, it’s like every second cost some insane six or seven digit number.
Andy Schaff: For sure. They’re working with some exponentials there.
Joe Casabona: So you’re right, as a business owner, if your site is slow, (a) people will leave, but (b) if they don’t leave, they’ll just be frustrated. If they see the form, but they can’t interact, like the first input delay, if it loads, and then they press the input field and nothing happens, they’re going to be frustrated. And that reflects poorly on you.
So maybe what we can do here with our remaining time, you’re a back end guy, I’m a front end guy, what tips do you have for… this was very developer-focused so maybe we could talk about what developers can do to improve performance, as well as what site owners can kind of look for? Or maybe give them some things to ask for to make their site faster.
Andy Schaff: I mean there’s a lot of tools out there that will measure a site for how well it’s performing in what recommendations should be… you know, what best practices should be applied that aren’t happening on a website. I’ll throw up kind of the main ones that we use. Typically, I always will pull up webpagetest.org immediately and just run a site through that and see what is showing up on there. I will use PageSpeed Insights. I will also use Lighthouse directly in the Chrome developer console. Sometimes I use Pingdom. But mainly those first ones are the main ones that I’m looking at.
Aside from that, when I’m doing site speed audits, I started to get into the nitty-gritty of looking at headers and view the HTML source of a page and see what’s happening on there. A lot of those tools are obviously doing the same thing and then giving you action items. As an overview, without getting too deep into the tech stuff, we’ll just keep it at those tools.
Marketers can easily just go to PageSpeed Insights, slap in their URL, and see what their scores are. It’ll show you your core web biometric scores as well as your overall PageSpeed score and then the recommendations that they give.
Joe Casabona: Got you. You mentioned PageSpeed Insights. That’s Google’s tool. So it’s important in the context of Google’s ranking because that’s the rubric they’re using or whatever. There are also other page speed tests like GTmetrix, right?
Andy Schaff: Yeah.
Joe Casabona: How important is it to kind of compare and contrast? Do you always go with one over the other? Or do you just look for commonalities in both and like, well, if I fix these, it’ll be good?
Andy Schaff: They’re pretty much all going to come back with the same stuff at this point. That’s why I do include webpagetest.org because I think it’s got some testing on there that has some more server side stuff that PageSpeed Insights isn’t necessarily hitting that I like. It’ll tell me immediately if it’s using a CDN, which PageSpeed Insights doesn’t do. It’ll tell me stuff about keepalives and some of the gzip compression, or just compression of the transfer of assets. Those are the main two I like.
I think GTmetrix also does things similar to webpagetest.org. I would say definitely use more than just PageSpeed Insights. Don’t just use that. I know we get a little beholden to Google sometimes. But you kind of have to use it because it’s the leading… with it being a ranking factor and all, you definitely want to know where you’re standing as far as Google sees you. But I would say also lean on at least one other tool.
Joe Casabona: Because PageSpeed Insights can help you improve the ranking criteria. But maybe WebPageTest or GTmetrix will give you things to improve the user experience. And ultimately, you want to rank to get users to have a good experience on your site.
Andy Schaff: Absolutely. Absolutely.
Sponsor: This episode is brought to you by TextExpander. In our fast-paced world, things change constantly, and errors in messaging often have significant consequences. With TextExpander, you can save time by converting any text you type into keyboard shortcut called a snippet. Say goodbye to repetitive text entry, spelling and message errors, and trying to remember the right thing to say. When you use TextExpander, you can say the right thing in just a few keystrokes.
TextExpander lets you make new approved messaging available to every team member instantly with just a few keystrokes, ensuring your team remains consistent, current, and accurate. TextExpander can also be used in any platform, any app and anywhere you type. So take back your time and increase your productivity.
But that’s not all it does. With its advanced snippets, you can create fill-ins, pop-up fields, and more. You can even use JavaScript or AppleScript. I can type out full instructions for my podcast editor, hi, Joel, in just a few keystrokes. Another one of my favorite and most used snippets is PPT. This will take whatever text I have on my clipboard and convert it into plain text. No more fighting formatting is I’m copying from Word or anyplace else.
Last month I saved over two hours in typing alone. That doesn’t even take into the account the time I saved by not having to search for the right link, text, address, or number. You have no idea how many times I want to type out a link to a blog post or an affiliate link and I can’t remember it and I have to go searching for it. That generally takes minutes. But since I have a TextExpander snippet, it takes seconds.
TextExpander is available on Mac OS, Windows, Chrome, iPhone, and iPad. I’ve been using it a lot more on my iPhone lately because I’ve been working from my iPhone more because there are days when I’m just not in front of my computer right now. If you’ve been curious about trying TextExpander or simple automation in general, now is the time. Listeners can get 20% off their first year. Just visit textexpander.com/podcast and let them know that I sent you. Thanks so much to TextExpander for sponsoring the show.
And now let’s get back to it.
Joe Casabona: So we touched on—I guess we more than touched on—Apache versus Nginx. You just mentioned the CDN. Again, as a developer, these are things that I understand. As a small business owner, we’re speaking a whole other language to them. Maybe they hire a development firm, or maybe they’re trying to do it themselves. Should they ask for an Nginx server do you think? I guess what’s the action that a small business owner can take to make sure they have the right things in place?
Andy Schaff: It’s certainly more challenging because they’re going to have to do some research on their own. But what I will say right off the bat with that is don’t skimp on hosting. I mean, unless you’re really, really small and you don’t have any budget, I would suggest some kind of environment that is not a shared space, where you’re sharing resources with other websites. The response times that you will get on those kinds of hosted environments are just not nearly as good as dedicated resources.
Like in the WordPress world, in my mind, it is absolutely worth paying the hosting cost that it would like. Small business is $10,000 a lot for hosting for a year. You have to kind of put that into perspective. You know what I mean?
Joe Casabona: Yeah.
Andy Schaff: Because if you’re selling something on your website and your website is usually one of the main converting factors for your business, if not 100% of your business, you need to make sure that it’s up 99.95% of the time, that it has good server response time. So pay that money for the hosting.
There’s a lot of options out there between Pagely and WP Engine and some of these ones for WordPress. Specifically, that create a good environment, that give you some of that backbone, they give you good server response time. They almost always have a good page caching technology installed by default, like a Varnish or something along those lines, or a Memcached. You know, things of that nature. That would be my recommendation.
From there, I think you have to do a deeper dive into what the components are that make up fast sites. That’s a harder aspect. It’s easy for me to talk about it because I’ve been doing it for a decade plus. But a good piece of knowledge is that site speed isn’t just like one thing. It is a whole bunch of things that come together, that incrementally improve your site, that make it better.
So low-hanging fruit, make sure you’re optimizing your images before you putting them up. That’s one of the big ones. Because if you’re uploading a 4 megabyte file, and that’s the file, you’re putting on your homepage, that’s 4 megabytes on top of everything else that every user has to download every time.
Joe Casabona: Which is probably like 4000 times the size of the HTML being served, right?
Andy Schaff: Yeah. A good rule of thumb is if the original file, the original image is like 4 megabytes, it can probably come down to somewhere between like 1 and 400 kilobytes when it’s compressed. You think about how much savings that is. That’s a lot. Now, when that starts happening with more than one image, all of a sudden… that’s a huge performance gain. So that definitely like the low-hanging fruit one.
I would say page caching is another one. And you have to be careful with e-commerce sites with page caching just because it’s more interactive, their sessions and whatnot. But in general, page caching is another huge one. What page caching is, is it says, a request comes to the server and typically the server has to say, “Okay, here’s a request, I have to compile it…” Let’s just take a WordPress site. WordPress is run by PHP. So PHP has to fire up, it has to talk to the MySQL database to get all the data that builds the page, has to render it all together, and then spit out the HTML.
With page caching, that request comes in the first time and that generated HTML gets put in the cache. So when the next request comes in, instead of doing all the PHP processing and the grabbing from the MySQL database, it just says, “Here’s the HTML, paint it to the browser.” And there it is. And that’s a huge performance gain.
Joe Casabona: Yeah. It’s almost like building a Lego set and then destroying it, and building again the next time you want to play with it. Versus building it and keeping it built, right?
Andy Schaff: Yeah, absolutely.
Joe Casabona: Real quick, just for completeness and show notes, you mentioned a couple of hosts that you would generally recommend. I know everybody has their favorite host. But what were those again?
Andy Schaff: I threw up Pagely and WP Engine. Pantheon is another really good one that we like. I’ll keep it at that. I don’t have a ton of experience outside of those. I have touched on Media Temple, but that was before GoDaddy purchased them. But I know they have a dedicated WordPress hosting. Some of those come with caveats, like what plugins you can install and whatnot. You have to take a good analysis of what you need and what you may not get from some of these.
Joe Casabona: Yeah, I would agree there. I would say generally if you want a pretty typical, we’ll say WordPress configuration, like WP Engine is really good for that. If you need really good development workflows, I think Pantheon is probably the best option for that. I host all of my websites on Nexcess, which is owned by Liquid Web. They have their managed WordPress and WooCommerce offerings that I like.
I mean, what you said there and I want to bring it back for this reason too, you said: “don’t skimp on hosting.” I think that’s so important. Because it’s like the difference between if you had a physical storefront, like having this tiny hole in the wall with a sheet for a door where everybody could just rob your store whenever, or being in a nicer district where there’s good foot traffic and security.
I don’t think a lot of business owners today who have only online businesses realize just how cheap starting a business is. So if you’re saving a ton of money by not needing a storefront, spend that money on hosting because again, that’s… you mentioned $10,000. I’m on excellent hosting that’s like &150 bucks a month. So that’s less than $2,000 if I did my math right there. And it’s so worth it that I don’t have to worry about if my site’s up or if it’s really slow, I’m trying to sell services on that site and on those sites. Again, longtime listeners will hear me get on this high horse multiple times. But it’s so important. So I’m really glad you mentioned it.
Andy Schaff: Yeah, absolutely.
Joe Casabona: And then I’ll just add from the front end these are things you probably also are aware of. I like talking about critical CSS because I don’t see an easy way in WordPress to do that unless the theme implements it. But if you have a developer who won’t do this on the fly on your live site and thoroughly test it, you just put the minimum amount of CSS in the head of your site and then load the rest in the footer. That way, there’s no… it’s called render-blocking scripts or render-blocking assets.
It’s like a river trying to go through a giant boulder versus a bunch of smaller pebbles, I guess is probably a good way to analogize render-blocking assets. You don’t want one thing holding up everything else, because that will reduce or increase the time for largest content full paint and first content full paint.
Andy Schaff: Yeah, absolutely. Like when I first started even getting into site speed stuff, eliminating render-blocking resources wasn’t even a thing. It’s become much more of a forefront need in best practices for site speed in the last I’d say like five years. But it’s so important.
I recently or somewhat recently wrote a blog post just kind of putting in what I considered the tiers of sites speed, like what are the most important like a tier-one items, which is optimizing images and reducing response time and leverage browse and caching and things like that. And then tier two. And I feel like eliminating render-blocking resources is pretty much like a tier-one at this point, because Google’s going to knock you with all of its metrics and its tools.
It’s pretty much whenever we do an audit, if they need help, guaranteed they need render-blocking resources help, which is like implementing a critical CSS and asynchronous loading system is how you eliminate render-blocking resources.
Joe Casabona: Part of that problem is probably you have all these tools. You have Google Analytics, which can go in the footer. But some, Hotjar, for example, can’t. It has to go in the head, which is insanely frustrating to me. I will disable that as soon as I no longer need it, just because I’m like, “Why? Why do you need to be in the head?”
Andy Schaff: For sure. That’s one of those items where we put on audits too is just really having the third-party scripts analyzed. It’s one of my frustrations to the developer because we create this site and we optimize it for all the speed, but our analytics and our marketing teams are like, “Okay, well, we need GTM,” and then basically just opens up the world for them to just be like, “We’re going to drop in this script, and this script…”
Joe Casabona: Facebook pixel, everything, the chat, and we need intercom.
Andy Schaff: Yeah. So there’s definitely a little bit of a battle there. But I think I understand the importance of it as well. People want their metrics, they need their metrics to be able to analyze what’s happening and to be able to make informed decisions. I think it’s just a matter of coming together and making sure that basically all the scripts on there are absolutely necessary. If you’re running Hotjar, run that test for a week or whatever you need, then turn it off and make sure that you’re being vigilant about those things.
Joe Casabona: Also, another tip on Hotjar is that if you don’t have a ton of traffic, Hotjar is not the most useful tool on the planet. Like if you just have a bunch of people going and looking at the headline and leaving, that’s not going to tell you anything. So now you’re just adding a render-blocking resource for no reason because you’re not really getting any interaction there. Like Andy said, think about the tools you need.
Also, having Google Analytics, fine. You don’t need like four analytic tools. Think about what you want to measure and use the one that works best for you.
Andy Schaff: For sure.
Joe Casabona: Awesome. Well, where are we at? We’ve been talking for a while. This has been a great conversation. Before we go, I do need to ask my favorite question, which is, do you have any trade secrets for us?
Andy Schaff: Yes, trade secrets. I guess I would say keep working at it. I know I touched on this a little bit earlier. As a web developer, just keep continually testing the sites that you’re working on and really understand what each one of them means as far as… because they’re helping the site in different ways.
I mentioned this earlier, but site speed or page speed is a combination of a bunch of good practices. So understanding and encompassing those and bringing them into the plan goes a long way. As a web developer, if you’re being proactive about that, you can bring that up in conversations with your internal team, with the client and you can sound really smart, to be honest. If you’re being ahead of the game on that and paying attention, you’re going to look good, because you’re helping a vital aspect of that site. I would say that.
And then I also said earlier is don’t skimp on hosting. I mean, it’s such an important thing. The server response time is massive. It runs those two core web vital metrics. If you’re running on one core and two gigabytes of RAM, I’m sorry, you’re going to get destroyed by websites that have eight gigabytes of RAM and two to four processors. There’s just no getting around it.
Joe Casabona: When you mentioned that, I was going to bring this up too, but it’s a… I’m big on analogies if you haven’t noticed.
Andy Schaff: I have.
Joe Casabona: But shared hosting is kind of like the apartment building or the college dorm. If one apartment’s on fire, then your apartment has a high probability of getting burned down as well. Or if there’s like a single heater I guess in the whole building, it’s not apartment temperature controlled.
Andy Schaff: Absolutely.
Joe Casabona: Andy, this has been great. Thank you so much for your time. I really appreciate it. Reminder that in Build Something More, we’re going to talk about kind of what it was like going through an acquisition at a company that Andy’s been at for a long time, as well I’m going to ask him about some of his records behind him.
But if you want to get that, you can head over to buildsomething.club and sign up for the membership. It’s five bucks a month or 50 bucks a year, get two months for free and you get ad-free extended episodes. But for now, Andy, where can people find you if they want to learn more?
Andy Schaff: Portent.com.
Joe Casabona: Fantastic. I will link to that. And Andy’s Twitter is @PortentAndy. So I will link to those things and everything we talked about, lots of links in the show notes over at howibuilt.it. Andy, thanks so much for spending some time with us today.
Andy Schaff: Thanks, Joe. Really appreciate it. It’s been a great conversation.
Joe Casabona: Awesome. And thank you to everybody listening. Until next time, get out there and build something.