YOU need to clean interactions, auto clean is not 100%, I show you how

[iDATUS]

Hi there,
My name is Michael and wanted to share something everyone should check before publishing a website.
Recently Webflow introduced a much welcomed clean up option for interactions.

Great, however DON’T rely on it to clean everything up, do use the tool but do some extra checking after.

Obvious ones to check are the page trigger interactions,

I found several (not these they are cool) that I had left in, I know what you are thinking, how do you forget. Well if you are constantly changing your design experimenting what works and doesn’t or perhaps do a restore of a backup, things can get missed. So check these!

Next check the actual interactions list.

Then edit each one

This one is dandy (English for works great).

Next one on the list

This is showing that something no longer exists that the action used to link to.
There are other types of warnings as well but all have the same theme that the item name is blank or a setting has not been set.

Three options, (see post by vincent below)

1. it could be used on another page
2. fix the issue - you may still want the animation or
3. manually delete the interaction.
   

Now you are thinking who cares or what is the issue.
Interactions are all JavaScript, you don’t see or change them as its Webflows built in editor that creates these.

Again you think so what.
JavaScript is not HTML or CSS, its code which slows down your website. It should be used as little as possible or to good affect.

Still don’t care you say.
Well even if you don’t use the code it gets downloaded with your website and appears like this
https://uploads-ssl.webflow.com/**************/js/webflow.*********.js

And benchmark tools such as lighthouse suggest this - Reducing JavaScript execution time
this is their definition
JavaScript executes on the main-thread and when this is happening, the browser cannot execute other tasks.

Explanation
So your browser hits this .js file, pauses your html and CSS until finished, then processes the file, then continues. I have seen posts saying why do I wait 4 seconds before something gets shown on the screen, guess what JavaScript!.

Hope that clears a few things up on how to improve your website performance and how things work.
There are a lot of things to do to get great scores, not just performance but best practice, SEO and accessibility. I thought I would pass on this little extra tip I found. Hope you get some insights from it.

If you want desktop score like this

and scores like this on your mobile

then I am available to hire.

[vincent (Vincent Bidaux)]

Thanks for the detailed post!

I believe there are some orphan Interactions that can subsist after a clean. I recently found a few.

However :

@iDATUS

This is showing that something no longer exists that the action used to link to.

This is only true for the page you’re on. The Interaction you’re inspecting will show such errors if it can’t find the targets in the current page. But they could be totally fine on the page they’ve been built for.

So it’s not because an Interaction shows yellow alerts that you have to either repair it or delete it.

[iDATUS]

Thanks for reply and kind words, good point.
The example did happen on the page, I linked to a div. clicked done then deleted the div as I couldn’t re-create the actual damaged ones I cleaned up.
Webflow could really do with some more “this is being used here” options.

I will add a note in the original post, don’t want accidental deletions.