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:
parent
865e3563b6
commit
c5e353eba1
@ -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},
|
||||
})
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user