50 Amazing jQuery Plugins That You Should Start Using Right Now

jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Enjoy!

Dialogs

The browser’s built-in dialogs are easy to use but are ugly and non-customizable. If you want your application to look sharp and professional, you will have to part with the loathed default look. The plugins in this section can substitute the built-in dialogs and can be readily customized.

1. Alertify.js

Alertify (github) is small library for presenting beautiful dialog windows and notifications. It is easy to customize with CSS, has a simple API and doesn’t depend on third party libraries (but plays nicely with them). To use it, include the js file and call the methods of the global alertify object:

01	// alert dialog

02	alertify.alert("Message");

03

04	// confirm dialog

05	alertify.confirm("Message", function (e) {

06

if (e) {

07	// user clicked "ok"

08

} else {

09	// user clicked "cancel"

10

}

11

});

Alertify.js

2. jQuery Avgrund

jQuery Avgrund (github) is another cool dialog solution. It is not as feature-rich as alertify, but it has the Wow! factor that your web app needs. The dialog is shown with an impressive animation that brings it into focus, while blurring and darkening the background.

jQuery Avgrund

Forms

Forms are tedious and boring. Everyone hates filling them. It is even a bigger deal if no client-side validation is present and we are forced to enter the data a second time. The plugins in this section attempt to make things better by enhancing your forms with useful functionality.

3. iCheck

iCheck (github) is a jQuery plugin that enhances your form controls. It is perfectly customizable, works on mobile and comes with beautiful flat-style skins. To use it, include the js and css files in your page, and convert all your radio and checkboxes with a few lines of jQuery.

1	$(document).ready(function(){

2	$('input').iCheck({

3	checkboxClass: 'icheckbox_minimal',

4	radioClass: 'iradio_minimal'

5

});

6

});

iCheck

4. Long Press

Long Press is a jQuery plugin that eases the writing of accented or rare characters. Holding down a key while typing will bring a bar with alternative characters that you can use. The plugin also has a github page.

Long Press

5. jQuery File Upload

jQuery File Upload (github) is a widget with multiple file selection, drag&drop support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) and is easy to embed into your application thanks to a number of hooks and callbacks.

jQuery File Upload

6. Complexify

Complexify (github) is a jQuery plugin that aims to assess how complex passwords are. You can use it in signup forms to present a percentage to users (like we did in this tutorial). With this plugin you can force passwords to contain a combination of upper/lowercase letters, numbers, special symbols and more. I should note that this is purely a client-side solution, which means that it can be circumvented. This is why you should also check the password complexity on the server side.

Complexify

7. jQuery Knob

jQuery Knob (github) is a plugin for turning input elements into touchable jQuery dials. It is built using canvas, and is fully customizable by setting data attributes on the inputs like this:

1	<input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness="0.3" value="29">

The dials can be controlled using the mouse (click and drag; mousewheel), the keyboard, and by using touch on mobile devices.

jQuery Knob

8. Pickadate.js

Pickadate.js (github) is a jQuery plugin that creates a responsive and mobile friendly date selection widget. It is very easy to use and can be customized with CSS. To use it, include the js file and the stylesheet, and call the plugin on your input element:

1	$('.datepicker').pickadate();

The plugin takes lots of options which you can find in the docs.

Pickadate.js

9. Chosen

Chosen (github) is a powerful widget which converts a select input into a searchable dropdown list. It is easy to customize with CSS, and you can hook your own code thanks to a number of callbacks. The plugin also updates the original element (which is hidden) so that submitting it as a part of a form or reading it with JS will give you the correct result.

Chosen

10. Fancy Input

Fancy Input (github) is a jQuery plugin that makes entering or deleting text in a textboox uber cool. It uses CSS3 animations to achieve the effect. To use it, simply include the JS file after jQuery, and call the plugin:

1	$('div :input').fancyInput();

Fancy Input

11. Typeahead.js

Typeahead (github) is a fast autocomplete library by twitter. It is inspired by twitter.com’s search box and is full of features. It displays suggestions as users type, and shows the top suggestion as a hint. The plugin works with hardcoded data as well as remote data, and rate-limits network requests to lighten the load.

Typeahead.js

12. Parsley.js

Parsley.js (github) is an unobtrusive form validation library. It lets you validate form fields without having to write a single line of JavaScript. Instead, you have to place data attributes in the input fields that you need to be validated, and Parsley handles the rest. The library works with either jQuery or Zepto and is less than 800 lines long.

Parsley.js

Page scrolling and Parallax

Single page websites that feature a parallax scrolling effect are popular these days. They will probably stay in fashion for some time, as they are perfect for sites with low information density and lots of photos – marketing sites, portfolios and more. These plugins aim to make them easier to develop.

13. Windows

Windows (github) is a plugin that lets you build single page websites with sections that take up the whole screens. The plugin gives you callbacks that are called when new sections come into visibility and handles snapping, so you can easily extend it with custom navigation menus or more. Here is an example:

01	$('.window').windows({

02	snapping: true,

03	snapSpeed: 500,

04	snapInterval: 1100,

05	onScroll: function(scrollPos){

06	// scrollPos:Number

07

},

08	onSnapComplete: function($el){

09	// after window ($el) snaps into place

10

},

11	onWindowEnter: function($el){

12	// when new window ($el) enters viewport

13

}

14

});

Windows

14. Cool Kitten

Cook Kitten (github) is a responsive framework for parallax scrolling websites. It organizes the sections of your site into slides and uses the jQuery Waypoints plugin to detect when they come into visibility, which causes the navigation menu to get updated.

Cook Kitten

15. Sticky

Sticky (github) is a jQuery plugin that gives you the ability to make any element on your page always stay visible when scrolling the page. This can come handy in your single-page website to present a sticky navigation menu or sharing bar. It is straightforward to use, the only option you may pass is a top offset:

1	$("#sticker").sticky({topSpacing:0});

Sticky

16. Super Scrollorama

Super Scrollorama (github) is a jQuery plugin for cool scroll animations. It lets you define tweens and animations that are triggered when an element comes into view, or on specific scroll points.

1	$(document).ready(function() {

2	var controller = $.superscrollorama();

3	controller.addTween('#fade',

4	TweenMax.from($('#fade'), .5, {css:{opacity:0}}));

5

});

Super Scrollorama

17. Stellar.js

Stellar.js (github) is a jQuery plugin that provides parallax scrolling effects to any scrolling element. It looks for any parallax backgrounds or elements within the specified element, and repositions them when the element scrolls. You can control the scroll speed of the elements by using data attributes for a true parallax effect. To trigger the plugin, simply call it on your root element (or on window):

1	$('#main').stellar();

Stellar.js

18. Scrollpath

Scrollpath (github) is another scrolling plugin, but what it gives you that the previous plugin does not, is the ability to define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrollpath

Text effects

There has been a huge improvement in web typography in the last few years. From just a handful of web-safe fonts that we could use not long ago, we now can embed custom fonts and enhance them with CSS3. The plugins in this section give you a great deal of control over text.

19. Textillate.js

Textillate.js (github) is a jQuery plugin that combines the power of animate.css and lettering.js, to apply advanced animations on text elements. The animations are CSS3 based, which makes them smooth even on mobile devices. There is a large number of effects to choose from.

Textillate.js

20. Arctext.js

Arctext.js (demo) is a jQuery plugin that lets you arrange each letter of a text element along a curved path. Based on lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius, and applies the proper CSS3 rotation.

Artctext.js

21. Bacon

Bacon (githug) is a jQuery plugin that allows you to wrap text around a bezier curve or a line. This gives you a great deal of typographic control, and as illustrated by the plugin’s home page, the ability to put bacon strips in the middle of your designs (finally!).

Bacon.js

22. Lettering.js

Lettering.js (github) is a simple but effective jQuery plugin for better web typography. What it does, is split the textual content of an element into individual spans with ordinal .char# classes, so you can style each letter individually.

Lettering.js

23. jQuery Shuffle Letters

jQuery Shuffle Letters (demo) is one of our experiments. It creates an interesting effect that randomizes the content of a text element. Here is how to use it:

1	// Shuffle the container with custom text

2	$('h1').shuffleLetters({

3	"text": "show this text!" // optional

4

});

The text parameter is optional – if it is missing, the plugin will take the content of the element.

jQuery Shuffle Letters

24. FitText.js

FitText.js (github) is a jQuery plugin for inflating web type. It automatically scales the text of an element to take up the full width of its container. This makes the layout responsive and looking sharp on any device.

FitText.js

Grids

The plugins in this section make it easy to organize content into grids. They calculate the best way to pack your items densely and align them in real time.

25. Gridster.js

Gridster.js (github) is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. Dragging an element causes the others to rearrange and free up place for it, which can be great for user-controlled layouts and dashboards.

Gridster.js

26. Freetile

Freetile (github) is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Freetile

27. Stalactite

Stalactite (github) is a library that packs page content depending on the available space. It takes a lazy approach and sorts the elements sequentially with the scrolling of the page, which makes for an interesting effect.

Stalactite

Custom scrollbars

Something that we have all wanted to do in one point or another is to customize the appearance of the default browser scrollbars. Some browsers allow this, but it doesn’t work everywhere. The two plugins below make that possible.

28. nanoScroller.js

nanoScroller.js (github) is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup and utilizes native scrolling. The plugin works on iPad, iPhone, and some Android Tablets.

nanoScroller.js

29. jQuery Custom Content Scroller

jQuery Custom Content Scroller (github) is a custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via the jQuery mousewheel plugin), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and more.

jQuery Custom Content Scroller

Backgrounds

Full screen backgrounds are another popular design trend. The plugins listed here aim to make it easier to set a single image, a gallery or even a video as a background.

30. Tubular.js

Tubular.js is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way:

1	$('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});

The plugin also supports controlling the video with play/pause, setting the volume and more.

Tubular.js

31. Backstretch

Backstretch (github) is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes. Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site. For the curious, and those that don’t want to use plugins, there is also a technique that can set a full screen background image purely with CSS.

Backstretch

32. Supersized

Supersized (github) is an advanced full screen background plugin for jQuery. With it, you can show a set of photos as a slideshow that takes the full width and height of the page. This makes it perfect for photography sites, portfolios, or event sites. The plugin comes with lots of options, supports multiple transition effects and can be extended with custom themes.

Supersized

Galleries and image effects

The plugins listed here aim to enhance the way visitors browse images on your site, and let you apply interesting effects that will make your galleries stand out.

33. jQuery TouchTouch

jQuery TouchTouch (demo) is a plugin we released last year that aims to be simple to use and to work on mobile devices. It uses CSS transitions to make animations smoother, and preloads images dynamically. Also, it can be completely restyled by modifying a single CSS file.

jQuery TouchTouch

34. iPicture

iPicture is a jQuery plugin that can create interactive image walkthroughs. It can overlay tooltips and hints on top of the image, and presents rich content like HTML, photos and videos. It is easy to integrate into your site and can be customized and extended with CSS.

iPicture

35. Adipoli jQuery Image Hover Plugin

Adipoli (demo) is a jQuery plugin for creating stylish image hover effects. With it, you can turn images black and white, apply popout, slice and box transitions. To use the plugin, you only need to include the necessary files and define the start and hover effects:

1	$('#image1').adipoli({

2	'startEffect' : 'normal',

3	'hoverEffect' : 'popout'

4

});

This makes it the perfect addition to your gallery or portfolio page.

Adipoli jQuery Image Hover Plugin

36. Swipebox

Swipebox (github) is a lightbox plugin that supports desktop, mobile devices and tablet browsers. It understands swipe gestures and keyboard navigaton and is retina-ready. To enable it, include the plugin JS/CSS files, and add the swipebox class to the images that you want to show in a lightbox:

1	<a href="big/image.jpg" title="My Caption">

2	<img src="small/image.jpg" alt="image">

3

</a>

Like the rest of the plugins in this collection, it can be customized entirely with CSS.

Swipebox

37. TiltShift.js

TiltShift.js (github) is a neat plugin that replicates the tilt-shift effect (which causes real-life object to appear as miniatures) using CSS3 image filters. The bad news is that this only works on Chrome and Safari at the moment, but support should gradually land in other browsers as well.

TiltShift.js

38. Threesixty.js

Threesixty.js (github) is a jQuery plugin that creates draggable 360 degree views. You have to provide the plugin with the path to a collection of images of your product (shot from different angles) and Threesixty.js will assemble them into a interactive view. You can drag or use the arrow keys to explore the object from different angles.

Threesixty.js

39. Swipe.js

Swipe.js (github) is another responsive slider. What makes it stand apart is that it is specifically targeted at touch devices. This allows it to not only understand gestures, but to also react to touch similarly to a native application. It has resistant bounds and  scroll prevention and is compatible with browsers from IE7 onward.

Swipe.js

40. CamanJS

CamanJS (github) is a powerful image manipulation library, built on top of the canvas element. With it, you can manipulate the pixels of an image and achieve an almost Photoshop-like control. If you can remember, this is the library we used a few months ago to build a web app with filters similar to Instagram.

CamanJS

41. SpectragramJS

Spectragram (github) is a jQuery plugin that aims to make working with the Instagram API easier. It can fetch user feeds, popular photos, photos with specific tags and more.

SpectragramJS

Misc

This section holds plugins and libraries that don’t belong in the other categories but are worth the look.

42. jQuery Countdown

jQuery Countdown (demo) is a jQuery plugin that shows the remaining days, hours, minutes and seconds to an event, and updates the remaining time with an animation every second. It is easy to use – include the plugin JS and CSS files, and trigger it on document ready:

1	$('#countdown').countdown({

2	timestamp   : new Date(2015, 0, 3) // January 3rd, 2015

3

}

The countdown will be presented in the #countdown div.

jQuery Countdown

43. List.js

List.js (github) is a library that enhances a plain HTML list with features for searching, sorting and filtering the items inside it. You can add, edit and remove items dynamically. List.js is standalone and doesn’t depend on jQuery or other libraries to work.

List.js

44. jQuery PointPoint

jQuery PointPoint (demo) is a plugin that helps you draw users’ attention to a specific part of the page. It presents a small arrow next to the mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

jQuery PointPoint

45. Social Feed

Social Feed (github) is a jQuery plugin that presents a feed of the latest public updates on your social accounts. It has a clean design that is built using a template, which you can easily customize.

Social Feed

46. Hook.js

Hook.js (github) is an interesting experiment that brings the “pull to refresh” feature you often see in mobile apps, to the web. You can use this to update your mobile site with new content, fetch new posts and more.

Hook.js

47. jQuery PercentageLoader

PercentageLoader (bitbucket) is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. It makes use of HTML5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary, using vectors rather than images so can be easily deployed at various sizes.

Loader.js

48. Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Chart.js

49. Tooltipster

Tooltipster (github) is a powerful jQuery plugin for displaying tooltips. It works on desktop and mobile browsers, gives you full control over the contents of the tooltips and supports a number of callback functions so you can hook it into your application. If you need something even more lightweght that doesn’t use JS at all, you can give a try to hint.css.

Tooltipster

50. Toolbar.js

Toolbar.js (github) is a jQuery plugin that lets you display a neat pop-up menu. You can choose the actions and icons that are presented in the menu and listen for events. This is perfect for making more of the limited space of a mobile web app interface.

Toolbar.js

51. gmaps.js

gmaps.js (github) is such a useful library that I decided to include it in addition to the 50 plugins above. Gmaps is a powerful library that makes working with Google Maps a great deal easier. You can place markers, listen for events, set the coordinates, zoom level and more, all with a fluid jQuery-like syntax. This is like a breath of fresh air compared to the regular maps JS API, and I highly recommend it.

Python Tutorial

http://pythonmonk.com/

Awesome CSS3 generators to simplify front end development

 

CSS3 introduced lots of new possibilities in the world of front end web development. This is indeed a great thing, but it can become quite hard to remember all the parameters, especially if you come from a web designer background. Here are a list of 10 awesome CSS3 code generators that will help you to save time and hassle.

 

 

CSS3 Generator

This generator is definitely one of my favorites, as it allow you to generate more than 10 different CSS3 effects, such as border radius, text shadows, transitions, and more.
Visit css3generator.com

CSS Gradient generator

CSS gradients are cool, but it’s also a bit tricky to remind all the possibilities. This generator will help you to create a perfect looking CSS gradient with no headache.
Visit CSS Gradient generator

CSS button generator

In my opinion, this is the most advanced CSS3 button generator available on the internet. Adjust settings, copy the code, and you’re done!
Visit CSS button generator

CSS3Gen

CSS3Gen is a nice generator which allows you to easily create useful snippets of CSS3 and copy them straight into your projects. CSS3Gen take care of all the vendor prefixes.
Visit CSS3Gen

CSS3 Please

CSS3 Please is a very effective tool to test your CSS3 code: Just edit the CSS rules from the editor, and a special container will receive instant changes so you can have a preview of what you’re doing.
Visit CSS3 Please

Layer Styles

If you’re familiar with Photoshop, there’s no doubt that you will love Layer Style, a CSS3 generator which replicate the look and feel of the popular software from Adobe.
Visit Layer Styles

Border image generator

As you can guess, this tool helps you to create borde images. Simple and efficient!
Visit Border image generator

CSS3 Pie

Internet Explorer has been a front-end coder nightmare since 10 years, and unfortunately, it’s not going to end very soon. That said, tools like CSS3 Pie can definitely help when a IE compatible code is needed. This very useful generator makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
Visit CSS3 Pie

CSS Easing Animation Tool

With this tool, every developer now have a simple way to generate CSS easing animations. Vendor prefixes are supported so you don’t have to worry about cross-browser compatibility.
Visit CSS Easing Animation Tool

Font-Face generator

Want to use fancy fonts on your website? Simply upload it to Font Squirrel font-face generator, and get your CSS code as well as your font in all formats needed by the different browsers. This tool helped me a lot in the last two years.

10 Conference Videos for Front-End Developers

Here’s a collection of videos that I’ve stumbled across in recent months. I haven’t watched all of them.

http://www.impressivewebs.com/10-conference-videos-for-front-end-developers/

Best practices for efficient HTML5 coding

Use a generator

When building a website, you often start with a base template that you customize to fit your needs. Instead of writing all your HTML5 code from scratch, you can save time by using one of those very useful online HTML5 generators. Using them is definitely easy: You fill a basic form to set up desired options, you click on a button and a basic HTML5 template is available for you to use.

There are quite a lot of HTML5 generators, but my favorites are definitely SwitchToHTML5 and Shikiryu generator, which have more options.

And if you prefer a ready to use template, the HTML5 Boilerplate is a must have.

Use a cheat sheet

With new additions or changes to HTML5 happening quite frequently, it can become hard to remember all the new various features. One of the best tools to keep an eye on HTML5 tags and property is definitely those up to date cheat sheets, created by InMotion Hosting.

The cheat sheets are broken up into three easy to print images: Tags, Event Handler Content Attributes and Browser Support.
All three cheat sheets can be downloaded here.

Be careful with compatibility issues

HTML5 is a new technology. You can already use it but right now, but you have to remember that several specifications have not been implemented in some browsers.

Can I Use.com is definitely a website to have in your bookmarks if you’re coding HTML5 websites. It is the most complete tool to quickly know if an element is supported by a specific browser. CanIUse.com also contains compatibility charts for CSS3, SVG and JavaScript.

Know how to enable HTML5 on older versions of IE

Internet Explorer have always been a pain for web developers and designers. I’m pretty sure that most of you remember when in 2006 or 2007 we had to take lots of time to get things working (almost) correctly on IE6… Although IE’s newer versions are a lot better than what IE used to be, the IE developer nightmare is not over yet. In fact, IE 8 and below do not understand HTML5 at all.

The good news is that a small script allow you to enable HTML5 on IE 8 and older. Using this script is pretty simple, just paste the following code in the <head> section of your HTML5 document:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Another very useful tool to consider is Modernizr, a complete JavaScript library that helps you build HTML5 website that works perfectly in all browsers.

Using Modernizr is pretty easy. Just go to this page to specify which HTML5/CSS3 properties you plan to use, then download the generated script. Include it in the <head> section of your document, and you’re done. Modernizr will detect which features can be used in the client browser and will add classes to the <html> tag. If a feature is supported by the browser, that feature is added by name as a class to the tag. If the feature is not supported, the class is added and prepended with “no-”.

Use elements correctly

Before HTML5, we used to code websites using lots of <div> elements. The biggest problem with this technique is definitely that source code can quickly become hard to read. This is why HTML5 introduced new tags to be used instead of the good old <div>.

Those new tags includes header, footer, article, section, aside, nav and more. A basic, but semantically correct HTML5 document should look like the following:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <header>
	...
  </header>

  <div role="main">
	...
  </div>

  <footer>
	...
  </footer>
</body>
</html>

Validate your code

After coding a page in HTML5, the fastest and most efficient way to make sure that your code is semantically correct is indeed by validating it. The good old W3C validator can validate your HTML5 pages and show you if you made any mistake. A great tool for quality check!

Practical tips to save bandwidth and reduce server load

 

Bandwidth (the data transfered from your web server to the client browser) is generally limited by hosting providers so, as a website owner, you have to make sure to use as less bandwidth as possible to avoid further problems.
In this article, I have compiled the most useful tips to save as much bandwidth as possible while making your website fast.

 

 

Use CSS instead of images

Images can definitely consume lots of bandwidth. As most browsers are now able to render graphics such as box shadows or rounded borders, you should definitely use CSS instead of images when possible, as CSS code consume a lot less bandwidth than images.

If you need your website to be compatible with old browsers such as the infamous IE6, the solution is to use an alternative stylesheet and images only for the old browser. Use a conditional comment to link to your IE6 only stylesheet:

<!--[if IE 6]>
<link href="ieonly.css" rel="stylesheet" />
<![endif]-->

Always make sure that your images are optimized

Although you can replace many images with CSS, images are still an important part of a website. But when you need to use images, you have to make sure they are optimized for being displayed online.

If you’re using Adobe Photoshop, you can use the “Save for web” option that allow you to easily find the best compromise between quality and image size. Another option is to use a free online service to reduce image size while keeping its quality high. This service is called Smush It and I can’t stop using it to optimize my images.

If you’re using WordPress, you’ll be happy to read that a free Smush It plugin is available. Install it, and it will automatically optimize any image you’ll upload to your WordPress site using the uploader. Cool, isn’t it?

Use a cache on your website

Caching is the action of retrieving data from a ready storage (called cache) instead of using resources to generate it every time the same information is needed.

The code below will add caching to files as such as .jpg, .gif, .swf. The cache will last 1 week. For other file types, you may adjust the cache life. For example, CSS and JavaScript files should be cached for 12 hours.
Paste it into your .htaccess file.

<filesmatch "\.(jpg|jpeg|png|gif|swf)$"="">
Header set Cache-Control "max-age=604800, public"
</filesmatch>

WordPress user? Then I definitely recommend installing the W3 Total Cache plugin. It is a free and complete caching solution that helps optimizing every aspect of your blog or website. It makes your site running faster and use less bandwidth.

Prevent bandwidth stealing and hotlinking

A bad but very common practice on the internet is hotlinking: What is hotlinking? Here is a quick example: Website A host an image to display on a html page. Website B wants to display the same image that website A use. Website B link to website A image, causing website A bandwidth to be consumed every time website B is loaded.

So definitely, you don’t want to pay bandwidth to others, right? To do so, create an image (it can be a 1*1 transparent gif image, or an image stating “don’t steal my images” and upload it to your server, or even better to a free image hosting website. Then, add the following code into your site .htaccess file. Don’t forget to update the code with your own website and image urls:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]

Use Minify to compress CSS and JavaScript files

Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Please not that Minify is included in the WordPress W3 Total Cache plugin, so if you already installed this plugin you have nothing else to do to minify your blog.

Use hosting websites to host big files

If you have to host big files (videos, photoshop psd files, big images, etc) you should definitely rely on a third party service such as Dropbox to host your files. That way, when someone will download it, it will not consume your server bandwidth but instead the bandwidth of the third party service.

Use GZip compression on your PHP files

GZip compression is a technique that compress data being sent out from your web server, and have the browser decompress this data on the fly, thus reducing the amount of data sent and increasing the page display speed. Recent browsers all supports GZip compression.

To achieve GZip compression on your website, you have to create 2 files. Name the first one gzip_header.php:

<?php
$phpver = phpversion();
$useragent = (isset($_SERVER["HTTP_USER_AGENT"]) ) ? $_SERVER["HTTP_USER_AGENT"] : $HTTP_USER_AGENT;

if ( $phpver >= '4.0.4pl1' && ( strstr($useragent,'compatible') || strstr($useragent,'Gecko') ) ) {
if ( extension_loaded('zlib') ) {
ob_start('ob_gzhandler');
}
} else if ( $phpver > '4.0' ) {
if ( strstr($HTTP_SERVER_VARS['HTTP_ACCEPT_ENCODING'], 'gzip') ) {
if ( extension_loaded('zlib') ) {
$do_gzip_compress = true;
ob_start();
ob_implicit_flush(0);
header('Content-Encoding: gzip');
}
}
}
?>

Now, create a second file and name it gzip_footer.php:

<?php
$gzip_contents = ob_get_contents();
ob_end_clean();

$gzip_size = strlen($gzip_contents);
$gzip_crc = crc32($gzip_contents);

$gzip_contents = gzcompress($gzip_contents, 9);
$gzip_contents = substr($gzip_contents, 0, strlen($gzip_contents) - 4);

echo "\x1f\x8b\x08\x00\x00\x00\x00\x00";
echo $gzip_contents;
echo pack('V', $gzip_crc);
echo pack('V', $gzip_size);
?>

Once you have created the gzip_header.php and the gzip_footer.php files, you can create a new file which includes your regular template between the gzip_header.php and the gzip_footer.php files:

<?php
include('gzip_header.php');
include('your_template_file.php');
include('gzip_footer.php');
?>

Source article for the codes: http://www.techiecorner.com/7/speed-up-and-save-your-website…

Use a reliable web hosting

At last but not least, it is obvious that you should use a reliable web host if you want your website to be fast. I’ve used lots of web hosts and some are really good and some other sucks. For example, you should definitely avoid Phpnet.org and Maven Hosting, both of them shut my websites down just because they were receiving too many visits.

On the other hand, I was pleased with WP Web Host, which is really good if you’re hosting a small or medium WordPress site or blog. If you have a popular and/or large website, I definitely recommend Vidahost, which is CatsWhoCode webhost. My site is still fast although I receive lots of traffic. If you want to get some hosting from Vidahost, don’t forget to use my custom coupon CATSWHOCODE to get 10% off anything.

 

~Source: catswhocode