search

Shopify / Timber

The ultimate Shopify theme framework, built by Shopify.
MIT License
1.08k stars 492 forks source link

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

Open tlandru opened 7 years ago

tlandru commented 7 years ago

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 :

MatthewKennedy commented 7 years ago

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

cshold commented 7 years ago

@NathanPJF are you able to triage this in core?

NathanPJF commented 7 years ago

@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 commented 7 years ago

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..