Web Page Performance - CSS and JavaScript in Separate Files? [duplicate] - javascript

This question already has answers here:
Comparison of loading CSS inline, embedded and from external files
(10 answers)
Closed 6 years ago.
Looking at the Google HTML/CSS Style Guide, I don't see anything specific. It seems like putting the CSS and JavaScript in the HTML file would perform better than loading external files.
For production Websites, should I include everything in 1 file, or no?

Usually when you develop, you split up your code in your project tree. So you have a large amount of js, and maybe css / sass / less files.. which represents smaller components for your project.
When you are going to launch your project to production, you usually have build program which concatenates all the files into a single bundle and this bundle is also minified, for faster loading like bootstrap.min.js for a example.
Take a look (google) for some production ready packer like:
brunch
webpack

It depends on your preference . but in most cases you would like to write code in separate files because when you work on big projects it can start to get confusing when you have css ,js and html in the same file .
plus the difference it will make is minimal to none.

Related

Javascript compression options [duplicate]

This question already has answers here:
What is the best method to reduce the size of my Javascript and CSS files?
(18 answers)
Closed 7 years ago.
Good day everyone.
I have read up quite extensively on Javascript Compression. I currently host 23 javascript files using IIS GZip compression method. I just want to know is there a better solution to compress the javascript files. My one file is over 7MB this is causing quite a problem at the moment. Is it Possible to Use MVC Type Bundles To render the javascript? I am using Asp.Net
Thank you in advance.
Here's what you must do
1) Concatenate javacript files to minimize the overhead related to file querying (this overhead will disappear with HTTP2 but we're not quite here. Today your page is probably more slowed by the number of files than by their combined size. There are many ways to concatenate files but it should be automated so that you don't have to do it manually every time you change the source files. If you're not familiar with powershell and the likes, dive into build solutions.
2) Don't compress the JS file(s), let the browser and the server negotiate the compression themselves. Any decent server gzip the JS files it serves.
3) Minify the concatenated file. Here again there are several solutions. Uglify.js is both fast and efficient. The minification is a process which consists in removing any useless (for the browser) part of your code (comments, spaces, etc.) and renaming some variables in order to make the code lighter. You'll configure the minification to also produce a source map file which will let you debug in the browser (not quite as easily than with an unminified file but much better than without a map).

How to minify javascript file generated by liquid template generator

I'm trying to optimize the shopify website and GoogleSpeed Insights recommends me to minify css and js files.
The recommended files are all generated by liquid template generator, so I can't use the popular minify tools available.
If anyone have experience in this issue, please advise me.
Thank you.
If you try to minify such file, you will see an error because of Liquid templating code. Here is a trick which can help you to minify JavaScript files containing Liquid templating code. But this involves little manual labor.
Replace all Liquid templating code with some random unique string. Remember all the replacements. You can use a file diff app to find the difference of a .js.liquid file and the generated .js file so that it will be easy to find where you need to replace. Now you can minify this modified file without any error using any JavaScript minification tool. After the minification is over, you can replace the random unique strings with their corresponding replacements.
I am optimizing a theme for a good PageSpeed Insights score. This trick helped me to minify, combine and compress many .js.liquid files.
I haven't tested this with pagespeed, but it looks like it works html level.
In Business Catalyst I am able to do the following with liquid
{% assign allthedata = {{myData|json}} -%}
{{allthedata | remove: ' '}}
I don't know if this would affect pagespeed, but it is simple enough to try it
This removes all the spaces I have in myData.json which is generated dynamically.
https://prepros.io/
I've been using this app for like 7 months, and I absolutely love it. It can convert and compress your files.
I'm using SASS as my CSS preprocessor, and this app helps me to keep my code clean, here's my way how I make 10 files into one file and compress it:
Create 10 .sass files
Create one more .sass file where you will import all these files into one, I call it main.sass
Use prepros to import all the files into one and then convert it to main.css
So, for debugging I leave the main.css and create another css files called main-dist.css
Use prepros to compress main.css to main-dist.css.
And here you go, you got 2 different css files, one compressed and one not. You can use main.css when creating the website, for debugging purposes and later, when you're done and your website works perfectly, you can use main-dist.css and have your styles compressed.
Oh, btw I don't know how to work with Grunt or Gulp, and I love this app because of it's simplicity
P.S I'm using trial version (it's free) and planning to buy this app as soon as I get some work to do for clients.

One big javascript file or multiple smaller files? [duplicate]

This question already has answers here:
Put javascript in one .js file or break it out into multiple .js files?
(11 answers)
Should I copy all my JavaScript sources into one single file?
(3 answers)
Closed 9 years ago.
Ok, so I have a reasonable size project, where I'm using jquery backbone and a couple of other javascript libraries. I was wondering if I should have one file for my javascript libraries and another for my custom code. Or a bunch of separate javascript files.
It is generally a good idea to have fewer HTTP requests. So you should reduce the number of files as much as is reasonable.
My personal preference is to have three "groups" of JavaScript files:
Core file. Contains functions that are used almost everywhere and other useful page initialisation things.
Module files. Contains code that is used in several places, but not everywhere. Can be dropped in to provide additional functionality. For instance, if you have a script to handle date inputs, you could include it as a module file and add it to pages that have date inputs.
Page-specific files. These files contain code that is only used in one place. The only reason they're added as separate files than as part of the page itself is for cache reasons.
One big file. You should minify the code when it goes to production and compress it if its large. You want to make as few requests to the server as possible to improve page performance
It's best to separate it out, but not get overzealous. That way you can reuse your library code later. Also, everyone likes working with separate files more because it keeps things more organized.
That said, it's also best to give the user one compressed file so that everything can be cached easily, and this also reduces the number of page requests. Rails 3 does this automatically in the asset pipeline, for example. You can write a script to run your favorite compressor. But you shouldn't sacrifice code readability for this -- you can have your cake and eat it too!
One big file or two files: one small and one big.
To be clear, during the development it's good have separate files – maybe using something like requireJS. But when you deploy it, it's good compress everything in one file, in order to reduce the HTTP latency and requests.
I mentioned two files. In some cases, it could be good having one small file, that takes care of the "bootstrap" operations, meanwhile the "big file" – especially if it's really big – is downloaded.
This is useful especially for the first access, because users doesn't have your files cached yet.
As a rule, I go with as few as possible simply to reduce the number of requests made to the server.
As suggested it is nice to work with smaller files, but for production code, your build process should include optimization. Part of that optimization should be minimizing the file sizes and network traffic optimzation, by combining into a single js file to reduce calls made by the browser.
Depends on the size of your application. But typically always better to group your javascript files appropriately for better maintainability and re-usability.
You could use a JS module loader like RequireJS to load your JavaScript. At least the files will be organized. You can enhance server performance by making sure these files can be cached on the user's browsers so that they only download them once.

How to import/include source files in JavaScript? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to include js file in another js file?
Suppose I have a few JavaScript source files: a.js, a1.js, and a2.js. Functions of a.js invoke functions from a1.js and a2.js.
Now I have to declare all these files in my HTML page. I would like to declare only a.js in the HTML and "import/include" a1.js, and a2.js in the a.js source file.
Does it make sense? Can I do that in JavaScript?
You can't specify imports in vanilla javascript.
So your solutions (excluding heavy server side frameworks) are :
simply do the imports
concatenate your js files (and minify them in the same move, for exemple using the closure compiler)
use a module itool like require.js
As long as you're not experienced, and if your number of files is low (less than 15), I recommend to simply choose the first or second solution. Using a module loader may have side effects you don't want to debug when beginning to learn javascript.
You can import:
<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>
if you want to do it directly from the JS, you may use Ajax, this post explains how to:
include-javascript-file-inside-javascript-file
You can bundle JavaScript (and also CSS) files together using certain tools to reduce the number of files you must include. This also increases page load performance.
These tools combine multiple JavaScript files into a single JavaScript file (optionally minifying the files as well), and multiple CSS files into a single CSS file. This results in fewer HTTP connections from the browser to the server, so there are fewer things to be fetched serially.
ASP.Net MVC 4 has built-in support for this:
http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/
There are a number of solutions for other environments as well such as Juicer.
If you cannot bundle all resources (perhaps some come from a CDN while others are served locally), you can use a load manager such as require.js.

how to create makefile in javascript? [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make File for Javascript
Actually i am writing some javascript for testing purpose.
i want to use multiple javascripts in which functions are defined.
Is there any way to achieve this ?
I think Make file is the way.
But i don't know that also.
I want to generate make file.
Can any body suggest me how is to be done?
Creating makefile is an interesting solution, but you can also use require.js library to set the sequense of loaded scripts.
If you looking to combine multiple scripts as one. You can the use build script Boilerplate.
Why to use it? Its not only about scripts.
Combines and minifies javascript (via yui compressor)
Inlines stylesheets specified using #import in your CSS
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng)
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)
If you have several separate files and you want to append them all it into one file before, f.i. using it one your website, then any script or tool is good: Make, Rake, Cake, or your own, in your language of choice. If it goes to the web, it should be also compressed. Now how to do it, is beyond scope of this question, there are loads of articles on the web about all those topics. You are encouraged to come back when (if) you hit some more detailed problem.

Categories