|javedisaac||Date: Thursday, 12.22.2011, 7:32 PM | Message # 1|
Computer Science And Technology Articles
|Here are a few simple and best ways to improve the speed of your website with okPakistani.com. Evaluates the performance of web pagesand get suggestions on how to improve them. |
Why focus on front-end performance?
10 Useful Tools for Improving Web Performance
1) Browserscope is a community-driven project for profiling web browsers http://www.browserscope.org/
2) SpriteMe is a bookmarklet plugin that allows for easy generation of CSS Sprites. CSS Sprites are a method to improve page load time by combining multiple background images into a single image http://spriteme.org/
3) Aptimize is a commercial Web accelerator that quickly improves Web performance http://www.aptimize.com/
4) Cesium is a Mozilla project for programmatically collecting and monitoring YSlow (http://developer.yahoo.com/yslow/) Web performance statistics http://cm-cesium01.mozilla.org/https://wiki.mozilla.org/Webdev:Cesium
5) MSFast is Myspace’s browser plugin for debugging and analyszing Page performance. Myspace also featured a utiliy for analyzing Flash SWF Object performance, which is not currently available yet, but may be included in MSFast in the future. http://msfast.myspace.com/
6) Jiffyweb Jiffyweb is an end-to-end real-world web page instrumentation and measurement suite.http://code.google.com/p/jiffy-web/
7) dynaTrace Ajax Edition is a unique AJAX diagnostics too suite for analyzing and debugging AJAX Requestshttp://ajax.dynatrace.com/pages/
8) Pagespeed is a Firefox Add-on from Google for diagnosing Web page performance based on a proposed set of best-practices http://code.google.com/speed/page-speed/
9) SproutCore is a platform for building HTML5 High Performance Web Applicationshttp://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster
10) Cuzillion is a tool for quickly constructing web pages to see how components interact across different browsers http://www.stevesouders.com/cuzillion/help.php
10 Ways to Improve Your Web Page Speed and
1. Profile your web pages to find the culprits.
2. Save images in the right format to reduce their file size.
There are three common web image file formats: JPEG, GIF, and PNG. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos).
Minification is the process of removing unneeded characters (such as tabs, spaces, source code comments) from the source code to reduce its file size.
For every component that’s needed to render a web page, an HTTP request is created to the server. So, if you have five CSS files for a web page, you would need at least five separate HTTP GET requests for that particular web page. By combining files, you reduce the HTTP request overhead required to generate a web page.
5. Use CSS sprites to reduce HTTP requests
A CSS Sprite is a combination of smaller images into one big image. To display the correct image, you adjust the background-position CSS attribute. Combining multiple images in this way reduces HTTP requests.
6. Use server-side compression to reduce file sizes
This can be tricky if you’re on a shared web host that doesn’t already server-side compression, but to fully optimize the serving of page components they should be compressed. Compressing page objects is similar to zipping up a large file that you send through email: You (web server) zip up a large family picture (the page component) and email it to your friend (the browser) – they in turn unpack your ZIP file to see the picture. Popular compression methods are Deflate and gzip.
8. Offload site assets and features
Unloading some of your site assets and features to third-party web services greatly reduces the work of your web server. The principle of offloading site assets and features is that you share the burden of serving page components with another server.
9. Use Cuzillion to plan out an optimal web page structure
Cuzillion is a web-based application created by Steve Souders (front-end engineer for Google after leaving Yahoo! as Chief of Performance) that helps you experiment with different configurations of a web page’s structure in order to see what the optimal structure is. If you already have a web page design, you can use Cuzillion to simulate your web page’s structure and then tweak it to see if you can improve performance by moving things around.
10. Monitor web server performance and create benchmarks regularly.
The web server is the brains of the operation – it’s responsible for getting/sending HTTP requests/responses to the right people and serves all of your web page components. If your web server isn’t performing well, you won’t get the maximum benefit of your optimization efforts.
JAVED ISAAC FROM MULTAN