How to Improve Your Google Lighthouse Score on Desktop
About this Squarespace video tutorial
In the first piece of my three-part series on how to use Google Lighthouse's analytics feature to improve and better optimize your website, I'll be going through a few common tricks that can slow down Squarespace websites on desktop view. Keeping these flourishes out of the top of your home page can be a great way to keep Google from penalizing your site due to performance issues.
Timestamps
0:00 - What Is Lighthouse
2:17 - Finding Your Performance Score
4:07 - Scale Text Effect
5:47 - Sitewide Animations
7:27 - Background Videos
9:10 - DesigningTheRow.com/free
10:41 - Large Image File Sizes
13:00 - Summary of Lighthouse Tips
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.
4 Things Slowing Down Your Squarespace Website (and How I Boosted My Score to 90!)
I just helped a client improve their Google Lighthouse desktop performance score from a 71 to a 90 — and here’s how I did it. In this case my client wanted to boost the potential of his Google ads and came to me for help with his site’s performance. He noticed on the Google PageSpeed Insights tools that his Performance score was coming in below his competitors’ and he wanted to change that!
First let me show you how to even find out what the Performance score of your website might be. 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 desktop.
Almost all the changes I made to increase his website’s performance were to the hero section, or what you first see of the site “above the fold” when you land on the page. And unfortunately, a lot of them were design choices and also Squarespace specific features.
Don’t use the Scale Text Effect
To know not to do something, you sometimes do need to know how to do it, and I do have a video on text effects that covers the scale text effect (unfortunately I do really like it) that you can check out here. What scale text does is size a text block up to any space, which is incredibly helpful for designing, but because of how Squarespace loads in different elements, it can give your performance a serious hit.
Visually cool, but it causes “layout shifts” and hurts CLS.
Especially problematic if applied above the fold.
Better: use responsive clamp() font sizes or CSS scale transforms.
Don’t Enable Sitewide Animation
Sitewide animations can be incredibly helpful if you’re looking to design your site with an extra little bit of flair, but all of that additional processing power can make the load times on your site much longer. Here are a few easy tips to mitigate the problems that can come from sitewide animations:
Adds delay to all elements on page load.
Subtle animations are fine if triggered by interaction or below-the-fold.
Better: Disable in Design → Site Styles → Animations or use custom CSS animation only where it adds value.
Don’t Rely on Background Videos
This is another trick I’m a big fan of, and you can learn all of my tips on how to add videos to your site in a variety of ways here. It’s not shocking, but when you’re asking Squarespace to load a large video file first thing at the very top of your webpage, it’s going to cause you some issues, and especially because there isn’t a desktop fallback ready to go for large video issues, I do recommend using a static image on your homepage so your Lighthouse score doesn’t dip.
Don’t Upload Overly Large Images
Similar to the problem with large video files, massive images can also take a long time to load. Most images you’re uploading directly from your computer will have a size around 2-5 MB when all you need for a crisp, website-ready image is 200-300 KB. For Mac users, you can resize your images using the Preview tool, which I do recommend. Uploading images that are already compressed will take the weight off of your performance score. Even though Squarespace does help with image resizing, it’s always best to upload already optimized images that are compressed, properly sized, and ideally under 300 KB.
Another Tip
Before you go, I am extremely excited to announce that I have a new tool ready to go for those of you looking to get started with your website. At DesigningTheRow.com/free, you can utilize a tool I’ve built to generate copy for your site with all of my best practices in tow, so take a look and see if it’s right for your new website!
Now that we’ve got desktop running fast, I’ll be tackling mobile performance next — so be sure to tune in tomorrow so you don’t miss that.
The latest Designing the Row tutorials…
