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: 3.3/5 (3 votes cast)
Jak nie zabić strony banerami we flash'u!, 3.3 out of 5 based on 3 ratings

o autorze

Slawomir Gdak

Od 2009 prowadzi ów 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 :]

  • […] Waga strony. W związku z tym, że jak wcześniej wspomniałem strony we flashu są często przeładowane efektami to ich waga nierzadko jest zabójcza dla internautów. Strony takie potrafią ważyć nawet po kilka MB. Może w tych czasach nie wydaje się to takie straszne jednak mimo wszystko zalecam ostrożność. Temat ten poruszałem przy okazji postu o banerach we flashu „Jak nie zabić strony banerami we flashu”. […]

  • 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ę? 🙂

Dodaj komentarz

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>

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.