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.
Related
I am trying to optimize my website and have found one issue of minification with the CSS file:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css
I thought of minifiying the script normally using minification tools but no effect. Tried to minify with the help of plugins but there is nothing changed in the Google insights result.
Hence would like to know hwat could be done to minify such css files.
Download the code from the url and then paste it to a local css file. Call the css file on your code after doing minification. You're done.
There are some options you may choose from:
Very Basic: Use an online minifier like https://cssminifier.com/. You can enter the css content in a text area and minify it or you could it's API and
Extend your bulid pipeline to use a plugin that handles css: gulp-cssmin or gulp-clean-css are examples for gulp.
Int this answer you see an easy usage example on how to compile less to css and then minify it. Using less is of course optional.
Some editors like atom support minifying a css file without any plugins. Other editors like Visual Studio Code may need an extension to support that.
Regarding that you want to minify an external file:
I'd try to minify it when building your project and not on client side since the client would likely have to download your script before minifying, making the minifying useless.
I recommend just downloading it, maybe with bower, and then minifying it.
Im looking for the better way to minify those files but im still noob , currently im working with atom editor so im using a plugin called atom-minify whichs minify my css and js but not the html , after this i have to compress the proyecto to upload to the server or it is not necesary ?
Probably best is to use Gulp/ Grunt for such a thing. Here is how to set it up Grunt.
And then use plugin such as Grunt-minified to do your minifications(not sure if minifications is a real word but... :D).
In any case, its better if you use Grunt/ Gulp in your projects as they help you with:
1) Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website.
2) Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production website.
3) Optimize your images to reduce their file size without affecting quality.
4) Use Sass for CSS authoring because of all the useful abstraction it allows.
I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml
The documentation for tinymce notes that one can compress all the javascript and components (which I assume includes plugins) into a single file. They do note reasons why one might not want to that as well.
Compressing into a static file
It's also possible to simply concatenate the necessary components and some boilerplate code into a single .js file. However you will always have to recreate this file if you want to use other TinyMCE plugins, or you upgrade TinyMCE. You will also probably want to configure your webserver to compress javascript files.
But assuming one actually did want to do it, how does one actually go about it? Build.xml does does not provide an appropriate task it seems. At least when I tried it the plugins did not seem to be included when I loaded tiny_mce.js.
There are some really excellent command line tools for this, but you can also do this easily with just a text editor. The simplest way is to just open each file, copy the contents, and paste the contents into a single JS file ("everything-all-together.js", say). You'll need to make sure you paste the files into the single file in the same order you would've put the script tags into the HTML doc. Once you have all the files all together, you can use tools like JSXMin, YUI Compressor, or Google Closure. There are also some tools online that do this, like http://www.minifyjavascript.com/. You can paste in the uncompressed JS and copy back out the compressed JS. This makes the build process really cumbersome, but if you just need to do this once, that will get you there.
The best way to do this is to do it as a build step for the site. That means when you make changes to the JS files, you rebuild the compressed JS file to include the changes as well. This can be a cumbersome step if you're iterating quickly and changing files over and over again. You don't want to have to rebuild the compressed file with each save. You can solve this by setting up development and production modes of the site. When being loaded in development mode, the JS files aren't grouped together. When all the necessary changes are made, you'd rerun the build step to generate the single compressed JS file. To do the minification from the command line, you'd probably want to use Google Closure: https://developers.google.com/closure/compiler/. If you download the compiler app, you can do the following:
java -jar compiler.jar some-file.js some-other-file.js > compiled.js
That will generate a file called compiled.js that includes the contents of some-file.js and some-other-file.js in a minified format. You can specify as many files to compile as you need to. Actually, I'm selling Closure a bit short to say it's just minified. It's also extremely optimized code. Pretty much every site should be doing this to all of there JS all the time unless they're already doing something better.
I hope I'm getting you (and the tinymce docs) right, but this sounds a lot like combining JavaScript files on the server side. This means taking the contents of all of your JS files, putting them into one file and returning that one to the client.
Why would you do that? Well, this should be obvious, but.. you reduce the number of HTTP requests to your server, which is always a good thing.
How do you do that? There are many solutions out there for all server-side languages and frameworks, I suggest doing a Google search for "[your language] javascript minifier" or something similar.
Hope this helps.
I have around 6-7 javascript files that I want to minify and combine. I have been minifying my javascript here: http://www.minifyjavascript.com/
I am having a little difficulty "combining" my javascript. By combine, am I just copy and pasting all the javascript to one huge js file? If I do this, I will end up with around 1000 lines of code and I have to figure out exact dependencies. Is there an easy program online that can do this for me? Also, do I have to combine scripts such as jquery with my scripts?
Any help would be appreciated.
There is the Closure Compiler from Google, that will combine JS files and minify them to a level of your choosing. It certainly saves a great deal of playing about with cutting & pasting which, as you probably know, can get very complicated.
I just use Notepad++ and the JSMin plugin. I would just copy them in the order in which you include them in your html files.
And no, I would not combine jsquery plugin with it. Keep them separate so you can update independently of them.
Check out PackScript.
http://danderson00.blogspot.com.au/2013/01/packscript-next-generation-build-for-web.html
It does all you need and much more.
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime.
Hope it may help!