▼
Streaming live at 10am (PST)

Defer loading of e-commerce scripts and other optimisations

Design help Ecommerce
#1

Hello everyone,

  1. Is there a way to defer the loading of the cart of an e-commerce store, until the page has been painted?
    Would such a thing be advisable?
    The external scripts of stripe and paypal seem to be causing somewhat of a bottleneck.

  2. I am using 2 Google fonts on my site (Josefin Sans and Teko), causing 12 requests in total.
    Would it be advisable to download the fonts and upload them as a custom font?

  3. On my homepage, past the fold, I have a Collection of all my products, populated with inline img elements with custom attribute loading="lazy".
    I additionally implemented pagination and infinite scroll.
    This last step didn’t significantly improve my performance score, and in fact it seems that the extra script may cause small delays from time to time. Is that because images were set to lazyload already? Is it worth having the infinite scroll?

Is there any other optimisations I should be aware of, besides compressing images to death?

Here are my links:
published: https://www.milkshaken.net/
read only: https://preview.webflow.com/preview/milkshaken?utm_medium=preview_link&utm_source=dashboard&utm_content=milkshaken&preview=239060f8817d66eb084e4bc18c6da8cd&mode=preview

Thank you in advance for your help!

#2

UPDATE with what I have found out since my last post, in case it helps anyone else:

  1. Self hosting the fonts definitely offered me a significant speed advantage. I am next going to look into adding WOFF2 as a preferential file type with WOFF as a fallback to see if that will offer a significant boost. Does anyone have insights/ how-to advice on that?

  2. It turns out that the infinite scroll solution I was using was too laggy and clunky. Since upgrading to @Finseet’s free cms library component and playing with the pagination settings a bit, my performance shot up a good 15%. So that one is definitely a go-er, and highly recommended solution.

#3

As to issue 1:

I am still looking for information about deferring e-commerce specific payment scripts.
Stripe & Paypal scripts represent 20% of assets by size for my site, and they load right in the beginning.
Yet no one is likely to add anything to cart/proceed to pay while the page is still painting.
Is this really necessary?
This is the case even in pages of the site with no specific e-commerce features, such as the blog.
Seems pointless to have these often bloated error ridden scripts have such high priority.

I am definitely not an expert, so I coulb talkin sh*t.
Please do let me know if that would be not advisable and why, and if it’s possible to remedy on my end.

1 Like