Streaming live at 10am (PST)

Site loading slowly - Image size reduction


#1

Hi guys,

I might need some help with my website, hopefully you have good ideas.
As I´m presenting photographs on the site, many pictures are stored on one page. This makes the certain page load very slow.

http://light-hunters.com/travel or http://light-hunters.webflow.io/travel

I have already tried to minimize the file size to a maximum of 200kb, so the images still look fine in lightbox view. But due to the high amount of images, it still takes quite long to initially load.

My question is, if it would help to handle two versions of my images:

  • One small image with resolution of 300x200 and lowest possible file size, which will be used in the overview
  • One larger version with let´s sy 200kb, which I will use in lightbox

Will the lightbox images be loaded when clicked on, or will they load together with everything else?

If you have any other tips on how to speed up the page, let me know :slight_smile: Thanks a lot!

Tim


#2

Love the site!! Very nice… I’m new to the Webflow community but have used many design studios for many projects. I’ve come across this before and had the same issue. I would suggest using your image collections as sub-menus instead of scrolling to view.

Lightboxes can be difficult on user experience… Theoretically they make sense… but I’ve yet to receive many good reviews from clients.

Sub-menus work for me very well… and clients like the ability to click the menu (Canada, Cuba, etc) and view images within a simple viewport. This would eliminate the page loading time and minimize the site heaviness, accomplishing 2 very important issues.

Now this can be done in a number of ways:

  1. Individual pages - per menu link
  2. Create panels for each menu - so every collection is in it’s own panel on the same page… similar to a slider

You’ve already set up the side-bar menus - simply add panels on the page… layered and link them up :slight_smile: That way the images will load in the background but not called until a menu is activated… it will reduce size values so you can keep the higher image resolution.

Here’s an example of two sites we are still working on. But you can see sub-menu structure.
http://dallashoyas.com/programs.html
https://creativefitsolutions.com/index.php

These are my two favorite suggestions. Hope this helps. Good Luck


#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.