improve lighthouse scores: image priority and long-poll removal

- Add priority attr to product_card, thread through to responsive_image
- First 2 featured products get fetchpriority="high" and eager loading
- Remove longPollFallbackMs to avoid unnecessary fallback attempt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-08 23:43:01 +00:00
parent 865e3563b6
commit c5e353eba1
2 changed files with 12 additions and 5 deletions

View File

@ -286,7 +286,6 @@ const Lightbox = {
const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
const liveSocket = new LiveSocket("/live", Socket, { const liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
params: {_csrf_token: csrfToken}, params: {_csrf_token: csrfToken},
hooks: {...colocatedHooks, ColorSync, Lightbox, CartPersist, CartDrawer}, hooks: {...colocatedHooks, ColorSync, Lightbox, CartPersist, CartDrawer},
}) })

View File

@ -35,6 +35,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
attr :show_badges, :boolean, default: nil attr :show_badges, :boolean, default: nil
attr :show_delivery_text, :boolean, default: nil attr :show_delivery_text, :boolean, default: nil
attr :clickable, :boolean, default: nil attr :clickable, :boolean, default: nil
attr :priority, :boolean, default: false
def product_card(assigns) do def product_card(assigns) do
# Apply variant defaults for nil values # Apply variant defaults for nil values
@ -71,6 +72,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product} product={@product}
theme_settings={@theme_settings} theme_settings={@theme_settings}
variant={@variant} variant={@variant}
priority={@priority}
show_category={@show_category_resolved} show_category={@show_category_resolved}
show_badges={@show_badges_resolved} show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved} show_delivery_text={@show_delivery_text_resolved}
@ -86,6 +88,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product} product={@product}
theme_settings={@theme_settings} theme_settings={@theme_settings}
variant={@variant} variant={@variant}
priority={@priority}
show_category={@show_category_resolved} show_category={@show_category_resolved}
show_badges={@show_badges_resolved} show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved} show_delivery_text={@show_delivery_text_resolved}
@ -101,6 +104,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product} product={@product}
theme_settings={@theme_settings} theme_settings={@theme_settings}
variant={@variant} variant={@variant}
priority={@priority}
show_category={@show_category_resolved} show_category={@show_category_resolved}
show_badges={@show_badges_resolved} show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved} show_delivery_text={@show_delivery_text_resolved}
@ -113,6 +117,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
attr :product, :map, required: true attr :product, :map, required: true
attr :theme_settings, :map, required: true attr :theme_settings, :map, required: true
attr :variant, :atom, required: true attr :variant, :atom, required: true
attr :priority, :boolean, default: false
attr :show_category, :boolean, required: true attr :show_category, :boolean, required: true
attr :show_badges, :boolean, required: true attr :show_badges, :boolean, required: true
attr :show_delivery_text, :boolean, required: true attr :show_delivery_text, :boolean, required: true
@ -126,6 +131,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
<.product_card_image <.product_card_image
product={@product} product={@product}
variant={@variant} variant={@variant}
priority={@priority}
class="product-image-primary w-full h-full object-cover transition-opacity duration-300" class="product-image-primary w-full h-full object-cover transition-opacity duration-300"
/> />
<%= if @theme_settings.hover_image && @product[:hover_image_url] do %> <%= if @theme_settings.hover_image && @product[:hover_image_url] do %>
@ -163,6 +169,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
# Requires source_width to be set for responsive image support. # Requires source_width to be set for responsive image support.
attr :product, :map, required: true attr :product, :map, required: true
attr :variant, :atom, required: true attr :variant, :atom, required: true
attr :priority, :boolean, default: false
attr :class, :string, default: "" attr :class, :string, default: ""
attr :image_key, :atom, default: :primary attr :image_key, :atom, default: :primary
@ -203,7 +210,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
class={@class} class={@class}
width={600} width={600}
height={600} height={600}
priority={@variant == :minimal} priority={@priority}
/> />
<% else %> <% else %>
<img <img
@ -211,8 +218,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
alt={@product.name} alt={@product.name}
width="600" width="600"
height="600" height="600"
loading={if @variant == :minimal, do: nil, else: "lazy"} loading={if @priority, do: nil, else: "lazy"}
decoding={if @variant == :minimal, do: nil, else: "async"} decoding={if @priority, do: nil, else: "async"}
class={@class} class={@class}
/> />
<% end %> <% end %>
@ -715,12 +722,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
</h2> </h2>
<.product_grid theme_settings={@theme_settings}> <.product_grid theme_settings={@theme_settings}>
<%= for product <- Enum.take(@products, @limit) do %> <%= for {product, idx} <- @products |> Enum.take(@limit) |> Enum.with_index() do %>
<.product_card <.product_card
product={product} product={product}
theme_settings={@theme_settings} theme_settings={@theme_settings}
mode={@mode} mode={@mode}
variant={:featured} variant={:featured}
priority={idx < 2}
/> />
<% end %> <% end %>
</.product_grid> </.product_grid>