Join the Webstudio community

Updated 7 months ago

Skin CMS: 3DVista CMS for Skin & Hotspot...

At a glance

The community member has moved their main product's landing page to Webstudio and is happy with the result. Other community members provided suggestions to improve the site's performance, such as reducing image sizes, using Lighthouse to test site speed, and eager-loading above-the-fold images. They also discussed the impact of fonts and multiple script inclusions on performance. The community members worked together to identify and address these performance issues.

Useful resources
After lot of experimentation in Webstudio, using standard templates, I've decided last week to move my main product's landingpage to Webstudio. Building it from scratch. I'm quite happy with the result in the short time frame.
Take a look if you like https://skincms.com
J
R
39 comments
Thanks for sharing!! I'd reduce the image width and height on some of those images like in the hero they are set to over 2000px but only need to be like 600 or so. will load a lot faster
Attachment
image.png
Thanks John!! I'll get into that ๐Ÿ˜ Do you recommend any tool to test site speed?
If I change the width and height in here, does that improve the speed or should I reupload a new image?
Attachment
image.png
Tool: lighthouse in chrome
itll change the speed. So those dimensions are used to create optimized versions of the image. If you put in 5000 pixels, the largest optimized version will be 5000 pixels but if you put 500 pixels then the largest optimized version will be 500. Even though both are optimized, the 5000 is going to still be much bigger file size than 500
That's amazing! Makes life much more easy ๐Ÿ˜ Thank you
just make sure to keep the aspect ratio. i use this to reduce size https://andrew.hedges.name/experiments/aspect_ratio/
I lowered all the images to 600-900 width and the corresponding heigth. Went up from 66 to 67 in performance. Lighthouse says that this h1 title is most heavy to render. Any clue why that might be?
Attachment
image.png
hm i would expect more than that. That's just saying that it took 6 seconds to get the LCP which happens to be the title entering the screen (LCP is when most of the content is present more or less) so something is taking 6 seconds before the title renders. will look..
1 set images above the folder to eager load, not lazy
Ah yes I remember that from oleg in the meetup
Only the first image(s) from the first view, right?
Only one or can be multiple?
im getting 94 on mobile. The first time the images load they take longer to render because they are getting optimized. maybe you ran the test on the first render?
multiple. anything above the fold
Which folder do you mean?
LCP measures when most of the content is loaded in the viewport. So if your images are lazy, they'll be delayed in loading which will affect LCP. Anything below the fold you can set to lazy
"fold" is what's visible without scrolling
comes from newspapers where they would come folded. above the fold is what was visible without unfolding it
Mmm my performance dropped from 66 to 59 after eager load of images ๐Ÿ˜ฎ
hm wonder why we are getting such different results. also you have a lot of fonts. these hurt performance
Attachment
image.png
Didn't know they could hurt performance! I'll clean those up
try to get rid of as many fonts as possible
says somthing about swiper have multiple scripts too
Attachment
image.png
Can I remove the weights of the font as well or only all or nothing here?
Attachment
image.png
I used the one from the marketplace and duplicated it a bunch of times
I guess all or nothing then on upload only select the ones you need
only load the script once. browsers prevent it loading multiple times but idk maybe its causing some perf issue
It seems to be in a Slot as HTML Embed, that should do it once, right?
but the slot is present like 5 times so that means script is present 5 times
Gotcha! Just removed the slots and it still works. It's these little things to wrap my head around, but now I know ๐Ÿ˜
Add a reply
Sign up and join the conversation on Discord