The “Custom HTML” block slows down page editing

  • The traverseCSS() function is called to process editor styles when the page is loaded into the editor.
    I’ve added some console output for demonstration: https://prnt.sc/I79b2TpavAyo and https://prnt.sc/ejkHSM4_0RMF
    This usually happens once when the editor is loaded: https://prnt.sc/hNhP4_Zg1FBv

    But if you add the “Custom HTML” block to the page: https://prnt.sc/jOiThPb8V4X1 then editing becomes very slow – any action on the page (moving the mouse, selecting a block, pressing any keys) occurs permanent recalculation of styles:
    – right after adding the block https://prnt.sc/thSEYckbEpbE
    – just moved the mouse over the page https://prnt.sc/CaSpzqu_5qyP

    The test was conducted on the theme “2021” without activated plugins!

    And now imagine a more designed theme with styles for 4-5 plugins and at least a couple of dozen blocks! Theme styles grow up to 400-500K, they take 1-1.2s to process and editing becomes hell!

    Note the duration of the ‘focusin’ and ‘keydown’ events and the execution time of the transform_styles_transformStyles() function: https://prnt.sc/FW_o5k2cwvc1

    • This topic was modified 2 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘The “Custom HTML” block slows down page editing’ is closed to new replies.