Google Lighthouse Performance Step-by-Step Tutorial for Improving Your Squarespace Mobile Site
About this Squarespace video tutorial
In this video I'll be talking about how to prevent your Squarespace mobile site from getting a poor Google Lighthouse performance score which can ultimately hurt your click through rate, ad performance, and overall Google rankings. Freeing up your home page from these mistakes can be a great way to keep Google from penalizing your site due to performance issues.
Timestamps
1:08 - Large Header Text Size
2:44 - Image File Sizes
4:31 - Total Blocking Time
5:59 - DesigningTheRow.com/free
7:12 - Later Loading Fonts
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
As I mentioned in my last video on Google Lighthouse scores, I improved my client’s desktop performance score to a 90 — but on mobile, the score was still stuck in the red. Why? Mobile performance scores are often lower, even when your site feels fast. In this video, I’ll walk you through what’s different about mobile performance, what Google’s Lighthouse tool is really measuring, and what I did to move the score closer to green.
How to Find Your Lighthouse Score
As a recap, to find your Google Lighthouse score for your site, open a new Google Chrome window under Incognito mode, and open up the developer tools on your browser (for Mac users, you can right click on your webpage and click ‘inspect’). From there, your Google Lighthouse options will open up, and you can run a test for a variety of web options. For today’s information, you just need to run a test for mobile performance. You’ll probably notice that your mobile score is a lot lower than your desktop score was, and that’s totally normal. We’re going to talk about how to fix this, because as more and more web traffic is coming from mobile devices that can simulate slower networks and hardware, Google and other search engines are prioritizing mobile performance more and more.
Problem - Overly Large Hero Text
A big, flashy header can be great to grab attention, but for someone like my client, where the header or H1 tag was flagged as the LCP (Largest Contentful Paint), that header alone took over 9 seconds to render. Most websites can either gain or lose a visitor in far less time than that. The reason this header tag was such an issue was because of custom fonts, sizes, and text effects that were connected to the text.
The fix was simple: disable any load-based animations, simplify the layout, and reduce the mobile font size with a media query, using this CSS code.
@media screen and (max-width: 600px) {
h1 {
font-size: 2rem;
}
}
Problem - Heavy Background Images
In the last video in this series, I talked about how getting your images below the 300-400 KB range was ideal for desktop performance, and while that is true, mobile sites often ask for even smaller file sizes to run properly. This doesn’t mean these images are going to be pixelated and blurry on desktop, but for consistency, I do recommend keeping all of your images under the 200 KB threshold so your mobile performance doesn’t get impacted. If you want to compress your images easily, you can edit the file size in the Preview app on Mac computers:
Open the image you want to adjust
Click on ‘file’, and then ‘export’
Preview files will automatically default to JPEG file type, which is good for Squarespace sites (come back tomorrow for more on supported file types with Squarespace)
Before the file exports, you can adjust the sizing on a sliding scale and find out exactly how many KB your exported image will be
For further compression tools, I recommend using TinyPNG or Squoosh, or using code to serve a smaller version of the image to Squarespace.
Problem - Total Blocking Time
The Total Blocking Time, or TBT, for your Squarespace site is the amount of time after loading in the First Contentful Paint (FCP) where input is still prohibited. Simply, it’s the time from the start of loading to when the website begins functionality. Large sitewide animations on your Squarespace site can severely lengthen the TBT on your site on mobile and desktop, but even small effects or pieces past the fold of your website can cause issues with your TBT on the more sensitive mobile platforms. Effects and animations such as fade-ins will delay the visual completeness on mobile, so I do recommend turning them off on your mobile view, and to be safe, you should consider disabling animations on your entire homepage for your mobile view.
To do this, in ‘Design’ under ‘Site Styles’, you can turn off sitewide animations, or you can use custom CSS code to override specific animations by section.
Problem - Late Loading Fonts
Squarespace’s relationship with fonts is pretty complicated. Unlike some other web hosting platforms, Squarespace fonts aren’t preloaded, and will load into a site upon a user visiting it. Custom or elaborate fonts that aren’t pre-baked into Squarespace’s system can delay visibility of text and keep the site from loading properly and promptly. However, sometimes you need to use a custom font, and if that’s the case, do try to stick to only one font weight and avoid bold/light/regular font combos, as varying the custom fonts will delay the site loading even more. This is all true for text blocks, but especially for headings, system fonts are the way to go (and they also usually are more readable).
A Special Offer
On a different note, I did want to announce that I’m launching a new AI-based copy generation tool to help you get started with building out the content for your Squarespace website. All you have to do is go to DesigningTheRow.com/free and input your first name and email address, answer four quick questions about your business, and you’ll get homepage copy that you can use to kickstart your home page. This tool has been built from all of the SEO knowledge I’ve gathered, and it will help you climb the Google rankings (provided you also follow the SEO tips I’m providing in this series), so check it out!
Mobile scores are harder to improve, but they are fixable when you know what to look for. I’ll show you how to deal with Squarespace-specific limitations in the next video, because sometimes, performance problems come from things you can’t even control. And if you missed it, click here to see the first part of this series on similar tips for desktop SEO scores!
The latest Designing the Row tutorials…
