Today I noticed the blog section of my site was not rendering correctly, and the console was spitting out errors that I knew where to do with jquery not loading.
When I looked at source code all the scripts that where added by WordPress (wp_enqueue_script) had an extra element added to it, so:
<script type='text/javascript' src='//code.jquery.com/jquery-2.2.0.min.js'></script>
become:
<script type='text/javascript' src='//code.jquery.com/jquery-2.2.0.min.js' defer '></script>
so 'defer' and a single quote mark is being added.
I need these scripts to load in the , when I register the scripts I do set load in the footer as false.
I'm not sure why/how 'defer' is being added? Or why a single quote mark is also added? I'm also not sure if deferring them is what breaks the page or this rouge single quote mark?
I do use 'Autoptimize' but I have turned it off and cleared out all caches.
The only hack around it, short term, is to hardcode the scripts into the header.php and these are not deferred.
Probably a (badly developed) plugin, disable plugins one by one until the defer attribute goes away. If not it could also be a theme thing, briefly switch to a default WordPress core theme to double-check?
frank
Related
A Lighthouse audit of my site suggests preloading the file https://partyfavorz.com/wp-content/themes/customizr-pro/assets/front/css/magnific-popup.min.css to speed up my load time.
I created a header.php file for my child theme and using their suggested format of
<link rel="preload" href="styles.css" as="style">
and used this between the opening and closing head tag:
<link rel="preload" href="/wp-content/themes/customizr-pro/assets/front/css/magnific-popup.min.css" as="style">
After clearing my cache and CDN and running a new audit - the critical alert remains. It has something to do with the as="min"> I'm guessing this is a style sheet and tried using that but it had no effect.
I went back and tried something simple like adding the theme color code in the child header and it still didn't work - even though the code was correct and I had copied the theme's header.php file over to the child theme.
I removed the code from the child theme and then installed a basic plugin called "Insert Headers and Footers" and entered the same code again. Once saved - it entered the identical code into the child theme in the exact location and now works.
I did the same thing with preload code that started this thread and it worked as well.
The issue appears to be with the Customizr theme itself. In both instances, the same code I manually put into the header file in the child theme did not work. Once it was used in the plugin - it did.
I can't properly add in the CDN for moment.js to my HTML page. I'd rather just add a link in my html than install. Anyone know how to this? I've tried a few CDNs and nothing is working. Is there a reason to put the link in the head vs just before closing body tag with other JS links? I've seen it done both ways.
If you want to point to the latest,
You can link directly from their website.
Here is the link,
https://momentjs.com/downloads/moment.js
You can use the following link for the moment.js:
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
The imports done in the head suppose to load onto DOM before the content of the body vs at the end near the body closing tag, when all the code above supposedly have been load onto the DOM
However, we often deal with async code when working with javascript.
So, if you have a local script that depends on an external CDN library to be available, you can add defer to the end of your local script. the defer will wait for all content to be available on DOM to continue loading.
example:
<script src=xxx" defer></script>
I would place where it looks more cohesive. Perhaps you sign the loads with async and defer to deal with the loading order, depending on the scripts relevance. Find more on the primary discussion.
I tested my wordpress website on Google Page Speed Insight and it scored a 95/100. It suggested that I should "Optimize CSS Delivery" of 1 css file:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
Right now it's sitting in the footer along with all the javascript codes below it. I moved it back between the head tag and same results. How do I optimized the css delivery of the css file?
In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content.
Taken from: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
Its not best to actually put all the css together. You should call first the styling that is needed for the rendering and afterwards call that big stylesheet of yours.
And if you want to know how to defer stylesheets well this is how:
CSS delivery optimization: How to defer css loading?
Hope i got you covered :)
95/100 is a great score. You're at the point where more work to hit 100 is going to give you diminishing returns compared to the effort involved with getting there.
But if you're dead set on approaching 100/100 you'll need to remove the above the fold CSS from the file and include it in a <style> block within your theme. Then you can hold off on loading the CSS file until the rest of the page has loaded and it will no longer be render blocking.
Here's some info I wrote on handling above the fold CSS with the WordPress Autoptimize plugin including a JavaScript bookmarklet to get you started with finding your above the fold CSS.
Note: You should be using the wp_enqueue_style() function to include that script, rather than include it directly in the footer. Check out this article on my website to see how to enqueue scripts and styles properly.
There may be a better forum for this, but here's my problem:
I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.
I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.
Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.
My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.
I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.
For reference I'm using this array of CDN locations for my current project:
<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>
There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.
The root of your problem is right here...
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.
Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)
If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.
You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.
It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.
I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.
I am using wp_enqueue_scripts() to set my JS files and I am putting them in the footer using the last parameter
But testing in gtmetrix, I still see that I need to defer parsing of Javascript.
How do I defer parsing of Javascript to execute after DOM loads in Wordpress? Is there a parameter perhaps to wp_enqueue_scripts() that can do this?
First if all, wp_enqueue_scripts() will only load scripts in the footer if you set the fifth parameter. Even if you do that, if the file contains content that will execute without user interaction then you should be wrapping that in a jQuery.ready() call.
The latter part has nothing to do with wordpress. That's a basic web development rule.