Performance: Remove time from CSS/JS enqueues

Thanks for the work into this theme.

I noticed the theme is using time() for enqueued CSS, JS and Google Fonts. This forces the browser to redownload CSS/JS files on each page as the time and version changes between pages. This can slow down the Largest Contentful Paint while the browser waits to redownload the CSS files while navigating the site.

To speed that up and allow CSS and JS files to be served from the browser’s cache can you please remove time(). The theme version is actually already appended using “SOLACE_VERSION” so you can remove “?v=’ . time()” completely:

wp_enqueue_style( 'solace-admin-global-style', get_template_directory_uri() . '/assets-solace/css/admin-global.css?v=' . time(), array(), SOLACE_VERSION );

Would be changed to (“?v=’ . time()” replaced with a single quote):

wp_enqueue_style( 'solace-admin-global-style', get_template_directory_uri() . '/assets-solace/css/admin-global.css', array(), SOLACE_VERSION );

time can also be removed completely from the google fonts look up as there’s no reason to use it there:

wp_enqueue_style('google-fonts-' . $heading, 'https://fonts.googleapis.com/css?family=' . $$fontVariable . '&display=swap&v=' . time());

Replaced with:

wp_enqueue_style('google-fonts-' . $heading, 'https://fonts.googleapis.com/css?family=' . $$fontVariable . '&display=swap');

This is used in around 20 template files.

Would it also be possible to stop the Google Fonts loading when Arial, sans-serif is present? This returns a broken Google font request which is requested again on each page.

  $cart_title_font_family = get_theme_mod('solace_wc_custom_general_cart_title_font_family', 'Arial, sans-serif');
    $cart_title_google_font = str_replace(' ', '+', $cart_title_font_family);
    if ($cart_title_font_family && !in_array($cart_title_font_family, ['Arial', 'sans-serif', 'Times New Roman', 'Georgia', 'Tahoma', 'Verdana','Arial, sans-serif'])) {
        wp_enqueue_style(
            'solace-cart-title-fonts',
            "https://fonts.googleapis.com/css2?family={$cart_title_google_font}:wght@300;400;500;600;700&display=swap&v=" . time(),
            [],
            null
        );
    }

“Arial, sans-serif” is being set as the default above but isn’t excluded in the list (only “Arial”). This is also used in a number of Google font lookups in the solace_scripts function. The excluded Fonts list looks different there and the code above should probably match that.

For further optimization it could be coded to prevent the same Google font being retrieved multiple times:

<link rel='stylesheet' id='solace-cart-description-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-cart-price-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-cart-button-fonts-css' href='https://fonts.googleapis.com/css2?family=Cormorant%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-checkout-title-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-checkout-description-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-checkout-button-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-account-title-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-account-description-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-account-price-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />
<link rel='stylesheet' id='solace-account-button-fonts-css' href='https://fonts.googleapis.com/css2?family=Arial%2C+sans-serif%3Awght%40300%3B400%3B500%3B600%3B700&#038;display=swap' media='all' />

Could all be one request.

Hope that helps!