Dodaj Preload dla Krytycznych Zasobów w WordPressie dla Szybkości
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
<?php
/**
* Preload critical resources (fonts, scripts, CSS) in WordPress
*
* This function adds preload links for critical resources to improve loading speed.
* It hooks into the wp_head action to ensure the links are added to the head section.
*/
function wp_dudecom_preload_critical_resources() {
// Preload a font
echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/fonts/my-font.woff2' ) . '" as="font" type="font/woff2" crossorigin="anonymous">';
// Preload a CSS file
echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/css/critical-styles.css' ) . '" as="style">';
// Preload a JavaScript file
echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/js/critical-scripts.js' ) . '" as="script">';
// Preload an image
echo '<link rel="preload" href="' . esc_url( get_template_directory_uri() . '/images/hero-image.jpg' ) . '" as="image">';
}
add_action( 'wp_head', 'wp_dudecom_preload_critical_resources' );
?>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:
- 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.
- Znajdź plik
functions.php:- W Edytorze motywu znajdź i wybierz plik
functions.phpz listy po prawej stronie.
- W Edytorze motywu znajdź i wybierz plik
- Dodaj kod preładowania:
- Skopiuj podany fragment kodu.
- Wklej go na końcu pliku
functions.phplub w pliku własnej wtyczki.
- 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.
- 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>.
- 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
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.