Rebuild Part 3: Setting up a blank canvas

When I start any project, I like to have a blank canvas from which I can build upon. The rebuild of my personal website was no exception; I began by downloading a Wordpress theme template which I use for the majority of my sites.

The template I use is titled "HTML 5 Blank: Wordpress Theme" and can be downloaded from https://html5blank.com/. If you want to learn more in regards to the specific features, it includes then head over to the GitHub repository at https://github.com/toddmotto/html5blank. With the theme downloaded, I did the usual setup process that I find myself doing with theme developments. The process included updating the readme file, theme screenshot and theme details (author, website, etc.). Usually, with the theme configured to my liking, I would begin immediately coding the theme with styles, component placements and scraping out any of the templates which are unrequired such as post dates, etc.

However, as I am trying to reach maximum performance I wanted to examine instead how I could minimise the number of Javascript requests made. If you have checked out the repository for the HTML 5 Blank theme, you will see there are some features included that aim to benefit the developer (Modernizr, Conditionizr, CDN for jQuery, etc.). Now while these features can be beneficial for a large portion of projects, especially those where a developer includes experimental CSS and HTML features, they can be redundant if the website does not utilise the scripts and therefore becomes an unreasonable burden on the number of requests made by the site. To prevent any of these JavaScript requests, I first removed the request itself from within the function.php file. The scripts requested were as follows -

1. jQuery v1.12.4
2. jQuery Migrate v1.4.1
3. Conditionizr v4.3.0
4. Modernizr
5. Analytics (Google)
6. wp-emoji.min.js
7. comment-reply.js

That's 7 requests being made to my website, every time someone views one of my posts!

To rid my website of jQuery and cross browser support scripts, I first had to remove all of the code in the function html5blank_header_scripts(), I also had to make sure to remove the call to the function with the functions.php file too.

// Remove jQuery Migrate Script from header and Load jQuery from Google API
function crunchify_stop_loading_wp_embed_and_jquery() {
if (!is_admin()) {
wp_deregister_script('wp-embed');
wp_deregister_script('jquery'); // Bonus: remove jquery too if it's not required
}
}
add_action('init', 'crunchify_stop_loading_wp_embed_and_jquery');

https://crunchify.com/how-to-disable-auto-embed-script-for-wordpress-4-4-wp-embed-min-js/

In the footer.php file, there was a script template which allowed for the inclusion of my analytic details. As I did not want to track analytics, due to the website being a place of expression and not recognition, I simply remove the code found in the script at .

My website was not built for Emoji support, making a request to allow for emojis was completely pointless and therefore I removed the request for support.

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

https://www.denisbouquet.com/remove-wordpress-emoji-code/

As I did not want to support comment replies on my website, I discarded the request for `comment-reply.min.js'using the code found below.

function clean_header(){ wp_deregister_script( 'comment-reply' ); }
add_action('init','clean_header');

https://www.wpfaster.org/code/how-to-remove-comment-reply-min-js-file-wordpress

Now my website was free of Javascript; I was ready to move on to phase 4 which was to analyse the existing plugins and review whether or not they were necessary on my live website. Check out Rebuild Part 4: Plugins.