Empty image src can destroy your site

admin — Sun, 28 Mar 2010 11:18:52 +0000

This is a problem I’ve come across frequently, and since it has come up again recently, I thought I’d explore this issue in the hope that it will save others some trouble. There are so many problems that this one issue can lead to that it’s baffling browsers still behave this way. The issue? An HTML image, either via tag or JavaScript Image object, that has its src set to “” (an empty string).

The offending code

There are basically two patterns to identify. The first pattern is just straight HTML:

The second pattern is JavaScript and involves the dynamic setting of the src property on either a newly created image or an existing one:

var img = new Image();
img.src = "";

Both patterns cause the same effect: another request is made to your server. There are two different ways that browsers do this.

Internet Explorer makes a request to the directory in which the page is located. For example, if you have a page running at http://www.example.com/dir/mypage.htm that has one of these patterns, IE makes a request to http://www.example.com/dir/ to fill in the image.
Safari and Chrome make a request to the actual page itself. So the page running at http://www.example.com/dir/mypage.htm results in a second request to http://www.example.com/dir/mypage.htm to fill in the image.

You’ll note that Opera and Firefox aren’t mentioned at all. Opera behaves as you might expect: it doesn’t do anything when an empty image src is encountered; the attribute is ignored. Firefox 3 and earlier behave the same as Safari and Chrome, but Firefox 3.5 addressed this issue and no longer sends a request (related bug).

Both cases, of course, are problematic because it’s an image making a request for a document. You can easily see this behavior using an HTTP debugging proxy (I highly recommend Fiddler).

The problems

There are two basic problems that this browser behavior causes. The first is a traffic spike. Imagine that have on the page at http://www.example.com/. The big problem is that each instance of makes a request to / in all browsers, which is the homepage of the domain. Congratulations, you’ve effectively doubled your traffic to the homepage.

For small sites, this may not be that big of a deal; jumping from 10,000 to 20,000 page views probably isn’t going to raise any flags for you or your host. If you’re a page that gets millions of page views per day, and probably have a lot of machines to handle that load, doubling or tripling traffic can be crippling. You can very easily run out of capacity.

Another issue with the traffic increase is the computing power needed to generate that homepage. If the page is personalizable or is updated with some regular frequency, you could be wasting computing cycles creating a page that will never be viewed by anyone.

The second problem is user state corruption. If you’re tracking state in the request, either by cookies or in another way, you have the possibility of destroying data. Even though the image request doesn’t return an image, all of the headers are read and accepted by the browser, including all cookies. While the rest of the response is thrown away, the damage may already be done.

How does this code happen?

The first time I encountered this problem, I naively thought that it was a bad developer writing crappy code. Had this been 2000 or earlier, I probably would have been right. In today’s web development world, however, I’m mostly wrong. Today, there are so many templating engines and content management systems responsible for constructing pages on-the-fly that it’s quite possible for good developers to end up producing pages with this code. All it takes is something as simple as this PHP:

If some other part of the code is responsible for filling in $imageUrl, and that code fails, then the offending code gets output to the browser.

In today’s web development world, we’re all doing something along these lines, whether we know it or not. Download a new Wordpress theme? Make sure you’ll filled in all default arguments. Using a CMS at work? Make sure all your image URL fields are validated. It’s frightening easy to end up with this bad code on your page.

Other tags with problems

Before getting too angry at browser vendors, I think it’s fair to take a look at the HTML 4 specification, specifically the part defining images. Even though the specification indicates that the src attribute should contain a URI, it fails to define the behavior when src doesn’t contain a URI. Of course, images aren’t the only tags that reference an external resource, and so it should come as no surprise that there are other tags with the same problem.

As it turns out, Internet Explorer is the most sane browser out there. It’s problems are thankfully limited to images with an empty src attribute. It does make for this by making it a pain to detect, but that will be discussed later.

For other browsers, there are two additional problem scenarios:


An alternative in PHP would be to create a function called insertScript.
      

In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts, such as dependency checking and adding version numbers to script filenames to support far future Expires headers.
top | discuss this rule
Configure ETags
tag: server
Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the ETag response header.
      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.

      GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a given file may reside in the same directory across multiple servers, and have the same file size, permissions, timestamp, etc., its inode is different from one server to the next.

IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track configuration changes to IIS. It’s unlikely that the ChangeNumber is the same across all IIS servers behind a web site.

The end result is ETags generated by Apache and IIS for the exact same component won’t match from one server to another. If the ETags don’t match, the user doesn’t receive the small, fast 304 response that ETags were designed for; instead, they’ll get a normal 200 response along with all the data for the component. If you host your web site on just one server, this isn’t a problem. But if you have multiple servers hosting your web site, and you’re using Apache or IIS with the default ETag configuration, your users are getting slower pages, your servers have a higher load, you’re consuming greater bandwidth, and proxies aren’t caching your content efficiently. Even if your components have a far future Expires header, a conditional GET request is still made whenever the user hits Reload or Refresh.
If you’re not taking advantage of the flexible validation model that ETags provide, it’s better to just remove the ETag altogether. The Last-Modified header validates based on the component’s timestamp. And removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests. This Microsoft Support article describes how to remove ETags. In Apache, this is done by simply adding the following line to your Apache configuration file:

      FileETag none

top | discuss this rule
Make Ajax Cacheable
tag: content
One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won’t be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It’s important to remember that “asynchronous” does not imply “instantaneous”.
To improve performance, it’s important to optimize these Ajax responses. The most important way to improve the performance of Ajax is to make the responses cacheable, as discussed in Add an Expires or a Cache-Control Header. Some of the other rules also apply to Ajax:

 Gzip Components

 Reduce DNS Lookups
  
 Minify JavaScript
  
 Avoid Redirects
  
 Configure ETags



Let’s look at an example. A Web 2.0 email client might use Ajax to download the user’s address book for autocompletion. If the user hasn’t modified her address book since the last time she used the email web app, the previous address book response could be read from cache if that Ajax response was made cacheable with a future Expires or Cache-Control header. The browser must be informed when to use a previously cached address book response versus requesting a new one. This could be done by adding a timestamp to the address book Ajax URL indicating the last time the user modified her address book, for example, &t=1190241612. If the address book hasn’t been modified since the last download, the timestamp will be the same and the address book will be read from the browser’s cache eliminating an extra HTTP roundtrip. If the user has modified her address book, the timestamp ensures the new URL doesn’t match the cached response, and the browser will request the updated address book entries.
Even though your Ajax responses are created dynamically, and might only be applicable to a single user, they can still be cached. Doing so will make your Web 2.0 apps faster.
top | discuss this rule
Flush the Buffer Early
tag: server

 When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page.

 During this time, the browser is idle as it waits for the data to arrive.

 In PHP you have the function flush().

 It allows you to send your partially ready HTML response to the browser so that

 the browser can start fetching components while your backend is busy with the rest of the HTML page.

 The benefit is mainly seen on busy backends or light frontends.


    A good place to consider flushing is right after the HEAD because the HTML for the head is

    usually easier to produce and it allows you to include any CSS and JavaScript

    files for the browser to start fetching in parallel while the backend is still processing.
Example:
      ... 

    
    
    
      ... 


Yahoo! search pioneered research and real user testing to prove the benefits of using this technique.
top
Use GET for AJAX Requests
tag: server

    The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process:

    sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies).

    The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.
An interesting side affect is that POST without actually posting any data behaves like GET.

Based on the HTTP specs, GET is meant for retrieving information, so it

        makes sense (semantically) to use GET when you’re only requesting data, as opposed to sending data to be stored server-side.

top
Post-load Components
tag: content

    You can take a closer look at your page and ask yourself: “What’s absolutely required in order to render the page initially?”.

    The rest of the content and components can wait.


    JavaScript is an ideal candidate for splitting before and after the onload event. For example

    if you have JavaScript code and libraries that do drag and drop and animations, those can wait,

    because dragging elements on the page comes after the initial rendering.

    Other places to look for candidates for post-loading include hidden content (content that appears after a user action) and images below the fold.


    Tools to help you out in your effort: YUI Image Loader allows you to delay images

    below the fold and the YUI Get utility is an easy way to include JS and CSS on the fly.

    For an example in the wild take a look at Yahoo! Home Page with Firebug’s Net Panel turned on.

    It’s good when the performance goals are inline with other

    web development best practices. In this case, the idea of progressive enhancement tells us that JavaScript, when supported, can

    improve the user experience but you have to make sure the page works even without JavaScript. So after you’ve made sure the page

    works fine, you can enhance it with some post-loaded scripts that give you more bells and whistles such as drag and drop and animations.

top
Preload Components
tag: content

    Preload may look like the opposite of post-load, but it actually has a different goal.

    By preloading components you can take advantage of the time the browser is idle and request components

    (like images, styles and scripts) you’ll need in the future.

    This way when the user visits the next page, you could have most of the components already in

    the cache and your page will load much faster for the user.

    There are actually several types of preloading:


Unconditional preload – as soon as onload fires, you go ahead and fetch some extra components.

        Check google.com for an example of how a sprite image is requested onload. This sprite image is

        not needed on the google.com homepage, but it is needed on the consecutive search result page.
Conditional preload – based on a user action you make an educated guess where the user is headed next and preload accordingly.

        On search.yahoo.com you can see how some extra components are requested

        after you start typing in the input box.
Anticipated preload – preload in advance before launching a redesign. It often happens after a redesign that you hear:

        “The new site is cool, but it’s slower than before”. Part of the problem could be that the users were visiting your old site with a

        full cache, but the new one is always an empty cache experience. You can mitigate this side effect by preloading some

        components before you even launched the redesign. Your old site can use the time the browser is idle and request images and scripts

        that will be used by the new site

top
Reduce the Number of DOM Elements
tag: content

    A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference

    if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.


    A high number of DOM elements can be a symptom that there’s something that should be improved with the markup

    of the page without necessarily removing content.

    Are you using nested tables for layout purposes?

    Are you throwing in more 
s only to fix layout issues?

    Maybe there’s a better and more semantically correct way to do your markup.


    A great help with layouts are the YUI CSS utilities:

    grids.css can help you with the overall layout, fonts.css and reset.css

    can help you strip away the browser’s defaults formatting.

    This is a chance to start fresh and think about your markup,

    for example use 
s only when it makes sense semantically, and not because it renders a new line.

    The number of DOM elements is easy to test, just type in Firebug’s console:

        document.getElementsByTagName('*').length


    And how many DOM elements are too many? Check other similar pages that have good markup.

    For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

top
Split Components Across Domains
tag: content

    Splitting components allows you to maximize parallel downloads. Make sure you’re using

    not more than 2-4 domains because of the DNS lookup penalty.

    For example, you can host your HTML and dynamic content

    on www.example.org

    and split static components between static1.example.org and static2.example.org

    For more information check

    “Maximizing Parallel Downloads in the Carpool Lane” by Tenni Theurer and Patty Chi.
top
Minimize the Number of iframes
tag: content

    Iframes allow an HTML document to be inserted in the parent document.

    It’s important to understand how iframes work so they can be used effectively.


     pros:


Helps with slow third-party content like badges and ads
Security sandbox
Download scripts in parallel


     cons:


Costly even if blank
Blocks page onload
Non-semantic

top
No 404s
tag: content
    HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found)

    is totally unnecessary and will slow down the user experience without any benefit.


    Some sites have helpful 404s “Did you mean X?”, which is great for the user

    experience but also wastes server resources (like database, etc).

    Particularly bad is when the link to an external JavaScript is wrong and the result is a 404.

    First, this download will block parallel downloads. Next the browser may try to parse

    the 404 response body as if it were JavaScript code, trying to find something usable in it.

top
Reduce Cookie Size
tag: cookie

    HTTP cookies are used for a variety of reasons such as authentication and personalization.

    Information about cookies is exchanged in the HTTP headers between web servers and browsers.

    It’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time.


    For more information check

    “When the Cookie Crumbles” by Tenni Theurer and Patty Chi.

    The take-home of this research:



Eliminate unnecessary cookies
Keep cookie sizes as low as possible to minimize the impact on the user response time
Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

top
Use Cookie-free Domains for Components
tag: cookie

    When the browser makes a request for a static image and sends cookies together with the request,

    the server doesn’t have any use for those cookies. So they only create network traffic for no good

    reason. You should make sure static components are requested with cookie-free requests. Create

    a subdomain and host all your static components there.


    If your domain is www.example.org, you can host your static components

    on static.example.org. However, if you’ve already set cookies on the top-level domain

    example.org as opposed to www.example.org, then all the requests to

    static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static

    components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com,

    Amazon uses images-amazon.com and so on.

    Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache

    the components that are requested with cookies.

    On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact.

    Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the

    www subdomain and

    write the cookies to that subdomain.

top
Minimize DOM Access
tag: javascript

    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


    For more information check the YUI theatre’s

    “High Performance Ajax Applications”
    by Julien Lecomte.

top
Develop Smart Event Handlers
tag: javascript

    Sometimes pages feel less responsive because of too many event handlers attached to different

    elements of the DOM tree which are then executed too often. That’s why using event delegation is a good approach.

    If you have 10 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.

    You also don’t need to wait for the onload event in order to start doing something with the DOM tree.

    Often all you need is the element you want to access to be available in the tree. You don’t have to wait for all images to be downloaded.
    DOMContentLoaded is the event you might consider using instead of onload, but until it’s available in all browsers, you

    can use the YUI Event utility, which has an onAvailable method.


    For more information check the YUI theatre’s

    “High Performance Ajax Applications”
    by Julien Lecomte.

top
Choose  over @import
tag: css

    One of the previous best practices states that CSS should be at the top in order to allow for

    progressive rendering.


    In IE @import behaves the same as using  at the bottom of the page, so it’s best not to use it.

top
Avoid Filters
tag: css

    The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7.

    The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded.

    It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.


    The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE.

    If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

top
Optimize Images
tag: images

    After a designer is done with creating the images for your web page, there are still some things you can try before you

    FTP those images to your web server.


You can check the GIFs and see if they are using a palette size corresponding

        to the number of colors in the image. Using imagemagick it’s easy to check using

        

        identify -verbose image.gif

        When you see an image useing 4 colors and a 256 color “slots” in the palette, there is room for improvement.
    

        Try converting GIFs to PNGs and see if there is a saving. More often than not, there is.

        Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past.

        The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don’t

        support variable transparency either.

        So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations).

        This simple imagemagick command results in totally safe-to-use

        PNGs:

        convert image.gif image.png

        

        “All we are saying is: Give PiNG a Chance!”
    

        Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:

        

        pngcrush image.png -rem alla -reduce -brute result.png
    

        Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize

        and remove comments and other useless information (such as EXIF information) from your images.

        
        jpegtran -copy none -optimize -perfect src.jpg dest.jpg
    

top
Optimize CSS Sprites
tag: images

Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
“Be mobile-friendly” and don’t leave big gaps between the images in a sprite. This doesn’t affect the file size as much

        but requires less memory for the user agent to decompress the image into a pixel map.

        100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels
        

top
Don’t Scale Images in HTML
tag: images
    Don’t use a bigger image than you need just because you can set the width and height in HTML.

    If you need 

        

    

    then your image (mycat.jpg) should be 100×100px rather than a scaled down 500×500px image.
top
Make favicon.ico Small and Cacheable
tag: images

    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.
    


    Imagemagick can help you create small favicons

top
Keep Components under 25K
tag: mobile

    This restriction is related to the fact that iPhone won’t cache components bigger than 25K.

    Note that this is the uncompressed size. This is where minification is important

    because gzip alone may not be sufficient.


    For more information check “Performance Research, Part 5: iPhone Cacheability – Making it Stick” by Wayne Shea and Tenni Theurer.

top
Pack Components into a Multipart Document
tag: mobile
    Packing components into a multipart document is like an email with attachments,

    it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive).

    When you use this technique, first check if the user agent supports it (iPhone does not).
Avoid Empty Image src
tag: server
Image with empty string src attribute occurs more than one will expect. It appears in two form: 

straight HTML



JavaScript

var img = new Image();

img.src = “”;



Both forms cause the same effect: browser makes another request to your server.

Internet Explorer makes a request to the directory in which the page is located.
Safari and Chrome make a request to the actual page itself.
Firefox 3 and earlier versions behave the same as Safari and Chrome, but version 3.5 addressed this issue[bug 444931] and no longer sends a request.
Opera does not do anything when an empty image src is encountered.



Why is this behavior bad? 


Cripple your servers by sending a large amount of unexpected traffic, especially for pages that get millions of page views per day.
Waste server computing cycles generating a page that will never be viewed.
Possibly corrupt user data. If you are tracking state in the request, either by cookies or in another way, you have the possibility of destroying data. Even though the image request does not return an image, all of the headers are read and accepted by the browser, including all cookies. While the rest of the response is thrown away, the damage may already be done.


The root cause of this behavior is the way that URI resolution is performed in browsers.

This behavior is defined in RFC 3986 – Uniform Resource Identifiers.

When an empty string is encountered as a URI, it is considered a relative URI and is resolved according to the algorithm defined in section 5.2. This specific example, an empty string, is listed in section 5.4. Firefox, Safari, and Chrome are all resolving an empty string correctly per the specification, while Internet Explorer is resolving it incorrectly, apparently in line with an earlier version of the specification, RFC 2396 – Uniform Resource Identifiers (this was obsoleted by RFC 3986). So technically, the browsers are doing what they are supposed to do to resolve relative URIs. The problem is that in this context, the empty string is clearly unintentional.


HTML5 adds to the description of the  tag’s src  attribute to instruct browsers not to make an additional request in section 4.8.2:

    The src attribute must be present, and must contain a valid URL referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. If the base URI of the element is the same as the document’s address, then the src attribute’s value must not be the empty string.

Hopefully, browsers will not have this problem in the future. Unfortunately, there is no such clause for  
“text/javascript” src=“anotherScript.js”> 
 


....




Why Does This Help?
Most current browsers can download a maximum of two components in parallel for each host name. However, when downloading a script, no other downloads can occur. That download must finish before moving forward.
So, when feasible, it makes perfect sense to move these files to the bottom of your document in order to allow the other components (images, css, etc) to load first.
When Deploying, Compress CSS and Javascript Files

If perfomance is paramount for your website, I strongly suggest that you consider compressing your CSS and Javascript files just before deployment. Don’t bother doing it at the beginning of your development. It’ll only cause more frustration than help. However, once the bow has been tied, compress those babies up.
Javascript Compression Services

Javascript Compressor
JS Compressor

CSS Compression Services

CSS Optimiser
CSS Compressor
Clean CSS

Two other helpful tools for packing JavaScript code are YUI Compressor, and JSMin.
Additionally, you have the option of compressing your HTML – though I wouldn’t recommend it. The file reduction is negligible.
jQuery “Quick Tip” Roundup

Not too long ago, Jon Hobbs-Smith from tvidesign.co.uk posted a fantastic article that details 25 jQuery tips. Be sure to bookmark this page! Here are several of my favorites.
Check if an element exists.


view plaincopy to clipboardprint?


if ($(‘#myDiv).length) { 
 // this code will only run if the div with an id of #myDiv exists. 
} 


if ($('#myDiv).length) {
  // this code will only run if the div with an id of #myDiv exists.
}
Use a Context
Many people don’t realize that, when accessing dom elements, the jQuery function accepts a second parameter – “context”. Consider the following…


view plaincopy to clipboardprint?


var myElement = $(‘#someElement’); 


var myElement = $('#someElement');
This code will require jQuery to traverse the entire DOM. We can improve the speed by using a context as the second parameter.


view plaincopy to clipboardprint?


var myElement = $(‘#someElement’, $(‘.someContainer’)); 


var myElement = $('#someElement', $('.someContainer'));
Now we’re telling jQuery to only search within the .someContainer element, and to ignore everything outside of it.
Use IDs Instead of Classes
When accessing IDs with jQuery, the library uses the traditional “getElementById” method. However, when accessing classes, jQuery must use its own methods to traverse the dom (there isn’t a native “getElementByClass” method). As a result, it takes a bit longer!
Review All 25 Tips! 
Use $_GET instead of $_POST, if Possible


If you have the choice between $_GET or $_POST when making AJAX calls, choose the former.
“The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies).” – Developer.Yahoo.com
Remember – don’t blindly use $_GET. Make sure you know exactly what you’re doing first. For example, under no circumstances should you mix the querystring and database access. Not too long ago, one of my Twitter buddies sent me an image of a live website containing a MYSQL query in the url. DON’T DO THIS! 




When Practical, Use Libraries and Frameworks

Whether you’re using PHP, ASP.NET, Mootools, jQuery – or a combination of all of them, consider using frameworks when appropriate.
For example:

 if I’m running a simple static website and only need a small bit of Javascript to create a rollover effect, importing the jQuery script will be inappropriate.
If the most complicated feature of my static website is pulling in an XML file, I don’t need to use a framework. In such instances, my site will suffer and cost me more money in extra bandwidth expenditures.

However, if I’m building a complicated site that requires a full CMS and complicated data access, I’ll take a look at one of my preferred language’s frameworks.
Remember – make frameworks work for you; not the other way around. Be smart when making these decisions.
YSlow

YSlow is a wonderful service that checks your website to ensure that it’s as efficient as possible. The Yahoo Dev team, not too long ago, created a set of guidelines, or best practices, that should be followed when developing – many of which are detailed in this article, actually.
There’s a great YSlow screencast that demonstrates many time saving techiques. I highly recommend that you view it when you have the chance.

Keyboard Shortcuts. Learn Them!

Most experienced designers/developers will agree with me; if I had to go up to the toolbar menu every time I wanted to make a change to my site or design, I’d be lost. I’ve been using keyboard shortcuts for so long that I don’t know the correct location anymore for these commands. I just know that “Shift X” opens the correct panel.
At first, it can seem like wasted knowledge. But, I assure you that it isn’t. I recommend that you do a Google search for “X keyboard shortcuts” – where X is equal to your software (i.e. Photoshop). Print the chart out and place it next to your computer. Over the next few weeks, practice touching your mouse as little as possible. This is one thing that separates the pros from the hobbyists.
Create a “New Website” Template

Let’s face it; not every website needs to be some huge and complicated application. Sometimes, we simply want to display our portfolio – probably most of the time for some! In these instances, why not create a simple “template” that contains everything you need to get started.
Within my template folder, I have nested “JS” and “CSS” folders.

The former contains my “DD_belatedPNG.js” file (adds 24 bit transparency to PNGs in IE6).
The latter simply contains a blank “default.css” file, and my own custom reset file.

In addition, I have an “index.html(php)” file that contains a few code snippets that I use on most of my projects. It’s nothing too fancy, but it saves time!


view plaincopy to clipboardprint?


> 
<html xmlns=“http://www.w3.org/1999/xhtml”> 
<head> 
 
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ /> 
<link rel=“stylesheet” href=“css/reset.css” /> 
<link rel=“stylesheet” href=“css/default.css” /> 
 
> 
<script type=“text/javascript” src=“js/DD_belatedPNG_0.0.7a-min.js”>script> 
> 
 
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”>script> 
<title>Untitled Documenttitle> 
 
<script type=“text/javascript”> 
 $(function() { 
 
 }); 
script> 
 
head> 
 
<body> 
 
<div id=“container”> 
 
div> 
 
body> 
html> 














Untitled Document













As you can see, I reference my CSS and Javascript files, link to Google’s jQuery file, create the document.ready() jQuery function, and open up the standard “container” div.
It’s rather simplistic, but SAVES TIME. So every time you create a new website, simply copy your “template” folder and dig in.
Inline Vs. External

Generally speaking, all of your CSS and Javascript should be removed from the page and placed in their own respective external files.
Why Should We Do This?

Cleaner code.
Separation of presentation and content is crucial.
By using external files, the data will be cached for future use. This reduces the HTML file size without causing an additional HTTP request – because of the caching.

If you only have a few basic styles, an exception can be made. In those, and only those instances, it might be beneficial to include them in the HTML page.
Determine if a PHP Script Was Called With Javascript

AJAX is all the rage right now – mostly because it’s finally become relatively user-friendly, thanks to Javascript libraries. In some instances, you need to have a way to determine if the script was called with Javascript. There are a few days to accomplish this task.
One way would be to append a unique key-value pair with Javascript when sending the POST. You could then use PHP to determine if that particular key exists. If it does, we know that Javascript is enabled.
A better way would be to use a built in PHP feature called “HTTP_X_REQUESTED_WITH”. To illustrate…


view plaincopy to clipboardprint?


if isset($_SERVER['HTTP_X_REQUESTED_WITH']) { 
 // write some code and rest assured that the Javascript is enabled. 
} else { 
 // Do something different to compensate for users that have JS turned off. 
} 


if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
  // write some code and rest assured that the Javascript is enabled.
} else {
  // Do something different to compensate for users that have JS turned off.
}
Link to Google’s CDN

Not too long ago, Google began hosting popular scripts such as jQuery. If you’re using such a library, it is strongly recommended that you link to Google’s CDN rather than using your own script.
AJAX Libraries API
How Come?

Caching: There is a possibility that your users won’t need to download the script at all! When a browser sees a request for a file that has already been downloaded onto the user’s computer, it recognizes this and returns a “304? response (NOT MODIFIED). For example, let’s imagine that one user visits thirty sites that all link to Google’s CDN. In this example, the user would only download jQuery once!
Improve Parallelism:  I spoke of this in a previous tip. By removing this extra request, the user’s browser can download more content in parallel.

Embrace Firefox Extensions

I’m a huge fan of Google’s Chrome. It opens extremely fast and processes Javascript quicker than any other browser – at least for now (I think the latest version of Firefox might have caught up.).
However, you won’t see me leaving Firefox any time soon. The number of helpful plugins available for the browser is astounding. Here’s a list of my favorites.

Web Developer Toolbar
S3 Organizer
Clippings
Firebug
IE Tab
FireFTP
DownThemAll
YSlow


When Helpful, Use an IDE

In the same way that it’s cool to hate Microsoft right now, it seems that it’s popular at the moment for  people to attack those who use IDEs when developing. This is just silly.
In many instances, the use of an advanced IDE is paramount – especially when working in OOP languages. Now, if you’re simply creating a small HTML template, programs like Notepad++ and Coda will work splendidly. Actually I’d recommend their usage in these instances. Don’t add the extra bloat if you don’t need it. However, when developing advanced applications, take advantage of an IDE.
That’s All Folks!
That should do it for now. Hopefully, a few of these (maybe all of them!) will help to make you a better designer and developer. What are some of your favorite short-cuts? Leave a comment below and let us know!

Witslog Wiki » Speed up a website

Empty image src can destroy your site

The offending code

The problems

How does this code happen?

Other tags with problems

Configure ETags

Make Ajax Cacheable

Flush the Buffer Early

Use GET for AJAX Requests

Post-load Components

Preload Components

Reduce the Number of DOM Elements

Split Components Across Domains

Minimize the Number of iframes

No 404s

Reduce Cookie Size

Use Cookie-free Domains for Components

Minimize DOM Access

Develop Smart Event Handlers

Choose over @import

Avoid Filters

Optimize Images

Optimize CSS Sprites

Don’t Scale Images in HTML

Make favicon.ico Small and Cacheable

Keep Components under 25K

Pack Components into a Multipart Document

Avoid Empty Image src

Why Does This Help?

When Deploying, Compress CSS and Javascript Files

Javascript Compression Services

CSS Compression Services

jQuery “Quick Tip” Roundup

Check if an element exists.

Use a Context

Use IDs Instead of Classes

Use $_GET instead of $_POST, if Possible

When Practical, Use Libraries and Frameworks

YSlow

Keyboard Shortcuts. Learn Them!

Create a “New Website” Template

Inline Vs. External

Why Should We Do This?

Determine if a PHP Script Was Called With Javascript

Link to Google’s CDN

How Come?

Embrace Firefox Extensions

When Helpful, Use an IDE

That’s All Folks!