Obrazek / ikona koszyka wielekortnie ładowany na stronie, a szybkość ładowania

[Farlicki]

W sklepie pod każdym produktem jest ikonka koszyka. Pobierana ona jest z ionicframework.com

 

Pagespeed insight wskazuje ten plik https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css jako blokujący renderowanie.

 

Zastanawiam się czy nie lepiej by było po prostu wstawić plik webp czy gif/png.  W kategoriach występuje on wielkrotnie, ale chyba przeglądarki działają tak, że ten sam obraz wczyta raz i wszędzie ładuje gdzie jest wywołany? Czy się mylę?

 

Nie wiem czy lepiej by było taki obraz zrobić jako img, czy tło dla div'a?

 

Czy może najlepiej zapisać ten css na swoim serwerze i przenieść na koniec kodu?

 

[Harry]

Cześć @Farlicki

Na twoim miejscu bym się nie zastanawiał i wybrał jedno z 4 rozwiązań:

1. Wykorzystanie font awesome - https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=Shopping
2. Malutki obrazek webp lub jpg
3. Zakodowany obrazek w base64
4. Pobranie powyższego CSS i ładowanie go lokalnie (w ostateczności)

Pozdrawiam

[Farlicki]

Zdecydowałem się na 2 rozwiązanie z tym, że nie wstawiłem obrazka, a zrobiłem div z width i height + background-img z koszykiem w formacie webp oraz opacity dla hover.

No niby działa ok. https://e-aromat.pl/26-sklep-herbaty-pu-erh Nie ładuje pliku css, więc zniknął z pagespeed insights.

Tylko pytanie czy ładowanie wielokrotne tego obrazka koszyka w ogólnym ujęciu nie spowalnia bardziej niż te  iconicons, tylko że pagespeed tego nie pokazuje.

 

Jak to działa, raz wczytany przez przeglądarkę obrazek już nie jest chyba ponownie pobierany?

 

Co daje kodowanie w base64, poza tym, że jest zakodowany?

 

 

 

[Harry]

@Farlicki

W dniu 28.07.2021 o 08:59, Farlicki napisał:

ładowanie wielokrotne tego obrazka koszyka w ogólnym ujęciu nie spowalnia bardziej niż te  iconicons

Odniosłem wrażenie, że wiesz czym jest cache

 

W dniu 28.07.2021 o 08:59, Farlicki napisał:

Co daje kodowanie w base64, poza tym, że jest zakodowany?

Każdy obraz można zakodować lecz osobiście uważam, że tylko male obrazki (do 150 kb) jest dobrze przerabiać. Obrazki w base64 są po prostu ciągiem znaków. Dla przykładu niech będzie koszyk z twojej strony:

• iVBORw0KGgoAAAANSUhEUgAAABcAAAAcCAMAAAC9M9RRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAPklEQVR42mJghAIGEGCEAwZkYSQZBrgwEoUsjkoTFGckWpwBExAQRzcHSRwFgERGxQmKM1JJHGuE4RIHCDAAccIB01FXd/EAAAAASUVORK5CYII=

Traktujesz w/w kod jako normalny obrazek więc w </img> idzie go normalnie pokazać (sprawdź). Możesz powyższy kod też sprawdzić chociażby na stronie: https://www.base64decode.net/base64-image-decoder

 

Pozdrawiam

 

Edytowane 30 Lipca 2021 przez Harry