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.
Related
i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.
Render Blocking CSS
Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.
What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.
I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.
To explain what is happening:-
A user navigates to your site and the HTML starts downloading.
As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
The browser looks for your style sheets and once they have downloaded it can render the page.
Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.
To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.
Render Blocking JS
This one is simpler to fix.
If you are able to use the async attribute on your external JS then use that.
However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.
This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)
The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.
This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.
Add async in the script tag and put the css and js in the last of the page
I would like to use MathJax within my website, and I have opted to use a CDN method. MathJax.org states that you can put
<script
src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'>
</script>
within the HTML <head></head> tags and provided a pre-populated example on jsbin
However, I have noticed when using MathJax within WordPress, the MathJax documentation suggests using
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
I have noticed, that the difference is in the main part of the src address where the CDN used is cdn.mathjax.org instead of cdnjs.cloudflare.com, and the address points to mathjax/latest/MathJax.js instead of mathjax/2.7.2/MathJax.js.
I have put the second script into the jsbin example to see if there is a difference in function, and the example still works. Is it preferable (or more correct) to use the second script over the first one whether using WordPress or not, with the understanding that the second one will point to the most up-to-date version of MathJax?
As #Bob__ pointed out, and I had just read prior to then, MathJax was shutting down its CDN and they actually
retired cdn.mathjax.org in April, 2017.(Source: docs.mathjax.org)
The same webpage states that there are many free CDN providers that provide copies of MathJax. Some provide “rolling releases”, i.e., links that update to the latest available version upon release, and cdnjs.com is recommended. This matches Mathjax.org's page at https://www.mathjax.org/cdn-shutting-down/
They say
To jump start using cdnjs, you accomplish the first step by putting
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
into the <head> block of your document
Note: the configuration file TeX-MML-AM_CHTML is a great way test all input options at once. You can find leaner combined configuration packages in MathJax documentation.
Interestingly, before seeing that, carrying out a MathJax libraries search on cdnjs.com provides an updated script tag of
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js">
</script>
So the answer is to check for the latest library script tag in cdnjs.com, which is currently for version 2.7.3 and use that one. Currently
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js">
</script>
and if you wish to use the TeX-MML-AM_CHTML configuration file, use:
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
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
I tried optymalize my site with PageSpeed Insights.
This Google tool shows me error :
"Eliminate blocking rendering JavaScript code".
I moved all script code from head at the end of the page.
Error was fixed, but now I get in console error:
ReferenceError: $ is not defined $(document).ready(function() {
The reason of error is probably several js codes in body section.
How I can eliminate this?
Do I must move code from body at the end of the page or there are other solution?
It's a dependency problem, something is using jQuery (probably) before it's initiated. Is the jQuery loader script still in header, or above the script that uses $(document).ready()?
Some scripts are asynchronous and some are not. Keep this in mind also, because if jQuery for instance is loaded asynchronous and is above your script, and your script is loaded synchronous, it might not matter. Your script would still be loaded before the async script has finished loading.
There is no need to place asynchronous script in the bottom of the body - and sometimes PageSpeed is not correct in it's assumptions about block rendering scripts. You can also try the "defer" HTML attribute on the script tags you want to defer after DOM is ready.
http://caniuse.com/#feat=script-defer
Friends, I am willing to follow the rules of the W3C where it is recommended that javascript and CSS files should be in individual files and not within the page.
Good, following this rule, and not wanting to overload the master page, I would like to embed the dependencies dynamically. So how could I insert the libraries dynamically? I think the bigger problem is the Ajax requests.
Example:
<script type="text/javascript" src="http://sstatic.net/so/js/master.js?v=6523"></script>
I tried using the JavascriptResult, but he writes the content on the page, and do not run as "Stream."
Any help is welcome. Thanks
If I understand correctly the problem, you want to add script files dynamically to the page.
You can try jQuery load function, that can parse for you the result in very intuitive way.