You can safely remove most whitespace from your code with no change of appearance to your pages. Browsers don’t care how pretty your code it, they process the code between tags, real or implied. Formatting code with spaces, tabs, and returns makes it easy for humans to read, but slower for browsers to download.
Website Optimization
CSS: Use Descendant Selectors – contextual selectors
Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements.
CSS: Use Type Selectors
By using simple, high-level selectors you can simplify your style sheets. Type selectors and the “universal” selector (*) match every instance of the element type in the document tree. You can use the pattern matching built into CSS to make your style sheets work for you.
JavaScript: Defer Execution – with the defer attribute of the script element
First introduced by Internet Explorer 4, the defer attribute of the script element is now part of the HTML 4 and XHTML specifications. The defer attribute gives a hint to the browser that the script does not create any content so the browser can optionally defer interpreting the script. This can improve performance by delaying execution of scripts until after the body content is parsed and rendered.
CSS: Group Common Styles into Shared Classes
You can group styles common to different rules into their own classes to save repeating yourself. CSS2-compliant browsers can reference multiple classes within individual elements.
Minimize HTTP Requests
By combining external files and optionally including CSS and JavaScript directly within your XHTML pages, you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing indeterminate delays. Users attune to fast, consistent response times. The more HTTP requests that your pages require, the slower and less consistent their response time will be.
CSS: Group Selectors and Declarations
By combining the grouping of selectors that share the same declaration and declarations that share the same selector you can apply multiple declarations to multiple selectors. This technique allows you to create compact yet powerful CSS rules. This tip combines Group Selectors with Group Declarations into one powerful technique.
JavaScript: Delay Loading
You can make your content display faster if you delay or defer the loading of your external JavaScript files. JavaScripts are executed as they are loaded. Any external JavaScripts referenced within the head of your XHTML documents must be executed before any body content is displayed. One way around this is to delay the loading of your external JavaScript by using empty “stub” functions, and redefining these functions later on.
CSS: Group Declarations
CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.
CSS: Group Selectors
CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.