One SEO advice we got was to move all javascript to external files, so the code could be removed from the text. For fixed scripts this is not a problem, but some scripts need to be generated as they depend on some ClientId that is generated by asp.net.
Can I use the ScriptManager (from asp.net Ajax or from Telerik) to send this script to the browser or do I need to write my own component for that?
I found only ways to combine fixed files and/or embedded resources (also fixed).
How about registering the ClientIDs in an inline Javascript array/hash, and have your external JS file iterate through that?
Spiderbots do not read JavaScript blocks. This advice is plain wrong.
Some javascript can break W3C validators (and possibly cause issues with some spiderbots)
You can reduce this by placing this code around your javascript:
< !-- no script
... your javascript code and functions ...
// -->
Note: remove the space between "<" and "!" as it seems to comment out the example here :-)
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 am using Kentico and have noticed a weird css issue. After mocking my pages up in Dreamweaver I then create the page in Kentico, however I have noticed that some elements in Kentico are slightly misaligned.
I have tried copying the source from Kentico into Dreamweaver to see if I can fix the issue but Kentico still renders the content incorrectly.
Are you using Dreamweaver in design or split mode? if yes, turn it off and use code mode only.
I guess you have to compare structure of your HTML and Kentico output HTML. Kentico add a form tag by default which may cause structural issue with css. If you can provide both html, I can help
On Kentico (up to version 11) when you use portal engine or ASPX templates you have this shortcoming. Kentico adds excessive HTML markup on the controls it creates on order to provide hooks that will help the engine to perform actions. For example, Bizforms add multiple divs/spans around normal input tags. So, you have to adapt the CSS you have created to match the tags used by Kentico.
What is your template type:
ASPX page: You can copy your entire HTML code from Dreamweaver into your aspx page template and then work on your page.
Portal Page: You need to understand the structure and cannot replace entire HTML Code from Dreamweaver. You have to seperate your HTML code to insert DropZone for web parts and widgets.
Good Luck!
You will have to make some adaptation always from raw HTML and kentico. In your case you are using aspx model which makes it more harder as server level changes are not 100% compatible with raw HTML or client side code. If possible use portal engine with transformation which will be more like to like of raw HTML.
You must create a directory in CSS/Stylesheet
If you're using the CSS section of the Admin interface, check to see if you have any & signs at the beginning of any tags. Kentico doesn't seem to support this so might be breaking any classes that appear after it.
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.
Im using jquery UI's tabs with ajax.
I was wondering if the files that the ajax calls are gonna retrieve are supposed to be formatted starting with <html> or just the minimal html possible cause its gonna be injected into an already formatted valid xhtml file.... I hope Im making myself clear.
Thanks in advance.
If you're going to inject what you receive from the server directly into the DOM, you'll want an HTML snippet. Something like
<div>This is something <strong>injected</strong></div>
is preferred over
<html><body><div>This is something <strong>injected</strong></div></body></html>
Minimal html. All the examples on the jquery UI tabs page use HTML shards.
You should be able to spit out the HTML exactly as you would want it dropped in to place (i.e. enclosing tags are not necessary).
In a html page we use the head tag to add reference to our external .js files .. we can also include script tags in the body .. But how do we include our external .js file in a web user control?
After little googling I got this. It works but is this the only way?
ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "MyUniquekey", #"<script src=""myJsFile.js"" type=""text/javascript""></script>", false);
-- Zuhaib
You can also use
Page.ClientScript.RegisterClientScriptInclude("key", "path/to/script.js");
That's the way I always do it anyway
Yes this works too .. but why does all
the script gets dumped in the body and
not in the head??
There's a potential workaround for that here
That's kind of incorrect .. about needing the Javascript in the body.
A Javascript function would sit in the head unexecuted and not at all affected by the fact that elements are still to load.
Often there is a single call at the end of a page to start execution of scripts at the top.
(Other methods available)
The only reason that script gets dumped in the body, is because MS doesn't seem to give 2 hoots about JavaScript.
Shame, because forcing us all to use .NET proper, just makes the world full of sluggish pages that needlessly run back and forth to servers for the tiniest requirmenet.