HTML size of <head> element is bloated

Description
Hello, it looks like Zoom Web SDK dumps a lot of stuff into the section of the html page. This results in the size of the page to be over 20mb.

This breaks reporting libraries (FullStory)

Error
The full error message or issue you are running into.

Which Web Client SDK version?
1.8.6

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Open Chrome’s Dev Tools and switch to the “Elements Tab”
  2. Right click on the root <html> element and choose “Edit as HTML”
  3. Copy the contents of the HTML and Paste into a new document on you computer.
  4. Save the file and check its size.
  5. Size of the head is over 20mb

Device (please complete the following information):

  • Device: Mac
  • OS: OS X
  • Browser: Chrome
1 Like

Hi @ilya1,

Thank you for using the Developer Forum. First, please try testing with the latest version of the Web SDK and see if the issue persists. There have been multiple bug fixes since your version of the SDK. You can test using our Sample Web App to confirm if you see the same issue.

Please let me know if this helps.

Best,
Donte

Yes, I tried version 1.9.1 and it makes the size every larger

Hey @ilya1,

Where are you seeing that the Web SDK adds ~20MB to the size of the web page? While we are always working to improve the size and efficiency of the Web SDK, my understanding is that it shouldn’t be 20MB.

Thanks,
Max

Hi Max, I tried the sample app provided by zoom (GitHub - zoom/sample-app-web: Zoom Web SDK Sample App) and it is still huge (22mb)

Here is how to replicate

  1. git clone git@github.com:zoom/sample-app-web.git
  2. cd sample-app-web/Local
  3. yarn
  4. yarn start
  5. open http://0.0.0.0:9999/ in browser
  6. Open Chrome’s Dev Tools and switch to the “Elements Tab”
  7. Right click on the root <html> element and choose “Edit as HTML”
  8. Copy the contents of the HTML and Paste into a new document on you computer.
  9. Save the file and check its size - it is 22mb

Hey @ilya1,

Thank you for clarifying. I should note that the size of the copied HTML won’t be what is actually transferred over the network. This is due to caching and compression as well as reactive code that generates more code when it is run from your browser.

The best method to use is the Network tab of your browser’s developer tools. When I did this, I saw the data transferred was 6.6 MB. When it comes to a production app, you can reduce that size even further using server and client optimization (such as gzip and webpack).

Of course, we are also always working to improve the Web SDK and reduce the size while also improving browser support and adding features.

Thanks,
Max

Hi Max, thanks for your comment. Yes, I understand what you mean, however, some analytics tools (in this case, Fullstory, but there are plenty of others) run after the full dom is generated and they transfer over the fully generated HTML code after React is done donig it’s thing. And that code is 22MB.

I see the same code blocks appear over and over again.
For example, the following block appears 136 times. Is there a way to refactor it so it doesn’t duplicate so many times? Or open to other suggestions

    @-webkit-keyframes audio {
      0% {
        background-position: -136px -67px;
      }
      35% {
        background-position: -168px -67px;
      }
      50% {
        background-position: -200px -67px;
      }
      65% {
        background-position: -232px -67px;
      }
      80% {
        background-position: -296px -67px;
      }
      95% {
        background-position: -360px -67px;
      }
      100% {
        background-position: -200px -67px;
      }
    }
1 Like

Hey @ilya1,

Thank you for clarifying, I see what you mean in regard to duplicate code. This should be improved when we release the more customizable version of the Web SDK with v2. In that version, we’ve refactored the dependencies used by the SDK.

I think the best option is to implement a dependency bundler such as Webpack. Webpack can create a dependency graph for each of your routes and then produce bundled assets that only include a single version of what is needed on the current page.

You can look to our Sample Vue.js App, Sample Angular App or Sample React App for an example of how to do that with some popular frameworks.

Let me know if that helps.

Thanks,
Max

1 Like

I see. Sure, happy to try webpack solution (I have use webpack in my app). However, I don’t see webpack configuration in the sample app GitHub - zoom/websdk-sample-react: Use the Zoom Web SDK in a React App

Hey @ilya1,

We used the create-react-app command to create the scaffolding for that project which includes the following features:

  • React, JSX, ES6, TypeScript and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. ( Note: Using the service worker is opt-in as of react-scripts@2.0.0 and higher )
  • Hassle-free updates for the above tools with a single dependency.

More information can be found here.

As you can see there, it includes a build script to bundle resources. If you want to customize the configuration of Webpack or any other features there, you can follow the steps below:

Let me know if that helps.

Thanks,
Max

2 Likes