Grid ID's based CSS bloat caused by GRID elements inside Symbols

@Waldo — I am having the exact same problem as you solved here last year RESOLVED: Publishing time-out - #8 by aaronocampo

Site not publishing, timing out, in any browser, in incognito mode or otherwise, while my other sites from same account publish fine in 5-10 seconds. Other sites on other client accounts (with larger page/class/image numbers) publish with no problem in 5-10 seconds.

Occurred instantly after a major Designer crash last night (I submitted the report it requested) which I have not seen in over 3 years of using Webflow.

Thank you,


Read-only link:

https://preview.webflow.com/preview/yagnyuk?utm_medium=preview_link&utm_source=designer&utm_content=yagnyuk&preview=d08835d87e128ef04fa9242dbb287aaa&mode=preview

A look through site backups showed that concurrently with publishing issue described above, a fast/inaccurate increase in display of “# on page / # on site” elements was occurring.

Appears similar to the issue covered here - A ghosted bug which you couldn't see — total element count is inaccurate
.
.
.
Here is the stat at july4th.1149PM.PST — showing correct # of elements (57)


.
.
.

The save (july5th.1230AM.PST) prior to the last publish showed an increase to of 4 to 61 overall elements coinciding with an addition of a symbol which only contained 2 instances of the element.

.
.
.
After the site stopped publishing these numbers quickly increased, concurrently with addition of 4-5 symbols. At july5th.116AM.PST:

.
.
.

July5th.344am.PST

.
.
.

july5th.150pm.PST

etc.

From the code export of the current site, the css file is giant at 17mb, mostly due to the auto generated ID’s for the grid parts — as initially discussed here - CSS Grids Exported Code.

Would be interesting to know how many of those are unused, and does the system clear the unused one? Given how easy grid is to play around with, one can end up with a myriad classes just by editing a single grid over during the design stage?

The code export for the last published version (july5th.1230AM.PST) has the css file at 16mb, which is appears to somehow minify to 74kb when analyzed with web inspector. I am guessing there must be at least some ID cleaning up done on your end during the publishing process?

Hi @Dimony, our team is helping to take a look further, the moment there is new info, will provide and update.

Thanks in advance.

Sounds good.

Having turned off “minify CSS” on your advice and the site is back to publishing. I am in the process of removing all of the grid elements not crucial to the layout, and it has reduced css file in the code export to 11mb from 17mb.

Grid seems to be very useful for complex layouts, but a little taxing in excessive use under the current version.

Cheers,

Latest export of CSS is 17.9MB

Splitting the file between ID-based and CLASS-based content:

  1. ID-CSS — 17.8MB
  2. CLASS-CSS — 90kb

I do not have the capacity to check the precise source of the ID’s but it appears virtually all of them are GRID-positioning and alignment.

I assume there was a valid reason on your end for not attaching GRID-positioning and alignment to the CLASS in the original implementation.

I understand you are working on the solution the the original problem in this thread. The source of the problem appears to be the ID bloat described above. A few questions:

Is this cache related, and does the CSS file gets cleared of unused ID’s?

Is there any chance of this problem being fixed? either through CLASS based approach or something else you are working on.

Thus an identical GRID used as a symbol across X-number of pages, will create X-number of ID’s for a same page element.

@cyberdave — maybe this will be useful for you:

I have exported the site code a few items, while adjusting GRID items in Designer and isolated the exact problems for the CSS bloat:

A. Grids inside Symbols creates extensively duplicated CSS

  1. When GRID element is used inside a symbol, ID’s (and accompanying CSS) of the GRID’s children is replicated several hundred times. 231 times for most occurrences on this site.

  2. Removing the symbol removes the duplicate ID CSS.


B. ID’s of Grid children do not get removed on when parent element is not set to GRID anymore — creating unused CSS.

  1. Cutting/pasting the children elements back in after removing the GRID parent removes the ID’s and accompanying CSS.

After removing all of the above site CSS reduced from 19MB to 2.6MB, CSS is able to be minified again, and the site publishes fine.

I assume both of these issues are what you are working on addressing

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