Base64 vs. JPEG/PNG/GIF - co lepsze dla SEO?

Szybkość ładowania

Nie lubimy czekać. Wszystko w obecnych czasach mamy dostępne tu i teraz i tego samego oczekujemy od stron i sklepów internetowych. Niedawno zdało sobie z tego sprawę także Google, czyniąc z szybkości wczytywania czynnik rankingowy. Co jest jednak najczęstszym problemem stron, które cierpią na zbyt długi czas ładowania?

Pliki graficzne

Tak, one. Jeden obrazek wyraża więcej niż tysiąc słów. Zajmuje także kilkakrotnie więcej miejsca. Jednak jako gatunek ludzki jesteśmy wzrokowcami, a dodatkowo gdybym zostawił niniejszy tekst jako ścianę treści – nie byłby on tak atrakcyjny, jak w momencie, w którym dodam poniżej śmieszny (w moim odczuciu) mem:

Base64

O obrazach pod kątem SEO zostało powiedziane już wiele. Ja natomiast dziś chciałbym pokazać Wam przypadek, niekoniecznie do powtórzenia czy wdrożenia u siebie w sklepie, który zaciekawił mnie na tyle, że postanowiłem odtworzyć go we własnych, kontrolowanych warunkach.Jakiś czas temu podczas analizy jednego ze sklepów spotkałem się z brakiem plików graficznych sensu stricte na stronie. Zamiast tego, w tagu znajdował się ciąg losowych znaków, jak te poniżej:

iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAA AABHNCSVQICAgIfAhkiAAAAAZiS0dEAP8A/wD/oL2nkwAAAF96VF h0UmF3IHByb2ZpbGUgdHlwZSBBUFAxAAAImeNKT81LLcpMVigoyk/ LzEnlUgADYxMuE0sTS6NEAwMDCwMIMDQwMDYEkkZAtjlUKNEA BZiYm6UBoblZspkpiM8FAE+6FWgbLdiMAAAcXUlEQVR4nO2de5Ac1ZXmf+dmPf

te 380 znaków to jedynie wycinek z dokładnie 9970, które w ostateczności tworzą poniższą emotikonę:

Interesujące, prawda? Czym to jest? Jest to kod base64, którym ów obrazek został zakodowany. Jeśli klikniesz prawym przyciskiem myszy na rzeczoną emotkę i wybierzesz “Zbadaj element”, Twoim oczom ukaże się taki kod:

Oczywiście będzie on zwinięty, bo jak napisałem już wyżej – cały ciąg ma blisko 10.000 znaków. Po znalezieniu takiego kodu na stronie klienta, zacząłem zastanawiać się “Po co?” Odpowiedź odnalazłem bardzo szybko. I przysłówek szybko ma tutaj niemałe znaczenie. Mianowicie chodzi o… czas wczytywania i wynik w narzędziu PageSpeed Insights. Sprawdziłem jak wygląda to w przypadku rzeczonej strony i byłem w niemałym szoku, ponieważ zdjęcia te nie były niskiej jakości ani niewielkiego rozmiaru.

Oczywiście, sam base64 nie służy jedynie do kodowania grafik, a do kodowania bajtów za pomocą ciągu znaków (jak przykładowy, kilka linii wyżej).

Postanowiłem powtórzyć tenże test na jednym z wpisów blogowych i oto wyniki.

STRONA A: ZDJĘCIA W FORMACIE JPEG.
STRONA B: ZDJĘCIA ZAKODOWANE W BASE64.

Czas wczytywania (w każdym przypadku wykonałem 3 przebiegi):
Strona A: 1,62s
Strona B: 1:46s

Szału nie ma, prawda? To różnica o zaledwie setne sekundy.
Jak wyglądało to w PageSpeed Insights?

Strona A:
– mobile: 65s
– desktop: 57s

Strona B:
– mobile: 81
– desktop: 90.

NIEŹLE, PRAWDA?