[snippet] Usunięcie query string plików CSS i JS

Optymalizacja WordPressa to temat rzeka, istnieje wiele “trików”, mechanizmów czy pluginów, które pozwalają nam uzyskać cenne sekundy czasu ładowania naszej strony.

Jednym z tych trików jest usunięcie “query string” czyli unikalnego identyfikatora, który jest dopisywany przez WP do plików CSS czy JS. Gdy spojrzymy w źródło naszej strony to zauważymy tam wpisy podobne do poniższych:

/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.5
/wp-includes/js/jquery/jquery.js?ver=1.12.4

Każdy arkusz stylów czy plik ze skryptami JS po znaku zapytania ma dopisek “ver=xxx”. Podczas tworzenia strony jest to pożądane gdyż przeglądarka, CDNy i serwery proxy nie “keszują” naszej strony i każda zmiana w kodzie jest widoczna po odświeżeniu strony w przeglądarce. Natomiast gdy ukończymy prace nad naszą witryną i jedyne zmiany, które będziemy później wprowadzać ograniczają się tylko do HTMLa (czyli przykładowo będziemy dodawali wpisy na naszym blogu) możemy wymusić na WP aby nie dodawał query string.

Dzięki temu zabiegowi nasza przeglądarka zapisze sobie zasoby naszej strony w pamięci podręcznej i nie będzie musiała ich za każdym razem pobierać z serwera. Gdy korzystamy z CDNa jak na przykład Cloudflare, on również nie “keszuje” plików z parametrami, więc aby w pełni wykorzystać jego możliwości możemy je usunąć.

Kod, który musimy dodać do naszego pliku functions.php wygląda następująco:

// Usunięcie query strings (ver=xxx) z plików CSS i JS
function im_remove_script_styles_version( $src ){
    return remove_query_arg( 'ver', $src );
}
add_filter( 'script_loader_src', 'im_remove_script_styles_version' );
add_filter( 'style_loader_src', 'im_remove_script_styles_version' );

Przeprowadziłem krótki test WP z motywem Avada. Początkowo GTMetrix pokazał mi komunikat:
Po użyciu wyżej wymienionego snippetu, kolejny test wyglądał następująco:
Czas ładowania spadł o około 0.7 sekundy. Może nie jest to wynik fenomenalny ale pamiętajmy, że to tylko jeden ze sposobów, który można łączyć z innymi. Ziarnko do ziarnka…