„Mamy nowy design, ale ruch i tak spada” \u2013 to zdanie s\u0142ysz\u0119 od w\u0142a\u015bcicieli sklep\u00f3w internetowych coraz cz\u0119\u015bciej. Inwestuj\u0105 w lepsze zdj\u0119cia, szybszy hosting, a strona i tak \u0142aduje si\u0119 jak za czas\u00f3w dial-up. Najcz\u0119\u015bciej winowajc\u0105 jest \u017ale skonfigurowane cache’owanie. W tym artykule poka\u017c\u0119 trzy najcz\u0119stsze b\u0142\u0119dy, kt\u00f3re sam widzia\u0142em u klient\u00f3w, i jak je naprawi\u0107.<\/p>\n
Zaczyna si\u0119 niewinnie: „W\u0142\u0105czmy full-page cache, przecie\u017c strony si\u0119 szybciej \u0142aduj\u0105”. I faktycznie \u2013 dla niezalogowanego u\u017cytkownika to dzia\u0142a pi\u0119knie. Ale gdy wchodzi klient z koszykiem lub zalogowany, zaczynaj\u0105 si\u0119 problemy. Widok „Witaj, Janie” z cudzym imieniem, nieaktualna liczba produkt\u00f3w w koszyku \u2013 to wr\u00f3g konwersji.<\/p>\n
Przyk\u0142ad:<\/strong> Klient z bran\u017cy odzie\u017cowej wdro\u017cy\u0142 Varnish z cache’em ca\u0142ej strony. Ruch wzr\u00f3s\u0142, ale wsp\u00f3\u0142czynnik konwersji spad\u0142 o 12%. Okaza\u0142o si\u0119, \u017ce zalogowani u\u017cytkownicy widzieli cudze rekomendacje. Fix? U\u017cycie ESI (Edge Side Includes) do dynamicznych fragment\u00f3w. Koszt implementacji: oko\u0142o 8 godzin pracy backend developera.<\/p>\n Lekcja:<\/strong> Nie cache’uj ca\u0142ej strony dla zalogowanych. Segmentuj cache na podstawie stanu u\u017cytkownika i dynamicznych element\u00f3w.<\/p>\n „Ustawmy cache na 24 godziny, po co od\u015bwie\u017ca\u0107 co chwil\u0119?” \u2013 my\u015bla\u0142 w\u0142a\u015bciciel sklepu z elektronik\u0105. Efekt? Klienci widzieli nieaktualne ceny promocyjne, a po klikni\u0119ciu w produkt okazywa\u0142o si\u0119, \u017ce jest ju\u017c niedost\u0119pny. Wsp\u00f3\u0142czynnik odrzuce\u0144 wzr\u00f3s\u0142 o 18%.<\/p>\n Dane:<\/strong> Badania pokazuj\u0105, \u017ce 40% u\u017cytkownik\u00f3w opuszcza stron\u0119, je\u015bli widzi nieaktualne informacje o stanie magazynowym. Dla sklepu z du\u017c\u0105 rotacj\u0105 to katastrofa.<\/p>\n Rozwi\u0105zanie:<\/strong> U\u017cyj dynamicznego TTL w zale\u017cno\u015bci od typu tre\u015bci. Strony produkt\u00f3w \u2013 10-15 minut, strony kategorii \u2013 30 minut, blog \u2013 1 godzina. Dodatkowo wdr\u00f3\u017c webhooki do inwalidacji cache przy zmianie stanu magazynowego.<\/p>\n Fix:<\/strong> Implementacja w Node.js z Redisem i niestandardow\u0105 logik\u0105 TTL. Zaj\u0119\u0142o to 2 dni, ale konwersja wr\u00f3ci\u0142a do normy.<\/p>\n Standardowy scenariusz: frontend pobiera dane z REST API przy ka\u017cdym od\u015bwie\u017ceniu strony. Nawet je\u015bli masz cache na warstwie CDN, backend API mo\u017ce by\u0107 przeci\u0105\u017cony. W jednym z projekt\u00f3w (sklep z cz\u0119\u015bciami samochodowymi) ka\u017cde zapytanie o wyszukiwark\u0119 generowa\u0142o 200 ms odpowiedzi. Przy 500 u\u017cytkownikach jednocze\u015bnie czas r\u00f3s\u0142 do 5 sekund.<\/p>\n Dlaczego to problem?<\/strong> Wolne API to wolna strona, a to uderza w SEO \u2013 Google od dawna bierze pod uwag\u0119 Core Web Vitals. Dla e-commerce ka\u017cda dodatkowa sekunda to spadek konwersji o 7%.<\/p>\n Rozwi\u0105zanie:<\/strong> Wdr\u00f3\u017c cache odpowiedzi API na poziomie Redis lub Memcached. Kluczuj po parametrach zapytania i nag\u0142\u00f3wkach. Dla cz\u0119sto u\u017cywanych endpoint\u00f3w (np. lista kategorii) ustaw cache na 5 minut. Dla wyszukiwarki \u2013 cache na 1 minut\u0119, ale z mo\u017cliwo\u015bci\u0105 szybkiej inwalidacji.<\/p>\n Wynik:<\/strong> Po optymalizacji \u015bredni czas odpowiedzi API spad\u0142 z 200 ms do 10 ms. Ca\u0142kowity czas \u0142adowania strony skr\u00f3ci\u0142 si\u0119 z 4,2 s do 1,8 s. Ruch organiczny po 3 miesi\u0105cach wzr\u00f3s\u0142 o 23%.<\/p>\n Cache’owanie to pot\u0119\u017cne narz\u0119dzie, ale \u017ale skonfigurowane potrafi zniszczy\u0107 zar\u00f3wno UX, jak i konwersj\u0119. Klucz to segmentacja, dynamiczne TTL i cache’owanie API. Je\u015bli Tw\u00f3j sklep dzia\u0142a wolno, zacznij od audytu cache \u2013 cz\u0119sto to najta\u0144sza optymalizacja, kt\u00f3ra przynosi najwi\u0119ksze efekty.<\/p>\n Masz problem z wydajno\u015bci\u0105 swojego e-commerce? JurskiTech specjalizuje si\u0119 w optymalizacji szybko\u015bci i UX. Sprawd\u017a nasze us\u0142ugi.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Wst\u0119p „Mamy nowy design, ale ruch i tak spada” \u2013 to zdanie s\u0142ysz\u0119 od w\u0142a\u015bcicieli sklep\u00f3w internetowych coraz cz\u0119\u015bciej. Inwestuj\u0105 w lepsze zdj\u0119cia, szybszy hosting, a strona i tak \u0142aduje si\u0119 jak za czas\u00f3w dial-up. Najcz\u0119\u015bciej winowajc\u0105 jest \u017ale skonfigurowane cache’owanie. W tym artykule poka\u017c\u0119 trzy najcz\u0119stsze b\u0142\u0119dy, kt\u00f3re sam widzia\u0142em u klient\u00f3w, i jak<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[10,46,539,431],"class_list":["post-2059","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-e-commerce","tag-cache","tag-optymalizacja-aplikacji","tag-optymalizacja-wydajnosci"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2059"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2059\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. Zbyt d\u0142ugie TTL \u2013 \u015bwie\u017co\u015b\u0107 danych ma znaczenie<\/h2>\n
3. Brak cache’owania API \u2013 backend dusi si\u0119 od request\u00f3w<\/h2>\n
Podsumowanie<\/h2>\n