Really needing some assistance on this from all you SEO wizards! Looking to increase performance on mobile website speed most importantly and desktop speed if possible too.
- Went through entire website and reduced resolution/compressed images.
- Deleted unused classes and animations
- Checked website header/footer scripts and only have Google Tag Manager in Header/Footer. I have not delayed the trigger on this yet as I don’t know how. Not sure how much this will help
- Changed background video to a div/video url link instead and tested but didn’t make a difference? Also reduced background video to 18mb.
- Cloned website and tested speed without GTM and without background video… Still slowish.
I started at a performance of 18 on mobile and have increased it slightly by reducing image sizes throughout but stumped on WHY it’s still low!? I just want it above 70…at least.
Can anyone help me please?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Will do my best to help out here!
Make sure you’ve enabled responsive variants of your images - you can read more about this here: Responsive images in Webflow | Webflow University - you should see the ‘Create responsive variants’ in your Asset Panel
Pixel triggering twice - it’s possible you’ve added Facebook Pixel through Google Tag Manager as well as through Project Settings > Integrations > Facebook Pixel:
Google Optimize - the white screen on load is being caused by Google Optimize. You can test this by removing the tag from Project Settings > Integrations > Google Optimize and see if it fixes the issue.
Google Optimize causes the slow load times because of the way they built the implementation. The way that Google Optimize has built this integration is so that the anti flicker code can work in the background to populate your data while the site loads content.
If you are looking to manage the implementation without using Webflow to add the code so that you can control as you prefer, then you can remove Google Optimization from your Project Settings, and then implement it with your own code in the project code section (remove the Google Optimize from your project settings).
You can then implement it with your own optimize code in Project Settings > Custom Code > Head Code.
Optimize your images using the WebP conversion tool - more on this here: WebP conversion tool | Webflow University
Reduce the size of the background video if possible - you could try using a tool like handbrake.fr
Hope this helps!
Thank you so much buddy! I’ll go through and test all these and give feedback once done to let you know the performance gain.
Legend, thanks again.
I completed the above steps and this was the result.
Interesting though, I duplicated the website and the results are so much better?
It still looks like you’re loading duplicate Facebook pixel tags and there are some more images you could convert to WebP.
The main difference between the your published site and the test site is that Ecommerce isn’t set up on the test site.
Do you find that the site is actually loading slowly on your mobile?
I found the Pixel! It was buried in GTM lol.
Some images wasn’t able to convert to WebP, I’m not sure why but I believe most did?
It’s gone up a little but more which is great. Like you said, because it can’t do the CMS images yet, I think this is as good as it gets for now.
The only thing that might help out even further, is putting a 5 second delay on GTM tags maybe?
Thanks again for all the help!