Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
Is there a online tool that we can input the HTML source of a page into and will minify the code?
I would do that for aspx files as it is not a good idea to make the webserver gzip them...
Perhaps try HTML Compressor, here's a before and after table showing what it can do (including for Stack Overflow itself):
It features many selections for optimizing your pages up to and including script minimizing (ompressor, Google Closure Compiler, your own compressor) where it would be safe. The default option set is quite conservative, so you can start with that and experiment with enabling more aggressive options.
The project is extremely well documented and supported.
Don't do this. Or rather, if you insist on it, do it after any more significant site optimizations are complete. Chances are very high that the cost/benefit for this effort is negligible, especially if you were planning to manually use online tools to deal with each page.
Use YSlow or Page Speed to determine what you really need to do to optimize your pages. My guess is that reducing bytes of HTML will not be your site's biggest problem. It's much more likely that compression, cache management, image optimization, etc will make a bigger difference to the performance of your site overall. Those tools will show you what the biggest problems are -- if you've dealt with them all and still find that HTML minification makes a significant difference, go for it.
(If you're sure you want to go for it, and you use Apache httpd, you might consider using mod_pagespeed and turning on some of the options to reduce whitespace, etc., but be aware of the risks.)
Here is a short answer to your question: you should minify your HTML, CSS, JS. There is an easy to use tool which is called grunt. It allows you to automate a lot of tasks. Among them JS, CSS, HTML minification, file concatenation and many others.
The answers written here are extremely outdated or even sometimes does not make sense. A lot of things changed from old 2009, so I will try to answer this properly.
Short answer - you should definitely minify HTML. It is trivial today and gives approximately 5% speedup. For longer answer read the whole answer
Back in old days people were manually minifying css/js (by running it through some specific tool to minify it). It was kind of hard to automate the process and definitely required some skills. Knowing that a lot of high level sites even right now are not using gzip (which is trivial), it is understandable that people were reluctant in minifying html.
So why were people minifying js, but not html? When you minify JS, you do the following things:
remove comments
remove blanks (tabs, spaces, newlines)
change long names to short (var isUserLoggedIn to var a)
Which gave a lot of improvement even at old days. But in html you were not able to change long names for short, also there was almost nothing to comment during that time. So the only thing that was left is to remove spaces and newlines. Which gives only small amount of improvement.
One wrong argument written here is that because content is served with gzip, minification does not make sense. This is totally wrong. Yes, it makes sense that gzip decrease the improvement of minification, but why should you gzip comments, whitespaces if you can properly trim them and gzip only important part. It is the same as if you have a folder to archive which has some crap that you will never use and you decide to just zip it instead of cleaning up and zip it.
Another argument why it pointless to do minification is that it is tedious. Maybe this was true in 2009, but new tools appeared after this time. Right now you do not need to manually minify your markup. With things like Grunt it is trivial to install grunt-contrib-htmlmin (relies on HTMLMinifier by #kangax) and to configure it to minify your html. All you need is like 2 hours to learn grunt and to configure everything and then everything is done automatically in less than a second. Sounds that 1 second (which you can even automate to do nothing with grunt-contrib-watch) is not really so bad for approximately 5% of improvement (even with gzip).
One more argument is that CSS and JS are static, and HTML is generated by the server so you can not pre-minify it. This was also true in 2009, but currently more and more sites are looking like a single page app, where the server is thin and the client is doing all the routing, templating and other logic. So the server is only giving you JSON and client renders it. Here you have a lot of html for the page and different templates.
So to finish my thoughts:
google is minifying html.
pageSpeed is asking your to minify html
it is trivial to do
it gives ~5% of improvement
it is not the same as gzip
I wrote a web tool to minify HTML. http://prettydiff.com/?m=minify&html
This tool operates using these rules:
All HTML comments are removed
Runs of white space characters are converted to single space characters
Unnecessary white space characters inside tags are removed
White space characters between two tags where one of these two tags is not a singleton is removed
All content inside a style tag is presumed to be CSS and is minified as such
All content inside a script tag is presumed to be JavaScript, unless provided a different media type, and then minified as such
The CSS and JavaScript minification uses a heavily forked form of JSMin. This fork is extended to support CSS natively and also support SCSS syntax. Automatic semicolon insertion is supported for JavaScript minification, however automatic curly brace insertion is not yet supported.
This worked for me:
http://minify.googlecode.com/git/min/lib/Minify/HTML.php
It's not an already available online tool, but being a simple PHP include it's easy enough you can just run it yourself.
I would not save compressed files though, do this dynamically if you really have to, and it's always a better idea to enable Gzip server compression.
I don't know how involved that is in IIS/.Net, but in PHP it's as trivial as adding one line to the global include file
CodeProject has a published sample project (http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900) to handle some of the following situations...
Combining ScriptResource.axd calls into a single call
Compress all client side scripts based on the browser capability including gzip/deflate
A ScriptMinifier to remove comments, indentations, and line breaks.
An HTML compressor to compress all html markup based on the browser capability including gzip/deflate.
And - most importantly - an HTML Minifier to write complete html into single line and minify it at possible level (under construction).
For Microsoft .NET platform there is a library called the WebMarkupMin, which produces the minification of HTML code.
In addition, there is a module for integration this library into ASP.NET MVC - WebMarkupMin.Mvc.
try http://code.mini-tips.com/html-minifier.html, this is .NET Libary for Html Minifier
HtmlCompressor is a small, fast and very easy to use .NET library that minifies given HTML or XML source by removing extra whitespaces, comments and other unneeded characters without breaking the content structure. As a result pages become smaller in size and load faster. A command-line version of the compressor is also available.
Related
I’m working within a CMS which has a limit on a include field of 32,000 characters (I can include multiple includes on each page/template).
Using BEM our header/navigation element has blown the 32000 limit which has led me to question BEM and html performance.
My research so far points to it doesn’t matter too much, css performance does but I’m uneasy asking for the limit to be increased. (45000 would be sufficient) but this is loaded on every page before any content.
The number of links are hidden away with a mega drop down menu and has evolved mainly to support seo requests but in time some may be dropped into the footer but for the time being I need to have indexable links within the header.
Any advice would be greatly appreciated. I am running minify / gzip compression at a server level.
You should not pay attention to plain text size. Only gziped size matters. And as research shows BEM naming after gzip is almost identical to manually minified classnames.
So you may use BEM without any worries.
General suggestions regarding performance in term of bandwidth and parsing:
Minify all your CSS and JS
Compress your HTML and send files using gzip
Leverage browser caching (set your headers) and consider using CDNs for JS/CSS common libraries
Optimize any images
Use shorten name convention for your BEM classes
Analyse your site using tools as Google Page Speed or similar software and incrementally improve your site
I am deploying a web application and I am able to compress CSS and js in my web application using page speed module in nginx/apache, but couldn't able to remove HTML white space.
Does anyone has done this before, I have seen this implementation in a major website such as LinkedIn Facebook, and Google.
Does removing white space in HTML add performance boost? As per my understanding removing whitespace reduces some extra bytes.
Here is an example of a condensed version of HTML page from google.
Does removing white space in HTML add performance boost?
Unlikely will you benefit much given that gzip is enabled for your site. The more you save during such a stripping phase the less benefit you would gain from gzipping and vice versa.
BTW, mod_pagespeed has the collapsible module doing what you're asking.
If mod_pagespeed doesn't meet your requirements
Multiple options
if you have a static html pages that just need to be returned to the user it's quite easy to do in offline mode
you can also do it at backend level using your framework batteries. I.e. in case you use a python framework this module could be used
django-html is an HTML minifier for Python, with full support for HTML
5. It supports Django, Flask and many other Python web frameworks. It also provides a command line tool, that can be used for static
websites or deployment scripts.
if none of the options above are viable use some 3rd party modules doing it at nginx level
depending on your needs you might also consider services like cloudflare
You can use tools like https://www.textfixer.com/html/compress-html-compression.php
If you use a text editor like atom or vscode you might as well look for a plugin that does that for you.
It doesn't really affect much on the performance, as you said it will reduce some bytes, but as I suspect you're not building something as big as an Amazon site it doesn't quite matter, moreover it will be a pain to read the code.
tl;dr, what's everybody's favorite CSS obfuscation tool?
I'm trying to figure out ways to optimize our CSS delivery to improve our uncompressed initial download. We recently ran the compiled SASS through a minifier, which cut down the unnecessary whitespace, but I realized we've still got some bloat around the names we've given our classes.
I found a few questions on here asking about CSS obfuscation, but all of the answers have been focused around how that's a bad idea because obfuscation would make your CSS harder to read. I really didn't think those were satisfactory answers, partly because that argument applies equally to Javascript (which people minify all the time), but mostly because I've noticed some cool guys who make pretty popular web applications doing exactly this (ostensibly, to the chagrin of everybody here on StackO).
I would've commented on these answers directly, but I haven't proven to the Overflowbots that I can talk, so I was forced to open a new question.
Anyhow, I know there's a way to do what I want, and I know some really big applications are already following this practice. What are some good tools for minifying CSS class and id names for my site? Something that can plug into the Rails pipeline would be great, but not strictly necessary.
If you are familiar with the popular task-runner Gulp.js, you can use the gulp-selectors plugin to automatically minimize your css selector names.
Read more about it here.
https://www.npmjs.com/package/gulp-selectors
I have built a site named http://typingtutorfree.com/. How do I minimize the CSS file size? It's taking so much time to load the site. Is there any other way to make it load faster? Please give me some solution to make my site load fast.
Your CSS takes about 200ms seconds to load, so the problem isn't located there. You have quite a lot of javascript/jquery files though (quick count: 35 of them), and you can minify those to speed up some things. You should also check if you really need all 35 of them, and remove those that you don't need.
You can minify JS files with a lot of tools (if you use dreamweaver or visual studio, there is a minifier included), or on the internet.
Google has a tool for this: http://closure-compiler.appspot.com/home Or you have other sites who offer the same service: example , another one, third example.
The last one also compresses your css, if you'd want that.
A last point of advice: check that error.wav file, because it takes quite a lot of time to load. See if you can't compress it in any way.
You can reduce the file size of your CSS files by removing unnecessary white-spaces, line breaks, indentations, comments, semicolons, quotes and by combining rules when possible.
I personally use an online tool like https://compresscss.net/ to make things easier.
Your first option would be to concatenate any CSS blocks you can. Duplicate styling will only cause the load speed to be longer.
If your CSS code is already as minimal as it can be, sites such as http://csscompressor.net/ can remove new-lines and other code formalities, making the output unreadable but considerably smaller.
Your website may be unable to distribute the CSS with speed due to the server's limitations on its up-link. There are many services out there such as CloudFlare which are able to cache a multitude of files, including CSS, and send it to the browser with much less loading times.
I'm testing a website speed using PageSpeed Insights tool.
In the result page, one of the warnings suggested me to reduce byte size of css, html and js files.
At the first I tried to remove comments, but nothing changed.
How can I do that?
Should I remove spaces and tabs?
It seems to be a very long operation, worth it?
The action of removing spaces, tabs and useless chars is called minify.
You don't need to do that, there are a lot of services that can minimize files for you.
for example:
http://www.willpeavy.com/minifier/
Be care if you have jquery code: sometimes it removes spaces in wrong place.
You have two things to do to reduce page size:
Minify CSS & JS files
In server side, if you are running your website via Apache, you can install APC, for page cahing. You'll have better parformances
APC
In addition to CSS minifier/prettifier tools above, I recommend using proCSSor for optimizing CSS files. It offers variety of advanced options.
Never found those tools to be much use beyond giving some tips for what might be slowing it down. Minifying is unlikely to achieve much. If you want to speed up your site, save the page and see what the largest files are. Generally they will be the image files rather than the code, and see if you can reduce these.
Also, try and test it on two servers - is your host slow?
If your html file is massive, that suggests a problem with the site's structure - it is rare that a page needs to be large.
Finally, large javascript files are most likely to be things like jquery. If Google hosts these, then use the hosted version. That way, it will probably be already in a user's cache and not impact on your loading time.
EDIT, after further testing and incorporating the issues discussed in the comments below:
PageSpeed Insights is an utterly amateurish tool, and there are much more effective ways to speed up the rendering time than minifying the codes.
PageSpeed Insights is an utterly amateurish tool, that as a matter of standard advises to reduce HTML, CSS and JS file sizes, if not minified. A much, much better tool is Pingdom Website Speed Test. That compares rendering speed to the average of the sites it is asked to test, and gives the download times of the site's components.
Just test www.gezondezorg.org on both, and see the enormous difference in test results. At which the Google tool is dead wrong. It advises to reduce the CSS and JS files, while its own figures (click the respective headers) show that doing so will reduce their sizes with 3.8 and 7.9 kB, respectively. That comes down to less than 1 millisecond download time difference! (1 millisecond = 1/1000 of a second; presumed broadband internet).
Also, it says that I did do a good thing: enable caching. That is BS as well, because my .htaccess file tells browsers to check for newly updated files at every visit, and refresh cached files whenever updated. Tests confirm that all browsers heed that command.
Furthermore, that site is not intended to be viewed on mobile phones. There is just way too much text on it for that. Nevertheless, PageSpeed Insights opens default with the results of testing against mobile-phone criteria.
More effective ways to speed up the rendering
So, minifying hardly does anything to speed up the rendering time. What does do that is the following:
Put your CSS codes and Javascripts as much as possible in one file each. That saves browser-to-server (BTS) requests. (Do keep in mind that quite a number of Javascripts need the DOM to be fully loaded first, so in practice it comes down to putting the scripts as much as possible in 2 files: a pre- and a post-body file.)
Optimize large images for the web. Photoshop and the likes even have a special function for that, reducing the file size while keeping the quality good enough for use on the web.
In case of images that serve as full-size background for containers: use image sprites. That saves BTS requests as well.
Code the HTML and JS files so that there is no rendering dependency on files from external domains, such as from Twitter, Facebook, Google Analytics, advertisement agencies, etc.
Make sure to get a web-host that will respond swiftly, has a sufficient processing capacity, and has a(n almost) 100% up-time.
Use vanilla/native JS as much as possible. Use jQuery or other libraries only for tasks that would otherwise be too difficult or too time-consuming. jQuery not only is an extra file to download, it is also processed slower than native JS.
Lastly, you should realize that:
having the server minify the codes on the fly generally results in a much slower response from the server;
minifying a code makes it unreadable;
de-minifying tools are notorious for their poor performance.
Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Compacting HTML, CSS, and JavaScript can speed up downloading, parsing, and execution time. In addition, for CSS and JavaScript, it is possible to further reduce the file size by renaming variable names as long as the HTML is updated appropriately to ensure the selectors continue working.
You can find plenty of online tools for this purpose, a few of them are below.
HTML Minify
CSS Minify
JS Minify
good luck!