I am trying to speed up the website and get 100/100 on here:
page speed insights - website www.chrispdesign.com
I have tried moving the coding etc but on my wordpress website i cant seem to quite find the correct place to put it. If I have had it in the right place it wont work.
Also I cannot
find Remove render-blocking JavaScript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
on any of the wordpress pages only on the view page source?
I have tried a few options on autoptimize plugin etc.
and attempted what the guy on this link did:
https://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content
Tried a few techniques but no no avail.
Anyone got some ideas?
Many thanks
Shaun
If you want to move javascript files to bottom, you need to deregister it (for jquery), and after register/enqueue it with wp_enqueue_script(set the last parameter at true)
<?php
function move_js_files(){
// Deregister jquery load by default
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );
// Register it by yourself and enqueue with last parameter at 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);
// Exemple with a custom script in theme, no need to deregister
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}
// Only load on frontend
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}
You also need to check that all your javascript files (in theme and plugins) that use jQuery was also moved to bottom.
This works for me, with a few sites on Google Page Speed.
Hope this could help !
You could try to add the defer attribute to the script tags that need to be defered until page has loaded, see:
http://www.w3schools.com/TAgs/att_script_defer.asp
Related
I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style
I'm pretty new to this so help and possibly patience would be appreciated. I've spent a few hours trying to string together a solution based on other peoples problems but I'm struggling.
I have icons on a website that on desktop hover will show the img title as a tooltip. Unfortunately on tablet/mobile this doesn't work. I assume because we can't hover on those browsers. Example page: http://queenofretreats.com/retreat/strategic-space-burgundy-france/ - you'll see the 8 turquoise icons below the main image. These are the icons in question.
I found a solution that adds the img title on click using javascript. Solution demo here: http://jsfiddle.net/bo28190/s3dg50y4/
I'm not sure why I can't get this to work on my actual wp installation.
I've added the script as a .js file in my theme folder. I've called the script from functions.php using
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );
I've added the jquery UI library , adding:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
But the tooltip doesn't show click on any screen size.
Try to replace this:
wp_enqueue_script( 'mobile-icon-tooltip', get_stylesheet_directory_uri() . '/js/mobile-icon-tooltip.js', array(), true );
with this:
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
get_stylesheet_directory_uri() returns the stylesheet URI, while what you really want is the theme base URI.
Apologies, I have literally no idea when it comes to .js stuff; I'm a designer mostly and so far have never needed to use any js.
I'm soon to build a site for a client in Wordpress, and they have a slide-based calculations function that I need to lift from their old site; only trouble being that I will be constructing the site using a different theme, so the functionality needs re-integrating into the new theme.
Trouble is, in testing this I can get the slides to appear, but they don't really do anything - and it seems that the problem is that the associated .js file isn't loading. It's been placed in THEME/assets/js/ where it seems it should be, and I have added the following to functions.php:
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'theme-js' ), '1.0', false);
Can anyone point me in the direction of what I'm doing wrong please? Sorry for my complete amateurness - I hope the above makes sense...!
It may be that maybe jquery is not loaded or that there is a conflict with something else.
try
function myFunction(){
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'jquery','theme-js' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'myFunction' );
So first check the source code on the page and make sure it is indeed not being sourced in. If it is being sourced in, make sure that the path actually links to the source code file. If its just not there consider your statement:
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'theme-js' ), '1.0', false);
Try replacing array( 'theme-js' ) with NULL - just to see if it that allows it to show up.
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', NULL, '1.0', false);
That parameter requires the javascript file with the handle 'theme-js' to be loaded first or your script wont even try to load. Replacing it with NULL will remove the perquisites required and wordpress will load your script if it exists.
If that allows your script to load, check and make sure the prerequisite script is loaded and see if it using the handle 'theme-js'
so I am working on a custom theme in Wordpress. I used to have a whole lot of JS in the head.php, like this:
jQuery(document).ready(function($) {
$('.widgetblock').accordion({
//args
});
if ( have_posts() ) {
//stuff
}
});
However I've since read that the proper way to add JS in Wordpress is to use wp_enqueue_script() in functions.php, so I'm trying to do that. What I've done is just put that same code into a .js file that I've save in the corresponding folder, and I'm then loading it like this:
function script_assets() {
wp_enqueue_script( 'js-code', get_template_directory_uri() . '/js/js-code.js', array( 'jquery', 'jquery-ui-widget' ) );
}
add_action( 'wp_enqueue_scripts', 'script_assets' );
I've added JQuery and JQuery UI as dependencies.
However, that doesn't work. Chrome says that accordion() and have_posts() aren't defined. I also encounter issues if I try to reference specific elements from my CSS.
So, what am I to do? This is probably a very basic problem, but I can't find how to solve it.
Another problem is, how do I make 100% sure that some JS scripts are loaded after the CSS? I'm using -prefix-free which should be loaded right after it, but I'm not sure that's possible with wp_enqueue...
EDIT: I can't really load that script in the footer, it needs to be loaded immediately after the CSS. :/
Thanks.
Every time I have had to add jQuery to a WordPress site I use this code that I found on CSS-tricks
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
For what I understand, once you load jQuery this way you prevent conflicts and it gets loaded only once.
Well someone else posted an answer but then deleted it so...
The dependency I was using here wp_enqueue_script( 'js-code', get_template_directory_uri() . '/js/js-code.js', array( 'jquery', 'jquery-ui-widget' ) ); was wrong; I should have used jquery-ui-accordion, which jquery-ui-widget doesn't include. I elected to include the whole of jquery-ui (so I could use other features without having to add specific dependencies for each of them) but to do that I had to link to Google's, since there is no full package in WP.
That fixed some of my issues, not everything (the -prefix-free script still isn't loaded right after the stylesheet, and I have to find a way to replace the PHP functions that I used before) but the website's working, so there's that :)
Thanks to whomever actually answered, I don't remember your username, sorry.
I have a custom js file as part of my wordpress installation, which is registered and enqueued using functions.php as normal. I have registered this particular script to load within wp_footer rather than within wp_header. However, I also have a plugin that is putting js into wp_footer, and by default it is loading this below my script. I need to force my script to load last. Is there soemthing simple that can be done to achieve this? It seems like something fairly routine to me?
Here is my code:
function scripts() {
// Register scripts
// js
wp_register_script('custom', get_bloginfo('template_url'). '/js/custom.js', false, false, true);
// Enqueue scripts
wp_enqueue_script('custom');
}
add_action('wp_enqueue_scripts', 'scripts');
The current order of the scripts goes, but I need to force my script to load after the plugin:
<script>/my_script.js</script>
<script>/plugin_script.js</script>
Thanks in advance!
Just set the $priority parameter to a ridiculously high value:
add_action( 'wp_enqueue_scripts', 'scripts', 999999 );
To be the very last in the queue (though one can never be sure) use php's PHP_INT_MAX constant:
add_action( 'wp_enqueue_scripts', 'scripts', PHP_INT_MAX );
Edit cf. discussion in comments. Note that the following is NOT the recommended way of enqueueing scripts in the footer.
add_action( 'wp_print_footer_scripts', 'so26898556_print_footer_scripts', ( PHP_INT_MAX - 2 ) );
function so26898556_print_footer_scripts()
{
echo '<script src="' . get_bloginfo( 'template_url' ) . '/js/custom.js"></script>';
}