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 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},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user