Skip Navigation

[Resolved] What Is All This Extra Code?

This thread is resolved. Here is a description of the problem and solution.

Problem: There seems to be a lot of extra code generated by Toolset plugins.

Solution: I have reported extra code to our developers for them to consider during code optimization and asset management.

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Dave 6 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#543867

I have a really, really simple page:
hidden link
I open it with Chrome in an Incognito window so no extensions, etc. are loaded and I view the source of the page. The only plugins I have loaded are WP Toolset plugins. I'm not logged in and I am using the Twenty Seventeen Theme...Take a look at this code (I've included the code in its entirety at the end of this post...What is happening here?

A few examples that stand out:
Why is it loading CSS for CRED when CRED isn't used on the page?
<link rel='stylesheet' id='toolset-select2-css-css' href='hidden link' type='text/css' media='screen' />
<link rel='stylesheet' id='toolset-select2-overrides-css-css' href='hidden link' type='text/css' media='screen' />
And what is all of this?
<symbol id="icon-behance" viewBox="0 0 37 32">
<path class="path1" d="M33 6.054h-9.125v2.214h9.125v-2.214zM28.5 13.661q-1.607 0-2.607 0.938t-1.107 2.545h7.286q-0.321-3.482-3.571-3.482zM28.786 24.107q1.125 0 2.179-0.571t1.357-1.554h3.946q-1.786 5.482-7.625 5.482-3.821 0-6.080-2.357t-2.259-6.196q0-3.714 2.33-6.17t6.009-2.455q2.464 0 4.295 1.214t2.732 3.196 0.902 4.429q0 0.304-0.036 0.839h-11.75q0 1.982 1.027 3.063t2.973 1.080zM4.946 23.214h5.286q3.661 0 3.661-2.982 0-3.214-3.554-3.214h-5.393v6.196zM4.946 13.625h5.018q1.393 0 2.205-0.652t0.813-2.027q0-2.571-3.393-2.571h-4.643v5.25zM0 4.536h10.607q1.554 0 2.768 0.25t2.259 0.848 1.607 1.723 0.563 2.75q0 3.232-3.071 4.696 2.036 0.571 3.071 2.054t1.036 3.643q0 1.339-0.438 2.438t-1.179 1.848-1.759 1.268-2.161 0.75-2.393 0.232h-10.911v-22.5z"></path>
</symbol>

I'm just kind of embarrassed to have my source code look like this. I know all generators create extra code, but the below seems like a lot. Am I missing some options I should be turning on/off to reduce the amount of unneeded code included?

Thanks,
Dave

Full code: (redacted)

edit by staff: the full code has been removed

#544010
<symbol id="icon-behance" viewBox="0 0 37 32">
<path class="path1" d="M33 6.054h-9.125v2.214h9.125v-2.214zM28.5 13.661q-1.607 0-2.607 0.938t-1.107 2.545h7.286q-0.321-3.482-3.571-3.482zM28.786 24.107q1.125 0 2.179-0.571t1.357-1.554h3.946q-1.786 5.482-7.625 5.482-3.821 0-6.080-2.357t-2.259-6.196q0-3.714 2.33-6.17t6.009-2.455q2.464 0 4.295 1.214t2.732 3.196 0.902 4.429q0 0.304-0.036 0.839h-11.75q0 1.982 1.027 3.063t2.973 1.080zM4.946 23.214h5.286q3.661 0 3.661-2.982 0-3.214-3.554-3.214h-5.393v6.196zM4.946 13.625h5.018q1.393 0 2.205-0.652t0.813-2.027q0-2.571-3.393-2.571h-4.643v5.25zM0 4.536h10.607q1.554 0 2.768 0.25t2.259 0.848 1.607 1.723 0.563 2.75q0 3.232-3.071 4.696 2.036 0.571 3.071 2.054t1.036 3.643q0 1.339-0.438 2.438t-1.179 1.848-1.759 1.268-2.161 0.75-2.393 0.232h-10.911v-22.5z"></path>
</symbol>

Absolutely nothing to be embarrassed by here. This is one of several SVG symbol definitions, used in the wp-admin bar to render iconography. It's perfectly normal, and will be seen in your source code even without Toolset enabled. Basically it's a vector graphic generated by code that renders icons without the need for images or special fonts. There are several reasons to use SVG over an image sprite or special font. Here's some more information about that:
hidden link

<link rel='stylesheet' id='toolset-select2-css-css' href='<em><u>hidden link</u></em>' type='text/css' media='screen' />
<link rel='stylesheet' id='toolset-select2-overrides-css-css' href='<em><u>hidden link</u></em>' type='text/css' media='screen' />

Do you plan to use Bootstrap styles on your site? If not, you can choose not to load Bootstrap in Toolset > Settings > General. I will inquire with our developers if this is intentional, and if they plan to help streamline the asset loads when CRED isn't in use on a page. I'm guessing that we must override some Bootstrap styles, and some of those definitions are maintained in the CRED codebase. I'll update you when I have some more information to share on that.

#544526

Thanks Christian.

The SVG explanation is helpful, I should have done more due diligence on that!

I do plan to use Bootstrap, but would like to see, as you mentioned, some more selective asset loads were components are not being used.

While I'm at it, I figured I might as well highlight a few more potential issues:

1. I can't say for sure, but based on naming convention, I'd guess that neither views-admin-dialogs-css-css nor views-admin-css-css needs to be loaded on the public facing page.

2. I'm also wondering about menu-cells-front-end-css.

3. The HTML could be cleaned up a little, right now containers appear like

<div class="container "></div>

- extra space could be removed.

4. Similarly with rows, right now

<div class="row "></div>

5. Why is there a punch of playlist code? e.g.


<div class="wp-playlist-caption">
<span class="wp-playlist-item-meta wp-playlist-item-title">&#8220;{{ data.title }}&#8221;</span>
<# if ( data.meta.album ) { #><span class="wp-playlist-item-meta wp-playlist-item-album">{{ data.meta.album }}</span><# } #>

and so on? This page doesn't do anything with this post type.

6. Similarly, I'm guessing this code is only needful for when someone is logged in as admin?

<script type='text/javascript'>

/* <![CDATA[ */

var toolset_utils_texts = {"wpv_dont_show_it_again":"Got it! Don't show this message again","wpv_close":"Close"};

var toolset_utils_texts = {"wpv_dont_show_it_again":"Got it! Don't show this message again","wpv_close":"Close"};

/* ]]> */

</script>

And again, some more playlist/album related code?

<script type='text/javascript'>

/* <![CDATA[ */

var mejsL10n = {"language":"en-US","strings":{"Close":"Close","Fullscreen":"Fullscreen","Turn off Fullscreen":"Turn off Fullscreen","Go Fullscreen":"Go Fullscreen","Download File":"Download File","Download Video":"Download Video","Play":"Play","Pause":"Pause","Captions\/Subtitles":"Captions\/Subtitles","None":"None","Time Slider":"Time Slider","Skip back %1 seconds":"Skip back %1 seconds","Video Player":"Video Player","Audio Player":"Audio Player","Volume Slider":"Volume Slider","Mute Toggle":"Mute Toggle","Unmute":"Unmute","Mute":"Mute","Use Up\/Down Arrow keys to increase or decrease volume.":"Use Up\/Down Arrow keys to increase or decrease volume.","Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.":"Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds."}};

var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"};

var mejsL10n = {"language":"en-US","strings":{"Close":"Close","Fullscreen":"Fullscreen","Turn off Fullscreen":"Turn off Fullscreen","Go Fullscreen":"Go Fullscreen","Download File":"Download File","Download Video":"Download Video","Play":"Play","Pause":"Pause","Captions\/Subtitles":"Captions\/Subtitles","None":"None","Time Slider":"Time Slider","Skip back %1 seconds":"Skip back %1 seconds","Video Player":"Video Player","Audio Player":"Audio Player","Volume Slider":"Volume Slider","Mute Toggle":"Mute Toggle","Unmute":"Unmute","Mute":"Mute","Use Up\/Down Arrow keys to increase or decrease volume.":"Use Up\/Down Arrow keys to increase or decrease volume.","Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.":"Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds."}};

var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"};

/* ]]> */

</script>

Thanks!
Dave

#545135

I will pass your concerns along to the development team. Thanks for the report!

#545286

Thanks Christian! I like WP Toolset, I think it has some rough edges that can be easily cleaned up to make it even more useful...I hope suggestions like this end up integrated. 🙂

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.