Recently. someone from the marketing team reached out to me regarding an error they kept getting when trying to share one of our Shopify page links to Twitter. Checking other pages, it looked like a wide spread issue only to Twitter. LinkedIn was showing our page just fine. The response body size of the homepage was roughly around 2.15MB. Twitter’s response body limit for cards is 2MB. I was convinced it was all the marketing scripts and plugin script injection. Isn’t it usually?
Looking at the raw HTML, there was an overload of third party scripts and services that lived on the static page, but that wasn’t what was causing the issue. Quickly scrolling down the page, something HUGE jumped out. We use Vue.js to build out a majority of layout components. Many of these components have attributes that are not scalar values.
Specifically our Side-Cart component had a single upsell attribute that used an object with deeply nested arrays and objects. There were other attributes that used the same structure, but none as enormous as the upsell attribute. When I removed side-cart entirely from our HTML, our page speed size went from 2.15MB to 230KB! While I can’t devote an entire week to refactoring Side-Cart to use only necessary values, I was able to spend a few hours to refactor the upsell attribute. Our page response size went from 2.15MB to 760KB after a few hours of breaking the data apart. Twitter cards are back.