Mobile Speed Issues

Is anyone else seeing really bad mobile speed tests on their Squarespace sites? Every one I test has good desktop speed tests (80+/100) using PageSpeed insights but really bad on a mobile (under 40/100), some under 30...

Does anyone have any tips how to improve mobile speed?

Main issues seem to be the following:

• Eliminate render-blocking resources
• Remove unused JavaScript
• Serve images in next-gen formats
• Remove unused CSS
• Ensure text remains visible during webfont load
• Reduce the impact of third-party code (all seems to be Squarespace and Adobe Typekit
• Minimize main-thread work 
• Serve static assets with an efficient cache policy (seems to be to do with Squarespace CDN)

Hi there.

I think the only ways you can fix these things are to move any code firing via code injection in the head of the page to the footer - this will stop render blocking. Anything else you want to remove in the header can only be done by going down the developer route.

Next Gen formats again I think would be based on you being able to add them via the wysiwig, which I don't think it supports.

Unused CSS is again tied outside of your control, although you may be able to expedite some load times with a pre-load (you might need to change the last item).

<link rel="preload" href="//fonts.gstatic.com">
<link rel="preload" href="//connect.facebook.net">
<link rel="preload" href="//googletagmanager.com">
<link rel="preload" href="//ajax.googleapis.com">
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:700,300,500&display=swap'>

Again on the other points, outside of your control.

Bear in mind that GT METRIX users Google Lighthouse for performance scores, and unless  you are serving a blank page no-one gets over 65%! 🙂

Always remember that Google simply wants your websites to load fast so they can serve ads over them quickly, it has nothing to do with user experience 🙂 All that slows my website down now is their code.

Same question for my website - which CSS can I preload to make my website mobile score higher in google lighthouse? https://ricardomusic.studio I've already reduced requests down compressed images, tried to reduce cumulative layout shenanigans what else in terms of code and preloading can I do to score higher on mobile ? Any help you could give would honestly mean the world to me.

Install Lighthouse in Google Chrome, and then run an audit, it will tell you what you need to do to improve. Also you can go to web.dev and read the notes there.