Eliminate JavaScript that blocks rendering:

Currently, I am working on optimizing my website's speed and aiming for a perfect 100/100 score on PageSpeed Insights. The website in question is www.chrispdesign.com.

Despite my efforts to relocate the code and make necessary adjustments, I have been struggling to find the right place within the WordPress platform. Even when I do manage to place it correctly, the changes do not seem to take effect.

Additionally, I have been unable to locate "Remove render-blocking JavaScript" specifically pointing to http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js anywhere within the WordPress pages, only visible when viewing the page source.

I have experimented with different options using plugins like Autoptimize and attempted methods suggested by others, such as the approach detailed in this link:

Despite trying various techniques, I have yet to achieve the desired results. If anyone has any suggestions or ideas, they would be greatly appreciated.

Thank you!

Shaun

javascriptjquerycssajaxwordpress

Answer №1

To reposition JavaScript files to the bottom of your webpage, you'll first need to deregister them (for jQuery) and then register/enqueue them using wp_enqueue_script with the last parameter set to true.

<?php
function move_js_files(){
    // Deregister jquery scripts loaded by default
    wp_deregister_script( 'jquery' );
    wp_deregister_script( 'jquery-core' );
    wp_deregister_script( 'jquery-migrate' );

    // Register and enqueue them again with the last parameter set to true
    wp_register_script('jquery', includes_url() . '/js/jquery/jquery.js');
    wp_enqueue_script('jquery', includes_url() . '/js/jquery/jquery.js', array(), false, true);

    wp_register_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js');
    wp_enqueue_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);

    // Example for a custom script in the theme, no need to deregister it
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}

// Load only on frontend
if(!is_admin()){
    add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}

Make sure to verify that all JavaScript files (from both your theme and plugins) using jQuery have also been moved to the bottom of the page.

This method has proven effective for me, particularly in improving Google Page Speed scores.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a ReferenceError message that says "readFile is not defined

Currently, I am in the process of learning Node.js and encountering an issue. When I type 'node .' in the terminal, I receive a ReferenceError: readFile is not defined message. Below is the code snippet: const express = require("express"); co ...

javascriptnode.jsexpress

Tips for avoiding the vertical Stepdown

After searching for ways to prevent step down, I attempted to implement the solutions I discovered in my code. Unfortunately, none of them seemed to work. This could be due to the fact that my stepdown is vertical and involves elements nested inside other ...

htmlcss

Retrieve information from the server (using asp.net) using Java Script and store it in the local storage of the client device

I am receiving a JSON object from the server-side, but I have been struggling to save it in LocalStorage. When I check FireBug, this is how it appears: If you are having trouble viewing the images clearly, try opening them in a separate page by right-click ...

javascriptjqueryhtmlajax

Photo displayed above the carousel using Bootstrap

I'm currently in the process of building a website using the template found at . However, I'm having trouble placing an image in the center of the carousel, above the slides. Here is the code snippet I have tried so far: <div style="positi ...

jqueryhtmlcsstwitter-bootstrap-3

What's the best choice: trigger.io's request.ajax or jQuery.ajax?

What advantages does forge.ajax offer compared to traditional jQuery.ajax or backbone.save() calls? While I know that the forge API supports cross-domain requests, can't the same be achieved with jQuery or other AJAX libraries? The key example provide ...

jqueryajaxbackbone.jstrigger.io

Conceal the Angular alert message automatically after a specified number of seconds or when the page

I recently started working with Angular and managed to implement an alert message for password reset requests in our app: Usermodel: .service('userModel', ['$q', '$http', 'authorizedTracker', function($q, $http, au ...

javascriptangularjs

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

htmlcssreactjsjsx

Tips on presenting our data using JSON structure

Hey there! I'm new to Next JS and I'm looking to showcase the data from my index.js file in JSON format in my dynamicid.js file. Can anyone guide me on how to achieve this? index.js In my index.js file, I currently display my output but now I ...

javascriptreactjsgoogle-sheetsnext.js

Best practices for implementing JavaScript in JSP pages

After researching various sources, I have come across conflicting opinions on the topic which has left me feeling a bit confused. As someone new to web programming using java EE, I am looking to integrate javascript functions into my code. It appears that ...

javascriptjqueryjsp

Transforming a Bootstrap 4 HTML project into Angular 9

After stumbling upon a beautiful HTML template that caught my eye, I realized it was built using Bootstrap. Luckily, I came across tutorials on how to convert such templates into Angular 6 projects, making the process seem quite straightforward (like this ...

cssangularbootstrap-4

What steps do I need to take to convert a view from a three.js camera and scene to a bcf cameraview?

I am attempting to convert a ifc.js viewer file into a bcf format. The ifc.js viewer utilizes a three.js webglrenderer along with a camera and scene setup. Shown below is an example: https://i.sstatic.net/oTphJ.png https://i.sstatic.net/8Dtag.png I would ...

javascriptthree.jsbcftools

When sending a single apostrophe as a parameter in an AJAX post request, it will result in an error

JavaScript Code: var name = jQuery("#name1").val(); jQuery.ajax({ url: siteUrl + 'search/ind', type: 'POST', data: { name: name, }, success: function(data) { jQuery('#input').val(''); } } ...

javascriptjqueryajax

Using v-bind to dynamically set styles in Vue.js

While utilizing v-bind:style to apply dynamic values, I encountered an issue where v-bind:style did not seem to work. However, in the console, I verified that v-bind:style was receiving the correct value (:style='{ color : red (or any other value) }&a ...

javascriptvue.js

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?

How can I create an HTML/CSS toolbar where specific elements disappear completely when the browser size is decreased, similar to how the favorites bar functions in most browsers? The toolbar should be able to display a varying number of items. In this cas ...

htmlcssfrontend

Is it viable to create an onClick event for the text content within a text area?

I'm working on a project that involves displaying XML data in a textarea and creating an onClick event for the content within the textarea. For example: <textarea>Hello Web, This is a simple HTML page.</textarea> My goal here is to cre ...

javascriptjqueryhtml

Create a customized layout for your table in Datatables 2.0 with default controls

Previously, I was able to showcase three default controllers - buttons, search, and page length using the dom option: $('#data-table').DataTable({ dom: "<'row'<'col'l><'col' B><'col&ap ...

jquerydatatablesbootstrap-5

Transmitting a Wav file from JavaScript to Flask

I'm currently working on a JavaScript code that records audio from the browser and now I need to figure out how to send it back to Flask. start: function () { var options = {audio: true, video: false}; navigator.mediaDevices.getUserMedia(optio ...

javascriptjqueryflaskaudiobackend

Guide to aligning a component in the middle of the screen - Angular

As I delve into my project using Angular, I find myself unsure about the best approach to rendering a component within the main component. Check out the repository: https://github.com/jrsbaum/crud-angular See the demo here: Login credentials: Email: [e ...

javascriptangulartypescriptng-templateangular2-ngcontent

Finding the distance between two points in JavaScript requires a simple formula

Here is a code snippet that generates two TRACER points and displays them on a map, as well as shows the union between the two points. <?php $latitudInicio = $_GET['latitudInicio']; $longitudInicio = $_GET['longitudInicio']; $latit ...

javascriptgoogle-maps

Using Styled components and react-router-dom v6 to emphasize the active navigation link upon clicking

I'm just starting out with react and I am trying to figure out how to keep my hover style active while the current page is open. I think I need to set a condition but I am not sure how. const StyledLi = styled.li` `list-style: none; displa ...

javascriptreactjsreact-router-domstyled-components