Overview
To have best performance of loading an html page, we recommend while coding in js to:
· Minimize payload size
o Minify CSS
o Defer loading of CSS
· Minimize Roundtrip times
o Combine external css
o CSS sprite
· Optimize browser rendring
o Use efficient CSS selectors
o Avoid CSS expression
Minify CSS
Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.
Recommandation
Defer loading of CSS
Removing or deferring style rules that are not used by a document avoid downloads unnecessary bytes and allow the browser to start rendering sooner.
Recommadation
if a page references style rules that are not needed right at startup, put them in a separate .css file and defer loading of the file until the onload event is fired.
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("style");
element.src = "style.css";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("style");
element.src = "style.css";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Combine external css
Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.
Recommandations
- Partition files optimally.
- Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn't needed until the page load has completed.
- Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
- For CSS that shouldn't be cached, consider inlining it.
- Don't use CSS @import from a CSS file.
- Position stylesheets correctly in the document head.
- It's beneficial to position references to external CSS in the correct order with respect to scripts, to enable parallel downloads.
Combine images using CSS sprites
Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.
Recommandations
- Compresse images using :
- For PNG files
- For JPEG files
- Sprite GIF and PNG images first
Use efficient CSS selectors
Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.
Recommandations
- Avoid a universal key selector.
- Prefer class and ID selectors over tag selectors.
- Remove redundant qualifiers.
- Use class selectors instead of descendant selectors.
Eg. ul li {color: blue;}=> .unordered-list-item {color: blue;}
Put CSS in the document head
Moving inline style blocks and
<link> elements from the document body to the document head improves rendering performance.Recommandations
- As required by the HTML 4.01 Specification (section 12.3), always put external stylesheets in the
<head>section using the in the<link>tag. Don't use@import - Put
<style>blocks in the<head>section.
Summary
- Identify needed css for startup page
- Try to make two css file (combining, refactoring,sprites)
- Use CSS sprites for images
- Minify CSS
- Put CSS in the document head
Links
