Cheat Sheets are handle for web development. Usually, these sheets are either printed out and pasted on the wall of your working area or they are placed on your computer as wallpaper. Referencing in this way makes working faster and

Read more

Many developers and designers nowadays may not be aware of how important a responsive and better user experience can determine a good and a poor website. Having good coding practice and efficient use of built in methods are important but there are more than just these. This is a practical check list for an optimized website that should be practice during your web development for faster and better user experiences. Please take note that some of the point listed here may contradict the practice of a good SEO friendly site.

1. Compressed JavaScript and CSS

I will say this is the basic thing that most web developer will be well aware of. The benefit to do this is so that your user will not have to wait the extra few second for your page to be loaded due to the extra kb that were not optimal on your JavaScript and CSS files. This actually makes a difference when your users are running a slow connection.

2. Use Cache-Control header

Since web pages are getting more and more richer which means more images, script, flash, content and etc.,  caching your site is the best way to experience faster respond time for your users. A first time user may have to make more HTTP request, but subsequent page visits will definitely reduce the number of HTTP request making your site feel faster. There are three way of caching,

1.      Via <meta> tags (<meta http-equiv="Expires"...>)

2.      Programmatically by setting HTTP headers (CGI scripts etc.)

3.      Through web server configuration files (httpd.conf)

And for good practice, static page should implement a 'Never expire' policy since its static, there won't be much changes on it. Additional, dynamic components will use Cache-Control header to help browser with conditional requests.

3. Check for orphaned files and missing images

Missing files are problematic because they result in error messages. In a way, it is great to have error message displayed because it's informative but in terms of speed optimization for web pages, they have a larger disadvantage. The reason is when the browser is looking for any missing item in your site; it is consuming resources which slower down page processing. So check all those links on your site and you won't need to have any error message to began with.

4. Use a content-distribution network

A content delivery network (CDN) is a great way to improve download times for your static images or heavy loaded files as CNS is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is based on the approximation of the network load. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

The other advantage of CDNs is that they are separate domain. So what if it is a separate domain? Well, you might not know that your browser do limit the number of concurrent connection to a single domain whenever a page loads which delay other stuff on your page from loading concurrently. But your browser is capable of opening up a new thread to other domain and by using CDNs, you get the benefit of concurrent download of your site material. P.S you may want to host your JavaScript framework library with Google.

5. Content First

This is a practice for web development that you should consider having. Always load the content first follow by other assets of your web site. The reason is those users are not really interested in all your banners and footer stuff that you are going to show to them. They are there for your content. Therefore, display those first! This can be done by placing your content block (the div of the content) right after the body tag. This way, it will display the content first follow by other necessary things in your site. This also promotes better SEO crawling.

6. StyleSheet top, Script bottom

Top means on the header while bottom means right before the closing body tag. For better user experience, showing them display will most likely gain a better respond. Script will be at the bottom because they are most likely not as important as content and navigation bar. Unless your site cannot live without JavaScript which you shouldn't than it can be on the top. (The reason why JavaScript should not be so dependent is because of security issue of XSS where most users will use tools such as NoScript from Firefox to protect themselves against hackers)

7. External JavaScript and CSS

If you are still wondering whether Inline is better or external file is better than go with external file. The core benefit is external files will be cached by the browser and lesser HTTP request needed in subsequence page visit. On the other hand, Inline on the page will just make life difficult for the developers to maintain and required more HTTP request since main HTML files are always being requested.

8.  Avoid Redirect

Redirect slow down user experience. This is simple to explain why, imagine yourself being redirect by the page. The page that you just went in rendered nothing which means you has to wait for the actual HTML file to arrive.  After the page has arrived, it is being rendered again. How much time has this process wasted?

9. Use trailing slash.

This is something important you should be aware of. With and without slash at the back of the URL does make a differences in term of speed. Unless it is an extension type if you do not include a trailing slash at the back it will slow the process. For example,

We will not have to add trailer for the below example

Hungred.com/useful-Information/index.php

Hungred.com/useful-Information/

But if this does not have a trailing slash,

Hungred.com/useful-Information

What happen behind the scenes is that a 404 Error has been generated and a redirect is performed which causes a large amount of resources wasted. Most developers are not aware of such problem when dealing with URLs.

10. Make favicon.ico Small and Cacheable

The favicon.ico is an image that stays in the root of your server. It's a necessary evil because even if you don't care about it the browser will still request it, so it's better not to respond with a 404 Not Found. Also since it's on the same server, cookies are sent every time it's requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

So to mitigate the drawbacks of having a favicon.ico make sure:

• It's small, preferably under 1K.
• Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.

11. Gzip Compression

Compression reduces response times by reducing the size of the HTTP response which there is a better article that explain Gzip and how to setup it on http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

12. Remove Duplicate Scripts

Everyone should know duplicate script means doing extra stuff which is bad.  It will cause multiple HTTP request and slow your web response.  If your site did not have caching ability, this means double the work for HTTP request as each subsequence page means repeating request

13.  Flush Browser Buffer Early

This means that you should send your partially ready HTML response to your browser so that it can start fetching components while the backend is busy with the rest of the HTML page. In PHP, there is a function flush() which can be use and placed after the close html tag and opening body tag. This helps to display your page concurrently making your user feel the responsiveness from your site.

14. Use GET for AJAX Requests

Unless you are sending data to be stored on the server, it is best to use GET method.  POST required 2 steps that is to send the header first (details for server) then the data. On the other hand, GET only required one TCP packet to be send but have a maximum length of 2k in IE so it's a 2K limit for all browser since your application should be cross browser compatibility. So GET is meant for retrieving information while POST is meant for sending data easy right?

15. Preload Components

Preload takes advance of the browser when it is in idle state. Since it is not doing anything, might as well preload some images to store in cache for the following pages. Usually you would want to have this function to speed up your overall site to allow your user to experience better responsiveness when moving towards other subsequence pages.

16. Reduce the Number of DOM Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. And if you are using jQuery, this is definitely something you should be aware of. It makes a difference if you loop through 300 or 3000 DOM elements on the page. A simple test can be done on Firebug's console by writing the following code

document.getElementsByTagName('*').length

17. Minimize the Number of iframes

It is costly to run a iframes in a browser even if it render a blank page. The costly here means that if the page is loading two sites at one time, its like there are another site that is fighting with your site for resources to be rendered out to the page.

18. Reduce Cookie Size

Cookie is exchanged in the HTTP headers between web server and browser. Thus, it is important to keep the size small as larger cookie takes longer to download. It is best to remove unnecessary cookies and be mindful of setting the appropriate domain level so that sub-domain is not affected.

19. Minimize DOM Access

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:

• Cache references to accessed elements
• Update nodes "offline" and then add them to the tree
• Avoid fixing layout with JavaScript

20. Don't use images to represent text

Image takes longer to load and you won't want your user to guess where is the navigation bar when the image takes too long to load. Always use text as it is faster and less heavy than image. Furthermore, it is good for SEO as search engine spider recognize text instead of image.

21. Choose <link> over @import

Since we want better responsiveness for our user from our website, we placed our CSS tag on the top of the page. But if you use @import instead of <link>, IE will behave as if the <link> is placed at the bottom of the page so it is best not to use @import.

22. Develop Smart Event Handlers

Instead of attaching many event handlers to each element, we use event delegation and event bubble which only attach a single handler to the parent. Let's say you have many buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you'll be able to catch the event and figure out which button it originated from. This helps speed up your overall code and makes your JavaScript more responsive.

23. Gracefully degrading

Ensure that your web design enable gracefully degrading which means that your design should do it in a way that allow older browsers to be used or letting users disable particular features, can "step down" to a method that still allows access to the basic content of the site, though perhaps not as snazzy in appearance.

24. Optimize Images

This is quite clear cut. Always optimize your image so that your pages load faster. Although images are the last one to be render. It is still equally important that your site load faster.

25. Post-load Component

Not all scripts or elements are necessary. Post-load component means postpone the loading to a later point of time. An example will be an image gallery, allowing the smaller image to be loaded up first as they are smaller and post-load all larger image. This way, user will get to see all the images which provide a better user experience.  All necessary things to render the page should be loaded and all other not so important element shall be post loaded. Since browser has a limitation on the number of files retrieve per domain, it is best for it to retrieve all the important things first.

26. Never Scale Images in HTML

If your image is size 10 render it as size 10. Scaling it on the browser will not only damage the overall display of your site. It also required more processing power from the browser which in reason in slower rendering of your website.

27. Avoid Filters

If you are using AlphaImageLoader filter to fix a problem with semi-transparent true color PNGs on earlier version of IE 7. Then you should stop as it blocks rendering and freeze the browser while the image is being downloaded.

28. HTML advertisements.

If you display advertisements on your website, you may notice a decrease in load speed if you are using JavaScript ads. Consider opting for HTML ads instead.

29. Use the PNG format for images

PNG image files are smaller and render better. Furthermore, quality is better in compare to gif and jpeg. Of course, PNG image also has its own disadvantages.

30. Error Free

Ensure that both JavaScript and CSS contain no or minimum error. So that the browser will not have to do additional stuff due to some error occurs in your code.

31. Remove anything you don't need

Especially in JavaScript and CSS. Often there are extra lines of code that are redundant.  It is best to check!

32. Use Shorthand Notation.

If you don't practice this in CSS, I think you better should as shorthand notation is another way of optimizing CSS files.

33. Tile your backgrounds

Using a small background image and make it repeats in x and y axis will help reduce a lot of download times which make your website render faster.

34. Opt for CSS rollovers

If you are a pure programmer and meet JavaScript framework, you will most likely write your animation on your element. It is best to use what is already in the browser than trying to recreate something that is available. Use CSS hover method instead which reduce both JavaScript and CSS code!

35. Use CSS instead of tables for layout

Using table to layout your site have many disadvantages over layout with CSS. The most obvious one is that there is more HTML element on your page which increases both download and render work. The other disadvantage is the difficulty of maintenance by human being. Trust me I have been there before.

36. Consistency

Write your HTML element in lower case. Browser is not very smart when they differentiate between  

If you are not using Firefox, you may lose out the advantages that Mozilla Firefox has provided for web developers. But this doesn't means that you must develop in Mozilla Firefox. Some people will prefer to develop their web application on some other browser instead on Mozilla Firefox especially when majority of the normal users are using Internet Explorer as their default browser. For Mozilla Firefox developers, there is a list of useful plugin that may be useful for you. Nonetheless, this article will also be equally interesting for your collection. Web based tools has become a powerful tool for many users nowadays not only developers and designers are using it but even normal users love it. In this article, i will share with you a list of web based tools which i personally keep. Hopefully, you can use it and speed up your own web development. Please take note that the 28 in the title is the initial release of tools i have, this post will be updated with more web based tools in the future. If anyone suggested something good for web based tools or i found any, i will update this list again. I believe this will be the largest collection of web based tools on the internet which is consistently updated and maintained.

Koders

Koders a search engine that allows you to search for any codes not only PHP. There are many valuable source code available in Koders that you should be aware of. This is a must have link for your web development need! This will definitely speed up your development process.

gotAPI

This is also another must have link. gotAPI is another search engine that provides you with the essential API for your reference need.  It allows you to search for any methods or rule for that particular language. This is not only limited to the above picture shown on their website. They also provides API for frameworks and application language API such as C++, j2SE and lots more. MUST CHECK THIS OUT! This is a one stop reference need for your web development!

POG

POG is a web based tool that automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application. This way you won't have to repeatly generate all these codes manually whenever you want to start a new PHP class. It makes your backend web development quicker and more secure for beginner objecct oriental programmers in PHP.

PHPAnyWhere

This online editor gives you one best thing. Portable. Imagine you do not have to keep any codes and editor with you when you are outstation or your computer just breaks down? If you are a busy person who is required to handle both family and work. This maybe the thing you are looking for. It allows you to code anywhere and definitely speed up your web development and secure your coding copies.

CompressorRater

Compressor rater compress your javascript and rate those compressing algorithm in each library such as YUI compressor, gzip, etc.. This is useful to compress your javascript codes with more than 1 library and get the smallest site to optimal your website load time. It provides you with the duration and the amount of size reduced by the library. This means that no matter what, there will always be one library out there that can compress and optimize your complex javascript codes. Optimize your web development now!

Javascript Regular Expression Validator

Need a JavaScript validator for your regular expression? Try this site. Other than validation, it also provides you with useful library and resources for you to work with regular expression.

Javascript beautifier

This is not something really impressive about but its something i need. Especially when I'm writing tutorials to share as i tend to write my codes in 1 straight line without break,this web based JavaScript application helps organize my code neatly so that my visitor can read and understand. Definitely a useful JavaScript organizer for my web development need.

JavaScript Regex Generator

This is one of the kind. This helps simplify your brain and optimize your web development by generating regular expression for your pattern matching need.

JSBin

JSBin is used to test your snippets of codes on the fly. Just paste all your codes into JSBin and debug your code in there.  You can save the snippets and share with others online. People can review and help you with this snippets URL you provide. However, if the URL is being left alone for 3 months without review by anyone, it will automatically be deleted from the server.

JSLint

JSLint is one of the hardly see JavaScript online verifier. It verify your codes to see if there is any errors on your JavaScript. There are many features and settings that you can use to customize verification algorithms to suit your needs. If there is no debugging tools, you should use this.

CleanCSS

Unlike many CSS compressor out there which may possible cause your CSS to break down, CleanCSS provides you with a 'only safe optimizing' option. It also provides many other related things other than optimizing and compressing. It helps you to format you CSS nicely for viewing purposes too. Other features include merge shorthand,sorting and etc.

CSS Redundancy Checker

Have many CSS rules and forgotten which one is useless? CSS Redundancy checker can help you! It helps you check which CSS rule is currently not in use and can be removed safely. Perfect stuff for optimize web development purposes.

Selectoracle

This is something you may like if you are not a professional CSS coder and wish to understand the code written by certain code. Selectoracle translates your CSS rule set into pure English so that you could understand and improve your CSS skill. Definitely great stuff for people who just started or is interested in getting their CSS skill brush up.

Tinglets

A cross browser CSS web application. Tingelets are a set of bookmarklets that you can be placed in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s). This tells you where have your dynamic content has disappeared to and it make tracing easier.

PXtoEM.com

This is one of the tool you will only find one way either px to em or em to px. This web base tool provides both way!(finally)  It is extremely useful for you when dealing with css and dynamic effect. Finding the exact pixel or em will really save you a lot of time on web development

Conditional CSS

Don't wish to write weird symbols just to perform some hack that some browser cannot be detected? Use conditional CSS instead. It allows you to write CSS rule set in conditional if-else case. This way you can cater for all different browser need without losing readability of your CSS rule set.

CSSFly

Mozilla Firefox has webdeveloper addon extension for editing CSS on the fly. Other browser have CSSFly! CSSFly not only allows you to edit your CSS but also xHTML on real time to build up your template before throwing the CSS or xHTML code to your web server. Debugging has never been easier with CSSFly. This is one of the most useful web based application you should know when debugging any layout issues with other browsers.

Pingdom Tools

Pingdom test your web efficiency just like YSlow in Firefox, Unlike YSlow, it does not tell you what to improve. But with information on which page is rendering slowly, you should be able to improve your site in no time!

W3C CSS Validation

Unfortunately, CleanCSS does not have a validation service built-in for you. Before you use CLEANCSS, it is best to validate your CSS. What place more reliable than the old W3C Offical site CSS validation service?

W3C HTML Markup Validation

The official W3C HTML Markup validation service. When all fail, this is most reliable!

mobiReady

Using mobile phone for surfing purposes is getting more and more common nowadays. Ensuring that your site is also compatible to mobile web browser is equally important nowadays. mobiReady is a testing tool to evaluates mobile-readiness using industry best practices & standards. It provides you with a report and a in-depth analysis on how well your site performs on a mobile  device. Want to cater for mobile user? This web based tool is something you cannot miss.

Wave

WAVE is a free web accessibility evaluation tool. It helps you to check any broken link on your page and report back to you. As you know, even humans do not like broken links not to mention search engine spiders. It is important that you ensure that your site is free from broken links! There is also a Firefox addon for WAVE.

Browsershot

Browsershots is a web based tool that makes screen shots of your web design in different browsers. This way you will know whether your website is having problem with other older browsers that user might be using currently. It has many browser support and is able to test your site compatibility with different screen size. Excellent for testing your web development design!

Webwait

WebWait work similar as PingDom, the differences is that webwait allows you to bring up a bookmark icon and benchmark any website you came across. If PingDom doesn't work for you, webwait will definitely serve you unconditionally.

test everything

This is a crazy web based tool. It basically allows you to test EVERYTHING. From SEO to Validation to quality, its everything. If you are not aware of this tool. You should visit them up and play with it. Its really interesting.

TAW

Unlike WAVE which is also a web accessibility testing tool, TAW is like an old man telling you and advicing you what you should not do and what you should have done on your site. In order to improve your site web accessibility.

Geotak Netrender

Ever wonder how will your website looks like when it goes way down to IE4.0? If you have like i do (which scare the hell out of me), you should visit this site.  It provides you with various version of Internet explorer for you to test your website. This web based tool helps verify your website compatibility with Internet Explorer.

Net2FTP

Don't have a ftp application on the PC you are using right now? Use this web based ftp instead. It is very easy to use and allows you to ftp anywhere!

Update After initial Post

Total Validator

Total Validator is a free one-stop all-in-one validator comprising a HTML validator, an accessibility validator, a spelling validator, a broken links validator, and the ability to take screenshots with different browsers to see what your web pages really look like. Something impressive that i missed. This is something you must bookmark for your web development.

HTML Tidy

Some company web portal pages are just horrible. Looking at how the HTML is being written all over the place just give me headache. If you are like me, try HTML Tidy and it might just save your time on your web development.

Rockstar Apps

There are two application currently in Rockstar Apps that can definitely assist you on your web development need, Rockstar Optimizer and Web Profiler. RockStar Optimizer helps you optimize your website entirely by compressing, concatenating, rebuilding your CSS and JavaScript. On the other hand, Rockstar Web Profiler give you in deep information on your web application and site. Information such as the duration spend on server and client side, resources being used in a chart and etc. which is of course more powerful than most simple web based application. But you will have to register in order to use. It is a free service by Rockstarapps.com. Credit goes to Bob who suggested this amazing tools.

prettyprinter (27/04/2009)

This is a multi code beautifier! it can beautifier PHP, Java, C++, C, Perl, JavaScript, CSS in one box. This means that if you have multiple different languages in your code, this can be in great help when individual beautifier won't work. An example will be HTML+CSS+JavaScript page.

HTML2PDF converter (29/6/2009)

Tired getting on to website just to take a look at those web cheat sheet? This safe LOT's of time by converting all these cheatsheet on the web into pdf and save them into your local computer. Definitely make your life easier looking at cheat sheet instantly on the wall!

Strip Generator (29/6/2009)

i haven't found my love for this application yet. But this application help you create the perfect strip for your web design. Pretty easy and cool. Most designer will love this site.

URL2jpg (29/06/2009)

JavaScript CSS properties references (08/08/2009)

Don't know which element properties can be used while coding in JavaScript to style your document? This site provides you with all the necessary CSS properties references that can be used in JavaScript!

Don't want to change to pdf format? Change your cheatsheet to jpg format instead! Just place them into the url and convert them to a size selected and your web cheat sheet will instantly become an image for your wallpaper!

Color Suckr

Something necessary for your web designing process. This online tool helps you create a color scheme out of the image you use in your web design!

Aviary Screen Capture

This might be the next cross browser checking tools you will be using in the future. This is a screen capture tool but currently do not have the ability to capture screen with different browser yet. However, it is being implemented. We shall wait and see!

Hurl

Hurl Overview from defunkt on Vimeo.

The video said it all. Other than just sending HTTP Request, there are, of course, other things that can be done with this tool.

Spoon Browser

An interesting web based tool that allows you to run different version of browser on your local disk without the necessary to install the standalone version. However, it does required you to install a plugin in order for all these to work. But you will be able to run different type and version of browser to test your web site. Pretty cool.

HTML Entity Character Lookup

This web based tools allows you to quickly search for any HTML entity character with just a few click. Something both Web developers and designers would really LOVE to have. This tools really help reduce time to search for a particular entity on Google!

Anything Else?

The above materials are arrange according to groups. Hope this is useful for you guys! Any other fine made web based tools that you are using for your web development and i'm not? Inform me about it!