Strona bez ciężkich zdjęć i bez skryptów, serwer odpowiada w 46 ms, a tekst na telefonie pojawia się po 4,4 s. Prawie całą wagę strony stanowią fonty pobierane z Google Fonts. Jak to sprawdzić i naprawić.
Marcin Ledwolorz
CEO, APTURN
Gdy strona jest wolna, pierwszym podejrzanym są zdjęcia, potem skrypty i wtyczki. W jednym z ostatnich audytów nie było ani jednego, ani drugiego: strona w czystym HTML, bez skryptów, ze zdjęciami osadzonymi w kodzie, serwer odpowiadający w 46 ms. A mimo to Google mierzył na telefonie 4,4 sekundy do pojawienia się głównej treści.
Skąd tyle wagi
Strona używała dwóch krojów: jednego szeryfowego do nagłówków i jednego bezszeryfowego do tekstu. Pierwszy był załadowany w sześciu odmianach (cztery grubości i dwie kursywy, w wersji ze zmienną optyką), drugi w czterech grubościach. Przeglądarka pobierała 6 plików fontów, które razem ważyły więcej niż cała reszta strony.
Drugi problem to miejsce, z którego fonty przychodzą. Arkusz stylów z fonts.googleapis.com to osobna domena: przeglądarka musi się z nią połączyć, pobrać arkusz, potem połączyć się z fonts.gstatic.com i pobrać pliki. Ten arkusz blokuje pierwsze wyświetlenie strony. Ustawienie display=swap, które strona miała, pomaga dopiero później: pozwala pokazać tekst krojem zastępczym, zanim przyjdzie właściwy font, ale nie skraca czekania na sam arkusz.
Sprawdzimy, co spowalnia Twoją stronę
Darmowy audyt: wynik od 0 do 100, szybkość, formularz lub koszyk, bezpieczeństwo i widoczność. Raport PDF w 48 godzin roboczych.
Jak to sprawdzić u siebie
- W PageSpeed Insights przewiń do sekcji diagnostyki i zobacz „Unikaj nadmiernego rozmiaru sieci” oraz „Wyeliminuj zasoby blokujące renderowanie”. Jeśli są tam pliki z fonts.gstatic.com i fonts.googleapis.com, masz trop.
- W przeglądarce otwórz narzędzia deweloperskie, zakładkę Sieć, filtr „Font” i przeładuj stronę. Policz pliki i zsumuj ich wagę.
- Porównaj liczbę plików z tym, co realnie widać na stronie. Zwykle wystarcza tekst w dwóch grubościach i nagłówek w jednej.
Jak to naprawić
- Przenieś fonty na własny serwer. Znika łączenie z dwiema obcymi domenami, a przy okazji problem RODO z przekazywaniem adresu IP do Google.
- Zostaw tylko odmiany, których naprawdę używasz. Zwykle wystarczą dwie grubości tekstu i jedna nagłówka.
- Ogranicz zestaw znaków do łacińskiego z polskimi literami (latin-ext). Pełne zestawy z cyrylicą i greką ważą wielokrotnie więcej.
- Dodaj preload dla fontu, którym jest napisany główny nagłówek, i zostaw font-display: swap.
- Rozważ jeden font zmienny zamiast kilku grubości, jeśli krój ma taką wersję. Jeden plik obsługuje wtedy cały zakres grubości.
A w WordPressie?
Wiele motywów i kreatorów stron ładuje fonty z Google domyślnie. W Elementorze jest ustawienie ładowania Google Fonts lokalnie, a dla innych motywów wtyczki, które pobierają używane fonty na serwer i podmieniają odwołania. Po zmianie warto sprawdzić w zakładce Sieć, czy na stronie nie zostało żadne odwołanie do fonts.googleapis.com, bo często drugi raz ładuje je wtyczka albo osadzona mapa.
Na tle konkurencji
W tym przypadku dwaj konkurenci z tej samej dzielnicy ładowali się w 7,6 i 8,5 sekundy, więc strona i tak wypadała najlepiej. Poprawa fontów to godzina, półtorej pracy, a przewaga nad konkurencją robi się wyraźna.
Twoja strona ładuje się wolno?
Zmierzymy ją i pokażemy, co waży najwięcej, w ramach darmowego audytu. Zamów darmowy audyt.
Sprawdzimy, co spowalnia Twoją stronę
Darmowy audyt: wynik od 0 do 100, szybkość, formularz lub koszyk, bezpieczeństwo i widoczność. Raport PDF w 48 godzin roboczych.