Jump to content

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


Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites

@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

 

Edited by Harry
  • Like 1
Kolekcjoner punktów reputacji 😎 🡽
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy