[huge_it_slider id='1']

Jak nie zabi膰 strony banerami we flash’u!

W czasach, kiedy mog艂oby si臋 wydawa膰, 偶e optymalizacja stron co za tym idzie te偶 ich wagi ma wielkie znaczenie dziw bierze, 偶e do tej pory mo偶na zobaczy膰 banery wa偶膮ce po 300 czy 500kb. W dobie sta艂ego 艂膮cza wiele os贸b przesta艂o na to zwraca膰 uwag臋, a jak pisa艂em ostatnio szybko艣膰 wczytywania si臋 strony mo偶e mie膰 wp艂yw na jej pozycj臋 w Google. Dodatkowo warto te偶 zwr贸ci膰 uwag臋 na co raz wi臋ksz膮 liczb臋 u偶ytkownik贸w korzystaj膮cych na co dzie艅 z mobilnego dost臋pu do internetu z laptop贸w czy te偶 telefon贸w kom贸rkowych.

Z czym wi膮偶e si臋 tak du偶a waga banera?

Przyjmijmy, 偶e przeci臋tna strona www wa偶y w granicach 700kb. Dodanie do niej banera o wadze 400kb, powoduje zwi臋kszenie si臋 wagi naszej strony o po艂ow臋 przy za艂o偶eniu, 偶e pojawi si臋 tylko jeden baner co za tym idzie wp艂ynie to na wyd艂u偶enie si臋 jej 艂adowania. Oczywi艣cie je艣li kto艣 dysponuje 艂膮czem kilka mb to b臋dzie to dla niego niezauwa偶alne jednak zawsze trzeba bra膰 pod uwag臋 u偶ytkownik贸w tak偶e z du偶o s艂abszym 艂膮czem.

Przypu艣膰my ze na stronie posiadamy jednocze艣nie wy艣wietlaj膮ce si臋 3 banery po 350kb i 2 po 200kb. 艁膮cznie daje to nam blisko 1.5mb (1450kb) je艣li dodamy do tego wag臋 strony 700kb wyjdzie nam 2150kb. Wczytanie strony o wadze ponad 2mb dla u偶ytkownik贸w o s艂abszych 艂膮czach b臋dzie udr臋k膮 (cho膰 mo偶liwe, 偶e tacy u偶ytkownicy korzystaj膮 z program贸w typu adblock).

Kolejna kwestia to transfer serwera jaki zostaje u偶yty do wy艣wietlenia tak ci臋偶kiej strony. Przy 1000 unikalnych u偶ytkownikach dziennie wy艣wietlenie tylko strony g艂贸wnej poch艂oni transfer dzienny rz臋du 2gb. Warto zastanowi膰 si臋 czy ze wzgl臋du na konieczno艣膰 kupienia wi臋kszego serwera nie wyjdzie nam to bokiem.

Powy偶szy przyk艂ad to sytuacja skrajna jednak warto sobie u艣wiadomi膰 jakie mog膮 by膰 konsekwencje tak niby banalnej rzeczy jak waga banera.

Nie bez powodu portale onet, wp… maj膮 ograniczon膮 wag臋 przyjmowanych baner贸w do 20 czy 30kb. Przy odwiedzinach generowanych przez portale ka偶de kilka kb robi wielk膮 r贸偶nic臋.

Cz臋艣ciowym rozwi膮zaniem jest umieszczenie banera na serwerze klienta i tylko wy艣wietlanie go u nas. Dzi臋ki temu zaoszcz臋dzimy transfer jednak u偶ytkownicy dalej b臋d膮 nara偶eni na wczytywanie si臋 ci臋偶kiej strony.

Sk膮d bior膮 si臋 tak ci臋偶kie banery?

Po pierwsze graficy nie bior膮 pod uwag臋 偶adnych ogranicze艅 i wyobra藕nia mocno ich ponosi 馃檪 Zdaje sobie spraw臋 z tego, 偶e reklama ma by膰 ciekawa, przykuwa膰 uwag臋 jednak ograniczenie musi by膰, a zainteresowanie mo偶na wzbudzi膰 na r贸偶ne sposoby. Gdy pracowa艂em w firmie Play i robi艂em banery dla portali nauczy艂em si臋, 偶e baner nie mo偶e wa偶y膰 wi臋cej ni偶 25-30kb. Wesz艂o mi to w nawyk i wi臋kszo艣膰 baner贸w ograniczam do takiej wagi. Warto ju偶 na samym pocz膮tku ustali膰 wag臋 banera. Je艣li klient/szef ma wizj臋, kt贸ra nie zmie艣ci si臋 w naszych 30kb nale偶y od razu sprowadzi膰 go na ziemi臋 馃檪

Z moich obserwacji wynika, 偶e s膮 4 g艂贸wne powody du偶ej wagi baner贸w. Postaram si臋 je przedstawi膰 w prosty spos贸b.

1. Po pierwsze stosowanie du偶ej ilo艣ci zdj臋膰. Niestety, ale je艣li baner ma wielko艣膰 750x100px i ma wa偶y膰 25kb nie widz臋 szans na umieszczenie wi臋cej ni偶 jednego zdj臋cia. Je艣li rzeczywi艣cie w banerze w og贸le musi pojawi膰 si臋 zdj臋cie to polecam umie艣ci膰 jednego zdj臋cia i dodanie animacj臋 napis贸w czy innych element贸w wektorowych.

2. Po drugie stosowanie animacji kszta艂t贸w. We flashu s膮 2 rodzaje animacji (艂膮czenia ze sob膮 klatek). Jeden „Motion” s艂u偶y do animowania element贸w gotowych z biblioteki (zaimportowanych grafik, czy grafik stworzonych we flashu). Animacje takie z regu艂y polegaj膮 na przesuwaniu, znikaniu… gotowych obiekt贸w. S膮 to animacje nie wiele wa偶膮ce. Drugi rodzaj „Shape” to animacja element贸w rozbitych na krzywe (kszta艂t贸w). Przyk艂adem b臋dzie animacja przej艣cia jednego napisu w drugi, czy te偶 kwadratu w okr臋g jest to swojego rodzaju metamorfoza (podaje to tylko jako przyk艂ad bo sama zmiana ko艂a w kwadrat nie b臋dzie wiele wa偶y膰). Obiekt zmienia si臋 w inny obiekt. Taka animacja niestety, ale bardzo du偶o potrafi wa偶y膰.

3. Po trzecie korzystanie z gotowych efekt贸w dost臋pnych we flashu. Nie jest ich za wiele bo zaledwie 4 – rozmycie, cie艅, rozbicie obiektu i jeszcze jeden, ale nie wiem do czego on s艂u偶y. Niestety, ale efekty te generuj膮 ogromne pliki. Flash tworzy dziesi膮tki warstw i poddaje je animacji. Moim zdaniem jest to zb臋dny bajer stworzony jeszcze przez firm臋 Macromedia (aktualnie flash nale偶y do Adobe). Zrobienie samodzielnie cienia pod obiektem b臋dzie o wiele mniej wa偶y艂o ni偶 ten, kt贸ry mo偶na wygenerowa膰 we flashu.

4. Po czwarte nie korzystanie z obiekt贸w z biblioteki. Zdarza si臋, 偶e w banerze wykorzystywany jest jeden napis/kszta艂t wiele razy i za ka偶dym razem tworzony jest od pocz膮tku zamiast stworzy膰 jeden kszta艂t zapisa膰 go jako obiekt graficzny w bibliotece i wykorzystywa膰 go wielokrotnie. R贸偶nica jest taka, 偶e gdy b臋dziemy np. rysowa膰 jaki艣 kszta艂t (cho膰 to mo偶e nie najlepszy przyk艂ad bo to za wiele nie wa偶y) i skopiujemy go 10 razy to b臋dzie on wa偶y艂 x 10. Gdy jednak stworzymy ten kszta艂t, przekszta艂cimy go na obiekt graficzny i b臋dziemy go wyci膮ga膰 z biblioteki do animacji b臋dzie liczony jako jeden obiekt.

Podsumowuj膮c, warto po艣wi臋ci膰 troch臋 czasu na stworzenie dobrze zoptymalizowanych baner贸w czy te偶 przycisn膮膰 grafik贸w, aby o to zadbali. Po pierwsze u偶ytkownicy stron b臋d膮 szcz臋艣liwsi gdy strona b臋dzie nam si臋 szybciej wczytywa艂a, po drugie my mo偶emy zaoszdz臋dzi膰 na hostingu, a po trzecie jak pisa艂em na pocz膮tku wujek Google b臋dzie przychylniej patrzy艂 na nasz膮 stron臋.

Je艣li ten artyku艂 pom贸g艂 Ci, masz co do niego jakie艣 w膮tpliwo艣ci, lub pytania „Zostaw komentarz”, a na pewno na niego odpowiem.
VN:F [1.9.22_1171]
Rating: 4.5/5 (2 votes cast)
Jak nie zabi膰 strony banerami we flash'u!, 4.5 out of 5 based on 2 ratings

o autorze

Slawomir Gdak

Od 2009 prowadzi owego seo bloga i dzieli si臋 swoj膮 wiedz膮 z zakresu seo.

Autor publikacji/produkt贸w z zakresu seo m.in.: znanych list katalog贸w i profili, ebook贸w, szkole艅, artyku艂贸w w miesi臋czniku SEMspecialist.
Go艣cinnie trener w Mie艣cie Szkole艅 oraz na Search Marketing Week.

13 komentarzy

napisz komentarz
  • Heh. Niedawno robi艂em ca艂膮 seri臋 banerów dla jednego z browarów. Full wypas animacja, efekty itp. Jak wszystko zosta艂o zaakceptowane, dosta艂em dopiero wytyczne z WP, Gazety, Onetu… I przysz艂a pora na odchudzanie animacji z 300kB do 20kB. A potem klient p艂aka艂, 偶e butelka mocno skompresowana 馃檪

    Ale banery banerami, cz臋sto sama grafika na stronie jest tak niezoptymalizowana, 偶e r臋ce opadaj膮. Jeden z moich by艂ych klientów na w艂asn膮 r臋k臋 doda艂 animacj臋 do headera. I wyszed艂 mu GIF o wadze ponad 4MB 馃檪

  • Niez艂e jaja, ale niestety z do艣wiadczenia wiem, 偶e klient potrafi przes艂a膰 swoje wymagania po wszystkim dlatego z regu艂y przed przyj臋ciem roboty warto zadba膰 o wytyczne.

    Swoj膮 drog膮 robienie banerów w standardzie do 30kb rozwi膮zuje problem 馃檪 Nie wyobra偶am umieszczenia banera na stronie 300kb.

    "Jeden z moich by艂ych klientów na w艂asn膮 r臋k臋 doda艂 animacj臋 do headera. I wyszed艂 mu GIF o wadze ponad 4MB" – my艣l臋, 偶e my jako graficy powinni艣my u艣wiadamia膰 klientów jakie to mo偶e nie艣膰 ze sob膮 problemy.

  • Klient sam nie zna艂 wymaga艅. Dobrze, 偶e chocia偶 wielko艣ci uda艂o mi si臋 wyszarpa膰, bo mia艂em zrobi膰 "takie poziome". Nawet nie mia艂em poj臋cia czy b臋dzie to u nich na stronie, czy gdziekolwiek. Dopiero w trakcie wysz艂o, gdzie to b臋dzie. Ale klient chcia艂 mas臋 bajerów, wi臋c nie wnika艂em (a mo偶e nie ma ogranicze艅, wi臋c co b臋d臋 marudzi艂). W ka偶dym razie nie narzekam. W 2 tygodnie zarobi艂em 艂adny kawa艂ek grosza 馃檪

    A co do headera. Zwróci艂em uwag臋 i zaproponowa艂em, 偶e za niewielk膮 op艂at膮 zrobi臋 mu header we flashu. Ola艂 temat. Wi臋c co ja si臋 b臋d臋 przejmowa艂 jego pó藕niejszymi problemami z transferem, klientami itp 馃檪

  • No tak „efekty i inne bajery” potrafi膮 zajmowa膰 bardzo du偶o, dlatego trzeba si臋 z nimi ogranicza膰.

    A co do heada to w sumie ciekawe, 偶e klient ma gdzie艣 kilkadziesi膮t % klient贸w kt贸rzy po kilku sekundach czekania, a偶 strona si臋 w wczyta zamknie j膮. Niestety, ale niekt贸rzy klienci s膮 niereformowalni znam to z autopsji 馃檪

  • Og贸lnie strony we flashu nadaj膮 si臋 艣rednio do pozycjonowania, oczywi艣cie je艣li m贸wimy tutaj o stronie w ca艂o艣ci wykonanej w tej technologii.

    Wstawki flashowe s膮 ok, ale nie ca艂a strona. Roboty Google nadal maja z tym problemy. Wiem to z w艂asnego do艣wiadczenia.

  • To prawda Z膮bek jestem za wstawkami we flashu, ale nie za ca艂ymi stronami. Je艣li komu艣 na SEO nie zale偶y i chce mie膰 艂adn膮 stronk臋 to spoko. Z tymi elementami flash te偶 powinno si臋 uwa偶a膰, aby nie umieszcza膰 zbyt wa偶nych element贸w np. nawigacji bo jednak co raz wi臋cej korzysta si臋 z urz膮dze艅 mobilnych na kt贸rych flash nie gra, do tego userzy blokuj膮 flasha…

  • U偶ytkownicy mobilnych produkt贸w Apple nie maj膮 problem贸w z Flashem 馃槈

    A tak na serio: wszystkie wi臋ksze portale internetowe wiedz膮 o tym problemie od dawna i broni膮 si臋 w艂a艣nie za pomoc膮 specyfikacji – jak kto艣 si臋 nie dostosuje, czy to robi膮c mailing, czy banner, dostanie odmow臋 i b臋dzie musia艂 przygotowywa膰 od nowa. Wpis przydatny, bo z do艣wiadczenia (zawodowego) wiem, 偶e cz臋sto to od dobrej pami臋ci grafika zale偶y, czy dana kreacja zostanie w terminie wy艣wietlona. W du偶ych firmach to podstawa. Grafik si臋 zapomni i taka kreacja trafia do sta偶ysty, kt贸ry musi wykombinowa膰 spos贸b na zmieszczenie wszystkiego w tych 30kB :]

  • we Flash efekty trzeba samemu tworzy膰 馃檪 o ile pami臋tam przynajmniej w wersji 5, nowszych nie testowa艂em.

    Zna kto艣 programik w stylu bannernow.com ale pod wina nie pod przegl膮dark臋? 馃檪

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie polityki prywatno艣ci.

Wszelkie prawa zastrze偶one. Zabrania si臋 wykorzystywania jakichkolwiek tre艣ci bez zgody autora.

S艂awek Gdak Specjalista ds. seo
Je艣li potrzebujesz mojej pomocy, masz jakiekolwiek pytanie wype艂nij poni偶szy formularz.

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie <a href="https://gdaq.pl/polityka-prywatnosci/" target="_blank">polityki prywatno艣ci</a>.