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/
Related
I'm using a third party JavaScript library in a website with 20+ HTML pages each with its own JavaScript and CSS file. But the problem is if a new version is available to the library then, I have to go through all the HTML files to edit the version number. How to maintain the same version of the library in all the webpages?
If you're using any kind of server-side processing before serving the pages, you can have a separate file that contains just the (shared) script tags that need to be loaded and include that file with each of the HTML pages.
If not, editors like VS Code (Ctrl + Shift + H) can do Find/Replace across all files in a project.
Finally, you could omit the version number from the script file names (you'll just have to be aware of how the caching works - people may not get the new file right away).
If you are not using any kind of server-side processing, you could create your own javascript file loader that comes from your own file and loads the external javascript. So you only have to change the external part in one file that gets included in all your other html pages.
Something like this: JavaScript - function to load external JS files is needed
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'm using a CSS StyleManager that let's me combine & render all my CSS files into one string ON THE PAGE. So I have no more external CSS files.
I wanna do the same thing with my javascript libraries. Is there a smart way how to achieve this without reading the files within page_load and adding the text to the page myself?
Background info: I wanna save the website as one single file for a distribution.
Thanks!
For performance you should use external (css & javascript files) so that they can be cached by the browser & your page will load faster.
Also, to reduce http requests you can combine your external css & javascript file in one using Bundling and Minification.
I work on front end development and am looking to find a solution for working with javaScript between (non compressed and multiple files) development environment and (compressed and combined files) live environment.
I have found a solution with CSS which means that I only need to include one global CSS file with imports, then we combine and compress those imports when deploying to a live environment. This means that we don't have to toggle adding references in to the head for dev and live.
Any ideas on a similar solution for JavaScipt?
Thanks
Dave
If you are using jQuery it's really easy to include external Javascript files from within Javascript which is basically what you described you did with CSS.
Read up on jQuery getScript()
You can use Charles Web debugging proxy. Or smth similar.
Charles allows to give any local file instead of any url. So you can give your browser your local JS file instead of live JS. Thus you will be able to test JS or CSS changes without showing them to your users.
I use ESC to merge and compress all the independant JavaScripts to a central one, and have it run as a 'post build' task.
For Visual Studio I wrote a small console application I wrote (like ESC as someone mentioned) that is used as a post-build event. It's simple but automates the job you're describing by:
Taking a list of filenames as its arguments
Compressing each one using Crockford's JS compressor
Combining the output into one .js file
Then in the site project, the file is loaded from a resource, and a toggle is performed in a class
List<string> files = new List<string>();
#if DEBUG
files.Add("MyNamespace.Javascript.script1.js");
files.Add("MyNamespace.Javascript.script2.js");
#else
files.Add("MyNamespace.Javascript.Live.js"); // single file
#endif
// ScriptManager.Register them
You could also enable GZIP compression on the JS files for even faster load times. If you're not using the Microsoft dev environment then I'll delete this.
Thanks for all your responses. I have come up with a solution which uses some of your ideas.
i have a global js file which has a list of files to include and when run during dev just writes the script links to the page.
Then included in the deployment process is a script which parses the global js file, looks up which files it is linking together, combines and compresses them in to one global js file.
This means that I don't need any server side code during the process which makes things easier to maintain across a team of freelance front end devs.
i'll post the final bunch of code when it's ready on my blog.
I don't know how your dev environment looks like but you could put all the script tags into one file for development and have another for production that has the script tag for your one single file. For example: development_js.extension and production_js.extension.
Then it's just a matter of either using server-side include or some build tool to merge the correct file into your HTML file.
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.