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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user