What is the best method to reduce the size of my Javascript and CSS files?

In addition to using server side compression, using intelligent coding is the best way to keep bandwidth costs low. You can always use tools like Dean Edward’s Javascript Packer, but for CSS, take the time to learn CSS Shorthand. E.g. use:

background: #fff url(image.gif) no-repeat top left;

…instead of:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Also, use the cascading nature of CSS. For example, if you know that your site will use one font-family, define that for all elements that are in the body tag like this:

body{font-family:arial;}

One other thing that can help is including your CSS and JavaScript as files instead of inline or at the head of each page. That way your server only has to serve them once to the browser after that browser will go from cache.

Including Javascript

<script type="text/javascript" src="https://stackoverflow.com/scripts/loginChecker.js"></script>

Including CSS

<link rel="stylesheet" href="https://stackoverflow.com/css/myStyle.css" type="text/css" media="All" />

Related Contents:

  1. Print only?
  2. jQuery trigger file input
  3. Only detect click event on pseudo-element
  4. How do I change the background color with JavaScript?
  5. How do I simulate a mouseover in pure JavaScript that activates the CSS “:hover”?
  6. Bootstrap modal appearing under background
  7. How to autosize a textarea using Prototype?
  8. Setting CSS pseudo-class rules from JavaScript
  9. Select all DIV text with single mouse click
  10. Prevent BODY from scrolling when a modal is opened
  11. jqGrid does not render correctly in Chrome/Chrome Frame
  12. Turn a number into star rating display using jQuery and CSS
  13. All About…. Z-Index?
  14. Select all elements that have a specific CSS, using jQuery
  15. HTML selected option background-color CSS style
  16. Bootstrap close responsive menu “on click”
  17. How to silently hide “Image not found” icon when src source image is not found
  18. Webkit-based blurry/distorted text post-animation via translate3d
  19. Add stylesheet to Head using javascript in body
  20. How to add multiple classes to a ReactJS Component?
  21. Disable Drag and Drop on HTML elements?
  22. css transition doesn’t work if element start hidden
  23. jquery – How to determine if a div changes its height or any css attribute?
  24. How to convert unordered list into nicely styled dropdown using jquery?
  25. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  26. Force browser to refresh CSS, JavaScript, etc
  27. Styling [duplicate]
  28. Responsive horizontal page sliding
  29. Prevent Address-Bar hiding in mobile Browsers
  30. HTML Alignment Issue in one machine only (both IE8)
  31. scrollTop animation without jquery [duplicate]
  32. How to detect overflow in div element?
  33. How to check if a CSS property or value is supported by a browser?
  34. Reverse Scrolling
  35. Div Z-Index issue with Flash movie
  36. Possible to associate label with checkbox without using “for=id”?
  37. CSS selector for targeting only immediate children and not other identical descendants
  38. link element onload
  39. webkit-transform overwrites z-index ordering in Chrome 13
  40. Specify parent divs opacity but make it not affect children HTML elements
  41. Is it possible to style a title? (and with CSS or js?) [duplicate]
  42. Get script path
  43. I want to show list items as 2 or more columns (dynamic alignment)
  44. Repeat animation every 3 seconds
  45. Multiple read more / read less sections are not working on a page
  46. How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
  47. How to add smooth scrolling to Bootstrap’s scroll spy function
  48. How to use Javascript to check and load CSS if not loaded?
  49. File Caching: Query string vs Last-Modified?
  50. How to show hidden divs on mouseover?

Leave a Comment