Make the plugin front-end load less kb size

[worldsdream]

Hi Kevin,

I tried comparing the plugin with prismatic plugin. It uses the famous prismjs syntax highlighter.

See the screenshot for more information.

The "document" is bigger for Code Block Pro plugin compared with Prismatic plugin.
The Prismatic plugin loads 8 items with a total of 25,92 kb compared to Code Block Pro plugin loads 1 item with a total of 6,00 kb.

In my test:

Prismatic: 105,09 kb + 25,92 kb = 131,01 kb total
Code Block Pro: 145,08 kb + 6 kb = 151,08 kb total

Is it possible to make it smaller in size?

[KevinBatdorf]

It's a trade off of size for compute. Code Block Pro does very little compute on page load, and only does some font loading, line highlighting, and copy button event registration.

You could:

1. disable the copy button (saves a copy of your code - so could be significant)
2. don't use line highlighting or fonts
3. then unload the JavaScript (saves the 6kb)

To unload the JS:

add_action('wp_enqueue_scripts', function () {
  wp_deregister_script('kevinbatdorf-code-block-pro-view-script');
}, PHP_INT_MAX);

[worldsdream]

I don’t use line highlighting or fonts. Only the copy button. So I can’t unload the JS file.

I thought there could be optimization being made in the plugin so the “html” file will shrink.

[worldsdream]

Can you tell me what would be better for core web vitals and speed? Is it better to have everything in the HTML file or separated files? So I can make a decision if I use your plugin.

[KevinBatdorf]

So the way other plugins work is they load in the JS library that does the parsing once the page loads, scans the page for code, then manipulates the document to add HTMl needed. Depending on the code and complexity of the tokens, processing them can be very slow in terms of web vital performance is concerned. Loading multiple JS files can be slow too.

At the same time, loading a larger single document can also be slow depending on your server infrastructure, compression, etc. These are easier to control with global caching, etc imo though.

It's a tradeoff though. I personally think that the less JS work being done the better. But on very slow connections, loading an extra 100kb document might be an issue too.

It also depends on the code you're typically writing too. Long code snippets with a lot of tokens will add more size then something less complex. For a lot of code the overhead might be only a few kb only.

The current trend is to pre-generate static pages and ship with little or no JavaScript, which is why I took this approach to begin with. I'm trying to leave out bias here, but of course I'd recommended using this plugin.

[worldsdream]

Thanks for this explanation. I understand it completely now.

I am already using your plugin and it’s great. This is for a second site. So you know that I really like it a lot.

[KevinBatdorf]

Thanks and I appreciate the communication too. If you have any other questions or features or anything at all feel free to ask. Feedback is always helpful :)

[adriancs2]

Prismatic plugin analyze and generate coloring blocks at the client side browser, it consumes far more memory and cpu computation at client side per page. For Code Block Pro plugin, there is no code rendering required at client side browser, it's lightweight for the client's browser.