Tag: cufon | Blog Franka Goossensa

Chociaż możliwe było osadzanie czcionek na stronach internetowych nawet w ciemnych czasach internetu , 2010 był rokiem, w którym elementy układanki typografii internetowej naprawdę się ułożył , Projektanci, marketingowcy, a zwłaszcza „strażnicy tożsamości marki” są zachwyceni tą ewolucją.

Ale niewiele można znaleźć na temat wpływu czcionek internetowych na wydajność. Ponieważ pobierasz dodatkowe pliki, więc musi być jakiś wpływ, nie? Stworzyłem 4 identyczne strony; jeden bez czcionek natywnych dla przeglądarki, jeden z Cufonem ( co już wiedziałem, że nie lubię ), jeden z hostowane rozwiązanie Google Font i jeden z lokalnymi czcionkami (z fontsquirrel.com ). Te 4 strony zostały przeanalizowane przez webpagetest.org (3 działa na IE8 z węzła Amsterdam). Oto wyniki:

Jak należało się spodziewać i potwierdzone w FAQ Google Webfonts , nawet najszybsza metoda (hostowana czcionka Google) jest o 0,26 s wolniejsza niż wersja bez czcionek internetowych. Czcionki hostowane lokalnie są nieznacznie wolniejsze, ale to dlatego, że (z powodów, których nie rozumiem) 2 pliki czcionek zostały załadowane zamiast tylko 1 na stronie z czcionkami Google. Cufon nie jest tu warty wspomnienia, jest martwy i wydaje się raczej nieistotny. Nie testowałem wersji z obrazami zamiast czcionek internetowych, ale prawdopodobnie przyniosłoby to w przybliżeniu taki sam rezultat (5 plików obrazów, każdy o rozmiarze od 4 do 8 KB?) I nie jest optymalny z punktu widzenia SEO i dostępności.

Więc 0,3 sekundy, to nie jest tak źle, nie? Albo to jest? Jeśli tworzysz sklep internetowy, doświadczenie Amazon może być tutaj szczególnie interesujące; każde 100ms opóźnienie kosztuje 1% sprzedaży . Czy chcesz stracić 3% przychodów tylko po to, by mieć te ładne czcionki, których odwiedzającym prawdopodobnie nie obchodzi mniej?

Moja rada; nie używaj czcionek internetowych, jeśli cenisz wydajność. I powinieneś uważać wydajność za najwyższy priorytet, nie tylko ze względu na sprzedaż, ale także ze względu na wydajność strony wpływa na użyteczność i ranking wyszukiwarki .

Jeśli menedżer ds. Tożsamości marki nalega na stosowanie odpowiednich czcionek, wydajność zostanie potępiona, a następnie spróbuj przynajmniej przestrzegać tych podstawowych najlepszych praktyk:

• mieć CSS, który definiuje twoje czcionki ( z czcionką ) tak wcześnie, jak to możliwe w HTMLu, a już na pewno przed załadowaniem dowolnego skryptu
• posługiwać się Rozwiązanie hostowanej czcionki Google Jeśli to możliwe; jest szybki, CSS jest zoptymalizowany dla przeglądarki, która tego wymaga, a do dyspozycji jest wiele darmowych czcionek
• jeśli musisz samodzielnie hostować czcionki, upewnij się, że obsługujesz Format WOFF (nowy standard) i SVG (dla iPhone / iPad) obok bardziej tradycyjnego TTF („stary” standard) i EOT (dla MSIE)
• jeśli udostępniasz własne czcionki, skonfiguruj serwer WWW tak, aby kompresował pliki w locie, svg i eot (pliki woff są już skompresowane) i ustaw nagłówki wygasania dla wszystkich czcionek w przyszłości, aby umożliwić optymalne buforowanie (przykład dla Apache):

AddType font / ttf .ttf
AddType font / x-woff .woff
AddType image / svg + xml .svg
AddType application / vnd.ms-fontobject .eot
ExpiresByType font / ttf „access plus 30 days”
ExpiresByType font / x-woff „access plus 30 days”
ExpiresByType image / svg + xml „access plus 30 days”
ExpiresByType application / vnd.ms-fontobject „access plus 30 days”
AddOutputFilterByType DEFLATE font / ttf application / vnd.ms-fontobject image / svg + xml