Blokowanie stron w CSS i javascript w WordPressie
- 1. Użyj zależności innych skryptów na jQuery
- Przenieś jQuery do stopki witryny
- 2. Łączenie CSS w WordPress
- Misha Rudrastyh
Ten post oznacza, że znasz narzędzie Google, aby zoptymalizować szybkość ładowania stron w witrynie - PageSpeed Insights . Słuchaj, tak, teraz, umieść tam swoją stronę, kliknij przycisk „Analize”.
Okay, o czym jest ten post?
Możliwe, że w wynikach sprawdzania Twojej witryny znajduje się element „Wyeliminuj blokowanie renderowania JavaScript i CSS w treści powyżej tego elementu”.
Zauważyłem, że ten element jest jednym z najtrudniejszych (czasochłonnych) i prawie na wszystkich witrynach, nawet bardzo szybkich, jest obecny.
Jak to naprawić w teorii:
- Łączymy wszystkie pliki JavaScript i umieszczamy to, co działo się przed tagiem zamykającym witryny </ body>.
- Łączymy cały CSS, umieszczamy go tuż przed JavaScriptem, który już przenieśliśmy, a następnie wybieramy style, które są niezbędne do poprawnego wyświetlania strony, a zwłaszcza jej górnej części (pierwszy ekran), i umieszczamy je w tagu <style> w <head> strona.
Jak wygląda sytuacja w praktyce, aw tym konkretnym przypadku - w przypadku witryn WordPress?
1. Użyj zależności innych skryptów na jQuery
W poprawnie ugotowanym motywie WordPress wszystkie pliki CSS i JS są połączone przez wp_head () i wp_footer () - czyli odpowiednio w <head> i na końcu </ body>.
Ponadto pliki mają zależności, na przykład wtyczka fancybox.js powinna łączyć się po jquery.js, co oznacza, że jeśli biblioteka jQuery jest w wp_footer () , FancyBox nie może się dostać wp_head () .
Przenieś jQuery do stopki witryny
Odbywa się to bardzo prosto - za pomocą funkcji wp_deregister_script () , wp_register_script () , wp_enqueue_script () i hak wp_enqueue_scripts (czasami używają haka inicjującego w połączeniu z is_admin () ). Wszystko, czego potrzebujesz, to wstawienie następującego kodu do pliku functions.php witryny.
add_action ('wp_enqueue_scripts', 'true_peremeshhaem_jquery_v_futer'); function true_peremeshhaem_jquery_v_futer () {// usuń standardową rejestrację jQuery wp_deregister_script ('jquery'); // rejestracja połączenia w stopce, opis parametrów - w dokumentacji funkcji (link powyżej) wp_register_script ('jquery', includes_url ('/js/jquery/jquery.js'), false, null, true); // połącz wp_enqueue_script ('jquery'); }
Chcę zwrócić uwagę na fakt, że jest to zautomatyzowane rozwiązanie i chociaż działa w prawie 100% przypadków, zdarza się, że niektóre skrypty nie chcą być przenoszone do stopki witryny. Następnie musisz być bardziej uważny na każdy ze swoich plików JavaScript.
Tutaj kończy się nasza praca z JS, oczywiście wzrost prędkości będzie zapewniony przez połączenie skryptów (to znaczy usunięcie ich wszystkich z rejestracji, a następnie podłączenie do zunifikowanej wersji) - ale Google nie wymaga tego teraz.
2. Łączenie CSS w WordPress
Jeśli łączenie wszystkich skryptów JavaScript w jeden plik nie zawsze jest dobrym pomysłem, zalecam łączenie CSS zawsze.
Pamiętasz zrzut ekranu na samym początku artykułu ( 10 blokujących zasobów CSS )? Skąd się bierze taka liczba plików stylów, skoro twórca motywów prawdopodobnie zrozumiał, co robi?
Odpowiedź pochodzi z wtyczek.
Na przykład wtyczka „Formularz kontaktowy 7” łączy własny arkusz stylów i choć sama w sobie jest niewielka, lepiej unikać niepotrzebnych żądań HTTP.
Krok po kroku jak.
- Skopiuj zawartość arkusza stylów wtyczek i wklej go na końcu głównego pliku stylu - style.css.
- Sprawdź, czy style względne są umieszczone w tych stylach dla obrazów, na przykład url ('images / load.gif'). Jeśli tak, zastąp je bezwzględnymi lub przenieś obrazy z wtyczki do folderu motywu.
- Przejdź do ustawień wtyczki i sprawdź, czy istnieje możliwość usunięcia zaznaczenia gdzieś i nie łączenia CSS wtyczki. W „Formularzu kontaktowym 7” nie ma takiej możliwości, co oznacza, że przechodzimy do następnego elementu.
- Odcięliśmy pliki za pomocą function.php. W przypadku stylów „Formularz kontaktowy 7” kod będzie następujący: add_action („wp_print_styles”, „true_otkljuchaem_stili_contact_form”, 100); // teoretycznie możesz użyć haka wp_enqueue_scripts, chociaż nie przetestowałem go specjalnie. function true_otkljuchaem_stili_contact_form () {wp_deregister_style ('contact-form-7'); // w parametrach - ID połączonego pliku}
Czasami także z pomocą znaczniki warunkowe pliki wtyczek (zarówno CSS, jak i JS) są wyłączone tylko z tych stron, na których nie są używane.
Ok, odkryłeś formularz kontaktowy 7, ale skąd znasz identyfikator plików CSS innych wtyczek?
Tak, łatwo, otwórz kod źródłowy strony i zobacz podobne zdjęcie:
Istnieje również wtyczka, która pozwoli Ci automatycznie łączyć CSS i JavaScript - JS i CSS Script Optimizer.
Jeśli masz jakieś pytania lub zapomniałem o czymś wspomnieć w tym artykule, zostaw komentarz.
Misha Rudrastyh
Po raz pierwszy spotkałem WordPressa w 2009 roku. Od 2014 roku mogę spotkać się z WordCampem - oficjalnym wyznaniem na WordPressie, czasem tam mówiącym. Również obecnie prowadzi Kursy WordPress w Epic Skills .
Jeśli potrzebujesz pomocy na swojej stronie, a może nawet rozwoju od podstaw - napisz do mnie .
Okay, o czym jest ten post?Skąd się bierze taka liczba plików stylów, skoro twórca motywów prawdopodobnie zrozumiał, co robi?
Ok, odkryłeś formularz kontaktowy 7, ale skąd znasz identyfikator plików CSS innych wtyczek?