Audyt techniczny Shopify: Nigdy nie stosuj contains http w Liquid – Ochrona LCP

Błąd, który zabija Twój LCP: filtrowanie przez contains 'http'

W kodzie Shopify często widzimy ten pattern:

{% if image_url contains 'http' %}
  <img src="{{ image_url }}">
{% else %}
  <img src="https://{{ image_url }}">
{% endif %}

To anty-pattern. Oto dlaczego i jak to naprawić.

Problem 1: Wydajność Liquid

Filtr contains w Liquid to operacja O(n) – Liquid musi przejść przez każdy znak stringa. Przy 50 obrazkach na stronie:

Problem 2: Edge cases

contains 'http' daje false positives:

• "/images/https-icon.png" → wykryje "http" błędnie
• "http://example.com" → wykryje, ale to HTTP nie HTTPS!
• Protocol-relative URL "//cdn.shopify.com/..." → nie wykryje

Rozwiązanie: Czyste przypisywanie źródeł

Metoda 1: image_url filter (preferowana)

{% comment %} DOBRZE: Shopify automatycznie obsługuje protokół {% endcomment %}
<img src="{{ product.featured_image | image_url: width: 800 }}">

Metoda 2: img_url filter (legacy)

{% comment %} DOBRZE: Zawsze zwraca pełny HTTPS URL {% endcomment %}
<img src="{{ product.featured_image | img_url: '800x' }}">

Metoda 3: Dla zewnętrznych URL (metafields)

{% comment %}
  Jeśli MUSISZ walidować zewnętrzny URL,
  użyj slice zamiast contains
{% endcomment %}
{% assign url_start = external_url | slice: 0, 8 %}
{% if url_start == 'https://' %}
  <img src="{{ external_url }}">
{% else %}
  {% comment %} Fallback lub error handling {% endcomment %}
{% endif %}

Wpływ na Core Web Vitals

Testowaliśmy na sklepie z 200 produktami:

Audyt: Jak znaleźć ten błąd w swoim theme

1. Otwórz Shopify Admin → Themes → Edit code
2. Użyj Search (Ctrl+Shift+F)
3. Szukaj: contains 'http' lub contains "http"
4. Każde wystąpienie wymaga refaktoru

Inne anty-patterny Liquid do unikania

• {% if url contains '.jpg' or url contains '.png' %} → Użyj image_url filter
• {% assign x = y | append: z | append: w %} → Łącz w jednym append lub użyj capture
• Nested loops bez limit → Zawsze ustawiaj limit

Szablon audytu Technical SEO dla Shopify

Zamów pełny audyt techniczny Shopify →

O autorze

Arkadiusz Kotliński

CEO & Ekspert SEO w Aseo24.pl. 15+ lat doświadczenia w pozycjonowaniu, e-commerce i digital marketingu. Specjalizuje się w SEO technicznym, Entity SEO i strategiach wzrostu dla sklepów Shopify.

Więcej o autorze LinkedIn