additional-checkout-buttons.css included on all pages : google pagespeed issue

[tlandru]

In the theme.liquid file, the variable {{ content_for_header }} include additional-checkout-buttons.css file on all pages, no matter if the additional checkout buttons are activated or not.

In google page speed, this CSS file block the page rendering on mobile, decreasing a lot the google pagespeed score : https://developers.google.com/speed/pagespeed/insights/?hl=us&url=https%3A%2F%2Fwww.bichette.co%2F

2 solutions :

• only include this css file on the cart page.
• do not include this css file if no additional checkout buttons are configured.

[MatthewKennedy]

Good spot, think this is an area where Shopify could improve how it uses the head content rather than a timber theme issue.

[cshold]

@NathanPJF are you able to triage this in core?

[NathanPJF]

@cshold Cool, will do.

@tlandru thanks for bring this up. I agree Shopify can do something about this render blocking. Something worth noting about the solutions proposed:

only include this css file on the cart page.

These additional checkout buttons can be used in ajax carts which appear on multiple pages. So we don't want to limit it to /cart. Doc link: https://help.shopify.com/themes/customization/cart/add-more-checkout-buttons-to-cart-page#show-checkout-buttons-in-a-cart-drawer-popup-or-sidebar

Update: Found out why additional-checkout-buttons.css when no buttons rendered - Safari/Apple Pay.

do not include this css file if no additional checkout buttons are configured.

This is the current behaviour. If you do not have PayPal Express Checkout setup, or other express payment buttons, then additional-checkout-buttons.css will not be requested. This includes having Apple Wallet enabled under your credit card provider (screenshot). Even if you're using Chrome which does not support Apple pay, Shopify will request the stylesheet - there's no client detection involved in deciding whether to load this.

[adamseoul]

I have a customer that I have setup mod_pagespeed for just to inline this CSS file. Would be great if Shopify could just inline it..