I'm trying to minimize my site and reduce the amount of scripts if possible, and I realize I have these 2 scripts in the head of my html:

< script src="jquery.js"></script>
< script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

 

Do I need both? (I do have the jquery.js file on my site.)

 

Or, should I just be getting jquery from Google or Microsoft instead (and then just have one script)?

 

ie: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
or

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

 

 

 

I always use a local copy of the min version as I can set the cache. The two in your head is just loading 2 copies of jQuery, you only need one. Using an external version is a cross site request so would be slower.

Edited December 23, 20169 yr by BrowserBugs

I always use a local copy of the min version as I can set the cache. The two in your head is just loading 2 copies of jQuery, you only need one. Using an external version is a cross site request so would be slower.

 

OK. Thanks. So, I'll just use the first top one then (the local one) which happens to be minified actually, but not renamed.

The second one I'll remove. Thank you.

I always use a local copy of the min version as I can set the cache. The two in your head is just loading 2 copies of jQuery, you only need one. Using an external version is a cross site request so would be slower.

 

Static assets such as scripts, images and so on can actually be served faster via CDN than keeping them local as users will download from a service that is geographically closer to them than the server where your site is hosted due to reduced latency. e.g. your site is hosted in London and you get a visitor from San Fransisco, the latency on that just to establish the TCP handshake (Before any meaningful data is transferred) is over 100ms.

 

It will also aid performance if your site receives a sudden spike in traffic, your server will cope better.

 

 

You generally want a single script that you bundle up and serve to your visitors to reduce the number of HTTP requests; however you can improve performance further by splitting up assets by page/route whereby you'd serve up a common script, then serve what is necessary for a given page and even load some scripts asynchronously based on a user action.

Edited December 24, 20169 yr by rbrtsmith

 

Static assets such as scripts, images and so on can actually be served faster via CDN than keeping them local as users will download from a service that is geographically closer to them than the server where your site is hosted due to reduced latency. e.g. your site is hosted in London and you get a visitor from San Fransisco, the latency on that just to establish the TCP handshake (Before any meaningful data is transferred) is over 100ms.

 

It will also aid performance if your site receives a sudden spike in traffic, your server will cope better.

 

 

You generally want a single script that you bundle up and serve to your visitors to reduce the number of HTTP requests; however you can improve performance further by splitting up assets by page/route whereby you'd serve up a common script, then serve what is necessary for a given page and even load some scripts asynchronously based on a user action.

 

No doubt mate, but it's often hard enough to get a client to buy decent hosting let alone splashing out on bells and whistles they can't 'see', knowing your job position in a company of that size you'll get all the toys

 

Great point about splitting, pointless loading a single js file with a massive validation section only used on one page on the site, better to load the extra file when required, especially at a certain step point in the process, e.g. when required.

 

That said I'm waffling on like I know js, lol, my pet hate

Thank you both! And Merry Christmas too!!

 

I noticed that the CDN route is recommended by w3schools.

 

I used to have the 2 scripts as in the top post.

 

For some reason years ago I renamed the full local jquery-3.1.1.min.js (equivalent) to just jquery.js and didn't think much about it.

Then just yesterday, I noticed that having just the one script in the head < script src="jquery.js"></script>, one of my js things wasn't working in Chrome, although the other browsers seemed OK, even after flushing their caches.

 

With the full filename, it worked OK in Chrome.

 

I'll keep the full filename now, but I wasn't sure if Chrome needed the full filename to work properly? I hadn't assumed that the filename was crucial to the caching, as opposed to the js within the file? I'm still trying to get my head around what I thought was a very simple thing. (The filename is or isn't crucial to the caching of the contents within the file.)

 

Have a nice Christmas or holiday.

Edited December 25, 20169 yr by Grant Barker

Thank you both! And Merry Christmas too!!

 

I noticed that the CDN route is recommended by w3schools.

 

I used to have the 2 scripts as in the top post.

 

For some reason years ago I renamed the full local jquery-3.1.1.min.js (equivalent) to just jquery.js and didn't think much about it.

Then just yesterday, I noticed that having just the one script in the head < script src="jquery.js"></script>, one of my js things wasn't working in Chrome, although the other browsers seemed OK, even after flushing their caches.

 

With the full filename, it worked OK in Chrome.

 

I'll keep the full filename now, but I wasn't sure if Chrome needed the full filename to work properly? I hadn't assumed that the filename was crucial to the caching, as opposed to the js within the file? I'm still trying to get my head around what I thought was a very simple thing. (The filename is or isn't crucial to the caching of the contents within the file.)

 

Have a nice Christmas or holiday.

 

 

The filename does not matter at all, it is just a reference to the file to be loaded. It needs to be pulled in before any other scripts that are dependant on it, but should still go right before your closing <html /> tag, not in the head. Whether or not to use a CDN is subjective, it is not always faster it depends on a number of factors.

I would not use W3Schools as a reference point, it has many instances of incorrect information. Use MDN if you want to reference specs.

 

 

The filename does not matter at all, it is just a reference to the file to be loaded. It needs to be pulled in before any other scripts that are dependant on it, but should still go right before your closing <html /> tag, not in the head. Whether or not to use a CDN is subjective, it is not always faster it depends on a number of factors.

I would not use W3Schools as a reference point, it has many instances of incorrect information. Use MDN if you want to reference specs.

 

OK. Thanks a lot. I'll use MDN from now on.

I also didn't realize that these js scripts should go before the closing <html /> tag, either.

Thank you.

Edited December 25, 20169 yr by Grant Barker

Placing my <script src="jquery-3.1.1.min.js"></script> before the closing <html /> tag broke the smooth scroll on my scroll to top of page function, so I've put it in the head again for now, until I can play with it.

 

I used to score in the 90's at PageSpeed Insights, now I'm scoring 72. (Cough!.. Loser.) So, in the last 6 months I've added a little too much I guess.

The test never told me to optimize my images before, either, if I remember correctly.

It has always advised me to sort out the number of CSS and other scripts, but still scored me over 90.

 

I suspect I'm paying the price recently for adding and using things like addthis, the scroll function, disqus, and even the text crawler (which would make professionals cringe, but I want to keep it).

 

Other social media buttons in the past have been removed before, to help score higher, but I would like to have some. Maybe there are better options out there.

Edited December 26, 20169 yr by Grant Barker

For speed it's all about delivering content prior to non required resources, lightboxes, toggle menu etc require interaction to function thus not required on initial load. If your js is broken then either their scripts are above the jquery file or they required a more recent version to function. In your op you had 2 jquery files loading, 3.1.0.min.js and jquery.js, not sure which version the jquery.js is? Also they should sit before the closing </body>.

 

I use javascript to load jquery and below the fold css (e.g. css not required to structure the page). Since i'm no js expert I used someone elses method which works quite well. Most my sites score 100%, but 95%+ if I have to use third party js where the cache is set to just 30 mins.

<script type="text/javascript">
function loadjscssfile(filename, filetype){ 
	if(filetype=="js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); }
	if(filetype=="css"){ var fileref=document.createElement('link'); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); }
	if(typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); }
}
loadjscssfile("/css/below-the-fold.css", "css");
loadjscssfile("/js/master.js", "js");
</script>

Images, always compress, tinypng.com and compressor.io are my go-to tools for this, I know both can do both png and jpg but I find each better at one file type. Also don't forget you can set cache via htaccess.

Another thing - you should never override the users native scroll function. It's a big UX no-no.

For speed it's all about delivering content prior to non required resources, lightboxes, toggle menu etc require interaction to function thus not required on initial load. If your js is broken then either their scripts are above the jquery file or they required a more recent version to function. In your op you had 2 jquery files loading, 3.1.0.min.js and jquery.js, not sure which version the jquery.js is? Also they should sit before the closing </body>.

 

I use javascript to load jquery and below the fold css (e.g. css not required to structure the page). Since i'm no js expert I used someone elses method which works quite well. Most my sites score 100%, but 95%+ if I have to use third party js where the cache is set to just 30 mins.

<script type="text/javascript">
function loadjscssfile(filename, filetype){ 
	if(filetype=="js"){ var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", filename); }
	if(filetype=="css"){ var fileref=document.createElement('link'); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); }
	if(typeof fileref!="undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); }
}
loadjscssfile("/css/below-the-fold.css", "css");
loadjscssfile("/js/master.js", "js");
</script>

Images, always compress, tinypng.com and compressor.io are my go-to tools for this, I know both can do both png and jpg but I find each better at one file type. Also don't forget you can set cache via htaccess.

 

Thanks BrowserBugs for all of your advice there. I'll see what I can improve..

Another thing - you should never override the users native scroll function. It's a big UX no-no.

 

I don't think I have, yet, have I?

Here is my htaccess file which I setup a few years ago (and copied and adjusted for this site):

 

 

And these I can add to the htaccess, I believe:

 

​

How do we type that to add them to htaccess? I haven't added an expiry rule for urls before. Or do we just forget the url and add the name.js to the list somehow.

 

​As for the minutes or hours in brackets in the above caching image: Are they default or recommended?

(If they are default, I'm curious what decides that rule, and if they are recommended, it doesn't seem long enough a period.)

 

(I'm happy to cache them for weeks or months if they are unlikely to frequently change.)

 

Also, this htaccess is rather old. If you can see any obvious unnecessary stuff on it, please point it out if you'd be so kind, and I'll remove it or change it as you suggest.

 

Thanks for your time.

 

I don't think you can do anything about those issues as the cache is set by the server delivering the resource. Generally when I develop I make sure the page hits 100/100 before I include third party bits. So for most of my clients they get 99/100 with only one issue...

https://www.google-analytics.com/analytics.js (2 hours)

So in your case each of those third party scripts will niggle away at the overall score.

 

Your cache in the htaccess looks ok, just depends how often things change.

Thanks BrowserBugs. It's a lot of fun for me doing all of this in the holidays. I will keep trying different things and try to prioritize how things load, too.

 

To be honest, I always assumed that image file size was less of a big deal nowadays, with the increase in internet speeds, especially compared to 10 years ago, for example. I guess that is not the case, though.

Edited December 27, 20169 yr by Grant Barker

Thanks BrowserBugs. It's a lot of fun for me doing all of this in the holidays. I will keep trying different things and try to prioritize how things load, too.

 

To be honest, I always assumed that image file size was less of a big deal nowadays, with the increase in internet speeds, especially compared to 10 years ago, for example. I guess that is not the case, though.

 

With responsive design we always have to be considerate as the content is served for both mobile and desktop. Secondly we should always think of efficiency, just as we make sure our code is lean we need to also make sure our images are optimal and not eat up peoples mobile data. It all helps to give the overall project a better finish.

The main reason you see CDN versions of jQuery kicking around is that a lot of them are already cached on a user's device. I'm not sure if this is still the case but jQuery 2.2.4 from CDNJS, CloudFlare and code.jquery.com used to be everywhere.

 

The method Robert mentioned of splitting out files helps to reduce file size and sending data down the wire, but isn't great for caching. If every file has a unique filename then it's cached as a separate file, and if the file has the same name it makes it hard to invalidate the previous version of the cache. The other difficult thing is that unless you're using a JS stack, then it's hard to have the same level of flexibility in other languages. I'm sure there are ways of doing it that I haven't thought of, but I couldn't get RequireJS to work in PHP without a lot of manual work all the time. I'd be curious to know if it's possible, though.

The main reason you see CDN versions of jQuery kicking around is that a lot of them are already cached on a user's device. I'm not sure if this is still the case but jQuery 2.2.4 from CDNJS, CloudFlare and code.jquery.com used to be everywhere.

 

The method Robert mentioned of splitting out files helps to reduce file size and sending data down the wire, but isn't great for caching. If every file has a unique filename then it's cached as a separate file, and if the file has the same name it makes it hard to invalidate the previous version of the cache. The other difficult thing is that unless you're using a JS stack, then it's hard to have the same level of flexibility in other languages. I'm sure there are ways of doing it that I haven't thought of, but I couldn't get RequireJS to work in PHP without a lot of manual work all the time. I'd be curious to know if it's possible, though.

 

Thanks Jack.

I spent a few hours yesterday trying a few things, and then went back to mostly how I had it before.

 

At that time I noticed for me personally:

Removing font awesome gained me 2 points.

Using a CDN instead of hosting the jquery lost me 1 point.

Compressing all of my front page images (just once with tinypng gained me 10 points.)

So, I got to 80 at that time.

I then reversed everything and went back to how it was. My eyes are not so great, so I felt more confident keeping the original images.

If I was doing this for a client, I'd stick to the rules. I also noticed that most of the busy sites I visit regularly, score pretty badly.

 

It's fun to try things. For example, tinkering today helped me realize that we don't need this <div id="fb-root"></div> to go with the Facebook js anymore. Cheers.