Jump to content

Prosta łanda czcionka pod page speed insights


Recommended Posts

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"


 

Link to post
Share on other sites
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.

  • Like 1

Pomóż Szajce Szarego Wilka: https://pomagam.pl/czerwonyalarm

Link to post
Share on other sites
Posted (edited)

 

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ć.

Edited by Farlicki


 

Link to post
Share on other sites

@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.

  • Like 1

Pomóż Szajce Szarego Wilka: https://pomagam.pl/czerwonyalarm

Link to post
Share on other sites
Posted (edited)

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.

Edited by Farlicki


 

Link to post
Share on other sites
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ć.

HTTP 200 usługi IT - Dariusz Janicki | Realizacja serwisów www oraz oprogramowania w PHP / C# / Golang / Node.js / MySQL
[Pomoc] dla 5-letniej Ani Serkowskiej - ulżyj jej w cierpieniu!

 

Link to post
Share on other sites
Posted (edited)

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.

Edited by Farlicki


 

Link to post
Share on other sites
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

 

  • Like 1

Pomóż Szajce Szarego Wilka: https://pomagam.pl/czerwonyalarm

Link to post
Share on other sites
Posted (edited)
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.

 

 

Edited by Farlicki


 

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