After testing and studying many different options, we’ve optimized our script to generate images the fastest way possible. The process for generating the images and scripts for each page takes between one to two seconds and all the text elements are replaced at once when the image loads. Here is a quick list of our optimized performance.
- Only five header requests (including all the images)
- CSS sprites for images
- Image caching
Only 5 Header Requests:
We’ve minimized the header request to speed up the process of generating the images and improved performance. According to Yahoo YSlow
“80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.” YSlow – Minimize HTTP Requests
To ease the process of using our script, the script (1st header request) will send the text and style to our server (2nd header request). Once that process is completed, the script will call another script (3rd header request) that was generated specially for the page the user is viewing. Finally, All the text elements will be replaced with a spacer image (4th header request) and use one image (5th header request – using CSS Sprites) as a background for all the text replacement. All the files are small (less than 8KB plus the text replacement) and the process takes less than two seconds.
CSS Sprites for Images
CSS Sprites are the preferred method for reducing the number of image requests. Combine all the images in your page into a single image and use the CSS background-image and background-position properties to display the desired image segment. in depth explanation.
Not for IE6 and lower or Opera
To speed the process of viewing images, we cache all our image on the browser cache and on the server. Each PNG image expiration is set to ten years from the day it’s created. Also, all the images are cached in the server, which means the image is generated dynamically once and saved in the server. When it’s requested again, the saved image is called instead. However, you can always update the images on your site when the content is changed. The new images will be generated and cached again.