Why is my checkout page loading slowly due to CSS?

Why is my checkout page loading slowly due to CSS?

vonfeist-lato
Shopify Partner
2 0 2

Hey everyone,

 

I'm having some issues with the checkout. When customers go from the cart to the checkout, it was reported that it takes up to 13 seconds for the checkout to load. A lot of people don't even buy because of that.

 

I've investigated a bit and found out that there is the v2-ltr stylesheet that takes very long to load. Removing the `{{ checkout_stylesheet }} makes the checkout 100% faster - though look terribly.

I've attached two screenshots showing what file loads slowing and where it can be found in the DOM. I'm wondering - why is that file so slow and how can I improve the speed of it?

Bildschirmfoto 2022-10-06 um 10.41.44.pngBildschirmfoto 2022-10-06 um 10.53.31.png

Shop: sheko.com

 

Cheers, 

Feist

 

Replies 5 (5)

Angel95
Pathfinder
101 6 8

Hello Feist,

 

If you want i can help you with that to you.

banned
vonfeist-lato
Shopify Partner
2 0 2

Hey Angel,

 

would you mind giving me more feedback on my question? I can't really do anything with this answer.

 

Cheers,

Feist

Angel95
Pathfinder
101 6 8

Hello,

 

How much you want to increase the site of the speed. Because it is showing 75%.

 

 

banned

Cedcommerce
Shopify Partner
718 76 113

Hello @vonfeist-lato,

 

Good speed scores are very important for better conversion and sales.
Though we cannot modify the checkout page at normal plans except for the Shopify Plus plan. We can help you improve the overall performance of the website which would surely improve the time for the checkout page to load.  

I checked the cart page of your website and it has multiple speed issues. 

 

1. Unused Javascript files. 

Cedcommerce_0-1665145062923.png

 

If you see the image you have multiple javascript files that are blocking the speed of the page such as the empire theme JS file, wishlist hero app script, stackable app script, hotjar script, Mailchimp, and Facebook sales channel script, etc.
These all scripts can be lazyloaded to improve speed scores. 

 

2. Third-Party codes

Cedcommerce_1-1665145062709.png

 

  

As I mentioned before that there are multiple scripts that are blocking the page to load you can see the list of scripts and the time and resources they take and can be optimized in order to achieve better performance of the page. 

 

3. Image optimization 

4. Fonts and CSS optimization   Cedcommerce_2-1665145062958.png

 


These are the list of fonts that can be optimized in order to improve the overall FCP and LCP scores of the website. 

 

5. Eliminate render-blocking resources Cedcommerce_3-1665145062744.png

 

 

6. Reduce Javascript execution time

You can see below the number of javascript files that are executing during page load, these page request calls can be lowered and thus ensure better speed. 

Cedcommerce_4-1665145062924.png

 

You can view the speed issues of your cart page using the below link
https://pagespeed.web.dev/report?url=https%3A%2F%2Fchinahobbyline.com%2Fcart

 

All the best,
Team CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

flareAI
Shopify Partner
2405 223 541

Hello @vonfeist-lato,


This is flareAI: your Fully Automated Free Sales Machine. I hope you're having a good day. We are helping Shopify Merchants grow their store presence in Google and other major sales channels and generate $5+ million in sales from Google Search, on autopilot.

 

If my suggestions is helpful to you, please let me know by giving a like or marking it as a solution.


That file is part of the default layout styles for the Checkout. It is not part of the theme so you won't have access to it.

 

Hope this helps,

 

Gina

flareAI

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing