I decided to revert to an older theme for one of my websites, simply because I like its layout for the content of that site and saw no point in re-inventing the wheel. The theme is Baskerville 2 by Anders Norén <<link>>.
However, it needed a bit of optimization to achieve a good page-load score in google devtools.
<<will discuss other tweaks in future posts>>, but one problem was the jquery file served with the theme.
I decided to use jquery cdn to deliver the minified slim version, but needed to de-register the old jquery first and set up the correct path to the new code in wordpress.
Here’s how:
First, de-register the old file and allow “custom” jquery in functions.php, by adding this code to functions.php:
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.6.1.slim.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Next, open up header.php and (if it isn’t there already) add:
<?php wp_enqueue_script("jquery"); ?>…put this BEFORE <?php wp_head(); ?> in the <head> section
now, use jquery cdn to deliver the slim version of jquery core
insert AFTER <?php wp_head(); ?> in header.php
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>The head section of your header.php should now look something like this:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
</head>Other tweaks:
Install Litespeed cache
Install Async Javascript
disable Fontawesome and Dashicons
Leave a Reply