Solved

Klaviyo JavaScript Speed Concerns

  • 19 March 2021
  • 7 replies
  • 2189 views
D
Badge +2

Hi,

I’m finding the Klaviyo javascript files that are loaded on my woocommerce site are quite large and to slow to load, especially the signup forms code. This is effecting my page speed scores, especially on mobile. Is there any way to  reduce the size or improve speed.

e.g: the worst two doing a speed test on 4G with iPhone 8

https://static.klaviyo.com/onsite/js/vendors~signupForms.c5281a1cf01a6aa6b778.js is 62Kb and takes 980mSec

https://static.klaviyo.com/onsite/js/signupForms.f623ff6bb42172cd72c3.js is 35Kb and takes 540mS

 

The images are also a big hit and get this warning, is there a way to set them to lazy load or serve webp format (i do that with all other images on the site)

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive

 

Resource Savings in bytes
https://d3k81ch9hvuctc.cloudfront.net/company/XWgQBz/images/adf82c19-9267-44e8-987c-842a747773a6.jpeg 50,511 bytes
https://d3k81ch9hvuctc.cloudfront.net/company/XWgQBz/images/7cba6e5f-3c66-4531-b58d-29b2a2870a66.png

40,790 bytes

 

 
icon

Best answer by julie.accardo 20 March 2021, 15:54

View original

7 replies

julie.accardo
Rank
Userlevel 5
Badge +34

Hi @dethorpe,

The JS plugin added to your site by Klaviyo loads asynchronous, which means it will load once your website has fully loaded. This shouldn’t be impacting site performance.

As an alternative option, you do have the ability to create a custom integration that does not use the plugin. This guide walks through the process: https://help.klaviyo.com/hc/en-us/articles/115005082927-Integrate-a-Custom-Ecommerce-Cart-or-Platform

Best,

Julie

JA
D
Badge +2

Thanks Julie, It’s not the plugin code itself i see an issue with though, your right that is async, and i’ve set it to defer as well.

it seems to be the extra js and images for the embedded and pop-up sign ups forms that is pulled in. I get these warnings, which sounds like things are not defered or lazyloaded

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

for: https://d3k81ch9hvuctc.cloudfront.net/company/XWgQBz/images/adf82c19-9267-44e8-987c-842a747773a6.jpeg

https://d3k81ch9hvuctc.cloudfront.net/company/XWgQBz/images/7cba6e5f-3c66-4531-b58d-29b2a2870a66.png

 

Reduce the impact of third-party code Third-party code blocked the main thread for 1,380 ms :

For:

Third-Party
Transfer Size
Main-Thread Blocking Time
Klaviyo
258 KiB
1,381 ms
…js/vendors~View.6cd7a29….js
(static.klaviyo.com)
70 KiB
1,023 ms
64 KiB
208 ms
…js/signupForms.fa5599b….js
(static.klaviyo.com)
36 KiB
149 ms
     

 

 

Maybe I’m misunderstanding these warnings, but sounds like there is more impact than i’d like here, can I do anything to help improve this?

caroline
Userlevel 5
Badge +8

Hi @dethorpe,

Can you clarify if you’re using embedded, popup, or flyout forms? Additionally, have you set the form JS scripts to load asynchronously?

Best,

Caroline

Caroline Lu
D
Badge +2

Hi,

I’m using an embedded footer form and a popup after 15secs. The plugin is set to async and deferred using the asset speedup pro plugin.

I haven’t seen anywhere to set option for the signup form js though, how do i do that, is there some settings in klavio? I could possible set the JS URLs to defer using the WP rocket caching plugin, will try that.

caroline
Userlevel 5
Badge +8

Hi @dethorpe,

You can add a short time delay to popup or flyout forms (3-5 seconds). Sometimes our forms load too quickly and some speed testing tools count that as part of the page loading time.

Best,

Caroline

Caroline Lu
D
Rank
Userlevel 1
Badge +2

Klaviyo is solving problems and creating them as well(slowing down site speed). It’s a great service . Only they need to focus on optimization of delivering scripts on sites

Are you Klaviyo workers are likinig each others posts?

M
Rank
Badge +2

@dethorpe we had the same problem. The main issue is that Klaviyo loads on every single page instead of only the ones where you need the form.  We created a Shopify app that helps to reduce unused Javascript on the pages where it isn’t required. This means you can block Klaviyo’s JS on most of the pages:
https://apps.shopify.com/pagespeed-javascript

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.