Fast Website Loading with JavaScript and CSS Optimization

Photo By Pankaj Patel on Unsplash

As we know fast website loading with JavaScript and CSS optimization, there are many ways to speed up website loading, and one of them is optimizing JavaScript and CSS to make website loading faster.

You may already be familiar with Google PageSpeed Insights, a tool commonly used to check website load times. Simply copy your website URL into it and click “Analyze” now!

What Will Be Shared in This Article?

When you check your website performance, you might see recommendations to remove or optimize JavaScript and CSS that block rendering, which can slow down your website.

This can be quite a challenge, but don’t worry—we’ll go through this together. So, how can we fix this theoretically?

• Combine all JavaScript files into one and place it just before the closing tag.
• Merge all CSS files and place them before JavaScript.** Then, select the most important styles required for the first screen view and include them directly in the website.

These strategies will be applied to your CMS-based website (WordPress).

In a properly configured WordPress theme, all CSS and JavaScript files should be included using the wp_head() and wp_footer() functions.

Additionally, jQuery dependencies should be considered. For example, if you use the fancybox.js plugin, it must be included after jquery.js and not before it. That means if jQuery is in wp_footer(), Fancybox should also be in the footer.

Moving jQuery from wp_head() to wp_footer()

This is easy to implement using built-in WordPress functions which are wp_deregister_script(), wp_register_script(), wp_enqueue_script(), and the wp_enqueue_scripts action hook.

add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');

function rudr_move_jquery_to_footer() {
// unregister the jQuery at first
wp_deregister_script('jquery');

// register to footer (the last function argument should be true)
wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);

wp_enqueue_script('jquery');
}

Mamang wants to point out that some JavaScript files can be moved to the footer. So, be careful when doing this to ensure your website remains safe.

Unlike JavaScript, Google PageSpeed Insights does not require all JavaScript files to be merged—it only suggests moving them to the footer. However, merging CSS files is highly recommended.

Many WordPress plugins add extra CSS files, increasing the number of HTTP requests. For example, Contact Form 7 includes its own CSS stylesheet. While the size is small, it still creates an additional HTTP request. What can be done now?

1. Copy the plugin’s CSS and merge it into the main CSS file.
2. If there are image references url (‘pictures/loading.gif’), replace them with absolute URLs or move the images to the theme folder.
3. Check the plugin settings to see if the CSS file can be disabled.
4. If disabling CSS is not possible through settings, add the following code to your functions.php file

add_action( 'wp_print_styles', 'rudr_remove_contact_form_css', 100 );

function rudr_remove_contact_form_css() {
wp_deregister_style( 'contact-form-7' ); // the only parameter - ID of the CSS stylesheet
}

To find the CSS ID for other plugins, inspect the page’s source code, where you will see stylesheets loaded by different plugins.

You can also automate these tasks using the JS & CSS Script Optimizer plugin, though manual optimization is recommended for better control.

That’s all for this article Mangcoding sharing. Hopefully, it provides new knowledge and helps improve your website performance. If you have any feedback or suggestions, feel free to comment or reach out via Email and social media.

Source : Fast Website Loading with JavaScript and CSS Optimization