Episode 9 – Improving Your Website Performance

the seo for photographers podcast logo

This episode is all about how to improve the performance of your website. We talk about how to properly test your site’s performance, which metrics to actually look at, what tools to use, and how to start fixing issues. There are a few issues you can fix on website platforms like Squarespace / Wix. Then we dive deeper into issues that can be fixed on WordPress, what plugins and tools to use, and share a service that will take care of performance optimization for you.

Full Blog post and Youtube video coming soon.

Testing Tools Mentioned:

GT Metrix
https://gtmetrix.com/

Pingdom
http://tools.pingdom.com/

Pagespeed Insights
https://developers.google.com/speed/pagespeed/insights/

Webpagetest
https://www.webpagetest.org/

Hosting

WordPress Hosting Recommendations
https://www.fuelyourphotos.com/hosting

WordPress Plugins

Perf Matters (WordPress plugin)
https://www.fuelyourphotos.com/perfmatters

Short Pixel (Image Compression Tool +plugin)
https://www.fuelyourphotos.com/sp

WP Rocket (WordPress caching plugin)
https://www.fuelyourphotos.com/wprocket

Pagespeed Optimization Service

WP Speed Fix
https://www.fuelyourphotos.com/wpspeedfix

Transcript

Corey: Hello, welcome to episode nine of the SEO for photographers podcast, and today we are going to be talking about one of the most common questions that we get that really blows people's minds and makes them super confused, and that's going to be performance optimization. And I'm just going to tell you right up front, this episode's going to get a little bit technical and we're going to focus very heavily on WordPress performance optimization and saying that we're going to actually try to dig into a few of the other platforms that tips that might apply to everyone else right up front.

So if you're a Squarespace, show it or other platform user. Stay tuned for a few minutes and we'll try to cover some of the tips and tools that will apply to you. And then the rest of the episode we're really going to. Focused primarily on WordPress. All right. Dylan, you're the expert on this. I'm going to actually be kind of interviewing Dylan on this episode because he has been digging hardcore into performance optimization over the past few weeks and what you probably learned in the past two weeks quite a bit, haven't you?

I mean, you already knew these things, but you've definitely refreshed. Totally.

Dylan: So we've had a few client sites and personal sites that we realized were performing not where we thought they should be. if people come to us as experts, we, we should probably have a fast website, especially if we have like guides on how to improve your page speed.

so I, I dug in to the feel of your photo site. I dug in on a few clients sites. And they are mostly based on WordPress, using different page builders and platforms and themes and, different hosting companies and stuff like that. So I, I really dug in and, and. Looked at what were the common threads that should be fixed across all of these sites.

Corey: So before we even start digging into the tips and everything, tell us a little bit about why this is important, what, how important is page speed to rankings?

Dylan: Totally. So I think one common misconception is that across the board, improving your page speed is going to improve your rankings. That there's a direct correlation there and that everybody needs to concentrate on this.

And. For a few years, we've, we've really had the case that, that's not true and that photographers need to worry about page speed to a certain extent, but that they're probably overreacting. And I think that we. It's not that we were wrong, but I think that that is slightly changing. so Google does use your desktop page speed as a tiebreaker.

so they're looking at historical data for your site if they have it, or synthetic data using a tool like . Page speed insights, which is based on lighthouse to estimate how long your page takes to render for the user. And if everything else is equal and you come out in at tie for position seven with another site, but your page speed is slower than theirs, they're going to outrank you.

In addition to that, they also have a penalty penalties for sites that are considered slow on mobile. And if you've ever used page speed insights, you'll realize that that is quite easy to have

Corey: it. Like most sites are slow on almost all sites.

Dylan: Exactly. It is very hard to have good mobile performance and we're going to talk about this a little bit later.

Corey: Yeah. I think it's an interesting thing. You've kind of hit this, but like my mindset has shifted, especially since I guess around November, whenever it was, I went to the webmaster thing at Google. and, and I just heard every one of these lead developers who are working on Google search, talking about speed and talking about.

Amp and just how important it is to Google for their product experience to be excellent for users, which includes the click to the website and how long it takes for that website to load. And so to Google, what they're thinking about is the overall experience of a user who's performing a search. And again, that follows through to the website that they visited.

And if that experience is bad, if that takes too long to load, if they're bouncing back, that's giving the Google user. A bad experience, and they don't want that at all. So Google doesn't obsess over speed at the same time. It's not this like, like Dylan said, it's not, you don't need to. Fix your speed, get it lower and lower and lower.

If you're under a second, then you're going to rank on the first page. It's not necessarily like that. It's, and I was even looking the other day in a competitive market, someone was asking me about page speed and they were saying, my site's loading in like three seconds. I would like it to load faster.

They're basically trying to improve their rankings, and I looked at every single site that ranked above them. And Google search and their site was at least twice as fast, and it's sometimes four times faster than every person that ranked above them. Yup. So it's not the case that there's this direct correlation with faster sites being at the top of Google, but Google does obsess over speed.

Yeah. Especially with mobile. And there's a lot of other things that go into it. Like don't say, we'll get into that a little bit more. for now, let's go back to. some tips and let's, let's start with things that apply across the board, to as many platforms as possible. Is there anything in particular that comes to

Dylan: mind?

Yeah, so I think. The first tip is going to be image handling. And this should be kind of a no brainer, like if you're a photographer, how many images you have on your page, how large they are, an actual pixel dimension and how well they're compressed is going to be extremely important. and so we'll, we'll talk a bit about that.

I think one feature that I just thought of as you mentioned this is if you are using something like a slideshow to display these, that can really be a performance hindrance. And that's something that you can just delete on most platforms. So instead of using a slideshow, just show a single image. But yeah, let's, let's jump in.

Yeah. So

Corey: I guess there's a lot of things that are, choices that you can make that, you know, maybe even if you're not a WordPress user, you listened through this, it could help you start thinking through, can I make choices that will. Yes, potentially impact my design and not give me the features that I was looking for, but you know, are those features really worth the trade off and performance?

so besides image handling, so obviously I think that's important for all photographers. And do we want to wait and talk about the tools to handle images when we dig into that section or, I mean.

Dylan: Yeah, I think we can just mention right now our favorite image compression tool is a tool called short pixel.

this, they have a web based tool and they also, I believe, have a client or a, it's probably web based is probably the best bet.

Corey: Yeah. SAP or whatever. I think it gets kind of

Dylan: complicated. It's command line. So, yeah, that's, that's our best tool. I've heard reports I haven't tested yet, that the compression coming out of Photoshop has improved greatly.

so that's worth testing as well. We, we typically don't recommend a tool that's very common called JPEG mini. their compression is really great for archiving photos and for delivering your to your clients and printing them, but it's not going to be enough for web web

Corey: use. So two other things that come to mind are, fonts and also like third party scripts, including things like, form in beds or Instagram widget or any other kind of thing that you're embedding on your site.

What are your thoughts on those things?

Dylan: Yeah, I mean, most platforms give you the ability to use custom fonts or to use a lot of their built in fonts. And I often see people use like six or seven different fonts on a landing page because they want a specific font in their footer or a specific font for a heading or just one off.

Placements around the page. Every time you use an an additional fact that is not a system font, which means it's preloaded on the user's computer, you're making them download that font. And typically fonts are what's called render blocking, which means they're not able, the, the browser is not going to show any content on the page until that font is fully downloaded.

So that's a main, it's a big issue for page speed, but it's. Most important. It's, it's really, there's a difference between the actual page speed where a page is fully loaded and where a user thinks something is happening. And the sooner you can make something appear on the page that makes them realize that something's coming, it's worth the wait.

I'm gonna stick around the better. And so blocking the entire render of your page to wait for a font is not a good look.

Corey: Yup. So when pro-tip here for any platform is try to minimize the usage of fonts, typically one or two fonts can actually work very well. I've started to see more and more designs that are just using a single font, using different weights of those fonts.

A lot of designers and font. Makers and creators have realized that as well, and they're making their fonts a little more dynamic, having more weights available. The weights also take time to load, like every variation of a font. However, if you can choose a few variations of the same fight, you're probably gonna have better performance than multiple fonts, I would think.

Is that correct? Totally.

Dylan: And I mean, another example I've noticed on a lot of sites is . I saw one site that was using a full icon font in order to have one email icon

Corey: in there, like font

Dylan: awesome. Or like fun. Awesome. And so be careful when you add a plugin or a font to handle that sort of thing. just making sure that it's absolutely necessary because that font icon pack was the same size of the other four fonts combined they used on their site.

Corey: Just to get one email icon for one icon. Fun. Okay, so what about third party scripts?

Dylan: Yeah, so another issue that we see quite often is. People really want to get their data to use for either ads or improving their landing pages or better contact form information. But it comes at a cost. And so we're not saying that you need to get rid of all of these things, but just that you should know that there are trade offs involved.

So you might be slowing down every single page load for your site ever in order to know that somebody's on a landing page or how they're interacting with that page. So. The tools like Hotjar, Facebook pixels, Google analytics, any plugin that you inject or add onto your site has the ability to possibly slow your page speed down, even if it's loading after the fact.

It's still data that you're, the browser has to download. especially on mobile. It can make your, your site feel sluggish. so you just really need to watch out for those third party

Corey: tools. Okay. Cool. So I guess just in general, kind of wrapping up this little beginning section that will apply to everyone.

you need to be aware of the choices that you make and how they can impact speed. And in most platforms will allow you to simplify or strip down, some of the features to allow you to improve performance. However, sometimes. There's just not much you can do. Oh, there was one other thing I wanted to mention it for Squarespace.

The difference between 7.0 and 7.1

Dylan: yeah, totally. So we haven't tested this extensively, but I have, I have dug into one 7.1 site and test it compared to its previous version on 7.0 and one of the main problems that if you've ever done a. P as page speed test on Squarespace sites is that they have a huge amount of Java script, and that's on every single Squarespace site that we've tested.

A JavaScript blocks render, like we talked about earlier. So your page is just white and blank until that's done with the brother's done rendering that, They were able to make that package much smaller with 7.1 and I believe they're doing something that's technical called tree shaking, where it only brings in that the JavaScript that's absolutely necessary for that page.

So this makes their page load in in general, across the platform much better. They've also implemented lazy loading, so it's only loading the images that are visible on the screen or about to be visible on the screen as the user scrolls. This greatly reduces loading time, especially on photo heavy or image heavy sites like photographer sites.

So in general, massive, massive improvements going to 7.1 for Squarespace users.

Corey: Well, I've heard a lot of people saying that they don't like 7.1 because they like stripped out a lot of options. Yup. I'm assuming that probably also helps performance though. Just like we were saying, sometimes simplifying is the way to solve problems and maybe that was part of the reason why they did that.

they, they want things to be simple and, perform better, but they knew they had to take out some of the options to make that possible. Yep. So anyway, something to think about. Sometimes you have very. Heavy limitations because of your platform. but usually there's something you can do. whether it be image optimization, reducing third-party scripts, reducing number of fonts, or taking out things like slideshows in favor of a single image or taking out background videos or whatever it is.

Some of these things will apply no matter what. And there's really, you know, you're going to run some tests. Speaking of which, we'll run down the tools that we like to use the test next. but sometimes you'll run these tests and you'll, you'll see that it says you need to do X, Y, and Z. And it's just not possible to do on certain platforms, especially if you're not a developer.

Maybe if you're a developer and get like really hacky and use CloudFlare to like intercept the request and do some weird stuff like that. Or maybe, maybe, but in general. do the best you can with your platform if you're on WordPress. However, we've got some more tips coming. First of all, let's, let's talk about tools for testing your page speed.

And I want to give a little, caveat here, or I've been a member of this disclaimer. Yeah, I, I love these tools. They're great for diagnostics. However, if you're not a developer, if you're not someone who plans on learning the ins and outs of. How browsers work, how caching works, how server works. like all of these things that you need to know to understand the tips that these tools are going to give you.

You cannot use these as a complete guy. You cannot obsess over getting everything green are all check marks are all 100% scores. If you're gonna obsess over that. You need to be willing to take the time to really research and learn the things that it takes to fix all of these things. Or theoretically, you may be able to hire someone to do some of those things.

We'll talk about that in a little while as well, but just know. These tools should primarily be used to help your decision making their diagnostic tools. Some things that they'll tell you do not apply in every situation. It's not always important to get 100% on everything, but they will be very helpful in revealing a potential problems.

So that being said, what are the tools that you like to use, Dylan? All right,

so

Dylan: GT metrics.com is probably my go to a tool to really quickly. Just get an idea of where their page loading time is. Like at, like Corey just said, not a hundred percent accurate. I'm not like really basing much off of that number.

but it's, it's good to know, and I like to see photography sites on GT metrics below three seconds. I do not pay close attention to their letter grades, their scoring system with like why slow and page speed. I'm not worried if it's an F or a D, because I know that there are very huge limitations to what that tool is looking at, what it's looking for.

It doesn't always pertain to the site. and then I quickly look at the waterfall. And so that's on GT metrics. When you put in a URL, they're going to give you a list of every file or every resource that loads on the page in order. and so I'm looking on that to see are there. Any files or resources or scripts that are holding up the loading time or taking too long, or if I sort by size, if they're just too large of images or too to larger files after that, I use a tool called Pingdom.

And that's at tools.pingdom.com very much the same as GT metrics. I don't really care about its loading time, but I do like it's display, its waterfalls, easy to look at. Nice. And The overall page weight is an easy metric to look at there. for photography sites, we generally like to see sub three megabyte and typically best if it's in the one to two megabyte range.

Nice. Yeah. After that page, speed insights, that's a Google tool and you put your URL in that and it's going to give you both a desktop and mobile score, and then it's going to give you a long list of. Things you can improve. And one handy feature is that it tells you their estimation on how much of a difference each change will make.

So it might say that changing your image file sizes on mobile is going to save six seconds in milliseconds from your loading time. So you can, you can get a good idea of how much you should actually, how much time, money, energy you should invest in improving each aspect of the site. And then the last one is called a webpage test.

That's at webpage test.org and this one's cool because you can not only get the waterfall and the loading time, but they'll record a video and you can set a different connection speeds in different device types in different locations, and then get a video of how your page renders. So you can see, is my page white for three seconds?

And then people see the entire. A page display, or is it like slowly putting in a title and a box and it shows that something's coming and then it puts in the images after that? Like you can, you can get kind of nerdy on on how you render the page. Nice. So yeah, those are the four.

Corey: Sweet. I mean, there's other random tools that we'll use sometimes, depending on what kind of.

Issue or diagnosing some of these things. There are specific tools, like, I used to use one that was called time to first bite, but there's like another tool that we found that was like . Even better. Sometimes there's like specific tools that'll tell you specific things, like how long is the time to the first bite or why no padlock.

If you're trying to diagnose some HTTPS issue, which technically isn't really necessarily, page speed, but it could apply to page speed if like you don't have it, if you don't have HTTPS working everywhere, then you might not have to working everywhere. And yeah, so like there are some performance implications to some of these other kinds of tools that we could use, but those are the main four.

That sounds like a great place for you to start again. Don't obsess over them. Use them to help you learn. Most of those tools will have little buttons you can press like a question Mark or something that will try to explain it. Still going to be pretty technical. Use Google. Google is your friend. It's just going to take hours of research to like really understand some of these things, but

Dylan: I realized, I realized I forgot my most basic tool.

Corey: that

Dylan: the Chrome dev tools, so

Corey: if you just hit basic but still pretty advanced,

Dylan: it is very advanced. but if you just hit F 12 or hit right click and inspect and then go to the network tab and you can turn on recording and refresh the page, it's going to show every file as it downloads. So yeah, basic tool, super easy.

Not easy, easy to use, not easy to understand.

Corey: Yeah, I like it. All right. Well, let's go ahead and start digging into WordPress performance optimization. Now that we're 20 minutes into the episode, we'll get into the meat and potatoes of if you're on a WordPress site, there's some specific things that you can do to really improve your performance, and it all starts with quality hosting, and this is a decision you.

Probably made before you ever set up your site, and you may have made this years ago and it could still be hurting you. And I want to go ahead and say that I have so many people when I talk about hosting, who tell me, well, I just renewed for two more years, so I'm going to have to wait until that's over before I can fix my hosting.

And I'm like, not

Dylan: worth it.

Corey: It costs you $200 and we're talking about the difference in loading in six seconds versus three seconds. You should just do it right now. Like you need to fix this problem. Realize that don't, don't have that like sunk cost fallacy where you're worried about the fact that you just switched some, if you really push hard, a lot of these hosting companies will give you a prorated refund even if they say they won't.

I had that have been the other day. Someone was on Bluehost and they had renewed, and they changed their policy. They used to do parade refunds for everyone. Now they don't, after 30 days, they will not do a refund according to their policy. However, I was like. I pushed really hard with their customer support, and after about 15 minutes, they're like, fine, we'll give you a refund.

Nice. so sometimes you can get those refunds. and we have a blog post about the hosting that we recommend, so we're not going to get too deep into this. but I will tell you that we personally are using cloud ways for pretty much all of our main sites that we own. cloud ways is a bit more.

Technical, and there's some things I've come to dislike about cloud ways over the past few months. Primarily the fact that. They, they claim on their landing pages to be managed, but it's not at all managed. In fact, even the monitoring that they have that is supposed to send you an email update for things that are down, I have found is not reliable.

I went and the other day and checked on my email settings in my account and I looked and it had all these notifications that said ahead, emailed me, and then I went to my email and like filtered. I looked in every folder, spam, everything. Couldn't find these emails. The email was right in the system, and so like for some reason that didn't work.

I had a bug where it like my card expired it, I needed to update it and I did it in the system and it said that it worked, but then came down to it and then my site went down instead of renewing. And then there's like these other little things I don't want to make Codway sound terrible because actually for the price it is about as good as it gets.

For. The low quality of the servers, you're basically able to run on world-class servers that are hosting some of the biggest companies in the world for almost nothing. I mean, you can start at $10 a month and for that kind of, that level of quality, that's ridiculous. I mean, I mean, you can get it for even cheaper if you, if you're a server admin and you can like spin up a cloud waves or I mean a, what's it called?

Digital ocean droplet for five bucks, like for sure. But anyway,

Dylan: what is the difference in five and 11 is so worth it?

Corey: Yes, exactly. It's, it's relatively easy to use if you have any familiarity with WordPress and with hosting, I highly recommend cloud ways as long as you're willing to kind of. Set up your own monitoring and make sure that everything's good.

it's really, it's great. WPX is, kind of what I recommend for people who don't know anything about WordPress or hosting and they want something that's actually managed, it's still going to be lightning fast. They have multiple, Data centers around the world that they use. And it's really great.

I mean, I really love the APX. It's gotten incredible reviews, some of the best for any hosting, like across the board. So third PX is great, and then psych rounds, if you're looking for. Something that's kind of comparable to Bluehost. It SiteGround offers shared hosting for pretty cheap, especially for their first term, what they call it.

So if you pay up front for one, two, or three years, you lock in that first price. And I think it starts as low as like four or five bucks, maybe six, I don't know, something really low like that per month. but it is shared hosting and. Eh, there's problems that come along with that. I, I'm not in love with psych rounds, but I know a lot of people who are very happy with it and say the customer support is great.

And I used it for years and never had any issues. So we still keep it on our list as kind of a third option for sure.

Dylan: If those are the, the main three. so once you have quality hosting, we talked about image compression a bit. Earlier, but that's, that's probably one of the next steps. I guess. We skipped the fact that you really need to be on a quality theme, and pick a theme that isn't adding extra features that you don't need, or too much CSS or too much JavaScript, for PR, all that performance or favorite themes, or are very simple and they're like, Astra or.

Elementary is, hello? there are a handful of really lightweight performance oriented WordPress themes. Yeah.

Corey: But they're going to be really simple. There's not gonna be much to them. So most of those themes rely on using some sort of page builder or having an extremely simple site. I mean, even using something like 20, 20, the built in theme for this year is a decent option.

Astra, I do like Astro because if you use Astra pro. you can do a lot with Astra, Astra pro plus Gutenberg. they even have Gutenberg templates that would be included if you buy Astra pro. So there's a lot that you can do with Astra, and it is one of the best performing themes. and they've got amp in mind.

It's on that, like, what's that one website that has like official, like Antioch themes and

Dylan: sdp.org.

Corey: Yeah. Okay. So, so one of the only themes on that list that I like in general stay away from theme forest. Almost all their stuff is bad. Devi is terrible. Yup. There's a couple others that are popular with photographers who have some major performance issues that are very hard to overcome.

I won't mention names. but yeah, just know that your theme is going to have a lot to do with performance.

Dylan: Yep. After that, image compression, for WordPress, the short pixel plugin is the way to go. the plugin can. Compress and resize if you have too large of images, your entire media library.

So every image you've uploaded before this plugin, it has cheap pricing, I believe. It's like, I think it, is it $5 for 20,000 images or something like that?

Corey: It may be 10, but it's very low.

Dylan: Yeah. Yeah. so it, it goes through your entire media library and it compresses and resizes those images, and then you can have it compress and resize any image you upload after that.

So it's. Super be like, once you install this, you're, you're practically good to go.

Corey: Yeah. There are some settings that I think are important to get right in short pixel. The primary one is you probably want to use the glossy setting, not lossy. and that's for, for JPEGs, like photographs. I think that it's the best balance that I've ever found.

And a lot of people might be asking or thinking, what if I'm using . Image Phi or smush or whatever this other plugin is. It basically does the same thing. We've tested almost all of them, and we still land on short pixel, basically every time. A for a lot of reasons. One being that I like the algorithm they're using for the lossy, I mean, sorry, glossy setting.

Also the web P handling, so enabling web P is really easy. there's a few other features for short pixel that I just think are superior. Some of the other plugins or. I dunno. It could just be personal preference. I like the fact that they have the web tool that's really easy to use or the option to do the plugin and several other options.

I like short pixel a lot.

Dylan: Yup. Hard to beat after that image sizing. So you need to get recommendations from your theme or from your designer. there, there are technical ways to find the maximum inch dimension for your site, but, you just need to make sure that you're not uploading photos that are too large.

And if you are putting large photos that WordPress is making thumbnails that are the proper size and using those thumbnails in the, the place of the full size image.

Corey: Yep. that's again, one of those things where it's going to depend on your theme and you had to figure it out. But just, just know, like, do you have any default.

Yeah. Sizes. That might be good.

Dylan: I think for 20 for sure, for like for a homepage full with or large display images, I would probably be somewhere in the 2200 pixel range. Does that make sense to you?

Corey: Yeah, I would. It's hard. Like I looked at analytics not that long ago to see what was the most popular screen size.

It's tough because retina doesn't register correctly in analytics. But I mean like typical still 1920 by 10 80 is like the most popular monitor size for desktop. Yup. You've got to think about the fact that on mobile it's tiny. You know, it's less than 700 pixels wide. Yup. Yeah. 2000 to 2,500 I think is probably still really safer right now.

Sure.

Dylan: We, we'd come across sites on a weekly basis that have full size out of camera, like 22 megapixel webs images, so just don't do that. Yup.

Corey: Exactly. All right. Speaking of images, what. When they are actually on your site. we can, you can use something called lazy loading. Tells a little bit about lazy loading.

Dylan: Yeah. So this has come a long ways. A lazy loading a five years ago would mean that you come onto a website and you see these like coming soon or loading, gifts that are just sitting there and spinning. nowadays it's commonplace to have a really lightweight. Lazy loading function that looks in the viewport.

So it, that's the part of the website that the user is actually seeing and it sees if they're scrolling, what is about to come into that viewport and it loads it before the user gets there. so it's, it's making sure that any images that are not on the screen aren't loaded until just before they're needed.

this is, this works really good on fast internet connections on very slow internet connections. users can see that, but it's helping them with not having to load massive pages. So there's a trade off there. In general, I think that it's a feature that every photographer should be using.

Corey: And how would you enable lazy loading?

Dylan: Yeah, so we, we've recommended performance plugin called WP rocket, and that has a great implementation of lazy loading. outside of that, a three lazy load is a good plugin and lazy load for videos is great for lazy loading YouTube videos. We'll also mention another plugin called perf matters. that plugin gives you the ability to use the browsers, native lazy loading.

most browsers now support a lazy loading automatically. So, Chrome and I believe Safari now support it. So,

Corey: at that point, basically it's just a matter of adding an HTML

Dylan: attribute. Yeah. Yeah. Yeah. So it just has to have the attribute, a lazy or like load equals lazy and that little text snippet tells the browser.

Exactly what to do with it.

Corey: So now that that's default in the browser, I'm kind of surprised. WordPress hasn't made that like a default option. You can just check.

Dylan: I think it's coming. I think I actually saw that WordPress in one of the next versions. It's going to have that.

Corey: That would make sense.

Dylan: Yeah.

But this is, I mean, this is another benefit of WordPress. They're working on that, whereas a Wix, Squarespace, all the other platforms, it's probably going to be down the down the pipeline awhile

Corey: and even while you're waiting, you can add a simple plugin where you just check a box

Dylan: and it's fixed. Exactly.

Corey: I love WordPress sometimes.

Exactly.

Dylan: So yeah, once you had quality hosting. And do you have your images properly sized and compressed and they're loading properly. The next step is caching. Do you want to talk a little bit about caching

Corey: and not really. Okay. I'll let you talk about caching. Nice. I like talking about cash, but yeah, exactly.

Different than this kind of cash.

Dylan: Yeah, so caching pretty much means that one of, one of the drawbacks to WordPress is that. The WordPress software has to create the HTML for the user. Every time a page is loaded by default. what caching does is it says, Hey, every time a user comes to this homepage, we're generating the exact same file.

Why not just generate this once and then serve that same file to every user? and so there's three different levels of caching. It can be handled on the server itself. So at the hosting level and cloud ways, and many other hosts use a service called varnish, and that is going to speed up your site across the board.

It every time you do implement caching, you're also going to have to have issues with the cash being cleared. Every time you make a page change. And sometimes if you see a broken page, you need to clear the cash. But VR varnish or server caching is something to know about. Know that it exists, and just look for it when you're sending it for hosting in their technical docs or ask their technical support, Hey, do you implement caching?

many of the hosts will automatically upload a, or give you a WordPress plugin, for their host. cloud-based has breeze. SiteGround has this site. W what's there?

Corey: Optimize, optimize your G

Dylan: optimizer, and those are probably going to control that caching. after that you have WordPress level caching.

So this is your actual WordPress files. We prefer a plugin called WP rocket. There are a few other options called like w three total cash, and a few other peripheral or caching plugins. WP rocket's the most user friendly and the easiest to set up. And it also performs quite well. And then after that, you have the top level.

you can cache at the CDN level, which is typically handled with a, service called CloudFlare, which is free. the problem with this, it's one more level of caching, which does help. But with WordPress, you're unable to cash STO or static files at the CDN level, and so your actual pages aren't cached, but things like your images or your CSS files can be, typically on WordPress sites, I think we see about 20% of their files are actually cached with CloudFlare.

So it does help, but it's pretty marginal and it does add another point that can cause issues when you're troubleshooting. It's nice.

Corey: Yeah. And there's, there's other options for all of these things. well, I mean, maybe not, I don't know. Is there, is there an alternative to varnish that's similar on server caching?

I'm feeling there was something.

Dylan: So anyway, yeah, varnish is on Apache. I'm not sure if there's one for in jinx. Yeah.

Corey: Yeah. But anyway, like there's other. Caching, like totally rocket, you know, is obviously paid and and Cloudflare's a very popular option, but there's other CDNs you can use. just understand that they're not all created equally.

And, there's a reason that some of these are premium plugins or premium services, and just do your research before picking one. And I don't know, it's, it's. I feel so scared to recommend some of these things sometimes because of how easily caching can break your site. Yeah, and I guess one other thing to throw in there is don't combine these in a lot of cases.

I mean, the three things, the three levels can generally be combined and especially something like dopey rocket is very good at detecting conflicts, and, and solving them. However, not all caching plugins are good at that. And so I've seen some people who have. W three total cash and two or three other caching plugins that are like just free on WordPress cache plugins that are popular and recommended and lots of articles.

And so. Yes. Educate yourself, but don't just take every recommendation and run with it.

Dylan: Yeah. Just

Corey: maybe follow like one tutorial on caching or, you know, if you're not really familiar, don't necessarily pull from a lot of different sources. Does that make sense?

Dylan: For sure. Yeah. And just test your site thoroughly and, When in doubt, like turn cashing off, see if things are broken and turn it back on and see what is fixed. Like a refresh these caches. Like sometimes you might forget to refresh your varnish cache and you've refreshed CloudFlare and WP rocket, but it's not catching it. So a lot of those conflicts can just be user error, but cool.

Yeah.

Corey: We've already talked about fonts a good bit, but totally else you want to say about fonts

Dylan: a little bit. I think. the one thing I want to do or talk about is how you load the font. this can be quite technical, but there's WordPress plugins, that can allow you to do what's called font display swap.

And that, makes it so that you're not waiting for the font to be loaded for the content to show on the screen. So it's gonna show the content with a system font. And then as soon as that fonts ready, it's going to change to your font. That does give the user a flash of unstylish font. But I feel like that that's a very worthwhile trade off, because they actually can start reading the content.

They, they see the page title, they know what they're looking at, and it's not just a blank screen. the second, or issue that I think is pretty common is. If you have fonts on your site that are loading from Google server, when you look at your GT metrics waterfall, you might notice that you're, you're waiting a long time to, to start downloading those funds from Google.

sometimes putting those fonts on your own server and loading them from your, Like for my case flooding from dot com verse loading from a Google fonts.com is going to make a a performance increase. So you should test both ways. There are generally easy plugins that can, can swap that out and host those locally for you.

Okay,

Corey: cool. Anything else for fonts?

Dylan: I think just,

Corey: yeah, use as few as possible.

Dylan: Exactly. As few as possible. Load them. Well, display swap. Yeah.

Corey: That's been, I liked your tip earlier about like fun. Awesome. And there's, there's one other popular, icon font, I think. But yeah, I feel like it's almost always unnecessary for the.

Amount of performance damage that it does. Totally.

Dylan: Like how many people do you think are using those just for like three social media icons on their site?

Corey: I mean, it seems like a lot. Yeah. But yeah, there are ways to use font. Awesome. And like you said, host it locally if you need to, or. I think there's even some other options for ways that you can use those icons.

Dylan: There's ways to load just the icons you use, ah, which is pretty smart. Okay. You have to make a custom font file.

Corey: so this one's a big topic, but, tell us what, what are some general rules that you can follow for WordPress plugins in general? Because yeah, I find that. And whenever I look at a site that's just, maybe it's got a two second time to first bite, or maybe it's like, you know, 18 seconds to load or whatever, it's a WordPress site, and look at it.

I'm like, it's almost always that they've got some plugin bloat happening. They've got lots of plugins, some really outdated plugins, plugins that are just bloating, a megabyte or two of Java script or whatever. But in general. What, what are the rules that we need to follow with WordPress plugins?

Dylan: Yeah, I mean, I think it follows the same thing with everything else.

Really look at every plugin and ask yourself, do you need this plugin? Is it worth the offset and page speed after you come to that conclusion? You need to look at your GT metrics again and see, am I loading a script for, say, like a woo commerce because I have a print shop page on my site? Am I loading that on every page of my website, including my homepage?

which is common with most plugins to load a style sheet and their JavaScript on every page. and so you really, to get great performance, you need to start cleaning that up. And there are plugins, there's two that we recommend. One is called asset cleanup, and it's free, and it's pretty simple. they, for each plugin, you can choose which pages it loads on.

And you can also create like groups of plugins that are used specifically for certain pages. an example would be if you're doing product reviews and you have a review plugin and you have a, a photo comparison, a table plugin, you can just load that group on your. pages that are in the category review.

stuff like that. And other is perf matters and same, same theory. you can go on a page by page basis and just clean up which plugins are loaded.

Corey: I think that's really important. I, I don't want people to feel like. We're saying just never add extra plugins because sometimes, I mean, there are plugins that I know I've used where they literally have no effect on the front end.

One of the ones I like to use right now is called code snippets. Yeah. I imagine it has zero effect on the front end. I haven't tested that to see, but it made slow down the backend a little bit. it probably is loading the, style sheet for the actual. Plugin, whenever you're using it in the backend.

And that might take a tiny, tiny bit longer. But I mean, that can add up to if you have 50 plugins that are just helping the admin area. I've seen admins and WordPress sites that take like 20 or 30 seconds just to load to the next page. but anyway, all that to say there are solutions. There are ways that you can only load the scripts where they're needed.

And a lot of plugins nowadays are starting to kind of bake that in where they're only loaded where needed. however. That's not the case on even some of the big name plugins. So

Dylan: really you made it it can be surprising. one plugin that's pretty bad is like monster insights, to add the Google analytics.

That can actually slow down the front end of your site. And I, I think I saw a test and it was like up to half a second.

Corey: Yeah. I've heard the same thing about Yoast, but I haven't tested that myself.

Dylan: I saw some testing data, and I think it was in like the 25 millisecond range. Oh, that's nothing. Yeah.

Yeah. People were freaking out about that. Cause I like my SEO plugins 12 milliseconds. Okay.

Corey: Yeah. Don't, don't chase those like fractions of a, of a second to that extent, if it's like a plugin that's really bringing you lots of, benefit yet, but if it's something that you're adding just for the sake of doing something that you could have done.

With some other option or a built in option with your builder, or you know, having someone manually code at one time that you might be, it might be worthwhile to

Dylan: do that. Totally. So, yeah, after we figured out our plugin situation, we have to deal with some WordPress core features that are just kind of bloated, and perf matters and WP engine and quite a few different performance plugins are able to do these.

I think. I think perf matters is currently my favorite. they just have a long checklist of features that can be considered bloat. And each one has a box that tells you more about it. Or you can just Google each feature and be like an ask yourself if you need this. examples would be emoji and beds.

query strings on file names, a feature called XML RPC that allows you to email blog posts to an email address, and then it publishes them. Self pin backs, heart heartbeat, API rest, API exec, et cetera. Yeah,

Corey: so it's a lot of these are advanced features that you would only need under very specific circumstances if you don't need them.

Disabling them could be helpful. However, if you don't know, if you're using them and you disabled them, it could break some functionality depending on your hosting, set up, your, your plugins that you're using. Some plugins will use something like the rest API or, yeah. something like that. Maybe, maybe emojis are important to you and totally use them across hundreds of posts or something.

 

Dylan: but just test, test thoroughly.

Corey: But there are a lot of things you could just kind of disable and that does add up over time.

Dylan: Yeah. It's kind of surprising. Yeah. we talked earlier about third party scripts. I think just a few more points would be like Instagram footers. I think their Instagram footers are probably the single.

Cop, most common photography site issue. it's, it's having to load those images from Instagram servers. and generally I, I see that, lazy loading plugins do not work with those third party photos for some reason. so it, it, it's loading on everybody's page, even if the people aren't scrolling down that far.

I hate

Corey: Instagram widgets.

Dylan: Yeah. I think the, the, the other. pointed, make yours. I frames a lot of people use contact forms by like dub Sato or TAVI or different, content management systems. If those eye frames are not handled correctly, like there's specific ways you can lazy load an I-frame, but everything from a performance stand point inside that I-frame is handled by the company that you're embedding from.

So there's no way to improve that performance. And I've seen some of those companies had like, I think it was honey or HoneyBook. Yeah. They have a lot of issues with the performance. Of those eye frames and they're doing a lot of user tracking.

Corey: To be fair, we're recording this here in, in April, 2020, and that could totally change.

I've seen some of these companies liked UB Sato is a good example. They've been really actively developing that plugin and or their, their software so that it's. A much better experience. There's always potential for problems, and you just need to test these things for yourself, but understand the risk and understand the cost of using these embeds most.

Most will have some sort of secondary way that you can connect your leads into the CRM. So you could use something like Zapier. Yeah. or you can just have it, send an email and then handle the connection. They're like, maybe it comes to your Gmail and then you forward it to the, to the contact man management system.

There's other ways, potentially if you're having issues where your form is causing major performance issues.

Dylan: Yeah, and I think this comes down to testing. Like one thing I can recommend is try maybe like. Two weeks out of a month. You don't use the embedded form and you use your own contact form in two weeks.

You, you do the embedded form and see if you have a difference in number of people that inquire or if your, what your user metrics look like. Like just try to do some sort of test there.

Corey: He had to be careful with that because so much photography is seasonal. Seasonal. or you have some other issues or it's just random that sometime, yeah, you got a bunch of inquiries because of a referral or a mention somewhere.

It is so hard, like if, if you have some consistent data than you're already good at tracking, then I totally agree. Do some sort of testing and just in general, I've seen some situations where people changed out their contact form and then suddenly we're getting dozens of contacts, but they weren't before because it was like.

There was actually an error where the contact form wasn't getting sent or something like that. Oh, no. So every usually don't have that problem with third party in beds, to be honest. Yeah. But anyway, yes. That's a thing worth testing.

Dylan: All right. Should we talk about the future of page speed a little bit?

Yeah.

Corey: The future of the web is, there is no speed. It's all instant.

Dylan: Exactly. And hopefully this future is kind of now, I mean, the, the, the technologies are there, it just needs adoption. we do both strongly feel like amp is the future. Amp used to stand for accelerated mobile pages. Now we think that those pages are going to be used on desktop and mobile, and every site will just be amp compliant.

We've tested a few amp sites and we've made a few of our sites amp, and the performance is pretty incredible.

Corey: It's nuts.

Dylan: It's, I mean, without loading from a Google server, it's like half second loading times or whatever. It feels instant. And then. If you do a Google search and you, the user, it's pre-loading the amp pages in the background.

So when they click on that link, it instantly is in their browser, which is just a mind blowing experience. Yup.

Corey: I think amp is probably going to be the winner, but there's also other standards, and still this is not a thing where, I don't know, I guess more and more of amp is kind of becoming adopted as. A best practice.

And I think that's kind of the point of amp amp is really pushing for better standards, not necessarily why people don't like developers and camp because they think it's like too much power to Google and blah, blah, blah. That's not, that's a misunderstanding on the developers part, my opinion. but I think that just better overall standards for how.

Webpages are built and how I pages are handled, how things are loaded in the order of the loading, all these things we've been talking about that you basically have to fix on different themes and plugins and WordPress itself. A lot of these things are becoming standard so that they don't need to be fixed, right?

So as people, companies like Google get more strict on this, it forces more developers to. Comply. Like they say, well, if my site's not going to be able to get any traffic from one of the biggest traffic sources in the world, I guess I have to fix this. Exactly. And the problem is, if it weren't for that, if it weren't for Google pushing and other companies pushing, people just, they just get lazy.

Like, I've done this for this way for a long time. It's working fine. People aren't complaining, but that's not how progress works. That's not how technology develops. We have to set new standards. Push for new goals, and I think that literally the goal is instant or very close to instant and not five seconds or three seconds, or these kinds of things where we're worried about these days on photography website.

Totally.

Dylan: And speaking of those standards, I, another favorite we have is a, what are called static sites. And those are sites that don't require a, or it's all just prebuilt HTML. Browsers are able to load fairly instantly. And our favorite static site builder is a project called Gatsby and Gatsby follows performance guidelines to a T.

they, it's pretty incredible. If you install Gatsby and you build a website, it handles font loading per perfectly. It handles every sort of request. when a user's on the website, it's pre-loading the pages. they think the user is most likely to click on. so when you click around a Gatsby site, it's just, it feels like it's instant.

so that's a cool feature. A cool future.

Corey: Yeah. Awesome. Well, I guess one last thing I'd love to throw in here is if a lot of the things that we've been talking about are overwhelming or confusing, and I imagine that for a large portion of our audience, especially listening in. To a podcast. These things are probably a bit overwhelming, and our goal here was really to start introducing you to ideas and topics and categories of performance that you can take and then start digging into yourself.

However, if all of that is over your head, you never want to mess with it. I would say. It is possible to hire someone, especially for WordPress sites, to really fix a lot of these problems for you at this moment. The one that we recommend is called WP speed fix, and we'll put a link in the show notes, so that you can check them out.

Last I checked, I think their, their service is started in the sub $300 range and like their most popular service was 400 and something. and that 400 something price included. Migrating you to cloud ways, which is pretty cool. Totally. And I mean, you'll still have to maintain the, the monthly cost of the hosting, but the migration was included.

They do pretty much all of the stuff that we've talked about here for you. And you just pay them once. Now there may be some different, like you need to talk to them. You only do your own research. I can't 100% vouch for them. I've probably sent a dozen people there and heard back from. maybe five or six in all of them so far have had positive things to say except for one person felt like even that was too confusing because they were asking questions that were still a little bit over their head, but that's why we did this podcast episode.

And it's like, hopefully now you should be able to communicate with them. At least somewhat to be able to say, here, do this. And if they ask you questions, you can refer back here, ask questions in our group or, or whatever. But yeah, definitely consider hiring someone. If you're on WordPress and you want to perform better performance and you don't want to dig into testing all these different tools and making sure you get the settings right and.

Breaking your site and having to fix it and all that kind of stuff for sure.

Dylan: And our plan is to build this podcast episode into a blog post. We'll link to all these, resources and give you a little bit more of a idea of what a research, but I think this is a good start.

Corey: Awesome. All right, well, if you have more questions or you want us to clarify anything we've said in this episode, make sure to head over to fuel your photos.com/podcast this is episode nine.

You can check this out and there's a comment section there on the site where you can leave comments and interact with us that way. and also if you have any ideas for future episodes, things you want to hear for buzz, let us know there in the comments were in either of our. Facebook groups. We had fill your photos, Facebook group and the SEO for photographers Facebook group.

Join both of those and ask questions anytime.

Dylan: Yeah, I think leave a comment for Corey with the letter grade from GT metrics that your site got.

Corey: Nice. All right guys. We'll see you next time.

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fuel Your Business

Find more clients & kick financial stress to the curb with our SEO course for photographers!

Our Favorite Episodes
Cart Item Removed. Undo
  • No products in the cart.