: Common optimizations to reduce HTML or XHTML page size? What are some common optimizations performed to reduce HTML or XHTML page size? Some that come to mind are: removing comments, removing
What are some common optimizations performed to reduce HTML or XHTML page size? Some that come to mind are:
removing extraneous whitespace,
moving repetitive inline styles to a CSS stylesheet,
What are some others? Which offer the biggest bang-for-the-buck or could be performed automatically by a tool or module?
More posts by @Gonzalez347
If you're using an ASP.NET website, be careful of the ViewState. It can generate very big hidden fields in the page, overloading it often while it is not necessary (it already occured to me that the ViewState is heavier than the rest of the page).
It is especially true if you use AJAX, as the ViewState will be sent back and forth with every request, slowing your website and increasing the traffic volume.
The solution is in the .net code though.
A commonly overlooked strategy is to remove all unnecessary HTML code from the page.
For any given project, you'll have to decide which of these strategies to employ based on the (X)HTML version you're using, and the way the website is going to be used.
(Apparently, I can't post more than one hyperlink per answer since I'm a new user, so these URLs will have to be copied and pasted...I hope that's kosher.)
In HTML4 and HTML5, for many elements, the closing tag is not required. The opening tag for the body element also isn't required. See:
The protocol (http:) part of HTTP URLs can be omitted.
With tags like <br>, you can simply leave out the slash used in the XHTML syntax (<br />) unless you actually need to use XHTML.
Here are some examples of small HTML document structures:
There are a bunch of free web performance analysis & optimization tools. You can compile your own big check-list from the reports that they generate.
Here are a couple of paraphrased points from a Zoompf Performance Assessment -
Avoid dynamically generated content (image). Consider drawing or resizing
a image offline as a static image file instead.
Avoid using image tags without dimensions.
It probably isn't worth it.
I've played with removing whitespace in HTML a little bit, and saw only a 10% size reduction in payload after gzipping.
Realistically, whitespace and linefeed removal is doing work that the compression would be doing for us. We're just adding a dab of human-assisted efficiency:
Unoptimized CSS 2,299 bytes 671 bytes
Optimized CSS 1,758 bytes 615 bytes
(yes this says CSS but the same basic rules apply to HTML as well)
The problem is,
GZIP is doing 90% of the work for you, so this is a crazy micro-optimization. I mean, maybe if you're Google or Yahoo.
That 10% additional size reduction comes at the rather steep cost of completely unreadable HTML in "view source"
Others have said it, but they just haven’t rammed the point home enough: gzipping.
Virtually no effort, or drawbacks.
In my limited experience, reduces HTML size by between 60% and 90%.
All the other tweaks you can make to HTML require more effort/maintenance, and hardly have any effect compared to just gzipping and forgetting. They’re simply not worth the time unless you‘re Google. You are not Google.
(As others have mentioned though, the more consistent your HTML is, the more effect gzipping will have, as — according to my limited understanding — gzipping looks for identical strings in your file, and replaces each repeated instance with a tiny code referring to the original. So authoring practices like keeping your attributes in the same order, and keeping all your casing the same, can help gzipping do its work.)
Oh — and if you’re automatically minifying your HTML at some point in your build/serving process, that doesn’t require much more effort/maintenance. Some HTML minifiers are listed here:
As others have said, the largest benefit comes from gzipping.
Make sure that you use appropriate HTML elements. Instead of <div class="page-title">Hello World</div>, use <h1>Hello World</h1>.
And the obvious one: don't use tables for layout! Use a simple grid system like 960.gs (or roll your own lightweight version). There can be a large difference between the HTML size, especially with nested tables. Compare:
<table cellpadding="3" cellspacing="0" border="0">
Google has outlined and explained their recommendations to best Minimize Payload Size. They include the following techniques:
Remove unused CSS
Serve scaled images
Serve resources from a consistent URL
These suggestions are a part of their open-source Firefox/Firebug add-on project called Page Speed. Similar to Yahoo!'s YSlow plugin. The actual Page Speed add-on will check for many more optimizations than that list explains in detail. Instructions for Using Page Speed are also presented.
Yahoo!'s Best Practices for Speeding Up Your Website identify a similar set of best-practices:
Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Put Stylesheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Reduce DNS Lookups
(Yahoo!'s list is ~35 items long, no need to quote it in its entirety.)
Both YSlow (image link) and Page Speed (image link) will allow you to run tests on your pages, suggesting things that you can do and showing you what, of their recommendations, is already implemented.
See css-tricks.com/css-sprites for more information about combining images.
If you are an extremely high-volume site, you may want to consider using super-short entity id and class names, as these reduce the size of both the HTML page and the CSS page used to style it.
Also, be careful about overly-structured site composition; it is easy to add div and span sections when they are not truly needed. You may also want to consider strategies such as paging for large result sets and similar output.
In reality, these optimizations have extremely limited payback (and for the paging strategy, potential SEO downsides) to be worth it for sites that aren't in the same traffic category as Google. Just follow jessegavin's recommendation to enable GZip/Deflate compression and be done with it.
ok, a small one: keep tag names and attributes lowercase and consistent (as the standard mandates, by the way). It will increase the compression ratio by a percentage or two.
Someone is going to say that the markup should be Gzipped, so I might as well be the one.
Here's a lengthy explanation of what Gzip is with links on how to set it up on Apache and IIS.
An article on WebReference states that you'll find the following performance gains when using the mod_gzip Apache module.
Webmasters typically see a 150-160%
increase in Web server performance,
and a 70% - 80% reduction in
utilized, using this module. Overall
the bandwidth savings are
approximately 30 to 60%