365: 1 Second Page Load Speeds And 90+ Core Web Vitals With Steve Chou

00:00
You’re listening to the My Wife Could Her Job podcast, the place where I bring on successful bootstrap business owners and dig deep into what strategies they use to grow their businesses. Today, I’m doing a solo episode to address a question that I’ve been getting a lot and it has to do with page load speed and Google Core Web Vitals. Now, if you listen to my episode with Kurt Elster a couple of weeks back, we basically told people not to worry about page speed too much. But just mentioning page speed and Google Core Web Vitals actually made people panic and I’m beginning a ton of questions as a result. So in this episode.

00:30
I’m going to reveal to you how I achieve sub one second page load speeds and a 90 plus rating on Google core web vitals. And for you Asians out there that consider 90 % of filling grade, this is the one exception. But before I begin, I want to thank Klaviyo for sponsoring this episode. Super excited to talk about Klaviyo because they’re the email marketing platform that I personally use for my e-commerce store. And it depends on them for over 30 % of my revenue. Now you’re probably wondering why Klaviyo and not another provider.

00:56
Well, Klaviyo is the only email platform out there that is specifically built for e-commerce stores. And Klaviyo can track every single customer who’s shopped in your store and exactly what they bought, which makes it extremely powerful. Let’s say I want to send an email to everyone who purchased a red handkerchief in the last week. Easy. Let’s say I want to set up a special autoresponder sequence to my customers depending on what they bought, piece of cake, and there’s full revenue tracking on every email sent. Now Klaviyo is the most powerful email platform that I’ve ever used. You can try them for free over at klaviyo.com slash my wife.

01:24
That’s KLAVIO.com slash my wife. I also want to thank Postscript for sponsoring this episode. Now, if you run an e-commerce business of any kind, you know how important it is to own your own customer contact list. And this is why I’m focusing a significant amount of my efforts on SMS marketing. SMS or text message marketing is already a top five revenue source for my e-commerce store. And I couldn’t have done it without Postscript, which is my text message provider. Now, why did I choose Postscript? It’s because they specialize in e-commerce and e-commerce is their primary focus.

01:54
Not only is it easy to use, but you can quickly segment your audience based on your exact sales data and implement automated flows like an abandoned cart at the push of a button. Not only that, but it’s price well too and SMS is the perfect way to engage with your customers. So head on over to postscript.io slash Steve and try it for free. That’s P O S T S T R I P T dot I O slash Steve. And then finally, I wanted to mention a brand new podcast that I recently released with my partner, Tony. And unlike this podcast where I interview successful entrepreneurs and e-commerce,

02:23
the Profitable Audience Podcast covers all things related to content creation and building an audience. No topic is off the table and we tell it like how it is in a raw and entertaining way. So be sure to check out the Profitable Audience Podcast on your favorite podcast app. Now onto the show.

02:45
Welcome to the My Wife, Quitter, Job podcast. Today I’m doing a solo episode. And in this episode, you’ll learn how to get a 90 plus score on your Google Core Web Vitals, both desktop and mobile, for an e-commerce store, even if you use a lot of Now when Google first released their Core Web Vitals assessment, many e-commerce store owners begin to panic. Now unlike a content site or a blog, your store is actually very image heavy and it requires many more functional elements to close a sale.

03:14
And every single thing that you add to your website actually slows down your site. So for example, if you have live chat on your store, it can take six to 10 seconds to load just by itself. Loading up basic email tracking with Klaviyo can take one to two seconds. Even adding the Facebook pixel can take 100 milliseconds to load. So it doesn’t matter whether your code uses deferred or asynchronous loading. I’m going to try not to get too technical in this episode. But basically every additional element on your site

03:40
is going to have a negative impact on your core web vitals. Now, right now, according to search metrics, 96 % of sites testing in the US fail Google’s core web vitals assessment for either desktop, mobile, or both. And the failure rate is actually even higher for e-commerce stores because of the required functionality to take transactions online. So once again, in this episode, I’m going to show you the exact steps that I took to achieve a 90 plus Google core web vitals rating

04:10
for my seven-figure e-commerce store website. Okay, so before we get off into the weeds, what are Google Core Web Vitals and why should you care? Well, Google Core Web Vitals are a set of factors that Google incorporates into the search rankings to measure the quality of the user experience. And it consists of three components. Largest Contentful Paint, this is essentially how fast your page loads, and Google requires 2.5 seconds or less. This is basically a measure of how long it takes to see the largest piece of content

04:40
displayed on your screen. The next factor is called first input delay. Google requires 100 milliseconds or less. This is a measurement of your page’s responsiveness and usability. And specifically, Google is measuring the delay between a visitor clicking on an interactive feature and how quickly the page responds to that click. And then finally, there’s cumulative layout shift. Google requires a score of or less. This is basically a measurement of how stable your page is as it loads.

05:08
Like, does your content move up and down as the page is rendered? This is actually the only Google Core Web Vinyl metric that has nothing to do with page speed. And it’s also the hardest one to debug if you don’t know what you’re doing. All right, so from here on out, I’m gonna detail exactly how I fixed these three metrics for my e-commerce store to achieve a 90 plus score on both desktop and mobile. And why should you care? It’s because it affects your Google search rankings.

05:33
Now most of you listening to this are either on Shopify, WooCommerce, BigCommerce, or Shift4Shop, and all these strategies apply no matter what platform that you’re on. Now my store’s over at bumblebeelens.com. Feel free to run the Google Page Speed test in my store as you’re listening to see my results firsthand. Now first off, my store uses many of the latest e-commerce bells and whistles because I teach a course over at profitableonlinestore.com. And I treat my store like a lab to test new features as they come out.

06:01
and report about them on the blog. So here’s just a short list of things that I’m running on my shop for this case study. Klaviyo, which is my email marketing platform, Postscript, which is my SMS marketing platform, Visery is my push notifications provider, ManyChat is my Facebook messenger marketing provider, Gorgias is my customer service software, Spindle and Popup, I had the Facebook pixel installed, Google Analytics, a notify slide up, a whole bunch of stuff that’s installed. And just for fun,

06:29
I ran my site without any optimizations and my site actually loaded in 18.7 seconds. But when I run with all the optimizations that I’m about to talk about in this episode, it loads in 1.2 seconds. All right, so how do you fix your largest Contentful Paint and First Input Delay problems? Now, usually it’s basically page speed, right? It’s basically cause when your site is slow. Now, if you can make your website faster,

06:58
then your Google Core Web Vitals, the LCP and the FID scores will just fix themselves. So for 99 % of the shops out there, your largest contentful paint problems are caused by loading JavaScript and CSS that blocks some rendering. And just by default, when you have your own site, without any optimization, JavaScript and CSS files are sequentially loaded, which can actually block the rendering of your page. So the best way to speed up your code is basically to lazy load your code

07:28
or to defer the rendering so it doesn’t block anything. Some shops load big photos and or videos and in general, the larger and the higher resolution your images are, the longer they’re gonna take to load. And in general, you should never load a larger image than what is being displayed on your site. Also, you should never load any image that is invisible on the screen either. And the final reason for a slow website is you might be on a slow server. Now in general, this isn’t gonna be a factor if you’re on Shopify, BigCommerce or Shift4Shop.

07:57
But if you happen to be on WooCommerce, then going with a faster host like a WP Engine could speed up your site dramatically. But in a nutshell, if you address these three issues, then you’re have lightning fast page speeds. All right, so here’s how you can achieve a sub one second page load speed. And here’s my complete list of speed optimizations. So what I’m gonna do now is I’m gonna tell you what all the speed optimizations are, and I’m gonna give it a rating of one to five, where five indicates that it will

08:25
it’s going to have the highest impact on speed. And in general, like in terms of priority, you should always focus on the fives and then implement the ones and twos only if you have time or if you’re super anal like myself. Okay, so the first factor is called enable browser caching. I give this a rating of one out of five. Basically browser caching tells the client browser to cache images and other elements of your website on their local machine to make browsing your website much faster after the initial page load.

08:54
Now, browser caching should always be turned on, but please note that browser caching will not affect your Google Core Web Vitals or your page speed. Google only cares about how your website is loaded from a completely cold state. The next way to speed up your site is to minimize CSS and JS files, and I give this a rating of one out of five, which means it’s trivial. Minimizing your CSS basically removes all the white space from your CSS and JavaScript files to save a couple of bytes here and there.

09:23
And in general, the minification of your CSS JS files is not going to dramatically improve your page speed. Basically perform this optimization if you’re trying to eke out every last millisecond of speed from your site. By the way, I just wanted to mention that I’m going from the least effective to the most effective in that order. The next thing you can do is combine HTML, CSS, and JavaScript files. I give this a rating of two out of five. Basically, you’re combining all the different files into fewer files because your server has to fetch less files.

09:53
But here’s the thing, with the latest web server technology like HTTP2, multiple files can actually be fetched at the same time in parallel, which mitigates this speed optimization dramatically. So I wouldn’t spend too much time on this. The next thing you can do is clean up your redirects. And I give this a rating of two out of five. If you’ve had your website for a long time, it’s basically constantly changing. And sometimes you might have redirects from certain images or pages to others. So for example, when I migrated all of my pages from

10:21
HTTP to HTTPS many years ago. What I did is I issued three or one redirects from certain pages and images to their secure counterparts as a quick fix. Every redirect on your page is going to slow down your site. So just make sure you use a tool like GTmetrics to detect any redirects on your page elements and remove them. You can also use a faster web host. I give this a rating of three out of five. If you’re on an open source platform like WooCommerce or Magento, your first instinct might be to just throw money.

10:50
at a brand new server, but most of the time I’m going to say a faster server isn’t going to solve your speed problems. But if you’re currently using a cheap shared host, a VPS or a dedicated server could make a significant difference. Use a CDN. CDN stands for Content Delivery Network, and what it basically does is it stores your copies of your website and your images on multiple servers all over the world so that your content is delivered by the nearest geographically located server.

11:19
If you have customers worldwide and your site is very image heavy, then using a CDN might have a significant impact on your page speed. But for smaller sites of mine that mainly serve the US, using a CDN only has a marginal impact on your page speed.

11:35
If you sell on Amazon or run any online business for that matter, the most important aspect of your long-term success will be your brand. And this is why I work with Steven Weigler and his team from Emerge Council to protect my brand over at Bumblebee Linens. Now what’s unique about Emerge Council is that Steve focuses his legal practice on e-commerce and provides strategic and legal representation to entrepreneurs to protect their IP. So for example, if you’ve ever been ripped off or knocked off on Amazon, then Steve can help you fight back and protect yourself.

12:03
Now, first and foremost, protecting our IP starts with a solid trademark and Emerge Council provides attorney-advised strategic trademark prosecution, both in the United States and abroad for a very low price. And furthermore, the students in my course have used Steve for copyrighting their designs, policing against counterfeits and knockoffs, agreements with co-founders and employees, website and social media policies, privacy policies, vendor agreements, brand registry, you name it. So if you need IP protection services, go to EmergeCouncil.com and get a free consult.

12:33
And if you tell Steve that I sent you, you’ll get a $100 discount. That’s E-M-E-R-G-E-C-O-U-N-S-E-L.com. Now back to the show.

12:44
All right, we’re getting the good stuff now. Preload larger images and scripts. Now metrics like largest contentful paint measure the speed of the largest element on your page. And as a result, it makes sense to preload the largest elements on your page by providing hints in your HTML. Preload hints are instructions in your code that tell a browser which resources are the most important for the page. So for example, if you have a large splash image, it makes sense to start loading this image first to improve your LCP.

13:11
Now, while preloading important elements of your site might help your scores, it won’t have an impact on your overall page speed. All right, you can shrink your images. I give this a four out of five. Most new e-commerce store owners use image sizes that are much larger than required. So if your theme uses 1000 by 1000 pixel images, then you should never upload an image larger than 1000 by If your website uses the same image on multiple pages in different sizes,

13:40
you should create a separate and smaller image for each version. So for example, a product image on my store is displayed in full size, 50 % size, 33 % and 25 % depending on the page. So as a result, I have four different image files, one for each size on my site, and I only display the smallest image required without loss of quality. In addition, you should obviously compress all of your JPEG files down to a maximum of 50 quality in Photoshop or whatever image program that you use.

14:09
Next up, you need to compress and cache your pages. And I give this a rating of four out of five, which makes it very important. If you’re on a fully hosted platform like Shopify, BigCommerce or Shift4Shop, your pages are probably already compressed and cached before they’re served. But if you’re on an open source platform like WooCommerce, make sure you use a plugin like WP Rocket. WP Rocket will prerender all of your web pages so that your store will serve static pages that require little or no CPU usage. WP Rocket also compresses your webpage to about

14:39
90 % of its size. Okay, the next one, I give it a four out of five also, which is just to simply use less plugins that load external code. Remember what I said earlier, every plugin that you add to your site is going to slow it down. As a result, you should be extremely careful whenever you decide to install a new software tool. Seemingly innocuous features can sometimes dramatically slow down your site. So for example, adding a Facebook share button or a Pinterest pin it button can potentially cause a new piece of JavaScript code

15:09
to be downloaded from an external source. For buttons like Twitter, Facebook, or Pinterest, I always use non-code versions that don’t require externally loaded code. Now, if you want to add a Facebook share button to your site, there’s always a hyperlink version that requires no page speed delays. All right, finally, we’ve gotten to the most important part of page speed. Lazy load your images and your JavaScript code. This is the most important factor to page load speed.

15:38
So here’s what I mean by lazy loading. When it comes to improving your page load speed, you should only load elements of your site that are required or visible. So for example, if there’s an image buried five scrolls down in your page, you should not display that image until your customer makes it down far enough to see it. Similarly, for your code and your plugins, you should not load any functionality for your website until it actually needs to be loaded.

16:05
Lazy loading for images is already pretty straightforward, and a lot of themes already have image lazy loading built in. But what most people are not doing is lazy loading their JavaScript code. So how do you do that? Here’s the secret. For every page on my site, I load the visual elements of my site first. Then I only load the functional JavaScript code on my site once the user takes an action on the page.

16:33
So for example, if you were to go to Bumble Bee Lens right now, you’ll notice that my website loads super fast, sometimes under a second. But if you click on the page or move or scroll the mouse, only then does the live chat load along with the other shopping functionality in my shop. So in other words, I’m lazy loading the shopping cart functionality on my site only when the user starts taking an action or shopping in my store. And as a result, my page loads super fast.

17:00
because I’m only loading the graphical HTML and CSS elements of my site. From the user perspective, the shopping experience is perfect because every page loads lightning fast. Meanwhile, Google also sees a fast loading page as well. Okay, so how do you implement JavaScript lazy loading? You can just take this podcast episode and actually literally send it to your developer and just have them do what I say. But if you want to know how I did it, the first step required to lazy load your JavaScript

17:30
is to figure out what you can lazy load without breaking your site. Remember, you got to load all the essential code for your site so that your customer’s visual shopping experience is not affected. And as a result, you must load every piece of code that affects the rendering of the graphical elements of your site. Here’s how to figure out what’s essential. Go to gtmetrics.com and analyze your waterfall chart. Basically, your waterfall chart will tell you everything that’s loaded on your page and how long it takes to load.

18:00
Now, just as an example, Clavio’s code is actually taking almost a half second to load. And in addition, the CSS associated with Clavio is taking almost another half second. Now, if you guys don’t know who Clavio is, Clavio is my email marketing tool. And I know for a fact that Clavio does not affect the rendering of my site at all. So as a result, I can easily lazy load Clavio without affecting the visual elements of the page. And in fact,

18:27
removing the Clavio code will shave almost a full second off of my page speed. So what you should do is you should choose GT metrics, create a list of all the slow loading code that is not required to render the visual elements of your site, and then lazy load the code when any of the following events occur, mouse movement, page scroll, or a screen touch. Now, obviously, if you don’t know how to do this, just tell this to your developer and they’ll know exactly what to do. If you have problems, feel free to email me.

18:56
But once you implement this one step, you should be able to achieve sub one second page load speeds on both mobile and desktop. All right, let’s shift gears for a little bit and talk about cumulative layout shift. Now remember, that’s when your website shifts as it’s loading. Then 90 % of your CLS problems are going to be caused by one of two reasons. You are loading elements without dimensions.

19:21
Now, the image size parameters are what allow a web browser to know the size of the content as it loads. So for example, if you define the image dimensions in your HTML code, the browser will reserve space for your image so it loads so the page does not jump. However, if these size parameters are missing, no reservation takes place and the page will have to rearrange itself when the image finally loads. And the simple solution to this problem is just to specify dimensions of every element on your site.

19:48
Now, some Shopify plugins also use code to dynamically display features on your website. Sometimes this code loads late, which can push your page up and down. So for example, if you display ads on your site, your site might jump up and down as the ad loads. Now the best way to prevent this from happening is to just pre-allocate space on your page for the added content to be displayed. Now, doing this can be problematic for certain plugins, so if this happens to your site, just reach out to the plugin creator and tell them what’s going on.

20:18
All right, so that solves, I would say, 90 % of the problems. The remaining 10 % can be extremely difficult to figure out without using a specific set of tools. For my sites, it literally took me three weeks to fix my issues because the Google Page Speed Test is not reflective of the actual CLS scores measured in the field. So for example, my blog over at mywifequitterjob.com had perfect CLS scores on the test, but in the field, the test failed. I don’t want to get into it.

20:48
but Google makes things overly complicated for some reason. But basically what they’re doing is they have the browser installed on all these devices and they’re taking real user data, whereas the test that you run online is only local to your own machine. Now, when the two scores don’t match, basically the field versus your local test, it’s actually a pain to fix because Google doesn’t tell you what’s wrong. In fact, you can have a perfect score in the lab, but then completely fail in the field.

21:16
All right, so here’s what Google’s not telling you about cumulative layout shift. The page speed test only measures your CLS above the fold under ideal conditions. And in real life, a user is scrolling up and down on potentially a much slower internet connection. So in order to solve your CLS problems, you must emulate a slow connection and behave like a real human user. So this is how I do it. All right, I use the Chrome debugger. So if you guys don’t know how to bring up the…

21:46
Chrome debugger, you really just right click on anything and then select Inspect on the menu. And then on the Network tab, you want to throttle the page speed down to slow 3G. This basically slows the page down dramatically so you can detect little minute shifts in your website. Then, and this is really hard to explain on a podcast, but there’s this button that displays layout shifts. Once you have all that stuff turned on, refresh the page.

22:13
And then what will happen is your site’s going to flash in blue when there’s a layout shift. That’s it. All right, and then once you’re there, you can send that to your developer and they’ll fix it for you. Now, if you follow all the directions that I just outlined, you can actually get sub one second page load speeds and achieve a rating of 90 plus on your core web vitals for both mobile and desktop. And in general, this is my philosophy. You should always keep your website as simple as possible.

22:41
and avoid using plugins at all costs. Ask yourself if you absolutely need a certain feature before you decide to implement it. Then seek out solutions that do not require additional JavaScript code to your site. Now I’m super anal to an extreme. I actually examined the source code for every plugin I install in addition to the network calls that the plugin does. Once I blindly used a plugin that was literally sending my website information to several ad networks,

23:10
and selling my customer info without my knowledge. Now most PageSpeed issues are not caused by your theme, but by the plugins you install. So just be careful once again with what you choose to install and happy selling. Hope you enjoyed that episode. Now if you have any questions about PageSpeed or how to implement anything that I talked about today, feel free to reach out to me over at steve at mywifequitterjob.com. It’s not rocket science. For more information about this episode, go to mywifequitterjob.com slash episode 365.

23:40
And once again, I want to thank Postscript, which is my SMS marketing platform of choice for e-commerce. With a few clicks of a button, you can easily segment and send targeted text messages to your client base. SMS is the next big own marketing platform, and you can sign up for free over at postscript.io slash Steve. That’s P-O-S-T-S-E-R-I-P-T dot I-O slash Steve. I also want to thank Klaviyo, which is my email marketing platform of choice for e-commerce merchants. You can easily put together automated flows like an abandon card sequence, a post purchase flow, a win back campaign.

24:08
Basically all these sequences that will make you money on autopilot. So head on over to mywifecoderjob.com slash KLAVIYO. Once again, that’s mywifecoderjob.com slash KLAVIYO. Now I talk about how I use these tools on my blog, and if you are interested in starting your own eCommerce store, head on over to mywifecoderjob.com and sign up for my free six day mini course. Just type in your email and I’ll send you the course right away. Thanks for listening.