Kolega postanowił poszukać Świętego Graala, przynajmniej jeśli o chodzi o szybkość jego strony internetowej w teście Google PageSpeed Insights. Oczywiście życzę powodzenia, nawet jeśli to często sztuka dla sztuki. Przy tej okazji zapytał, jak w WordPressie najprościej i bez dodatkowych wtyczek (wydajność ;-)) wywalić z adresów ładowanych plików CSS i skryptów (JavaScript) dodawane automatycznie argumenty z wersją – czy to samego WordPressa czy wtyczki lub motywu. Ponoć ma lepiej cache dzięki temu działać, a tym samym w teście wpadnie dodatkowy punkt lub może nawet dwa…

Usuwanie wersji z adresów plików w nagłówku WordPressa

Na temat samego dostosowania strony nie będę się teraz tutaj rozpisywał, bo każdy kto raz próbował dobić do setki we wspomnianym teście z bardziej rozbudowaną stroną pewnie wie, że może to być zabawa na długie godziny. I czasem drobna zmiana – czy to na stronie, czy po stronie samego serwera – może nas przybliżyć do upragnionego wyniku, lub od niego oddalić.

Ale skoncentruję się na pytaniu kolegi, który chciał się pozbyć a adresów plików wczytywanych podczas wyświetlania strony argumenty związane z wersją pliku (lub WordPressa, co często jest tożsame):

<link rel='stylesheet' id='dashicons-css' href='https://webinsider.pl/wp-includes/css/dashicons.min.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='https://webinsider.pl/wp-includes/css/admin-bar.min.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css' href='https://webinsider.pl/wp-content/themes/Webinsider/style.css?ver=4.9.8' type='text/css' media='all' />
<script type="7e85d75f44408c38c88dfc1e-text/javascript" src='https://webinsider.pl/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Może tego dokonać kilkoma linijkami kodu, które wystarczy dodać np. do pliku functions.php w WordPressie:

function webinsider_wp_remove_ver_query_arg( $src ) {
	if ( strpos( $src, 'ver=' ) ) {
		$src = remove_query_arg( 'ver', $src );
	}
	return $src;
}
// Styles    
add_filter( 'style_loader_src', 'webinsider_wp_remove_ver_query_arg', 99999 );
// Skrypty
add_filter( 'script_loader_src', 'webinsider_wp_remove_ver_query_arg', 99999 );

W efekcie podany wcześniej przykładowy kod z nagłówka strony będzie wyglądał tak:

<link rel='stylesheet' id='dashicons-css' href='https://webinsider.pl/wp-includes/css/dashicons.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='https://webinsider.pl/wp-includes/css/admin-bar.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css' href='https://webinsider.pl/wp-content/themes/Webinsider/style.css' type='text/css' media='all' />
<script type="7e85d75f44408c38c88dfc1e-text/javascript" src='https://webinsider.pl/wp-includes/js/jquery/jquery.js'></script>

I choć sam odnoszę się dość sceptycznie do tej modyfikacji, to mam świadomość, że czasem „na produkcji” wywala się tego typu dodatkowe znaczniki. Trzeba tylko pamiętać, że czasem może to wygenerować problemy, zwłaszcza gdy dokonujemy częstych zmian w tych plikach – przeglądarka użytkownika może pobierać starsza wersję z cache, zamia nowszą z serwera.

A czy dało to kopa w teście? Nie wiem, nie pytałem, bo i ciekaw nie jestem… ;-)