Recently I recreated a website from Wordpress in Webflow with some improvements. My issue is the homepage has 11MB size while the WP has only 4MB.
I used Pingdom to test the Wordpress and Webflow. I have a few more images and animations but generally, it is the same page.
I see a big difference in images and JS script.
How can I reduce the size of my JS and images without losing quality?
Your images need to be minified.
This is my workflow (take it with a grain of salt)
- I usually compress them until they’re below 300ko. I first resize them in photoshop to 2000px width and use tinypng.com for extra compression.
- I use SVGs for every vectors
- I check if CSS, JS is minified in the project settings
Also you have 5MB of JS scripts, that is a lot. Do you have advanced features that require this much.
Would you mind giving us a share link of your project to check further?
Thank you for your answer, certainly I will test tinypng. Meanwhile I found out why I have 5MB of JS script, it is because of Youtube. I have a testimonial sections with 10 YouTube videos. I used the Webflow YouTube feature initially then I test using the Lightboxes.
Now I have 646.7 KB and a speed load under 1s without touching the images.
Now, I’m not a big fan of lightboxes, I’d rather use embed YouTube videos but I wonder if there is a script I can use to stop loading YouTube videos before the user clicks on them.
That’s much better for JS.
Just for curiosity, how come those embeds are this heavy? ( I use Vimeo embeds and they’re not that heavy ).
How many images do you have?
They are basic YouTube Videos, I created a website a few months ago with over 30 Vimeo embeds and it was smoother.
i tested tinypng, it is great, thanks