{"id":33737,"date":"2026-05-08T05:00:00","date_gmt":"2026-05-08T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=33737"},"modified":"2026-05-07T11:10:20","modified_gmt":"2026-05-07T09:10:20","slug":"blyskawicznie-szybkie-strony-internetowe-jak-adobe-experience-manager-moze-pomoc","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/blyskawicznie-szybkie-strony-internetowe-jak-adobe-experience-manager-moze-pomoc\/","title":{"rendered":"B\u0142yskawicznie szybkie strony internetowe: Jak Adobe Experience Manager mo\u017ce pom\u00f3c"},"content":{"rendered":"\n<p><a><\/a>Istnieje wiele sposob\u00f3w udost\u0119pniania stron internetowych \u2013 od r\u0119cznego tworzenia stron HTML (lub, coraz cz\u0119\u015bciej, generowania ich za pomoc\u0105 sztucznej inteligencji), poprzez generatory stron statycznych i rozwi\u0105zania typu headless, a\u017c po bardziej ustrukturyzowane i wyspecjalizowane portale oraz w pe\u0142ni funkcjonalne systemy CMS (systemy zarz\u0105dzania tre\u015bci\u0105).<\/p>\n\n\n\n<p>Od wszystkich tych rozwi\u0105za\u0144 oczekuje si\u0119 szybkiego, niezawodnego i bezpiecznego dostarczania tre\u015bci.<\/p>\n\n\n\n<p>Wydajno\u015b\u0107 strony internetowej to nie tylko kwestia techniczna \u2013 ma ona bezpo\u015bredni wp\u0142yw na:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wra\u017cenia u\u017cytkownik\u00f3w,<\/li>\n\n\n\n<li>dost\u0119pno\u015b\u0107,<\/li>\n\n\n\n<li>pozycje w wyszukiwarkach,<\/li>\n\n\n\n<li>konwersje,<\/li>\n\n\n\n<li>wyniki biznesowe.<\/li>\n<\/ul>\n\n\n\n<p>Badania nieustannie pokazuj\u0105, \u017ce u\u017cytkownicy oczekuj\u0105, i\u017c strony za\u0142aduj\u0105 si\u0119 w ci\u0105gu kilku sekund, a ka\u017cda dodatkowa sekunda op\u00f3\u017anienia znacznie zwi\u0119ksza wsp\u00f3\u0142czynnik odrzuce\u0144. Firma Google uwzgl\u0119dni\u0142a szybko\u015b\u0107 dzia\u0142ania strony jako czynnik rankingowy, co oznacza, \u017ce szybsze strony internetowe zyskuj\u0105 na widoczno\u015bci, podczas gdy wolniejsze znikaj\u0105 w wynikach wyszukiwania.<\/p>\n\n\n\n<p>W niniejszym artykule om\u00f3wiono praktyczne techniki pozwalaj\u0105ce uzyska\u0107 niezwykle szybkie strony internetowe:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>od strategii buforowania obs\u0142uguj\u0105cych wi\u0119kszo\u015b\u0107 \u017c\u0105da\u0144,<\/li>\n\n\n\n<li>poprzez optymalizacj\u0119 zasob\u00f3w zmniejszaj\u0105c\u0105 rozmiar plik\u00f3w,<\/li>\n\n\n\n<li>a\u017c po usprawnienia sieciowe i optymalizacj\u0119 wska\u017anik\u00f3w Core Web Vitals.<\/li>\n<\/ul>\n\n\n\n<p>W stosownych przypadkach wskazano funkcje platformy Adobe Experience Manager (AEM), kt\u00f3re wspieraj\u0105 te optymalizacje.<\/p>\n\n\n\n<p>W czasach, gdy sztuczna inteligencja generuje nadmiernie d\u0142ugie artyku\u0142y, kt\u00f3re \u2013 jak na ironi\u0119 \u2013 cz\u0119sto trzeba najpierw stre\u015bci\u0107 za pomoc\u0105 tej samej sztucznej inteligencji, aby w og\u00f3le da\u0142o si\u0119 je przeczyta\u0107, postaram si\u0119 zadba\u0107 o zwi\u0119z\u0142o\u015b\u0107 tre\u015bci i unika\u0107 niepotrzebnej zawi\u0142o\u015bci oraz ozdobnik\u00f3w.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pami\u0119\u0107 podr\u0119czna (Cache)<\/strong><\/h2>\n\n\n\n<p>Zazwyczaj tw\u00f3rcy aplikacji backendowych skupiaj\u0105 si\u0119 na wydajno\u015bci kodu i czasie generowania stron, ale w rzeczywisto\u015bci najwa\u017cniejszym czynnikiem wp\u0142ywaj\u0105cym na popraw\u0119 wydajno\u015bci stron internetowych jest <strong>buforowanie.<\/strong><\/p>\n\n\n\n<p>Je\u015bli \u017c\u0105danie mo\u017ce zosta\u0107 obs\u0142u\u017cone z pami\u0119ci podr\u0119cznej, \u015bcie\u017cka kodu backendowego cz\u0119sto nie ma \u017cadnego znaczenia. Upewnij si\u0119, \u017ce wygenerowane odpowiedzi s\u0105 prawid\u0142owo buforowane i nie trzeba ich odtwarza\u0107 ani zawsze dostarcza\u0107 bezpo\u015brednio ze \u017ar\u00f3d\u0142a. Przy prawid\u0142owej konfiguracji powinno to obs\u0142u\u017cy\u0107 od 80% do 95% ca\u0142ego ruchu publicznego, cho\u0107 tre\u015bci spersonalizowane i wymagaj\u0105ce uwierzytelnienia w naturalny spos\u00f3b ograniczaj\u0105 zakres tre\u015bci, kt\u00f3re mo\u017cna buforowa\u0107.<\/p>\n\n\n\n<p>My\u015bl warstwowo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pami\u0119\u0107 podr\u0119czna przegl\u0105darki,<\/li>\n\n\n\n<li>pami\u0119\u0107 podr\u0119czna sieci CDN lub serwera proxy odwrotnego,<\/li>\n\n\n\n<li>warstwa pami\u0119ci podr\u0119cznej serwera WWW,<\/li>\n\n\n\n<li>pami\u0119\u0107 podr\u0119czna wynik\u00f3w aplikacji (je\u015bli dotyczy).<\/li>\n<\/ul>\n\n\n\n<p>W przypadku us\u0142ugi AEM as a Cloud Service ruch zazwyczaj przechodzi przez sie\u0107 CDN i modu\u0142 Dispatcher, zanim dotrze do instancji publikuj\u0105cych.<a><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Zapis pami\u0119ci podr\u0119cznej (Cache Store)<\/strong><\/h3>\n\n\n\n<p>Tre\u015bci statyczne mo\u017cna przechowywa\u0107 w pami\u0119ci podr\u0119cznej. Wi\u0119kszo\u015b\u0107 serwer\u00f3w WWW, takich jak Nginx czy Apache, serwer\u00f3w reverse-proxy oraz urz\u0105dze\u0144 r\u00f3wnowa\u017c\u0105cych obci\u0105\u017cenie, np. HAProxy, kt\u00f3re zazwyczaj umieszcza si\u0119 przed backendem, posiada w\u0142asne mechanizmy lokalnego buforowania plik\u00f3w. Wymagaj\u0105 one jednak starannej konfiguracji, aby idealnie wsp\u00f3\u0142pracowa\u0142y z backendem.<\/p>\n\n\n\n<p>AEM udost\u0119pnia w\u0142asny modu\u0142 Apache do obs\u0142ugi po\u0142\u0105cze\u0144 z instancjami AEM oraz zestaw regu\u0142 umo\u017cliwiaj\u0105cych prawid\u0142owe zarz\u0105dzanie pami\u0119ci\u0105 podr\u0119czn\u0105 tre\u015bci statycznych (plik\u00f3w HTML, bibliotek ClientLib, zasob\u00f3w DAM itp.). Inn\u0105 potencjaln\u0105 warstw\u0105 buforuj\u0105c\u0105 mo\u017ce by\u0107 sie\u0107 dostarczania tre\u015bci (CDN), kt\u00f3ra zosta\u0142a opisana w sekcji \u201eSie\u0107\u201d.<\/p>\n\n\n\n<p>Najwa\u017cniejsze jest nie tylko posiadanie pami\u0119ci podr\u0119cznej, ale tak\u017ce dostosowanie jej dzia\u0142ania do charakteru tre\u015bci:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>intensywnie buforuj zasoby publiczne,<\/li>\n\n\n\n<li>buforuj publiczny kod HTML, gdy pozwalaj\u0105 na to regu\u0142y biznesowe,<\/li>\n\n\n\n<li>nigdy nie buforuj spersonalizowanych odpowiedzi w warstwach wsp\u00f3\u0142dzielonych,<\/li>\n\n\n\n<li>unikaj niepotrzebnej fragmentacji pami\u0119ci podr\u0119cznej spowodowanej parametrami zapytania lub zbyt og\u00f3lnymi nag\u0142\u00f3wkami HTTP Vary.<\/li>\n<\/ul>\n\n\n\n<p>Je\u015bli klucz pami\u0119ci podr\u0119cznej ulegnie zmianie z przyczyn, kt\u00f3re nie wp\u0142ywaj\u0105 na tre\u015b\u0107 odpowiedzi, spadnie wsp\u00f3\u0142czynnik trafie\u0144, a serwer \u017ar\u00f3d\u0142owy b\u0119dzie wykonywa\u0142 dodatkow\u0105 prac\u0119 bez \u017cadnych korzy\u015bci dla u\u017cytkownika.<a><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Nag\u0142\u00f3wek Cache-Control<\/strong><\/h3>\n\n\n\n<p>Jednym z najwa\u017cniejszych sposob\u00f3w opisania w\u0142a\u015bciwo\u015bci buforowania jest nag\u0142\u00f3wek Cache-Control w odpowiedziach HTTP dla konkretnego adresu URL. Istniej\u0105 wa\u017cne, ale cz\u0119sto pomijane i niezrozumia\u0142e opcje, kt\u00f3re wskazuj\u0105 na charakter odpowiedzi i kt\u00f3re warto wzi\u0105\u0107 pod uwag\u0119 w przypadku ka\u017cdego typu odpowiedzi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>public<\/code><\/strong> \u2013 mog\u0105 by\u0107 buforowane na ka\u017cdym poziomie wsp\u00f3lnej pami\u0119ci podr\u0119cznej, np. publiczne statyczne pliki HTML i zasoby (obrazy, filmy, dokumenty),<\/li>\n\n\n\n<li><strong><code>private<\/code><\/strong> \u2013 tre\u015bci spersonalizowane dla u\u017cytkownika, kt\u00f3re NIE MOG\u0104 by\u0107 buforowane mi\u0119dzy backendem a przegl\u0105dark\u0105 u\u017cytkownika, ale MOG\u0104 by\u0107 buforowane w przegl\u0105darce,<\/li>\n\n\n\n<li><strong><code>immutable<\/code><\/strong> \u2013 tre\u015b\u0107 nie ulegnie zmianie \u2013 idealne dla plik\u00f3w lub dokument\u00f3w, kt\u00f3rych wersje s\u0105 oznaczone w nazwie pliku, albo modu\u0142\u00f3w JavaScript z skr\u00f3tem tre\u015bci w nazwie pliku,<\/li>\n\n\n\n<li><strong><code>no-cache<\/code><\/strong> vs <strong><code>no-store<\/code><\/strong> \u2013 cz\u0119sto myl\u0105ce: \u201eno-cache\u201d oznacza, \u017ce odpowied\u017a MO\u017bE zosta\u0107 zapisana w pami\u0119ci podr\u0119cznej przegl\u0105darki, ale wymaga ponownej weryfikacji, podczas gdy \u201eno-store\u201d ca\u0142kowicie zabrania buforowania, dlatego znacznie lepiej sprawdza si\u0119 w przypadku wra\u017cliwych tre\u015bci (np. danych osobowych lub token\u00f3w uwierzytelniaj\u0105cych),<\/li>\n\n\n\n<li><strong><code>max-age<\/code><\/strong> \u2013 czas wa\u017cno\u015bci w przegl\u0105darce,<\/li>\n\n\n\n<li><strong><code>s-maxage<\/code> <\/strong>\u2013 czas wa\u017cno\u015bci w pami\u0119ci podr\u0119cznej wsp\u00f3\u0142dzielonej; przydatne, gdy czasy TTL w sieci CDN i przegl\u0105darce powinny si\u0119 r\u00f3\u017cni\u0107,<\/li>\n\n\n\n<li><strong>s<code>tale-while-revalidate<\/code><\/strong> \u2013 pozwala pami\u0119ciom podr\u0119cznym na wysy\u0142anie nieaktualnej odpowiedzi podczas jej od\u015bwie\u017cania w tle,<\/li>\n\n\n\n<li><strong><code>stale-if-error <\/code><\/strong>\u2013 pozwala na wykorzystanie nieaktualnej tre\u015bci w przypadku awarii serwera \u017ar\u00f3d\u0142owego.<\/li>\n<\/ul>\n\n\n\n<p>Typowe wzorce to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>public, max-age=31536000, immutable <\/code>dla zasob\u00f3w u\u017cywaj\u0105cych funkcji skr\u00f3t\u00f3w (hash) bazuj\u0105cych na zawarto\u015bci w URL,<\/li>\n\n\n\n<li><code>public, max-age=300, stale-while-revalidate=3600<\/code> dla cz\u0119sto aktualizowanych stron HTML,<\/li>\n\n\n\n<li><code>private, no-cache<\/code> dla stron personalizowanych,<\/li>\n\n\n\n<li><code>no-store<\/code> dla odpowiedzi wra\u017cliwych (np. danych osobowych, token\u00f3w uwierzytelniaj\u0105cych).<\/li>\n<\/ul>\n\n\n\n<p>Dzi\u0119ki odpowiedniej konfiguracji nag\u0142\u00f3wka Cache-Control mo\u017cna w pe\u0142ni kontrolowa\u0107, kt\u00f3re elementy mog\u0105 by\u0107 buforowane, a kt\u00f3re nie, zapewniaj\u0105c nie tylko szybkie wy\u015bwietlanie plik\u00f3w strony internetowej, ale tak\u017ce zapobiegaj\u0105c przypadkowym wyciekom danych spowodowanym nieprawid\u0142owo skonfigurowan\u0105 pami\u0119ci\u0105 podr\u0119czn\u0105.<\/p>\n\n\n\n<p>W \u015brodowiskach AEM cz\u0119sto warto zarz\u0105dza\u0107 pami\u0119ci\u0105 podr\u0119czn\u0105 przegl\u0105darki i pami\u0119ci\u0105 podr\u0119czn\u0105 brzegow\u0105\/wsp\u00f3\u0142dzielon\u0105 niezale\u017cnie. Je\u015bli Twoja sie\u0107 CDN obs\u0142uguje nag\u0142\u00f3wki pami\u0119ci podr\u0119cznej zast\u0119pczej, korzystaj z nich \u015bwiadomie, zamiast narzuca\u0107 wsz\u0119dzie ten sam czas TTL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optymalizacja zasob\u00f3w<\/strong><\/h2>\n\n\n\n<p>Wsp\u00f3\u0142czesne strony internetowe s\u0105 pe\u0142ne obraz\u00f3w, zdj\u0119\u0107 i film\u00f3w. Pliki te s\u0105 du\u017ce \u2013 cz\u0119sto maj\u0105 po kilka lub nawet kilkadziesi\u0105t megabajt\u00f3w. Obecnie przegl\u0105darki internetowe szybko si\u0119 rozwijaj\u0105, a dzi\u0119ki automatycznym aktualizacjom wi\u0119kszo\u015b\u0107 u\u017cytkownik\u00f3w korzysta z ich najnowszych wersji. Dzi\u0119ki nowym protoko\u0142om i formatom plik\u00f3w obs\u0142ugiwanym przez nowoczesne przegl\u0105darki mo\u017cliwe jest szybsze dostarczanie mniejszych zasob\u00f3w. Nie chodzi tu tylko o zmniejszenie rozmiar\u00f3w plik\u00f3w, ale tak\u017ce o ograniczenie liczby bajt\u00f3w na \u015bcie\u017cce krytycznej.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Obrazy i zdj\u0119cia<\/strong><\/h3>\n\n\n\n<p>Zamiast udost\u0119pnia\u0107 pojedynczy plik \u017ar\u00f3d\u0142owy lub zdj\u0119cie, przygotuj lub wygeneruj na \u017c\u0105danie plik lub zdj\u0119cie w wielu rozdzielczo\u015bciach, lepiej dostosowanych do r\u00f3\u017cnych urz\u0105dze\u0144 i obszar\u00f3w wy\u015bwietlania.<\/p>\n\n\n\n<p>AEM Assets automatycznie zmienia rozmiar pliku \u017ar\u00f3d\u0142owego po dodaniu, aby przygotowa\u0107 wiele rozdzielczo\u015bci (zwanych \u201erenditions\u201d). Atrybut srcset tag\u00f3w <code>&lt;img> i &lt;source><\/code> pozwala na okre\u015blenie wielu wariant\u00f3w rozdzielczo\u015bci (wspomnianych \u201erenditions\u201d), natomiast atrybut <code>sizes<\/code> umo\u017cliwia zdefiniowanie stosunku widocznego obrazu na stronie do rozmiaru okna przegl\u0105darki, a sama przegl\u0105darka zoptymalizuje wyb\u00f3r odpowiedniej wersji.<\/p>\n\n\n\n<p>Nale\u017cy u\u017cy\u0107 tagu <code>&lt;picture><\/code> wraz z wieloma tagami <code>&lt;source><\/code>, aby zdefiniowa\u0107 r\u00f3\u017cne obrazy dla r\u00f3\u017cnych rozmiar\u00f3w okna przegl\u0105darki \u2013 jest to szczeg\u00f3lnie przydatne w przypadku dostarczania r\u00f3\u017cnych obraz\u00f3w dla orientacji pionowej i poziomej lub r\u00f3\u017cnych format\u00f3w.<\/p>\n\n\n\n<p>Nie musisz ju\u017c ogranicza\u0107 si\u0119 do formatu JPEG przy wy\u015bwietlaniu obraz\u00f3w. Do ikon, logotyp\u00f3w i diagram\u00f3w u\u017cywaj formatu SVG. W przypadku obraz\u00f3w rastrowych format WebP jest zdecydowanym faworytem, a format AVIF zyskuje na popularno\u015bci, podczas gdy JPEG i PNG nadal stanowi\u0105 praktyczne rozwi\u0105zania awaryjne. Format WebP pozwala zmniejszy\u0107 rozmiar zdj\u0119cia o oko\u0142o 30% w por\u00f3wnaniu z formatem JPEG, a przej\u015bcie na format AVIF cz\u0119sto zapewnia dodatkow\u0105 redukcj\u0119 rozmiaru.<\/p>\n\n\n\n<p>AVIF jest obecnie obs\u0142ugiwany przez oko\u0142o 95% przegl\u0105darek na ca\u0142ym \u015bwiecie, jednak u\u017cycie formatu awaryjnego nadal stanowi bezpieczniejsze rozwi\u0105zanie domy\u015blne ni\u017c za\u0142o\u017cenie, \u017ce jeden format b\u0119dzie zawsze dzia\u0142a\u0142 wsz\u0119dzie. AEM as a Cloud Service obs\u0142uguje wersje plik\u00f3w WebP zoptymalizowane pod k\u0105tem sieci.<\/p>\n\n\n\n<p>Zmiana formatu plik\u00f3w graficznych mo\u017ce nie by\u0107 mo\u017cliwa w przypadku istniej\u0105cych aplikacji, ale powinno da\u0107 si\u0119 zoptymalizowa\u0107 istniej\u0105ce pliki PNG oraz ponownie zakodowa\u0107 istniej\u0105ce pliki JPEG przy u\u017cyciu silniejszej kompresji, zachowuj\u0105c jednocze\u015bnie wysok\u0105 jako\u015b\u0107 obrazu.<\/p>\n\n\n\n<p>Zastan\u00f3w si\u0119, kt\u00f3re obrazy s\u0105 kluczowe. Zawsze podawaj dok\u0142adn\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107, aby przegl\u0105darka mog\u0142a zarezerwowa\u0107 miejsce i ograniczy\u0107 przesuni\u0119cia w uk\u0142adzie strony. W przypadku obraz\u00f3w, kt\u00f3re nie s\u0105 kluczowe, u\u017cywaj atrybutu <code>loading=\"lazy\"<\/code>, ale nie stosuj op\u00f3\u017anionego \u0142adowania obrazu, kt\u00f3ry prawdopodobnie b\u0119dzie mia\u0142 najwi\u0119kszy wp\u0142yw na LCP. W przypadku najwa\u017cniejszego obrazu rozwa\u017c u\u017cycie atrybutu <code>fetchpriority=\"high\"<\/code> i wczytaj go z wyprzedzeniem, je\u015bli w przeciwnym razie przegl\u0105darka wykry\u0142aby go zbyt p\u00f3\u017ano.<\/p>\n\n\n\n<p>AEM Image Core Component obs\u0142uguje r\u00f3\u017cne wersje obraz\u00f3w, \u0142adowanie z op\u00f3\u017anieniem, teksty alternatywne (dla czytnik\u00f3w ekranu), linkowanie oraz inne opcje. Nale\u017cy sprawdzi\u0107, czy generuje on sta\u0142e wymiary i responsywny kod, a tak\u017ce czy szablony stron nie \u0142aduj\u0105 obrazu g\u0142\u00f3wnego z op\u00f3\u017anieniem.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image1.png&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image aligncenter size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-33738&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1100,&quot;targetHeight&quot;:1100,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Powi\\u0119ksz obrazek: Zestawienie obraz\\u00f3w AVIF, WebP i JPEG (Girls Shred Sessions by QParks\\\/CC BY. Thumbnails generated on Vimeo)&quot;,&quot;alt&quot;:&quot;Zestawienie obraz\\u00f3w AVIF, WebP i JPEG (Girls Shred Sessions by QParks\\\/CC BY. Thumbnails generated on Vimeo)&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"1024\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1-1024x1024.png\" alt=\"Zestawienie obraz\u00f3w AVIF, WebP i JPEG (Girls Shred Sessions by QParks\/CC BY. Thumbnails generated on Vimeo)\" class=\"wp-image-33738\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1-1024x1024.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1-300x300.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1-768x768.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image1.png 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Powi\u0119ksz obrazek: Zestawienie obraz\u00f3w AVIF, WebP i JPEG (Girls Shred Sessions by QParks\/CC BY. Thumbnails generated on Vimeo)\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Ryc. 1 Zestawienie obraz\u00f3w AVIF, WebP i JPEG (Girls Shred Sessions by QParks\/CC BY. Thumbnails generated on Vimeo)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wideo<\/strong><\/h3>\n\n\n\n<p>Przez lata standardem w sieci do udost\u0119pniania film\u00f3w by\u0142 format H.264 (zazwyczaj w plikach MP4). Kodek VP9 pozwala znacznie obni\u017cy\u0107 przep\u0142ywno\u015b\u0107 w por\u00f3wnaniu z H.264. AV1 pozwala obni\u017cy\u0107 j\u0105 jeszcze bardziej, a HEVC\/H.265 mo\u017ce by\u0107 przydatny zw\u0142aszcza w \u015brodowiskach, w kt\u00f3rych dominuj\u0105 urz\u0105dzenia Apple. Jednak obs\u0142uga przez przegl\u0105darki, licencje, obs\u0142uga dekodowania sprz\u0119towego i zu\u017cycie energii maj\u0105 znaczenie, wi\u0119c praktycznie rzadko wybiera si\u0119 jeden \u201enajlepszy\u201d kodek do ka\u017cdego przypadku.<\/p>\n\n\n\n<p>Podobnie jak w przypadku obraz\u00f3w, zmiana formatu plik\u00f3w wideo mo\u017ce okaza\u0107 si\u0119 niemo\u017cliwa w istniej\u0105cych aplikacjach, a \u017ar\u00f3d\u0142owy projekt wideo mo\u017ce nie by\u0107 dost\u0119pny.<\/p>\n\n\n\n<p>Warto jednak spr\u00f3bowa\u0107 ponownie zakodowa\u0107 pliki wideo, nawet przy u\u017cyciu tego samego kodeka, w\u0142\u0105czaj\u0105c przetwarzanie dwuetapowe oraz umieszczanie atom\u00f3w fast-start\/moov (je\u015bli jest to obs\u0142ugiwane), stosuj\u0105c wolniejsze ustawienia przetwarzania, a tak\u017ce wybieraj\u0105c najnowszy koder programowy zamiast sprz\u0119towego. Takie ponowne kodowanie mo\u017ce zaj\u0105\u0107 sporo czasu i spowodowa\u0107 pewn\u0105 utrat\u0119 jako\u015bci, ale o ile r\u00f3\u017cnica nie jest zauwa\u017calna go\u0142ym okiem, a plik wynikowy jest znacznie mniejszy i lepiej zoptymalizowany pod k\u0105tem internetu, warto rozwa\u017cy\u0107 zast\u0105pienie poprzedniego pliku.<\/p>\n\n\n\n<p>W przypadku wa\u017cnych tre\u015bci wideo lepszym rozwi\u0105zaniem ni\u017c pojedynczy plik do pobrania mo\u017ce by\u0107 strumieniowanie adaptacyjne oraz wiele wariant\u00f3w &lt;<code>source<\/code>>. W przypadku mniej istotnych film\u00f3w nale\u017cy u\u017cy\u0107 obrazu plakatu oraz ustawi\u0107 atrybut <code>preload=\"metadata\" lub preload=\"none\"<\/code>, a filmy odtwarzane w tle powinny by\u0107 wyciszone, kr\u00f3tkie i opcjonalne.<\/p>\n\n\n\n<p>Aby zachowa\u0107 najwy\u017csz\u0105 jako\u015b\u0107, warto renderowa\u0107 projekt wideo bezpo\u015brednio z pliku \u017ar\u00f3d\u0142owego do lepszego kodeka w programie do edycji wideo, zamiast ponownie kompresowa\u0107 gotowy film. Dlatego sensownie jest rozwa\u017cy\u0107 renderowanie wszystkich nowych materia\u0142\u00f3w wideo bezpo\u015brednio do kodek\u00f3w VP9 lub AV1 przed przes\u0142aniem ich do systemu DAM. W przypadku przep\u0142yw\u00f3w pracy w systemie AEM DAM nale\u017cy zachowa\u0107 wysokiej jako\u015bci pliki \u017ar\u00f3d\u0142owe w kodekach edycyjnych, ale publikowa\u0107 wersje przeznaczone do wy\u015bwietlania w sieci, a nie surowe pliki \u017ar\u00f3d\u0142owe.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Zaawansowane techniki Frontend<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Procesowanie w tle<\/strong><\/h3>\n\n\n\n<p>Przenie\u015b obci\u0105\u017caj\u0105ce zadania JavaScript do modu\u0142\u00f3w Web Workers w celu r\u00f3wnoleg\u0142ego wykonywania, zapobiegaj\u0105c w ten spos\u00f3b blokowaniu g\u0142\u00f3wnego w\u0105tku. Dost\u0119pna jest r\u00f3wnie\u017c ulepszona obs\u0142uga pami\u0119ci wsp\u00f3\u0142dzielonej (za po\u015brednictwem <code>SharedArrayBuffer<\/code>), kt\u00f3ra umo\u017cliwia wydajn\u0105 wymian\u0119 danych mi\u0119dzy modu\u0142ami a g\u0142\u00f3wnym w\u0105tkiem, ale wy\u0142\u0105cznie w bezpiecznym kontek\u015bcie izolowanym mi\u0119dzydomenowo, co zazwyczaj wymaga nag\u0142\u00f3wk\u00f3w <code>Cross-Origin-Opener-Policy i Cross-Origin-Embedder-Policy.<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>WebAssembly (WASM)<\/strong><\/h3>\n\n\n\n<p>Skompiluj kod o kluczowym znaczeniu dla wydajno\u015bci do formatu WASM lub skorzystaj z istniej\u0105cych bibliotek dystrybucyjnych, aby uzyska\u0107 pr\u0119dko\u015b\u0107 zbli\u017con\u0105 do natywnej w przegl\u0105darce.<\/p>\n\n\n\n<p>Rozwi\u0105zanie to idealnie nadaje si\u0119 do zada\u0144 wymagaj\u0105cych du\u017cej mocy obliczeniowej, takich jak przetwarzanie obraz\u00f3w czy gier, umo\u017cliwiaj\u0105c osi\u0105gni\u0119cie znacznego przyspieszenia (cz\u0119sto od 2- do 10-krotnego lub nawet wi\u0119kszego) w przypadku operacji obci\u0105\u017caj\u0105cych system. Jest to przydatne w przypadku obci\u0105\u017ce\u0144 wymagaj\u0105cych du\u017cej mocy obliczeniowej, a nie jako domy\u015blny spos\u00f3b na popraw\u0119 wydajno\u015bci, gdy prawdziwym w\u0105skim gard\u0142em s\u0105 op\u00f3\u017anienia sieciowe, blokowanie renderowania lub nadmierna aktywno\u015b\u0107 DOM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cache API<\/strong><\/h3>\n\n\n\n<p>Interfejs API pami\u0119ci podr\u0119cznej przegl\u0105darki internetowej umo\u017cliwia przechowywanie obiekt\u00f3w typu \u201e\u017c\u0105danie\u2013odpowied\u017a\u201d wygenerowanych przez JavaScript bezpo\u015brednio w pami\u0119ci podr\u0119cznej przegl\u0105darki. Pozwala on na przechowywanie dowolnych plik\u00f3w, w tym danych JSON i obraz\u00f3w. Nie wymaga to u\u017cycia modu\u0142u Service Worker.<\/p>\n\n\n\n<p>Nale\u017cy uwa\u017ca\u0107, aby nie stworzy\u0107 drugiego systemu buforowania, kt\u00f3ry kolidowa\u0142by z pami\u0119ci\u0105 podr\u0119czn\u0105 przegl\u0105darki i pami\u0119ci\u0105 podr\u0119czn\u0105 sieci CDN. Uniewa\u017cnienie zawarto\u015bci pami\u0119ci podr\u0119cznej nadal stanowi najwi\u0119ksze wyzwanie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Widoczno\u015b\u0107 tre\u015bci i rozmiar wewn\u0119trzny<\/strong><\/h3>\n\n\n\n<p>U\u017cyj w\u0142a\u015bciwo\u015bci CSS <code>content-visibility<\/code>: auto, aby przegl\u0105darka pomin\u0119\u0142a operacje zwi\u0105zane z uk\u0142adem i renderowaniem element\u00f3w znajduj\u0105cych si\u0119 poza ekranem. Po\u0142\u0105cz to z w\u0142a\u015bciwo\u015bci\u0105 <code>contain-intrinsic-size<\/code>, aby unikn\u0105\u0107 przesuni\u0119\u0107 w uk\u0142adzie strony (CLS).<\/p>\n\n\n\n<p>Jest to szczeg\u00f3lnie przydatne w przypadku d\u0142ugich stron zawieraj\u0105cych powtarzaj\u0105ce si\u0119, samodzielne sekcje, ale nale\u017cy dok\u0142adnie przetestowa\u0107 to rozwi\u0105zanie, poniewa\u017c poprawa wydajno\u015bci ma sens tylko wtedy, gdy nie wp\u0142ywa negatywnie na dost\u0119pno\u015b\u0107 ani na pomiary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sie\u0107<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Content Delivery Network<\/strong><\/h3>\n\n\n\n<p>Og\u00f3lna zasada brzmi: <strong>Staraj si\u0119 by\u0107 jak najbli\u017cej u\u017cytkownik\u00f3w swojej witryny<\/strong>.<\/p>\n\n\n\n<p>Wyb\u00f3r odpowiedniego dostawcy us\u0142ug hostingowych lub chmurowych oraz rozbudowa serwer\u00f3w mog\u0105 przynie\u015b\u0107 pewne korzy\u015bci, ale wi\u0105\u017c\u0105 si\u0119 z du\u017cymi kosztami. Prawda jest jednak taka, \u017ce bez sieci CDN trudno zapewni\u0107 wysok\u0105 dost\u0119pno\u015b\u0107 na ca\u0142ym \u015bwiecie, gdy serwery znajduj\u0105 si\u0119 w jednym centrum danych. W takich przypadkach najwi\u0119ksze przyspieszenie umo\u017cliwi tre\u015b\u0107 odpowiednio buforowana w sieci CDN rozproszonej po ca\u0142ym \u015bwiecie.<\/p>\n\n\n\n<p>Traktuj CDN i Dispatcher lub dzia\u0142anie odwrotnego serwera proxy (reverse-proxy) jako jeden system, a nie dwa niepowi\u0105zane ze sob\u0105 elementy. Usu\u0144 lub zignoruj parametry marketingowe, kt\u00f3re nie zmieniaj\u0105 tre\u015bci, \u015bwiadomie stosuj nag\u0142\u00f3wek <code>Vary<\/code> oraz korzystaj z dyrektyw <code>stale-while-revalidate i stale-if-error<\/code>, je\u015bli Twoja platforma je obs\u0142uguje.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>HTTP\/2<\/strong><\/h3>\n\n\n\n<p>W\u0142\u0105cz protok\u00f3\u0142 HTTP\/2 (a je\u015bli to mo\u017cliwe, r\u00f3wnie\u017c HTTP\/3) przynajmniej na najwy\u017cszym poziomie stosu backendowego (najlepiej z w\u0142\u0105czon\u0105 pami\u0119ci\u0105 podr\u0119czn\u0105). Poniewa\u017c wi\u0119kszo\u015b\u0107 stron internetowych udost\u0119pnia wiele plik\u00f3w, multipleksowanie znacznie przyspieszy transfer, jednak mniejsza liczba \u017c\u0105da\u0144 nie oznacza ju\u017c automatycznie lepszego rozwi\u0105zania.<\/p>\n\n\n\n<p>Nale\u017cy unika\u0107 zar\u00f3wno zb\u0119dnych \u017c\u0105da\u0144, jak i jednego ogromnego pakietu synchronicznego \u2013 prawdziwym celem jest wczesne wykrywanie i w\u0142a\u015bciwe ustalanie priorytet\u00f3w kluczowych zasob\u00f3w. Modu\u0142 AEM Dispatcher na serwerze Apache nie jest uzale\u017cniony od wersji protoko\u0142u HTTP, wi\u0119c je\u015bli na serwerze Apache w\u0142\u0105czono protok\u00f3\u0142 HTTP\/2, b\u0119dzie on dzia\u0142a\u0142 poprawnie z modu\u0142em AEM Dispatcher. Sie\u0107 dostarczania tre\u015bci AEM domy\u015blnie obs\u0142uguje protok\u00f3\u0142 HTTP\/2.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Kompresja HTTP<\/strong><\/h3>\n\n\n\n<p>Wi\u0119kszo\u015b\u0107 przegl\u0105darek internetowych obs\u0142uguje kompresj\u0119 danych, dlatego nale\u017cy upewni\u0107 si\u0119, \u017ce jest ona w\u0142\u0105czona po stronie serwera. Nale\u017cy kompresowa\u0107 zasoby tekstowe, takie jak HTML, CSS, JS, JSON i SVG. Przegl\u0105darki internetowe obs\u0142uguj\u0105 wiele algorytm\u00f3w kompresji: od \u201eklasycznego\u201d Gzip, przez obecnie zalecany i powszechnie obs\u0142ugiwany Brotli, a\u017c po coraz cz\u0119\u015bciej stosowany Zstandard (Zstd).<a><\/a><a><\/a><\/p>\n\n\n\n<p>Nie nale\u017cy oczekiwa\u0107 znacz\u0105cego zmniejszenia rozmiaru przy pr\u00f3bie ponownej kompresji ju\u017c skompresowanych plik\u00f3w multimedialnych, takich jak JPEG, WebP, AVIF, MP4 czy wi\u0119kszo\u015bci podzbior\u00f3w czcionek. Niekt\u00f3re serwery buforuj\u0105ce i sieci CDN umo\u017cliwiaj\u0105 wst\u0119pn\u0105 kompresj\u0119 i przechowywanie plik\u00f3w w oddzielnych plikach buforowanych, dzi\u0119ki czemu s\u0105 one gotowe do dostarczenia jako ju\u017c skompresowane odpowiedzi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Core Web Vitals<\/strong><\/h2>\n\n\n\n<p>Firma Google okre\u015bli\u0142a konkretne wska\u017aniki s\u0142u\u017c\u0105ce do pomiaru rzeczywistej wydajno\u015bci strony pod k\u0105tem komfortu u\u017cytkowania i nazwa\u0142a je Core Web Vitals (w lu\u017anym t\u0142umaczeniu: \u201ePodstawowe Wska\u017aniki Internetowe\u201d):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Largest Contentful Paint (LCP)<\/strong>: Wydajno\u015b\u0107 \u0142adowania (odczuwalna pr\u0119dko\u015b\u0107 \u0142adowania),<\/li>\n\n\n\n<li><strong>Interaction To Next Paint (INP)<\/strong>: Responsywno\u015b\u0107 (op\u00f3\u017anienie interakcji),<\/li>\n\n\n\n<li><strong>Cumulative Layout Shift (CLS)<\/strong>: Stabilno\u015b\u0107 wizualna (nieoczekiwane zmiany uk\u0142adu).<\/li>\n<\/ul>\n\n\n\n<p>Nale\u017cy dba\u0107 o to, by te wska\u017aniki by\u0142y jak najni\u017csze \u2013 wymaga to szybkiej aplikacji frontendowej oraz b\u0142yskawicznych odpowiedzi (lub pami\u0119ci podr\u0119cznej) ze strony serwer\u00f3w. Obecne warto\u015bci docelowe to L<code>CP &lt;= 2.5 s, INP &lt;= 200 ms oraz CLS &lt;= 0.1 <\/code>w 75. percentylu danych od rzeczywistych u\u017cytkownik\u00f3w. Narz\u0119dzie Lighthouse jest przydatne do debugowania, ale to CrUX i RUM pokazuj\u0105, jak faktycznie wygl\u0105da do\u015bwiadczenie u\u017cytkownik\u00f3w.<\/p>\n\n\n\n<p>Rozwa\u017cmy, jak w praktyce mo\u017cna poprawi\u0107 ka\u017cd\u0105 metryk\u0119 w istniej\u0105cej aplikacji internetowej.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/sii.pl\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/image2.png&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image aligncenter size-full&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-33740&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1024,&quot;targetHeight&quot;:588,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Powi\\u0119ksz obrazek: Core Web Vitals&quot;,&quot;alt&quot;:&quot;Core Web Vitals&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"588\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image2.png\" alt=\"Core Web Vitals\" class=\"wp-image-33740\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image2.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image2-300x172.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/image2-768x441.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Powi\u0119ksz obrazek: Core Web Vitals\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Ryc. 2 Core Web Vitals (<a href=\"go-globe.com\" rel=\"nofollow\" >\u017ar\u00f3d\u0142o<\/a>)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Largest Contentful Paint<\/strong><\/h3>\n\n\n\n<p>Aby poprawi\u0107 wydajno\u015b\u0107 \u0142adowania, nale\u017cy \u0142adowa\u0107 wy\u0142\u0105cznie style i skrypty, kt\u00f3re s\u0105 rzeczywi\u015bcie przydatne dla danej strony. Ka\u017cdy dodatkowy plik wp\u0142ywa na liczb\u0119 \u017c\u0105da\u0144, czas transferu oraz czas przetwarzania (oceny) i mo\u017ce op\u00f3\u017ani\u0107 wykrycie zasobu LCP. Nale\u017cy szybko dostarcza\u0107 kod HTML i sprawi\u0107, by obraz lub tekst g\u0142\u00f3wny by\u0142 wykrywalny w pocz\u0105tkowej cz\u0119\u015bci kodu HTML, a nast\u0119pnie wst\u0119pnie za\u0142adowa\u0107 zas\u00f3b LCP. Je\u015bli jego wykrycie nast\u0105pi\u0142oby zbyt p\u00f3\u017ano, oznaczy\u0107 obraz LCP atrybutem <code>fetchpriority=\"high\"<\/code> oraz nie stosowa\u0107 do niego \u0142adowania op\u00f3\u017anionego.<\/p>\n\n\n\n<p>AEM udost\u0119pnia mechanizm o nazwie ClientLibs, kt\u00f3ry zarz\u0105dza grupowaniem skrypt\u00f3w i arkuszy styl\u00f3w, dbaj\u0105c o ich w\u0142a\u015bciw\u0105 kolejno\u015b\u0107 (zar\u00f3wno w obr\u0119bie jednego pakietu, jak i pomi\u0119dzy kilkoma pakietami, kt\u00f3re s\u0105 od siebie zale\u017cne).<\/p>\n\n\n\n<p>Dzi\u0119ki odpowiedniemu podzia\u0142owi funkcji witryny i bibliotek zale\u017cno\u015bci na pakiety ClientLibs mo\u017cna znacznie ograniczy\u0107 liczb\u0119 zb\u0119dnych \u017c\u0105da\u0144 oraz skutecznie buforowa\u0107 pakiety zar\u00f3wno po stronie serwera, jak i po stronie klienta.<\/p>\n\n\n\n<p>Przegl\u0105darki internetowe automatycznie buforuj\u0105 odpowiedzi, nawet je\u015bli nie zosta\u0142y o to poproszone, wi\u0119c bezpo\u015brednie udost\u0119pnianie plik\u00f3w JavaScript lub CSS przy u\u017cyciu tych samych adres\u00f3w URL mo\u017ce prowadzi\u0107 do niesp\u00f3jno\u015bci, poniewa\u017c przegl\u0105darka mo\u017ce przetworzy\u0107 wcze\u015bniej zapisan\u0105 w pami\u0119ci podr\u0119cznej wersj\u0119 pliku.<\/p>\n\n\n\n<p>Na szcz\u0119\u015bcie mechanizm AEM ClientLibs automatycznie rozwi\u0105zuje ten problem (poprzez dodanie skr\u00f3tu-hash zawarto\u015bci do nazwy pliku pakietu). Biblioteki ClientLibs obs\u0142uguj\u0105 opcjonaln\u0105 minifikacj\u0119, co pozwala dodatkowo skr\u00f3ci\u0107 czas przesy\u0142ania i przetwarzania.<\/p>\n\n\n\n<p>Jednak w przypadku protoko\u0142\u00f3w HTTP\/2 i HTTP\/3 mniejsza liczba \u017c\u0105da\u0144 nie zawsze oznacza automatycznie lepsze wyniki \u2013 nale\u017cy dba\u0107 o to, by krytyczne pliki CSS by\u0142y niewielkie, unika\u0107 stosowania jednego ogromnego pakietu JavaScript blokuj\u0105cego \u0142adowanie ca\u0142ej witryny oraz, w miar\u0119 mo\u017cliwo\u015bci, dzieli\u0107 funkcje wed\u0142ug tras lub potrzeb. Warto pami\u0119ta\u0107 o op\u00f3\u017anionym \u0142adowaniu element\u00f3w analitycznych i reklam po wst\u0119pnym wyrenderowaniu strony.<\/p>\n\n\n\n<p>Powinni\u015bmy r\u00f3wnie\u017c rozwa\u017cy\u0107 optymalizacj\u0119 zasob\u00f3w, wykorzystanie sieci, zaawansowane techniki frontendu oraz prawid\u0142ow\u0105 konfiguracj\u0119 buforowania, zgodnie z opisem w poprzednich sekcjach.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Interaction To Next Paint<\/strong><\/h3>\n\n\n\n<p>Poprawa p\u0142ynno\u015bci dzia\u0142ania mo\u017ce by\u0107 trudniejsza i mo\u017ce wymaga\u0107 w\u0142\u0105czenia trybu debugowania w przegl\u0105darce internetowej.<\/p>\n\n\n\n<p>Sprawd\u017a, kt\u00f3ra interakcja faktycznie przebiega najwolniej \u2013 wska\u017anik INP mierzy p\u0142ynno\u015b\u0107 dzia\u0142ania w trakcie ca\u0142ej wizyty, a nie tylko przy pierwszym klikni\u0119ciu. Upewnij si\u0119, \u017ce \u017cadne zadania JavaScript nie blokuj\u0105 g\u0142\u00f3wnego w\u0105tku \u2013 w razie potrzeby skorzystaj z Web Workers i podziel d\u0142ugotrwa\u0142e zadania na mniejsze cz\u0119\u015bci, aby przegl\u0105darka mog\u0142a szybciej wy\u015bwietla\u0107 zawarto\u015b\u0107<a>.<\/a><\/p>\n\n\n\n<p>Du\u017cy model DOM (Document Object Model) zawieraj\u0105cy zbyt wiele element\u00f3w, nadmiernie skomplikowane definicje uk\u0142adu oraz z\u0142o\u017cone aktualizacje interfejsu powoduj\u0105 spowolnienie dzia\u0142ania strony. Obci\u0105\u017caj\u0105ce skrypty stron trzecich mog\u0105 nie by\u0107 zoptymalizowane \u2013 sprawd\u017a dost\u0119pno\u015b\u0107 aktualizacji lub alternatywnych rozwi\u0105za\u0144. Zapewnij wizualn\u0105 informacj\u0119 zwrotn\u0105 na wczesnym etapie, nawet je\u015bli ca\u0142a operacja zostanie zako\u0144czona p\u00f3\u017aniej.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cumulative Layout Shift<\/strong><\/h3>\n\n\n\n<p>Je\u015bli uk\u0142ad strony miga podczas \u0142adowania lub elementy szybko przemieszczaj\u0105 si\u0119 w inne miejsca, oznacza to niestabilno\u015b\u0107 wizualn\u0105. Nale\u017cy rozwa\u017cy\u0107 wst\u0119pne obliczenie uk\u0142adu, uwzgl\u0119dniaj\u0105c r\u00f3\u017cne rozmiary i orientacje okna przegl\u0105darki. Zamiast stosowa\u0107 uk\u0142ad i stylizacj\u0119 za pomoc\u0105 skrypt\u00f3w, lepiej jest wykona\u0107 to wy\u0142\u0105cznie w CSS, a nawet oznaczy\u0107 elementy do wst\u0119pnego \u0142adowania.<\/p>\n\n\n\n<p>W miejscach na stronie, kt\u00f3re wymagaj\u0105 dynamicznego \u0142adowania zasob\u00f3w i informacji, nale\u017cy stosowa\u0107 symbole zast\u0119pcze lub szkielety. Zawsze powinni\u015bmy okre\u015bla\u0107 szeroko\u015b\u0107 i wysoko\u015b\u0107 obraz\u00f3w, stosowa\u0107 symbole zast\u0119pcze oparte na proporcjach (<code>aspect-ratio<\/code>) lub o sta\u0142ych wymiarach w przypadku plik\u00f3w multimedialnych, element\u00f3w osadzonych i reklam, rezerwowa\u0107 sta\u0142e miejsca na tre\u015bci dynamiczne oraz stosowa\u0107 animacje z wykorzystaniem transformacji (<code>transform<\/code>) i krycia (<code>opacity<\/code>) zamiast w\u0142a\u015bciwo\u015bci wp\u0142ywaj\u0105cych na uk\u0142ad strony.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Infrastruktura<\/strong><\/h2>\n\n\n\n<p>Aby przyspieszy\u0107 dzia\u0142anie backendu, mo\u017cna doda\u0107 wi\u0119cej serwer\u00f3w lub zastosowa\u0107 szybsze oprogramowanie \u2013 <strong>Kapitan Oczywisto\u015b\u0107, do us\u0142ug!<\/strong><\/p>\n\n\n\n<p>W\u0142a\u015bnie dlatego pozostawi\u0142em temat infrastruktury jako ostatni\u0105 sekcj\u0119 przed podsumowaniem, ale poniewa\u017c nie mo\u017cemy po prostu pomin\u0105\u0107 tej kwestii, przyjrzyjmy si\u0119 jej pokr\u00f3tce. Infrastruktura cz\u0119sto nie jest w\u0142a\u015bciwym punktem wyj\u015bcia, poniewa\u017c wi\u0119ksza moc obliczeniowa procesora nie rozwi\u0105\u017ce problem\u00f3w zwi\u0105zanych z op\u00f3\u017anionym wykrywaniem zasob\u00f3w, nieodpowiedni\u0105 polityk\u0105 buforowania czy zbyt du\u017cymi plikami multimedialnymi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Serwery<\/strong><\/h3>\n\n\n\n<p>W przypadku serwer\u00f3w (zar\u00f3wno wirtualnych, jak i fizycznych) mo\u017cna skalowa\u0107 je pionowo (w g\u00f3r\u0119) poprzez dodawanie kolejnych zasob\u00f3w (procesor\u00f3w, pami\u0119ci RAM, miejsca na dysku). Podczas pracy w \u015brodowisku wirtualnym (np. na serwerach VPS \u2013 Virtual Private Servers) zasoby s\u0105 wsp\u00f3\u0142dzielone z innymi serwerami wirtualnymi i nawet je\u015bli zosta\u0142y przydzielone, nie zawsze s\u0105 w pe\u0142ni dost\u0119pne (zazwyczaj nie ma na to gwarancji).<\/p>\n\n\n\n<p>Je\u015bli Twoja aplikacja obs\u0142uguje skalowanie horyzontalne, mo\u017cesz r\u00f3wnie\u017c doda\u0107 kolejne serwery. W przypadku korzystania z us\u0142ug dostawc\u00f3w chmury obliczeniowej proces ten mo\u017cna zautomatyzowa\u0107 w zale\u017cno\u015bci od zapotrzebowania.<\/p>\n\n\n\n<p>Wa\u017cne jest r\u00f3wnie\u017c umiejscowienie serwera. Je\u015bli kluczowe zasoby znajduj\u0105 si\u0119 w innym \u017ar\u00f3dle, przegl\u0105darka mo\u017ce wymaga\u0107 dodatkowej konfiguracji DNS, TCP, TLS i protoko\u0142\u00f3w, zanim b\u0119dzie mog\u0142a je pobra\u0107, dlatego dostarczanie kluczowych zasob\u00f3w z tego samego \u017ar\u00f3d\u0142a jest cz\u0119sto prostsze i szybsze.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Oprogramowanie<\/strong><\/h3>\n\n\n\n<p>Zaktualizuj lub wymie\u0144 oprogramowanie. Sprawd\u017a i przeanalizuj ka\u017cd\u0105 aplikacj\u0119 w swoim \u015brodowisku. Przestarza\u0142e aplikacje lub ich zale\u017cno\u015bci mog\u0105 dzia\u0142a\u0107 wolniej (a tak\u017ce, co oczywiste, stwarza\u0107 zagro\u017cenie dla bezpiecze\u0144stwa). Nowsze wersje s\u0105 zazwyczaj zoptymalizowane i bezpieczniejsze, dlatego tak wa\u017cne jest, aby je aktualizowa\u0107. Je\u015bli oprogramowanie nie jest ju\u017c aktualizowane lub dost\u0119pne s\u0105 szybsze (a najlepiej tak\u017ce bezpieczniejsze) alternatywy, warto rozwa\u017cy\u0107 jego wymian\u0119.<\/p>\n\n\n\n<p>Korzystaj\u0105c z kompleksowych rozwi\u0105za\u0144, takich jak Adobe Experience Cloud \u2013 czyli platformy do tworzenia stron internetowych klasy korporacyjnej, obejmuj\u0105cej zarz\u0105dzanie tre\u015bci\u0105, zasobami cyfrowymi (obrazami, filmami, dokumentami) oraz obs\u0142ug\u0119 formularzy \u2013 wszystkie aplikacje s\u0105 utrzymywane przez dostawc\u0119 i automatycznie aktualizowane.<\/p>\n\n\n\n<p>W przypadku AEM tradycyjne rozwi\u0105zanie oparte na serwisach, dyspozytorze (module Dispatcher) i sieci CDN nadal sprawdza si\u0119 i mo\u017ce dzia\u0142a\u0107 szybko, je\u015bli jest odpowiednio skonfigurowane. Natomiast AEM jako us\u0142uga w chmurze zapewnia zarz\u0105dzane aktualizacje oraz wersjonowane biblioteki ClientLibs z d\u0142ugotrwa\u0142\u0105 pami\u0119ci\u0105 podr\u0119czn\u0105.<\/p>\n\n\n<div class=\"nsw-o-blogersii-banner\">\n            <picture>\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-AEC-Desktop_.jpg\" media=\"(min-width: 992px)\" >\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-AEC-Mob_.jpg\" media=\"(min-width: 300px)\" >            <img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-AEC-Desktop_.jpg\" alt=\"\"  class=\"\"  >\n        <\/picture>\n        <div class=\"cnt\">\n                    <div class=\"nsw-m-title-block -h3 -invert  -has-title-margin-bottom-0 -has-title-font-weight-bold\">\n                                <h2 class=\"nsw-m-title-block__title\">Sii x Adobe Experience Cloud<\/h2>\n                <\/div>\n                            <p class=\"has-nsw-p-4-font-size has-invert-color\">\n                Jako oficjalny partner Adobe Experience Cloud wdra\u017camy rozwi\u0105zania z zakresu zarz\u0105dzania tre\u015bci\u0105, orkiestracji \u015bcie\u017cki klienta oraz automatyzacji marketingu, aby usprawni\u0107 operacje i zwi\u0119kszy\u0107 efektywno\u015b\u0107 Twoich kampanii.\n            <\/p>\n                            <a  href=\"https:\/\/sii.pl\/oferta\/enterprise-platforms\/adobe\/\" class=\"nsw-a-button -ghost -banner-button\"   >\n        <span>Oferta Adobe<\/span>\n    <\/a>\n            <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podsumowanie<\/strong><\/h2>\n\n\n\n<p>Najszybsz\u0105 stron\u0105 internetow\u0105 by\u0142aby strona statyczna, kt\u00f3rej pliki nadaj\u0105 si\u0119 w pe\u0142ni do buforowania i s\u0105 rozmieszczone na ca\u0142ym \u015bwiecie. Jednak dla wi\u0119kszo\u015bci przypadk\u00f3w nie jest to mo\u017cliwe ze wzgl\u0119du na biznesow\u0105 konieczno\u015b\u0107 cz\u0119stych aktualizacji stron oraz dynamicznych tre\u015bci dostosowanych do konkretnych u\u017cytkownik\u00f3w.<\/p>\n\n\n\n<p>Wybieraj\u0105c odpowiedni stos technologiczny i konfiguruj\u0105c go w\u0142a\u015bciwie, mo\u017cna obs\u0142u\u017cy\u0107 miliony \u017c\u0105da\u0144 dziennie bez gwa\u0142townego wzrostu koszt\u00f3w. W przypadku istniej\u0105cych stron internetowych nale\u017cy najpierw skupi\u0107 si\u0119 na odpowiednich ustawieniach buforowania (zar\u00f3wno po stronie serwera, jak i klienta) oraz optymalizacji \u015bcie\u017cki LCP, a nast\u0119pnie usun\u0105\u0107 zb\u0119dne arkusze CSS i skrypty JavaScript blokuj\u0105ce renderowanie oraz odpowiednio skompresowa\u0107 i zmieni\u0107 rozmiar plik\u00f3w multimedialnych.<\/p>\n\n\n\n<p>Optymalizacje te nie zawsze wymagaj\u0105 znacz\u0105cych zmian w kodzie \u017ar\u00f3d\u0142owym i infrastrukturze, a mimo to mog\u0105 znacznie poprawi\u0107 wydajno\u015b\u0107. Je\u015bli dysponujesz odpowiedni\u0105 ilo\u015bci\u0105 czasu i \u015brodk\u00f3w, rozwa\u017c inne mo\u017cliwo\u015bci.<\/p>\n\n\n\n<p>Podsumowuj\u0105c najwa\u017cniejsze om\u00f3wione zagadnienia:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Buforowanie stanowi podstaw\u0119 \u2013 przy odpowiedniej konfiguracji obs\u0142uguje ono zdecydowan\u0105 wi\u0119kszo\u015b\u0107 publicznych \u017c\u0105da\u0144.<\/li>\n\n\n\n<li>Optymalizacja zasob\u00f3w poprzez wykorzystanie nowoczesnych format\u00f3w obraz\u00f3w (WebP, AVIF), podawanie konkretnych wymiar\u00f3w oraz usprawnione dostarczanie plik\u00f3w wideo pozwala zmniejszy\u0107 rozmiar plik\u00f3w i poprawi\u0107 renderowanie bez widocznej utraty jako\u015bci.<\/li>\n\n\n\n<li>Ulepszenia sieciowe, takie jak CDN, HTTP\/2, HTTP\/3 oraz algorytmy kompresji (Brotli, Zstandard), dodatkowo skracaj\u0105 op\u00f3\u017anienia i czas przesy\u0142ania danych.<\/li>\n\n\n\n<li>Wska\u017aniki Core Web Vitals okre\u015blaj\u0105 mierzalne cele dotycz\u0105ce szybko\u015bci \u0142adowania, responsywno\u015bci i stabilno\u015bci wizualnej.<\/li>\n<\/ol>\n\n\n\n<p><strong>Pami\u0119taj, \u017ce optymalizacja wydajno\u015bci to proces ci\u0105g\u0142y, a nie jednorazowe zadanie.<\/strong><\/p>\n\n\n\n<p>Wraz z rozwojem przegl\u0105darek i pojawianiem si\u0119 nowych standard\u00f3w, wci\u0105\u017c dochodz\u0105 nowe mo\u017cliwo\u015bci ulepsze\u0144. Zacznij od podstaw, dokonuj pomiar\u00f3w na podstawie danych od rzeczywistych u\u017cytkownik\u00f3w i wprowadzaj kolejne zmiany. <a><\/a><\/p>\n\n\n\n<p>Szybka strona internetowa <strong>to nie tylko przewaga techniczna <\/strong>\u2013 zapewnia ona lepsze wra\u017cenia u\u017cytkownika, zajmuje wy\u017csze pozycje w wynikach wyszukiwania, szybciej pojawia si\u0119 w odpowiedziach czatu opartego na sztucznej inteligencji, a ostatecznie przyczynia si\u0119 do osi\u0105gni\u0119cia lepszych wynik\u00f3w biznesowych.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;33737&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;2&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;0\\\/5&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;B\u0142yskawicznie szybkie strony internetowe: Jak Adobe Experience Manager mo\u017ce pom\u00f3c&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/5&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            <span class=\"kksr-muted\"><\/span>\n    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Istnieje wiele sposob\u00f3w udost\u0119pniania stron internetowych \u2013 od r\u0119cznego tworzenia stron HTML (lub, coraz cz\u0119\u015bciej, generowania ich za pomoc\u0105 sztucznej &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/blyskawicznie-szybkie-strony-internetowe-jak-adobe-experience-manager-moze-pomoc\/\">Continued<\/a><\/p>\n","protected":false},"author":590,"featured_media":33742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1316],"tags":[1546,1512,1218,930,112],"class_list":["post-33737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-miekko","tag-przeglad-narzedzi","tag-poradnik","tag-adobe-experience-manager","tag-e-commerce","tag-www"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/05\/code_3.jpg","category_names":["Development na mi\u0119kko"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/33737"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/590"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=33737"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/33737\/revisions"}],"predecessor-version":[{"id":33746,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/33737\/revisions\/33746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/33742"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=33737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=33737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=33737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}