Skocz do zawartości

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


Rekomendowane odpowiedzi

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?

 

Pozdrawiam

Słowoseniora.pl - pożyczka po 50-tce Gorzowianin.com

eLublin.pl Niezaindeksowane artykułu. Zobaczymy, czy stopka PIO indeksuje.

Odnośnik do komentarza
Udostępnij na innych stronach

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

  • Like 1

Uważasz, że pomogłem? Daj mi punkt reputacji 😎 Idź za strzałką->

horrorcore.pl - Wortal poświęcony muzyce horrorcore

🡽
Odnośnik do komentarza
Udostępnij na innych stronach

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?

 

 

 

Pozdrawiam

Słowoseniora.pl - pożyczka po 50-tce Gorzowianin.com

eLublin.pl Niezaindeksowane artykułu. Zobaczymy, czy stopka PIO indeksuje.

Odnośnik do komentarza
Udostępnij na innych stronach

@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 przez Harry
  • Like 1

Uważasz, że pomogłem? Daj mi punkt reputacji 😎 Idź za strzałką->

horrorcore.pl - Wortal poświęcony muzyce horrorcore

🡽
Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności