Snippet

Dodaj Preload dla Krytycznych Zasobów w WordPressie dla Szybkości

Jak wstępnie załadować czcionki w WordPressieWstępne ładowanie skryptów w WordPressie dla szybszego ładowaniaDodaj wstępne ładowanie dla kluczowych zasobów w WordPressieWstępne ładowanie CSS i JS w WordPressieNajlepszy sposób na wstępne ładowanie zasobów w WordPressieWstępne ładowanie czcionek i skryptów w WordPressieJak poprawić prędkość WordPressa za pomocą wstępnego ładowaniaWstępne ładowanie kluczowych żądań w WordPressiePoradnik dotyczący wstępnego ładowania zasobów w WordPressieOptymalizacja WordPressa poprzez wstępne ładowanie zasobów

Objaśnienie

Aby przyspieszyć ładowanie swojej strony WordPress, możesz wstępnie załadować ważne zasoby, takie jak czcionki, CSS, JavaScript i obrazy. Oznacza to, że informujesz przeglądarkę, aby zaczęła ładować te pliki wcześniej, tak aby były gotowe, gdy będą potrzebne.

Oto jak to działa:

  • Czcionki: Wstępne załadowanie czcionki zapewnia, że tekst używający tej czcionki pojawia się szybko, bez czekania na załadowanie pliku czcionki. Fragment kodu pokazuje, jak wstępnie załadować plik czcionki z określonym typem i ustawionym cross-origin na anonymous.
  • CSS: Wstępne załadowanie pliku CSS oznacza, że style są gotowe do zastosowania, gdy przeglądarka ich potrzebuje, co skraca czas, w którym strona wygląda poprawnie.
  • JavaScript: Wstępne załadowanie skryptu zapewnia, że wszelkie interaktywne elementy na Twojej stronie są gotowe do działania bez opóźnień.
  • Obrazy: Wstępne załadowanie obrazów, szczególnie tych, które pojawiają się na górze strony, może sprawić, że Twoja strona będzie wydawać się szybsza, ponieważ pojawiają się natychmiast.

Ta funkcja łączy się z akcją wp_head, co oznacza, że dodaje te linki do wstępnego ładowania do sekcji head HTML Twojej strony. To tutaj przeglądarki najpierw szukają instrukcji dotyczących tego, co załadować.

Korzystając z tego podejścia, zapewniasz swoim odwiedzającym płynniejsze i szybsze doświadczenie, co zawsze jest korzystne!

Kod

1<?php 2/** 3 * Preload critical resources (fonts, scripts, CSS) in WordPress 4 * 5 * This function adds preload links for critical resources to improve loading speed. 6 * It hooks into the wp_head action to ensure the links are added to the head section. 7 */ 8 9function wp_dudecom_preload_critical_resources() { 10 // Preload a font 11 echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/fonts/my-font.woff2' ) . '" as="font" type="font/woff2" crossorigin="anonymous">'; 12 13 // Preload a CSS file 14 echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/css/critical-styles.css' ) . '" as="style">'; 15 16 // Preload a JavaScript file 17 echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/js/critical-scripts.js' ) . '" as="script">'; 18 19 // Preload an image 20 echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/images/hero-image.jpg' ) . '" as="image">'; 21} 22add_action( 'wp_head', 'wp_dudecom_preload_critical_resources' ); 23?>

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne: Brak, ale upewnij się, że masz dostęp do plików motywu WordPress lub możliwość stworzenia własnej wtyczki.

Kroki wdrożenia:

  1. Dostęp do plików WordPress:
    • Zaloguj się do panelu administracyjnego WordPress.
    • Przejdź do Wygląd > Edytor motywu, jeśli edytujesz plik functions.php, lub użyj klienta FTP, aby uzyskać dostęp do plików motywu.
  2. Znajdź plik functions.php:
    • W Edytorze motywu znajdź i wybierz plik functions.php z listy po prawej stronie.
  3. Dodaj kod preładowania:
    • Skopiuj podany fragment kodu.
    • Wklej go na końcu pliku functions.php lub w pliku własnej wtyczki.
  4. Zapisz zmiany:
    • Kliknij przycisk Aktualizuj plik, aby zapisać zmiany, jeśli korzystasz z Edytora motywu.
    • Jeśli korzystasz z FTP, upewnij się, że plik został ponownie przesłany na serwer.
  5. Zweryfikuj wdrożenie:
    • Odwiedź swoją stronę i sprawdź źródło strony (kliknij prawym przyciskiem > Wyświetl źródło strony), aby upewnić się, że linki preładowania są obecne w sekcji <head>.

Postępując zgodnie z tymi krokami, możesz poprawić wydajność swojej witryny, preładowując kluczowe zasoby. Jeśli potrzebujesz dalszej pomocy lub chcesz odkryć bardziej zaawansowane funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.