Hi, the following page load animation on desktop works on Safari and Firefox but not on Chrome (tested incognito mode and also on new Mac M1, without success).
Mobile works fine both on Chrome and Safari.
I have to deliver the website to my client soon hence the urgency.
Link:
https://www.jackytwostep.com/projects-index
I understand it’s some issue related to the collection lists but I don’t know what to do.
Hope somebody can help.
Thanks,
Cheers
Happy new year everyone. Hope you are fine and well 
@cyberdave
@webdev
@QA_Brandon
@WebDev
@KyleP
Any help on this one?
Thanks
Hi @Gio, thanks for the ping.
I am not sure I understand which animation you are referring, I am seeing animation running at page load in Chrome on my side, could you help to take a screenshot or screencast of the behavior you are wanting to change?
Thanks in advance
Hi @cyberdave , thanks for your reply. Sorry if I wasn’t clear enough. What I meant is that wheater I am going from the homepage to the Index page, or if I just use the link JACKYTWOSTEP — Projects Index, the load animation doesn’t work (as in the video here Index Load Chrome Incognito.mp4 - Google Drive) all the content just appears without fade in and movement.
Not sure why.
Thanks
Hi @Gio,
Thanks, I am not 100% sure what is causing this, but I do have some feedback of some things to check:
The projects-index page is super large at 28.7 mb and 214 page requests.
There could be a lot of gpu activity and resource usage on that page so interactions may not run as expected. I would try to keep site size as low as possible for best rendering performance, in the 1-5 mb range with under 100 page requests.
In comparison, the home page is a more normal 2.5mb page weight with 39 page requests so a much, much lighter page.
Another difference is that on the home page, the page load animation is not having a 1 second delay before the interaction starts, from the page load size the page appears sluggish, so I would try to make the projects-index page smaller in page size and number of page requests.
I hope this helps, I think reducing page weight will help, site loading in browser can start degrading in performance noticeably the bigger the page and the more page requests there are.
Also, the page load was the same for me on either Safari or Chrome on desktop or mobile, it is not very smooth, I think this is just due to the page is extremely large.
You might try removing the 1 second delay on the interactions on the projects-index page, then set the duration of the animation steps to 1 second. I would also check that all animation steps use the same easing type.
Hi @cyberdave thank you so much for the quick reply. I really appreciate your support on this.
It is very strange. On Safari and Firefox it seems to work fine.
I am not sure I follow on how to make the page lighter, unfortunately. I am not familiar with page request reasoning and I wouldn’t know where to look for these indicators.
As far as I understand, I built the page with a basic collection list behavior. Besides, the load animation should supposedly wait until everything is loaded before starting… I’m lost 
What could I practically do to reduce the weight without compromising the concept of the page? Could you point me to some specific action on what you are suggesting?
PD: I put that extra delay thinking it would be helpful to give an extra second to load the content. I see it’s pointless. But even without that, I clearly remember the page didn’t load correctly in the past.
Hi @Gio, well the page weight seems to be a factor here, it seems you have a couple of collection lists and lots of images on the page causing most of the page weight.
A very heavy page will cause interactions to sometimes not render as expected or other issues.
The page does seem to run better on Safari and Firefox, but those are different browsers than chrome and render pages differently, Chrome does not like really big pages.
It seems in the first collection list, you have 23 images per item in the collection showing, that is a huge page structure and Google recommends to not have such a big page structure.
In general, it is best to put a thumbnail image for each individual item you wish to show, then link that image to the project detail page and show the individual items with their own images on each page rather than trying to show all images on a single page.
The target page weight should be in the 1-5mb range, lower the better if possible, this means to reduce the number of images per page.
I wish I had an easy answer for you, every browser is different and Chrome in this case is not rendering such a large site very well, so I would change how many images per project you are showing and then just link to the project detail page.
The other thing is that the images that are being used are also quite large, between 250kb and 600kb per image, I would try to compress your images and optimize those prior to upload so that the image weight per image is around 50-100kb if possible, that will save a lot of page weight and allow you to use more images on the page as lower image size means lower page size.
Here is a post with some different image optimization tools: Best Image Optimization Tools
Here is an article on optimizing a site’s web performance: https://webflow.com/blog/how-to-boost-your-sites-performance
I hope this helps.
Hi @cyberdave ,
Thanks for the explanation and for the reference links.
The problem is that being this a portfolio website for a photographer, I can’t push the compression further. The pictures will look terrible. I can’t reach 100kb and have an acceptably-sharp picture, I tried that. I am already at the limit.
I discovered that from the Index page if I download a thumb it downloads in the original full size. No wonder the page it’s crazy heavy 
. I managed to scrap some kbs giving each image of the collection a max height via the image settings but it is not enough. Is there any way to make those images on the index page re-scale around 300px max height? That should do the trick since each thumb would be around 20kb but I don’t know if it is possible, and I prefer not to create another collection only for small size thumbnails. It is too much of a burden for my client when he needs to upload a new project.
A part from that, I don’t understand yet is why the interaction is broken. I mean right now is what you are saying, the page is heavy. But I have the animation when the page finishes loading, so even if it’s going to take a while to load all the content, once it is done, it should play the animation. However, as you saw the animation is being skipped altogether.
Hope I am making some sense. Thanks for the help 
Hi @Gio, when the page loads, all the images that have to load are put into memory and the bigger the page the bigger the memory load and cpu load, see here from the Chrome Task Manager:
Chrome is not good with really big pages and unexpected things can happen when the page is too big. Safari and Firefox do not seem to have the issue.
When reducing page size, the interaction behavior without any modificiation also shows correctly on chrome, so this is mainly an issue on how big the page size is.
One thing you might do is to create a single thumbnail per project item instead of 23 images per item on the project index page, then link the thumbnail to the correct project item detail page (this does mean changing up the design).
The single thumbnail could be added as a single field in the collection, then you could upload a small thumbnail with an original resolution like 100x150 px and show just the single thumbnail for the project item.
On the project detail page, you can then put the images for each item into a multi-image field and show the galleries on the project detail page using the multi-image field.
See how to use the multi-image field here: Multi-image field overview | Webflow University
Set the image size in image settings for each image to constrain the images being used, then republish.
Beyond that, I think just reducing how much is being loaded on the projects-index page is the best way to get the interaction to render as expected, I have tested and loading less images on the page does help, although this does mean a design change, or just forego that interaction all together.
One other idea might be to just take a screenshot of all the images in the designer, those appear to be linked to the same item, so maybe you can just show all the images a new single image like:
Then put that image of all the images in the collection item and when user clicks on any image there, the correct item still loads.
I hope this helps.
Hi @cyberdave , thanks for your reply. I apologize for the trouble, I appreciate your help. I see we are running in a circle though, I am probably not expressing myself clear enough, sorry.
Let me answer your suggestions point by point, it might be easier:
One thing you might do is to create a single thumbnail per project item instead of 23 images per item on the project index page, then link the thumbnail to the correct project item detail page (this does mean changing up the design).
The single thumbnail could be added as a single field in the collection, then you could upload a small thumbnail with an original resolution like 100x150 px and show just the single thumbnail for the project item.
On the project detail page, you can then put the images for each item into a multi-image field and show the galleries on the project detail page using the multi-image field.
See how to use the multi-image field here: Multi-image field overview | Webflow University
I appreciate the suggestion, but I’d like to keep the current design which is bespoke.
As to the image sizing, right now those images are being served on the project index page fully uncompressed, I would add a fixed width and height on image settings for each image widget to be something like 100px width and 150px height and then republish to see if the behavior improves:
As I mentioned in my previous message I did that, now the height is set to 150. I need the width in auto otherwise will stretch breaking proportions. I reduce the weight but is not enough.
One other idea might be to just take a screenshot of all the images in the designer, those appear to be linked to the same item, so maybe you can just show all the images a new single image like:
This is an interesting and creative solution but my client is not going to be able to do so in the future.
.
In my previous message, I asked if is there a way to re-scale the size of the image in-page. Maybe can you point me to some script or code snippet or integration or something else? If there is a way to avoid having the images fully uncompressed on index pages my guess is that will solve the problem.
On a side note, I love Webflow, I really do, love the no-code philosophy, It’s one of the best things that happened to the design community. But it’s really difficult to create a bespoke website without a lot of scripts and code snippets. I’m really thankful to all the community here for this, I couldn’t do it otherwise.
I am not a coder and it has been extremely difficult putting this together. But I don’t think is out of mind. I mean, there must be some solution, I saw designs similar to this on other websites and they work without having full uncompressed images on their index. I don’t think they are all producing the entire set of images in high res and low res all the time. There has to be some kind of automation
for the small size thumbnails set for the index.
I wonder if @webdev @QA_Brandon @KyleP or any other has any idea about it.
Hope you don’t take this rant the wrong way, really appreciate you taking the time to support me.
Cheers.
Hi Gio,
Thanks for your reply, I know it can be frustrating sometimes when the browsers do not render the same thing with the same styles etc applied, it can be tricky, but I am for sure here to help.
The suggestions I have provided so far are aimed at reducing page size which seems to the be issue, something else that may help is to use an image wrapper div for each image, then set a fixed height and width for the div block as so:
After that, insert the index image into the image wrapper div and use the object fit feature to fill: cover to have the image fill the div and show the image without aspect ratio distortion, but part of the image will be cropped at lower views.
Set the fill to contain to always show the full image within the constrained area, but may result in whitespace above and below the image:
After creating a wrapper div for every image, then republish the site.
Here is more info on using the object-fit property in Webflow: https://webflow.com/feature/object-fit-support
I also tested with an image wrapper with size set to 200px width and 150px height, here is what it looks like in the designer:
The Img index class has these settings:
With those settings the interaction behavior works as expected on my end and on the published site, the responsive images are used as there is an image constraint which causes a lower resolution image variant to be used:
Here is another variation where img index has styles applied, then changing image wrapper to 25% width and 245px height:
That combination also renders fine for me in chrome
I hope this helps.
Hi @cyberdave , sorry for the late reply. That worked. It’s still a big change to the design I had in mind. But I guess I’d need to live with it. Thank you for your support on this.
All the best