Gdy my\u015blimy o optymalizacji sklepu e-commerce, zwykle skupiamy si\u0119 na obrazkach, kodzie JavaScript czy serwerze. Rzadko kto zwraca uwag\u0119 na czcionki. A to b\u0142\u0105d, kt\u00f3ry mo\u017ce kosztowa\u0107 Ci\u0119 nawet 30% odwiedzaj\u0105cych. Fonty wp\u0142ywaj\u0105 na szybko\u015b\u0107 \u0142adowania strony, Core Web Vitals, a finalnie na konwersj\u0119. W tym artykule poka\u017c\u0119, jak z\u0142y dob\u00f3r czcionek niszczy Twoje wyniki i co z tym zrobi\u0107.<\/p>\n
Ka\u017cda czcionka to plik, kt\u00f3ry przegl\u0105darka musi pobra\u0107 i przetworzy\u0107. Je\u015bli u\u017cywasz kilku r\u00f3\u017cnych font\u00f3w, a do tego ka\u017cdego w kilku wariantach (regular, bold, italic), \u0142\u0105czny rozmiar plik\u00f3w mo\u017ce si\u0119gn\u0105\u0107 nawet kilku megabajt\u00f3w. To op\u00f3\u017ania First Contentful Paint (FCP) i Largest Contentful Paint (LCP) \u2013 dwa kluczowe wska\u017aniki Core Web Vitals. Google od dawna karze wolne strony, obni\u017caj\u0105c ich pozycje w wynikach wyszukiwania. Dla sklepu e-commerce oznacza to mniej organicznego ruchu i ni\u017csz\u0105 sprzeda\u017c.<\/p>\n
Pracowa\u0142em niedawno z klientem prowadz\u0105cym sklep z odzie\u017c\u0105. U\u017cywa\u0142 on czcionki Google Fonts w pi\u0119ciu r\u00f3\u017cnych grubo\u015bciach, a do tego dodatkowej fonty do ikon. \u0141\u0105cznie wa\u017cy\u0142o to oko\u0142o 800 KB \u2013 wi\u0119cej ni\u017c wiele zdj\u0119\u0107 produktowych. Po optymalizacji (wyb\u00f3r jednej fonty, tylko dwa warianty, format WOFF2, subsetowanie) rozmiar spad\u0142 do 80 KB. LCP poprawi\u0142 si\u0119 z 4,5 s do 2,1 s, a wsp\u00f3\u0142czynnik odrzuce\u0144 spad\u0142 o 12%. Konwersja wzros\u0142a o 8%.<\/p>\n
Gdy przegl\u0105darka \u0142aduje font, przez moment tekst mo\u017ce by\u0107 niewidoczny (FOUT \u2013 Flash of Unstyled Text) lub wy\u015bwietlany w czcionce zast\u0119pczej (FOIT \u2013 Flash of Invisible Text). W przypadku FOIT, je\u015bli font nie za\u0142aduje si\u0119 w ci\u0105gu 3 sekund, tekst w og\u00f3le si\u0119 nie pojawia. To zab\u00f3jcze dla UX \u2013 klient widzi pust\u0105 stron\u0119 i ucieka.<\/p>\n
Google Fonts domy\u015blnie generuje osobne \u017c\u0105dania dla ka\u017cdego wariantu. Je\u015bli \u0142\u0105czysz kilka font\u00f3w, liczba zapyta\u0144 ro\u015bnie. Ka\u017cde dodatkowe \u017c\u0105danie op\u00f3\u017ania renderowanie strony. W przypadku serwer\u00f3w z ograniczon\u0105 liczb\u0105 r\u00f3wnoleg\u0142ych po\u0142\u0105cze\u0144 (HTTP\/1.1) efekt jest jeszcze gorszy.<\/p>\n
Google jasno m\u00f3wi: LCP powinien wynosi\u0107 poni\u017cej 2,5 sekundy, a Cumulative Layout Shift (CLS) mniej ni\u017c 0,1. Fonty, kt\u00f3re \u0142aduj\u0105 si\u0119 po rendered, cz\u0119sto powoduj\u0105 przesuni\u0119cia uk\u0142adu \u2013 gdy w ko\u0144cu si\u0119 pojawi\u0105, tekst mo\u017ce zmieni\u0107 swoje po\u0142o\u017cenie, co dezorientuje u\u017cytkownika. To zwi\u0119ksza CLS i obni\u017ca jako\u015b\u0107 strony w oczach Google.<\/p>\n
Zastan\u00f3w si\u0119, czy naprawd\u0119 potrzebujesz pi\u0119ciu r\u00f3\u017cnych czcionek. W wi\u0119kszo\u015bci przypadk\u00f3w wystarczy jedna fonta dla nag\u0142\u00f3wk\u00f3w i jedna dla tre\u015bci. Im mniej, tym lepiej.<\/p>\n
WOFF2 to skompresowany format czcionek, kt\u00f3ry jest wspierany przez wszystkie nowoczesne przegl\u0105darki. Pliki s\u0105 nawet o 30% mniejsze ni\u017c WOFF.<\/p>\n
Je\u015bli u\u017cywasz alfabetu \u0142aci\u0144skiego, nie musisz \u0142adowa\u0107 znak\u00f3w cyrylicy czy innych rzadko u\u017cywanych glif\u00f3w. Subsetowanie pozwala wyci\u0105\u0107 niepotrzebne znaki, redukuj\u0105c rozmiar pliku nawet o 90%.<\/p>\n
Zamiast polega\u0107 na Google Fonts, mo\u017cesz hostowa\u0107 czcionki na swoim serwerze. To eliminuje dodatkowe zapytania DNS i daje Ci pe\u0142n\u0105 kontrol\u0119 nad czasem \u0142adowania. Pami\u0119taj tylko o skonfigurowaniu odpowiednich nag\u0142\u00f3wk\u00f3w Cache-Control i Expires.<\/p>\n
W CSS mo\u017cesz doda\u0107 regu\u0142\u0119 Wolne \u0142adowanie font\u00f3w to nie tylko gorszy UX, ale te\u017c realne straty finansowe. Badania pokazuj\u0105, \u017ce op\u00f3\u017anienie o 1 sekund\u0119 w czasie \u0142adowania strony mo\u017ce zmniejszy\u0107 konwersj\u0119 o 7%. Je\u015bli Tw\u00f3j sklep generuje 100 000 z\u0142 miesi\u0119cznie, to 7% to 7000 z\u0142 straty. W skali roku daje to 84 000 z\u0142 \u2013 kwota, kt\u00f3ra mog\u0142aby trafi\u0107 do Twojej kieszeni, gdyby\u015b tylko zoptymalizowa\u0142 czcionki.<\/p>\n Znam przypadek sklepu z elektronik\u0105, kt\u00f3ry u\u017cywa\u0142 niestandardowej fonty do wy\u015bwietlania cen. Font wa\u017cy\u0142a 300 KB i \u0142adowa\u0142a si\u0119 dopiero po za\u0142adowaniu strony. Przez to ceny pojawia\u0142y si\u0119 z op\u00f3\u017anieniem, a klienci my\u015bleli, \u017ce strona jest niekompletna. Wsp\u00f3\u0142czynnik odrzuce\u0144 wynosi\u0142 55%. Po zmianie na standardow\u0105 font\u0119 systemow\u0105 odrzucenia spad\u0142y do 35%, a sprzeda\u017c wzros\u0142a o 15%.<\/p>\n Fonty to cz\u0119sto pomijany element optymalizacji, kt\u00f3ry ma ogromny wp\u0142yw na wydajno\u015b\u0107, SEO i konwersj\u0119. W JurskiTech.pl regularnie spotykamy si\u0119 z firmami, kt\u00f3re trac\u0105 klient\u00f3w przez zbyt ci\u0119\u017ckie czcionki. Wystarczy kilka prostych krok\u00f3w \u2013 wyb\u00f3r odpowiedniego formatu, subsetowanie, samodzielny hosting i Nie bagatelizuj tego tematu. Sprawd\u017a, jakie fonty u\u017cywa Tw\u00f3j sklep, i zoptymalizuj je ju\u017c dzi\u015b. Twoi klienci (i Google) Ci podzi\u0119kuj\u0105.<\/p>\n Je\u015bli potrzebujesz pomocy w audycie wydajno\u015bci swojej strony, skontaktuj si\u0119 z nami. Pomo\u017cemy Ci znale\u017a\u0107 i wyeliminowa\u0107 wszystkie w\u0105skie gard\u0142a, w tym te zwi\u0105zane z fontami.<\/p>\n","protected":false},"excerpt":{"rendered":" Dlaczego Tw\u00f3j sklep traci klient\u00f3w przez z\u0142y dob\u00f3r font\u00f3w? Gdy my\u015blimy o optymalizacji sklepu e-commerce, zwykle skupiamy si\u0119 na obrazkach, kodzie JavaScript czy serwerze. Rzadko kto zwraca uwag\u0119 na czcionki. A to b\u0142\u0105d, kt\u00f3ry mo\u017ce kosztowa\u0107 Ci\u0119 nawet 30% odwiedzaj\u0105cych. Fonty wp\u0142ywaj\u0105 na szybko\u015b\u0107 \u0142adowania strony, Core Web Vitals, a finalnie na konwersj\u0119. W tym<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[10,44,329,42],"class_list":["post-1646","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-e-commerce","tag-core-web-vitals","tag-ui-ux","tag-wydajnosc-stron"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1646"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1646\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}font-display: swap<\/code>. Dzi\u0119ki temu przegl\u0105darka natychmiast wy\u015bwietli tekst w czcionce zast\u0119pczej, a docelow\u0105 za\u0142aduje p\u00f3\u017aniej. To rozwi\u0105zuje problem FOIT i poprawia postrzegan\u0105 wydajno\u015b\u0107.<\/p>\nWp\u0142yw na SEO i konwersj\u0119<\/h2>\n
Przyk\u0142ad z rynku<\/h3>\n
Podsumowanie<\/h2>\n
font-display: swap<\/code> \u2013 by znacz\u0105co poprawi\u0107 wyniki.<\/p>\n