I'm working on optimising a site and one of the biggest issues it has is that there are far too many resource requests.
JavaScript and CSS bundling and minification go a long way to improve this but they're somewhat at odds with transparent naming.
For example, if I have 3 widgets on my page that all have their own JS and CSS, I could bundle all the JS into one file and all the css into another file. this would reduce the round-trips from 6 to 2. However, the resulting bundle would be wasteful if another page only used one of those 3 widgets.
What I'd like to do is bundle all the JS AND CSS for a particular widget into a single file. The browser would then have to unpack this and make it available to the page. A logical extension to this would be to create a package of packages so that all the resource files for all the widgets were downloaded in a single file.
The only way I can think of doing this is with a web service and then writing the output directly to the document with JavaScript. This feels wrong as I don't think the browser would be cache this appropriately.
Any thoughts?
TL; DR
Has anyone come up with a way of packaging CSS and JS files into a single file to reduce round-trips to the server?
As somethinghere said, it is not a good idea to package both in a single file and send it to the client. A CSS cannot add JavaScript, but a JavaScript can be used to include CSS to the body. So the only way is to add the CSS as a single string variable and making document.createElement and appending it to the head.
If you are concerned about the HTTP requests, you can either embed the CSS fully inside the <head> or you can make use of Data URI Scheme. The downside of Data URI Scheme is that, the browsers IE 8 and below have less or no support.
Solution: It is a must and best to include three requests at a minimum, for:
The page itself
CSS Stylesheet
JavaScript Scripts
Other Solutions include adding the CSS and JavaScript contents directly inside the <head> or using the Data URI scheme.
Not sure but one hack is to create a html file and add your js and css in it and import that file in your original html file
something like this
<head>
<link rel="import" href="library.html">
</head>
and your library will look like this
<html><script>YOUR JS code</script><style>YOUR STYLES</style></html>
Related
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks
Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith
With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.
I want to use a CDN to load in bootstrap and jquery in an attempt to improve site performance. With performance in mind, which of the following is the best way of doing this:
1. Add in a script tag directly into a html or layout file
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
2. Dynamically load the content into the middle of the asset pipeline as discussed by Daniel Kehoe here under 'Dynamic Loading'.
As I assume that what ever the link or different repository used for any file other than our code base, will reflect some issue of availability.
Here bootstrap js file will always depends on the speed of netdna
domain server. Server down or failure will affect our performance as
well as reliablity of our system. Such thing will not happen frequently but may be chance.
I will suggest as of my experience, the best way is to keep the same file on our server in compressed form to avoid such future issues and updated that file at regular interval as update release.
Reduce DNS Lookups
According to Yahoo! Developer Network Blog, it takes about 20-120
milliseconds for DNS (Domain Name System) to resolve IP address for a
given hostname or domain name and the browser cannot do anything until
the process is properly completed.
Merge Multiple Javascripts Into One
--> Folks you can combine multiple Javascripts like for example:
http://www.example.com/javascript/prototype.js
http://www.example.com/javascript/builder.js
http://www.example.com/javascript/effects.js
http://www.example.com/javascript/dragdrop.js
http://www.example.com/javascript/slider.js
Into a single file by changing the URL to:
http://www.example.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
Compress Javascript / CSS
There are also some web services that allow you to manually compress your Javascripts and CSS files online. Here are few we come to know:
compressor.ebiene (Javascript, CSS)
javascriptcompressor.com (Javascript)
jscompress.com (Javascript)
CleanCSS (CSS)
CSS Optimizer (CSS)
We have an MVC 4 web application with a number of areas.
There is a main layout view that is used by all the pages on the site and it contains all of the CSS includes, the render body tag, then all the JavaScript libraries.
<head>
<link rel="stylesheet" media="screen" href="~/Content/jquery-ui-1.10.3.custom.min.css" />
..
</head
<body>
<div id="main-content">#RenderBody()</div>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
..
</body>
The JavaScript consists of common libraries such as jquery, jqueryui and plug-ins.
There is also a single JavaScript file that contains the custom code for the whole site
Since there is only 1 large JavaScript file with thousands of lines, code routines are initialized by checking for the existence of a particular DOM element to decide if it proceeds.
runExample = function() {
if ($(".Example").length > 0){
// execute code
}
}
..
runExample();
This is of course problematic since there is a great deal of script included for all files, while there is code that applies to all pages, most of the code only applies to certain areas or pages.
Is there a better way to split the JavaScript up for the site? Keep in mind it is the custom code that is conditional, not necessarily the plug ins
Even if there way a way to create a JavaScript file for each area, how
would that be referenced within the main layout?
Is it best to load the JavaScript include files at the end of the include file?
What is the effect of minification on performance and would it benefit the custom code file?
Any advice would be appreciated.
First, use bundling. Give BundleConfig.cs under the App_Start folder in your project a gander. By simply minifying and bundling all your JS together, it's sometimes inconsequential that certain code is not actually being used on the current page (the savings you gain from having one cached JS file that every page uses is sometimes better than loading a new different bit of JS on each page.)
If you need more fine grained control, you can use something like Require.js. You essentially write your JS in modules that depend on other modules to run (all of your plugins, jQuery, etc. become "modules" in this scenario). You'll need to manually minify and combine your JS as much as logically possible, but this will allow you to integrate various scripts together without having to worry about load order and missing dependencies.
As a side note, I would respectfully disagree with Kevin B. If maintainability dictates that your JS has to be in the head, I would say that's a symptom of a larger problem with your code design. The only good reason to add JS in the head is when it's essential that the JS be run before the page is rendered. A good example is Modernizr, which for one adds classes to the html element to allow you to specify different styles and such depending on whether certain features are available in the user's browser or in the case of IE, what version the user is running. Without loading in the head, your style would changed after page load leading to flashes of unstyled content and such. Other than situations like these, all JS should go before the closing body tag, as JS is blocking: the browser will completely stop what it's doing and all rendering of the page, and run the script completely before continuing. Too much of this in the head, and your users stare at a blank page for far too long.
Also all script (and CSS for that matter) should be minified. There's no good reason not to, and the difference in bytes the user has to download is often quite dramatic. Especially in this day and age of mobile-everything and far-too-limited data plans, every byte truly does count.
I'm creating a new dinamic site to test and learn about web optimization...
Site Index
For html,css,js (exept jquery-min that is linked to google server) files I've created a php file that concatenate more files, remove unused spaces, and compress it using Gzip:
compressed css - compressed js
if(extension_loaded('zlib')){ob_start('ob_gzhandler');
/*...php code to read files and remove comments/spaces*/
if(extension_loaded('zlib')){ob_end_flush();}
For main images, I collapsed every image into one
For facebook like button, I replace the iframe after page load using jquery, I'd like to do the same with adbrite advertises but I don't know how..
If I try to replace, or inject the code into html after loading, the page disapper and remain only the adv...
Someone could help?
Can you tell me if I'm doing well (for optimization) and where I can improve
Thanks...
It's a good start, but you shouldn't compress anything dynamically. That is just too costly and will end up to be slower than delivering content uncompressed.
Use gzip/deflate and compress your javascript files with a minifier like YUI, Google's closure compiler or uglifyjs to name a few. Serve those files statical.
A nice tool to automate all of the above processes (and way more..) is Apache ANT.
A nice library to serve any content dynamically over one stream is supplyJS.
You can also try Google Granule: http://code.google.com/p/granule/ (which programmatically compresses and minifies css files and js files on the fly)
Also check your "adbrite advertises" is not working is because the code might be using a Document.write() method, which should be called while the document is being parsed. try loading them asynchronously or deferred.
http://www.sitepoint.com/non-blocking-async-defer/