en
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語

Optimizing WordPress for Speed & Conversions

English

Transcript

Introduction

Jason: Welcome to this first in three webinars with David Vogelpohl from WP Engine. And this one is going to be about speed, and the speed is not just about being fast. It's about making more money. Is that right?

David: That's absolutely right. Performance has a direct impact on the ability of your site to convert. What I'm hoping to cover here today are some tips people can walk away with to make their site faster, but also to grow their revenue.

Jason: Bill, from what I understand...we'll start with introducing you Bill Erickson, you're a super WordPress expert. You were a photographer and a graphic designer.  So you've changed a lot. You did moral philosophy?

Bill: Yeah, I studied one semester at Oxford Moral Philosophy. That was a long time ago. I've been a WordPress developer for 14 or 15 years now. I was originally a finance major, graduated during the economic recession. This WordPress thing is working and it's worked out well for me. I work mostly with publishers and food bloggers, and like high traffic sites that require a lot of speed and performance at scale.

Jason: Now onto Jono, who I know quite well. I know you live in York but you work at Yoast in Holland and you go there, was it once a week? 

Jono: Excellent. I'm over there once a month. Which is great. 

Jason: You said Yoast was the perfect job for you. It's the dream job.

Jono: Oh, yeah, I'm a technical SEO nerd. I do a lot of research. It's just an opportunity to play, to experiment.

Jason: David, we have never met, but we're about to start doing a three-part series, so we're stuck with each other whether we like it or not.

David: We'll find out after this webinar. I've been in my digital career since 1996 and supported countless numbers of businesses. I ran an agency for five years as well focused on WordPress. One of those, in particular, we converted into nine languages. The technology, of course, the localizations, translations themselves. That's definitely not an easy thing to do.

Jason: Now you're working at WP Engine, which is a phenomenal company. I mean, I've sent a few people your way. They've all been incredibly happy.

David: Well, thank you for that. Yeah, I joined the WP Engine senior leadership team back in 2015.

Jason: Brilliant stuff. Who wants to get started? Speed to make you money. That's how I interpret it. But David's going to put that a little bit more eloquently, I think.

David: Yeah, I hope so. I have a deck that I'll walk through with some of the particular points. The panelists here will help me kind of unpack some of these things. 

I think we make a lot of compromises sometimes in the sites we build  and it really does have a material impact. What I want to talk today about though, is performance specifically.

Why Website Performance Is Important

I think a lot of folks oftentimes think of performance as a vanity metric, “hey, the boss is complaining because the site is slow”. But the reality is, of course, is that it's actually a growth metric. 

There are tons of studies out there that cover the impact of performance on conversion rates. The longer it takes a website to load (in this particular study), you can see the conversion rate gets worse and worse over time. As you think about optimizing your site for speed, what you're really doing is optimizing your site for revenue. I'm curious Bill, I know you work on a lot of sites, have you seen like material revenue changes from increasing the performance on a site?

Bill: Yeah. For one particular site, we got a year over year increase in revenue of 300%. 

David: I think that's such a great example. Another interesting implication of speed is that performance does affect SEO, especially on mobile. Having a fast website is not going to make up for having terrible content or having, like your HTML not be semantic and things like that. 

Don't view it as like a magic bullet, but certainly, all things being equal, you can be on unequal footing in terms of SERPs if you have a low-performing website. Jono, I'm curious, I know you're an SEO nerd. What is your view on the impact of speed as it relates to SEO?

Jono: I think it's really interesting. It's unclear how and where Google actually monitor the speed of a page. There's so many different metrics, which I'm sure we’ll come to and so many different versions of what fast looks like. I think one of the things we do know that they are obsessive about is trying to understand good user experience. Does this page provide a good user experience? 

A slow page cannot provide a good user experience, at least in comparison to a faster page. They're definitely monitoring either directly or indirectly and it doesn't matter. If you make a faster page, it's a better experience. 

What I think is really interesting is the incremental increases, we're talking about, like going from 1.2 seconds to 1.1 seconds. Not always particularly noticeable to users, but they definitely have an impact. That's because they're either reducing friction or distraction. Even if it's not directly impacting SEO or directly impacting conversion, it's such a key part of how people perceive those interactions, that it's just a no brainer to be optimizing.

David: Exactly. Obviously, there's a little bit of a black box there, but they (Google) have publicly stated, of course, that it does play a role. They've also been very aggressive in terms of pushing this notion that performance matters. 

I think when it comes to SERPs, it is something to keep in mind. But obviously separate and apart from that. If it helps you grow your revenue, maybe 300% then who cares how it affects your SERPs? 

Tools for Measuring Website Performance

Let's talk a little bit about defining your benchmarks for performance. I think this is important to think about your measurement tools. 

One of my go-to tools is WebPageTest.org, which I know is super popular. WebPageTest.org tests the front-end of your website. It's not doing things directly like testing back-end processes. The metrics or KPI that I like to optimize for are your speed index score, or start render. 

However, personally what I like to do most of the time is to use what's called the film strip view and web page tasks. The film strip uses a nice visual way to get a feel for how your site looks at any moment in time. If you look closely, there's a red line in the waterfall graph below. Everything to the left of that line was stuff that got in the way of your page loading up until that point in time when the visitor is delighted. 

As you think about optimizing your site when you use WebPageTest.org, figure out where that moment in time is where you're delighting visitors and then everything to the left of the red line is what you want to start optimizing first. 

Bill and Jono, do you all ever use WebPageTest or do you have like a favorite tool of choice?

Bill: Yeah, I use a WebPageTest and I also like using the audits tab in Chrome's Inspector, which I think does through Google's, what is it, Insights or whatever?

Jono: Yeah, me too. I really like this. I also like the Network in Google Chrome’s console, it's a bit developed, but if you hit I think F12 on a Windows machine, you get a whole bunch of developer’s setups. It's from your browser, so you can see and you can refresh it and you can test it. Sometimes quite nice for experimenting to kind of see where those bottlenecks are. 

To your point, the idea of trying to cherry-pick and find out where those things are holding up that final moment is definitely the best approach to speed optimization. 

David: It's interesting you commented earlier a little bit on all the different ways Google could measure for performance. You mentioned how you like the Network tab, which of course runs from your browser. Where people are located is also extremely relevant when it comes to how your site is performing. 

WebPageTest emulates these experiences and allows you to choose different geographies. But again, everyone has their own favorite tool. The important thing is to set that metric, measure it and then remove those barriers from delivering that point of the light for those users. 

Bill, you mentioned earlier, Google has this cool tool called Page Speed Insights. A lot of people confuse this tool as a pure page speed tester. But it actually goes much deeper than that. Providing heuristics or advice on what areas of your site might be causing a low score. 

But the reason I like this tool is it's actually super helpful for unpacking what might be wrong or what might be getting in the way with your site delivering a delightful experience. You also get a little peek at how Google views page speed, what they consider to be a delightful experience. 

Again, I don't think anyone on this call has any direct information to say they're using the score in the SERPs. But obviously, you've gained a lot of confidence that from their view, your site is performing by achieving a good score on this tool. Jono, do you have any thoughts on this? I know this is a very SEO-specific topic.

Jono: You at look how much Google talks about speed and the fact that the best-in-class tools are developed and rolled out by Google. The best documentation in the space is by Google so that this; the Page Speed Insights tool, the Page Speed Insight documentation and the pages behind it are literally right in the book on how to build a fast website. 

It's not a coincidence that they're investing this much time, attention or money in providing the tools and instructions on how to do this. They really care. And yeah, all the tools out there, this is the one that's definitely closest to what they perceive “good” to be.

David: Earlier we talked about all the different ways you can measure performance. One of the interesting ways for me is something called RUM or real user metrics. I actually don't know if Google Analytics uses RUM in this particular report. But at the bottom of this slide, there's a little URL that will take you to a custom Google Analytics template. 

What RUM essentially does is it measures the speed from the user's browser. We talked about how your geography, your location is important. But what's also important is what network you're connected to. Who is your ISP and if you're a webmaster, who are the ISPs in geographical locations where my users are located?

Further distances can introduce things like hops and latency, which can slow your site down for a particular user. But then, of course, there's also the exchange between the internet and the ISP’s network that your end-user will use. 

What this custom report Google Analytics does, is it allows you to isolate by country, by city, and by ISP, the performance of users on your website. Bill or Jono, have you ever gone to this level of measuring performance where you're looking at city, country, and ISP?

Bill: I haven't used that specific report. We use Google Analytics a lot to get information on where their users are coming from, what sort of devices they're using, and what the capabilities of their browsers are. But I haven't used this specific report. 

David: What about you, Jono?

Jono: Yeah. I think it's something I mentioned before with Jason. I get a little bit nervous about Google Analytics, speed reporting, in particular, because it's sampled so very heavily. It's worth making sure that you tweak your geo settings so that it's measuring everybody. Otherwise, it's just 1% of your visitors. Then one person on the slow connection in a subway, reading an article between stops, skews all of your data when you're segmenting. Definitely use this but make sure you've got a really robust geo setup. 

David: That's a very good call out, Jono, because you need to kind of take some of this information with a grain of salt, especially if you're on the free plan with Google Analytics. Another thing that people often overlook is that they'll use front-end testing tools like WebPageTest.org, or Page Speed Insights, but what actually could be causing slow performance are processes happening on the back-end.

One of my favorite tools for unpacking that, discovering what might be causing this slowdown, is a tool called New Relic. New Relic has a specific WordPress module or add-on that will help provide insights into how plugins and themes may be chewing up your performance. 

This view shows a list of plugins running on this site and the relative load those plugins are playing on the performance of that server. Bill, I know you go really deep on this stuff. Is this an area where you monitor at some level with your clients?

Bill: Some of our clients will use New Relic for ongoing performance monitoring. Most of the work we do is redesigning existing websites and like removing all the performance issues that are there. A simpler, free version of this would be the P3 plugin, it's performance profiler plugin. It does something similar, will go through a bunch of pages, find the relative performance impact of each plugin. 

We'll use that when deciding which plugins to remove, what to replace, what you custom build. But yeah, we use tools like this, and we've used it a few times. But we usually use the free tools for those initial audits because we'll be stripping away most of the performance issues and we don't have to deal with them on an ongoing basis. 

Performance Benchmarks and Website Performance Budgets

David: Thanks for sharing. The principle here is to put a stake in the sand to say that I don't want any of my web pages to load slower than X. You're going to need to figure out what X may mean for you. The philosophy here is that as you build new experiences, as you build new pages, you make this part of your quality assurance and that you fit within your budget. 

Now the thing about budgets if you've ever had to keep one for yourself, you realize that there's trade-offs that you're going to have to do. You might be using JavaScript; different approaches to fonts and images. But the point is that in order to hit a performance target, you're going to have to make some real decisions around what you're including on your page and what you're not. 

I call this the balance of suffering and joy. They're going to suffer a little bit from the speed and maybe get joy from the content. It's really, again, thinking about setting that stake in the ground, and then sticking to it and making decisions that reflect that objective. Jono, do you in any of the projects you work on or exposed to, do you all set targets for page speed with new pages that you create?

Jono: I wish. I'm starting to see people think like this, though, because Google have pushed it so very heavily. It's transformative because if you suddenly start thinking about speed when you never really have, you also start thinking about SEO and accessibility and security. 

I've seen one or two companies who are in the process of stripping back pages that took 10 seconds to load that now take 2 say, “We never want to get there again. We understood that we got there by accident over years of incremental iterative change and now we want to be more mature.” 

The senior leadership have said no page will ever load slower than three seconds. And then people have to have hard conversations, but it forces them to build better things, and that's great.

David: Bill, I know your site loads lightning fast. Does the notion of a performance budget ever come up from your clients?

Bill: It does come up. We'll do performance targeting sometimes. One more thing we tend to do is when we're adding a feature that we know is computationally expensive or will add to the load time, we’ll use Google event tracking on that to see if people are actually interacting with it. 

Based on that kind of data, we can decide how important these features are. Is it worth reaching out every few hours to Facebook and Twitter to get updated counts if no one's even interacting with those, or looking at them if it affects the load time? 

We like to use data-driven design, data-driven metrics to sort of help quantify those features and say, “this feature is this expensive and this many people are interacting with it; do you want to keep it?”

Quality Hosting Providers and Content Delivery Networks

David: All right, so I want to cover some of the infrastructure and network footprint topics because obviously, that can play a big role in your performance. The first is to choose a quality hosting platform focused on WordPress. Companies that focus on WordPress are able to optimize things like their infrastructure, their caching, their security roles, all the way down to their support staff, and through that focus are able to deliver often faster experiences than a platform that doesn't specialize in WordPress. 

Now that being said, of course, there are platforms that don't specialize but still do a good job on performance. The main observation I have here is to choose a quality platform. Often when you choose one that's focused on WordPress, the performance benefits are there. 

If you're on cheaper hosting, (and I get it, right? You have an idea, a little side blog, it's not very important. You don't want to spend a ton of money on the hosting aspect). For that, I like to recommend this plugin called Cloudflare Page Cache, which uses edge cache HTML that was built by Cloudflare. 

It's a really good complement for folks running on cheaper hosting. It'll definitely help you get a little bit of, especially for certain types of sites, a pretty decent boost on your page speed. If budget is low and you don't have money for one of the more expensive or focused platforms in terms of WordPress, and you're running a cheaper hosting, definitely, check out edge cache HTML.

Jono: Cloudflare is one of the best products in the world. I'm being able to serve static copies of my web pages from literally in the same city as people who are requesting it. Even with the best hosting in the world, you still can't always quite get to that level of proximity. It's a no-brainer for me to add on and it makes such a huge difference.

David: Awesome. What about you, Bill? 

Bill: I haven't used this specific plugin. I'm definitely going to check it out. But we do integrate Cloudflare on almost all our projects, whether it's through WP Rocket or connecting like on the host level, Cloudflare just makes sense. Why not take that free performance boost.

David: The edge cache HTML plugin enables the use of the CDNs in a very specific way. Many hosts and platforms will bundle a CDN as part of their service. But if they don't, you can also purchase your own access to a CDN. The two providers I like are Cloudflare and Max CDN. 

Basically, there are hundreds of servers all over the world that will store a piece of your website. They can either store the entire page, this is called full page caching. They might just store the images or the videos. The reason this is important is because again, geographically, it's helpful to be closer to your visitors. 

Optimizing WordPress Websites for Speed 

We talked about having a good host, leveraging the CDN, but want to talk about some things you can do to your site itself. Bill, you mentioned this, I think: a topic on WordPress speed optimization or a presentation on WordPress speed optimization can't go by without someone mentioning WP Rocket. It's a great way to cover a lot of the bases as it relates to page speed optimization. 

There is modification for your JavaScript and your CSS. There's caching built into it. If your host doesn't use a cache, WP Rocket is a great way to achieve that. There's image compression capabilities within WP Rocket. Basically, any blog posts you've read, top 10 ways to speed up WordPress, eight or nine of them are going to be checked off with WP Rocket. 

Bill: All the low hanging fruit is taken care of by that plugin. What I really like is that they are, I'm not sure if they're doing it or the hosts doing it, but they disable the things that are duplicated by the hosts and so I can safely deploy that plugin on any hosts and not worry about a conflict in that host’s particular cache. I really like all the nice features that you can turn on and off like lazy loading. There's just a lot of tools in there that you can use to get a lot of easy wins. 

Jason: I got a quick question from Jim Floyd who's asking should we be using WP Rocket with Cloudflare? Is that a good idea to put the two together?

David: Yes, absolutely. They do fundamentally different things. However, WP Rocket enables you to set certain CDN configurations with Cloudflare, so using them in concert is absolutely something you can do. 

This plugin, you can see a little URL at the bottom, is the Cloudflare stream plugin. This actually leverages the Cloudflare video CDN. Basically, what it allows you to do is to embed videos directly inside of WordPress, which are stored and streamed from the video CDN. 

Now, this is just one example of offloading. There's many, many, many other examples of leveraging external services in order to relieve your web server and your WordPress doing all of that work. Of course, this is a double-edged sword because if you choose the wrong place to offload that work to, they might deliver a slow experience that might actually cause you problems.Jono, any additional thoughts on your site?

Jono: I use WP Offload Media, it’s really good. I host all my images, the various client images in Amazon, which obviously has its own CDN. But then I also make sure that those images are getting cached by Cloudflare. They are hosted not in my infrastructure, which means my server can be better configured. Then cache by Cloudflare. I barely pay anything for the Amazon stuff. It just means that my WordPress site is doing barely any heavy lifting, which is great. 

David: Exactly. When you offload, when you push this work external, it's not just the page for the video, or the asset might be loading that gets faster. It's all of your other pages too because that is essentially one entity working to serve all of these pages. Offloading is a key strategy in my view. 

Optimizing for Performance with Blocks and the Gutenberg Editor

Another way you can increase your performance is to scale your performance. Of course, WordPress comes with themes and now it comes with what are called blocks as part of the new Gutenberg editor. Atomic Blocks and StudioPress are two of the products in my universe. 

But specifically, the recommendation here is optimize your theme, optimize the blocks and pages you create, such that when you reuse them, you can inherit those performance optimizations from the past. You can reuse the assets to inherit this performance benefits from the past. 

Bill, I know you'd use modularized approaches, componentized approaches in some way. Do you think of this context of inheriting performance benefits when you're doing that?

Bill: All the sites we build are fairly custom and so will support obviously all the core WordPress blocks, but most of our custom blocks we build ourselves so that they are performance-focused. If I were looking for a block library to use, I go for Atomic Blocks because it is performance focused. 

One of the things I really like about the Gutenberg block experience is that it makes WordPress more intelligent about the content in the page, rather than it just being one big text area, and you don't know what's in there. 

Everything is a structured block and those blocks can load their own styles and scripts. If you have one block use on one page that loads JavaScript, you don't have to load that site-wide, that block itself can just load it when it's needed.

David: Sounds like we can do a whole webinar on just that one topic. But the point here is spend time on your theme. Spend time if you're using the block editor on your blocks. 

Does Your Website Need Accelerated Mobile Pages (AMP)?

Then the final slide here in the presentation before we kick off into more of the panel discussions is around AMP. I know this is a controversial topic for people when they have different views on Google's intent with AMP and what does this mean for the broader web and all these kinds of things. But the way that I think about AMP, in general, is that it's very unique in specific ways that can help you achieve a faster page load time.

Now, you don't need AMP to make your site faster. There's a lot of the things that you can do yourself without AMP to make it faster. But some of the unique benefits include, in some sense, CSS Tree Shaking. I think more impactful than that is pre-fetching the content of your site. 

When you run on Google's AMP cache and you're on the Google search results, the page loads automatically in the background for the visitor coming from the Google search engine. You can't get that through any other method of optimizing your site for performance. 

If you Google “Bill Erickson AMP”, Bill has a great article about setting up a WordPress site to work with AMP. What you'll find is that that page is lightning, I mean, just instantly insane fast when searching and finding it from the Google search engine. 

Certain search views only show content that leverages AMP. In terms of search visibility for certain kinds of sites, particularly publishers, recipe sites, and other forms of sites, you actually may be excluded from certain types of views within SERPs if you don't use AMP. 

The downside to AMP generally, certainly, you're going have to learn it and then learn how to build with it in the future. But the primary trade-off is options. You're going to have a lot less ability to use things like JavaScript. AMP is a standard, in a sense, meaning that it's a subset of HTML. And in some people's views, they've chopped off all the fun parts.

But AMP is restricted in some of the technology and some of the approaches you can use, which could put restrictions on what plugins you might be able to choose or what elements you might be able to add to your website. This is again, the trade-off.

There's unique speed benefits. There's unique search visibility benefits, but then the trade-off is you might have to relent on some options or experiences on your site. The best plugin for this in my view is the official AMP plugin by Google, which you can see linked here at the bottom. 

Bill, I'm a little like nervous even talking about AMP with you on the phone considering how deep you go on all this. What did I miss? What did I get wrong?

Bill: No, you covered all the bases. Just to rehash what you said, there's three main benefits to AMP. Actual performance improvements due to the requirements of AMP. Perceived performance improvements, because they'll preload your results. Even if your site takes three seconds to load, it'll be instant to users in Google search. Then placement in AMP-only certain locations like features, stories and things. 

The requirements of AMP just force you to build a performant website. You have to keep styles down to 50 kilobytes or less. You can't load any external JavaScript other than AMP components. Actually, when I build an AMP site, like my website is, I was built as a native-AMP website. Recently, I did some performance testing, the non-AMP version of my website loads faster. 

Just the fact of building a super performant website that meets the requirements of AMP. You don't need AMP to have a performant website. And so that real performance boost will work regardless of AMP. But without AMP, you don't get that perceived performance boost. 

David: What about you, Jono? What are your thoughts on AMP? 

Jono: I'm for team AMP. When it was released, I was in the school with a lot of other SEO people but it was a bit contentious, and that it felt a little bit like Google trying to reinvent the web for their own nefarious purposes.

I've played a lot with it. I've talked to a lot of people and seen it evolve. I'm now convinced that A, AMP is a very good thing and B, I think there's a reasonable chance it might become the future of how we build websites on the web for all the same reasons we've talked about.

I think we see on the whole that the web is slow. The current tools we have with the current processes or business practices we have don't make it easy to build performant websites. 

Constraints aren’t inherently a bad thing. I think many of the things that you can't do with them (AMP websites), like show lots of invasive pop-ups or have things trigger without users interacting with them, aren't good for users. The things that they are banning are the bad behaviors. 

That means business models will hurt, people will need to change their approach to how they design and build things. I think that's good for the web.  I think if you're building a new site tomorrow, I would gamble on building AMP first. 

David: Yeah, I remember when AMP came out and also being a bit of an AMP hater back in the day. A lot of apprehension around the motivation behind AMP. Google's clearly stated they view that AMP is helping to support a faster and open web, which they have a vested interest in.

Wrap Up on WordPress Website Performance

Jason: We've actually only got five minutes left. We're going to have to wrap this up now. What I did like about that last point and coming from a world of having built flash websites right at the beginning of the web, is I think constraints are a good thing. It forces you to look to the essential. 

What are the great platforms? Can we have three? I know we can start with David. The hosting platform...which is going to be the fastest?

David: I had referenced WP Engine and Automattic.

Bill: I would say WP Engine, BigScoots, and SiteGround for the lower-cost option.

Jono: I would have said all of those. Having already been said, I'll say Servebolt and Digital Ocean.

Jason: Brilliant. I think what comes out of this for me is the actual solutions to make WordPress faster relatively simple with WP Rocket, Cloudflare, decent hosting on the backside as it were. Looking it from your users point of view or not thinking you know what they need or what they're experiencing or they want. 

Starting with something simple and then building it out as Bill was saying, if you build your own site, first, you're forced to do something simple, forced to do something effective, and then your desktop or your mobile version or your desktop version for non-AMP users on mobile, is going to be phenomenally better. 

Forcing yourself to build from as it were the bottom up, starting with the most restrictive performance format is a great way to start even though it's very painful for most of us. 

Thank you very much. That was my little conclusion of what we've just said. Thanks a lot, guys. That was brilliant.

Bill: Thank you.

David: Bye.

All levels

Check out other webinars from this series