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 liveSocket = new LiveSocket("/live", Socket, {
longPollFallbackMs: 2500,
params: {_csrf_token: csrfToken},
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_delivery_text, :boolean, default: nil
attr :clickable, :boolean, default: nil
attr :priority, :boolean, default: false
def product_card(assigns) do
# Apply variant defaults for nil values
@ -71,6 +72,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product}
theme_settings={@theme_settings}
variant={@variant}
priority={@priority}
show_category={@show_category_resolved}
show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved}
@ -86,6 +88,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product}
theme_settings={@theme_settings}
variant={@variant}
priority={@priority}
show_category={@show_category_resolved}
show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved}
@ -101,6 +104,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
product={@product}
theme_settings={@theme_settings}
variant={@variant}
priority={@priority}
show_category={@show_category_resolved}
show_badges={@show_badges_resolved}
show_delivery_text={@show_delivery_text_resolved}
@ -113,6 +117,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
attr :product, :map, required: true
attr :theme_settings, :map, required: true
attr :variant, :atom, required: true
attr :priority, :boolean, default: false
attr :show_category, :boolean, required: true
attr :show_badges, :boolean, required: true
attr :show_delivery_text, :boolean, required: true
@ -126,6 +131,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
<.product_card_image
product={@product}
variant={@variant}
priority={@priority}
class="product-image-primary w-full h-full object-cover transition-opacity duration-300"
/>
<%= 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.
attr :product, :map, required: true
attr :variant, :atom, required: true
attr :priority, :boolean, default: false
attr :class, :string, default: ""
attr :image_key, :atom, default: :primary
@ -203,7 +210,7 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
class={@class}
width={600}
height={600}
priority={@variant == :minimal}
priority={@priority}
/>
<% else %>
<img
@ -211,8 +218,8 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
alt={@product.name}
width="600"
height="600"
loading={if @variant == :minimal, do: nil, else: "lazy"}
decoding={if @variant == :minimal, do: nil, else: "async"}
loading={if @priority, do: nil, else: "lazy"}
decoding={if @priority, do: nil, else: "async"}
class={@class}
/>
<% end %>
@ -715,12 +722,13 @@ defmodule SimpleshopThemeWeb.ShopComponents.Product do
</h2>
<.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={product}
theme_settings={@theme_settings}
mode={@mode}
variant={:featured}
priority={idx < 2}
/>
<% end %>
</.product_grid>