Prosta łanda czcionka pod page speed insights

[Farlicki]

Na co można zamienić czcionki Google, żeby to dobrze wyglądało, a nie było zasobem zewnętrznym blokującym renderowanie?

 

Ewentualnie jak to powinno się wpisać w CSS, żeby "Zapewnić widoczność tekstu podczas ładowania czcionek internetowych"

[blazejs]

Jeśli twoje nie odbiegaja zbytnio od systemowych to mozna ustawic systemowe. Jesli nie, to najlepszy sposob to hostowanie na wlasnym serwerze (nawet Google to poleca). Poza tym bez sprawdzenia strony to wrozenie z fusow.

[Harry]

Cześć @Farlicki,

Jeśli nie chcesz czcionek google, to ustaw sobie Arial

Jeżeli używasz Wordpress, to pomocnym może okazać się plugin OMGF | Host Google Fonts Locally (https://wordpress.org/plugins/host-webfonts-local), który lokalnie hostuje czcionki od google.

Pozdrawiam

[blazejs]

8 godzin temu, Harry napisał:

Jeżeli używasz Wordpress, to pomocnym może okazać się plugin OMGF | Host Google Fonts Locally, który lokalnie hostuje czcionki od google.

Pozdrawiam

 

Czyli jak rozumiem, jesli pojedynczy font ma kilkaset kilo (sa takie), to ten plugin go po prostu sciagnie w takiej samej postaci? Tymczasem ja generuje sobie woff i woff2 przy pomocy Glyphhanger'a, ktory pozwala mi osadzac tylko te glify jakie chce, i mam pliki miedzy 20-30 kilo.

[Farlicki]

 

15 godzin temu, blazejs napisał:

 Poza tym bez sprawdzenia strony to wróżenie z fusów.

 

Niestety nie WP. Strona to sklep https://e-aromat.pl

 

 

15 godzin temu, blazejs napisał:

hostowanie na własnym serwerze (nawet Google to poleca)

 

Podobno przy założeniu, że ma się szybki serwer, a ten chyba nie należy do najszybszych.

 

 

Próbuję odchudzić go nieco.

 

CSS zaczyna się od:

 

font-family:Muli,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

 

Nie wiem czy to aż tyle ich jest potrzebne. Czy to font-family działa tak, że ładuje czcionkę kolejną jak pierwsza jest niedostępna?

 

Do tego ładuje https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700&display=swap&subset=latin-ext

 

Jakieś tam są wietnamskie  i latin. Ustalając tylko jedną grubość niestety zaczynają się sypać.

Edytowane 20 Lipca 2021 przez Farlicki

[blazejs]

@Farlicki : Zdaje sie, ze fonty to jest najmniejszy problem. Akurat Muli nie jest zbyt duzy (TTF ok. 48 kilo sztuka, inna sprawa, ze tyle odmian niewiele sie rozniacych jest niepotrzebne, ale to problem projektanta). Te kolejne fonty to standardowa formulka na zastepowanie (tam sa fonty dla Windows, MacOS itp., to jest akurat OK). Powinno pomoc ustawienie font-display: swap (to mozesz zrobic juz nawet generujac kod z GoogleFonts do osadzenia).

Wiekszy problem to kupa JS, ktory blokuje renderowanie (sprobuj wylaczyc slider i moze stanie sie cud...). Optymalizacja fotek tez powinna cos pomoc.

[Farlicki]

Próbowałem przeforsować wyłączenie slidera. Niestety chyba nie przejdzie. Jeszcze spróbuję. W kwestii fotek jest planowane przejście na webp i optymalizację. To dość dużo pracy. Informatyk musi zrobić. Próbuję ogarnąć te drobniejsze rzeczy. I tak już jest lepiej ze zdjęciami, bo pierwotnie były nawet takie po 1 mb ;). Chyba, że może jest jakiś sposób, żeby zamienić wszystko na webp ?? W WP odpala się wtyczkę, no ale w sklepie nie ma takiej możliwości.

 

JS nie wiem co do czego jest i co można wyłączyć.  Może coś rozpoznałeś? Jesteś w stanie coś mi doradzić - co można wyłączyć?

 

Projektanci stron niestety mają gdzieś szybkość ładowania strony i web vitals. Byle ładnie wyglądało, reszta się nie liczy. Zleceniodawca przecież i tak nie ma o tym pojęcia, jak to ważnej jest obecnie. Niestety tak to wygląda w większości przypadków.

 

Gdzie to wstawić ten font-display: swap do tego css na początku? Coś tam ogarniam kody, ale ogólnie nie zajmuję się projektowaniem stron.

Edytowane 20 Lipca 2021 przez Farlicki

[Mion]

3 godziny temu, Farlicki napisał:

Nie wiem czy to aż tyle ich jest potrzebne. [...] Coś tam ogarniam kody, ale ogólnie nie zajmuję się projektowaniem stron.

Wszystko robisz po omacku ! Jeśli Chcesz to robić "zrób to sam", to Musisz się uczyć HTML / CSS / JS by zrozumieć co i jak funkcjonuje, bo takie pytanie na forum na niewiele się zda. Tutaj trzeba samu wiedzieć o co chodzi i potrafić optymalizować.

[Farlicki]

Ogólnie znam html i css, aczkolwiek no nie projektuję stron i sporo zapomniałem, sporo się zmieniło. Jest też wiele rzeczy, których nie wiem.   Myślę, że nie wie ich też wielu ludzi, którzy zajmują się projektowaniem stron i sklepów. Fontami się wcześniej specjalnie nie interesowałem, bo w większości stron mam całkiem dobre wskaźniki. Tu są kiepskie. Wszystko się zmienia (w IT to w ogóle błyskawicznie) i człowiek się uczy cały czas.  Nie projektujesz stron / sklepów, to nie jesteś na bieżąco. JS niestety nie znam - używam zwykle gotowców. W cudzym kodzie zazwyczaj się po omacku robi.

 

Ogólnie jako osobie niezajmującej się projektowaniem stron / sklepów i tak łatwiej mi zmienić coś samemu, niż pisać, prosić, tłumaczyć, a po co to jak działa dobrze i czekać tygodnie...

 

Obecnie sklep ma i tak już o wiele, wiele lepsze wskaźniki, niż jak zacząłem przy tym dłubać. Więc jakiś tam sens to ma. Jak coś zdupczę, to wgram kopię pliku.

Edytowane 20 Lipca 2021 przez Farlicki

[blazejs]

9 godzin temu, Farlicki napisał:

Próbowałem przeforsować wyłączenie slidera. Niestety chyba nie przejdzie. Jeszcze spróbuję. W kwestii fotek jest planowane przejście na webp i optymalizację. To dość dużo pracy. Informatyk musi zrobić. Próbuję ogarnąć te drobniejsze rzeczy. I tak już jest lepiej ze zdjęciami, bo pierwotnie były nawet takie po 1 mb ;). Chyba, że może jest jakiś sposób, żeby zamienić wszystko na webp ?? W WP odpala się wtyczkę, no ale w sklepie nie ma takiej możliwości.

 

Webp jest fajne, ale dopiero jak potestowalem dokladniej Mozjpg to mi kopara opadla. A Mozjpg to formalnie zwykly jpg (tylko koder zmodyfikowany). Tak czy siak trzeba cos na serwerze poinstalowac jesli chcesz zeby to dzialalo na poziomie serwera (jak masz shareda to raczej zapomnij), wiec lepiej juz biblioteki do Mozjpg... Chyba juz nawet Safari ma obsluge webp, ale nie ma wstecznej kompatybilnosci i trzeba robic obejscia (srcset'y w picture). Z mozjpg jest wsteczna kompatybilnosc.

 

9 godzin temu, Farlicki napisał:

 

JS nie wiem co do czego jest i co można wyłączyć.  Może coś rozpoznałeś? Jesteś w stanie coś mi doradzić - co można wyłączyć?

 

Nie zajmuje sie JS. Nie chce mi sie analizowac co tam wcisneli i co z tego za co odpowiada.

 

9 godzin temu, Farlicki napisał:

 

Projektanci stron niestety mają gdzieś szybkość ładowania strony i web vitals. Byle ładnie wyglądało, reszta się nie liczy. Zleceniodawca przecież i tak nie ma o tym pojęcia, jak to ważnej jest obecnie. Niestety tak to wygląda w większości przypadków.

 

Nie wszyscy, ale wiekszosc tak...

 

9 godzin temu, Farlicki napisał:

 

Gdzie to wstawić ten font-display: swap do tego css na początku? Coś tam ogarniam kody, ale ogólnie nie zajmuję się projektowaniem stron.

 

Masz to ustawione nawet: https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700&display=swap&subset=latin-ext

 

[Farlicki]

18 godzin temu, blazejs napisał:

Mozjpg to mi kopara opadła

 

ooo to jest bardzo ciekawa opcja. Sprawdziłem na jakiejś stronie  mozjpeg.com i rzeczywiście nawet lepiej niż webp. Chociaż Page Speed Insights sugeruje "nowe formaty" to jak jpg będzie odpowiednio skompresowany, to teoretycznie nie powinien. Przyszło mi do głowy, żeby zgrać obrazy ze sklepu przez ftp, przepuścić przez to, zapisać pod tą samą nazwą i wgrać z powrotem.  Tylko te online nie mają możliwości regulacji poziomu kompresji, a niektóre zdjęcia się psują jednak.

 

 

Edytowane 21 Lipca 2021 przez Farlicki