I have been working on performance lately, and recently ran a YSlow test on my company's asp.net website. I have already set up an IIS7 rule to set expiration dates to 30 days. After researching, I think Yahoo suggests you add tags like this to your head section:
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/get/get-min.js" ></script>
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/imageloader/imageloader-min.js">
</script>
<script src="http://yui.yahooapis.com/2.9.0/build/cookie/cookie-min.js"></script>
If you see this link, Yahoo's recommendations on how to improve SEO, it seems as if yahoo suggests putting these .js files in your header.
Are these javascript files from yahoo something you should include in your head section? Or are they just unnecessary external .js files that will slow your site down? I just don't understand yahoo's logic behind this. Any guidance to clear this up would be greatly appreciated!
Those files are YUI version 2 (deprecated) YUI3 is the latest, if your website is not using any of these components then you're ok to remove them from HEAD section. If your website is indeed using those YUI2 files then you can get the combined version of all the links above in order to have only 1 script tag and move it to the bottom of your page next to .
Related
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>
I have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
I have a bigcommerce store. I tried to use a 3rd party tracking tool that adds some url parameters to the url for tracking. It works well on all pages, except of home page. For example
http://twigpencils.com/cloth-pencils?param=1 and same version without the param (just delete the param=1) bring me to the same page (with the url param on the relevant page).
However, when trying the same on the home page
http://twigpencils.com/?param=1 creates a 404 error vs regular home page without the param (?param=1) that works just fine.
Any idea how to fix?
Thanks
John
John, I want to help you with this but first, I see 3 issues that could be affecting the behavior you describe:
First, a Broken Meta Tag
At around line 8 of your HTMLHead.html file, your meta tag for keywords is broken:
<meta name="keywords"twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils " />
It's missing the content= attribute. It should look like this:
<meta name="keywords" content="twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils" />
Second, A Major Syntax Error
This error may be breaking several functions on your page.
Uncaught SyntaxError: Unexpected token < Line: 34
At around line 34 in your HTMLHead.html Panel file, a couple lines above where you placed the Google Webmaster Verification meta tag, one of your javascript tags is incomplete:
<script type="text/javascript" async defer
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
The problem is at the end of this line <script type="text/javascript" async defer, as its missing a closing >. The code should at least look like this:
<script type="text/javascript" async defer>
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
However, considering it has async defer, it leads me to believe that it was supposed to load an external script, and either someone deleted the srcattribute and also accidentally deleted the >, or some improper BC commenting or something of that nature is breaking the tag. I can help further if I saw the actual code as it is in the BC Design backend.
Third, Non-WWW or WWW
I notice that when I navigate to http://twigpencils.com/?param=1, it takes me to http://www.twigpencils.com/, which would be fine, except that when I navigate to http://twigpencils.com/cloth-pencils?param=1 it takes me to http://twigpencils.com/cloth-pencils?param=1.
This is a fairly major problem, but is fairly easy to solve.
Either you need to forward from WWW to non-WWW on your domain/hosting backend, and/or do the same on your Google Webmaster Panel, or do both.
Before we try to figure out the main problem you mentioned, you should resolve these 3 issues first as they could be affecting the behavior you describe, but are at the very least breaking many things on your site.
Let me know if this helps and if you have nay other questions.
This has to do with a broken .htaccess file, causing PHP to not correctly parse the parameters. Unfortunatly bigcommerce does not allow you to edit the .htaccess file directly.
I'd recommend checking out shopify or another platform. I've been trying to get support from bigcommerce on this for weeks, to no avail. Their support team is not very helpful.
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'm trying to make my meteor app visible to crawlers.
I've added the Spiderable package and installed Phantom.js.
When I to go localhost:3000/?_escaped_fragment_=, it's blank.
When I view the source, it's almost empty, and it ends right before the <script> tag that loads the Google Maps API:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/eecc60f7c55db2915697d4beb05274f355ad19e4.css">
<title></title>
<!-- Google Maps -->
</head></html>
I haven't encountered any issues with this before, but it got me thinking that maybe I shouldn't be including custom <scrpit> (or <link>) tags in the app's <head>. If this is true - what is the correct way to load external assets? If it's not related to the issue, I'd appreciate any advice.
Thanks!
In relation to your first question, I am not 100% sure about this being the cause of your problem, but to answer the second, you shouldn't be including scripts/stylesheets in the head of your Meteor application.
Meteor combines all of the client-side js, css, and html for your app, and sends it all together to the client. This means you can just include your stylesheet and scripts in your app's client folder. I would try putting your stylesheets/scripts in the correct place and removing the links in your head and see if that solves your issue.
You can find more detailed descriptions of meteor here.