[Performance] CSS Loading improvements

assets/base.css

@@ -82,10 +82,6 @@
  padding: 0 1.5rem;
 }
 
-body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
- max-width: 100%;
-}
-
 .page-width.drawer-menu {
  max-width: 100%;
 }
@@ -234,10 +230,6 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  z-index: 2;
 }
 
-::selection {
- background-color: rgba(var(--color-foreground), 0.2);
-}
-
 .text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
@@ -465,22 +457,6 @@ table:not([class]) th {
  opacity: 0.7;
 }
 
-a:empty,
-ul:empty,
-dl:empty,
-div:empty,
-section:empty,
-article:empty,
-p:empty,
-h1:empty,
-h2:empty,
-h3:empty,
-h4:empty,
-h5:empty,
-h6:empty {
- display: none;
-}
-
 .link,
 .customer a {
  cursor: pointer;
@@ -1533,20 +1509,6 @@ details[open] > .share-button__fallback {
  height: 1.5rem;
 }
 
-.share-button__message:not(:empty) {
- display: flex;
- align-items: center;
- width: 100%;
- height: 100%;
- margin-top: 0;
- padding: 0.8rem 0 0.8rem 1.5rem;
- margin: var(--inputs-border-width);
-}
-
-.share-button__message:not(:empty):not(.hidden) ~ * {
- display: none;
-}
-
 /* component-form */
 .field__input,
 .select__select,
@@ -2500,8 +2462,7 @@ input[type='checkbox'] {
  overflow: hidden;
 }
 
-.header__icon:not(.header__icon--summary),
-.header__icon span {
+.header__icon-center {
  display: flex;
  align-items: center;
  justify-content: center;
@@ -2511,7 +2472,7 @@ input[type='checkbox'] {
  color: rgb(var(--color-foreground));
 }
 
-.header__icon span {
+.header__icon-full-height {
  height: 100%;
 }
 

assets/component-localization-form.css

@@ -226,6 +226,10 @@
  visibility: hidden;
 }
 
+.country-selector__overlay:empty {
+ display:none;
+}
+
 @media screen and (max-width: 749px) {
  .disclosure__list-wrapper.country-selector:not([hidden]) + .country-selector__overlay:empty {
  display: block;

assets/component-predictive-search.css

@@ -126,8 +126,8 @@ predictive-search[loading] .predictive-search__results-groups-wrapper ~ .predict
  display: initial;
 }
 
-.predictive-search__list-item[aria-selected='true'] > *,
-.predictive-search__list-item:hover > *,
+.predictive-search__list-item[aria-selected='true'],
+.predictive-search__list-item:hover,
 .predictive-search__item[aria-selected='true'],
 .predictive-search__item:hover {
  color: rgb(var(--color-foreground));

assets/component-price.css

@@ -5,7 +5,7 @@
  color: rgb(var(--color-foreground));
 }
 
-.price > * {
+.price--block {
  display: inline-block;
  vertical-align: top;
 }

assets/global.js

@@ -75,13 +75,21 @@ document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
  if (summary.nextElementSibling.getAttribute('id')) {
  summary.setAttribute('aria-controls', summary.nextElementSibling.id);
  }
+});
 
- summary.addEventListener('click', (event) => {
- event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
- });
+document.addEventListener('click', (event) => {
+ const target = event.target.closest('[id^="Details-"] summary');
+ if (target) {
+ target.setAttribute('aria-expanded', !target.closest('details').hasAttribute('open'));
+ }
+});
 
- if (summary.closest('header-drawer, menu-drawer')) return;
- summary.parentElement.addEventListener('keyup', onKeyUpEscape);
+document.addEventListener('keyup', (event) => {
+ const target = event.target.closest('[id^="Details-"] summary');
+ if (target && !event.target.closest('header-drawer, menu-drawer')) {
+ event.target = target;
+ onKeyUpEscape(event);
+ }
 });
 
 const trapFocusHandlers = {};

assets/localization-form.js

@@ -35,7 +35,13 @@ if (!customElements.get('localization-form')) {
  this.elements.resetButton.addEventListener('mousedown', (event) => event.preventDefault());
  }
 
- this.querySelectorAll('a').forEach((item) => item.addEventListener('click', this.onItemClick.bind(this)));
+ this.addEventListener('click', function(event) {
+ const target = event.target.closest('a');
+ if (target) {
+ event.preventDefault();
+ this.onItemClick(target);
+ }
+ });
  }
 
  hidePanel() {
@@ -102,10 +108,9 @@ if (!customElements.get('localization-form')) {
  }
  }
 
- onItemClick(event) {
- event.preventDefault();
+ onItemClick(target) {
  const form = this.querySelector('form');
- this.elements.input.value = event.currentTarget.dataset.value;
+ this.elements.input.value = target.closest('a').dataset.value;
  if (form) form.submit();
  }
 

assets/template-giftcard.css

@@ -5,22 +5,6 @@
  box-sizing: inherit;
 }
 
-a:empty,
-ul:empty,
-dl:empty,
-div:empty,
-section:empty,
-article:empty,
-p:empty,
-h1:empty,
-h2:empty,
-h3:empty,
-h4:empty,
-h5:empty,
-h6:empty {
- display: none;
-}
-
 html {
  font-size: calc(var(--font-body-scale) * 62.5%);
  box-sizing: border-box;

sections/announcement-bar.liquid

@@ -1,5 +1,7 @@
-{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
-{{ 'component-slider.css' | asset_url | stylesheet_tag }}
+{%- if section.blocks.size > 1 -%}
+ {{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
+ {{ 'component-slider.css' | asset_url | stylesheet_tag }}
+{%- endif -%}
 
 {%- liquid
  assign social_icons = true

sections/footer.liquid

@@ -1,9 +1,9 @@
 {% comment %}theme-check-disable UndefinedObject{% endcomment %}
-{{ 'section-footer.css' | asset_url | stylesheet_tag }}
-{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
-{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}
-{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}
-{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
+<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
+<link rel="stylesheet" href="{{ 'section-footer.css' | asset_url }}" media="print" onload="this.media='all'">
+<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
+<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
+<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
 
 {%- style -%}
  .footer {

sections/header.liquid

@@ -255,7 +255,7 @@
  {%- else -%}
  {% render 'icon-account' %}
  {%- endif -%}
- <span class="visually-hidden">
+ <span class="visually-hidden header__icon-full-height">
  {%- liquid
  if customer
  echo 'customer.account_fallback' | t
@@ -282,7 +282,7 @@
  render 'icon-cart'
  endif
  -%}
- <span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
+ <span class="visually-hidden header__icon-full-height">{{ 'templates.cart.cart' | t }}</span>
  {%- if cart != empty -%}
  <div class="cart-count-bubble">
  {%- if cart.item_count < 100 -%}

snippets/card-product.liquid

@@ -21,12 +21,20 @@
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
 {% endcomment %}
 {%- unless skip_styles -%}
- {{ 'component-rating.css' | asset_url | stylesheet_tag }}
- {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
+ {%- if show_rating -%}
+ {{ 'component-rating.css' | asset_url | stylesheet_tag }}
+ {%- endif -%}
+
+ {%- if card_product.quantity_price_breaks_configured? -%}
+ {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
+ {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
+ {%- endif -%}
+
+ {%- if quick_add == 'bulk' -%}
+ {{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
+ {%- endif -%}
 
  {{ 'component-price.css' | asset_url | stylesheet_tag }}
- {{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
- {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
 {%- endunless -%}
 {%- if card_product and card_product != empty -%}
  {%- liquid

snippets/facets.liquid

@@ -12,9 +12,8 @@
  {% render 'facets', results: collection, enable_filtering: true, enable_sorting: true, filter_type: 'vertical', paginate: paginate %}
 {% endcomment %}
 
-{{ 'component-show-more.css' | asset_url | stylesheet_tag }}
-{{ 'component-swatch-input.css' | asset_url | stylesheet_tag }}
-{{ 'component-swatch.css' | asset_url | stylesheet_tag }}
+{% assign skip_swatches_styles = false %}
+{% assign skip_show_more_styles = false %}
 
 {%- liquid
  assign sort_by = results.sort_by | default: results.default_sort_by
@@ -103,7 +102,6 @@
  </div>
  {%- endif -%}
 
- <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
  {% comment %} Filters for both horizontal and vertical filter {% endcomment %}
  {%- for filter in results.filters -%}
  {% liquid
@@ -227,8 +225,10 @@
  product_form_id: 'FacetFiltersForm',
  swatch: value.swatch,
  checked: value.active,
- disabled: is_disabled
+ disabled: is_disabled,
+ skip_styles: skip_swatches_styles
  %}
+ {% assign skip_swatches_styles = true %}
  </div>
 
  {{ text_value }}
@@ -294,6 +294,12 @@
  </ul>
  </fieldset>
  {%- if filter.values.size > show_more_number and filter_type == 'vertical' -%}
+ {% unless skip_show_more_styles %}
+ <script src="{{ 'show-more.js' | asset_url }}" defer="defer"></script>
+ {{ 'component-show-more.css' | asset_url | stylesheet_tag }}
+ {% endunless %}
+
+ {% assign skip_show_more_styles = true %}
  <show-more-button>
  <button
  class="button-show-more link underlined-link"

snippets/header-drawer.liquid

@@ -11,7 +11,7 @@
  class="header__icon header__icon--menu header__icon--summary link focus-inset"
  aria-label="{{ 'sections.header.menu' | t }}"
  >
- <span>
+ <span class="header__icon-full-height header__icon-center">
  {% render 'icon-hamburger' %}
  {% render 'icon-close' %}
  </span>

snippets/header-search.liquid

@@ -15,7 +15,7 @@
  aria-haspopup="dialog"
  aria-label="{{ 'general.search.search' | t }}"
  >
- <span>
+ <span class="header__icon-full-height header__icon-center">
  <svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false">
  <use href="#icon-search">
  </svg>