Słowo wstępu
Korzystając z szablonów różnych developerów bardzo często dostajemy bardzo różne funkcjonalności jak np. animowane wykresy, pop-upy, mapy Google, pliki wideo, slidery i wiele innych. Bardzo często nie korzystamy z tych modułów a pliki JS ładują się i obciążają nasze strony i powodują dodatkowe zbędne zapytania serwera. Co więc zrobić żeby pozbyć się takich zapytań ?
Wyłączamy zbędne pliki JS w WordPress
Aby wyłączyć zbędne pliki JS (Java Script) w WordPress musimy najpierw odnaleźć w większości przypadków w pliku functions.php naszego motywu funkcje które rejestrują nam pliki JS. Odnajdujemy tam te pliki z których nie korzystamy. Ja posłużę się dla przykładu szablonem Extra od Elegant Themes i na jego bazie wyłączę kilka nieużywanych przez nas bibliotek Java Script w naszej instalacji WordPress. W Extra pliki których szukam są min przywołane w pliku /includes/builder/framework.php
function et_builder_load_global_functions_script() {
wp_enqueue_script( 'et-builder-modules-global-functions-script', ET_BUILDER_URI . '/scripts/frontend-builder-global-functions.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'et_builder_load_global_functions_script', 7 );
function et_builder_load_modules_styles() {
wp_register_script( 'google-maps-api', esc_url( add_query_arg( array( 'v' => 3, 'sensor' => 'false' ), is_ssl() ? 'https://maps-api-ssl.google.com/maps/api/js' : 'http://maps.google.com/maps/api/js' ) ), array(), ET_BUILDER_VERSION, true );
wp_enqueue_script( 'divi-fitvids', ET_BUILDER_URI . '/scripts/jquery.fitvids.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
wp_enqueue_script( 'waypoints', ET_BUILDER_URI . '/scripts/waypoints.min.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
wp_enqueue_script( 'magnific-popup', ET_BUILDER_URI . '/scripts/jquery.magnific-popup.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
wp_register_script( 'hashchange', ET_BUILDER_URI . '/scripts/jquery.hashchange.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
wp_register_script( 'salvattore', ET_BUILDER_URI . '/scripts/salvattore.min.js', array(), ET_BUILDER_VERSION, true );
wp_register_script( 'easypiechart', ET_BUILDER_URI . '/scripts/jquery.easypiechart.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
if ( et_is_builder_plugin_active() ) {
wp_register_script( 'fittext', ET_BUILDER_URI . '/scripts/jquery.fittext.js', array( 'jquery' ), ET_BUILDER_VERSION, true );
}
// Load main styles CSS file only if the Builder plugin is active
if ( et_is_builder_plugin_active() ) {
wp_enqueue_style( 'et-builder-modules-style', ET_BUILDER_URI . '/styles/frontend-builder-plugin-style.css', array(), ET_BUILDER_VERSION );
}
wp_enqueue_style( 'magnific-popup', ET_BUILDER_URI . '/styles/magnific_popup.css', array(), ET_BUILDER_VERSION );
Wiem, że napewno nie potrzebuję API Google Maps, które zajmuje dobrych kilkanaście kB i wczytuje się z zewnętrznych serwerów oraz kilka innych. Trzeba ogólnie zawsze sprawdzić co się wyłącza, żeby strona nie straciła funkcjonalności z której korzystamy.
Pliki których nie używamy możemy wyłączyć za pomocą poniższej funkcji:
// Wylaczamy zbedne pliki JS WordPress dla Extra
add_action( 'wp_footer', 'de_script', 1 );
function de_script() {
wp_dequeue_script( 'google-maps-api' );
wp_deregister_script( 'google-maps-api' );
wp_dequeue_script( 'divi-fitvids' );
wp_deregister_script( 'divi-fitvids' );
wp_dequeue_script( 'easypiechart' );
wp_deregister_script( 'easypiechart' );
}
Dzięki temu prostemu zabiegowi nasza strona powinna włączać się minimalnie szybciej i zdobędzie kilka punktów więcej we wszelkich testach. Mamy nadzieje, że ta prosta funkcja przyda się niejednemu z Was i wyłączycie zbędne pliki JS w swoim WordPressie.
