I haven’t launched my site yet… (it’s getting close), but I am worried about the site speed and hosting. Once the site goes live, will the loading of the page go faster? I do have a lot of large images on my page, but when it try to do the in page linking… it stutters a few times on the way down the page.
Also, any tips of making the page load faster in general? A lot of my images have the little yellow triangle by them. What is the suggested size for images that will look good on a retina display. I’ve been using 3000x2000 pixel files, saved for web in Photoshop as a 65% jpeg.
Hi @thebecker, thanks for your question. Your images on your page should be ideally no bigger than 250 kB for decent performance on mobile, but they can be larger, just remember that the bigger your images, the longer your site will take to load.
If you have a URL, that you can share, I can run some tests on your site. Webflow itself uses very fast servers in the cloud, with data centers around the world, so our content delivery network should be itself nice and fast and speedy.
Generally speaking, your site will always be faster when it is published since the Webflow designer UI does not need to load published sites.
3000x2000 is massive in terms of web images. In general all images should be actual size (pixels) that they will be used on your site. if your clicking the HiDPI checkbox on your images then 2X actual size.
if your referring to background 100% browser fill images then you need to balance quality with compression trying to get the images as small kB as you can.
Dang. My images are like 2MB each (over 100 images). The other platform I was using automatically made additional versions of each image and served up the best one depending on the device.
I am a professional photographer trying to show off my work and i can’t save the jpeg quality too low and they need to look good on retina display Mac Books.
I’ll post a link once the site development is a little closer to being done.
Hi @thebecker, if your page is going to have a lot of images, I recommend getting a good image lazy loader script, which only loads images when they are requested (page scroll or user click etc) script. This can drastically improve your visitors site experience. Chances are, they are going to your site, to view all your great photos and work, so they are already expecting to view a media rich experience. So own it, and just make it yours
Here is a great script for lazy loading of your images:
You might check that out… if you need help implementing that, just reach out on the forums, there is lots of people who probably can give you some tips.
Thanks for that link @cyberdave veeeery useful! Also @thebecker you can try Optimizilla and see if it gets you better results than Photoshop save for web.
Does this script work with the Slider control? I have a number of large slide images for the homepage. Currently 11s load time at 4Mbps, hoping to lazy load these.
