Jak naprawić błąd „Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionki internetowej” w PageSpeed?

Czy podczas sprawdzania statystyk szybkości strony Google pojawia się błąd „ Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych ” i nie wiesz, jak rozwiązać ten problem? Ogólnie wiem, jak rozwiązać ten problem na niestandardowej stronie internetowej opartej na PHP lub HTML, ale jeśli chodzi o WordPress, również miałem problemy.

W tym przewodniku porozmawiamy o tym, jak możemy rozwiązać ten problem w WordPressie (udostępnię również kroki, aby rozwiązać ten problem w niestandardowych witrynach opartych na PHP i HTML) i zwiększyć wynik szybkości strony, usuwając ten błąd.

Dlaczego wyświetla błąd „Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionki internetowej” w PageSpeed?

Podczas testowania swojej witryny na Google PageSpeed ​​Insight mogłeś zauważyć problem z błędem „Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych”, a po kliknięciu błędu zostaną wyświetlone pełne adresy URL plików czcionek.

Jak widać na powyższym obrazku, otrzymuję również błąd „upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych” na tej stronie, a kiedy go kliknę, pokaże pełne adresy URL plików czcionek Google.

Dlaczego pokazuje błąd?

Kiedy strona ładuje się w przeglądarce i wykryje dowolny niestandardowy plik czcionki zastosowany do tekstu, czeka na pobranie czcionki i do tego czasu tekst jest niewidoczny. Po pobraniu niestandardowych plików czcionek, natychmiast trafiają one na stronę internetową i jest to znane jako błysk niewidocznego tekstu.

Jak naprawić Flash niewidocznego tekstu?

Naprawienie błysku niewidocznego tekstu może również naprawić błąd „zapewnij, że tekst pozostaje widoczny podczas ładowania czcionek internetowych” w Twojej witrynie, a naprawienie tego problemu jest bardzo łatwe.

Możesz łatwo rozwiązać ten problem, dodając

 wyświetlanie czcionek: zamiana;

kod w twoim obecnym

 @font-face {

}

Właściwość CSS.

Ale czym jest @font-face?

@font-face to prosta reguła CSS, dzięki której możesz zastosować niestandardową czcionkę do tekstu. Ma rozszerzenia takie jak woff2, woff, ttf itp. Na przykład kod @font-face będzie wyglądał tak:

 @font-face {

rodzina czcionek: Roboto,bezszeryfowa;

wyświetlanie czcionek: zamiana; // ---> Rozwiąże ten problem.

styl czcionki: normalny;

grubość czcionki: 400;

źródło: url(Roboto.woff2);

}

Teraz stosujemy tę czcionkę w akapicie, używając;

 p {

rodzina czcionek: Roboto, bezszeryfowa;

rozmiar czcionki: 18px;

}

Po załadowaniu witryny oznacza to, że w tagu akapitu zastosowano czcionkę „ Roboto ” i natychmiast rozpoczyna się pobieranie czcionki użytej w tagu akapitu. Dopóki nie pobierze czcionki, tekst pozostaje niewidoczny.

Dlatego pokazuje błąd „ upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych ” w szybkości strony i dodawaniu wyświetlania czcionek: swap; w obecnym @font-face CSS może rozwiązać ten problem.

Jak naprawić ten problem w WordPressie

Jeśli korzystasz z WordPressa i wyświetla ten błąd w analizie szybkości strony, możesz łatwo rozwiązać ten problem, wykonując proste czynności. Udostępniłem kroki, aby rozwiązać ten błąd zarówno w przypadku czcionek lokalnych, jak i czcionek Google.

Rozwiązanie dla czcionek Google

Początkowo Google Fonts nie doda wyświetlania czcionek: swap; regułę do swojej czcionki, ale teraz obsługują nowy parametr zapytania, aby zastosować wyświetlanie czcionki: swap; dodając parametr &display=swap na końcu pliku czcionki Google.

Oto jak to wygląda;

Jeśli jesteś programistą motywów lub wiesz, jak edytować pliki motywów w WordPress, możesz łatwo dodać parametr &display=swap w pliku czcionek Google.

Ale jeśli nie czujesz się komfortowo z edycją plików motywów WordPress, nadal możesz użyć różnych wtyczek, takich jak Asset CleanUp , aby dodać ten parametr i rozwiązać problem „upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych”.

Jak rozwiązać ten problem za pomocą wtyczki „Asset CleanUp”?

Aby zastosować parametr display=swap w pliku Google Fonts, musisz pobrać i zainstalować wtyczkę Asset CleanUp z biblioteki WordPress, która jest dostępna za darmo.

Po pobraniu i aktywowaniu wtyczki kliknij opcję „ Oczyszczanie zasobów ” w panelu administracyjnym WordPressa > a następnie kliknij „ Ustawienia ” w sekcji „Oczyszczanie zasobów”, aby otworzyć stronę optymalizacji.

Gdy znajdziesz się na stronie ustawień , kliknij opcję „ Czcionki Google ”. Kliknięcie opcji Google Fonts spowoduje dalsze otwarcie ustawień, z których można łatwo zarządzać różnymi ustawieniami w celu optymalizacji plików czcionek Google.

Niektóre z tych ustawień mogą obejmować;

Po przejściu do ustawień plików czcionek Google w ustawieniach „ Zastosuj wyświetlanie czcionek: wartość właściwości CSS ” i zmień je z „ Nie stosuj (domyślnie) ” na „ Zamień (najczęściej używane) ”, a dodany zostanie parametr &display= zamień parametr na wszystkie pliki czcionek Google.

Rozwiązanie dla czcionek motywów i wtyczek

Przez większość czasu Twój motyw WordPress lub wtyczka ładują inne czcionki, takie jak font-awesome lub czcionki ikon, a także pokazuje ten sam problem w Google PageSpeed ​​Insight.

Jest to również łatwe rozwiązanie, ale wymaga trochę wiedzy na temat edycji WordPressa. Jeśli nie czujesz się komfortowo z edycją kodów, możesz również użyć wersji premium wtyczki „ Asset CleanUp Pro ”, aby automatycznie dodać wyświetlanie czcionki: swap; Właściwość CSS w motywie WordPress lub arkuszach stylów wtyczek.

Aby rozwiązać ten problem za pomocą narzędzia Asset CleanUp Pro, kliknij opcję „ Asset CleanUp ” w panelu administracyjnym WordPressa > a następnie kliknij „ ustawienia ” w sekcji „Asset CleanUp”, aby otworzyć stronę optymalizacji.

Po przejściu na stronę „ Oczyszczanie zasobów ” > „ Ustawienia ” kliknij opcję „ Czcionki lokalne ”, aby otworzyć ustawienia dostosowywania czcionek lokalnych.

Po otwarciu ustawień dostosowywania „ Czcionki lokalne ” w przeglądarce wybierz „ zamiana (najczęściej używane) ” z danej opcji wyboru w obszarze „ Zastosuj wyświetlanie czcionki: wartość właściwości CSS ”, aby automatycznie dodać wyświetlanie czcionki: zamiana; we wszystkich twoich arkuszach stylów.

Zawijanie

W tym przewodniku staraliśmy się jak najlepiej wyjaśnić, w jaki sposób można rozwiązać problem „upewnienia się, że tekst pozostaje widoczny podczas ładowania czcionki internetowej” lub „mignięcia niewidocznego tekstu” w statystykach szybkości strony.

Czas ładowania strony i szybkość strony są ważnymi czynnikami zapewniającymi dobre wrażenia użytkowników, a naprawienie tego problemu może zapewnić znacznie lepsze wrażenia użytkownika. A strona nie będzie uważana za załadowaną, chyba że pokazuje wszystko nad nią.

Musisz więc skrócić czas ładowania treści na stronie, aby strony nie wygasały, a użytkownicy mogli uzyskać równowagę, szybkość i stabilność, jakiej chcą. Jeśli również cierpisz z powodu niskiej prędkości witryny, możesz sprawdzić nasz post na temat optymalizacji prędkości witryny, aby poprawnie ją zoptymalizować.