{"id":4094,"date":"2010-08-10T09:10:59","date_gmt":"2010-08-10T07:10:59","guid":{"rendered":"http:\/\/sprawnymarketing.pl\/?p=4094"},"modified":"2022-12-28T23:59:52","modified_gmt":"2022-12-28T22:59:52","slug":"skrocenie-czasu-ladowania-sie-strony-lekcja-1","status":"publish","type":"post","link":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/","title":{"rendered":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO"},"content":{"rendered":"<p>Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce <strong>szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania<\/strong>. Zmiana ta mia\u0142a dotyczy\u0107 jedynie cz\u0119\u015bci witryn, kt\u00f3re mo\u017cna odnale\u017a\u0107 przez google.com. Do tej pory Google nie potwierdzi\u0142o, \u017ce ta zmiana dotyczy wszystkich witryn. Jednak je\u015bli nawet nie dotyczy, to zapewne w niedalekiej przysz\u0142o\u015bci zmiana ta pojawi si\u0119 r\u00f3wnie\u017c w Google.pl Z tego powodu warto zoptymalizowa\u0107 stron\u0119 pod k\u0105tem wydajno\u015bci.<\/p>\n<p>Postaram si\u0119 przekona\u0107 Ci\u0119, Drogi Czytelniku, \u017ce nawet bez wiedzy \u015bci\u015ble technicznej jeste\u015b w stanie skr\u00f3ci\u0107 czas \u0142adowania si\u0119 Twojej strony! Po cichu jednak licz\u0119, \u017ce nie skr\u0119ca Ci\u0119 na sam widok skr\u00f3t\u00f3w: <em>HTML<\/em>, <em>CSS<\/em>, <em>JS<\/em> czy <em>AJAX<\/em>.<\/p>\n<h1><!--more-->Czas \u0142adowania witryny: SEO i inne powody do optymalizacji<\/h1>\n<p>W zwi\u0105zku ze zmian\u0105 w algorytmie Google nasuwa si\u0119 szereg pyta\u0144: <strong>jak du\u017cy wp\u0142yw na pozycje ma szybko\u015b\u0107 \u0142adowania?<\/strong> Czy szybko\u015b\u0107 \u0142adowania jest wa\u017cniejsza od s\u0142owa kluczowego w tytule strony? Jest mniej wa\u017cna od wieku domeny? W kwietniu, na kanale GoogleWebmasterHelp pojawi\u0142a si\u0119 \u201eodpowied\u017a\u201d Matta Cuttsa. Cudzys\u0142\u00f3w nie jest tu przypadkowy, poniewa\u017c jego odpowiedzi s\u0105 cz\u0119sto bardzo wymijaj\u0105ce, nie inaczej by\u0142o w tym przypadku:<\/p>\n<p>[youtube]http:\/\/www.youtube.com\/watch?v=muSIzHurn4U[\/youtube]<\/p>\n<p>W powy\u017cszym videoka\u015bcie Cutts m\u00f3wi, \u017ce czas \u0142adowania si\u0119 strony nie jest decyduj\u0105cy przy ustalaniu pozycji, <strong>jednak nie zdradza jak du\u017ca jest jego rola.<\/strong> Podaje przyk\u0142ad dw\u00f3ch identycznych stron, z kt\u00f3rych jedna \u0142aduje si\u0119 szybciej. Oczywi\u015bcie jest ona bardziej warto\u015bciowa.<\/p>\n<h2>Szybko\u015b\u0107 \u0142adowania si\u0119 strony, a SEO<\/h2>\n<p>Cho\u0107 zmian\u0119 og\u0142oszono w kwietniu, to wydaje si\u0119, \u017ce <strong>szybko\u015b\u0107 \u0142adowania si\u0119 strony mia\u0142a wp\u0142yw na SEO ju\u017c o wiele wcze\u015bniej<\/strong>. Google potwierdzi\u0142o ju\u017c dawno, \u017ce \u0142atwo\u015b\u0107 oraz szybko\u015b\u0107 poruszania si\u0119 po stronie przez Googlebota jest wa\u017cne. Optymalizacja strony u\u0142atwia robotowi Google\u2019a dotarcie do ka\u017cdej tre\u015bci zawartej w witrynie.<\/p>\n<h2>Po co optymalizowa\u0107 stron\u0119?<\/h2>\n<p>Powod\u00f3w do optymalizacji strony pod k\u0105tem wydajno\u015bci opr\u00f3cz SEO jest wiele. W swoich badaniach firma Nielsen Norman Group sprawdzi\u0142a, \u017ce <strong>je\u015bli u\u017cytkownik nie zobaczy w ci\u0105gu 10 sekund widocznych efekt\u00f3w \u0142adowania si\u0119 strony to jest prawie pewne, \u017ce j\u0105 opu\u015bci.<\/strong> W kolejnych badaniach okaza\u0142o si\u0119, \u017ce ocena wystawiona stronie przez u\u017cytkownika po 0,5 sekundy jest niemal identyczna z t\u0105 wystawion\u0105 po 10 sekundach przegl\u0105dania serwisu. Wniosek jest oczywisty, mamy jedynie 0,5 sekundy na to, aby wywrze\u0107 pozytywne wra\u017cenie na u\u017cytkowniku.<\/p>\n<p>Ostatnim z powod\u00f3w, dla kt\u00f3rych warto optymalizowa\u0107 stron\u0119 jest wsp\u00f3\u0142czynnik konwersji. Warto skorzysta\u0107 z do\u015bwiadcze\u0144 Google\u2019a i Amazona. Eksperymenty dotyczy\u0142y:<\/p>\n<ul>\n<li>google.com,<\/li>\n<li>maps.google.com,<\/li>\n<li>amazon.com.<\/li>\n<\/ul>\n<p>W google.com przez pewien czas testowano rozwi\u0105zanie z 30 wynikami wyszukiwania na stron\u0119. <strong>Efektem tych test\u00f3w by\u0142o wyd\u0142u\u017cenie si\u0119 czasu \u0142adowania (w stosunku do 10 wynik\u00f3w na stron\u0119) o p\u00f3\u0142 sekundy.<\/strong> Skutkowa\u0142o to zmniejszeniem si\u0119 ruchu na stronie i spadkiem przychod\u00f3w o 20%. Kolejny do\u015b\u0107 ciekawy przypadek dotyczy Google Maps. Zmniejszenie wagi strony g\u0142\u00f3wnej ze 100 kB do 70-80 kB spowodowa\u0142o zwi\u0119kszenie ruchu na stronie o 10% w pierwszym tygodniu i o 25% w kolejnych trzech tygodniach. Nie inaczej ni\u017c w dw\u00f3ch poprzednich przypadkach by\u0142o przy eksperymentach zwi\u0105zanych z czasem \u0142adowania si\u0119 amazon.com. Wyd\u0142u\u017cenie si\u0119 tego czasu o 100 ms spowodowa\u0142o obni\u017cenie si\u0119 sprzeda\u017cy o 1%.<\/p>\n<h2>Podsumowanie<\/h2>\n<p>Je\u015bli doczyta\u0142e\u015b do tego momentu to my\u015bl\u0119, \u017ce uda\u0142o mi si\u0119 Ciebie przekona\u0107, \u017ce warto optymalizowa\u0107 stron\u0119. <strong>Poni\u017cej&nbsp;opisz\u0119, co nale\u017cy zrobi\u0107, ale przede wszystkim jak to zrobi\u0107.<\/strong> Znajomo\u015b\u0107 HTML, CSS i JavaScript mile widziana, aczkolwiek niekonieczna.<\/p>\n<h1>Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony<\/h1>\n<p>Zaczniemy od poprawek na stronie, kt\u00f3re mo\u017cna wprowadzi\u0107 ma\u0142ym nak\u0142adem pracy, a jednocze\u015bnie nie wymagaj\u0105 du\u017cej wiedzy z zakresu technik sieciowych. Czy to oznacza, \u017ce zysk z ich wprowadzenia jest mniejszy od tych, kt\u00f3re wymagaj\u0105 zaawansowanej wiedzy? Oczywi\u015bcie, \u017ce nie!<\/p>\n<h3>Minimalizacja liczby \u017c\u0105da\u0144 dzi\u0119ki zmniejszeniu liczby plik\u00f3w CSS<\/h3>\n<p>Sprawd\u017a \u017ar\u00f3d\u0142o swojej strony. Odszukaj \u0142\u0105cza do plik\u00f3w CSS. Prawdopodobnie znajduj\u0105 si\u0119 gdzie\u015b na pocz\u0105tku. Je\u015bli znalaz\u0142e\u015b to masz mniej wi\u0119cej co\u015b takiego:<\/p>\n<p>W miejscu kodu powy\u017cszego wstaw:<\/p>\n<p>W pliku styles.css powinna znale\u017a\u0107 si\u0119 zawarto\u015b\u0107 plik\u00f3w global.css, top_index.css, bottom_index.css i index.css. Dla bezpiecze\u0144stwa lepiej jest zachowa\u0107 kolejno\u015b\u0107, czyli wklejamy kod do pliku styles.css w takiej kolejno\u015bci w jakiej wyst\u0105pi\u0142 w \u017ar\u00f3dle strony.<\/p>\n<h3>Kompresja kodu CSS<\/h3>\n<p>Teraz mamy ju\u017c tylko jeden plik CSS. Dzi\u0119ki temu zmniejszyli\u015bmy liczb\u0119 \u017c\u0105da\u0144 zewn\u0119trznych o n-1, gdzie n jest liczb\u0105 \u0142\u0105czy do plik\u00f3w CSS. Kolejnym etapem jest <strong>kompresja kodu CSS<\/strong>, jej wynikiem mo\u017ce by\u0107 zmniejszenie si\u0119 rozmiaru pliku styles.css o nawet kilkadziesi\u0105t KB. W tym artykule nie b\u0119d\u0119 si\u0119 rozwodzi\u0142 nad zaawansowanymi metodami kompresji kodu CSS i sprowadz\u0119 j\u0105 jedynie do tego, co oferuj\u0105 narz\u0119dzia kompresuj\u0105ce \u2013 dost\u0119pne w sieci. Usuwaj\u0105 one spacje, przecinki,znaki nowej linii, komentarze i skracaj\u0105 zapisy np. koloru w notacji heksadecymalnej. Przed skorzystaniem z kompresora CSS warto zachowa\u0107 na wszelki wypadek kopi\u0119 pliku. Skompresowany kod CSS mo\u017ce wygl\u0105da\u0107 tak:<\/p>\n<p>\u0141\u0105cze do pliku CSS umieszczamy przed zamkni\u0119ciem znacznika head, czyli musimy w kodzie strony odszuka\u0107 linijki z \u201e&lt;\/head&gt;\u201d.<\/p>\n<h3>Minimalizacja liczby \u017c\u0105da\u0144 dzi\u0119ki zmniejszeniu liczby plik\u00f3w JS<\/h3>\n<p>W przypadku plik\u00f3w z kodem JavaScript post\u0119pujemy podobnie. Najpierw odszukujemy w kodzie strony odwo\u0142a\u0144 do tych plik\u00f3w:<\/p>\n<p>Z tych plik\u00f3w tworzymy jeden \u2013 nazwijmy go scripts.js. Kolejno\u015b\u0107 wklejania kodu do tego pliku jest istotna. W przypadku kodu JavaScript, tak\u017ce mo\u017cna korzysta\u0107 z kompresor\u00f3w dost\u0119pnych w sieci. Wcze\u015bniej lepiej jest zapisa\u0107 sobie kopi\u0119 kompresowanego kodu. Czasem zdarza si\u0119, \u017ce kod po kompresji mo\u017ce nie dzia\u0142a\u0107 poprawnie, dzieje si\u0119 tak na przyk\u0142ad wtedy, gdy w kodzie przed kompresj\u0105 brakowa\u0142o \u015brednik\u00f3w w niekt\u00f3rych miejscach. Znacznik \u201escripts\u201d umieszczamy na ko\u0144cu strony przed \u201e&lt;\/body&gt;\u201d.<\/p>\n<h3>Miejsce plik\u00f3w CSS i JS w kodzie strony<\/h3>\n<p>Pisa\u0142em ju\u017c wcze\u015bniej, \u017ce odwo\u0142anie do pliku CSS musi by\u0107 umiejscowione na ko\u0144cu sekcji head strony, a odwo\u0142anie do pliku JS na ko\u0144cu znacznika body. To nie jest przypadek. Style CSS powinny zosta\u0107 wczytane jeszcze przed przetworzeniem zawarto\u015bci sekcji body. Skrypt JS blokuje \u0142adowanie si\u0119 innych komponent\u00f3w na stronie, dlatego jego wczytywanie powinno odby\u0107 si\u0119 tak p\u00f3\u017ano, jak to tylko mo\u017cliwe. Dobrym rozwi\u0105zaniem jest umieszczenie skryptu JS przed ko\u0144cem znacznika \u201ebody\u201d, wtedy nie wp\u0142ynie on znacz\u0105co na <strong>czas \u0142adowania witryny<\/strong> i b\u0119dziemy mie\u0107 pewno\u015b\u0107, \u017ce obrazki i inne komponenty za\u0142aduj\u0105 si\u0119 bez op\u00f3\u017anie\u0144.<\/p>\n<h3>Korzystaj z CDN<\/h3>\n<p>Zadaniem CDN (ang. <em>content delivery network<\/em>) jest szybsze dostarczanie tre\u015bci u\u017cytkownikowi ko\u0144cowemu. Tre\u015bci na stronie mog\u0105 by\u0107 pobierane z jednego serwera tylko w spos\u00f3b sekwencyjny, czyli po kolei. Do przyspieszenia wczytywania si\u0119 strony konieczna jest asynchroniczno\u015b\u0107, czyli \u0142adowanie si\u0119 tre\u015bci z kilku serwer\u00f3w jednocze\u015bnie. Z pomoc\u0105 przychodzi w\u0142a\u015bnie sie\u0107 dostarczania tre\u015bci. CDN Microsoftu i Google oferuj\u0105 szereg bibliotek, m.in. JQuery, MooTools czy Dojo. Pomimo tego, \u017ce CDN Microsoftu jest szybsza to jednak je\u015bli u\u017cywasz na stronie, np. JQuery radz\u0119 korzysta\u0107 z CDN Google\u2019a. Na stronach cz\u0119\u015bciej mo\u017cna spotka\u0107 bibliotek\u0119 JQuery \u0142adowan\u0105 z serwer\u00f3w Google ni\u017c Microsoftu. Je\u015bli u\u017cytkownik Twojej witryny odwiedzi\u0142 ju\u017c jak\u0105\u015b stron\u0119 korzystaj\u0105c\u0105 z CDN Google\u2019a, to biblioteka nie zostanie ponownie pobrana z serwera tylko zostanie za\u0142adowana z pami\u0119ci podr\u0119cznej (po stronie u\u017cytkownika), czyli du\u017co szybciej.<\/p>\n<h3>Podsumowanie<\/h3>\n<p>W tej lekcji pokr\u00f3tce om\u00f3wi\u0142em kilka metod, kt\u00f3re mimo swej prostoty maj\u0105 du\u017cy wp\u0142yw na czas \u0142adowania si\u0119 strony. Je\u015bli Twoja strona \u0142aduje si\u0119 wolno to popraw\u0119 powiniene\u015b dostrzec nawet bez korzystania z narz\u0119dzi do mierzenia czasu wczytywania si\u0119 strony. Po wprowadzeniu zmian obserwuj wykres w \u201eNarz\u0119dziach dla webmaster\u00f3w\u201d, w zak\u0142adce \u201eLaboratorium\u201d -&gt; \u201eWydajno\u015b\u0107 witryny\u201d. Warto po\u015bwi\u0119ci\u0107 troch\u0119 czasu, by m\u00f3c cieszy\u0107 si\u0119 \u0142adnym wykresem.<\/p>\n<p><a name=\"lekcja2\"><\/a><\/p>\n<h2>Lekcja 2<\/h2>\n<p>Kolejne sposoby na skr\u00f3cenie czasu \u0142adowania witryny bazuj\u0105 na umiej\u0119tnym wykorzystaniu technik CSS. Poni\u017cej opisz\u0119 metod\u0119 <strong>CSS Sprites<\/strong>. Technika ta jest ju\u017c do\u015b\u0107 znana i szeroko stosowana na stronach WWW. Na koniec b\u0119dzie kilka s\u0142\u00f3w o skr\u00f3ceniu czasu \u0142adowania witryny wykorzystuj\u0105c <strong>CSS3<\/strong>. Technika ta nie jest jeszcze szeroko stosowana ze wzgl\u0119du na brak wsparcia przez starsze przegl\u0105darki, kt\u00f3re jednak maj\u0105 niewielki udzia\u0142 w rynku, a w przysz\u0142o\u015bci b\u0119d\u0105 mia\u0142y jeszcze mniejszy.<\/p>\n<h3>Maksymalne wykorzystanie CSS<\/h3>\n<p>Do umieszczania na stronie drobnych element\u00f3w graficznych lepiej nie wykorzystywa\u0107 obrazk\u00f3w. Cz\u0119sto mo\u017cna je zast\u0105pi\u0107 przez odpowiednie w\u0142a\u015bciwo\u015bci CSS oraz encje HTML. Mam tutaj na my\u015bli wszelkiego rodzaju kolorowe prostok\u0105ty, poziome linie, pionowe linie itd. Poni\u017cej praktyczny przyk\u0142ad:<\/p>\n<p><a href=\"http:\/\/sprawnymarketing.pl\/?attachment_id=5611\" rel=\"attachment wp-att-5611\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5611\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo1.png\" alt=\"\" width=\"381\" height=\"90\" srcset=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo1.png 381w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo1-300x70.png 300w\" sizes=\"(max-width: 381px) 100vw, 381px\" \/><\/a><\/p>\n<p>Struktura html:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5612\" rel=\"attachment wp-att-5612\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5612\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo2.png\" alt=\"\" width=\"273\" height=\"128\"><\/a><\/p>\n<p>Style CSS:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5613\" rel=\"attachment wp-att-5613\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5613\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo3.png\" alt=\"\" width=\"636\" height=\"123\" srcset=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo3.png 636w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo3-300x58.png 300w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo3-530x102.png 530w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/a><\/p>\n<h3>CSS Sprites<\/h3>\n<p>Umieszczenie obrazka na stronie wi\u0105\u017ce si\u0119 z wys\u0142aniem \u017c\u0105dania do serwera.<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5614\" rel=\"attachment wp-att-5614\"><img decoding=\"async\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo4.png\" alt=\"\" width=\"650\" height=\"150\"><\/a><\/p>\n<p>Zamiast wysy\u0142ania kilku \u017c\u0105da\u0144 mo\u017cna wys\u0142a\u0107 jedno (w powy\u017cszym przyk\u0142adzie jedno zamiast 5). Warunek jest prosty. Trzeba po\u0142\u0105czy\u0107 kilka obrazk\u00f3w w jeden. &nbsp;Odnosz\u0105c si\u0119 do powy\u017cszego przyk\u0142adu nale\u017cy skonstruowa\u0107 plik np. o nazwie sprite.png, kt\u00f3ry b\u0119dzie zawiera\u0142 projekt_01.gif, projekt_02.gif itd. Po wgraniu takiego pliku na serwer trzeba zamie\u015bci\u0107 odpowiedni zapis w pliku CSS. Elementom strony, kt\u00f3re maj\u0105 t\u0142o przedstawione w pliku sprite.png nale\u017cy przypisa\u0107 odpowiedni\u0105 warto\u015b\u0107 dla w\u0142a\u015bciwo\u015bci background-image.<\/p>\n<p>Za\u0142\u00f3\u017cmy, \u017ce mamy na stronie ikonki: blip, facebook i rss.<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5615\" rel=\"attachment wp-att-5615\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5615\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo5.png\" alt=\"\" width=\"134\" height=\"58\"><\/a><\/p>\n<p>Struktura HTML:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5616\" rel=\"attachment wp-att-5616\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5616\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo6.png\" alt=\"\" width=\"426\" height=\"106\" srcset=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo6.png 426w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo6-300x74.png 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/a><\/p>\n<p>Plik sprite.png:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5617\" rel=\"attachment wp-att-5617\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5617\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo7.png\" alt=\"\" width=\"124\" height=\"41\"><\/a><\/p>\n<p>Style CSS:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5618\" rel=\"attachment wp-att-5618\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5618\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo8.png\" alt=\"\" width=\"594\" height=\"143\" srcset=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo8.png 594w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo8-300x72.png 300w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo8-530x127.png 530w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/a><\/p>\n<p>Zatem jak wida\u0107 powy\u017cej ka\u017cda z ikonek&nbsp; jest &#8222;oknem&#8221; o \u015bci\u015ble okre\u015blonych wymiarach, w tym wypadku 28 pikseli szeroko\u015bci i 28 pikseli wysoko\u015bci. Ka\u017cde z tych okien ma t\u0142o. T\u0142o jest odpowiednio przesuwane dla ka\u017cdego okna, dla ikonki RSS t\u0142o nie jest przesuni\u0119te, dla ikonki blipa jest przesuni\u0119te o 28 pikseli w lewo i dla ikonki facebooke\u2019a jest przesuni\u0119te o 56 pikseli w lewo. Zero we w\u0142a\u015bciwo\u015bci \u201ebackground-position\u201d oznacza, \u017ce nie ma \u017cadnego przesuni\u0119cia w pionie.<\/p>\n<h3>CSS3<\/h3>\n<p>Technika CSS3 nie jest wspierana przez&nbsp; wszystkie przegl\u0105darki. W\u015br\u00f3d tych przegl\u0105darek szczeg\u00f3lnie istotny jest brak wsparcia w Internet Explorerze w wersjach &nbsp;6, 7 i 8, poniewa\u017c u\u017cywa ich \u0142\u0105cznie prawie 30% u\u017cytkownik\u00f3w. Na szcz\u0119\u015bcie s\u0105 rozwi\u0105zania zapewniaj\u0105ce kompatybilno\u015b\u0107 tych przegl\u0105darek z CSS3 (np. CSS3 PIE). Kolejna wersja przegl\u0105darki Internet Explorer, czyli wersja 9 obs\u0142uguje CSS3.<\/p>\n<p>Na stronach WWW cz\u0119sto spotyka si\u0119 r\u00f3\u017cnego rodzaju cienie, gradienty czy te\u017c zaokr\u0105glenia. Realizacja tych element\u00f3w przez t\u0142a obrazkowe wi\u0105\u017ce si\u0119 z wyd\u0142u\u017ceniem czasu \u0142adowania strony. Tymczasem to samo mo\u017cna uzyska\u0107 wykorzystuj\u0105c technik\u0119 CSS3. Spo\u015br\u00f3d wszystkich w\u0142a\u015bciwo\u015bci CSS3 warto szczeg\u00f3ln\u0105 uwag\u0119 zwr\u00f3ci\u0107 na:<\/p>\n<ul>\n<li>border-radius (zaokr\u0105glanie rog\u00f3w),<\/li>\n<li>box-shadow (cie\u0144 boksu),<\/li>\n<li>text-shadow (cie\u0144 tekstu)<\/li>\n<\/ul>\n<p>oraz na w\u0142a\u015bciwo\u015bci zwi\u0105zane z gradientem.<\/p>\n<p>Przyk\u0142ad:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5619\" rel=\"attachment wp-att-5619\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5619\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo9.png\" alt=\"\" width=\"292\" height=\"80\"><\/a><\/p>\n<p>Style CSS:<\/p>\n<p><a href=\"https:\/\/sprawnymarketing.pl\/?attachment_id=5620\" rel=\"attachment wp-att-5620\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5620\" src=\"http:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo10.png\" alt=\"\" width=\"650\" height=\"413\" srcset=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo10.png 650w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo10-300x190.png 300w, https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/11\/seo10-530x336.png 530w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p><!--END--><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a dotyczy\u0107 jedynie cz\u0119\u015bci witryn, kt\u00f3re mo\u017cna odnale\u017a\u0107 przez google.com. Do tej pory Google nie potwierdzi\u0142o, \u017ce ta zmiana dotyczy wszystkich witryn. Jednak je\u015bli nawet nie dotyczy, to zapewne w niedalekiej przysz\u0142o\u015bci zmiana [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":23365,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1145,1151],"tags":[],"coauthors":[1189],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.1 (Yoast SEO v24.4) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO<\/title>\n<meta name=\"description\" content=\"Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a \u2022 Artyku\u0142 dosta\u0142 11 lajk\u00f3w.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO\" \/>\n<meta property=\"og:description\" content=\"Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a \u2022 Artyku\u0142 dosta\u0142 11 lajk\u00f3w.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/\" \/>\n<meta property=\"og:site_name\" content=\"sprawny.marketing \u2022 Szkolenia \u2022 Konferencje \u2022 Magazyn\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SprawnyMarketing\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-08-10T07:10:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-28T22:59:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"347\" \/>\n\t<meta property=\"og:image:height\" content=\"346\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Grzegorz Getka\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Grzegorz Getka\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minut\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Grzegorz Getka\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO","description":"Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a \u2022 Artyku\u0142 dosta\u0142 11 lajk\u00f3w.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/","og_locale":"pl_PL","og_type":"article","og_title":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO","og_description":"Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a \u2022 Artyku\u0142 dosta\u0142 11 lajk\u00f3w.","og_url":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/","og_site_name":"sprawny.marketing \u2022 Szkolenia \u2022 Konferencje \u2022 Magazyn","article_publisher":"https:\/\/www.facebook.com\/SprawnyMarketing\/","article_published_time":"2010-08-10T07:10:59+00:00","article_modified_time":"2022-12-28T22:59:52+00:00","og_image":[{"width":347,"height":346,"url":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg","type":"image\/jpeg"}],"author":"Grzegorz Getka","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Grzegorz Getka","Szacowany czas czytania":"12 minut","Written by":"Grzegorz Getka"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#article","isPartOf":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/"},"author":{"name":"Grzegorz Getka","@id":"https:\/\/sprawnymarketing.pl\/#\/schema\/person\/5a8742c19d881005c3ff7fe1768f6cd4"},"headline":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO","datePublished":"2010-08-10T07:10:59+00:00","dateModified":"2022-12-28T22:59:52+00:00","mainEntityOfPage":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/"},"wordCount":1921,"commentCount":10,"publisher":{"@id":"https:\/\/sprawnymarketing.pl\/#organization"},"image":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#primaryimage"},"thumbnailUrl":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg","articleSection":["SEO","Usability\/UX"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/","url":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/","name":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO","isPartOf":{"@id":"https:\/\/sprawnymarketing.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#primaryimage"},"image":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#primaryimage"},"thumbnailUrl":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg","datePublished":"2010-08-10T07:10:59+00:00","dateModified":"2022-12-28T22:59:52+00:00","description":"Ponad 3 miesi\u0105ce temu Google oficjalnie og\u0142osi\u0142o, \u017ce szybko\u015b\u0107 \u0142adowania si\u0119 strony ma wp\u0142yw na jej pozycje w wynikach wyszukiwania. Zmiana ta mia\u0142a \u2022 Artyku\u0142 dosta\u0142 11 lajk\u00f3w.","breadcrumb":{"@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#primaryimage","url":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg","contentUrl":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2010\/08\/optymalizacja-czasu-ladowania-stron-zegar.jpg","width":347,"height":346},{"@type":"BreadcrumbList","@id":"https:\/\/sprawnymarketing.pl\/blog\/skrocenie-czasu-ladowania-sie-strony-lekcja-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/sprawnymarketing.pl\/"},{"@type":"ListItem","position":2,"name":"Sposoby skr\u00f3cenia czasu \u0142adowania si\u0119 strony i wp\u0142yw szybko\u015bci strony na SEO"}]},{"@type":"WebSite","@id":"https:\/\/sprawnymarketing.pl\/#website","url":"https:\/\/sprawnymarketing.pl\/","name":"sprawny.marketing \u2022 Szkolenia \u2022 Konferencje \u2022 Magazyn","description":"","publisher":{"@id":"https:\/\/sprawnymarketing.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sprawnymarketing.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/sprawnymarketing.pl\/#organization","name":"sprawny.marketing \u2022 Szkolenia \u2022 Konferencje \u2022 Magazyn","url":"https:\/\/sprawnymarketing.pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/sprawnymarketing.pl\/#\/schema\/logo\/image\/","url":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2020\/07\/logo-3.png","contentUrl":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2020\/07\/logo-3.png","width":512,"height":106,"caption":"sprawny.marketing \u2022 Szkolenia \u2022 Konferencje \u2022 Magazyn"},"image":{"@id":"https:\/\/sprawnymarketing.pl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SprawnyMarketing\/"]},{"@type":"Person","@id":"https:\/\/sprawnymarketing.pl\/#\/schema\/person\/5a8742c19d881005c3ff7fe1768f6cd4","name":"Grzegorz Getka","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/sprawnymarketing.pl\/#\/schema\/person\/image\/72b832ca88dd098a030097ac4dcb7a38","url":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2020\/07\/avatar-1-150x150.png","contentUrl":"https:\/\/sprawnymarketing.pl\/wp-content\/uploads\/2020\/07\/avatar-1-150x150.png","caption":"Grzegorz Getka"},"description":"Konsultant z zakresu pozycjonowania i optymalizacji stron internetowych. Prowadzi\u0142 agencj\u0119 NetOpen.pl. Obecnie product manager w Banku BPH","url":"https:\/\/sprawnymarketing.pl\/blog\/autor\/grzegorz-getka\/"}]}},"_links":{"self":[{"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/posts\/4094"}],"collection":[{"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/comments?post=4094"}],"version-history":[{"count":2,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/posts\/4094\/revisions"}],"predecessor-version":[{"id":45278,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/posts\/4094\/revisions\/45278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/media\/23365"}],"wp:attachment":[{"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/media?parent=4094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/categories?post=4094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/tags?post=4094"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/sprawnymarketing.pl\/smblog-api\/wp\/v2\/coauthors?post=4094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}