I'm doing some SEO page load stuff, and one of the things that google suggest is adding asyng to the script tags to they load the page faster.
Heres the suggestions:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhardscapedesigns.com%2F&tab=desktop
Most of the stuff I'm trying to edit is generated by wp_head function. Does anyone know how I can add async to those script tags, I'm not able to find the exact place to edit that HTML. I know there some plugins that supposably do this, but I'd rather do it manually since they seem to break my site
Just add the async keyword in your script tags. Using a plugin for such petty tasks is very wastefull.
Your script tags should look something like this-
<link async type="javascript/text" href="THE_URL"/>
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 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 want to use a script on my web site and I know that I must put all scripts separated from the template in a .js file. But I don't know how to do it this time when the script is executed directly in the script src:
<script type="text/javascript" src="http://svenskfotboll.se/widget.aspx?scr=table&ftid=39662&b1=%23006bb7&f1=%23ffffff&b2=%23bfd4f3&f2=%23000000&b3=%23ffffff&f3=%23000000&b4=%23ececec&bo=%23ffffff&s=1"></script>
What is the best practice to get it to work in Meteor?
I'd go to that url, get that script, and save it in a file in your project. However, there wasn't anything actually at that url when I just checked it out. That would definitely be a problem too :)
EDIT: You can also stick in the head tag.
EDIT 2: if you want it to display in a template, like if it's a widget such as yours, you can insert it manually every time the template re-renders. It's pretty simple, actually. First we've got the template code:
Template.myWidget.rendered = function () {
$('#my-widget').html('<script src="src-here.js"></script');
}
And then the actual template:
<template name="myWidget">
<div id="my-widget">Loading...</div>
</template>
Finally, wherever you want the widget to appear in your html, just insert {{>myWidget}}
Use jQuery.getScript(): http://api.jquery.com/jquery.getscript/
In your case:
$.getScript( "http://svenskfotboll.se/widget.aspx?scr=table&ftid=39662&b1=%23006bb7&f1=%23ffffff&b2=%23bfd4f3&f2=%23000000&b3=%23ffffff&f3=%23000000&b4=%23ececec&bo=%23ffffff&s=1" );
You can also specify callback for success or failure (please see documentation linked above).
My theme has a custom css code block where I allow the site owner to add any custom css they need directly to the head section of the theme. This inserts whatever they've placed in this block into the wordpress database as a custom option insert.
I then retrieve this content into header.php and output it between an inline style tag like so...
<style type="text/css">
.test h1 {}
.testcss2, .somecss {}
</style>
This works perfectly fine, however, I would like to clean up and minify the markup when its written to the database. I suppose a regex is needed to do this? If so, what would that be?
The result I'm looking for, when the code is written into the page's markup is...
<style type="text/css">.test h1{}.testcss2,.somecss{}</style>
I'd also like to reverse the minified markup when its presented back to the user to edit in my theme options. In that view, I just want to reformat the minified css code so that each directive is back on its own line.
It depends what you want achieve by doing this. I agree with #thomasfedb that you will likely messup the style of most peoples CSS by doing this transformation and will likely cause more trouble than its worth.
It's my suggestion that you keep the data exactly as the user entered it, and then 'minify' it when you render it to the page.
This will not save you and storage in your database, and it will increase your CPU usage per page render, but it will save you the bandwidth of all the extra new-line characters.
Another option, presuming database storage is not much of a concern, is to store the data twice, once where the user edits, and once minified. Then simply minify and copy the user-editable field into the minified field whenever the user makes any changes.
I don't see any real reason to do this, a few newline charactors in a webpage isn't realy going to cost you very much page-weight.
Therefore my solution would be: don't.
Also, even if you reverse the minification, you might 'mess with the style' of some people, who like different css layouts.
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.